banhaten 0.3.0 → 0.5.0

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>
+  )
+}

package/registry/examples/collection-filter-bar-demo.tsx

@@ -1,135 +1,135 @@
-"use client"
-
-import * as React from "react"
-
-import { DatePicker } from "@/components/ui/date-picker"
-import { Field, FieldLabel } from "@/components/ui/field"
-import {
-  Select,
-  SelectMenuItem,
-} from "@/components/ui/select"
-import {
-  ToolbarButton,
-  ToolbarSearch,
-} from "@/components/ui/toolbar"
-
-const typeLabels = {
-  everything: "Everything",
-  articles: "Articles",
-  videos: "Videos",
-}
-
-const orderLabels = {
-  recent: "Recently bookmarked",
-  oldest: "Oldest bookmarked",
-  title: "Title",
-}
-
-export function CollectionFilterBarDemo() {
-  const [typeFilter, setTypeFilter] = React.useState<keyof typeof typeLabels>(
-    "everything"
-  )
-  const [order, setOrder] = React.useState<keyof typeof orderLabels>("recent")
-  const [dateRevision, setDateRevision] = React.useState(0)
-
-  return (
-    <form
-      aria-label="Collection filters"
-      data-recipe="collection-filter-bar"
-      className="grid w-full min-w-0 gap-[var(--bh-space-xl-12)] rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] shadow-[var(--shadow-component-default)]"
-      onReset={() => {
-        setTypeFilter("everything")
-        setOrder("recent")
-        setDateRevision((revision) => revision + 1)
-      }}
-    >
-      <ToolbarSearch
-        aria-label="Search bookmarks"
-        density="default"
-        placeholder="Search words, people, or folders"
-        shortcutKeys={["Mod", "F"]}
-        width="full"
-      />
-
-      <div className="flex min-w-0 flex-wrap items-end gap-[var(--bh-space-xl-12)]">
-        <Field
-          className="flex-[1_1_var(--bh-date-trigger-width)]"
-          controlId="collection-filter-from"
-        >
-          <FieldLabel tone="subtle">From</FieldLabel>
-          <DatePicker
-            key={`from-${dateRevision}`}
-            className="w-full"
-            density="default"
-            placeholder="dd/mm/yyyy"
-            triggerClassName="w-full"
-            triggerProps={{ id: "collection-filter-from" }}
-          />
-        </Field>
-
-        <Field
-          className="flex-[1_1_var(--bh-date-trigger-width)]"
-          controlId="collection-filter-to"
-        >
-          <FieldLabel tone="subtle">To</FieldLabel>
-          <DatePicker
-            key={`to-${dateRevision}`}
-            className="w-full"
-            density="default"
-            placeholder="dd/mm/yyyy"
-            triggerClassName="w-full"
-            triggerProps={{ id: "collection-filter-to" }}
-          />
-        </Field>
-
-        <Field
-          className="flex-[1_1_var(--bh-date-trigger-width)]"
-          controlId="collection-filter-type"
-        >
-          <FieldLabel tone="subtle">Type</FieldLabel>
-          <Select
-            className="w-full"
-            density="default"
-            onValueChange={(value) =>
-              setTypeFilter(value as keyof typeof typeLabels)
-            }
-            selectValue={typeFilter}
-            triggerId="collection-filter-type"
-            value={typeLabels[typeFilter]}
-          >
-            <SelectMenuItem label="Everything" value="everything" />
-            <SelectMenuItem label="Articles" value="articles" />
-            <SelectMenuItem label="Videos" value="videos" />
-          </Select>
-        </Field>
-
-        <Field
-          className="flex-[1_1_var(--bh-date-trigger-width)]"
-          controlId="collection-filter-order"
-        >
-          <FieldLabel tone="subtle">Order</FieldLabel>
-          <Select
-            className="w-full"
-            density="default"
-            onValueChange={(value) =>
-              setOrder(value as keyof typeof orderLabels)
-            }
-            selectValue={order}
-            triggerId="collection-filter-order"
-            value={orderLabels[order]}
-          >
-            <SelectMenuItem label="Recently bookmarked" value="recent" />
-            <SelectMenuItem label="Oldest bookmarked" value="oldest" />
-            <SelectMenuItem label="Title" value="title" />
-          </Select>
-        </Field>
-
-        <div className="flex items-end">
-          <ToolbarButton density="default" type="reset" variant="link">
-            Reset
-          </ToolbarButton>
-        </div>
-      </div>
-    </form>
-  )
-}
+"use client"
+
+import * as React from "react"
+
+import { DatePicker } from "@/components/ui/date-picker"
+import { Field, FieldLabel } from "@/components/ui/field"
+import {
+  Select,
+  SelectMenuItem,
+} from "@/components/ui/select"
+import {
+  ToolbarButton,
+  ToolbarSearch,
+} from "@/components/ui/toolbar"
+
+const typeLabels = {
+  everything: "Everything",
+  articles: "Articles",
+  videos: "Videos",
+}
+
+const orderLabels = {
+  recent: "Recently bookmarked",
+  oldest: "Oldest bookmarked",
+  title: "Title",
+}
+
+export function CollectionFilterBarDemo() {
+  const [typeFilter, setTypeFilter] = React.useState<keyof typeof typeLabels>(
+    "everything"
+  )
+  const [order, setOrder] = React.useState<keyof typeof orderLabels>("recent")
+  const [dateRevision, setDateRevision] = React.useState(0)
+
+  return (
+    <form
+      aria-label="Collection filters"
+      data-recipe="collection-filter-bar"
+      className="grid w-full min-w-0 gap-[var(--bh-space-xl-12)] rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] shadow-[var(--elevation-component-default)]"
+      onReset={() => {
+        setTypeFilter("everything")
+        setOrder("recent")
+        setDateRevision((revision) => revision + 1)
+      }}
+    >
+      <ToolbarSearch
+        aria-label="Search bookmarks"
+        density="default"
+        placeholder="Search words, people, or folders"
+        shortcutKeys={["Mod", "F"]}
+        width="full"
+      />
+
+      <div className="flex min-w-0 flex-wrap items-end gap-[var(--bh-space-xl-12)]">
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-from"
+        >
+          <FieldLabel tone="subtle">From</FieldLabel>
+          <DatePicker
+            key={`from-${dateRevision}`}
+            className="w-full"
+            density="default"
+            placeholder="dd/mm/yyyy"
+            triggerClassName="w-full"
+            triggerProps={{ id: "collection-filter-from" }}
+          />
+        </Field>
+
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-to"
+        >
+          <FieldLabel tone="subtle">To</FieldLabel>
+          <DatePicker
+            key={`to-${dateRevision}`}
+            className="w-full"
+            density="default"
+            placeholder="dd/mm/yyyy"
+            triggerClassName="w-full"
+            triggerProps={{ id: "collection-filter-to" }}
+          />
+        </Field>
+
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-type"
+        >
+          <FieldLabel tone="subtle">Type</FieldLabel>
+          <Select
+            className="w-full"
+            density="default"
+            onValueChange={(value) =>
+              setTypeFilter(value as keyof typeof typeLabels)
+            }
+            selectValue={typeFilter}
+            triggerId="collection-filter-type"
+            value={typeLabels[typeFilter]}
+          >
+            <SelectMenuItem label="Everything" value="everything" />
+            <SelectMenuItem label="Articles" value="articles" />
+            <SelectMenuItem label="Videos" value="videos" />
+          </Select>
+        </Field>
+
+        <Field
+          className="flex-[1_1_var(--bh-date-trigger-width)]"
+          controlId="collection-filter-order"
+        >
+          <FieldLabel tone="subtle">Order</FieldLabel>
+          <Select
+            className="w-full"
+            density="default"
+            onValueChange={(value) =>
+              setOrder(value as keyof typeof orderLabels)
+            }
+            selectValue={order}
+            triggerId="collection-filter-order"
+            value={orderLabels[order]}
+          >
+            <SelectMenuItem label="Recently bookmarked" value="recent" />
+            <SelectMenuItem label="Oldest bookmarked" value="oldest" />
+            <SelectMenuItem label="Title" value="title" />
+          </Select>
+        </Field>
+
+        <div className="flex items-end">
+          <ToolbarButton density="default" type="reset" variant="link">
+            Reset
+          </ToolbarButton>
+        </div>
+      </div>
+    </form>
+  )
+}

