banhaten 0.3.0 → 0.5.0

package/registry/components/spinner.tsx

@@ -1,78 +1,78 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-type SpinnerMotion = "dynamic" | "steady"
-
-type SpinnerProps = React.ComponentProps<"svg">
-
-type DynamicSpinnerProps = SpinnerProps
-
-type SpinnerBaseProps = SpinnerProps & {
-  motion: SpinnerMotion
-}
-
-function Spinner(props: SpinnerProps) {
-  return <SpinnerBase {...props} motion="steady" />
-}
-
-function DynamicSpinner(props: DynamicSpinnerProps) {
-  return <SpinnerBase {...props} motion="dynamic" />
-}
-
-function SpinnerBase({ className, motion, ...props }: SpinnerBaseProps) {
-  return (
-    <svg
-      aria-hidden="true"
-      data-motion={motion}
-      data-slot="spinner"
-      viewBox="0 0 24 24"
-      className={cn(
-        "size-[var(--bh-spinner-size)] shrink-0 text-current",
-        className
-      )}
-      {...props}
-    >
-      <circle
-        data-slot="spinner-track"
-        cx="12"
-        cy="12"
-        r="10"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="var(--bh-spinner-stroke-width)"
-        opacity="var(--bh-opacity-25)"
-      />
-      <circle
-        data-slot="spinner-arc"
-        cx="12"
-        cy="12"
-        r="10"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="var(--bh-spinner-stroke-width)"
-        strokeLinecap="round"
-        pathLength="100"
-        strokeDasharray="30 70"
-        style={{
-          animationDuration:
-            motion === "dynamic"
-              ? "var(--bh-spinner-duration-dynamic)"
-              : "var(--bh-spinner-duration-steady)",
-          animationIterationCount: "infinite",
-          animationName:
-            motion === "dynamic"
-              ? "bh-spinner-dynamic"
-              : "bh-spinner-steady",
-          animationTimingFunction:
-            motion === "dynamic" ? "var(--bh-spinner-easing)" : "linear",
-          transformBox: "fill-box",
-          transformOrigin: "center",
-        }}
-      />
-    </svg>
-  )
-}
-
-export { DynamicSpinner, Spinner }
-export type { DynamicSpinnerProps, SpinnerProps }
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type SpinnerMotion = "dynamic" | "steady"
+
+type SpinnerProps = React.ComponentProps<"svg">
+
+type DynamicSpinnerProps = SpinnerProps
+
+type SpinnerBaseProps = SpinnerProps & {
+  motion: SpinnerMotion
+}
+
+function Spinner(props: SpinnerProps) {
+  return <SpinnerBase {...props} motion="steady" />
+}
+
+function DynamicSpinner(props: DynamicSpinnerProps) {
+  return <SpinnerBase {...props} motion="dynamic" />
+}
+
+function SpinnerBase({ className, motion, ...props }: SpinnerBaseProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      data-motion={motion}
+      data-slot="spinner"
+      viewBox="0 0 24 24"
+      className={cn(
+        "size-[var(--bh-spinner-size)] shrink-0 text-current",
+        className
+      )}
+      {...props}
+    >
+      <circle
+        data-slot="spinner-track"
+        cx="12"
+        cy="12"
+        r="10"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="var(--bh-spinner-stroke-width)"
+        opacity="var(--bh-opacity-25)"
+      />
+      <circle
+        data-slot="spinner-arc"
+        cx="12"
+        cy="12"
+        r="10"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="var(--bh-spinner-stroke-width)"
+        strokeLinecap="round"
+        pathLength="100"
+        strokeDasharray="30 70"
+        style={{
+          animationDuration:
+            motion === "dynamic"
+              ? "var(--bh-spinner-duration-dynamic)"
+              : "var(--bh-spinner-duration-steady)",
+          animationIterationCount: "infinite",
+          animationName:
+            motion === "dynamic"
+              ? "bh-spinner-dynamic"
+              : "bh-spinner-steady",
+          animationTimingFunction:
+            motion === "dynamic" ? "var(--bh-spinner-easing)" : "linear",
+          transformBox: "fill-box",
+          transformOrigin: "center",
+        }}
+      />
+    </svg>
+  )
+}
+
+export { DynamicSpinner, Spinner }
+export type { DynamicSpinnerProps, SpinnerProps }

