@cero-base/panel 0.0.1

package/src/components/sidebar.jsx

@@ -0,0 +1,151 @@
+import { useSchemaByScope } from '../hooks/use-schema'
+import { useRoomSelection } from '../hooks/use-rooms'
+import { ScrollArea } from './ui/scroll-area'
+import { Badge } from './ui/badge'
+import { Button } from './ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'
+import { cn } from '../lib/utils'
+import { Database, Lock, Users, Plus } from 'lucide-react'
+
+function CollectionItem({ collection, selected, onSelect }) {
+  const isSelected = selected?.name === collection.name
+  return (
+    <button
+      onClick={() => onSelect(collection)}
+      className={cn(
+        'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors',
+        'hover:bg-accent hover:text-accent-foreground',
+        isSelected && 'bg-accent text-accent-foreground'
+      )}
+    >
+      <span className='flex-1 truncate'>{collection.name}</span>
+      <Badge variant='outline' className='text-[10px] px-1 py-0'>
+        {collection.key.length > 0 ? collection.key.join('+') : 'auto'}
+      </Badge>
+    </button>
+  )
+}
+
+function CollectionSection({ title, icon: Icon, collections, selected, onSelect }) {
+  if (collections.length === 0) return null
+
+  return (
+    <div className='space-y-1'>
+      <div className='flex items-center gap-2 px-2 py-1 text-xs font-medium text-muted-foreground'>
+        <Icon className='size-3.5' />
+        <span>{title}</span>
+        <span className='ml-auto text-[10px]'>{collections.length}</span>
+      </div>
+      <div className='space-y-0.5'>
+        {collections.map((c) => (
+          <CollectionItem key={c.name} collection={c} selected={selected} onSelect={onSelect} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function RoomPicker({ rooms, selected, onSelect, onCreate, loading }) {
+  if (loading) {
+    return <div className='px-2 py-1.5 text-xs text-muted-foreground'>Loading rooms...</div>
+  }
+
+  return (
+    <div className='flex items-center gap-1 px-2 py-1'>
+      <Select value={selected?.key?.toString('hex') || ''} onValueChange={(key) => onSelect(key)}>
+        <SelectTrigger size='sm' className='flex-1 h-6 text-[11px]'>
+          <SelectValue placeholder='Select room...' />
+        </SelectTrigger>
+        <SelectContent>
+          {rooms.map((room) => (
+            <SelectItem
+              key={room.key?.toString('hex') || room.id}
+              value={room.key?.toString('hex') || room.id}
+            >
+              {room.name || room.key?.toString('hex').slice(0, 8) || 'Unnamed'}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Button
+        variant='ghost'
+        size='icon-sm'
+        className='size-6'
+        onClick={onCreate}
+        title='Create room'
+      >
+        <Plus className='size-3' />
+      </Button>
+    </div>
+  )
+}
+
+export function Sidebar({ db, selected, onSelect, room, onRoomChange }) {
+  const { local, private: privateColls, shared } = useSchemaByScope(db)
+  const { rooms, loading: roomsLoading, select: selectRoom, createRoom } = useRoomSelection(db)
+
+  const onRoomSelect = async (key) => {
+    const room = await selectRoom(key)
+    onRoomChange(room)
+  }
+
+  const onCreateRoom = async () => {
+    const room = await createRoom()
+    if (room) {
+      onRoomChange(room)
+    }
+  }
+
+  return (
+    <div className='flex h-full flex-col border-r border-border/50'>
+      <div className='flex items-center gap-2 border-b border-border/50 px-3 py-2'>
+        <Database className='size-4 text-muted-foreground' />
+        <span className='text-sm font-medium'>Collections</span>
+      </div>
+      <ScrollArea className='flex-1'>
+        <div className='space-y-4 p-2'>
+          <CollectionSection
+            title='Local'
+            icon={Database}
+            collections={local}
+            selected={selected}
+            onSelect={onSelect}
+          />
+          <CollectionSection
+            title='Private'
+            icon={Lock}
+            collections={privateColls}
+            selected={selected}
+            onSelect={onSelect}
+          />
+          {shared.length > 0 && (
+            <div className='space-y-1'>
+              <div className='flex items-center gap-2 px-2 py-1 text-xs font-medium text-muted-foreground'>
+                <Users className='size-3.5' />
+                <span>Shared</span>
+                <span className='ml-auto text-[10px]'>{shared.length}</span>
+              </div>
+              <RoomPicker
+                rooms={rooms}
+                selected={room}
+                onSelect={onRoomSelect}
+                onCreate={onCreateRoom}
+                loading={roomsLoading}
+              />
+              <div className='space-y-0.5'>
+                {shared.map((c) => (
+                  <CollectionItem
+                    key={c.name}
+                    collection={c}
+                    selected={selected}
+                    onSelect={onSelect}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}

package/src/components/ui/avatar.jsx

@@ -0,0 +1,38 @@
+import { cn } from '../../lib/utils'
+
+function Avatar({ className, ...props }) {
+  return (
+    <span
+      className={cn('relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, src, alt, ...props }) {
+  if (!src) return null
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={cn('aspect-square h-full w-full object-cover', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({ className, children, ...props }) {
+  return (
+    <span
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-muted text-xs font-medium',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/ui/badge.jsx

@@ -0,0 +1,26 @@
+import { cva } from 'class-variance-authority'
+
+import { cn } from '../../lib/utils'
+
+const badgeVariants = cva(
+  "focus:ring-ring/30 inline-flex w-fit shrink-0 items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus:ring-[2px] focus:outline-hidden [&_svg:not([class*='size-'])]:size-3 gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground border-transparent',
+        secondary: 'bg-secondary text-secondary-foreground border-transparent',
+        destructive: 'bg-destructive/10 text-destructive border-transparent',
+        outline: 'text-foreground'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+function Badge({ className, variant, ...props }) {
+  return <span data-slot='badge' className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.jsx

@@ -0,0 +1,51 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import { cva } from 'class-variance-authority'
+
+import { cn } from '../../lib/utils'
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-semibold focus-visible:ring-[2px] aria-invalid:ring-[2px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none antialiased",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+        outline:
+          'border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 focus-visible:border-destructive/40',
+        link: 'text-primary underline-offset-4 hover:underline'
+      },
+      size: {
+        default:
+          "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
+        sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
+        icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
+        'icon-xs': "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
+        'icon-sm': "size-6 [&_svg:not([class*='size-'])]:size-3",
+        'icon-lg': "size-8 [&_svg:not([class*='size-'])]:size-4"
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+function Button({ className, variant = 'default', size = 'default', ...props }) {
+  return (
+    <ButtonPrimitive
+      data-slot='button'
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/checkbox.jsx

@@ -0,0 +1,43 @@
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
+import { Check, Minus } from 'lucide-react'
+
+import { cn } from '../../lib/utils'
+
+function Checkbox({ className, ...props }) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot='checkbox'
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[checked]:bg-primary data-[checked]:text-primary-foreground dark:data-[checked]:bg-primary data-[checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 size-4 shrink-0 rounded-sm border shadow-xs transition-shadow focus-visible:ring-[2px] aria-invalid:ring-[2px] disabled:cursor-not-allowed disabled:opacity-50 outline-none',
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className='flex items-center justify-center text-current transition-none'>
+        <Check className='size-3.5' />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+function CheckboxIndeterminate({ className, ...props }) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot='checkbox'
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[checked]:bg-primary data-[checked]:text-primary-foreground dark:data-[checked]:bg-primary data-[checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 size-4 shrink-0 rounded-sm border shadow-xs transition-shadow focus-visible:ring-[2px] aria-invalid:ring-[2px] disabled:cursor-not-allowed disabled:opacity-50 outline-none',
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className='flex items-center justify-center text-current transition-none'
+        keepMounted
+      >
+        {props.indeterminate ? <Minus className='size-3.5' /> : <Check className='size-3.5' />}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox, CheckboxIndeterminate }

package/src/components/ui/dialog.jsx

@@ -0,0 +1,126 @@
+import * as React from 'react'
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
+
+import { cn } from '../../lib/utils'
+import { Button } from './button'
+import { X } from 'lucide-react'
+
+function Dialog({ ...props }) {
+  return <DialogPrimitive.Root data-slot='dialog' {...props} />
+}
+
+function DialogTrigger({ ...props }) {
+  return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />
+}
+
+function DialogPortal({ ...props }) {
+  return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />
+}
+
+function DialogClose({ ...props }) {
+  return <DialogPrimitive.Close data-slot='dialog-close' {...props} />
+}
+
+function DialogOverlay({ className, ...props }) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot='dialog-overlay'
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  overlayClassName,
+  hideOverlay = false,
+  ...props
+}) {
+  return (
+    <DialogPortal>
+      {!hideOverlay && <DialogOverlay className={overlayClassName} />}
+      <DialogPrimitive.Popup
+        data-slot='dialog-content'
+        className={cn(
+          'bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 shadow-2xl dark:border dark:border-white/15 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-6 text-xs/relaxed duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none overflow-hidden',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot='dialog-close'
+            render={<Button variant='ghost' className='absolute top-4 right-4' size='icon-sm' />}
+          >
+            <X className='size-4' />
+            <span className='sr-only'>Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }) {
+  return (
+    <div data-slot='dialog-header' className={cn('gap-1 flex flex-col', className)} {...props} />
+  )
+}
+
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+  return (
+    <div
+      data-slot='dialog-footer'
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant='outline' />}>Close</DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }) {
+  return (
+    <DialogPrimitive.Title
+      data-slot='dialog-title'
+      className={cn('text-lg font-bold antialiased', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({ className, ...props }) {
+  return (
+    <DialogPrimitive.Description
+      data-slot='dialog-description'
+      className={cn(
+        'text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+}

package/src/components/ui/dropdown-menu.jsx

@@ -0,0 +1,213 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu'
+
+import { cn } from '../../lib/utils'
+import { ChevronRightIcon, CheckIcon } from 'lucide-react'
+
+function DropdownMenu({ ...props }) {
+  return <MenuPrimitive.Root data-slot='dropdown-menu' {...props} />
+}
+
+function DropdownMenuPortal({ ...props }) {
+  return <MenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }) {
+  return <MenuPrimitive.Trigger data-slot='dropdown-menu-trigger' {...props} />
+}
+
+function DropdownMenuContent({
+  align = 'start',
+  alignOffset = 0,
+  side = 'bottom',
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className='isolate z-9999 outline-none'
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot='dropdown-menu-content'
+          className={cn(
+            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',
+            className
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }) {
+  return <MenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
+}
+
+function DropdownMenuLabel({ className, inset, ...props }) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot='dropdown-menu-label'
+      data-inset={inset}
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
+  return (
+    <MenuPrimitive.Item
+      data-slot='dropdown-menu-item'
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }) {
+  return <MenuPrimitive.SubmenuRoot data-slot='dropdown-menu-sub' {...props} />
+}
+
+function DropdownMenuSubTrigger({ className, inset, children, hideChevron, ...props }) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot='dropdown-menu-sub-trigger'
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {!hideChevron && <ChevronRightIcon className='ml-auto' />}
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = 'start',
+  alignOffset = -3,
+  side = 'right',
+  sideOffset = 0,
+  className,
+  ...props
+}) {
+  return (
+    <DropdownMenuContent
+      data-slot='dropdown-menu-sub-content'
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 w-auto',
+        className
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot='dropdown-menu-checkbox-item'
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className='pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none'
+        data-slot='dropdown-menu-checkbox-item-indicator'
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }) {
+  return <MenuPrimitive.RadioGroup data-slot='dropdown-menu-radio-group' {...props} />
+}
+
+function DropdownMenuRadioItem({ className, children, ...props }) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot='dropdown-menu-radio-item'
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className='pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none'
+        data-slot='dropdown-menu-radio-item-indicator'
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({ className, ...props }) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot='dropdown-menu-separator'
+      className={cn('bg-border/50 -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({ className, ...props }) {
+  return (
+    <span
+      data-slot='dropdown-menu-shortcut'
+      className={cn(
+        'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent
+}

package/src/components/ui/input.jsx

@@ -0,0 +1,19 @@
+import { Input as InputPrimitive } from '@base-ui/react/input'
+
+import { cn } from '../../lib/utils'
+
+function Input({ className, type, ...props }) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot='input'
+      className={cn(
+        'bg-input/20 dark:bg-input/30 border-input focus-visible:border-primary focus-visible:ring-primary/20 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:[color-scheme:dark]',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }