banhaten 0.3.0 → 0.5.0

package/registry/examples/date-picker-demo.tsx

@@ -1,127 +1,127 @@
-import {
-  Calendar,
-  DatePicker,
-  DateRangePicker,
-  RangeCalendar,
-  type CalendarRange,
-} from "@/components/ui/date-picker"
-
-const selectedDate = new Date(2050, 6, 18)
-const selectedRange: CalendarRange = {
-  from: new Date(2050, 6, 15),
-  to: new Date(2050, 7, 23),
-}
-
-const staticPopoverClassName =
-  "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-[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>
-        <div data-date-demo-item>
-          <Calendar view="month-year" value={selectedDate} />
-        </div>
-      </div>
-
-      <div className="grid gap-[var(--bh-space-5xl-24)] xl:grid-cols-2">
-        <div data-date-demo-item>
-          <DatePicker
-            calendarProps={{ className: staticPopoverClassName }}
-            className={datePickerClassName}
-            defaultValue={selectedDate}
-          />
-        </div>
-        <div data-date-demo-item dir="rtl">
-          <DatePicker
-            calendarProps={{ className: staticPopoverClassName }}
-            className={datePickerClassName}
-            dir="rtl"
-            placeholder={"\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"}
-          />
-        </div>
-      </div>
-
-      <div className="grid gap-[var(--bh-space-5xl-24)] xl:grid-cols-2">
-        <div data-date-demo-item>
-          <DatePicker
-            calendarProps={{ className: staticPopoverClassName }}
-            className={datePickerClassName}
-            defaultOpen
-            defaultValue={selectedDate}
-          />
-        </div>
-        <div data-date-demo-item dir="rtl">
-          <DatePicker
-            calendarProps={{ className: staticPopoverClassName }}
-            className={datePickerClassName}
-            defaultOpen
-            defaultValue={selectedDate}
-            dir="rtl"
-            placeholder={"\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"}
-          />
-        </div>
-      </div>
-
-      <div className="grid gap-[var(--bh-space-5xl-24)] overflow-x-auto">
-        <div data-date-demo-item>
-          <RangeCalendar value={selectedRange} />
-        </div>
-        <div data-date-demo-item>
-          <RangeCalendar type="double-with-presets" value={selectedRange} />
-        </div>
-        <div data-date-demo-item>
-          <RangeCalendar type="single" value={selectedRange} />
-        </div>
-      </div>
-
-      <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-[var(--bh-space-md-8)]" dir="rtl">
-          <DateRangePicker
-            calendarProps={{ className: staticPopoverClassName }}
-            className={dateRangePickerClassName}
-            dir="rtl"
-            placeholder={"\u0627\u062e\u062a\u0631 \u0646\u0637\u0627\u0642 \u0627\u0644\u062a\u0627\u0631\u064a\u062e"}
-            value={selectedRange}
-          />
-        </div>
-      </div>
-
-      <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}
-            defaultOpen
-            type="double-with-presets"
-            value={selectedRange}
-          />
-        </div>
-        <div data-date-demo-item className="overflow-x-auto pb-[var(--bh-space-md-8)]" dir="rtl">
-          <DateRangePicker
-            calendarProps={{ className: staticPopoverClassName }}
-            className={dateRangePickerClassName}
-            defaultOpen
-            dir="rtl"
-            placeholder={"\u064a\u0648\u0645 / \u0634\u0647\u0631 / \u0633\u0646\u0629"}
-            type="double-with-presets"
-            value={selectedRange}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
+import {
+  Calendar,
+  DatePicker,
+  DateRangePicker,
+  RangeCalendar,
+  type CalendarRange,
+} from "@/components/ui/date-picker"
+
+const selectedDate = new Date(2050, 6, 18)
+const selectedRange: CalendarRange = {
+  from: new Date(2050, 6, 15),
+  to: new Date(2050, 7, 23),
+}
+
+const staticPopoverClassName =
+  "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-[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>
+        <div data-date-demo-item>
+          <Calendar view="month-year" value={selectedDate} />
+        </div>
+      </div>
+
+      <div className="grid gap-[var(--bh-space-5xl-24)] xl:grid-cols-2">
+        <div data-date-demo-item>
+          <DatePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={datePickerClassName}
+            defaultValue={selectedDate}
+          />
+        </div>
+        <div data-date-demo-item dir="rtl">
+          <DatePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={datePickerClassName}
+            dir="rtl"
+            placeholder={"\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-[var(--bh-space-5xl-24)] xl:grid-cols-2">
+        <div data-date-demo-item>
+          <DatePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={datePickerClassName}
+            defaultOpen
+            defaultValue={selectedDate}
+          />
+        </div>
+        <div data-date-demo-item dir="rtl">
+          <DatePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={datePickerClassName}
+            defaultOpen
+            defaultValue={selectedDate}
+            dir="rtl"
+            placeholder={"\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-[var(--bh-space-5xl-24)] overflow-x-auto">
+        <div data-date-demo-item>
+          <RangeCalendar value={selectedRange} />
+        </div>
+        <div data-date-demo-item>
+          <RangeCalendar type="double-with-presets" value={selectedRange} />
+        </div>
+        <div data-date-demo-item>
+          <RangeCalendar type="single" value={selectedRange} />
+        </div>
+      </div>
+
+      <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-[var(--bh-space-md-8)]" dir="rtl">
+          <DateRangePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={dateRangePickerClassName}
+            dir="rtl"
+            placeholder={"\u0627\u062e\u062a\u0631 \u0646\u0637\u0627\u0642 \u0627\u0644\u062a\u0627\u0631\u064a\u062e"}
+            value={selectedRange}
+          />
+        </div>
+      </div>
+
+      <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}
+            defaultOpen
+            type="double-with-presets"
+            value={selectedRange}
+          />
+        </div>
+        <div data-date-demo-item className="overflow-x-auto pb-[var(--bh-space-md-8)]" dir="rtl">
+          <DateRangePicker
+            calendarProps={{ className: staticPopoverClassName }}
+            className={dateRangePickerClassName}
+            defaultOpen
+            dir="rtl"
+            placeholder={"\u064a\u0648\u0645 / \u0634\u0647\u0631 / \u0633\u0646\u0629"}
+            type="double-with-presets"
+            value={selectedRange}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/examples/divider-demo.tsx

@@ -1,17 +1,17 @@
-import { Divider } from "@/components/ui/divider"
-
-export function DividerDemo() {
-  return (
-    <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-[var(--bh-space-5xl-24)]">
-        <Divider direction="vertical" type="dotted" />
-        <Divider direction="vertical" />
-      </div>
-    </div>
-  )
-}
+import { Divider } from "@/components/ui/divider"
+
+export function DividerDemo() {
+  return (
+    <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-[var(--bh-space-5xl-24)]">
+        <Divider direction="vertical" type="dotted" />
+        <Divider direction="vertical" />
+      </div>
+    </div>
+  )
+}

package/registry/examples/expanded/activity-heatmap-demo.tsx

@@ -1,29 +1,29 @@
-import {
-  ActivityHeatmap,
-  type ActivityHeatmapItem,
-  type ActivityHeatmapLevel,
-} from "@/components/ui/expanded/ActivityHeatmap"
-
-const activityItems: ActivityHeatmapItem[] = Array.from(
-  { length: 39 * 7 },
-  (_, index) => {
-    const column = Math.floor(index / 7)
-    const row = index % 7
-    const level = ((column * 11 + row * 7 + column * row * 3) % 5) as ActivityHeatmapLevel
-
-    return {
-      id: `activity-${index}`,
-      label: `Activity level ${level} of 4`,
-      level,
-    }
-  }
-)
-
-export function ActivityHeatmapDemo() {
-  return (
-    <ActivityHeatmap
-      ariaLabel="Weekly activity over the last 39 weeks"
-      items={activityItems}
-    />
-  )
-}
+import {
+  ActivityHeatmap,
+  type ActivityHeatmapItem,
+  type ActivityHeatmapLevel,
+} from "@/components/ui/expanded/ActivityHeatmap"
+
+const activityItems: ActivityHeatmapItem[] = Array.from(
+  { length: 39 * 7 },
+  (_, index) => {
+    const column = Math.floor(index / 7)
+    const row = index % 7
+    const level = ((column * 11 + row * 7 + column * row * 3) % 5) as ActivityHeatmapLevel
+
+    return {
+      id: `activity-${index}`,
+      label: `Activity level ${level} of 4`,
+      level,
+    }
+  }
+)
+
+export function ActivityHeatmapDemo() {
+  return (
+    <ActivityHeatmap
+      ariaLabel="Weekly activity over the last 39 weeks"
+      items={activityItems}
+    />
+  )
+}

package/registry/examples/expanded/banner-demo.tsx

@@ -1,48 +1,48 @@
-import { Banner } from "@/components/ui/expanded/Banner"
-
-const bannerDemoCopy = {
-  actionLabel: "Button",
-  ariaLabel: "Announcement banner",
-  closeLabel: "Dismiss banner",
-  description: "Discover the Latest Updates in Our New Release",
-  linkLabel: "Link button",
-  title: "Big news!",
-}
-
-const rtlBannerDemoCopy = {
-  actionLabel: "تطبيق",
-  ariaLabel: "شريط إعلان",
-  closeLabel: "إغلاق",
-  description: "اكتشف آخر التحديثات في إصدارنا الجديد",
-  linkLabel: "الرابط",
-  title: "أخبار مهمة!",
-}
-
-export function BannerDemo() {
-  return (
-    <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" />
-      <Banner
-        {...bannerDemoCopy}
-        color="grey"
-        content="title-description"
-        size="full-width"
-        type="single-action"
-      />
-      <Banner
-        {...bannerDemoCopy}
-        color="brand-light"
-        content="title-description"
-        type="single-action-inline"
-      />
-      <Banner
-        {...rtlBannerDemoCopy}
-        content="title-description"
-        dir="rtl"
-        type="single-action-inline"
-      />
-    </div>
-  )
-}
+import { Banner } from "@/components/ui/expanded/Banner"
+
+const bannerDemoCopy = {
+  actionLabel: "Button",
+  ariaLabel: "Announcement banner",
+  closeLabel: "Dismiss banner",
+  description: "Discover the Latest Updates in Our New Release",
+  linkLabel: "Link button",
+  title: "Big news!",
+}
+
+const rtlBannerDemoCopy = {
+  actionLabel: "تطبيق",
+  ariaLabel: "شريط إعلان",
+  closeLabel: "إغلاق",
+  description: "اكتشف آخر التحديثات في إصدارنا الجديد",
+  linkLabel: "الرابط",
+  title: "أخبار مهمة!",
+}
+
+export function BannerDemo() {
+  return (
+    <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" />
+      <Banner
+        {...bannerDemoCopy}
+        color="grey"
+        content="title-description"
+        size="full-width"
+        type="single-action"
+      />
+      <Banner
+        {...bannerDemoCopy}
+        color="brand-light"
+        content="title-description"
+        type="single-action-inline"
+      />
+      <Banner
+        {...rtlBannerDemoCopy}
+        content="title-description"
+        dir="rtl"
+        type="single-action-inline"
+      />
+    </div>
+  )
+}

package/registry/examples/expanded/breadcrumbs-demo.tsx

@@ -1,59 +1,59 @@
-import {
-  BreadcrumbFolderIcon,
-  BreadcrumbHomeIcon,
-  Breadcrumbs,
-  type BreadcrumbItem,
-} from "@/components/ui/expanded/Breadcrumbs"
-
-const breadcrumbItems: BreadcrumbItem[] = [
-  { label: "Home", href: "#", icon: <BreadcrumbHomeIcon /> },
-  { label: "Design system", href: "#", icon: <BreadcrumbFolderIcon /> },
-  { label: "Components", href: "#" },
-  { label: "Breadcrumbs", current: true },
-]
-
-const longBreadcrumbItems: BreadcrumbItem[] = [
-  { label: "Home", href: "#", icon: <BreadcrumbHomeIcon /> },
-  { label: "Workspace", href: "#", icon: <BreadcrumbFolderIcon /> },
-  { label: "Design System", href: "#" },
-  { label: "Components", href: "#" },
-  { label: "Navigation", href: "#" },
-  { label: "Breadcrumbs", current: true },
-]
-
-const rtlBreadcrumbItems: BreadcrumbItem[] = [
-  { label: "\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629", href: "#", icon: <BreadcrumbHomeIcon /> },
-  { label: "\u0627\u0644\u0646\u0638\u0627\u0645", href: "#", icon: <BreadcrumbFolderIcon /> },
-  { label: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a", current: true },
-]
-
-export function BreadcrumbsDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-3xl-16)]">
-      <Breadcrumbs aria-label="Default breadcrumb" items={breadcrumbItems} overflowLabel="More" />
-      <Breadcrumbs
-        aria-label="Raised breadcrumb"
-        items={breadcrumbItems}
-        overflowLabel="More"
-        separator="chevron"
-        style="raised"
-      />
-      <Breadcrumbs
-        aria-label="Collapsed breadcrumb"
-        items={longBreadcrumbItems}
-        maxItems={4}
-        overflowLabel="More"
-        separator="chevron"
-        style="raised"
-      />
-      <Breadcrumbs
-        aria-label={"\u0627\u0644\u0645\u0633\u0627\u0631"}
-        dir="rtl"
-        items={rtlBreadcrumbItems}
-        overflowLabel={"\u0627\u0644\u0645\u0632\u064a\u062f"}
-        separator="chevron"
-        style="raised"
-      />
-    </div>
-  )
-}
+import {
+  BreadcrumbFolderIcon,
+  BreadcrumbHomeIcon,
+  Breadcrumbs,
+  type BreadcrumbItem,
+} from "@/components/ui/expanded/Breadcrumbs"
+
+const breadcrumbItems: BreadcrumbItem[] = [
+  { label: "Home", href: "#", icon: <BreadcrumbHomeIcon /> },
+  { label: "Design system", href: "#", icon: <BreadcrumbFolderIcon /> },
+  { label: "Components", href: "#" },
+  { label: "Breadcrumbs", current: true },
+]
+
+const longBreadcrumbItems: BreadcrumbItem[] = [
+  { label: "Home", href: "#", icon: <BreadcrumbHomeIcon /> },
+  { label: "Workspace", href: "#", icon: <BreadcrumbFolderIcon /> },
+  { label: "Design System", href: "#" },
+  { label: "Components", href: "#" },
+  { label: "Navigation", href: "#" },
+  { label: "Breadcrumbs", current: true },
+]
+
+const rtlBreadcrumbItems: BreadcrumbItem[] = [
+  { label: "\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629", href: "#", icon: <BreadcrumbHomeIcon /> },
+  { label: "\u0627\u0644\u0646\u0638\u0627\u0645", href: "#", icon: <BreadcrumbFolderIcon /> },
+  { label: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a", current: true },
+]
+
+export function BreadcrumbsDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
+      <Breadcrumbs aria-label="Default breadcrumb" items={breadcrumbItems} overflowLabel="More" />
+      <Breadcrumbs
+        aria-label="Raised breadcrumb"
+        items={breadcrumbItems}
+        overflowLabel="More"
+        separator="chevron"
+        style="raised"
+      />
+      <Breadcrumbs
+        aria-label="Collapsed breadcrumb"
+        items={longBreadcrumbItems}
+        maxItems={4}
+        overflowLabel="More"
+        separator="chevron"
+        style="raised"
+      />
+      <Breadcrumbs
+        aria-label={"\u0627\u0644\u0645\u0633\u0627\u0631"}
+        dir="rtl"
+        items={rtlBreadcrumbItems}
+        overflowLabel={"\u0627\u0644\u0645\u0632\u064a\u062f"}
+        separator="chevron"
+        style="raised"
+      />
+    </div>
+  )
+}

package/registry/examples/expanded/empty-state-demo.tsx

@@ -1,39 +1,39 @@
-import { InboxIcon, PlusIcon, SearchIcon } from "lucide-react"
-
-import {
-  EmptyState,
-  type EmptyStateAction,
-} from "@/components/ui/expanded/EmptyState"
-
-const searchActions: EmptyStateAction[] = [
-  { label: "Reset filters", variant: "secondary" },
-  { label: "Create item" },
-]
-
-const inboxActions: EmptyStateAction[] = [
-  {
-    icon: <PlusIcon data-icon="inline-start" />,
-    label: "Add record",
-  },
-]
-
-export function EmptyStateDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <EmptyState
-        actions={searchActions}
-        description="Try adjusting your search or filters"
-        icon={<SearchIcon />}
-        title="No results found"
-      />
-      <EmptyState
-        actions={inboxActions}
-        align="start"
-        description="Create a record to start tracking this workflow."
-        icon={<InboxIcon />}
-        size="compact"
-        title="Nothing here yet"
-      />
-    </div>
-  )
-}
+import { InboxIcon, PlusIcon, SearchIcon } from "lucide-react"
+
+import {
+  EmptyState,
+  type EmptyStateAction,
+} from "@/components/ui/expanded/EmptyState"
+
+const searchActions: EmptyStateAction[] = [
+  { label: "Reset filters", variant: "secondary" },
+  { label: "Create item" },
+]
+
+const inboxActions: EmptyStateAction[] = [
+  {
+    icon: <PlusIcon data-icon="inline-start" />,
+    label: "Add record",
+  },
+]
+
+export function EmptyStateDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <EmptyState
+        actions={searchActions}
+        description="Try adjusting your search or filters"
+        icon={<SearchIcon />}
+        title="No results found"
+      />
+      <EmptyState
+        actions={inboxActions}
+        align="start"
+        description="Create a record to start tracking this workflow."
+        icon={<InboxIcon />}
+        size="compact"
+        title="Nothing here yet"
+      />
+    </div>
+  )
+}