package/registry/components/streaming-text.css

@@ -0,0 +1,45 @@
+[data-slot="streaming-text"] {
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-text-body-sm-regular-font-weight);
+  letter-spacing: var(--bh-text-body-sm-regular-letter-spacing);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+  overflow-wrap: anywhere;
+}
+
+/* A slim text caret, not a block cursor: caret width comes from the scale. */
+[data-slot="streaming-text-caret"] {
+  animation: bh-streaming-text-caret var(--bh-streaming-text-caret-duration)
+    step-end infinite;
+  background-color: currentColor;
+  block-size: 1em;
+  border-radius: var(--bh-radius-full);
+  display: inline-block;
+  inline-size: var(--bh-streaming-text-caret-width);
+  margin-inline-start: var(--bh-space-xxs-2);
+  vertical-align: text-bottom;
+}
+
+/* Solid while tokens arrive; the blink only starts once the text is complete. */
+[data-slot="streaming-text"][data-state="streaming"]
+  [data-slot="streaming-text-caret"] {
+  animation: none;
+}
+
+@keyframes bh-streaming-text-caret {
+  0%,
+  100% {
+    opacity: var(--bh-opacity-100);
+  }
+
+  50% {
+    opacity: var(--bh-opacity-0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="streaming-text-caret"] {
+    animation: none;
+  }
+}

package/registry/components/streaming-text.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { useReducedMotion } from "@/hooks/use-reduced-motion"
+
+import "./streaming-text.css"
+
+type StreamingTextElement = "p" | "div" | "span"
+
+type StreamingTextProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+  /** Render element. Defaults to a paragraph. */
+  as?: StreamingTextElement
+  /** Hides the caret entirely. */
+  caret?: boolean
+  /**
+   * True while more text is on its way: the caret stays solid and the element
+   * reports itself busy.
+   */
+  streaming?: boolean
+  /** The text that has arrived so far. */
+  text: string
+}
+
+type UseTypewriterOptions = {
+  /** Called once each time the reveal reaches the end of a text. */
+  onComplete?: () => void
+  /** Characters revealed per second. */
+  speed?: number
+}
+
+type TypewriterState = {
+  /** The part of the text revealed so far. */
+  text: string
+  /** True until the whole text is revealed. */
+  typing: boolean
+}
+
+const DEFAULT_SPEED = 220
+
+/**
+ * Reveals a finished text locally, a few characters per frame. Text that grows
+ * continues from what is already shown and different text starts over. Under
+ * reduced motion the whole text shows at once.
+ */
+function useTypewriter(
+  text: string,
+  { onComplete, speed = DEFAULT_SPEED }: UseTypewriterOptions = {}
+): TypewriterState {
+  const reducedMotion = useReducedMotion()
+  const [shown, setShown] = React.useState(() => (reducedMotion ? text : ""))
+  const shownRef = React.useRef(shown)
+  const onCompleteRef = React.useRef(onComplete)
+  // The text each completion was reported for, so a speed change after the
+  // reveal (or a reduced-motion rerender) does not report it twice.
+  const completedFor = React.useRef<string | null>(null)
+
+  React.useEffect(() => {
+    onCompleteRef.current = onComplete
+  })
+
+  const reveal = React.useCallback((value: string) => {
+    shownRef.current = value
+    setShown(value)
+  }, [])
+
+  const complete = React.useCallback((value: string) => {
+    if (completedFor.current === value) return
+    completedFor.current = value
+    onCompleteRef.current?.()
+  }, [])
+
+  React.useEffect(() => {
+    if (reducedMotion) {
+      reveal(text)
+      complete(text)
+      return
+    }
+
+    // Continue from the current prefix when more text is appended, restart
+    // when the text changes to something unrelated.
+    const start = text.startsWith(shownRef.current) ? shownRef.current.length : 0
+    // Nothing left to type, including an empty response: report it once so a
+    // host waiting on onComplete never hangs.
+    if (start >= text.length) {
+      reveal(text)
+      complete(text)
+      return
+    }
+
+    const charsPerMs = Math.max(1, speed) / 1000
+    let frame = 0
+    let origin: number | null = null
+
+    const tick = (now: number) => {
+      if (origin === null) origin = now
+      const count = Math.min(
+        text.length,
+        start + Math.floor((now - origin) * charsPerMs)
+      )
+      const next = text.slice(0, count)
+      if (next !== shownRef.current) reveal(next)
+      if (count < text.length) {
+        frame = window.requestAnimationFrame(tick)
+      } else {
+        complete(text)
+      }
+    }
+
+    frame = window.requestAnimationFrame(tick)
+    return () => window.cancelAnimationFrame(frame)
+  }, [complete, reducedMotion, reveal, speed, text])
+
+  // Always a prefix of the current text, even in the render before the reveal
+  // catches up with a new one.
+  const visible = text.startsWith(shown) ? shown : ""
+  return { text: visible, typing: visible.length < text.length }
+}
+
+/**
+ * Text that arrives token by token. While `streaming` the caret stays solid;
+ * once the text is complete it settles into a slow blink. Pair it with
+ * `useTypewriter` to reveal a finished text locally.
+ */
+const StreamingText = React.forwardRef<HTMLElement, StreamingTextProps>(
+  function StreamingText(
+    {
+      as: Comp = "p",
+      caret = true,
+      className,
+      streaming = false,
+      text,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Comp
+        aria-busy={streaming || undefined}
+        data-caret={caret ? "true" : "false"}
+        data-slot="streaming-text"
+        data-state={streaming ? "streaming" : "complete"}
+        // JSX checks a union tag against one member's ref type; every allowed
+        // element is an HTMLElement, which is what the public ref promises.
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={cn("m-0 min-w-0 max-w-full", className)}
+        {...props}
+      >
+        {text}
+        {caret ? (
+          <span aria-hidden="true" data-slot="streaming-text-caret" />
+        ) : null}
+      </Comp>
+    )
+  }
+)
+
+export { StreamingText, useTypewriter }
+export type {
+  StreamingTextElement,
+  StreamingTextProps,
+  TypewriterState,
+  UseTypewriterOptions,
+}