package/registry/examples/command-demo.tsx

@@ -1,42 +1,42 @@
-import { FileTextIcon, SettingsIcon, UserIcon } from "lucide-react"
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/components/ui/command"
-
-export function CommandDemo() {
-  return (
-    <Command>
-      <CommandInput />
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-        <CommandGroup heading="Pages">
-          <CommandItem value="profile">
-            <UserIcon className="size-[var(--bh-space-3xl-16)]" />
-            Profile
-            <CommandShortcut>⌘P</CommandShortcut>
-          </CommandItem>
-          <CommandItem value="docs">
-            <FileTextIcon className="size-[var(--bh-space-3xl-16)]" />
-            Docs
-            <CommandShortcut>⌘D</CommandShortcut>
-          </CommandItem>
-        </CommandGroup>
-        <CommandSeparator />
-        <CommandGroup heading="Actions">
-          <CommandItem value="settings">
-            <SettingsIcon className="size-[var(--bh-space-3xl-16)]" />
-            Settings
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}
+import { FileTextIcon, SettingsIcon, UserIcon } from "lucide-react"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command"
+
+export function CommandDemo() {
+  return (
+    <Command>
+      <CommandInput />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Pages">
+          <CommandItem value="profile">
+            <UserIcon className="size-[var(--bh-space-3xl-16)]" />
+            Profile
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem value="docs">
+            <FileTextIcon className="size-[var(--bh-space-3xl-16)]" />
+            Docs
+            <CommandShortcut>⌘D</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Actions">
+          <CommandItem value="settings">
+            <SettingsIcon className="size-[var(--bh-space-3xl-16)]" />
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}