banhaten 0.1.2 → 0.2.0

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

@@ -1,10 +1,10 @@
-import { Tabs } from "@/components/ui/expanded/Tabs"
+import { Tabs } from "@/components/ui/tabs"
 
 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/field-demo.tsx

@@ -0,0 +1,51 @@
+import { Button } from "@/components/ui/button"
+import {
+  Field,
+  FieldContent,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+export function FieldDemo() {
+  return (
+    <FieldSet>
+      <FieldLegend>Account details</FieldLegend>
+      <FieldGroup>
+        <Field>
+          <FieldLabel>Email</FieldLabel>
+          <FieldControl>
+            <Input placeholder="name@example.com" />
+          </FieldControl>
+          <FieldDescription>Use your work email for team access.</FieldDescription>
+        </Field>
+
+        <Field invalid>
+          <FieldLabel>Workspace</FieldLabel>
+          <FieldControl>
+            <Input state="error" valueText="Banhaten" />
+          </FieldControl>
+          <FieldError>Workspace name is already taken.</FieldError>
+        </Field>
+
+        <Field orientation="responsive">
+          <FieldContent>
+            <FieldLabel>Notes</FieldLabel>
+            <FieldDescription>Visible to workspace administrators.</FieldDescription>
+          </FieldContent>
+          <FieldControl>
+            <Textarea placeholder="Add setup notes..." />
+          </FieldControl>
+        </Field>
+
+        <Button size="sm">Save details</Button>
+      </FieldGroup>
+    </FieldSet>
+  )
+}

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

@@ -0,0 +1,23 @@
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
+
+export function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger className="underline underline-offset-[var(--bh-space-xs-4)]">
+        Workspace profile
+      </HoverCardTrigger>
+      <HoverCardContent>
+        <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.
+          </span>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}

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-group-demo.tsx

@@ -0,0 +1,16 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+
+export function InputGroupDemo() {
+  return (
+    <InputGroup>
+      <InputGroupAddon>https://</InputGroupAddon>
+      <InputGroupInput aria-label="Workspace URL" defaultValue="banhaten.design" />
+      <InputGroupButton>Save</InputGroupButton>
+    </InputGroup>
+  )
+}

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

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

package/registry/examples/label-demo.tsx

@@ -0,0 +1,20 @@
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+
+export function LabelDemo() {
+  return (
+    <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>
+      </div>
+      <Label optionalText="(Optional)">Project name</Label>
+      <div dir="rtl" className="flex items-center gap-[var(--bh-space-md-8)]">
+        <Checkbox id="terms-rtl" />
+        <Label htmlFor="terms-rtl" required>
+          قبول الشروط والأحكام
+        </Label>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,34 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/components/ui/menubar"
+
+export function MenubarDemo() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New
+            <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>Open</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Export</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Toggle sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}

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

@@ -0,0 +1,16 @@
+import { NativeSelect } from "@/components/ui/native-select"
+
+export function NativeSelectDemo() {
+  return (
+    <NativeSelect
+      label="Workspace"
+      defaultValue="design"
+      helperText="Native select for platform forms."
+      options={[
+        { label: "Design", value: "design" },
+        { label: "Engineering", value: "engineering" },
+        { label: "Operations", value: "operations" },
+      ]}
+    />
+  )
+}

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

@@ -0,0 +1,29 @@
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "@/components/ui/navigation-menu"
+
+export function NavigationMenuDemo() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Product</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="grid gap-[var(--bh-space-md-8)]">
+              <NavigationMenuLink href="#">Components</NavigationMenuLink>
+              <NavigationMenuLink href="#">Tokens</NavigationMenuLink>
+              <NavigationMenuLink href="#">Patterns</NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      <NavigationMenuViewport />
+    </NavigationMenu>
+  )
+}

package/registry/examples/pagination-demo.tsx

@@ -1,8 +1,11 @@
-import { Pagination } from "@/components/ui/pagination"
+import {
+  arabicPaginationMessages,
+  Pagination,
+} from "@/components/ui/pagination"
 
 export function PaginationDemo() {
   return (
-    <div className="grid gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
       <Pagination />
       <Pagination variant="ghost" />
 
@@ -10,7 +13,7 @@ export function PaginationDemo() {
       <Pagination type="summary" />
 
       <div dir="rtl">
-        <Pagination dir="rtl" />
+        <Pagination dir="rtl" messages={arabicPaginationMessages} />
       </div>
     </div>
   )