banhaten 0.3.0 → 0.5.0

package/registry/examples/spinner-demo.tsx

@@ -1,59 +1,59 @@
-import type * as React from "react"
-
-import { DynamicSpinner, Spinner } from "@/components/ui/spinner"
-
-export function SpinnerDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-5xl-24)]">
-        <Spinner
-          className="text-primary"
-          style={{ "--bh-spinner-size": "var(--bh-space-3xl-16)" } as React.CSSProperties}
-        />
-        <Spinner
-          className="text-success"
-          style={{ "--bh-spinner-size": "var(--bh-space-4xl-20)" } as React.CSSProperties}
-        />
-        <Spinner
-          className="text-danger"
-          style={{ "--bh-spinner-size": "var(--bh-space-5xl-24)" } as React.CSSProperties}
-        />
-        <DynamicSpinner
-          className="text-primary"
-          style={{ "--bh-spinner-size": "var(--bh-space-3xl-16)" } as React.CSSProperties}
-        />
-        <DynamicSpinner
-          className="text-success"
-          style={{ "--bh-spinner-size": "var(--bh-space-4xl-20)" } as React.CSSProperties}
-        />
-        <DynamicSpinner
-          className="text-danger"
-          style={{ "--bh-spinner-size": "var(--bh-space-5xl-24)" } as React.CSSProperties}
-        />
-      </div>
-
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
-        <div
-          className="inline-flex items-center gap-[var(--bh-space-md-8)] text-sm text-muted-foreground"
-          role="status"
-        >
-          <Spinner
-            className="text-current"
-            style={{ "--bh-spinner-size": "calc(var(--bh-space-2xl-14) + var(--bh-space-xs-4))" } as React.CSSProperties}
-          />
-          Loading
-        </div>
-        <div
-          className="inline-flex items-center gap-[var(--bh-space-md-8)] text-sm text-muted-foreground"
-          role="status"
-        >
-          <DynamicSpinner
-            className="text-current"
-            style={{ "--bh-spinner-size": "calc(var(--bh-space-2xl-14) + var(--bh-space-xs-4))" } as React.CSSProperties}
-          />
-          Syncing
-        </div>
-      </div>
-    </div>
-  )
-}
+import type * as React from "react"
+
+import { DynamicSpinner, Spinner } from "@/components/ui/spinner"
+
+export function SpinnerDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-5xl-24)]">
+        <Spinner
+          className="text-primary"
+          style={{ "--bh-spinner-size": "var(--bh-space-3xl-16)" } as React.CSSProperties}
+        />
+        <Spinner
+          className="text-success"
+          style={{ "--bh-spinner-size": "var(--bh-space-4xl-20)" } as React.CSSProperties}
+        />
+        <Spinner
+          className="text-danger"
+          style={{ "--bh-spinner-size": "var(--bh-space-5xl-24)" } as React.CSSProperties}
+        />
+        <DynamicSpinner
+          className="text-primary"
+          style={{ "--bh-spinner-size": "var(--bh-space-3xl-16)" } as React.CSSProperties}
+        />
+        <DynamicSpinner
+          className="text-success"
+          style={{ "--bh-spinner-size": "var(--bh-space-4xl-20)" } as React.CSSProperties}
+        />
+        <DynamicSpinner
+          className="text-danger"
+          style={{ "--bh-spinner-size": "var(--bh-space-5xl-24)" } as React.CSSProperties}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">
+        <div
+          className="inline-flex items-center gap-[var(--bh-space-md-8)] text-sm text-muted-foreground"
+          role="status"
+        >
+          <Spinner
+            className="text-current"
+            style={{ "--bh-spinner-size": "calc(var(--bh-space-2xl-14) + var(--bh-space-xs-4))" } as React.CSSProperties}
+          />
+          Loading
+        </div>
+        <div
+          className="inline-flex items-center gap-[var(--bh-space-md-8)] text-sm text-muted-foreground"
+          role="status"
+        >
+          <DynamicSpinner
+            className="text-current"
+            style={{ "--bh-spinner-size": "calc(var(--bh-space-2xl-14) + var(--bh-space-xs-4))" } as React.CSSProperties}
+          />
+          Syncing
+        </div>
+      </div>
+    </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/tabs-demo.tsx

