banhaten 0.5.0 → 0.6.0

package/registry/components/collapsible.tsx

@@ -1,109 +1,109 @@
-"use client"
-
-import * as React from "react"
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-type CollapsibleProps = React.ComponentProps<typeof CollapsiblePrimitive.Root>
-type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<
-  typeof CollapsiblePrimitive.Trigger
->
-type CollapsibleContentProps = React.ComponentPropsWithoutRef<
-  typeof CollapsiblePrimitive.Content
->
-type CollapsiblePanelProps = CollapsibleContentProps
-
-const Collapsible = CollapsiblePrimitive.Root
-
-const CollapsibleTrigger = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.Trigger>,
-  CollapsibleTriggerProps
->(function CollapsibleTrigger({ asChild, children, className, ...props }, ref) {
-  // With asChild the consumer supplies and styles the trigger element.
-  if (asChild) {
-    return (
-      <CollapsiblePrimitive.Trigger
-        asChild
-        data-slot="collapsible-trigger"
-        ref={ref}
-        className={className}
-        {...props}
-      >
-        {children}
-      </CollapsiblePrimitive.Trigger>
-    )
-  }
-
-  return (
-    <CollapsiblePrimitive.Trigger
-      data-slot="collapsible-trigger"
-      ref={ref}
-      className={cn(
-        "group/collapsible-trigger flex w-full items-center justify-between gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-xl-12)] py-[var(--bh-space-lg-10)] text-start",
-        "text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)]",
-        "outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--elevation-button-focus)]",
-        className
-      )}
-      {...props}
-    >
-      <span className="min-w-0 flex-1" dir="auto">
-        {children}
-      </span>
-      <ChevronDownIcon
-        aria-hidden="true"
-        className="size-[var(--bh-space-3xl-16)] shrink-0 text-[var(--bh-content-subtle)] transition-transform group-data-[state=open]/collapsible-trigger:rotate-180"
-        strokeWidth="var(--bh-icon-stroke-200)"
-      />
-    </CollapsiblePrimitive.Trigger>
-  )
-})
-
-const CollapsibleContent = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.Content>,
-  CollapsibleContentProps
->(function CollapsibleContent({ className, ...props }, ref) {
-  return (
-    <CollapsiblePrimitive.Content
-      data-slot="collapsible-content"
-      ref={ref}
-      className={cn(
-        "overflow-hidden px-[var(--bh-space-xl-12)] pb-[var(--bh-space-xl-12)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-/**
- * Unstyled content that animates its height open and closed. Closed content
- * unmounts once the animation ends, so nothing in it can be focused or read.
- * Tune the motion with `--collapsible-panel-duration` and
- * `--collapsible-panel-easing`.
- */
-const CollapsiblePanel = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.Content>,
-  CollapsiblePanelProps
->(function CollapsiblePanel({ className, ...props }, ref) {
-  return (
-    <CollapsiblePrimitive.Content
-      data-slot="collapsible-panel"
-      ref={ref}
-      className={cn(
-        "overflow-hidden data-[state=closed]:animate-[collapsible-up_var(--collapsible-panel-duration,var(--bh-duration-moderate))_var(--collapsible-panel-easing,var(--bh-easing-emphasized))] data-[state=open]:animate-[collapsible-down_var(--collapsible-panel-duration,var(--bh-duration-moderate))_var(--collapsible-panel-easing,var(--bh-easing-emphasized))]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-export { Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger }
-export type {
-  CollapsibleContentProps,
-  CollapsiblePanelProps,
-  CollapsibleProps,
-  CollapsibleTriggerProps,
-}
+"use client"
+
+import * as React from "react"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type CollapsibleProps = React.ComponentProps<typeof CollapsiblePrimitive.Root>
+type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<
+  typeof CollapsiblePrimitive.Trigger
+>
+type CollapsibleContentProps = React.ComponentPropsWithoutRef<
+  typeof CollapsiblePrimitive.Content
+>
+type CollapsiblePanelProps = CollapsibleContentProps
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Trigger>,
+  CollapsibleTriggerProps
+>(function CollapsibleTrigger({ asChild, children, className, ...props }, ref) {
+  // With asChild the consumer supplies and styles the trigger element.
+  if (asChild) {
+    return (
+      <CollapsiblePrimitive.Trigger
+        asChild
+        data-slot="collapsible-trigger"
+        ref={ref}
+        className={className}
+        {...props}
+      >
+        {children}
+      </CollapsiblePrimitive.Trigger>
+    )
+  }
+
+  return (
+    <CollapsiblePrimitive.Trigger
+      data-slot="collapsible-trigger"
+      ref={ref}
+      className={cn(
+        "group/collapsible-trigger flex w-full items-center justify-between gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-xl-12)] py-[var(--bh-space-lg-10)] text-start",
+        "text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)]",
+        "outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--elevation-button-focus)]",
+        className
+      )}
+      {...props}
+    >
+      <span className="min-w-0 flex-1" dir="auto">
+        {children}
+      </span>
+      <ChevronDownIcon
+        aria-hidden="true"
+        className="size-[var(--bh-space-3xl-16)] shrink-0 text-[var(--bh-content-subtle)] transition-transform group-data-[state=open]/collapsible-trigger:rotate-180"
+        strokeWidth="var(--bh-icon-stroke-200)"
+      />
+    </CollapsiblePrimitive.Trigger>
+  )
+})
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Content>,
+  CollapsibleContentProps
+>(function CollapsibleContent({ className, ...props }, ref) {
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="collapsible-content"
+      ref={ref}
+      className={cn(
+        "overflow-hidden px-[var(--bh-space-xl-12)] pb-[var(--bh-space-xl-12)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+/**
+ * Unstyled content that animates its height open and closed. Closed content
+ * unmounts once the animation ends, so nothing in it can be focused or read.
+ * Tune the motion with `--collapsible-panel-duration` and
+ * `--collapsible-panel-easing`.
+ */
+const CollapsiblePanel = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Content>,
+  CollapsiblePanelProps
+>(function CollapsiblePanel({ className, ...props }, ref) {
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="collapsible-panel"
+      ref={ref}
+      className={cn(
+        "overflow-hidden data-[state=closed]:animate-[collapsible-up_var(--collapsible-panel-duration,var(--bh-duration-moderate))_var(--collapsible-panel-easing,var(--bh-easing-emphasized))] data-[state=open]:animate-[collapsible-down_var(--collapsible-panel-duration,var(--bh-duration-moderate))_var(--collapsible-panel-easing,var(--bh-easing-emphasized))]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+export { Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger }
+export type {
+  CollapsibleContentProps,
+  CollapsiblePanelProps,
+  CollapsibleProps,
+  CollapsibleTriggerProps,
+}

package/registry/components/command.tsx

@@ -1,208 +1,208 @@
-"use client"
-
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-type CommandProps = React.ComponentProps<typeof CommandPrimitive>
-type CommandInputProps = React.ComponentProps<typeof CommandPrimitive.Input>
-type CommandListProps = React.ComponentProps<typeof CommandPrimitive.List>
-type CommandEmptyProps = React.ComponentProps<typeof CommandPrimitive.Empty>
-type CommandGroupProps = React.ComponentProps<typeof CommandPrimitive.Group>
-type CommandItemProps = React.ComponentProps<typeof CommandPrimitive.Item>
-type CommandSeparatorProps = React.ComponentProps<
-  typeof CommandPrimitive.Separator
->
-type CommandShortcutProps = React.ComponentProps<"span">
-
-const Command = React.forwardRef<HTMLDivElement, CommandProps>(function Command(
-  { className, ...props },
-  ref
-) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      ref={ref}
-      className={cn(
-        "flex w-full max-w-[var(--bh-space-19xl-384)] flex-col overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--elevation-menu)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
-  function CommandInput({ className, placeholder = "Search or type a command", ...props }, ref) {
-    return (
-      <div
-        data-slot="command-input-wrapper"
-        className="flex h-[var(--bh-space-8xl-48)] items-center gap-[var(--bh-space-md-8)] border-b border-[var(--bh-border-subtle)] px-[var(--bh-space-3xl-16)]"
-      >
-        <SearchIcon
-          aria-hidden="true"
-          className="size-[var(--bh-space-5xl-24)] shrink-0 text-[var(--bh-content-muted)]"
-          strokeWidth="var(--bh-icon-stroke-200)"
-        />
-        <CommandPrimitive.Input
-          data-slot="command-input"
-          ref={ref}
-          placeholder={placeholder}
-          className={cn(
-            "h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none placeholder:text-[var(--bh-content-muted)] disabled:cursor-not-allowed disabled:text-[var(--bh-content-disabled)]",
-            className
-          )}
-          {...props}
-        />
-      </div>
-    )
-  }
-)
-
-const CommandList = React.forwardRef<HTMLDivElement, CommandListProps>(
-  function CommandList({ className, ...props }, ref) {
-    const listRef = React.useRef<HTMLDivElement | null>(null)
-    React.useLayoutEffect(() => {
-      listRef.current
-        ?.querySelector<HTMLElement>("[cmdk-list-sizer]")
-        ?.setAttribute("role", "presentation")
-    })
-
-    const setListRef = React.useCallback(
-      (node: HTMLDivElement | null) => {
-        listRef.current = node
-
-        if (typeof ref === "function") ref(node)
-        else if (ref) ref.current = node
-      },
-      [ref]
-    )
-
-    return (
-      <CommandPrimitive.List
-        data-slot="command-list"
-        ref={setListRef}
-        className={cn(
-          "max-h-[calc(var(--bh-space-19xl-384)+var(--bh-space-8xl-48))] overflow-y-auto overflow-x-hidden p-[var(--bh-space-md-8)]",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const CommandEmpty = React.forwardRef<HTMLDivElement, CommandEmptyProps>(
-  function CommandEmpty({ className, ...props }, ref) {
-    const emptyRef = React.useRef<HTMLDivElement | null>(null)
-    React.useLayoutEffect(() => {
-      emptyRef.current?.setAttribute("role", "option")
-      emptyRef.current?.setAttribute("aria-disabled", "true")
-      emptyRef.current?.setAttribute("aria-selected", "false")
-    })
-    const setEmptyRef = React.useCallback(
-      (node: HTMLDivElement | null) => {
-        emptyRef.current = node
-        if (typeof ref === "function") ref(node)
-        else if (ref) ref.current = node
-      },
-      [ref]
-    )
-
-    return (
-      <CommandPrimitive.Empty
-        data-slot="command-empty"
-        ref={setEmptyRef}
-        className={cn(
-          "py-[var(--bh-space-8xl-48)] text-center text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
-  function CommandGroup({ className, ...props }, ref) {
-    return (
-      <CommandPrimitive.Group
-        data-slot="command-group"
-        ref={ref}
-        className={cn(
-          "overflow-hidden p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] [&_[cmdk-group-heading]]:px-[var(--bh-space-md-8)] [&_[cmdk-group-heading]]:py-[var(--bh-space-sm-6)] [&_[cmdk-group-heading]]:text-[length:var(--bh-text-body-xs-medium-font-size)] [&_[cmdk-group-heading]]:font-[var(--bh-text-body-xs-medium-font-weight)] [&_[cmdk-group-heading]]:leading-[var(--bh-text-body-xs-medium-line-height)] [&_[cmdk-group-heading]]:tracking-[var(--bh-text-body-xs-medium-letter-spacing)] [&_[cmdk-group-heading]]:text-[var(--bh-content-muted)]",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
-  function CommandItem({ className, ...props }, ref) {
-    return (
-      <CommandPrimitive.Item
-        data-slot="command-item"
-        ref={ref}
-        className={cn(
-          "relative flex min-h-[var(--bh-space-8xl-48)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:text-[var(--bh-content-disabled)] data-[selected=true]:bg-[var(--bh-interactive-ghost-hover)]",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const CommandSeparator = React.forwardRef<
-  HTMLDivElement,
-  CommandSeparatorProps
->(function CommandSeparator({ className, ...props }, ref) {
-  return (
-    <div
-      data-slot="command-separator"
-      ref={ref}
-      role="presentation"
-      aria-hidden="true"
-      className={cn("-mx-[var(--bh-space-md-8)] my-[var(--bh-space-md-8)] h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
-      {...props}
-    />
-  )
-})
-
-function CommandShortcut({ className, ...props }: CommandShortcutProps) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "ms-auto text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-muted)]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-}
-export type {
-  CommandEmptyProps,
-  CommandGroupProps,
-  CommandInputProps,
-  CommandItemProps,
-  CommandListProps,
-  CommandProps,
-  CommandSeparatorProps,
-  CommandShortcutProps,
-}
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type CommandProps = React.ComponentProps<typeof CommandPrimitive>
+type CommandInputProps = React.ComponentProps<typeof CommandPrimitive.Input>
+type CommandListProps = React.ComponentProps<typeof CommandPrimitive.List>
+type CommandEmptyProps = React.ComponentProps<typeof CommandPrimitive.Empty>
+type CommandGroupProps = React.ComponentProps<typeof CommandPrimitive.Group>
+type CommandItemProps = React.ComponentProps<typeof CommandPrimitive.Item>
+type CommandSeparatorProps = React.ComponentProps<
+  typeof CommandPrimitive.Separator
+>
+type CommandShortcutProps = React.ComponentProps<"span">
+
+const Command = React.forwardRef<HTMLDivElement, CommandProps>(function Command(
+  { className, ...props },
+  ref
+) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      ref={ref}
+      className={cn(
+        "flex w-full max-w-[var(--bh-space-19xl-384)] flex-col overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--elevation-menu)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
+  function CommandInput({ className, placeholder = "Search or type a command", ...props }, ref) {
+    return (
+      <div
+        data-slot="command-input-wrapper"
+        className="flex h-[var(--bh-space-8xl-48)] items-center gap-[var(--bh-space-md-8)] border-b border-[var(--bh-border-subtle)] px-[var(--bh-space-3xl-16)]"
+      >
+        <SearchIcon
+          aria-hidden="true"
+          className="size-[var(--bh-space-5xl-24)] shrink-0 text-[var(--bh-content-muted)]"
+          strokeWidth="var(--bh-icon-stroke-200)"
+        />
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          ref={ref}
+          placeholder={placeholder}
+          className={cn(
+            "h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none placeholder:text-[var(--bh-content-muted)] disabled:cursor-not-allowed disabled:text-[var(--bh-content-disabled)]",
+            className
+          )}
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+
+const CommandList = React.forwardRef<HTMLDivElement, CommandListProps>(
+  function CommandList({ className, ...props }, ref) {
+    const listRef = React.useRef<HTMLDivElement | null>(null)
+    React.useLayoutEffect(() => {
+      listRef.current
+        ?.querySelector<HTMLElement>("[cmdk-list-sizer]")
+        ?.setAttribute("role", "presentation")
+    })
+
+    const setListRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        listRef.current = node
+
+        if (typeof ref === "function") ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref]
+    )
+
+    return (
+      <CommandPrimitive.List
+        data-slot="command-list"
+        ref={setListRef}
+        className={cn(
+          "max-h-[calc(var(--bh-space-19xl-384)+var(--bh-space-8xl-48))] overflow-y-auto overflow-x-hidden p-[var(--bh-space-md-8)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CommandEmpty = React.forwardRef<HTMLDivElement, CommandEmptyProps>(
+  function CommandEmpty({ className, ...props }, ref) {
+    const emptyRef = React.useRef<HTMLDivElement | null>(null)
+    React.useLayoutEffect(() => {
+      emptyRef.current?.setAttribute("role", "option")
+      emptyRef.current?.setAttribute("aria-disabled", "true")
+      emptyRef.current?.setAttribute("aria-selected", "false")
+    })
+    const setEmptyRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        emptyRef.current = node
+        if (typeof ref === "function") ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref]
+    )
+
+    return (
+      <CommandPrimitive.Empty
+        data-slot="command-empty"
+        ref={setEmptyRef}
+        className={cn(
+          "py-[var(--bh-space-8xl-48)] text-center text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
+  function CommandGroup({ className, ...props }, ref) {
+    return (
+      <CommandPrimitive.Group
+        data-slot="command-group"
+        ref={ref}
+        className={cn(
+          "overflow-hidden p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] [&_[cmdk-group-heading]]:px-[var(--bh-space-md-8)] [&_[cmdk-group-heading]]:py-[var(--bh-space-sm-6)] [&_[cmdk-group-heading]]:text-[length:var(--bh-text-body-xs-medium-font-size)] [&_[cmdk-group-heading]]:font-[var(--bh-text-body-xs-medium-font-weight)] [&_[cmdk-group-heading]]:leading-[var(--bh-text-body-xs-medium-line-height)] [&_[cmdk-group-heading]]:tracking-[var(--bh-text-body-xs-medium-letter-spacing)] [&_[cmdk-group-heading]]:text-[var(--bh-content-muted)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
+  function CommandItem({ className, ...props }, ref) {
+    return (
+      <CommandPrimitive.Item
+        data-slot="command-item"
+        ref={ref}
+        className={cn(
+          "relative flex min-h-[var(--bh-space-8xl-48)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:text-[var(--bh-content-disabled)] data-[selected=true]:bg-[var(--bh-interactive-ghost-hover)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CommandSeparator = React.forwardRef<
+  HTMLDivElement,
+  CommandSeparatorProps
+>(function CommandSeparator({ className, ...props }, ref) {
+  return (
+    <div
+      data-slot="command-separator"
+      ref={ref}
+      role="presentation"
+      aria-hidden="true"
+      className={cn("-mx-[var(--bh-space-md-8)] my-[var(--bh-space-md-8)] h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
+      {...props}
+    />
+  )
+})
+
+function CommandShortcut({ className, ...props }: CommandShortcutProps) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ms-auto text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-muted)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+}
+export type {
+  CommandEmptyProps,
+  CommandGroupProps,
+  CommandInputProps,
+  CommandItemProps,
+  CommandListProps,
+  CommandProps,
+  CommandSeparatorProps,
+  CommandShortcutProps,
+}