banhaten 0.4.0 → 0.5.0

package/registry/examples/thinking-state-demo.tsx

@@ -0,0 +1,13 @@
+import { ThinkingState } from "@/components/ui/thinking-state"
+
+export function ThinkingStateDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
+      <ThinkingState />
+
+      <div dir="rtl">
+        <ThinkingState>جارٍ التفكير</ThinkingState>
+      </div>
+    </div>
+  )
+}

package/registry/examples/toast-demo.tsx

@@ -1,35 +1,35 @@
-import { Button } from "@/components/ui/button"
-import { Toaster, toast } from "@/components/ui/toast"
-
-export function ToastDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-3xl-16)]">
-      <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
-        <Button size="sm" onClick={() => toast.success("Project saved")}>
-          Success
-        </Button>
-        <Button size="sm" variant="warning" onClick={() => toast.warning("Review required")}>
-          Warning
-        </Button>
-        <Button size="sm" variant="danger" onClick={() => toast.danger("Unable to publish")}>
-          Danger
-        </Button>
-        <Button
-          size="sm"
-          variant="outline"
-          onClick={() =>
-            toast.info("Invite sent", {
-              action: {
-                label: "Undo",
-                onClick: () => toast("Invite cancelled"),
-              },
-            })
-          }
-        >
-          Action
-        </Button>
-      </div>
-      <Toaster />
-    </div>
-  )
-}
+import { Button } from "@/components/ui/button"
+import { Toaster, toast } from "@/components/ui/toast"
+
+export function ToastDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
+      <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+        <Button size="sm" onClick={() => toast.success("Project saved")}>
+          Success
+        </Button>
+        <Button size="sm" variant="warning" onClick={() => toast.warning("Review required")}>
+          Warning
+        </Button>
+        <Button size="sm" variant="danger" onClick={() => toast.danger("Unable to publish")}>
+          Danger
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() =>
+            toast.info("Invite sent", {
+              action: {
+                label: "Undo",
+                onClick: () => toast("Invite cancelled"),
+              },
+            })
+          }
+        >
+          Action
+        </Button>
+      </div>
+      <Toaster />
+    </div>
+  )
+}

package/registry/examples/toggle-demo.tsx

@@ -1,59 +1,59 @@
-import * as React from "react"
-
-import { Toggle, ToggleField } from "@/components/ui/toggle"
-
-export function ToggleDemo() {
-  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)]">
-        <Toggle
-          checked={checked}
-          onCheckedChange={setChecked}
-          aria-label="Toggle notifications"
-        />
-        <Toggle aria-label="Small toggle" size="sm" />
-        <Toggle aria-label="Icon toggle" showIcon defaultChecked />
-        <Toggle aria-label="Disabled toggle" disabled />
-      </div>
-
-      <div className="grid gap-[var(--bh-space-3xl-16)] sm:grid-cols-2">
-        <ToggleField
-          defaultChecked
-          label="Label"
-          description="Supporting text"
-        />
-        <ToggleField
-          className="w-[var(--bh-space-15xl-224)]"
-          controlPosition="end"
-          label="Label"
-        />
-        <ToggleField
-          disabled
-          label="Label"
-          description="Supporting text"
-        />
-        <ToggleField
-          defaultChecked
-          showIcon
-          size="sm"
-          label="Label"
-        />
-      </div>
-
-      <div dir="rtl" className="grid gap-[var(--bh-space-3xl-16)] sm:grid-cols-2">
-        <ToggleField
-          defaultChecked
-          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
-          description={"\u0646\u0635 \u0645\u0633\u0627\u0639\u062f"}
-        />
-        <ToggleField
-          className="w-[var(--bh-space-15xl-224)]"
-          controlPosition="end"
-          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
-        />
-      </div>
-    </div>
-  )
-}
+import * as React from "react"
+
+import { Toggle, ToggleField } from "@/components/ui/toggle"
+
+export function ToggleDemo() {
+  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)]">
+        <Toggle
+          checked={checked}
+          onCheckedChange={setChecked}
+          aria-label="Toggle notifications"
+        />
+        <Toggle aria-label="Small toggle" size="sm" />
+        <Toggle aria-label="Icon toggle" showIcon defaultChecked />
+        <Toggle aria-label="Disabled toggle" disabled />
+      </div>
+
+      <div className="grid gap-[var(--bh-space-3xl-16)] sm:grid-cols-2">
+        <ToggleField
+          defaultChecked
+          label="Label"
+          description="Supporting text"
+        />
+        <ToggleField
+          className="w-[var(--bh-space-15xl-224)]"
+          controlPosition="end"
+          label="Label"
+        />
+        <ToggleField
+          disabled
+          label="Label"
+          description="Supporting text"
+        />
+        <ToggleField
+          defaultChecked
+          showIcon
+          size="sm"
+          label="Label"
+        />
+      </div>
+
+      <div dir="rtl" className="grid gap-[var(--bh-space-3xl-16)] sm:grid-cols-2">
+        <ToggleField
+          defaultChecked
+          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
+          description={"\u0646\u0635 \u0645\u0633\u0627\u0639\u062f"}
+        />
+        <ToggleField
+          className="w-[var(--bh-space-15xl-224)]"
+          controlPosition="end"
+          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/tooltip-demo.tsx

