banhaten 0.4.0 → 0.6.0

package/registry/examples/chart-demo.tsx

@@ -1,10 +1,4 @@
-import { Line, LineChart, XAxis, YAxis } from "recharts"
-
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart"
+import { DataChart } from "@/components/ui/data-chart"
 
 const data = [
   { month: "Jan", revenue: 120 },
@@ -15,19 +9,10 @@ const data = [
 
 export function ChartDemo() {
   return (
-    <ChartContainer config={{ revenue: { color: "var(--bh-chart-1)" } }}>
-      <LineChart data={data}>
-        <XAxis dataKey="month" tickLine={false} axisLine={false} />
-        <YAxis tickLine={false} axisLine={false} width={32} />
-        <ChartTooltip content={<ChartTooltipContent />} />
-        <Line
-          dataKey="revenue"
-          type="monotone"
-          stroke="var(--color-revenue)"
-          strokeWidth="var(--bh-icon-stroke-200)"
-          dot={false}
-        />
-      </LineChart>
-    </ChartContainer>
+    <DataChart
+      label="Monthly revenue"
+      description="Illustrative revenue from January through April."
+      spec={{ family: "area", data, categoryKey: "month", variant: "gradient", series: [{ key: "revenue", label: "Revenue" }], legend: true }}
+    />
   )
 }

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

@@ -36,7 +36,7 @@ export function CollectionFilterBarDemo() {
     <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)]"
+      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")

package/registry/examples/control-density-contract-demo.tsx

@@ -32,7 +32,11 @@ export function ControlDensityContractDemo() {
               hasLabel={false}
               placeholder="Input"
             />
-            <Select density={density} value="Select" />
+            <Select
+              aria-label={`${density} density select`}
+              density={density}
+              value="Select"
+            />
             <DatePicker
               density={density}
               placeholder="Date"

package/registry/examples/inline-citations-demo.tsx

@@ -0,0 +1,31 @@
+import {
+  CitationMark,
+  CitationProse,
+  InlineCitations,
+  type CitationSource,
+} from "@/components/ui/inline-citations"
+
+const sources: CitationSource[] = [
+  {
+    host: "arxiv.org",
+    label: "Attention Is All You Need",
+    url: "https://arxiv.org/abs/1706.03762",
+  },
+  {
+    host: "arxiv.org",
+    label: "Efficient Transformers: A Survey",
+    url: "https://arxiv.org/abs/2009.06732",
+  },
+]
+
+export function InlineCitationsDemo() {
+  return (
+    <InlineCitations className="max-w-[var(--bh-space-19xl-384)]" sources={sources}>
+      <CitationProse>
+        Transformers scale well with data and compute
+        <CitationMark n={1} />, though attention is quadratic in sequence length
+        <CitationMark n={2} />.
+      </CitationProse>
+    </InlineCitations>
+  )
+}

package/registry/examples/input-actions-demo.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+
+import { Input } from "@/components/ui/input"
+
+export function InputActionsDemo() {
+  const [quantity, setQuantity] = React.useState("1")
+  const [reference, setReference] = React.useState("")
+  const [applied, setApplied] = React.useState("Choose a quantity, then apply your reference.")
+
+  return (
+    <div className="grid gap-[var(--bh-space-xl-12)]">
+      <Input
+        kind="quantity"
+        label="Order quantity"
+        quantityLabel="order quantity"
+        min={0}
+        max={10}
+        step={1}
+        value={quantity}
+        onChange={(event) => setQuantity(event.currentTarget.value)}
+      />
+      <Input
+        kind="trailing-button"
+        label="Order reference"
+        placeholder="Reference"
+        buttonLabel="Apply"
+        value={reference}
+        onChange={(event) => setReference(event.currentTarget.value)}
+        buttonProps={{
+          onClick: () => setApplied(`${quantity || "0"} items${reference ? ` · ${reference}` : ""}`),
+        }}
+      />
+      <p role="status" className="text-[var(--bh-content-subtle)]">{applied}</p>
+    </div>
+  )
+}

package/registry/examples/menu-demo.tsx

@@ -89,7 +89,7 @@ export function MenuDemo() {
               </MenuSubContent>
             </MenuSub>
             <MenuSeparator />
-            <MenuItem>
+            <MenuItem onSelect={(event: Event) => event.preventDefault()}>
               <MenuItemIcon>
                 <PanelRightIcon aria-hidden="true" />
               </MenuItemIcon>

package/registry/examples/popover-demo.tsx

@@ -450,6 +450,7 @@ function FilterContent() {
           ))}
         </div>
         <Select
+          aria-label="Date range"
           className="[--bh-select-width:100%]"
           expandIcon={<ChevronDownIcon aria-hidden="true" />}
           hasLabel={false}

package/registry/examples/rolling-count-demo.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { RollingCount } from "@/components/ui/rolling-count"
+
+const total = 5
+
+export function RollingCountDemo() {
+  const [done, setDone] = React.useState(2)
+
+  return (
+    <div className="grid justify-items-start gap-[var(--bh-space-xl-12)]">
+      <p className="m-0 text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] text-[var(--bh-content-default)]">
+        <RollingCount
+          aria-label={`${done} of ${total} tasks done`}
+          value={`${done}/${total}`}
+        />
+      </p>
+
+      <div className="flex gap-[var(--bh-space-md-8)]">
+        <Button
+          disabled={done === 0}
+          onClick={() => setDone((value) => Math.max(0, value - 1))}
+          size="sm"
+          variant="soft"
+        >
+          Undo
+        </Button>
+        <Button
+          disabled={done === total}
+          onClick={() => setDone((value) => Math.min(total, value + 1))}
+          size="sm"
+        >
+          Complete a task
+        </Button>
+      </div>
+    </div>
+  )
+}

package/registry/examples/shimmer-text-demo.tsx

@@ -0,0 +1,20 @@
+import { ShimmerText } from "@/components/ui/shimmer-text"
+
+export function ShimmerTextDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-3xl-16)] text-[length:var(--bh-text-body-sm-regular-font-size)] leading-[var(--bh-text-body-sm-regular-line-height)] text-[var(--bh-content-default)]">
+      <p className="m-0">
+        Searching the workspace for{" "}
+        <ShimmerText tone="default">billing/invoices.ts</ShimmerText>
+      </p>
+
+      <p className="m-0">
+        <ShimmerText>Reading 12 files</ShimmerText>
+      </p>
+
+      <p className="m-0" dir="rtl">
+        جارٍ البحث في <ShimmerText tone="default">billing/invoices.ts</ShimmerText>
+      </p>
+    </div>
+  )
+}

