banhaten 0.5.0 → 0.6.0

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

@@ -1,63 +1,63 @@
-import { PlusIcon } from "lucide-react"
-
-import {
-  ButtonGroup,
-  ButtonGroupItem,
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/components/ui/button-group"
-
-export function ButtonGroupDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <ButtonGroup aria-label="Button group">
-        {Array.from({ length: 7 }).map((_, index) => (
-          <ButtonGroupItem
-            key={index}
-            aria-pressed={index === 3 || undefined}
-          >
-            <PlusIcon data-icon="inline-start" />
-            Button
-            <PlusIcon data-icon="inline-end" />
-          </ButtonGroupItem>
-        ))}
-      </ButtonGroup>
-
-      <ButtonGroup aria-label="Small icon button group" size="sm" mode="iconOnly">
-        {Array.from({ length: 7 }).map((_, index) => (
-          <ButtonGroupItem key={index} aria-label={`Action ${index + 1}`}>
-            <PlusIcon />
-          </ButtonGroupItem>
-        ))}
-      </ButtonGroup>
-
-      <div dir="rtl">
-        <ButtonGroup aria-label="Arabic button group" size="xs">
-          {Array.from({ length: 7 }).map((_, index) => (
-            <ButtonGroupItem key={index} disabled={index === 4}>
-              <PlusIcon data-icon="inline-start" />
-              {"\u0627\u0646\u0642\u0631 \u0647\u0646\u0627"}
-              <PlusIcon data-icon="inline-end" />
-            </ButtonGroupItem>
-          ))}
-        </ButtonGroup>
-      </div>
-
-      <ToggleGroup aria-label="Text alignment" defaultValue="start">
-        <ToggleGroupItem value="start">Start</ToggleGroupItem>
-        <ToggleGroupItem value="center">Center</ToggleGroupItem>
-        <ToggleGroupItem value="end">End</ToggleGroupItem>
-      </ToggleGroup>
-
-      <ToggleGroup
-        aria-label="Text styles"
-        defaultValue={["bold"]}
-        type="multiple"
-      >
-        <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
-        <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
-        <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
-      </ToggleGroup>
-    </div>
-  )
-}
+import { PlusIcon } from "lucide-react"
+
+import {
+  ButtonGroup,
+  ButtonGroupItem,
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/components/ui/button-group"
+
+export function ButtonGroupDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <ButtonGroup aria-label="Button group">
+        {Array.from({ length: 7 }).map((_, index) => (
+          <ButtonGroupItem
+            key={index}
+            aria-pressed={index === 3 || undefined}
+          >
+            <PlusIcon data-icon="inline-start" />
+            Button
+            <PlusIcon data-icon="inline-end" />
+          </ButtonGroupItem>
+        ))}
+      </ButtonGroup>
+
+      <ButtonGroup aria-label="Small icon button group" size="sm" mode="iconOnly">
+        {Array.from({ length: 7 }).map((_, index) => (
+          <ButtonGroupItem key={index} aria-label={`Action ${index + 1}`}>
+            <PlusIcon />
+          </ButtonGroupItem>
+        ))}
+      </ButtonGroup>
+
+      <div dir="rtl">
+        <ButtonGroup aria-label="Arabic button group" size="xs">
+          {Array.from({ length: 7 }).map((_, index) => (
+            <ButtonGroupItem key={index} disabled={index === 4}>
+              <PlusIcon data-icon="inline-start" />
+              {"\u0627\u0646\u0642\u0631 \u0647\u0646\u0627"}
+              <PlusIcon data-icon="inline-end" />
+            </ButtonGroupItem>
+          ))}
+        </ButtonGroup>
+      </div>
+
+      <ToggleGroup aria-label="Text alignment" defaultValue="start">
+        <ToggleGroupItem value="start">Start</ToggleGroupItem>
+        <ToggleGroupItem value="center">Center</ToggleGroupItem>
+        <ToggleGroupItem value="end">End</ToggleGroupItem>
+      </ToggleGroup>
+
+      <ToggleGroup
+        aria-label="Text styles"
+        defaultValue={["bold"]}
+        type="multiple"
+      >
+        <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+        <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+        <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}

package/registry/examples/card-demo.tsx

