banhaten 0.3.0 → 0.5.0

package/registry/examples/button-demo.tsx

@@ -1,83 +1,86 @@
-import { ArrowRightIcon, PlusIcon, Trash2Icon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { Spinner } from "@/components/ui/spinner"
-
-export function ButtonDemo() {
-  return (
-    <div className="flex flex-col gap-[var(--bh-space-5xl-24)]">
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        <Button>Primary</Button>
-        <Button variant="secondary">Secondary</Button>
-        <Button variant="soft">Soft</Button>
-        <Button variant="outline">Outline</Button>
-        <Button variant="ghost">Ghost</Button>
-        <Button variant="ghost-primary">Ghost Primary</Button>
-        <Button variant="danger">Danger</Button>
-        <Button variant="soft-danger">Soft Danger</Button>
-        <Button variant="white">White</Button>
-      </div>
-
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        <Button size="xs">XS</Button>
-        <Button size="sm">Small</Button>
-        <Button>Medium</Button>
-        <Button size="lg">Large</Button>
-        <Button size="xl">XL</Button>
-      </div>
-
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        <Button size="icon-xs" aria-label="Add item">
-          <PlusIcon />
-        </Button>
-        <Button size="icon-sm" aria-label="Add item">
-          <PlusIcon />
-        </Button>
-        <Button size="icon" aria-label="Add item">
-          <PlusIcon />
-        </Button>
-        <Button size="icon-lg" aria-label="Add item">
-          <PlusIcon />
-        </Button>
-        <Button size="icon-xl" aria-label="Add item">
-          <PlusIcon />
-        </Button>
-      </div>
-
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        <Button>
-          <PlusIcon data-icon="inline-start" />
-          New item
-        </Button>
-        <Button variant="outline">
-          Continue
-          <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
-        </Button>
-        <Button variant="danger">
-          <Trash2Icon data-icon="inline-start" />
-          Delete
-        </Button>
-        <Button disabled aria-busy="true">
-          <Spinner data-icon="inline-start" />
-          Loading
-        </Button>
-      </div>
-
-      <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        <Button>إرسال</Button>
-        <Button variant="outline">
-          متابعة
-          <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
-        </Button>
-        <Button variant="danger">
-          <Trash2Icon data-icon="inline-start" />
-          حذف
-        </Button>
-        <Button disabled aria-busy="true">
-          <Spinner data-icon="inline-start" />
-          جاري التحميل
-        </Button>
-      </div>
-    </div>
-  )
-}
+import { ArrowRightIcon, PlusIcon, Trash2Icon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Spinner } from "@/components/ui/spinner"
+
+export function ButtonDemo() {
+  return (
+    <div className="flex flex-col gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        <Button>Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="soft">Soft</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="ghost-primary">Ghost Primary</Button>
+        <Button variant="danger">Danger</Button>
+        <Button variant="soft-danger">Soft Danger</Button>
+        <Button variant="white">White</Button>
+        <Button variant="success">Success</Button>
+        <Button variant="warning">Warning</Button>
+        <Button variant="link">Link</Button>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        <Button size="xs">XS</Button>
+        <Button size="sm">Small</Button>
+        <Button>Medium</Button>
+        <Button size="lg">Large</Button>
+        <Button size="xl">XL</Button>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        <Button size="icon-xs" aria-label="Add item">
+          <PlusIcon />
+        </Button>
+        <Button size="icon-sm" aria-label="Add item">
+          <PlusIcon />
+        </Button>
+        <Button size="icon" aria-label="Add item">
+          <PlusIcon />
+        </Button>
+        <Button size="icon-lg" aria-label="Add item">
+          <PlusIcon />
+        </Button>
+        <Button size="icon-xl" aria-label="Add item">
+          <PlusIcon />
+        </Button>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        <Button>
+          <PlusIcon data-icon="inline-start" />
+          New item
+        </Button>
+        <Button variant="outline">
+          Continue
+          <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
+        </Button>
+        <Button variant="danger">
+          <Trash2Icon data-icon="inline-start" />
+          Delete
+        </Button>
+        <Button disabled aria-busy="true">
+          <Spinner data-icon="inline-start" />
+          Loading
+        </Button>
+      </div>
+
+      <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        <Button>إرسال</Button>
+        <Button variant="outline">
+          متابعة
+          <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
+        </Button>
+        <Button variant="danger">
+          <Trash2Icon data-icon="inline-start" />
+          حذف
+        </Button>
+        <Button disabled aria-busy="true">
+          <Spinner data-icon="inline-start" />
+          جاري التحميل
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+import { ChartBlock } from "@/components/ui/chart-block"
+
+export function ChartBlockDemo() {
+  return <ChartBlock block="latency" />
+}

package/registry/examples/chart-demo.tsx

@@ -1,33 +1,18 @@
-import { Line, LineChart, XAxis, YAxis } from "recharts"
-
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart"
-
-const data = [
-  { month: "Jan", revenue: 120 },
-  { month: "Feb", revenue: 180 },
-  { month: "Mar", revenue: 150 },
-  { month: "Apr", revenue: 220 },
-]
-
-export function ChartDemo() {
-  return (
-    <ChartContainer config={{ revenue: { color: "var(--bh-chart-1)" } }}>
-      <LineChart data={data}>
-        <XAxis dataKey="month" tickLine={false} axisLine={false} />
-        <YAxis tickLine={false} axisLine={false} width={32} />
-        <ChartTooltip content={<ChartTooltipContent />} />
-        <Line
-          dataKey="revenue"
-          type="monotone"
-          stroke="var(--color-revenue)"
-          strokeWidth="var(--bh-icon-stroke-200)"
-          dot={false}
-        />
-      </LineChart>
-    </ChartContainer>
-  )
-}
+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 }}
+    />
+  )
+}