@@ -1,13 +1,13 @@
-import { Tabs } from "@/components/ui/tabs"
-
-const tabItems = ["Overview", "Details", "Settings", "Activity", "Files"]
-
-export function TabsDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <Tabs ariaLabel="Tabs" items={tabItems} />
-      <Tabs ariaLabel="Tabs" items={tabItems} variant="segment" />
-      <Tabs ariaLabel="Tabs" items={tabItems} variant="rounded" />
-    </div>
-  )
-}
+import { Tabs } from "@/components/ui/tabs"
+
+const tabItems = ["Overview", "Details", "Settings", "Activity", "Files"]
+
+export function TabsDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <Tabs ariaLabel="Tabs" items={tabItems} />
+      <Tabs ariaLabel="Tabs" items={tabItems} variant="segment" />
+      <Tabs ariaLabel="Tabs" items={tabItems} variant="rounded" />
+    </div>
+  )
+}

package/registry/examples/tag-demo.tsx

@@ -1,29 +1,29 @@
-import { PlusIcon } from "lucide-react"
-
-import { Tag } from "@/components/ui/tag"
-
-export function TagDemo() {
-  return (
-    <div className="flex flex-wrap items-center gap-[var(--bh-space-md-8)]">
-      <Tag>Label</Tag>
-      <Tag state="active">Active</Tag>
-      <Tag state="disabled">Disabled</Tag>
-      <Tag closeLabel="Remove tag" showCloseButton>Label</Tag>
-      <Tag closeLabel="Remove tag" type="dot" showCloseButton>
-        Live
-      </Tag>
-      <Tag closeLabel="Remove tag" type="flag" showCloseButton>
-        Egypt
-      </Tag>
-      <Tag closeLabel="Remove tag" type="avatar" avatar="AG" showCloseButton>
-        Ahmed
-      </Tag>
-      <Tag closeLabel="Remove tag" type="icon" icon={<PlusIcon aria-hidden="true" />} showCloseButton>
-        Add
-      </Tag>
-      <Tag closeLabel={"\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"} dir="rtl" showCloseButton>
-        ملصق
-      </Tag>
-    </div>
-  )
-}
+import { PlusIcon } from "lucide-react"
+
+import { Tag } from "@/components/ui/tag"
+
+export function TagDemo() {
+  return (
+    <div className="flex flex-wrap items-center gap-[var(--bh-space-md-8)]">
+      <Tag>Label</Tag>
+      <Tag state="active">Active</Tag>
+      <Tag state="disabled">Disabled</Tag>
+      <Tag closeLabel="Remove tag" showCloseButton>Label</Tag>
+      <Tag closeLabel="Remove tag" type="dot" showCloseButton>
+        Live
+      </Tag>
+      <Tag closeLabel="Remove tag" type="flag" showCloseButton>
+        Egypt
+      </Tag>
+      <Tag closeLabel="Remove tag" type="avatar" avatar="AG" showCloseButton>
+        Ahmed
+      </Tag>
+      <Tag closeLabel="Remove tag" type="icon" icon={<PlusIcon aria-hidden="true" />} showCloseButton>
+        Add
+      </Tag>
+      <Tag closeLabel={"\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"} dir="rtl" showCloseButton>
+        ملصق
+      </Tag>
+    </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/textarea-demo.tsx

@@ -1,79 +1,79 @@
-import { Textarea } from "@/components/ui/textarea"
-
-const demoTags = [{ label: "Label", removeLabel: "Remove tag" }]
-const demoRtlTags = [
-  {
-    label: "\u0645\u0644\u0635\u0642",
-    removeLabel: "\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645",
-  },
-]
-
-const demoTextareaProps = {
-  bodyText: "Our advanced inference infrastructure provides extremely short response.",
-  errorMessage: "Error message",
-  label: "Label",
-  message: "This is a hint text",
-  optionalText: "(Optional)",
-  placeholder: "Type text here",
-  tagInputText: "Brando...",
-}
-
-const demoRtlTextareaProps = {
-  ...demoTextareaProps,
-  bodyText:
-    "\u062a\u0648\u0641\u0631 \u0628\u0646\u064a\u062a\u0646\u0627 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 \u0644\u0644\u0625\u0633\u062a\u062f\u0644\u0627\u0644 \u0623\u0648\u0642\u0627\u062a \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0642\u0635\u064a\u0631\u0629 \u0644\u0644\u063a\u0627\u064a\u0629.",
-  errorMessage: "\u0631\u0633\u0627\u0644\u0629 \u062e\u0637\u0623",
-  label: "\u0645\u0644\u0635\u0642",
-  message: "\u0646\u0635 \u062a\u0648\u0636\u064a\u062d\u064a",
-  optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
-  tagInputText: "\u0628\u0631\u0627\u0646\u062f\u0648...",
-}
-
-export function TextareaDemo() {
-  return (
-    <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-[var(--bh-space-5xl-24)]">
-        <Textarea {...demoTextareaProps} type="tags" state="placeholder" />
-        <Textarea
-          {...demoTextareaProps}
-          type="tags"
-          state="filled"
-          tags={demoTags}
-        />
-        <Textarea
-          {...demoTextareaProps}
-          type="tags"
-          hasError
-          state="filled"
-          tags={demoTags}
-        />
-        <Textarea
-          {...demoTextareaProps}
-          type="tags"
-          state="disabled"
-          tags={demoTags}
-        />
-      </div>
-
-      <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" />
-        <Textarea
-          {...demoRtlTextareaProps}
-          dir="rtl"
-          type="tags"
-          state="filled"
-          tags={demoRtlTags}
-        />
-      </div>
-    </div>
-  )
-}
+import { Textarea } from "@/components/ui/textarea"
+
+const demoTags = [{ label: "Label", removeLabel: "Remove tag" }]
+const demoRtlTags = [
+  {
+    label: "\u0645\u0644\u0635\u0642",
+    removeLabel: "\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645",
+  },
+]
+
+const demoTextareaProps = {
+  bodyText: "Our advanced inference infrastructure provides extremely short response.",
+  errorMessage: "Error message",
+  label: "Label",
+  message: "This is a hint text",
+  optionalText: "(Optional)",
+  placeholder: "Type text here",
+  tagInputText: "Brando...",
+}
+
+const demoRtlTextareaProps = {
+  ...demoTextareaProps,
+  bodyText:
+    "\u062a\u0648\u0641\u0631 \u0628\u0646\u064a\u062a\u0646\u0627 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 \u0644\u0644\u0625\u0633\u062a\u062f\u0644\u0627\u0644 \u0623\u0648\u0642\u0627\u062a \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0642\u0635\u064a\u0631\u0629 \u0644\u0644\u063a\u0627\u064a\u0629.",
+  errorMessage: "\u0631\u0633\u0627\u0644\u0629 \u062e\u0637\u0623",
+  label: "\u0645\u0644\u0635\u0642",
+  message: "\u0646\u0635 \u062a\u0648\u0636\u064a\u062d\u064a",
+  optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
+  tagInputText: "\u0628\u0631\u0627\u0646\u062f\u0648...",
+}
+
+export function TextareaDemo() {
+  return (
+    <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-[var(--bh-space-5xl-24)]">
+        <Textarea {...demoTextareaProps} type="tags" state="placeholder" />
+        <Textarea
+          {...demoTextareaProps}
+          type="tags"
+          state="filled"
+          tags={demoTags}
+        />
+        <Textarea
+          {...demoTextareaProps}
+          type="tags"
+          hasError
+          state="filled"
+          tags={demoTags}
+        />
+        <Textarea
+          {...demoTextareaProps}
+          type="tags"
+          state="disabled"
+          tags={demoTags}
+        />
+      </div>
+
+      <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" />
+        <Textarea
+          {...demoRtlTextareaProps}
+          dir="rtl"
+          type="tags"
+          state="filled"
+          tags={demoRtlTags}
+        />
+      </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/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>
+  )
+}