@@ -1,115 +1,115 @@
-import { InfoIcon, SettingsIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-const supportText =
-  "You may notice that we've made some updates to our look and feel."
-const rtlLabel = "\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0643\u062b\u0631"
-const rtlSupportText =
-  "\u0642\u062f \u062a\u0644\u0627\u062d\u0638 \u0623\u0646\u0646\u0627 \u0623\u062c\u0631\u064a\u0646\u0627 \u0628\u0639\u0636 \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0639\u0644\u0649 \u0634\u0643\u0644\u0646\u0627 \u0648\u0645\u0638\u0647\u0631\u0646\u0627."
-
-export function TooltipDemo() {
-  return (
-    <TooltipProvider delayDuration={0}>
-      <div className="grid gap-[var(--bh-space-6xl-32)]">
-        <div className="flex flex-wrap items-center gap-[var(--bh-space-6xl-32)]">
-          <Tooltip defaultOpen>
-            <TooltipTrigger asChild>
-              <Button size="icon" variant="secondary" aria-label="More information">
-                <InfoIcon />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent pointerPosition="top-left">
-              More information
-            </TooltipContent>
-          </Tooltip>
-
-          <Tooltip defaultOpen>
-            <TooltipTrigger asChild>
-              <Button size="icon" variant="outline" aria-label="Settings help">
-                <SettingsIcon />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent pointerPosition="bottom-center" variant="default">
-              More information
-            </TooltipContent>
-          </Tooltip>
-
-          <Tooltip defaultOpen>
-            <TooltipTrigger asChild>
-              <Button size="icon" variant="ghost-primary" aria-label="No pointer help">
-                <InfoIcon />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent pointerPosition="none" showPointer={false}>
-              More information
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
-        <div className="flex flex-wrap items-center gap-[var(--bh-space-6xl-32)]">
-          <Tooltip defaultOpen>
-            <TooltipTrigger asChild>
-              <Button variant="secondary">Dark large</Button>
-            </TooltipTrigger>
-            <TooltipContent
-              pointerPosition="center-right"
-              size="lg"
-              supportText={supportText}
-            >
-              More information
-            </TooltipContent>
-          </Tooltip>
-
-          <Tooltip defaultOpen>
-            <TooltipTrigger asChild>
-              <Button variant="outline">Default large</Button>
-            </TooltipTrigger>
-            <TooltipContent
-              pointerPosition="top-center"
-              size="lg"
-              supportText={supportText}
-              variant="default"
-            >
-              More information
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
-        <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-6xl-32)]">
-          <Tooltip defaultOpen>
-            <TooltipTrigger asChild>
-              <Button size="icon" variant="secondary" aria-label={rtlLabel}>
-                <InfoIcon />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent dir="rtl" pointerPosition="top-left">
-              {rtlLabel}
-            </TooltipContent>
-          </Tooltip>
-
-          <Tooltip defaultOpen>
-            <TooltipTrigger asChild>
-              <Button variant="outline">{rtlLabel}</Button>
-            </TooltipTrigger>
-            <TooltipContent
-              dir="rtl"
-              pointerPosition="top-left"
-              size="lg"
-              supportText={rtlSupportText}
-              variant="default"
-            >
-              {rtlLabel}
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      </div>
-    </TooltipProvider>
-  )
-}
+import { InfoIcon, SettingsIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const supportText =
+  "You may notice that we've made some updates to our look and feel."
+const rtlLabel = "\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0643\u062b\u0631"
+const rtlSupportText =
+  "\u0642\u062f \u062a\u0644\u0627\u062d\u0638 \u0623\u0646\u0646\u0627 \u0623\u062c\u0631\u064a\u0646\u0627 \u0628\u0639\u0636 \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0639\u0644\u0649 \u0634\u0643\u0644\u0646\u0627 \u0648\u0645\u0638\u0647\u0631\u0646\u0627."
+
+export function TooltipDemo() {
+  return (
+    <TooltipProvider delayDuration={0}>
+      <div className="grid gap-[var(--bh-space-6xl-32)]">
+        <div className="flex flex-wrap items-center gap-[var(--bh-space-6xl-32)]">
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="secondary" aria-label="More information">
+                <InfoIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent pointerPosition="top-left">
+              More information
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="outline" aria-label="Settings help">
+                <SettingsIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent pointerPosition="bottom-center" variant="default">
+              More information
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="ghost-primary" aria-label="No pointer help">
+                <InfoIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent pointerPosition="none" showPointer={false}>
+              More information
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-[var(--bh-space-6xl-32)]">
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button variant="secondary">Dark large</Button>
+            </TooltipTrigger>
+            <TooltipContent
+              pointerPosition="center-right"
+              size="lg"
+              supportText={supportText}
+            >
+              More information
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button variant="outline">Default large</Button>
+            </TooltipTrigger>
+            <TooltipContent
+              pointerPosition="top-center"
+              size="lg"
+              supportText={supportText}
+              variant="default"
+            >
+              More information
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        <div dir="rtl" className="flex flex-wrap items-center gap-[var(--bh-space-6xl-32)]">
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="secondary" aria-label={rtlLabel}>
+                <InfoIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent dir="rtl" pointerPosition="top-left">
+              {rtlLabel}
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip defaultOpen>
+            <TooltipTrigger asChild>
+              <Button variant="outline">{rtlLabel}</Button>
+            </TooltipTrigger>
+            <TooltipContent
+              dir="rtl"
+              pointerPosition="top-left"
+              size="lg"
+              supportText={rtlSupportText}
+              variant="default"
+            >
+              {rtlLabel}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+    </TooltipProvider>
+  )
+}

package/registry/guidance/USAGE.md

@@ -1,27 +1,27 @@
-# Banhaten implementation rules
-
-This project uses the Banhaten design system. Treat the installed component API and registry metadata as the source of truth; do not redraw controls from memory or infer defaults from the first documented variant.
-
-## Before changing UI
-
-1. Run `npx banhaten search <need>` to find the intended component.
-2. Run `npx banhaten docs <component>` to inspect explicit defaults, recommended uses, avoid rules, and recipes.
-3. Run `npx banhaten view <component>` before wrapping or extending its internals.
-4. Prefer the documented golden recipe when the screen resembles a collection filter bar or results toolbar.
-
-## Composition rules
-
-- Use one semantic `density` across controls in the same row: `compact` is 32px, `default` is 36px, and `comfortable` is 40px.
-- Do not align Banhaten controls with raw height, padding, radius, or font-size utilities. Width and responsive layout utilities are allowed.
-- Use `DatePicker` or `DateRangePicker` for dates. Do not simulate calendar fields with `Input` or native date inputs.
-- Pass explicit `leadingIcon` and `trailingIcon` nodes. Use `showAtSign` or `showInfo` only for those exact semantic affordances. The legacy `hasLeadingIcon` and `hasInformationIcon` flags are deprecated.
-- Use `shortcutKeys={["Mod", "K"]}` on search inputs, `Shortcut` for one compact combined hint, or `KbdShortcut` when each physical key needs its own keycap. Never hard-code a single Command glyph for every platform.
-- Use `SegmentedControl` for small mutually exclusive view, density, period, or numeric choices. Do not rebuild joined numeric buttons locally.
-- Use functional `Select` for option menus. `ToolbarSelect` is only a trigger-shaped toolbar primitive.
-- Preserve inherited `dir`; use logical spacing and alignment utilities for RTL-safe composition.
-
-## Before finishing
-
-Run `npx banhaten doctor` and inspect every diagnostic. Run `npx banhaten diff` before updating installed components, then execute the product's type, behavior, accessibility, and visual tests.
-
-Canonical recipes live in `docs/design-system/form-recipes.md` in the Banhaten package.
+# Banhaten implementation rules
+
+This project uses the Banhaten design system. Treat the installed component API and registry metadata as the source of truth; do not redraw controls from memory or infer defaults from the first documented variant.
+
+## Before changing UI
+
+1. Run `npx banhaten search <need>` to find the intended component.
+2. Run `npx banhaten docs <component>` to inspect explicit defaults, recommended uses, avoid rules, and recipes.
+3. Run `npx banhaten view <component>` before wrapping or extending its internals.
+4. Prefer the documented golden recipe when the screen resembles a collection filter bar or results toolbar.
+
+## Composition rules
+
+- Use one semantic `density` across controls in the same row: `compact` is 32px, `default` is 36px, and `comfortable` is 40px.
+- Do not align Banhaten controls with raw height, padding, radius, or font-size utilities. Width and responsive layout utilities are allowed.
+- Use `DatePicker` or `DateRangePicker` for dates. Do not simulate calendar fields with `Input` or native date inputs.
+- Pass explicit `leadingIcon` and `trailingIcon` nodes. Use `showAtSign` or `showInfo` only for those exact semantic affordances. The legacy `hasLeadingIcon` and `hasInformationIcon` flags are deprecated.
+- Use `shortcutKeys={["Mod", "K"]}` on search inputs, `Shortcut` for one compact combined hint, or `KbdShortcut` when each physical key needs its own keycap. Never hard-code a single Command glyph for every platform.
+- Use `SegmentedControl` for small mutually exclusive view, density, period, or numeric choices. Do not rebuild joined numeric buttons locally.
+- Use functional `Select` for option menus. `ToolbarSelect` is only a trigger-shaped toolbar primitive.
+- Preserve inherited `dir`; use logical spacing and alignment utilities for RTL-safe composition.
+
+## Before finishing
+
+Run `npx banhaten doctor` and inspect every diagnostic. Run `npx banhaten diff` before updating installed components, then execute the product's type, behavior, accessibility, and visual tests.
+
+Canonical recipes live in `docs/design-system/form-recipes.md` in the Banhaten package.

package/registry/guidance/charts.LICENSE.txt

@@ -0,0 +1,24 @@
+Banhaten chart designs and illustrative block datasets are adapted from EvilCharts:
+https://github.com/legions-developer/evilcharts
+
+MIT License
+
+Copyright (c) 2026 Gurbinder
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/registry/hooks/use-controllable-state.ts

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+
+/**
+ * State a parent may control. While `value` is undefined the hook keeps its
+ * own copy, seeded from `defaultValue`; either way `onChange` hears every
+ * change made through the returned setter.
+ */
+export function useControllableState<T>({
+  defaultValue,
+  onChange,
+  value,
+}: {
+  defaultValue: T
+  onChange?: (value: T) => void
+  value?: T
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)
+  const controlled = value !== undefined
+  const onChangeRef = React.useRef(onChange)
+  onChangeRef.current = onChange
+
+  const setValue = React.useCallback(
+    (next: T) => {
+      if (!controlled) setUncontrolled(next)
+      onChangeRef.current?.(next)
+    },
+    [controlled]
+  )
+
+  return [controlled ? value : uncontrolled, setValue] as const
+}