@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/ui/kbd.tsx

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from "react"
+import { cn } from "../lib/utils"
+
+/**
+ * Kbd — the keycap chip. Promoted from the old reference gallery's global
+ * `.kbd`, which was reference-only: an app that wanted a keycap had no
+ * canonical part to reach for and would have tripped the family census.
+ *
+ * The keycap look: hairline box, a heavier bottom border so it reads as a
+ * physical key, the ink-wash fill, mono at the micro size. Token utilities
+ * only — no app-local class family. Renders a real `<kbd>`, so the phase-id /
+ * shortcut chips it dresses keep their semantic.
+ */
+export type KbdProps = HTMLAttributes<HTMLElement>
+
+function Kbd({ className, children, ...props }: KbdProps) {
+  return (
+    <kbd
+      className={cn(
+        "inline-flex h-[1.15rem] min-w-[1.15rem] items-center justify-center rounded-none border border-hair border-b-2 bg-ink/5 px-[0.3rem] align-middle font-mono text-[0.62rem] leading-none text-ink-soft",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </kbd>
+  )
+}
+
+export { Kbd }

package/src/ui/label.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export type LabelDress = "default" | "chat";
+
+function Label({
+  className,
+  dress = "default",
+  ...props
+}: React.ComponentProps<"label"> & { dress?: LabelDress }) {
+  // dress="chat" emits the digichat chat-dress class (styles/controls-core.css)
+  // instead of the kit utilities, keeping digichat's rendered look exact.
+  const classes =
+    dress === "chat"
+      ? cn("ctl-label-chat", className)
+      : cn(
+          "flex items-center gap-2 text-xs leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+          className
+        );
+
+  return (
+    <label
+      data-slot="label"
+      className={classes}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/src/ui/pager.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+/**
+ * Pager — the prev/next wayfinding control with a fixed middle slot
+ * (`PagerPage` cells, a page count, a date), promoted from the controls layer
+ * into the kit (#4306, batch K3). Disabled edges around a middle column that
+ * stays put while its label width changes. Two dresses: "reference" (default,
+ * per-cell hairline) and "capsule" (dashboard's shipped one-capsule look —
+ * borderless chevrons pinned at the ends). The `.nb-pager*` / `.nb-page*`
+ * dress is translated into token utilities here, so the controls CSS can
+ * retire. This is distinct from {@link Pagination}, the numbered page trail.
+ */
+
+import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from "react"
+
+import { cn } from "../lib/utils"
+
+const BASE_ITEM =
+  "min-w-[2rem] h-[2rem] px-[0.6rem] border border-hair bg-surface font-mono text-[0.72rem] text-ink-soft transition-colors"
+
+const BASE_EDGE = cn(
+  BASE_ITEM,
+  "cursor-pointer enabled:hover:text-ink enabled:hover:border-[color-mix(in_srgb,var(--accent)_45%,var(--hair))] disabled:cursor-not-allowed disabled:opacity-40",
+)
+
+const CAPSULE_EDGE =
+  "min-w-0 cursor-pointer border-0 bg-transparent p-0 text-ink-mute transition-colors duration-150 enabled:hover:text-ink disabled:cursor-not-allowed disabled:opacity-30"
+
+export type PagerProps = HTMLAttributes<HTMLDivElement> & {
+  onPrev?: () => void
+  onNext?: () => void
+  prevDisabled?: boolean
+  nextDisabled?: boolean
+  prevLabel?: ReactNode
+  nextLabel?: ReactNode
+  /** Set these when the edge labels are bare glyphs (chevrons). */
+  prevAriaLabel?: string
+  nextAriaLabel?: string
+  /** Middle slot — PagerPage cells, or any label (a date, "3 / 12", …). */
+  children?: ReactNode
+  /** Visual dress — "reference" (default) or dashboard's "capsule". */
+  dress?: "reference" | "capsule"
+}
+
+export function Pager({
+  onPrev,
+  onNext,
+  prevDisabled,
+  nextDisabled,
+  prevLabel = "‹ prev",
+  nextLabel = "next ›",
+  prevAriaLabel,
+  nextAriaLabel,
+  children,
+  className,
+  dress = "reference",
+  ...props
+}: PagerProps) {
+  const edge = dress === "capsule" ? CAPSULE_EDGE : BASE_EDGE
+  return (
+    <div
+      data-slot="pager"
+      data-dress={dress}
+      className={cn(
+        "inline-grid grid-cols-[auto_minmax(0,max-content)_auto] items-center gap-[0.3rem]",
+        dress === "capsule" &&
+          "grid-cols-[auto_1fr_auto] gap-[0.5rem] border border-hair bg-term-bg px-[0.625rem] py-[0.375rem] font-mono text-[12.5px] tabular-nums",
+        className,
+      )}
+      {...props}
+    >
+      <button
+        type="button"
+        className={edge}
+        disabled={prevDisabled}
+        aria-label={prevAriaLabel}
+        onClick={onPrev}
+      >
+        {prevLabel}
+      </button>
+      {/* Fixed middle column so capsule arrows stay pinned at the ends while
+          the label width varies (date strings, page counts, …). */}
+      <div className="flex min-w-0 items-center justify-center">{children}</div>
+      <button
+        type="button"
+        className={edge}
+        disabled={nextDisabled}
+        aria-label={nextAriaLabel}
+        onClick={onNext}
+      >
+        {nextLabel}
+      </button>
+    </div>
+  )
+}
+
+export type PagerPageProps = ComponentPropsWithoutRef<"button"> & {
+  /** The current page — wears the accent fill and aria-current="page". */
+  current?: boolean
+}
+
+export function PagerPage({ current, className, ...props }: PagerPageProps) {
+  return (
+    <button
+      type="button"
+      data-slot="pager-page"
+      aria-current={current ? "page" : undefined}
+      className={cn(
+        BASE_ITEM,
+        "cursor-pointer",
+        current
+          ? "text-on-accent bg-accent border-accent"
+          : "hover:text-ink hover:border-[color-mix(in_srgb,var(--accent)_45%,var(--hair))]",
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/ui/pagination.tsx

@@ -0,0 +1,126 @@
+/**
+ * Pagination — the numbered page trail (`nav[aria-label]`), promoted from the
+ * controls layer into the kit (#4306, batch K2). Controlled: `page` (1-based)
+ * + `pageCount`, with either `hrefForPage` (links) or `onPageChange` (buttons).
+ * The window shows first / last with an ellipsis around the current page;
+ * prev/next disable at the edges. The current page is the one loud control
+ * (ink fill); siblings are hairline ghosts.
+ *
+ * The `.ctl-pagination*` dress is translated into token utilities here, so the
+ * controls CSS can retire. Direction glyphs mirror under RTL via `rtl:`.
+ */
+
+import { cn } from "../lib/utils"
+
+export type PaginationProps = {
+  page: number
+  pageCount: number
+  onPageChange?: (page: number) => void
+  hrefForPage?: (page: number) => string
+  ariaLabel?: string
+  className?: string
+}
+
+/** 1-based page window: first, last, and ±1 around current, ellipsis-filled. */
+export function paginationWindow(page: number, pageCount: number): (number | "…")[] {
+  const pages = new Set<number>([1, pageCount, page - 1, page, page + 1])
+  const sorted = [...pages].filter((p) => p >= 1 && p <= pageCount).sort((a, b) => a - b)
+  const out: (number | "…")[] = []
+  for (const p of sorted) {
+    if (out.length > 0 && p - (out[out.length - 1] as number) > 1) out.push("…")
+    out.push(p)
+  }
+  return out
+}
+
+const ITEM =
+  "inline-flex h-[2rem] min-w-[2rem] items-center justify-center border border-hair bg-transparent px-[0.5rem] text-ink-soft no-underline transition-colors [font:inherit] hover:border-hair-2 hover:text-ink focus-visible:border-hair-2 focus-visible:ring-[3px] focus-visible:ring-accent/30 focus-visible:outline-none"
+
+export function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  hrefForPage,
+  ariaLabel = "Pagination",
+  className,
+}: PaginationProps) {
+  if (pageCount < 1) return null
+  const current = Math.max(1, Math.min(pageCount, Math.floor(page)))
+  const go = (p: number) => onPageChange?.(Math.max(1, Math.min(pageCount, p)))
+
+  const item = (p: number) => {
+    const isCurrent = p === current
+    const cls = cn(ITEM, isCurrent && "cursor-default border-ink bg-ink font-semibold text-bg")
+    const inner = String(p)
+    if (isCurrent) {
+      return (
+        <span key={p} aria-current="page" className={cls}>
+          {inner}
+        </span>
+      )
+    }
+    if (hrefForPage) {
+      return (
+        <a key={p} href={hrefForPage(p)} className={cn(ITEM, "cursor-pointer")}>
+          {inner}
+        </a>
+      )
+    }
+    return (
+      <button key={p} type="button" className={cn(ITEM, "cursor-pointer")} onClick={() => go(p)}>
+        {inner}
+      </button>
+    )
+  }
+
+  const step = (dir: -1 | 1) => {
+    const target = current + dir
+    const disabled = dir === -1 ? current <= 1 : current >= pageCount
+    const label = dir === -1 ? "Previous page" : "Next page"
+    const glyph = dir === -1 ? "←" : "→"
+    const cls = cn(ITEM, "cursor-pointer disabled:cursor-not-allowed disabled:opacity-40")
+    if (hrefForPage && !disabled) {
+      return (
+        <a key={dir} href={hrefForPage(target)} aria-label={label} className={cls}>
+          <span aria-hidden="true" className="inline-block rtl:scale-x-[-1]">
+            {glyph}
+          </span>
+        </a>
+      )
+    }
+    return (
+      <button
+        key={dir}
+        type="button"
+        aria-label={label}
+        className={cls}
+        disabled={disabled}
+        onClick={() => go(target)}
+      >
+        <span aria-hidden="true" className="inline-block rtl:scale-x-[-1]">
+          {glyph}
+        </span>
+      </button>
+    )
+  }
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      data-slot="pagination"
+      className={cn("flex items-center gap-[0.4rem] font-mono text-[0.8rem]", className)}
+    >
+      {step(-1)}
+      {paginationWindow(current, pageCount).map((p, i) =>
+        p === "…" ? (
+          <span key={`gap-${i}`} aria-hidden="true" className="px-[0.1rem] text-ink-mute">
+            …
+          </span>
+        ) : (
+          item(p)
+        ),
+      )}
+      {step(1)}
+    </nav>
+  )
+}

package/src/ui/radio-group.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+/**
+ * RadioGroup / Radio — the shared selection control (#1548), promoted from the
+ * controls layer into the kit (#4306, batch K1). Behavior comes from
+ * `@base-ui/react`'s Radio / RadioGroup primitives (roving focus, keyboard
+ * toggle, `data-checked` / `data-disabled` state); this file skins them to the
+ * form-fields grammar — a 16px circle, hairline, accent dot, accent focus ring
+ * — re-expressed in kit token utilities so `.ctl-radio*` can retire.
+ *
+ * Pair with a plain `<label>` (wrapping or `htmlFor`) — the control owns no
+ * label of its own, same as the native inputs it replaces. `Checkbox` and
+ * `Switch` remain on the controls layer for now; the kit already owns both, so
+ * they have no live main-barrel consumer to repoint.
+ */
+
+import { Radio as RadioPrimitive } from "@base-ui/react/radio"
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+
+import { cn } from "../lib/utils"
+
+export type RadioGroupProps = RadioGroupPrimitive.Props
+export type RadioProps = RadioPrimitive.Root.Props
+
+export function RadioGroup({ className, ...props }: RadioGroupProps) {
+  return (
+    <RadioGroupPrimitive
+      data-slot="radio-group"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+export function Radio({ className, ...props }: RadioProps) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio"
+      className={cn(
+        "relative inline-flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-full border border-hair bg-surface p-0 transition-colors outline-none after:absolute after:-inset-3 focus-visible:ring-[3px] focus-visible:ring-ring/30 data-checked:border-accent data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot="radio-indicator"
+        className="absolute inset-[3px] rounded-full bg-accent"
+      />
+    </RadioPrimitive.Root>
+  )
+}

package/src/ui/search-bar.tsx

@@ -0,0 +1,85 @@
+"use client"
+/**
+ * SearchBar — a search field with a leading glyph, a clear affordance that
+ * appears once there's input, and an optional trailing `hint` slot shown
+ * while empty (the reference wears a `/` keycap), promoted from the controls
+ * layer into the kit (#4306, batch K2). Controlled — the results pane stays
+ * with the caller; the bar only owns the query.
+ *
+ * The `.ctl-search` / `.sb-*` dress is translated into token utilities here;
+ * focus-within lights the accent ring, and the native WebKit search-cancel
+ * affordance is suppressed in favour of the clear button.
+ */
+import type { InputHTMLAttributes, ReactNode } from "react"
+
+import { cn } from "../lib/utils"
+
+export type SearchBarProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "type" | "className"
+> & {
+  value: string
+  onChange: (query: string) => void
+  /** Clears the query — defaults to onChange(""). */
+  onClear?: () => void
+  clearAriaLabel?: string
+  /** Trailing slot shown while the query is empty (keycap hint etc.). */
+  hint?: ReactNode
+  /** Replaces the leading magnifier glyph. */
+  glyph?: ReactNode
+  /** Lands on the field wrapper, not the input. */
+  className?: string
+}
+
+const MAGNIFIER = (
+  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <circle cx="11" cy="11" r="7" />
+    <path d="M20 20l-3.5-3.5" strokeLinecap="round" />
+  </svg>
+)
+
+export function SearchBar({
+  value,
+  onChange,
+  onClear,
+  clearAriaLabel = "Clear search",
+  hint,
+  glyph,
+  className,
+  "aria-label": ariaLabel = "Search",
+  ...inputProps
+}: SearchBarProps) {
+  return (
+    <div
+      data-slot="search-bar"
+      className={cn(
+        "flex w-[min(100%,26rem)] items-center gap-[0.55rem] border border-hair bg-surface px-[0.7rem] py-[0.55rem] transition-[border-color,box-shadow] duration-200 focus-within:border-[color-mix(in_srgb,var(--accent)_55%,var(--hair))] focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent)_22%,transparent)]",
+        className,
+      )}
+    >
+      <span className="inline-flex text-ink-mute" aria-hidden="true">
+        {glyph ?? MAGNIFIER}
+      </span>
+      <input
+        className="flex-1 border-none bg-transparent font-mono text-[0.82rem] text-ink outline-none placeholder:text-ink-mute [&::-webkit-search-cancel-button]:hidden"
+        type="search"
+        value={value}
+        aria-label={ariaLabel}
+        onChange={(e) => onChange(e.target.value)}
+        {...inputProps}
+      />
+      {value ? (
+        <button
+          type="button"
+          className="cursor-pointer border-none bg-transparent px-[0.2rem] py-[0.1rem] text-[0.7rem] text-ink-mute transition-colors hover:text-ink"
+          aria-label={clearAriaLabel}
+          onClick={onClear ?? (() => onChange(""))}
+        >
+          ✕
+        </button>
+      ) : (
+        (hint ?? null)
+      )}
+    </div>
+  )
+}

package/src/ui/segmented-control.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+/**
+ * SegmentedControl — the range switch (#1548), promoted from the controls
+ * layer into the kit (#4306, batch K1). Plain buttons wearing `aria-pressed`
+ * inside a `role="group"` — deliberately NOT a tablist (the segments switch a
+ * data range on the same view, they don't own tab panels). Two dresses:
+ * "reference" (default, mono cells on surface / accent-weak selection) and
+ * "accent" (dashboard's shipped look — sans font-medium cells, transparent
+ * track, accent/20 wash + accent text on the selection). Token utilities only,
+ * so `.nb-seg*` can retire.
+ */
+
+import type { HTMLAttributes, ReactNode } from "react"
+
+import { cn } from "../lib/utils"
+
+export type SegmentedOption<T extends string = string> = {
+  value: T
+  /** Defaults to the value itself. */
+  label?: ReactNode
+  disabled?: boolean
+}
+
+export type SegmentedControlProps<T extends string = string> = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> & {
+  options: ReadonlyArray<T | SegmentedOption<T>>
+  value: T
+  onChange?: (value: T) => void
+  /** Visual dress — "reference" (default) or dashboard's "accent". */
+  dress?: "reference" | "accent"
+}
+
+export function SegmentedControl<T extends string = string>({
+  options,
+  value,
+  onChange,
+  className,
+  dress = "reference",
+  ...props
+}: SegmentedControlProps<T>) {
+  const accent = dress === "accent"
+  return (
+    <div
+      data-slot="segmented"
+      role="group"
+      className={cn(
+        "inline-flex overflow-hidden rounded-none border border-hair",
+        className,
+      )}
+      {...props}
+    >
+      {options.map((option) => {
+        const opt = typeof option === "string" ? { value: option } : option
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            className={cn(
+              "inline-flex cursor-pointer items-center justify-center rounded-none bg-surface px-[0.85rem] py-[0.4rem] font-mono text-[0.72rem] text-ink-mute transition-colors [border-inline-start:1px_solid_var(--hair)] first:[border-inline-start:0] hover:text-ink-soft aria-pressed:bg-accent-weak aria-pressed:text-ink disabled:cursor-not-allowed",
+              accent &&
+                "bg-transparent px-3 py-[0.375rem] font-sans text-xs font-medium text-ink-mute hover:bg-ink/4 hover:text-ink aria-pressed:bg-accent/20 aria-pressed:text-accent",
+            )}
+            aria-pressed={opt.value === value}
+            disabled={opt.disabled}
+            onClick={() => onChange?.(opt.value)}
+          >
+            {opt.label ?? opt.value}
+          </button>
+        )
+      })}
+    </div>
+  )
+}