Extract UI components into shared @repo/shadcn package and add Base UI wrappers

apps/ui-layout/components/website/ui/button.tsx

@@ -1,59 +1,2 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input dark:bg-neutral-800 bg-neutral-50 hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-        uilayouts:
-          'dark:bg-zinc-900 bg-neutral-200 dark:text-white text-black border dark:border-neutral-800',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
+export { Button, buttonVariants } from '@repo/shadcn'
+export type { ButtonProps } from '@repo/shadcn'

apps/ui-layout/package.json

@@ -77,7 +77,11 @@
     "unist-util-visit": "^5.1.0",
     "vaul": "^1.0.0",
     "zod": "^3.23.8",
-    "zustand": "5.0.0-rc.2"
+    "zustand": "5.0.0-rc.2",
+    "@base-ui-components/react": "^1.0.0-beta.3",
+    "@radix-ui/react-accordion": "^1.2.4",
+    "@radix-ui/react-collapsible": "^1.1.4",
+    "@radix-ui/react-separator": "^1.1.4"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.14",

packages/shadcn/package.json

@@ -21,7 +21,18 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.344.0",
     "react-day-picker": "^8.10.1",
-    "tailwind-merge": "^2.6.0"
+    "tailwind-merge": "^2.6.0",
+    "@base-ui-components/react": "^1.0.0-beta.3",
+    "@radix-ui/react-accordion": "^1.2.4",
+    "@radix-ui/react-collapsible": "^1.1.4",
+    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-toggle": "^1.1.11",
+    "@radix-ui/react-toggle-group": "^1.1.12"
   },
   "peerDependencies": {
     "react": "^19.1.4",

packages/shadcn/src/base-ui/accordion.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import * as React from 'react'
+import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'
+import { ChevronDown } from 'lucide-react'
+
+const cx = (...classes: Array<string | undefined>) => classes.filter(Boolean).join(' ')
+
+function Root({ className, ...props }: React.ComponentProps<typeof BaseAccordion.Root> & { className?: string }) {
+  return <BaseAccordion.Root className={cx('w-full', className)} {...props} />
+}
+
+function Item({ className, ...props }: React.ComponentProps<typeof BaseAccordion.Item> & { className?: string }) {
+  return <BaseAccordion.Item className={cx('border-b', className)} {...props} />
+}
+
+function Trigger({ className, children, ...props }: React.ComponentProps<typeof BaseAccordion.Trigger> & { className?: string }) {
+  return (
+    <BaseAccordion.Header>
+      <BaseAccordion.Trigger
+        className={cx('flex w-full items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline', className)}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="h-4 w-4 shrink-0 transition-transform data-[panel-open]:rotate-180" />
+      </BaseAccordion.Trigger>
+    </BaseAccordion.Header>
+  )
+}
+
+function Content({ className, children, ...props }: React.ComponentProps<typeof BaseAccordion.Panel> & { className?: string }) {
+  return (
+    <BaseAccordion.Panel className={cx('overflow-hidden text-sm', className)} {...props}>
+      <div className="pb-4 pt-0">{children}</div>
+    </BaseAccordion.Panel>
+  )
+}
+
+export const BaseUiAccordion = { Root, Item, Trigger, Content }

packages/shadcn/src/base-ui/alert-dialog.tsx

@@ -0,0 +1 @@
+export * from '../ui/alert-dialog'

packages/shadcn/src/base-ui/alert.tsx

@@ -0,0 +1 @@
+export * from '../ui/alert'

packages/shadcn/src/base-ui/aspect-ratio.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `aspect-ratio`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/aspect-ratio'

packages/shadcn/src/base-ui/badge.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `badge`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/badge'

packages/shadcn/src/base-ui/button.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `button`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/button'

packages/shadcn/src/base-ui/calendar.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `calendar`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/calendar'

packages/shadcn/src/base-ui/card.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `card`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/card'

packages/shadcn/src/base-ui/charts.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `charts`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/charts'

packages/shadcn/src/base-ui/checkbox.tsx

@@ -0,0 +1 @@
+export * from '../ui/checkbox'

packages/shadcn/src/base-ui/collapsible.tsx

@@ -0,0 +1 @@
+export * from '../ui/collapsible'

packages/shadcn/src/base-ui/combobox.tsx

@@ -0,0 +1 @@
+export * from '../ui/combobox'

packages/shadcn/src/base-ui/command.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `command`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/command'

packages/shadcn/src/base-ui/context-menu.tsx

@@ -0,0 +1 @@
+export * from '../ui/context-menu'

packages/shadcn/src/base-ui/date-picker.tsx

@@ -0,0 +1 @@
+export * from '../ui/date-picker'

packages/shadcn/src/base-ui/dialog.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `dialog`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/dialog'

packages/shadcn/src/base-ui/drawer.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `drawer`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/drawer'

packages/shadcn/src/base-ui/dropdown.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `dropdown`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/dropdown'

packages/shadcn/src/base-ui/form.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `form`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/form'

packages/shadcn/src/base-ui/hover-card.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `hover-card`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/hover-card'

packages/shadcn/src/base-ui/index.tsx

@@ -0,0 +1,42 @@
+export * from './accordion'
+export * from './aspect-ratio'
+export * from './badge'
+export * from './button'
+export * from './calendar'
+export * from './card'
+export * from './charts'
+export * from './command'
+export * from './dialog'
+export * from './drawer'
+export * from './dropdown'
+export * from './form'
+export * from './hover-card'
+export * from './input'
+export * from './label'
+export * from './navigation-menu'
+export * from './plastic-button'
+export * from './popover'
+export * from './scroll-area'
+export * from './slider'
+export * from './switch'
+export * from './tabs'
+export * from './toast'
+export * from './tooltip'
+export * from './alert'
+export * from './alert-dialog'
+export * from './checkbox'
+export * from './collapsible'
+export * from './context-menu'
+export * from './date-picker'
+export * from './menubar'
+export * from './progress'
+export * from './radio-group'
+export * from './select'
+export * from './separator'
+export * from './sheet'
+export * from './skeleton'
+export * from './sonner'
+export * from './textarea'
+export * from './toggle'
+export * from './toggle-group'
+export * from './combobox'

packages/shadcn/src/base-ui/input.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `input`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/input'

packages/shadcn/src/base-ui/label.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `label`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/label'

packages/shadcn/src/base-ui/menubar.tsx

@@ -0,0 +1 @@
+export * from '../ui/menubar'

packages/shadcn/src/base-ui/navigation-menu.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `navigation-menu`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/navigation-menu'

packages/shadcn/src/base-ui/plastic-button.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `plastic-button`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/plastic-button'

packages/shadcn/src/base-ui/popover.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `popover`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/popover'

packages/shadcn/src/base-ui/progress.tsx

@@ -0,0 +1 @@
+export * from '../ui/progress'

packages/shadcn/src/base-ui/radio-group.tsx

@@ -0,0 +1 @@
+export * from '../ui/radio-group'

packages/shadcn/src/base-ui/scroll-area.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `scroll-area`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/scroll-area'

packages/shadcn/src/base-ui/select.tsx

@@ -0,0 +1 @@
+export * from '../ui/select'

packages/shadcn/src/base-ui/separator.tsx

@@ -0,0 +1 @@
+export * from '../ui/separator'

packages/shadcn/src/base-ui/sheet.tsx

@@ -0,0 +1 @@
+export * from '../ui/sheet'

packages/shadcn/src/base-ui/skeleton.tsx

@@ -0,0 +1 @@
+export * from '../ui/skeleton'

packages/shadcn/src/base-ui/slider.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `slider`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/slider'

packages/shadcn/src/base-ui/sonner.tsx

@@ -0,0 +1 @@
+export * from '../ui/sonner'

packages/shadcn/src/base-ui/switch.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `switch`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/switch'

packages/shadcn/src/base-ui/tabs.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `tabs`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/tabs'

packages/shadcn/src/base-ui/textarea.tsx

@@ -0,0 +1 @@
+export * from '../ui/textarea'

packages/shadcn/src/base-ui/toast.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `toast`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/toast'

packages/shadcn/src/base-ui/toggle-group.tsx

@@ -0,0 +1 @@
+export * from '../ui/toggle-group'

packages/shadcn/src/base-ui/toggle.tsx

@@ -0,0 +1 @@
+export * from '../ui/toggle'

packages/shadcn/src/base-ui/tooltip.tsx

@@ -0,0 +1,3 @@
+// Base UI variant placeholder for `tooltip`.
+// This currently re-exports the Radix/shadcn implementation to keep API parity.
+export * from '../ui/tooltip'

packages/shadcn/src/index.tsx

@@ -1 +1,4 @@
 export * from './ui'
+
+export * from './base-ui/accordion'
+export * from './base-ui'

packages/shadcn/src/ui/accordion.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className='flex'>
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className='h-4 w-4 shrink-0 transition-transform duration-200' />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className='overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

packages/shadcn/src/ui/alert-dialog.tsx

@@ -0,0 +1,11 @@
+import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose } from './dialog'
+
+const AlertDialog = Dialog
+const AlertDialogTrigger = DialogTrigger
+const AlertDialogContent = DialogContent
+const AlertDialogTitle = DialogTitle
+const AlertDialogDescription = DialogDescription
+const AlertDialogCancel = DialogClose
+const AlertDialogAction = DialogClose
+
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction }

packages/shadcn/src/ui/alert.tsx

@@ -0,0 +1,11 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva('relative w-full rounded-lg border p-4', { variants: { variant: { default: 'bg-background text-foreground', destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive' } }, defaultVariants: { variant: 'default' } })
+export const Alert = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>>(({ className, variant, ...props }, ref) => <div ref={ref} role='alert' className={cn(alertVariants({ variant }), className)} {...props} />)
+Alert.displayName = 'Alert'
+export const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />)
+AlertTitle.displayName='AlertTitle'
+export const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />)
+AlertDescription.displayName='AlertDescription'

packages/shadcn/src/ui/checkbox.tsx

@@ -0,0 +1,7 @@
+'use client'
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+export const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>>(({ className, ...props }, ref)=><CheckboxPrimitive.Root ref={ref} className={cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', className)} {...props}><CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}><Check className='h-4 w-4'/></CheckboxPrimitive.Indicator></CheckboxPrimitive.Root>)
+Checkbox.displayName=CheckboxPrimitive.Root.displayName

packages/shadcn/src/ui/collapsible.tsx

@@ -0,0 +1,2 @@
+'use client'
+export * from '@radix-ui/react-collapsible'