banhaten 0.1.2 → 0.2.0

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

@@ -0,0 +1,22 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+
+export function ResizableDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      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>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={65}>
+        <div className="flex size-full items-center justify-center text-sm">Content</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}

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

@@ -0,0 +1,15 @@
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+export function ScrollAreaDemo() {
+  return (
+    <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-[var(--bh-space-xl-12)] py-[var(--bh-space-md-8)] text-sm">
+            Activity item {index + 1}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}

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/sheet-demo.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button"
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
+
+export function SheetDemo() {
+  return (
+    <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+      {(["start", "end", "top", "bottom"] as const).map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button size="sm" variant="outline">
+              {side}
+            </Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>Workspace settings</SheetTitle>
+              <SheetDescription>
+                Review billing, access, and notification settings.
+              </SheetDescription>
+            </SheetHeader>
+            <SheetBody>
+              <div className="grid gap-[var(--bh-space-md-8)] 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)]">
+                <p>Sheets are suited to contextual workflows that need more space than a popover.</p>
+                <p>Use logical start and end sides so the panel mirrors in RTL surfaces.</p>
+              </div>
+            </SheetBody>
+            <SheetFooter>
+              <Button size="sm" variant="soft">
+                Cancel
+              </Button>
+              <Button size="sm">Save changes</Button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  )
+}

package/registry/examples/sidebar-demo.tsx

@@ -0,0 +1,55 @@
+import { HomeIcon, SettingsIcon, UsersIcon } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarBody,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar"
+
+export function SidebarDemo() {
+  return (
+    <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">
+            Banhaten
+          </div>
+          <SidebarTrigger />
+        </SidebarHeader>
+        <SidebarBody>
+          <SidebarGroup>
+            <SidebarGroupLabel>Workspace</SidebarGroupLabel>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton active icon={<HomeIcon />}>
+                  Overview
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton icon={<UsersIcon />}>Members</SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton icon={<SettingsIcon />}>Settings</SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarBody>
+        <SidebarFooter>
+          <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>
+    </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"

package/registry/examples/social-button-demo.tsx

@@ -1,4 +1,8 @@
-import { SocialButton, type SocialPlatform } from "@/components/ui/social-button"
+import {
+  arabicSocialButtonMessages,
+  SocialButton,
+  type SocialPlatform,
+} from "@/components/ui/social-button"
 
 const socialPlatforms: SocialPlatform[] = [
   "apple",
@@ -11,36 +15,42 @@ const socialPlatforms: SocialPlatform[] = [
 
 export function SocialButtonDemo() {
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-wrap items-center gap-3">
+    <div className="flex flex-col gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         {socialPlatforms.map((platform) => (
           <SocialButton key={platform} platform={platform} />
         ))}
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         {socialPlatforms.map((platform) => (
           <SocialButton key={platform} platform={platform} variant="outline" />
         ))}
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         {socialPlatforms.map((platform) => (
           <SocialButton key={platform} platform={platform} size="icon" />
         ))}
       </div>
 
-      <div dir="rtl" className="flex flex-wrap items-center gap-3">
+      <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         {socialPlatforms.map((platform) => (
-          <SocialButton key={platform} dir="rtl" platform={platform} />
+          <SocialButton
+            key={platform}
+            dir="rtl"
+            messages={arabicSocialButtonMessages}
+            platform={platform}
+          />
         ))}
       </div>
 
-      <div dir="rtl" className="flex flex-wrap items-center gap-3">
+      <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         {socialPlatforms.map((platform) => (
           <SocialButton
             key={platform}
             dir="rtl"
+            messages={arabicSocialButtonMessages}
             platform={platform}
             variant="outline"
           />

package/registry/examples/spinner-demo.tsx

@@ -4,52 +4,52 @@ import { DynamicSpinner, Spinner } from "@/components/ui/spinner"
 
 export function SpinnerDemo() {
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-center gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-5xl-24)]">
         <Spinner
           className="text-primary"
-          style={{ "--bh-spinner-size": "16px" } as React.CSSProperties}
+          style={{ "--bh-spinner-size": "var(--bh-space-3xl-16)" } as React.CSSProperties}
         />
         <Spinner
           className="text-success"
-          style={{ "--bh-spinner-size": "20px" } as React.CSSProperties}
+          style={{ "--bh-spinner-size": "var(--bh-space-4xl-20)" } as React.CSSProperties}
         />
         <Spinner
           className="text-danger"
-          style={{ "--bh-spinner-size": "24px" } as React.CSSProperties}
+          style={{ "--bh-spinner-size": "var(--bh-space-5xl-24)" } as React.CSSProperties}
         />
         <DynamicSpinner
           className="text-primary"
-          style={{ "--bh-spinner-size": "16px" } as React.CSSProperties}
+          style={{ "--bh-spinner-size": "var(--bh-space-3xl-16)" } as React.CSSProperties}
         />
         <DynamicSpinner
           className="text-success"
-          style={{ "--bh-spinner-size": "20px" } as React.CSSProperties}
+          style={{ "--bh-spinner-size": "var(--bh-space-4xl-20)" } as React.CSSProperties}
         />
         <DynamicSpinner
           className="text-danger"
-          style={{ "--bh-spinner-size": "24px" } as React.CSSProperties}
+          style={{ "--bh-spinner-size": "var(--bh-space-5xl-24)" } as React.CSSProperties}
         />
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
         <div
-          className="inline-flex items-center gap-2 text-sm text-muted-foreground"
+          className="inline-flex items-center gap-[var(--bh-space-md-8)] text-sm text-muted-foreground"
           role="status"
         >
           <Spinner
             className="text-current"
-            style={{ "--bh-spinner-size": "18px" } as React.CSSProperties}
+            style={{ "--bh-spinner-size": "calc(var(--bh-space-2xl-14) + var(--bh-space-xs-4))" } as React.CSSProperties}
           />
           Loading
         </div>
         <div
-          className="inline-flex items-center gap-2 text-sm text-muted-foreground"
+          className="inline-flex items-center gap-[var(--bh-space-md-8)] text-sm text-muted-foreground"
           role="status"
         >
           <DynamicSpinner
             className="text-current"
-            style={{ "--bh-spinner-size": "18px" } as React.CSSProperties}
+            style={{ "--bh-spinner-size": "calc(var(--bh-space-2xl-14) + var(--bh-space-xs-4))" } as React.CSSProperties}
           />
           Syncing
         </div>

package/registry/examples/tabs-demo.tsx

@@ -0,0 +1,13 @@
+import { Tabs } from "@/components/ui/tabs"
+
+const tabItems = ["Overview", "Details", "Settings", "Activity", "Files"]
+
+export function TabsDemo() {
+  return (
+    <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" />
+    </div>
+  )
+}

package/registry/examples/tag-demo.tsx

@@ -4,7 +4,7 @@ import { Tag } from "@/components/ui/tag"
 
 export function TagDemo() {
   return (
-    <div className="flex flex-wrap items-center gap-2">
+    <div className="flex flex-wrap items-center gap-[var(--bh-space-md-8)]">
       <Tag>Label</Tag>
       <Tag state="active">Active</Tag>
       <Tag state="disabled">Disabled</Tag>

package/registry/examples/textarea-demo.tsx

@@ -31,15 +31,15 @@ const demoRtlTextareaProps = {
 
 export function TextareaDemo() {
   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)]">
         <Textarea {...demoTextareaProps} />
         <Textarea {...demoTextareaProps} state="filled" />
         <Textarea {...demoTextareaProps} hasError state="placeholder" />
         <Textarea {...demoTextareaProps} 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)]">
         <Textarea {...demoTextareaProps} type="tags" state="placeholder" />
         <Textarea
           {...demoTextareaProps}
@@ -62,7 +62,7 @@ export function TextareaDemo() {
         />
       </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)]">
         <Textarea {...demoRtlTextareaProps} dir="rtl" />
         <Textarea {...demoRtlTextareaProps} dir="rtl" state="filled" />
         <Textarea {...demoRtlTextareaProps} dir="rtl" hasError state="placeholder" />