banhaten 0.1.3 → 0.3.0

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>
+  )
+}

package/registry/examples/kbd-demo.tsx

@@ -2,7 +2,7 @@ import { Kbd } from "@/components/ui/kbd"
 
 export function KbdDemo() {
   return (
-    <div className="flex flex-wrap items-center gap-2">
+    <div className="flex flex-wrap items-center gap-[var(--bh-space-md-8)]">
       <Kbd>⌘</Kbd>
       <Kbd>K</Kbd>
       <Kbd size="md">Shift</Kbd>

package/registry/examples/label-demo.tsx

@@ -3,7 +3,7 @@ import { Label } from "@/components/ui/label"
 
 export function LabelDemo() {
   return (
-    <div className="grid gap-4">
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
       <div className="flex items-center gap-[var(--bh-space-md-8)]">
         <Checkbox id="terms" />
         <Label htmlFor="terms">Accept terms and conditions</Label>

package/registry/examples/menu-demo.tsx

@@ -32,7 +32,7 @@ import {
 
 export function MenuDemo() {
   return (
-    <div className="flex min-h-[var(--bh-space-16xl-256)] items-start justify-center p-6">
+    <div className="flex min-h-[var(--bh-space-16xl-256)] items-start justify-center p-[var(--bh-space-5xl-24)]">
       <MenuRoot>
         <MenuTrigger asChild>
           <Button size="sm" variant="outline">

package/registry/examples/modal-demo.tsx

@@ -1,15 +1,73 @@
-import { Modal } from "@/components/ui/modal"
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import {
+  arabicModalMessages,
+  Modal,
+  ModalActionButton,
+  ModalActions,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalDescription,
+  ModalDivider,
+  ModalFooter,
+  ModalHeader,
+  ModalHeaderIcon,
+  ModalRoot,
+  ModalTitle,
+  ModalTrigger,
+} from "@/components/ui/modal"
 
 export function ModalDemo() {
+  // The Modal shorthand builds the whole structure from props, so it is driven
+  // by open state rather than a trigger child.
+  const [confirmOpen, setConfirmOpen] = React.useState(false)
+
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-start gap-6">
-        <Modal size="sm" />
-        <Modal size="default" />
-      </div>
-      <div className="flex flex-wrap items-start gap-6">
-        <Modal dir="rtl" size="sm" />
-        <Modal dir="rtl" size="default" />
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      {/* Compose the primitives when a control in the page opens the modal. */}
+      <ModalRoot>
+        <ModalTrigger asChild>
+          <Button variant="outline">Publish release</Button>
+        </ModalTrigger>
+        <ModalContent size="default">
+          <ModalHeader>
+            <ModalHeaderIcon />
+            <ModalTitle>Publish this release?</ModalTitle>
+            <ModalCloseButton />
+          </ModalHeader>
+          <ModalBody>
+            <ModalDescription>
+              Everyone on the team will see the new version immediately. You can
+              roll it back from the releases page.
+            </ModalDescription>
+          </ModalBody>
+          <ModalDivider />
+          <ModalFooter>
+            <ModalActions>
+              <ModalActionButton variant="soft">Cancel</ModalActionButton>
+              <ModalActionButton>Publish</ModalActionButton>
+            </ModalActions>
+          </ModalFooter>
+        </ModalContent>
+      </ModalRoot>
+
+      {/* `messages` localizes the chrome; `title` and `description` are your
+          content, so the caller always supplies them. */}
+      <div dir="rtl">
+        <Button onClick={() => setConfirmOpen(true)} variant="outline">
+          نشر الإصدار
+        </Button>
+        <Modal
+          description="راجع التفاصيل قبل المتابعة. يمكنك التراجع لاحقًا من صفحة الإصدارات."
+          dir="rtl"
+          messages={arabicModalMessages}
+          onOpenChange={setConfirmOpen}
+          open={confirmOpen}
+          size="default"
+          title="هل تريد نشر هذا الإصدار؟"
+        />
       </div>
     </div>
   )

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

@@ -15,7 +15,7 @@ export function NavigationMenuDemo() {
         <NavigationMenuItem>
           <NavigationMenuTrigger>Product</NavigationMenuTrigger>
           <NavigationMenuContent>
-            <div className="grid gap-2">
+            <div className="grid gap-[var(--bh-space-md-8)]">
               <NavigationMenuLink href="#">Components</NavigationMenuLink>
               <NavigationMenuLink href="#">Tokens</NavigationMenuLink>
               <NavigationMenuLink href="#">Patterns</NavigationMenuLink>

package/registry/examples/pagination-demo.tsx

@@ -1,16 +1,19 @@
-import { Pagination } from "@/components/ui/pagination"
+import {
+  arabicPaginationMessages,
+  Pagination,
+} from "@/components/ui/pagination"
 
 export function PaginationDemo() {
   return (
-    <div className="grid gap-6">
-      <Pagination />
-      <Pagination variant="ghost" />
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <Pagination aria-label="Soft numeric pagination" />
+      <Pagination aria-label="Ghost numeric pagination" variant="ghost" />
 
-      <Pagination type="simple" />
-      <Pagination type="summary" />
+      <Pagination aria-label="Simple pagination" type="simple" />
+      <Pagination aria-label="Summary pagination" type="summary" />
 
       <div dir="rtl">
-        <Pagination dir="rtl" />
+        <Pagination aria-label="ترقيم الصفحات العربية" dir="rtl" messages={arabicPaginationMessages} />
       </div>
     </div>
   )

package/registry/examples/popover-demo.tsx

@@ -19,7 +19,7 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
 import {
-  Menu,
+  MenuPreview,
   MenuItem,
   MenuItemIcon,
   MenuItemText,
@@ -46,8 +46,8 @@ const rtlDescription = "يظهر هذا المحتوى في الاتجاه من
 
 export function PopoverDemo() {
   return (
-    <div className="grid min-w-0 gap-4">
-      <div className="grid gap-4 xl:grid-cols-2 2xl:grid-cols-3">
+    <div className="grid min-w-0 gap-[var(--bh-space-3xl-16)]">
+      <div className="grid gap-[var(--bh-space-3xl-16)] xl:grid-cols-2 2xl:grid-cols-3">
         <PopoverExample title="Basic Bottom">
           <Popover defaultOpen>
             <PopoverTrigger asChild>
@@ -122,7 +122,7 @@ export function PopoverDemo() {
         </PopoverExample>
       </div>
 
-      <div className="grid gap-4 xl:grid-cols-2 2xl:grid-cols-3">
+      <div className="grid gap-[var(--bh-space-3xl-16)] xl:grid-cols-2 2xl:grid-cols-3">
         <PopoverExample title="Icon Button Trigger">
           <Popover defaultOpen>
             <PopoverTrigger asChild>
@@ -199,7 +199,7 @@ export function PopoverDemo() {
         </PopoverExample>
       </div>
 
-      <div className="grid gap-4 2xl:grid-cols-2">
+      <div className="grid gap-[var(--bh-space-3xl-16)] 2xl:grid-cols-2">
         <PopoverExample density="large" title="Large Content">
           <Popover defaultOpen>
             <PopoverTrigger asChild>
@@ -256,7 +256,7 @@ export function PopoverDemo() {
         </PopoverExample>
       </div>
 
-      <div className="grid gap-4 2xl:grid-cols-2">
+      <div className="grid gap-[var(--bh-space-3xl-16)] 2xl:grid-cols-2">
         <PopoverExample density="matrix" title="Arrow Alignment">
           <div className="grid min-w-[calc(var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-space-18xl-320))] grid-cols-3 place-items-start gap-[var(--bh-space-6xl-32)]">
             {(["start", "center", "end"] as const).map((align) => (
@@ -304,7 +304,7 @@ export function PopoverDemo() {
               </PopoverTrigger>
               <PopoverContent align="start" dir="rtl" side="right" size="md">
                 <PopoverHeader>
-                  <div className="grid min-w-0 gap-1">
+                  <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
                     <PopoverTitle>{rtlTitle}</PopoverTitle>
                     <PopoverDescription>{rtlDescription}</PopoverDescription>
                   </div>
@@ -337,14 +337,14 @@ function PopoverExample({
     <div
       data-popover-example={title}
       className={cn(
-        "rounded-md border border-border bg-background p-4",
+        "rounded-md border border-border bg-background p-[var(--bh-space-3xl-16)]",
         popoverExampleWidthClasses[density]
       )}
     >
       <p className="text-xs font-semibold text-muted-foreground">{title}</p>
       <div
         className={cn(
-          "mt-4 flex overflow-visible",
+          "mt-[var(--bh-space-3xl-16)] flex overflow-visible",
           popoverExampleStageHeightClasses[density],
           popoverExamplePlacementClasses[placement]
         )}
@@ -391,7 +391,7 @@ function LargeContent() {
   return (
     <>
       <PopoverHeader>
-        <div className="grid min-w-0 gap-1">
+        <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
           <PopoverTitle>Details</PopoverTitle>
           <PopoverDescription>
             Larger content can hold explanations, lists, images, and actions.
@@ -400,9 +400,9 @@ function LargeContent() {
         <PopoverClose />
       </PopoverHeader>
       <PopoverBody>
-        <div className="grid gap-3 rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-neutral-subtle)] p-3">
-          <div className="h-16 rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-raised)]" />
-          <div className="flex flex-wrap gap-2">
+        <div className="grid gap-[var(--bh-space-xl-12)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-neutral-subtle)] p-[var(--bh-space-xl-12)]">
+          <div className="h-[var(--bh-space-9xl-64)] rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-raised)]" />
+          <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
             <Badge color="green" type="dot">
               Ready
             </Badge>
@@ -424,7 +424,7 @@ function FilterContent() {
   return (
     <>
       <PopoverHeader>
-        <div className="grid min-w-0 gap-1">
+        <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
           <PopoverTitle>Status</PopoverTitle>
           <PopoverDescription>Narrow the table results.</PopoverDescription>
         </div>
@@ -438,10 +438,10 @@ function FilterContent() {
           placeholder="Search filters"
           size="md"
         />
-        <div className="grid gap-2">
+        <div className="grid gap-[var(--bh-space-md-8)]">
           {filterOptions.map((option, index) => (
             <label
-              className="flex items-center gap-2 text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-default)]"
+              className="flex items-center gap-[var(--bh-space-md-8)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-default)]"
               key={option}
             >
               <Checkbox defaultChecked={index === 0} />
@@ -472,7 +472,7 @@ function SettingsContent() {
   return (
     <>
       <PopoverHeader>
-        <div className="grid min-w-0 gap-1">
+        <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
           <PopoverTitle>Settings</PopoverTitle>
           <PopoverDescription>Update notification preferences.</PopoverDescription>
         </div>
@@ -501,7 +501,7 @@ function SettingsContent() {
 
 function ActionsContent() {
   return (
-    <Menu
+    <MenuPreview
       aria-label="Popover actions"
       className="w-[var(--bh-popover-action-width,var(--bh-menu-width))] bg-transparent py-0 shadow-none"
       width="auto"
@@ -541,6 +541,6 @@ function ActionsContent() {
           </MenuItemTitle>
         </MenuItemText>
       </MenuItem>
-    </Menu>
+    </MenuPreview>
   )
 }

package/registry/examples/progress-demo.tsx

@@ -2,7 +2,7 @@ import { Progress } from "@/components/ui/progress"
 
 export function ProgressDemo() {
   return (
-    <div className="grid w-full max-w-md gap-6">
+    <div className="grid w-full max-w-md gap-[var(--bh-space-5xl-24)]">
       <Progress
         aria-label="Upload progress"
         helperText="Preparing the final file"

package/registry/examples/progress-slider-demo.tsx

@@ -2,7 +2,7 @@ import { ProgressSlider } from "@/components/ui/progress-slider"
 
 export function ProgressSliderDemo() {
   return (
-    <div className="grid gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
       <ProgressSlider
         aria-label="Investment amount"
         defaultValue={28}

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

@@ -17,21 +17,21 @@ const radioCardRtlDemoProps = {
 
 export function RadioCardDemo() {
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-start gap-4">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]">
         <RadioCard {...radioCardDemoProps} type="with-icon" />
         <RadioCard {...radioCardDemoProps} type="icon-radio-right" />
         <RadioCard {...radioCardDemoProps} type="icon-radio-left" />
         <RadioCard {...radioCardDemoProps} type="radio-label" />
       </div>
 
-      <div className="flex flex-wrap items-start gap-4">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]">
         <RadioCard {...radioCardDemoProps} checked type="with-avatar" />
         <RadioCard {...radioCardDemoProps} checked type="payment" />
         <RadioCard {...radioCardDemoProps} checked type="company-icon" />
       </div>
 
-      <div className="flex flex-wrap items-start gap-4" dir="rtl">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]" dir="rtl">
         <RadioCard {...radioCardRtlDemoProps} direction="rtl" type="with-icon" />
         <RadioCard
           {...radioCardRtlDemoProps}

package/registry/examples/radio-group-demo.tsx

@@ -6,7 +6,7 @@ import {
 
 export function RadioGroupDemo() {
   return (
-    <div className="grid gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
       <RadioGroup
         defaultValue="monthly"
         description="Choose the cadence for generated invoices."
@@ -42,7 +42,7 @@ export function RadioGroupDemo() {
         <RadioGroupItem value="wallet" label="Wallet" />
       </RadioGroup>
 
-      <div className="grid gap-3">
+      <div className="grid gap-[var(--bh-space-xl-12)]">
         <RadioField
           defaultChecked
           label="Use as default"

package/registry/examples/resizable-demo.tsx

@@ -8,7 +8,7 @@ export function ResizableDemo() {
   return (
     <ResizablePanelGroup
       direction="horizontal"
-      className="h-48 rounded-xl border border-[var(--bh-border-subtle)]"
+      className="h-[var(--bh-space-14xl-192)] rounded-xl border border-[var(--bh-border-subtle)]"
     >
       <ResizablePanel defaultSize={35}>
         <div className="flex size-full items-center justify-center text-sm">Sidebar</div>

package/registry/examples/results-toolbar-demo.tsx

@@ -0,0 +1,44 @@
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  SegmentedControlLabel,
+} from "@/components/ui/segmented-control"
+import {
+  Toolbar,
+  ToolbarButton,
+  ToolbarSection,
+  ToolbarText,
+} from "@/components/ui/toolbar"
+
+export function ResultsToolbarDemo() {
+  return (
+    <Toolbar
+      aria-label="Bookmark results"
+      data-recipe="results-toolbar"
+      layout="split"
+      wrap
+    >
+      <ToolbarText density="default">
+        <strong>5,371</strong>&nbsp;bookmarks · keep scrolling to browse all
+      </ToolbarText>
+
+      <ToolbarSection align="end" wrap>
+        <SegmentedControl
+          aria-label="Cards per row"
+          defaultValue="4"
+          density="default"
+        >
+          <SegmentedControlLabel>Cards / row</SegmentedControlLabel>
+          {[3, 4, 5, 6].map((count) => (
+            <SegmentedControlItem key={count} value={String(count)}>
+              {count}
+            </SegmentedControlItem>
+          ))}
+        </SegmentedControl>
+        <ToolbarButton density="default" variant="outline">
+          Select
+        </ToolbarButton>
+      </ToolbarSection>
+    </Toolbar>
+  )
+}

package/registry/examples/scroll-area-demo.tsx

@@ -2,10 +2,10 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 
 export function ScrollAreaDemo() {
   return (
-    <ScrollArea className="h-48 w-72 rounded-xl border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
-      <div className="grid gap-2 p-4">
+    <ScrollArea className="h-[var(--bh-space-14xl-192)] w-[var(--bh-space-17xl-288)] rounded-xl border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
+      <div className="grid gap-[var(--bh-space-md-8)] p-[var(--bh-space-3xl-16)]">
         {Array.from({ length: 12 }, (_, index) => (
-          <div key={index} className="rounded-lg bg-[var(--bh-bg-neutral-subtle)] px-3 py-2 text-sm">
+          <div key={index} className="rounded-lg bg-[var(--bh-bg-neutral-subtle)] px-[var(--bh-space-xl-12)] py-[var(--bh-space-md-8)] text-sm">
             Activity item {index + 1}
           </div>
         ))}

package/registry/examples/segmented-control-demo.tsx

@@ -0,0 +1,39 @@
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  SegmentedControlLabel,
+} from "@/components/ui/segmented-control"
+
+export function SegmentedControlDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
+      <SegmentedControl
+        aria-label="Cards per row"
+        defaultValue="4"
+        density="default"
+      >
+        <SegmentedControlLabel>Cards / row</SegmentedControlLabel>
+        {[3, 4, 5, 6].map((count) => (
+          <SegmentedControlItem key={count} value={String(count)}>
+            {count}
+          </SegmentedControlItem>
+        ))}
+      </SegmentedControl>
+
+      <div dir="rtl">
+        <SegmentedControl
+          aria-label="عدد البطاقات في الصف"
+          defaultValue="4"
+          density="compact"
+        >
+          <SegmentedControlLabel>بطاقات / صف</SegmentedControlLabel>
+          {[3, 4, 5, 6].map((count) => (
+            <SegmentedControlItem key={count} value={String(count)}>
+              {count}
+            </SegmentedControlItem>
+          ))}
+        </SegmentedControl>
+      </div>
+    </div>
+  )
+}

package/registry/examples/select-demo.tsx

@@ -7,7 +7,7 @@ import {
 
 export function SelectDemo() {
   return (
-    <div className="grid gap-8">
+    <div className="grid gap-[var(--bh-space-6xl-32)]">
       <Select
         helperText="This is a hint text"
         label="Label"

package/registry/examples/sidebar-demo.tsx

@@ -17,7 +17,7 @@ import {
 
 export function SidebarDemo() {
   return (
-    <SidebarProvider className="flex h-80" defaultCollapsed={false}>
+    <SidebarProvider className="flex h-[var(--bh-space-18xl-320)]" defaultCollapsed={false}>
       <Sidebar>
         <SidebarHeader>
           <div className="min-w-0 flex-1 text-sm font-semibold group-data-[collapsed=true]/sidebar:hidden">
@@ -47,8 +47,10 @@ export function SidebarDemo() {
           <SidebarMenuButton icon={<SettingsIcon />}>Admin</SidebarMenuButton>
         </SidebarFooter>
       </Sidebar>
-      <SidebarInset className="grid place-items-center bg-[var(--bh-bg-subtle)] p-[var(--bh-space-4xl-20)] text-sm text-[var(--bh-content-subtle)]">
-        App content
+      <SidebarInset asChild>
+        <div className="grid min-w-0 flex-1 place-items-center bg-[var(--bh-bg-subtle)] p-[var(--bh-space-4xl-20)] text-sm text-[var(--bh-content-subtle)]">
+          App content
+        </div>
       </SidebarInset>
     </SidebarProvider>
   )

package/registry/examples/slider-demo.tsx

@@ -2,7 +2,7 @@ import { Slider } from "@/components/ui/slider"
 
 export function SliderDemo() {
   return (
-    <div className="grid gap-8">
+    <div className="grid gap-[var(--bh-space-6xl-32)]">
       <Slider
         aria-label="Budget amount"
         defaultValue={[40]}
@@ -17,10 +17,10 @@ export function SliderDemo() {
         minStepsBetweenThumbs={4}
       />
 
-      <div className="flex h-44 items-center">
+      <div className="flex h-[calc(var(--bh-space-13xl-160)_+_var(--bh-space-3xl-16))] items-center">
         <Slider
           aria-label="Risk tolerance"
-          className="h-40"
+          className="h-[var(--bh-space-13xl-160)]"
           defaultValue={[60]}
           orientation="vertical"
           tone="warning"