banhaten 0.1.3 → 0.2.0

package/registry/examples/textarea-demo.tsx

@@ -31,15 +31,15 @@ const demoRtlTextareaProps = {
 
 export function TextareaDemo() {
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-start gap-6">
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <Textarea {...demoTextareaProps} />
         <Textarea {...demoTextareaProps} state="filled" />
         <Textarea {...demoTextareaProps} hasError state="placeholder" />
         <Textarea {...demoTextareaProps} state="disabled" />
       </div>
 
-      <div className="flex flex-wrap items-start gap-6">
+      <div className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <Textarea {...demoTextareaProps} type="tags" state="placeholder" />
         <Textarea
           {...demoTextareaProps}
@@ -62,7 +62,7 @@ export function TextareaDemo() {
         />
       </div>
 
-      <div dir="rtl" className="flex flex-wrap items-start gap-6">
+      <div dir="rtl" className="flex flex-wrap items-start gap-[var(--bh-space-5xl-24)]">
         <Textarea {...demoRtlTextareaProps} dir="rtl" />
         <Textarea {...demoRtlTextareaProps} dir="rtl" state="filled" />
         <Textarea {...demoRtlTextareaProps} dir="rtl" hasError state="placeholder" />

package/registry/examples/toast-demo.tsx

@@ -3,7 +3,7 @@ import { Toaster, toast } from "@/components/ui/toast"
 
 export function ToastDemo() {
   return (
-    <div className="grid gap-4">
+    <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

package/registry/examples/toggle-demo.tsx

@@ -6,8 +6,8 @@ export function ToggleDemo() {
   const [checked, setChecked] = React.useState(true)
 
   return (
-    <div className="grid gap-6">
-      <div className="flex flex-wrap items-center gap-4">
+    <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}
@@ -18,14 +18,14 @@ export function ToggleDemo() {
         <Toggle aria-label="Disabled toggle" disabled />
       </div>
 
-      <div className="grid gap-4 sm:grid-cols-2">
+      <div className="grid gap-[var(--bh-space-3xl-16)] sm:grid-cols-2">
         <ToggleField
           defaultChecked
           label="Label"
           description="Supporting text"
         />
         <ToggleField
-          className="w-56"
+          className="w-[var(--bh-space-15xl-224)]"
           controlPosition="end"
           label="Label"
         />
@@ -42,14 +42,14 @@ export function ToggleDemo() {
         />
       </div>
 
-      <div dir="rtl" className="grid gap-4 sm:grid-cols-2">
+      <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-56"
+          className="w-[var(--bh-space-15xl-224)]"
           controlPosition="end"
           label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
         />

package/registry/examples/tooltip-demo.tsx

@@ -17,8 +17,8 @@ const rtlSupportText =
 export function TooltipDemo() {
   return (
     <TooltipProvider delayDuration={0}>
-      <div className="grid gap-8">
-        <div className="flex flex-wrap items-center gap-8">
+      <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">
@@ -53,7 +53,7 @@ export function TooltipDemo() {
           </Tooltip>
         </div>
 
-        <div className="flex flex-wrap items-center gap-8">
+        <div className="flex flex-wrap items-center gap-[var(--bh-space-6xl-32)]">
           <Tooltip defaultOpen>
             <TooltipTrigger asChild>
               <Button variant="secondary">Dark large</Button>
@@ -82,7 +82,7 @@ export function TooltipDemo() {
           </Tooltip>
         </div>
 
-        <div dir="rtl" className="flex flex-wrap items-center gap-8">
+        <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}>

package/registry/guidance/USAGE.md

@@ -0,0 +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"]}` or `KbdShortcut` for shortcuts. 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/hooks/use-direction.ts

@@ -4,24 +4,204 @@ import * as React from "react"
 
 export type Direction = "ltr" | "rtl"
 
-export function useDirection(defaultDirection: Direction = "ltr") {
-  const [direction, setDirection] = React.useState<Direction>(defaultDirection)
+type DirectionStore = {
+  listeners: Set<() => void>
+  observer?: MutationObserver
+}
+
+const DirectionContext = React.createContext<Direction | undefined>(undefined)
+const directionStores = new WeakMap<Document, DirectionStore>()
+const noop = () => undefined
+
+export type DirectionProviderProps = {
+  children: React.ReactNode
+  dir: Direction
+}
+
+export function DirectionProvider({
+  children,
+  dir,
+}: DirectionProviderProps) {
+  return React.createElement(DirectionContext.Provider, { value: dir }, children)
+}
+
+export function resolveDirection(
+  explicitDirection?: Direction,
+  element?: Element | null
+): Direction {
+  if (explicitDirection) return explicitDirection
+
+  let ancestor = element?.parentElement
+  while (ancestor) {
+    const inheritedDirection = normalizeDirection(ancestor.getAttribute("dir"))
+    if (inheritedDirection) return inheritedDirection
+    ancestor = ancestor.parentElement
+  }
+
+  const ownerDocument = element?.ownerDocument ?? getBrowserDocument()
+  const documentDirection = normalizeDirection(
+    ownerDocument?.documentElement.getAttribute("dir")
+  )
+
+  return documentDirection ?? "ltr"
+}
+
+export function useResolvedDirection<T extends Element>(
+  explicitDirection: Direction | undefined,
+  elementRef: React.RefObject<T | null>
+) {
+  const contextDirection = React.useContext(DirectionContext)
+  const preferredDirection = explicitDirection ?? contextDirection
+
+  const subscribe = React.useCallback(
+    (listener: () => void) => {
+      if (preferredDirection) return noop
+
+      const ownerDocument =
+        elementRef.current?.ownerDocument ?? getBrowserDocument()
+
+      return ownerDocument
+        ? subscribeToDirectionChanges(ownerDocument, listener)
+        : noop
+    },
+    [elementRef, preferredDirection]
+  )
+  const getSnapshot = React.useCallback(
+    () => resolveDirection(preferredDirection, elementRef.current),
+    [elementRef, preferredDirection]
+  )
+  const getServerSnapshot = React.useCallback(
+    () => preferredDirection ?? "ltr",
+    [preferredDirection]
+  )
+
+  return React.useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  )
+}
+
+export function useDirection(defaultDirection?: Direction) {
+  const contextDirection = React.useContext(DirectionContext)
+  const preferredDirection = defaultDirection ?? contextDirection
+  const observedDirection = useDocumentDirection(preferredDirection)
+  const observedDirectionRef = React.useRef(observedDirection)
+  const [directionOverride, setDirectionOverride] = React.useState<
+    Direction | undefined
+  >(undefined)
+
+  observedDirectionRef.current = observedDirection
+
+  const setDirection = React.useCallback<
+    React.Dispatch<React.SetStateAction<Direction>>
+  >((nextDirection) => {
+    setDirectionOverride((currentDirection) => {
+      const selectedDirection =
+        currentDirection ?? observedDirectionRef.current
+
+      return typeof nextDirection === "function"
+        ? nextDirection(selectedDirection)
+        : nextDirection
+    })
+  }, [])
 
   React.useEffect(() => {
-    const htmlDirection = document.documentElement.getAttribute("dir")
+    if (defaultDirection === undefined && contextDirection) {
+      setDirectionOverride(contextDirection)
+    }
+  }, [contextDirection, defaultDirection])
+
+  return [directionOverride ?? observedDirection, setDirection] as const
+}
+
+function useDocumentDirection(preferredDirection?: Direction) {
+  const subscribe = React.useCallback(
+    (listener: () => void) => {
+      if (preferredDirection) return noop
+
+      const ownerDocument = getBrowserDocument()
+      return ownerDocument
+        ? subscribeToDirectionChanges(ownerDocument, listener)
+        : noop
+    },
+    [preferredDirection]
+  )
+  const getSnapshot = React.useCallback(
+    () => resolveDirection(preferredDirection),
+    [preferredDirection]
+  )
+  const getServerSnapshot = React.useCallback(
+    () => preferredDirection ?? "ltr",
+    [preferredDirection]
+  )
+
+  return React.useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  )
+}
+
+function subscribeToDirectionChanges(
+  ownerDocument: Document,
+  listener: () => void
+) {
+  const store = getDirectionStore(ownerDocument)
+  store.listeners.add(listener)
+
+  if (store.listeners.size === 1) {
+    startDirectionObserver(ownerDocument, store)
+  }
+
+  return () => {
+    store.listeners.delete(listener)
 
-    if (htmlDirection === "ltr" || htmlDirection === "rtl") {
-      setDirection(htmlDirection)
-      return
+    if (store.listeners.size === 0) {
+      store.observer?.disconnect()
+      store.observer = undefined
     }
+  }
+}
 
-    document.documentElement.setAttribute("dir", defaultDirection)
-  }, [defaultDirection])
+function getDirectionStore(ownerDocument: Document) {
+  const existingStore = directionStores.get(ownerDocument)
+  if (existingStore) return existingStore
 
-  const updateDirection = React.useCallback((nextDirection: Direction) => {
-    document.documentElement.setAttribute("dir", nextDirection)
-    setDirection(nextDirection)
-  }, [])
+  const store: DirectionStore = { listeners: new Set() }
+  directionStores.set(ownerDocument, store)
+  return store
+}
+
+function startDirectionObserver(
+  ownerDocument: Document,
+  store: DirectionStore
+) {
+  const MutationObserverConstructor =
+    ownerDocument.defaultView?.MutationObserver
+  const directionRoot = ownerDocument.documentElement
+
+  if (!MutationObserverConstructor || !directionRoot) return
+
+  store.observer = new MutationObserverConstructor(() => {
+    for (const listener of [...store.listeners]) {
+      listener()
+    }
+  })
+  store.observer.observe(directionRoot, {
+    attributeFilter: ["dir"],
+    attributes: true,
+    subtree: true,
+  })
+}
+
+function getBrowserDocument() {
+  return typeof document === "undefined" ? undefined : document
+}
 
-  return [direction, updateDirection] as const
+function normalizeDirection(value?: string | null): Direction | undefined {
+  const normalizedValue = value?.trim().toLowerCase()
+  return normalizedValue === "ltr" || normalizedValue === "rtl"
+    ? normalizedValue
+    : undefined
 }