banhaten 0.5.0 → 0.6.0

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.