@@ -1,86 +1,86 @@
-import { Card } from "@/components/ui/card"
-
-const cardImage = new URL("../assets/images/art-01.jpg", import.meta.url).href
-
-const rtlCardCopy = {
-  action: "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627",
-  description:
-    "\u0627\u0646\u0637\u0644\u0642 \u0641\u064a \u0631\u062d\u0644\u0629 \u0639\u0628\u0631 \u0627\u0644\u0632\u0645\u0646 \u0644\u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0623\u0633\u0631\u0627\u0631 \u0627\u0644\u0623\u0647\u0631\u0627\u0645\u0627\u062a \u0627\u0644\u0643\u0628\u0631\u0649.",
-  subtitle:
-    "\u0639\u0646\u0648\u0627\u0646 \u0641\u0631\u0639\u064a \u0644\u0644\u0628\u0637\u0627\u0642\u0629",
-  title:
-    "\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0628\u0637\u0627\u0642\u0629",
-}
-
-const ltrCardCopy = {
-  action: "Explore",
-  description:
-    "Journey through time as we explore the mysteries of the Great Pyramids and the Sphinx.",
-  subtitle: "Ancient Egypt",
-  title: "The Great Pyramids",
-}
-
-export function CardDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <div className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]">
-        <Card
-          description={ltrCardCopy.description}
-          imageSrc={cardImage}
-          primaryActionLabel={ltrCardCopy.action}
-          subtitle={ltrCardCopy.subtitle}
-          title={ltrCardCopy.title}
-        />
-        <Card
-          imageSrc={cardImage}
-          subtitle={ltrCardCopy.subtitle}
-          title={ltrCardCopy.title}
-          type="full-image"
-        />
-      </div>
-
-      <div className="grid gap-[var(--bh-space-3xl-16)]">
-        <Card
-          description={ltrCardCopy.description}
-          imageSrc={cardImage}
-          orientation="horizontal"
-          primaryActionLabel={ltrCardCopy.action}
-          subtitle={ltrCardCopy.subtitle}
-          title={ltrCardCopy.title}
-        />
-        <Card
-          description={ltrCardCopy.description}
-          imageSrc={cardImage}
-          orientation="horizontal"
-          primaryActionLabel={ltrCardCopy.action}
-          subtitle={ltrCardCopy.subtitle}
-          title={ltrCardCopy.title}
-          type="trailing-image"
-        />
-      </div>
-
-      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]">
-        <Card
-          dir="rtl"
-          description={rtlCardCopy.description}
-          primaryActionLabel={rtlCardCopy.action}
-          secondaryActionLabel={rtlCardCopy.action}
-          imageSrc={cardImage}
-          subtitle={rtlCardCopy.subtitle}
-          title={rtlCardCopy.title}
-        />
-        <Card
-          breakpoint="mobile"
-          dir="rtl"
-          description={rtlCardCopy.description}
-          orientation="horizontal"
-          primaryActionLabel={rtlCardCopy.action}
-          secondaryActionLabel={rtlCardCopy.action}
-          imageSrc={cardImage}
-          subtitle={rtlCardCopy.subtitle}
-          title={rtlCardCopy.title}
-        />
-      </div>
-    </div>
-  )
-}
+import { Card } from "@/components/ui/card"
+
+const cardImage = new URL("../assets/images/art-01.jpg", import.meta.url).href
+
+const rtlCardCopy = {
+  action: "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627",
+  description:
+    "\u0627\u0646\u0637\u0644\u0642 \u0641\u064a \u0631\u062d\u0644\u0629 \u0639\u0628\u0631 \u0627\u0644\u0632\u0645\u0646 \u0644\u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0623\u0633\u0631\u0627\u0631 \u0627\u0644\u0623\u0647\u0631\u0627\u0645\u0627\u062a \u0627\u0644\u0643\u0628\u0631\u0649.",
+  subtitle:
+    "\u0639\u0646\u0648\u0627\u0646 \u0641\u0631\u0639\u064a \u0644\u0644\u0628\u0637\u0627\u0642\u0629",
+  title:
+    "\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0628\u0637\u0627\u0642\u0629",
+}
+
+const ltrCardCopy = {
+  action: "Explore",
+  description:
+    "Journey through time as we explore the mysteries of the Great Pyramids and the Sphinx.",
+  subtitle: "Ancient Egypt",
+  title: "The Great Pyramids",
+}
+
+export function CardDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]">
+        <Card
+          description={ltrCardCopy.description}
+          imageSrc={cardImage}
+          primaryActionLabel={ltrCardCopy.action}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+        />
+        <Card
+          imageSrc={cardImage}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+          type="full-image"
+        />
+      </div>
+
+      <div className="grid gap-[var(--bh-space-3xl-16)]">
+        <Card
+          description={ltrCardCopy.description}
+          imageSrc={cardImage}
+          orientation="horizontal"
+          primaryActionLabel={ltrCardCopy.action}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+        />
+        <Card
+          description={ltrCardCopy.description}
+          imageSrc={cardImage}
+          orientation="horizontal"
+          primaryActionLabel={ltrCardCopy.action}
+          subtitle={ltrCardCopy.subtitle}
+          title={ltrCardCopy.title}
+          type="trailing-image"
+        />
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-3xl-16)]">
+        <Card
+          dir="rtl"
+          description={rtlCardCopy.description}
+          primaryActionLabel={rtlCardCopy.action}
+          secondaryActionLabel={rtlCardCopy.action}
+          imageSrc={cardImage}
+          subtitle={rtlCardCopy.subtitle}
+          title={rtlCardCopy.title}
+        />
+        <Card
+          breakpoint="mobile"
+          dir="rtl"
+          description={rtlCardCopy.description}
+          orientation="horizontal"
+          primaryActionLabel={rtlCardCopy.action}
+          secondaryActionLabel={rtlCardCopy.action}
+          imageSrc={cardImage}
+          subtitle={rtlCardCopy.subtitle}
+          title={rtlCardCopy.title}
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/carousel-demo.tsx