package/registry/components/table-elements.tsx

@@ -1,128 +1,128 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-type TableRootProps = React.ComponentPropsWithoutRef<"table">
-type TableSectionProps = React.ComponentPropsWithoutRef<"thead">
-type TableBodyProps = React.ComponentPropsWithoutRef<"tbody">
-type TableRowElementProps = React.ComponentPropsWithoutRef<"tr">
-type TableHeadProps = React.ComponentPropsWithoutRef<"th">
-type TableCellProps = React.ComponentPropsWithoutRef<"td">
-type DataTableSurfaceProps = React.ComponentPropsWithoutRef<"div">
-
-const DataTableSurface = React.forwardRef<
-  HTMLDivElement,
-  DataTableSurfaceProps
->(function DataTableSurface({ className, role = "table", ...props }, ref) {
-  return (
-    <div
-      data-slot="data-table-surface"
-      ref={ref}
-      role={role}
-      className={cn("min-w-0", className)}
-      {...props}
-    />
-  )
-})
-
-const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(
-  function TableRoot({ className, ...props }, ref) {
-    return (
-      <table
-        data-slot="table-root"
-        ref={ref}
-        className={cn("w-full border-collapse text-start", className)}
-        {...props}
-      />
-    )
-  }
-)
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  TableSectionProps
->(function TableHeader({ className, ...props }, ref) {
-  return (
-    <thead
-      data-slot="table-header"
-      ref={ref}
-      className={cn("text-start", className)}
-      {...props}
-    />
-  )
-})
-
-const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
-  function TableBody({ className, ...props }, ref) {
-    return (
-      <tbody
-        data-slot="table-body"
-        ref={ref}
-        className={className}
-        {...props}
-      />
-    )
-  }
-)
-
-const TableRowElement = React.forwardRef<
-  HTMLTableRowElement,
-  TableRowElementProps
->(function TableRowElement({ className, ...props }, ref) {
-  return (
-    <tr
-      data-slot="table-row"
-      ref={ref}
-      className={className}
-      {...props}
-    />
-  )
-})
-
-const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
-  function TableHead({ className, scope = "col", ...props }, ref) {
-    return (
-      <th
-        data-slot="table-head"
-        ref={ref}
-        className={cn("text-start", className)}
-        scope={scope}
-        {...props}
-      />
-    )
-  }
-)
-
-const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
-  function TableCell({ className, ...props }, ref) {
-    return (
-      <td
-        data-slot="table-cell"
-        ref={ref}
-        className={className}
-        {...props}
-      />
-    )
-  }
-)
-
-export {
-  DataTableSurface,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRoot,
-  TableRowElement,
-}
-export type {
-  DataTableSurfaceProps,
-  TableBodyProps,
-  TableCellProps,
-  TableHeadProps,
-  TableRootProps,
-  TableRowElementProps,
-  TableSectionProps,
-}
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type TableRootProps = React.ComponentPropsWithoutRef<"table">
+type TableSectionProps = React.ComponentPropsWithoutRef<"thead">
+type TableBodyProps = React.ComponentPropsWithoutRef<"tbody">
+type TableRowElementProps = React.ComponentPropsWithoutRef<"tr">
+type TableHeadProps = React.ComponentPropsWithoutRef<"th">
+type TableCellProps = React.ComponentPropsWithoutRef<"td">
+type DataTableSurfaceProps = React.ComponentPropsWithoutRef<"div">
+
+const DataTableSurface = React.forwardRef<
+  HTMLDivElement,
+  DataTableSurfaceProps
+>(function DataTableSurface({ className, role = "table", ...props }, ref) {
+  return (
+    <div
+      data-slot="data-table-surface"
+      ref={ref}
+      role={role}
+      className={cn("min-w-0", className)}
+      {...props}
+    />
+  )
+})
+
+const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(
+  function TableRoot({ className, ...props }, ref) {
+    return (
+      <table
+        data-slot="table-root"
+        ref={ref}
+        className={cn("w-full border-collapse text-start", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  TableSectionProps
+>(function TableHeader({ className, ...props }, ref) {
+  return (
+    <thead
+      data-slot="table-header"
+      ref={ref}
+      className={cn("text-start", className)}
+      {...props}
+    />
+  )
+})
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  function TableBody({ className, ...props }, ref) {
+    return (
+      <tbody
+        data-slot="table-body"
+        ref={ref}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableRowElement = React.forwardRef<
+  HTMLTableRowElement,
+  TableRowElementProps
+>(function TableRowElement({ className, ...props }, ref) {
+  return (
+    <tr
+      data-slot="table-row"
+      ref={ref}
+      className={className}
+      {...props}
+    />
+  )
+})
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  function TableHead({ className, scope = "col", ...props }, ref) {
+    return (
+      <th
+        data-slot="table-head"
+        ref={ref}
+        className={cn("text-start", className)}
+        scope={scope}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  function TableCell({ className, ...props }, ref) {
+    return (
+      <td
+        data-slot="table-cell"
+        ref={ref}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+
+export {
+  DataTableSurface,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRowElement,
+}
+export type {
+  DataTableSurfaceProps,
+  TableBodyProps,
+  TableCellProps,
+  TableHeadProps,
+  TableRootProps,
+  TableRowElementProps,
+  TableSectionProps,
+}