@gentleduck/registry-ui 0.2.1

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { checkersStylePattern } from '@gentleduck/motion/anim'
+import { useSvgIndicator } from '@gentleduck/primitives/checkers'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as React from 'react'
+import { Label } from '../label'
+import type { CheckboxGroupProps, CheckboxProps, CheckboxWithLabelProps, CheckedState } from './checkbox.types'
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      className,
+      indicator,
+      checkedIndicator,
+      style,
+      checked: controlledChecked,
+      defaultChecked = false,
+      onCheckedChange,
+      dir,
+      ...props
+    },
+    ref,
+  ) => {
+    const direction = useDirection(dir as Direction)
+    const { indicatorReady, checkedIndicatorReady, inputStyle, SvgIndicator } = useSvgIndicator({
+      checkedIndicator,
+      indicator,
+    })
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
+    const isControlled = controlledChecked !== undefined
+    const checked = isControlled ? controlledChecked : defaultChecked
+
+    const handleChange = (next: CheckedState) => {
+      onCheckedChange?.(next)
+    }
+
+    React.useEffect(() => {
+      if (ref && typeof ref !== 'function' && checked === 'indeterminate' && ref.current) {
+        ref.current.indeterminate = true
+        changeCheckedState(checked, ref.current)
+      }
+      changeCheckedState(checked, inputRef.current as HTMLInputElement)
+    }, [checked, ref])
+
+    function changeCheckedState(state: CheckedState, input: HTMLInputElement) {
+      if (state === 'indeterminate') {
+        input.indeterminate = true
+        input.checked = false
+      } else {
+        input.indeterminate = false
+        input.checked = state as boolean
+      }
+      input.setAttribute('data-checked', `${state}`)
+    }
+
+    return (
+      <>
+        <input
+          className={cn(
+            checkersStylePattern({
+              indicatorState:
+                indicatorReady && checkedIndicatorReady
+                  ? 'both'
+                  : indicatorReady
+                    ? 'indicatorReady'
+                    : checkedIndicatorReady
+                      ? 'checkedIndicatorReady'
+                      : 'default',
+              type: 'checkbox',
+            }),
+            'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+            '[&:before,&:after]:transition-gpu [&:before,&:after]:duration-[inherit] [&:before,&:after]:ease-[inherit] [&:before,&:after]:will-change-[inherit]',
+            (indicatorReady && checkedIndicatorReady) || indicatorReady
+              ? ''
+              : 'after:mb-0.5 after:h-2.25 after:w-1 after:rotate-45 after:border-[1.5px] after:border-t-0 after:border-l-0 after:bg-transparent',
+            'data-[checked="indeterminate"]:border-border data-[checked="indeterminate"]:bg-transparent data-[checked="indeterminate"]:text-foreground',
+            'rounded-sm bg-transparent',
+            className,
+          )}
+          data-slot="checkbox"
+          onChange={(e) => {
+            const nextChecked = e.target.checked ? true : e.target.indeterminate ? 'indeterminate' : false
+            e.target.indeterminate = false
+            changeCheckedState(nextChecked, e.target)
+            handleChange(nextChecked)
+          }}
+          ref={ref ?? inputRef}
+          dir={direction}
+          style={{ ...style, ...inputStyle }}
+          type="checkbox"
+          {...props}
+        />
+        <SvgIndicator className="sr-only" />
+      </>
+    )
+  },
+)
+Checkbox.displayName = 'Checkbox'
+
+const CheckboxWithLabel = React.forwardRef<HTMLDivElement, Omit<CheckboxWithLabelProps, 'ref'>>(
+  ({ id, _checkbox, _label, className, ...props }, ref) => {
+    const { className: labelClassName, ...labelProps } = _label
+    return (
+      <div
+        className={cn('flex items-center justify-start gap-2', className)}
+        ref={ref}
+        {...props}
+        data-slot="checkbox-with-label">
+        <Checkbox id={id} {..._checkbox} />
+        <Label className={cn('cursor-pointer', labelClassName)} htmlFor={id} {...labelProps} />
+      </div>
+    )
+  },
+)
+CheckboxWithLabel.displayName = 'CheckboxWithLabel'
+
+const CheckboxGroup = React.forwardRef<HTMLDivElement, Omit<CheckboxGroupProps, 'ref'>>(
+  ({ subtasks, subtasks_default_values, ...props }, ref) => {
+    const { _checkbox, _label } = subtasks_default_values || {}
+    return (
+      <div className={cn('mb-3 flex flex-col gap-2')} {...props} data-slot="checkbox-group" ref={ref}>
+        {subtasks.map(({ id, title, checked }) => (
+          <CheckboxWithLabel
+            _checkbox={{
+              ..._checkbox,
+              checked,
+              className: 'w-4 h-4 rounded-full border-muted-foreground/80',
+            }}
+            _label={{ ..._label, children: title }}
+            data-slot="checkbox-with-label"
+            id={id}
+            key={id}
+          />
+        ))}
+      </div>
+    )
+  },
+)
+CheckboxGroup.displayName = 'CheckboxGroup'
+
+export { Checkbox, CheckboxGroup, CheckboxWithLabel }

