banhaten 0.1.3 → 0.2.0

package/registry/examples/checkbox-demo.tsx

@@ -8,8 +8,8 @@ export function CheckboxDemo() {
   const [checked, setChecked] = React.useState(true)
 
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-center gap-4">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-3xl-16)]">
         <Checkbox
           checked={checked}
           onCheckedChange={(value) => setChecked(value === true)}
@@ -20,7 +20,7 @@ export function CheckboxDemo() {
         <Checkbox disabled aria-label="Disabled option" />
       </div>
 
-      <div className="grid gap-3">
+      <div className="grid gap-[var(--bh-space-xl-12)]">
         <CheckboxCard
           checked
           label="Label"
@@ -40,7 +40,7 @@ export function CheckboxDemo() {
         />
       </div>
 
-      <div dir="rtl" className="grid gap-3">
+      <div dir="rtl" className="grid gap-[var(--bh-space-xl-12)]">
         <CheckboxCard
           checked
           label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
@@ -58,5 +58,5 @@ export function CheckboxDemo() {
 }
 
 function UserLineIcon() {
-  return <UserIcon aria-hidden="true" focusable="false" strokeWidth={2.1} />
+  return <UserIcon aria-hidden="true" focusable="false" strokeWidth="var(--bh-icon-stroke-210)" />
 }

package/registry/examples/collection-filter-bar-demo.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+
+import { DatePicker } from "@/components/ui/date-picker"
+import { Field, FieldLabel } from "@/components/ui/field"
+import {
+  Select,
+  SelectMenuItem,
+} from "@/components/ui/select"
+import {
+  ToolbarButton,
+  ToolbarSearch,
+} from "@/components/ui/toolbar"
+
+const typeLabels = {
+  everything: "Everything",
+  articles: "Articles",
+  videos: "Videos",
+}
+
+const orderLabels = {
+  recent: "Recently bookmarked",
+  oldest: "Oldest bookmarked",
+  title: "Title",
+}
+
+export function CollectionFilterBarDemo() {
+  const [typeFilter, setTypeFilter] = React.useState<keyof typeof typeLabels>(
+    "everything"
+  )
+  const [order, setOrder] = React.useState<keyof typeof orderLabels>("recent")
+  const [dateRevision, setDateRevision] = React.useState(0)
+
+  return (
+    <form
+      aria-label="Collection filters"
+      data-recipe="collection-filter-bar"
+      className="grid w-full min-w-0 gap-[var(--bh-space-xl-12)] rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] shadow-[var(--shadow-component-default)]"
+      onReset={() => {
+        setTypeFilter("everything")
+        setOrder("recent")
+        setDateRevision((revision) => revision + 1)
+      }}
+    >
+      <ToolbarSearch
+        aria-label="Search bookmarks"
+        density="default"
+        placeholder="Search words, people, or folders"
+        shortcutKeys={["Mod", "F"]}
+        width="full"
+      />
+
+      <div className="flex min-w-0 flex-wrap items-end gap-[var(--bh-space-xl-12)]">
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-from"
+        >
+          <FieldLabel tone="subtle">From</FieldLabel>
+          <DatePicker
+            key={`from-${dateRevision}`}
+            className="w-full"
+            density="default"
+            placeholder="dd/mm/yyyy"
+            triggerClassName="w-full"
+            triggerProps={{ id: "collection-filter-from" }}
+          />
+        </Field>
+
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-to"
+        >
+          <FieldLabel tone="subtle">To</FieldLabel>
+          <DatePicker
+            key={`to-${dateRevision}`}
+            className="w-full"
+            density="default"
+            placeholder="dd/mm/yyyy"
+            triggerClassName="w-full"
+            triggerProps={{ id: "collection-filter-to" }}
+          />
+        </Field>
+
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-type"
+        >
+          <FieldLabel tone="subtle">Type</FieldLabel>
+          <Select
+            className="w-full"
+            density="default"
+            onValueChange={(value) =>
+              setTypeFilter(value as keyof typeof typeLabels)
+            }
+            selectValue={typeFilter}
+            triggerId="collection-filter-type"
+            value={typeLabels[typeFilter]}
+          >
+            <SelectMenuItem label="Everything" value="everything" />
+            <SelectMenuItem label="Articles" value="articles" />
+            <SelectMenuItem label="Videos" value="videos" />
+          </Select>
+        </Field>
+
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-order"
+        >
+          <FieldLabel tone="subtle">Order</FieldLabel>
+          <Select
+            className="w-full"
+            density="default"
+            onValueChange={(value) =>
+              setOrder(value as keyof typeof orderLabels)
+            }
+            selectValue={order}
+            triggerId="collection-filter-order"
+            value={orderLabels[order]}
+          >
+            <SelectMenuItem label="Recently bookmarked" value="recent" />
+            <SelectMenuItem label="Oldest bookmarked" value="oldest" />
+            <SelectMenuItem label="Title" value="title" />
+          </Select>
+        </Field>
+
+        <div className="flex items-end">
+          <ToolbarButton density="default" type="reset" variant="link">
+            Reset
+          </ToolbarButton>
+        </div>
+      </div>
+    </form>
+  )
+}

package/registry/examples/command-demo.tsx

@@ -19,12 +19,12 @@ export function CommandDemo() {
         <CommandEmpty>No results found.</CommandEmpty>
         <CommandGroup heading="Pages">
           <CommandItem value="profile">
-            <UserIcon className="size-4" />
+            <UserIcon className="size-[var(--bh-space-3xl-16)]" />
             Profile
             <CommandShortcut>⌘P</CommandShortcut>
           </CommandItem>
           <CommandItem value="docs">
-            <FileTextIcon className="size-4" />
+            <FileTextIcon className="size-[var(--bh-space-3xl-16)]" />
             Docs
             <CommandShortcut>⌘D</CommandShortcut>
           </CommandItem>
@@ -32,7 +32,7 @@ export function CommandDemo() {
         <CommandSeparator />
         <CommandGroup heading="Actions">
           <CommandItem value="settings">
-            <SettingsIcon className="size-4" />
+            <SettingsIcon className="size-[var(--bh-space-3xl-16)]" />
             Settings
           </CommandItem>
         </CommandGroup>

package/registry/examples/{expanded/command-bar-demo.tsx → command-palette-demo.tsx}

@@ -21,7 +21,7 @@ import { Avatar, AvatarIcon, AvatarStatus } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
-  Menu,
+  MenuPreview,
   MenuItem,
   MenuItemDescription,
   MenuItemText,
@@ -34,7 +34,6 @@ import {
   ToolbarSearch,
   ToolbarSection,
 } from "@/components/ui/toolbar"
-import { CommandBar } from "@/components/ui/expanded/CommandBar"
 
 type ToolTone = "neutral" | "blue" | "green" | "amber" | "purple" | "sky"
 type ToolIcon = React.ComponentType<React.SVGProps<SVGSVGElement>>
@@ -96,16 +95,7 @@ const toolToneClassNames: Record<ToolTone, string> = {
   sky: "text-[var(--bh-content-accent-sky-default)]",
 }
 
-export function CommandBarDemo() {
-  return (
-    <div className="grid gap-6">
-      <CommandBar />
-      <CommandBar type="results" />
-    </div>
-  )
-}
-
-export function AddToolPickerExample() {
+export function CommandPaletteDemo() {
   return (
     <ModalSurface
       aria-label="Add tool command example"
@@ -197,7 +187,7 @@ function ToolRow({ item }: { item: ToolItem }) {
   const tone = item.tone ?? "neutral"
 
   return (
-    <Menu
+    <MenuPreview
       aria-label={`${item.title} tool action`}
       className="w-full bg-transparent p-0 shadow-none"
       width="auto"
@@ -217,7 +207,7 @@ function ToolRow({ item }: { item: ToolItem }) {
             ].join(" ")}
             size="lg"
           >
-            <Icon aria-hidden="true" strokeWidth={2} />
+            <Icon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-200)" />
           </AvatarIcon>
           {item.added ? <AvatarStatus size="small" status="available" /> : null}
         </Avatar>
@@ -241,6 +231,6 @@ function ToolRow({ item }: { item: ToolItem }) {
           ) : null}
         </MenuItemText>
       </MenuItem>
-    </Menu>
+    </MenuPreview>
   )
 }

package/registry/examples/context-menu-demo.tsx

@@ -11,7 +11,7 @@ import {
 export function ContextMenuDemo() {
   return (
     <ContextMenu>
-      <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-xl border border-dashed border-[var(--bh-border-default)] text-sm">
+      <ContextMenuTrigger className="flex h-[var(--bh-space-12xl-128)] w-[var(--bh-space-16xl-256)] items-center justify-center rounded-xl border border-dashed border-[var(--bh-border-default)] text-sm">
         Right click
       </ContextMenuTrigger>
       <ContextMenuContent>

package/registry/examples/control-density-contract-demo.tsx

@@ -0,0 +1,61 @@
+import { Button } from "@/components/ui/button"
+import { DatePicker } from "@/components/ui/date-picker"
+import { Input } from "@/components/ui/input"
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from "@/components/ui/segmented-control"
+import { Select } from "@/components/ui/select"
+import { ToolbarSearch } from "@/components/ui/toolbar"
+
+const densities = ["compact", "default", "comfortable"] as const
+
+export function ControlDensityContractDemo() {
+  return (
+    <div
+      id="control-density-contract"
+      className="grid w-full min-w-0 gap-[var(--bh-space-3xl-16)]"
+    >
+      {densities.map((density) => (
+        <section
+          key={density}
+          data-control-density-row={density}
+          className="grid min-w-0 gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-default)] p-[var(--bh-space-xl-12)]"
+        >
+          <p className="font-mono text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] uppercase text-[var(--bh-content-subtle)]">
+            {density}
+          </p>
+          <div className="flex min-w-0 flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+            <Input
+              density={density}
+              hasHelperText={false}
+              hasLabel={false}
+              placeholder="Input"
+            />
+            <Select density={density} value="Select" />
+            <DatePicker
+              density={density}
+              placeholder="Date"
+              triggerProps={{ "aria-label": `${density} date` }}
+            />
+            <Button density={density}>Button</Button>
+            <SegmentedControl
+              aria-label={`${density} view`}
+              defaultValue="grid"
+              density={density}
+            >
+              <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
+              <SegmentedControlItem value="list">List</SegmentedControlItem>
+            </SegmentedControl>
+            <ToolbarSearch
+              aria-label={`${density} search`}
+              density={density}
+              placeholder="Search"
+              width="compact"
+            />
+          </div>
+        </section>
+      ))}
+    </div>
+  )
+}

package/registry/examples/date-picker-demo.tsx

@@ -13,15 +13,15 @@ const selectedRange: CalendarRange = {
 }
 
 const staticPopoverClassName =
-  "static left-auto top-auto mt-2 translate-x-0"
+  "static left-auto top-auto mt-[var(--bh-space-md-8)] translate-x-0"
 const datePickerClassName =
   "w-[var(--bh-date-surface-width-picker)] max-w-full"
 const dateRangePickerClassName = "w-max max-w-none"
 
 export function DatePickerDemo() {
   return (
-    <div className="grid gap-8">
-      <div className="grid gap-6 lg:grid-cols-[repeat(auto-fit,minmax(260px,max-content))]">
+    <div className="grid gap-[var(--bh-space-6xl-32)]">
+      <div className="grid gap-[var(--bh-space-5xl-24)] lg:grid-cols-[repeat(auto-fit,minmax(calc(var(--bh-space-16xl-256)_+_var(--bh-space-xs-4)),max-content))]">
         <div data-date-demo-item>
           <Calendar value={selectedDate} />
         </div>
@@ -30,7 +30,7 @@ export function DatePickerDemo() {
         </div>
       </div>
 
-      <div className="grid gap-6 xl:grid-cols-2">
+      <div className="grid gap-[var(--bh-space-5xl-24)] xl:grid-cols-2">
         <div data-date-demo-item>
           <DatePicker
             calendarProps={{ className: staticPopoverClassName }}
@@ -48,7 +48,7 @@ export function DatePickerDemo() {
         </div>
       </div>
 
-      <div className="grid gap-6 xl:grid-cols-2">
+      <div className="grid gap-[var(--bh-space-5xl-24)] xl:grid-cols-2">
         <div data-date-demo-item>
           <DatePicker
             calendarProps={{ className: staticPopoverClassName }}
@@ -69,7 +69,7 @@ export function DatePickerDemo() {
         </div>
       </div>
 
-      <div className="grid gap-6 overflow-x-auto">
+      <div className="grid gap-[var(--bh-space-5xl-24)] overflow-x-auto">
         <div data-date-demo-item>
           <RangeCalendar value={selectedRange} />
         </div>
@@ -81,15 +81,15 @@ export function DatePickerDemo() {
         </div>
       </div>
 
-      <div className="grid gap-6 xl:grid-cols-2">
-        <div data-date-demo-item className="overflow-x-auto pb-2">
+      <div className="grid gap-[var(--bh-space-5xl-24)] xl:grid-cols-2">
+        <div data-date-demo-item className="overflow-x-auto pb-[var(--bh-space-md-8)]">
           <DateRangePicker
             calendarProps={{ className: staticPopoverClassName }}
             className={dateRangePickerClassName}
             value={selectedRange}
           />
         </div>
-        <div data-date-demo-item className="overflow-x-auto pb-2" dir="rtl">
+        <div data-date-demo-item className="overflow-x-auto pb-[var(--bh-space-md-8)]" dir="rtl">
           <DateRangePicker
             calendarProps={{ className: staticPopoverClassName }}
             className={dateRangePickerClassName}
@@ -100,8 +100,8 @@ export function DatePickerDemo() {
         </div>
       </div>
 
-      <div className="grid gap-6">
-        <div data-date-demo-item className="overflow-x-auto pb-2">
+      <div className="grid gap-[var(--bh-space-5xl-24)]">
+        <div data-date-demo-item className="overflow-x-auto pb-[var(--bh-space-md-8)]">
           <DateRangePicker
             calendarProps={{ className: staticPopoverClassName }}
             className={dateRangePickerClassName}
@@ -110,7 +110,7 @@ export function DatePickerDemo() {
             value={selectedRange}
           />
         </div>
-        <div data-date-demo-item className="overflow-x-auto pb-2" dir="rtl">
+        <div data-date-demo-item className="overflow-x-auto pb-[var(--bh-space-md-8)]" dir="rtl">
           <DateRangePicker
             calendarProps={{ className: staticPopoverClassName }}
             className={dateRangePickerClassName}

package/registry/examples/divider-demo.tsx

@@ -2,13 +2,13 @@ import { Divider } from "@/components/ui/divider"
 
 export function DividerDemo() {
   return (
-    <div className="grid gap-6">
-      <div className="grid gap-4">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="grid gap-[var(--bh-space-3xl-16)]">
         <Divider />
         <Divider type="dotted" />
       </div>
 
-      <div className="flex h-[var(--bh-space-15xl-224)] items-start gap-6">
+      <div className="flex h-[var(--bh-space-15xl-224)] items-start gap-[var(--bh-space-5xl-24)]">
         <Divider direction="vertical" type="dotted" />
         <Divider direction="vertical" />
       </div>

package/registry/examples/expanded/banner-demo.tsx

@@ -20,7 +20,7 @@ const rtlBannerDemoCopy = {
 
 export function BannerDemo() {
   return (
-    <div className="grid gap-4">
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
       <Banner {...bannerDemoCopy} />
       <Banner {...bannerDemoCopy} type="single-action-inline" />
       <Banner {...bannerDemoCopy} size="full-width" type="single-action" />

package/registry/examples/expanded/breadcrumbs-demo.tsx

@@ -29,7 +29,7 @@ const rtlBreadcrumbItems: BreadcrumbItem[] = [
 
 export function BreadcrumbsDemo() {
   return (
-    <div className="grid gap-4">
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
       <Breadcrumbs aria-label="Breadcrumb" items={breadcrumbItems} overflowLabel="More" />
       <Breadcrumbs
         aria-label="Breadcrumb"

package/registry/examples/expanded/empty-state-demo.tsx

@@ -19,7 +19,7 @@ const inboxActions: EmptyStateAction[] = [
 
 export function EmptyStateDemo() {
   return (
-    <div className="grid gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
       <EmptyState
         actions={searchActions}
         description="Try adjusting your search or filters"

package/registry/examples/expanded/file-upload-demo.tsx

@@ -37,7 +37,7 @@ const uploadFiles: FileUploadFile[] = [
 
 export function FileUploadDemo() {
   return (
-    <div className="grid items-start gap-5 xl:grid-cols-2">
+    <div className="grid items-start gap-[var(--bh-space-4xl-20)] xl:grid-cols-2">
       <FileUpload
         files={uploadFiles}
         multiple

package/registry/examples/expanded/onboarding-step-demo.tsx

@@ -2,7 +2,7 @@ import { OnboardingStepListItem } from "@/components/ui/expanded/OnboardingStepL
 
 export function OnboardingStepDemo() {
   return (
-    <div className="flex gap-2">
+    <div className="flex gap-[var(--bh-space-md-8)]">
       <OnboardingStepListItem label="Finished" state="finished" />
       <OnboardingStepListItem label="Active" state="active" />
       <OnboardingStepListItem label="Inactive" state="inactive" />

package/registry/examples/expanded/slideout-demo.tsx

@@ -1,4 +1,4 @@
-import { Slideout, SlideoutFiltersExample } from "@/components/ui/expanded/Slideout"
+import { Slideout } from "@/components/ui/expanded/Slideout"
 
 export function SlideoutDemo() {
   return (
@@ -9,7 +9,7 @@ export function SlideoutDemo() {
       secondaryActionLabel="Cancel"
       title="Heading"
     >
-      <SlideoutFiltersExample />
+      <p>Slideout content</p>
     </Slideout>
   )
 }

package/registry/examples/expanded/steps-demo.tsx

@@ -21,7 +21,7 @@ const stepItems: StepItem[] = Array.from({ length: 6 }, (_, index) => ({
 
 export function StepsDemo() {
   return (
-    <div className="grid gap-8">
+    <div className="grid gap-[var(--bh-space-6xl-32)]">
       <Steps items={stepItems} />
       <Steps direction="vertical" items={stepItems} />
     </div>

package/registry/examples/expanded/tabs-demo.tsx

@@ -4,7 +4,7 @@ const tabItems = ["Overview", "Details", "Settings", "Activity", "Files"]
 
 export function TabsDemo() {
   return (
-    <div className="grid gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
       <Tabs ariaLabel="Tabs" items={tabItems} />
       <Tabs ariaLabel="Tabs" items={tabItems} variant="segment" />
       <Tabs ariaLabel="Tabs" items={tabItems} variant="rounded" />

package/registry/examples/expanded/timeline-demo.tsx

@@ -10,7 +10,7 @@ const timelineSteps: TimelineStep[] = Array.from({ length: 6 }, (_, index) => ({
 
 export function TimelineDemo() {
   return (
-    <div className="grid gap-8">
+    <div className="grid gap-[var(--bh-space-6xl-32)]">
       <Timeline ariaLabel="Timeline" steps={timelineSteps} />
       <Timeline ariaLabel="Timeline" orientation="horizontal" steps={timelineSteps} />
     </div>

package/registry/examples/hover-card-demo.tsx

@@ -7,11 +7,11 @@ import {
 export function HoverCardDemo() {
   return (
     <HoverCard>
-      <HoverCardTrigger className="underline underline-offset-4">
+      <HoverCardTrigger className="underline underline-offset-[var(--bh-space-xs-4)]">
         Workspace profile
       </HoverCardTrigger>
       <HoverCardContent>
-        <div className="grid gap-1">
+        <div className="grid gap-[var(--bh-space-xs-4)]">
           <strong>Design System</strong>
           <span className="text-sm text-[var(--bh-content-subtle)]">
             Tokens, components, and RTL-ready examples.

package/registry/examples/input-demo.tsx

@@ -34,15 +34,15 @@ const demoRtlInputProps = {
 
 export function InputDemo() {
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-start gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <Input {...demoInputProps} />
         <Input {...demoInputProps} state="filled" />
         <Input {...demoInputProps} state="error" />
         <Input {...demoInputProps} state="disabled" />
       </div>
 
-      <div className="flex flex-wrap items-start gap-6">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <Input {...demoInputProps} kind="shortcut" />
         <Input {...demoInputProps} kind="add-on" />
         <Input {...demoInputProps} kind="inline-add-on" />
@@ -55,7 +55,7 @@ export function InputDemo() {
         />
       </div>
 
-      <div className="flex flex-wrap items-start gap-6">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <Input {...demoInputProps} kind="leading-dropdown" />
         <Input {...demoInputProps} kind="trailing-dropdown" />
         <Input {...demoInputProps} kind="leading-button" />
@@ -64,13 +64,13 @@ export function InputDemo() {
         <Input {...demoInputProps} kind="quantity-2" state="filled" valueText="1" />
       </div>
 
-      <div className="flex flex-wrap items-start gap-6">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <Input {...demoInputProps} size="md" />
         <Input {...demoInputProps} size="md" variant="soft" />
         <Input {...demoInputProps} size="md" variant="soft" state="error" />
       </div>
 
-      <div dir="rtl" className="flex flex-wrap items-start gap-6">
+      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <Input {...demoRtlInputProps} dir="rtl" />
         <Input {...demoRtlInputProps} dir="rtl" state="filled" />
         <Input {...demoRtlInputProps} dir="rtl" state="error" />

package/registry/examples/input-otp-demo.tsx

@@ -2,8 +2,8 @@ import { InputOTP } from "@/components/ui/input-otp"
 
 export function InputOTPDemo() {
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-start gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <InputOTP
           label="Verification code"
           message="Enter the code from your authenticator."
@@ -27,7 +27,7 @@ export function InputOTPDemo() {
         />
       </div>
 
-      <div className="flex flex-wrap items-start gap-6">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <InputOTP
           defaultValue="482159"
           label="Masked code"
@@ -52,7 +52,7 @@ export function InputOTPDemo() {
         />
       </div>
 
-      <div dir="rtl" className="flex flex-wrap items-start gap-6">
+      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <InputOTP
           defaultValue="482159"
           dir="rtl"

package/registry/examples/item-demo.tsx

@@ -0,0 +1,46 @@
+import { ChevronRightIcon, FileTextIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "@/components/ui/item"
+
+export function ItemDemo() {
+  return (
+    <ItemGroup aria-label="Recent documents">
+      <Item role="listitem" variant="outline">
+        <ItemMedia>
+          <FileTextIcon aria-hidden="true" />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Launch checklist</ItemTitle>
+          <ItemDescription>Updated five minutes ago</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button aria-label="Open Launch checklist" size="icon" variant="ghost">
+            <ChevronRightIcon aria-hidden="true" data-rtl-flip="true" />
+          </Button>
+        </ItemActions>
+      </Item>
+      <ItemSeparator />
+      <div dir="rtl">
+        <Item role="listitem" variant="muted">
+          <ItemMedia>
+            <FileTextIcon aria-hidden="true" />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>{"\u062e\u0637\u0629 \u0627\u0644\u0625\u0637\u0644\u0627\u0642"}</ItemTitle>
+            <ItemDescription>{"\u062a\u0645 \u0627\u0644\u062a\u062d\u062f\u064a\u062b \u0645\u0646\u0630 \u062e\u0645\u0633 \u062f\u0642\u0627\u0626\u0642"}</ItemDescription>
+          </ItemContent>
+        </Item>
+      </div>
+    </ItemGroup>
+  )
+}