@@ -1,43 +1,43 @@
-import {
-  arabicCarouselMessages,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-
-export function CarouselDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <Carousel className="w-full max-w-sm">
-        <CarouselSlides />
-      </Carousel>
-      <Carousel
-        className="w-full max-w-sm"
-        dir="rtl"
-        messages={arabicCarouselMessages}
-      >
-        <CarouselSlides />
-      </Carousel>
-    </div>
-  )
-}
-
-function CarouselSlides() {
-  return (
-    <>
-      <CarouselContent>
-        {[1, 2, 3].map((item) => (
-          <CarouselItem key={item}>
-            <div className="flex aspect-video items-center justify-center rounded-xl bg-[var(--bh-bg-neutral-subtle)] text-lg font-semibold">
-              {item}
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </>
-  )
-}
+import {
+  arabicCarouselMessages,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel"
+
+export function CarouselDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <Carousel className="w-full max-w-sm">
+        <CarouselSlides />
+      </Carousel>
+      <Carousel
+        className="w-full max-w-sm"
+        dir="rtl"
+        messages={arabicCarouselMessages}
+      >
+        <CarouselSlides />
+      </Carousel>
+    </div>
+  )
+}
+
+function CarouselSlides() {
+  return (
+    <>
+      <CarouselContent>
+        {[1, 2, 3].map((item) => (
+          <CarouselItem key={item}>
+            <div className="flex aspect-video items-center justify-center rounded-xl bg-[var(--bh-bg-neutral-subtle)] text-lg font-semibold">
+              {item}
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </>
+  )
+}

package/registry/examples/chart-demo.tsx

@@ -1,18 +1,18 @@
-import { DataChart } from "@/components/ui/data-chart"
-
-const data = [
-  { month: "Jan", revenue: 120 },
-  { month: "Feb", revenue: 180 },
-  { month: "Mar", revenue: 150 },
-  { month: "Apr", revenue: 220 },
-]
-
-export function ChartDemo() {
-  return (
-    <DataChart
-      label="Monthly revenue"
-      description="Illustrative revenue from January through April."
-      spec={{ family: "area", data, categoryKey: "month", variant: "gradient", series: [{ key: "revenue", label: "Revenue" }], legend: true }}
-    />
-  )
-}
+import { DataChart } from "@/components/ui/data-chart"
+
+const data = [
+  { month: "Jan", revenue: 120 },
+  { month: "Feb", revenue: 180 },
+  { month: "Mar", revenue: 150 },
+  { month: "Apr", revenue: 220 },
+]
+
+export function ChartDemo() {
+  return (
+    <DataChart
+      label="Monthly revenue"
+      description="Illustrative revenue from January through April."
+      spec={{ family: "area", data, categoryKey: "month", variant: "gradient", series: [{ key: "revenue", label: "Revenue" }], legend: true }}
+    />
+  )
+}

package/registry/examples/checkbox-demo.tsx

@@ -1,62 +1,62 @@
-import * as React from "react"
-
-import { UserIcon } from "lucide-react"
-
-import { Checkbox, CheckboxCard } from "@/components/ui/checkbox"
-
-export function CheckboxDemo() {
-  const [checked, setChecked] = React.useState(true)
-
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-3xl-16)]">
-        <Checkbox
-          checked={checked}
-          onCheckedChange={(value) => setChecked(value === true)}
-          aria-label="Toggle option"
-        />
-        <Checkbox checked aria-label="Selected option" />
-        <Checkbox aria-label="Unselected option" />
-        <Checkbox disabled aria-label="Disabled option" />
-      </div>
-
-      <div className="grid gap-[var(--bh-space-xl-12)]">
-        <CheckboxCard
-          checked
-          label="Label"
-          description="checkbox card description"
-          media={<UserLineIcon />}
-        />
-        <CheckboxCard
-          controlPosition="start"
-          label="Label"
-          description="checkbox card description"
-        />
-        <CheckboxCard
-          disabled
-          label="Label"
-          description="checkbox card description"
-          media={<UserLineIcon />}
-        />
-      </div>
-
-      <div dir="rtl" className="grid gap-[var(--bh-space-xl-12)]">
-        <CheckboxCard
-          checked
-          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
-          description={"\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631"}
-          media={<UserLineIcon />}
-        />
-        <CheckboxCard
-          controlPosition="start"
-          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
-          description={"\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631"}
-        />
-      </div>
-    </div>
-  )
-}
-
-function UserLineIcon() {
-  return <UserIcon aria-hidden="true" focusable="false" strokeWidth="var(--bh-icon-stroke-210)" />
-}
+import * as React from "react"
+
+import { UserIcon } from "lucide-react"
+
+import { Checkbox, CheckboxCard } from "@/components/ui/checkbox"
+
+export function CheckboxDemo() {
+  const [checked, setChecked] = React.useState(true)
+
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-3xl-16)]">
+        <Checkbox
+          checked={checked}
+          onCheckedChange={(value) => setChecked(value === true)}
+          aria-label="Toggle option"
+        />
+        <Checkbox checked aria-label="Selected option" />
+        <Checkbox aria-label="Unselected option" />
+        <Checkbox disabled aria-label="Disabled option" />
+      </div>
+
+      <div className="grid gap-[var(--bh-space-xl-12)]">
+        <CheckboxCard
+          checked
+          label="Label"
+          description="checkbox card description"
+          media={<UserLineIcon />}
+        />
+        <CheckboxCard
+          controlPosition="start"
+          label="Label"
+          description="checkbox card description"
+        />
+        <CheckboxCard
+          disabled
+          label="Label"
+          description="checkbox card description"
+          media={<UserLineIcon />}
+        />
+      </div>
+
+      <div dir="rtl" className="grid gap-[var(--bh-space-xl-12)]">
+        <CheckboxCard
+          checked
+          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
+          description={"\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631"}
+          media={<UserLineIcon />}
+        />
+        <CheckboxCard
+          controlPosition="start"
+          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
+          description={"\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631"}
+        />
+      </div>
+    </div>
+  )
+}
+
+function UserLineIcon() {
+  return <UserIcon aria-hidden="true" focusable="false" strokeWidth="var(--bh-icon-stroke-210)" />
+}

package/registry/examples/collapsible-demo.tsx

@@ -1,16 +1,16 @@
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-
-export function CollapsibleDemo() {
-  return (
-    <Collapsible defaultOpen className="w-full max-w-md rounded-xl border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
-      <CollapsibleTrigger>Workspace details</CollapsibleTrigger>
-      <CollapsibleContent>
-        Billing, members, and audit controls are grouped in this section.
-      </CollapsibleContent>
-    </Collapsible>
-  )
-}
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+
+export function CollapsibleDemo() {
+  return (
+    <Collapsible defaultOpen className="w-full max-w-md rounded-xl border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
+      <CollapsibleTrigger>Workspace details</CollapsibleTrigger>
+      <CollapsibleContent>
+        Billing, members, and audit controls are grouped in this section.
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}