package/registry/examples/streaming-text-demo.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { StreamingText, useTypewriter } from "@/components/ui/streaming-text"
+
+const response =
+  "The migration touches three files. I will add the sessions table first, wire the auth middleware next, and finish with the login flow so every step stays independently testable."
+
+function TypedResponse({ text }: { text: string }) {
+  const typed = useTypewriter(text)
+  return <StreamingText streaming={typed.typing} text={typed.text} />
+}
+
+export function StreamingTextDemo() {
+  const [run, setRun] = React.useState(0)
+
+  return (
+    <div className="grid max-w-[var(--bh-space-19xl-384)] gap-[var(--bh-space-3xl-16)]">
+      <TypedResponse key={run} text={response} />
+
+      <div>
+        <Button onClick={() => setRun((value) => value + 1)} size="sm" variant="soft">
+          Replay
+        </Button>
+      </div>
+    </div>
+  )
+}

package/registry/examples/task-list-demo.tsx

@@ -0,0 +1,74 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { TaskList, type TaskListItem } from "@/components/ui/task-list"
+
+const labels = [
+  "Scaffold the project structure",
+  "Build the component registry",
+  "Implement entitlement gating",
+  "Wire up Stripe checkout",
+  "Polish the landing page",
+]
+
+const startDelay = 700
+// How long each task stays active before completing.
+const stepDuration = 2250
+
+/**
+ * Walks the scripted tasks from pending to active to done. A real agent
+ * updates each item status as its work progresses.
+ */
+function useScriptedTasks(run: number): TaskListItem[] {
+  // -1 = not started, 0..n-1 = index of the active task, n = all done.
+  const [current, setCurrent] = React.useState(-1)
+
+  React.useEffect(() => {
+    setCurrent(-1)
+
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setCurrent(labels.length)
+      return
+    }
+
+    const timers = [window.setTimeout(() => setCurrent(0), startDelay)]
+    labels.forEach((_, index) => {
+      timers.push(
+        window.setTimeout(
+          () => setCurrent(index + 1),
+          startDelay + (index + 1) * stepDuration
+        )
+      )
+    })
+
+    return () => timers.forEach((timer) => window.clearTimeout(timer))
+  }, [run])
+
+  return labels.map((label, index) => ({
+    id: String(index),
+    label,
+    status:
+      current >= 0 && index < current
+        ? "done"
+        : index === current && current < labels.length
+          ? "active"
+          : "pending",
+  }))
+}
+
+export function TaskListDemo() {
+  const [run, setRun] = React.useState(0)
+  const items = useScriptedTasks(run)
+
+  return (
+    <div className="grid max-w-[var(--bh-space-18xl-320)] gap-[var(--bh-space-3xl-16)]">
+      <TaskList items={items} />
+
+      <div>
+        <Button onClick={() => setRun((value) => value + 1)} size="sm" variant="soft">
+          Replay
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,74 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { ThinkingReasoning } from "@/components/ui/thinking-reasoning"
+
+const reasoning = [
+  "Reading the request and the current selection, then locating the jwt.verify call inside the auth middleware.",
+  "The verify call sets no algorithms allowlist, so a token signed with none or a weak cipher could be accepted.",
+  "Tracing where the signing secret is loaded from and confirming it is never logged or sent back to the client.",
+  "Planning to pin the algorithm to HS256 and to validate the issuer and audience claims on every incoming request.",
+  "Scanning the existing tests around the middleware so the fix stays covered and nothing downstream regresses.",
+  "Drafting the patch with a focused regression test that rejects tampered, expired, and unsigned tokens.",
+]
+
+// Per-sentence arrival cadence in milliseconds; sums to roughly five seconds.
+const delays = [700, 900, 800, 850, 800, 900]
+const collapseBeat = 360
+
+/**
+ * Replays a scripted reasoning stream. A real integration appends each
+ * sentence as it arrives and flips the status to done when the model stops.
+ */
+function useScriptedReasoning(run: number) {
+  const [revealed, setRevealed] = React.useState(0)
+  const [status, setStatus] = React.useState<"thinking" | "done">("thinking")
+
+  React.useEffect(() => {
+    setRevealed(0)
+    setStatus("thinking")
+
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setRevealed(reasoning.length)
+      setStatus("done")
+      return
+    }
+
+    const timers: number[] = []
+    let elapsed = 0
+    delays.forEach((delay, index) => {
+      elapsed += delay
+      timers.push(window.setTimeout(() => setRevealed(index + 1), elapsed))
+    })
+    timers.push(
+      window.setTimeout(() => setStatus("done"), elapsed + collapseBeat)
+    )
+
+    return () => timers.forEach((timer) => window.clearTimeout(timer))
+  }, [run])
+
+  return { status, steps: reasoning.slice(0, revealed) }
+}
+
+export function ThinkingReasoningDemo() {
+  const [run, setRun] = React.useState(0)
+  const { status, steps } = useScriptedReasoning(run)
+
+  return (
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
+      <ThinkingReasoning
+        duration={5}
+        key={run}
+        reserveSpace
+        status={status}
+        steps={steps}
+      />
+
+      <div>
+        <Button onClick={() => setRun((value) => value + 1)} size="sm" variant="soft">
+          Replay
+        </Button>
+      </div>
+    </div>
+  )
+}

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

package/registry/hooks/use-listbox-navigation.ts

@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+
+/**
+ * Active-option state for a listbox that a text field drives through
+ * `aria-activedescendant`. Arrow moves wrap and skip disabled options; the
+ * active option stays put while it remains valid and otherwise falls back to
+ * the first enabled one, so filtering never strands it.
+ */
+export function useListboxNavigation<T>({
+  idPrefix,
+  isDisabled,
+  open,
+  options,
+}: {
+  idPrefix: string
+  isDisabled?: (option: T) => boolean
+  open: boolean
+  options: readonly T[]
+}) {
+  const [activeIndex, setActiveIndex] = React.useState(-1)
+  const isDisabledRef = React.useRef(isDisabled)
+  isDisabledRef.current = isDisabled
+
+  const enabledIndexes = () =>
+    options.flatMap((option, index) =>
+      isDisabledRef.current?.(option) ? [] : [index]
+    )
+
+  React.useEffect(() => {
+    if (!open) {
+      setActiveIndex(-1)
+      return
+    }
+    setActiveIndex((current) => {
+      const enabled = options.flatMap((option, index) =>
+        isDisabledRef.current?.(option) ? [] : [index]
+      )
+      return enabled.includes(current) ? current : enabled[0] ?? -1
+    })
+  }, [open, options])
+
+  /** Moves by one enabled option, wrapping at either end. */
+  const move = (offset: 1 | -1) => {
+    const enabled = enabledIndexes()
+    setActiveIndex((current) => {
+      if (enabled.length === 0) return -1
+      const position = enabled.indexOf(current)
+      if (position === -1) return offset > 0 ? enabled[0] : enabled[enabled.length - 1]
+      return enabled[(position + offset + enabled.length) % enabled.length]
+    })
+  }
+
+  /** Jumps to the first or last enabled option. */
+  const moveToEdge = (edge: "first" | "last") => {
+    const enabled = enabledIndexes()
+    setActiveIndex((edge === "first" ? enabled[0] : enabled[enabled.length - 1]) ?? -1)
+  }
+
+  const optionId = (index: number) => `${idPrefix}-option-${index}`
+  const current =
+    open && activeIndex >= 0 && activeIndex < options.length ? activeIndex : -1
+
+  return {
+    activeIndex: current,
+    activeOptionId: current >= 0 ? optionId(current) : undefined,
+    move,
+    moveToEdge,
+    optionId,
+    setActiveIndex,
+  }
+}

package/registry/hooks/use-motion-end.ts

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+
+/**
+ * Calls `done` once the CSS animations and transitions running on `element`
+ * have finished, so script timing follows the stylesheet and its motion
+ * tokens instead of copying their values. When nothing is running (styles
+ * missing, `animation: none`, or no Web Animations support) it calls `done`
+ * right away. Returns a function that cancels the pending call.
+ */
+export function waitForMotion(element: Element, done: () => void) {
+  let pending = true
+  const running =
+    typeof element.getAnimations === "function"
+      ? element
+          .getAnimations()
+          .filter(
+            (animation) => animation.effect?.getTiming().iterations !== Infinity
+          )
+      : []
+
+  if (running.length === 0) {
+    done()
+  } else {
+    void Promise.allSettled(running.map((animation) => animation.finished)).then(
+      () => {
+        if (pending) done()
+      }
+    )
+  }
+
+  return () => {
+    pending = false
+  }
+}
+
+/**
+ * Calls `onDone` after the motion that turning `active` on starts on the
+ * element in `ref`, for example an exit animation before unmounting.
+ */
+export function useMotionEnd(
+  ref: React.RefObject<Element | null>,
+  active: boolean,
+  onDone: () => void
+) {
+  const onDoneRef = React.useRef(onDone)
+  onDoneRef.current = onDone
+
+  React.useLayoutEffect(() => {
+    const element = ref.current
+    if (!active || !element) return
+    return waitForMotion(element, () => onDoneRef.current())
+  }, [active, ref])
+}

package/registry/hooks/use-reduced-motion.ts

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+
+const query = "(prefers-reduced-motion: reduce)"
+
+function canMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function"
+}
+
+function subscribe(onChange: () => void) {
+  if (!canMatchMedia()) return () => undefined
+  const media = window.matchMedia(query)
+  media.addEventListener?.("change", onChange)
+  return () => media.removeEventListener?.("change", onChange)
+}
+
+function getSnapshot() {
+  return canMatchMedia() && window.matchMedia(query).matches
+}
+
+/**
+ * Whether the user asked for reduced motion. Re-renders when that setting
+ * changes, and reads false where it cannot be queried (server, tests).
+ */
+export function useReducedMotion() {
+  return React.useSyncExternalStore(subscribe, getSnapshot, () => false)
+}