package/src/checkbox/checkbox.types.ts

@@ -0,0 +1,24 @@
+import type { Label } from '../label'
+import type { Checkbox } from './checkbox'
+
+export type CheckedState = boolean | 'indeterminate'
+
+export interface CheckboxProps
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'checked' | 'onChange' | 'defaultChecked'> {
+  indicator?: React.ReactElement
+  checkedIndicator?: React.ReactElement
+  checked?: CheckedState
+  defaultChecked?: CheckedState
+  onCheckedChange?: (checked: CheckedState) => void
+}
+
+export interface CheckboxWithLabelProps extends React.HTMLProps<HTMLDivElement> {
+  _checkbox: React.ComponentPropsWithoutRef<typeof Checkbox>
+  _label: React.ComponentPropsWithoutRef<typeof Label>
+}
+
+export type CheckboxGroupSubtasks = { id: string; title: string; checked?: CheckedState }
+export type CheckboxGroupProps = React.HTMLProps<HTMLDivElement> & {
+  subtasks: CheckboxGroupSubtasks[]
+  subtasks_default_values?: CheckboxWithLabelProps
+}

package/src/checkbox/index.ts

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

package/src/collapsible/collapsible.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import { MountMinimal } from '@gentleduck/primitives/mount'
+import * as React from 'react'
+import { Button } from '../button'
+
+const CollapsibleContext = React.createContext<{
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  wrapperRef: React.RefObject<HTMLDivElement | null>
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+  contentRef: React.RefObject<HTMLDivElement | null>
+  contentId: string
+} | null>(null)
+
+export function useCollapsible() {
+  const context = React.useContext(CollapsibleContext)
+  if (!context) {
+    throw new Error('useCollapsible must be used within a Collapsible')
+  }
+  return context
+}
+
+const Collapsible = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    defaultOpen?: boolean
+  }
+>(({ children, className, open: openProp, onOpenChange, defaultOpen, dir, ...props }, ref) => {
+  const direction = useDirection(dir as Direction)
+  const wrapperRef = React.useRef<HTMLDivElement>(null)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const [open, setOpen] = React.useState(openProp ?? defaultOpen ?? false)
+
+  const contentId = React.useId()
+
+  function handleOpenChange(state: boolean) {
+    setOpen(state)
+    onOpenChange?.(state)
+  }
+
+  React.useEffect(() => {
+    if (open) {
+      handleOpenChange(open)
+    }
+
+    function handleClick() {
+      const open = triggerRef.current?.getAttribute('data-open') === 'true'
+      onOpenChange?.(open)
+    }
+
+    triggerRef.current?.addEventListener('click', handleClick)
+    return () => triggerRef.current?.removeEventListener('click', handleClick)
+  }, [open])
+
+  return (
+    <CollapsibleContext.Provider
+      value={{ contentId, contentRef, onOpenChange: handleOpenChange, open, triggerRef, wrapperRef }}>
+      <div
+        className={cn('flex flex-col gap-2', className)}
+        dir={direction}
+        data-slot="collapsible"
+        ref={(node) => {
+          ;(wrapperRef as React.RefObject<HTMLDivElement | null>).current = node
+          if (typeof ref === 'function') {
+            ref(node)
+          } else if (ref) {
+            ref.current = node
+          }
+        }}
+        {...props}
+        data-open={open}>
+        {children}
+      </div>
+    </CollapsibleContext.Provider>
+  )
+})
+Collapsible.displayName = 'Collapsible'
+
+const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<typeof Button>>(
+  ({ children, onClick, ...props }, ref) => {
+    const { open, onOpenChange, triggerRef, contentId } = useCollapsible()
+
+    return (
+      <Button
+        aria-controls={contentId}
+        aria-expanded={open}
+        data-open={open}
+        data-slot="collapsible-trigger"
+        onClick={(e) => {
+          onOpenChange?.(!open)
+          onClick?.(e)
+        }}
+        ref={(node) => {
+          ;(triggerRef as React.RefObject<HTMLButtonElement | null>).current = node
+          if (typeof ref === 'function') {
+            ref(node)
+          } else if (ref) {
+            ref.current = node
+          }
+        }}
+        variant="ghost"
+        {...props}>
+        {children}
+      </Button>
+    )
+  },
+)
+CollapsibleTrigger.displayName = 'CollapsibleTrigger'
+
+const CollapsibleContent = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLDivElement> & { forceMount?: boolean }
+>(({ children, forceMount = false, className, ...props }, ref) => {
+  const { open, contentRef, contentId } = useCollapsible()
+
+  return (
+    <section
+      aria-hidden={!open}
+      className={cn(
+        'h-0 overflow-hidden transition-all data-[open=true]:h-auto',
+        'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+        className,
+      )}
+      data-open={open}
+      inert={!open || undefined}
+      data-slot="collapsible-content"
+      id={contentId}
+      ref={(node) => {
+        ;(contentRef as React.RefObject<HTMLDivElement | null>).current = node as HTMLDivElement
+        if (typeof ref === 'function') {
+          ref(node)
+        } else if (ref) {
+          ref.current = node
+        }
+      }}
+      {...props}>
+      <MountMinimal forceMount={forceMount} open={open} ref={contentRef as never}>
+        {children}
+      </MountMinimal>
+    </section>
+  )
+})
+CollapsibleContent.displayName = 'CollapsibleContent'
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/collapsible/index.ts

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

