banhaten 0.3.0 → 0.5.0

package/registry/examples/progress-demo.tsx

@@ -1,37 +1,37 @@
-import { Progress } from "@/components/ui/progress"
-
-export function ProgressDemo() {
-  return (
-    <div className="grid w-full max-w-md gap-[var(--bh-space-5xl-24)]">
-      <Progress
-        aria-label="Upload progress"
-        helperText="Preparing the final file"
-        label="Upload"
-        optional="(Optional)"
-        showInfo
-        showSpinner
-        value={40}
-      />
-
-      <Progress
-        aria-label="Storage usage"
-        label="Storage"
-        labelPosition="bottom"
-        value={68}
-      />
-
-      <div dir="rtl">
-        <Progress
-          aria-label="Arabic upload progress"
-          indicator="40%"
-          label={"\u0639\u0646\u0648\u0627\u0646"}
-          optional={"\u0028\u0627\u062e\u062a\u064a\u0627\u0631\u064a\u0029"}
-          showInfo
-          showSpinner
-          size="sm"
-          value={40}
-        />
-      </div>
-    </div>
-  )
-}
+import { Progress } from "@/components/ui/progress"
+
+export function ProgressDemo() {
+  return (
+    <div className="grid w-full max-w-md gap-[var(--bh-space-5xl-24)]">
+      <Progress
+        aria-label="Upload progress"
+        helperText="Preparing the final file"
+        label="Upload"
+        optional="(Optional)"
+        showInfo
+        showSpinner
+        value={40}
+      />
+
+      <Progress
+        aria-label="Storage usage"
+        label="Storage"
+        labelPosition="bottom"
+        value={68}
+      />
+
+      <div dir="rtl">
+        <Progress
+          aria-label="Arabic upload progress"
+          indicator="40%"
+          label={"\u0639\u0646\u0648\u0627\u0646"}
+          optional={"\u0028\u0627\u062e\u062a\u064a\u0627\u0631\u064a\u0029"}
+          showInfo
+          showSpinner
+          size="sm"
+          value={40}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -1,29 +1,29 @@
-import { ProgressSlider } from "@/components/ui/progress-slider"
-
-export function ProgressSliderDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <ProgressSlider
-        aria-label="Investment amount"
-        defaultValue={28}
-        showTicks
-        size="lg"
-        tone="brand"
-      />
-
-      <ProgressSlider
-        aria-label="Savings progress"
-        defaultValue={62}
-        showTicks
-        tone="success"
-      />
-
-      <ProgressSlider
-        aria-label="Disabled progress"
-        defaultValue={44}
-        disabled
-        tone="neutral"
-      />
-    </div>
-  )
-}
+import { ProgressSlider } from "@/components/ui/progress-slider"
+
+export function ProgressSliderDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <ProgressSlider
+        aria-label="Investment amount"
+        defaultValue={28}
+        showTicks
+        size="lg"
+        tone="brand"
+      />
+
+      <ProgressSlider
+        aria-label="Savings progress"
+        defaultValue={62}
+        showTicks
+        tone="success"
+      />
+
+      <ProgressSlider
+        aria-label="Disabled progress"
+        defaultValue={44}
+        disabled
+        tone="neutral"
+      />
+    </div>
+  )
+}

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