package/src/combobox/combobox.tsx

@@ -0,0 +1,132 @@
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import React from 'react'
+import { Badge } from '../badge'
+import { Button } from '../button'
+import { Checkbox } from '../checkbox'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../command'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+import { Separator } from '../separator'
+
+export type ComboboxItemType = {
+  label: string
+  value: string
+}
+
+export type ComboboxProps<TData extends readonly ComboboxItemType[], TType extends 'single' | 'multiple' = 'single'> = {
+  items: TData
+  onValueChange?: TType extends 'single'
+    ? (value: TData[number]['value']) => void
+    : (value: TData[number]['value'][]) => void
+  withSearch?: boolean
+  showSelected?: boolean
+  defaultValue?: TType extends 'single' ? TData[number]['value'] : TData[number]['value'][]
+  value?: TType extends 'single' ? TData[number]['value'] : TData[number]['value'][]
+  popover?: React.ComponentPropsWithoutRef<typeof Popover>
+  popoverTrigger?: React.ComponentPropsWithoutRef<typeof Button>
+  popoverContent?: React.ComponentPropsWithoutRef<typeof PopoverContent>
+  command?: React.ComponentPropsWithoutRef<typeof Command>
+  commandInput?: React.ComponentPropsWithoutRef<typeof CommandInput>
+  commandTriggerPlaceholder?: string
+  commandEmpty?: string
+  children: (item: TData) => React.ReactNode
+}
+
+export function Combobox<TData extends readonly ComboboxItemType[], TType extends 'single' | 'multiple' = 'single'>({
+  value,
+  defaultValue,
+  items,
+  command,
+  commandInput,
+  commandEmpty = 'Nothing found.',
+  commandTriggerPlaceholder = 'Select item...',
+  popover,
+  popoverTrigger,
+  popoverContent,
+  withSearch = true,
+  showSelected = true,
+  children,
+}: ComboboxProps<TData, TType>) {
+  const { dir, ...popoverProps } = popover ?? {}
+  const direction = useDirection(dir as Direction)
+  const MAX_SELECTION = 2
+  const _value = value ?? defaultValue
+
+  return (
+    <Popover {...popoverProps} dir={direction}>
+      <PopoverTrigger asChild>
+        <Button {...popoverTrigger} variant={popoverTrigger?.variant ?? 'dashed'}>
+          {popoverTrigger?.children}
+          {showSelected &&
+            (_value ? (
+              _value instanceof Array && _value.length ? (
+                <>
+                  <Separator orientation="vertical" />
+                  <div className="flex gap-1">
+                    {_value.length > MAX_SELECTION ? (
+                      <Badge className="px-2 py-0.75 rounded-sm font-normal" variant={'secondary'}>
+                        +{_value.length} Selected
+                      </Badge>
+                    ) : (
+                      _value.map((item) => (
+                        <Badge className="px-2 py-0.5 rounded-[3px] capitalize" key={item} variant={'secondary'}>
+                          {item}
+                        </Badge>
+                      ))
+                    )}
+                  </div>
+                </>
+              ) : (
+                _value
+              )
+            ) : (
+              commandTriggerPlaceholder
+            ))}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        {...popoverContent}
+        dir={direction}
+        className={cn('w-(--gentleduck-popover-trigger-width) p-0', popoverContent?.className)}>
+        <Command {...command}>
+          {withSearch && <CommandInput {...commandInput} className={cn('h-8 [&_svg]:size-4.5 px-2', commandInput)} />}
+          <CommandList>
+            {commandEmpty && <CommandEmpty>{commandEmpty}</CommandEmpty>}
+            {children(items)}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function ComboxGroup({ children, ...props }: React.ComponentPropsWithoutRef<typeof CommandGroup>) {
+  return <CommandGroup {...props}>{children}</CommandGroup>
+}
+
+type ComboboxItemProps<T extends ComboboxItemType> = Omit<
+  React.ComponentPropsWithoutRef<typeof CommandItem>,
+  'onSelect'
+> & {
+  item: T
+  onSelect?: (value: T['value']) => void
+  checked?: React.ComponentPropsWithoutRef<typeof Checkbox>['checked']
+}
+
+export function ComboboxItem<T extends ComboboxItemType>({ item, onSelect, checked, ...props }: ComboboxItemProps<T>) {
+  return (
+    <CommandItem
+      onSelect={() => {
+        onSelect?.(item.value)
+      }}
+      {...props}>
+      <Checkbox
+        aria-hidden="true"
+        checked={checked}
+        className="border-foreground/50 pointer-events-none"
+        tabIndex={-1}
+      />
+      {item?.label}
+    </CommandItem>
+  )
+}

package/src/combobox/index.ts

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

package/src/command/command.tsx

@@ -0,0 +1,192 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import * as CommandPrimitive from '@gentleduck/primitives/command'
+import { useKeyCommands } from '@gentleduck/vim/react'
+import { Search } from 'lucide-react'
+import * as React from 'react'
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '../dialog'
+import { ScrollArea } from '../scroll-area'
+import type { CommandBadgeProps } from './command.types'
+
+const Command = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Root
+    ref={ref}
+    data-slot="command"
+    className={cn(
+      'flex h-full w-full max-w-162.5 flex-col overflow-hidden rounded-md bg-popover p-2 text-popover-foreground shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.Root.displayName
+
+const CommandInput = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    wrapperClassName?: string
+  }
+>(({ className, wrapperClassName, placeholder = 'Search...', autoFocus = false, ...props }, ref) => (
+  <div className={cn('mb-2 flex items-center gap-2 border-b px-1', wrapperClassName)} data-slot="command-input">
+    <Search aria-hidden="true" className="size-5 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      autoFocus={autoFocus}
+      placeholder={placeholder}
+      className={cn(
+        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      // tabIndex={0}
+      {...props}
+    />
+  </div>
+))
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
+    scrollRef?: React.Ref<HTMLDivElement>
+  }
+>(({ className, scrollRef, ...props }, ref) => (
+  <ScrollArea
+    className="overflow-y-auto overflow-x-hidden"
+    data-slot="command-list"
+    viewportClassName="overflow-x-hidden"
+    viewportRef={scrollRef}>
+    <CommandPrimitive.List ref={ref} className={cn('max-h-75 focus:outline-none', className)} {...props} />
+  </ScrollArea>
+))
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    data-slot="command-empty"
+    className={cn('py-6 text-center text-sm', className)}
+    {...props}
+  />
+))
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    data-slot="command-group"
+    className={cn(
+      'overflow-hidden text-foreground *:data-[slot="command-group-heading"]:px-2 *:data-[slot="command-group-heading"]:py-1.5 *:data-[slot="command-group-heading"]:font-medium *:data-[slot="command-group-heading"]:text-muted-foreground *:data-[slot="command-group-heading"]:text-sm',
+      className,
+    )}
+    {...props}
+  />
+))
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandItem = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    data-slot="command-item"
+    className={cn(
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-color duration-300 hover:bg-muted hover:text-accent-foreground data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-50 [&_svg]:size-4',
+      className,
+    )}
+    {...props}
+  />
+))
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    data-slot="command-separator"
+    className={cn('-mx-1 my-2 h-px bg-secondary', className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+function CommandShortcut({
+  className,
+  keys,
+  onKeysPressed,
+  variant = 'default',
+  ref,
+  ...props
+}: CommandBadgeProps): React.JSX.Element {
+  const commands = React.useMemo(
+    () =>
+      keys && onKeysPressed
+        ? {
+            [keys]: {
+              description: keys,
+              execute: () => {
+                onKeysPressed()
+              },
+              name: keys,
+            },
+          }
+        : {},
+    [keys, onKeysPressed],
+  )
+
+  useKeyCommands(commands, { preventDefault: true })
+
+  return (
+    <kbd
+      className={cn(
+        'focus:offset-2 pointer-events-none ms-auto inline-flex cursor-none select-none items-center gap-0.5 rounded-sm px-2 py-[.12rem] font-sans text-secondary-foreground text-sm tracking-widest transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring [&_svg]:size-3',
+        variant === 'secondary' && 'bg-secondary',
+        className,
+      )}
+      data-slot="command-badge"
+      ref={ref}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({ children, ...props }: React.ComponentPropsWithRef<typeof Dialog>): React.JSX.Element {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="h-125 max-w-full p-0 lg:w-[700px]">
+        <DialogTitle className="sr-only">Command palette</DialogTitle>
+        <DialogDescription className="sr-only">Search for commands and navigation items</DialogDescription>
+        <Command className="max-w-full">{children}</Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function useCommandListContext(__scopeCommand: Parameters<typeof CommandPrimitive.useCommandContext>[1]) {
+  return CommandPrimitive.useCommandContext('Command', __scopeCommand)
+}
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+  CommandShortcut,
+  CommandSeparator,
+  CommandDialog,
+  useCommandListContext,
+}

package/src/command/command.types.ts

@@ -0,0 +1,11 @@
+/**
+ * Props for the CommandBadge component (also used as CommandShortcut).
+ * This component displays a badge that indicates the keyboard shortcut for a command.
+ */
+export interface CommandBadgeProps extends React.HTMLProps<HTMLElement> {
+  variant?: 'default' | 'secondary'
+  /** The keyboard shortcut keys (e.g., "ctrl+K"). */
+  keys?: string
+  /** Callback function that is invoked when the shortcut keys are pressed. */
+  onKeysPressed?: () => void
+}

package/src/command/index.ts

@@ -0,0 +1,2 @@
+export * from './command'
+export * from './command.types'