@@ -1,51 +1,51 @@
-import { RadioCard } from "@/components/ui/radio-card"
-
-const radioCardDemoProps = {
-  description: "checkbox card description",
-  label: "Label",
-  supportDescription: "Support Description",
-  supportLabel: "Support",
-}
-
-const radioCardRtlDemoProps = {
-  description:
-    "\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631",
-  label: "\u0627\u0644\u062a\u0633\u0645\u064a\u0629",
-  supportDescription: "\u0648\u0635\u0641 \u062f\u0627\u0639\u0645",
-  supportLabel: "\u062f\u0639\u0645",
-}
-
-export function RadioCardDemo() {
-  return (
-    <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-[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-[var(--bh-space-3xl-16)]" dir="rtl">
-        <RadioCard {...radioCardRtlDemoProps} direction="rtl" type="with-icon" />
-        <RadioCard
-          {...radioCardRtlDemoProps}
-          checked
-          direction="rtl"
-          type="payment"
-        />
-        <RadioCard
-          {...radioCardRtlDemoProps}
-          disabled
-          direction="rtl"
-          type="company-icon"
-        />
-      </div>
-    </div>
-  )
-}
+import { RadioCard } from "@/components/ui/radio-card"
+
+const radioCardDemoProps = {
+  description: "checkbox card description",
+  label: "Label",
+  supportDescription: "Support Description",
+  supportLabel: "Support",
+}
+
+const radioCardRtlDemoProps = {
+  description:
+    "\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631",
+  label: "\u0627\u0644\u062a\u0633\u0645\u064a\u0629",
+  supportDescription: "\u0648\u0635\u0641 \u062f\u0627\u0639\u0645",
+  supportLabel: "\u062f\u0639\u0645",
+}
+
+export function RadioCardDemo() {
+  return (
+    <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-[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-[var(--bh-space-3xl-16)]" dir="rtl">
+        <RadioCard {...radioCardRtlDemoProps} direction="rtl" type="with-icon" />
+        <RadioCard
+          {...radioCardRtlDemoProps}
+          checked
+          direction="rtl"
+          type="payment"
+        />
+        <RadioCard
+          {...radioCardRtlDemoProps}
+          disabled
+          direction="rtl"
+          type="company-icon"
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -1,62 +1,62 @@
-import {
-  RadioField,
-  RadioGroup,
-  RadioGroupItem,
-} from "@/components/ui/radio-group"
-
-export function RadioGroupDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <RadioGroup
-        defaultValue="monthly"
-        description="Choose the cadence for generated invoices."
-        label="Billing cadence"
-        name="billing-cadence"
-      >
-        <RadioGroupItem
-          value="monthly"
-          label="Monthly"
-          description="Send one invoice every calendar month."
-        />
-        <RadioGroupItem
-          value="quarterly"
-          label="Quarterly"
-          description="Collect three months into a single invoice."
-        />
-        <RadioGroupItem
-          disabled
-          value="annual"
-          label="Annual"
-          description="Requires an active enterprise agreement."
-        />
-      </RadioGroup>
-
-      <RadioGroup
-        defaultValue="card"
-        label="Payment method"
-        name="payment-method"
-        orientation="horizontal"
-      >
-        <RadioGroupItem value="card" label="Card" />
-        <RadioGroupItem value="bank" label="Bank transfer" />
-        <RadioGroupItem value="wallet" label="Wallet" />
-      </RadioGroup>
-
-      <div className="grid gap-[var(--bh-space-xl-12)]">
-        <RadioField
-          defaultChecked
-          label="Use as default"
-          name="default-method"
-          value="default"
-        />
-        <RadioField
-          controlPosition="end"
-          description="Use the same account for refunds and future charges."
-          label="Keep account on file"
-          name="account-storage"
-          value="stored"
-        />
-      </div>
-    </div>
-  )
-}
+import {
+  RadioField,
+  RadioGroup,
+  RadioGroupItem,
+} from "@/components/ui/radio-group"
+
+export function RadioGroupDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <RadioGroup
+        defaultValue="monthly"
+        description="Choose the cadence for generated invoices."
+        label="Billing cadence"
+        name="billing-cadence"
+      >
+        <RadioGroupItem
+          value="monthly"
+          label="Monthly"
+          description="Send one invoice every calendar month."
+        />
+        <RadioGroupItem
+          value="quarterly"
+          label="Quarterly"
+          description="Collect three months into a single invoice."
+        />
+        <RadioGroupItem
+          disabled
+          value="annual"
+          label="Annual"
+          description="Requires an active enterprise agreement."
+        />
+      </RadioGroup>
+
+      <RadioGroup
+        defaultValue="card"
+        label="Payment method"
+        name="payment-method"
+        orientation="horizontal"
+      >
+        <RadioGroupItem value="card" label="Card" />
+        <RadioGroupItem value="bank" label="Bank transfer" />
+        <RadioGroupItem value="wallet" label="Wallet" />
+      </RadioGroup>
+
+      <div className="grid gap-[var(--bh-space-xl-12)]">
+        <RadioField
+          defaultChecked
+          label="Use as default"
+          name="default-method"
+          value="default"
+        />
+        <RadioField
+          controlPosition="end"
+          description="Use the same account for refunds and future charges."
+          label="Keep account on file"
+          name="account-storage"
+          value="stored"
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/resizable-demo.tsx

@@ -1,22 +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>
-  )
-}
+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

@@ -1,44 +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>
-  )
-}
+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/rolling-count-demo.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { RollingCount } from "@/components/ui/rolling-count"
+
+const total = 5
+
+export function RollingCountDemo() {
+  const [done, setDone] = React.useState(2)
+
+  return (
+    <div className="grid justify-items-start gap-[var(--bh-space-xl-12)]">
+      <p className="m-0 text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] text-[var(--bh-content-default)]">
+        <RollingCount
+          aria-label={`${done} of ${total} tasks done`}
+          value={`${done}/${total}`}
+        />
+      </p>
+
+      <div className="flex gap-[var(--bh-space-md-8)]">
+        <Button
+          disabled={done === 0}
+          onClick={() => setDone((value) => Math.max(0, value - 1))}
+          size="sm"
+          variant="soft"
+        >
+          Undo
+        </Button>
+        <Button
+          disabled={done === total}
+          onClick={() => setDone((value) => Math.min(total, value + 1))}
+          size="sm"
+        >
+          Complete a task
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -1,15 +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>
-  )
-}
+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

@@ -1,39 +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>
-  )
-}
+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>
+  )
+}