@twoux/ui 0.0.0-stage → 0.1.0

package/src/components/split-button.tsx

@@ -0,0 +1,58 @@
+/**
+ * TwoUX composition: SplitButton, built on the generated shadcn ButtonGroup, Button and DropdownMenu.
+ * The main part runs the most common action with its label ("Import data"); the chevron part opens the related
+ * variants ("Import all", "Import selection") and has its own name ("More import options").
+ */
+import { ChevronDown } from "lucide-react"
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+import { ButtonGroup, ButtonGroupSeparator } from "./button-group"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "./dropdown-menu"
+
+export function SplitButton({
+  children,
+  onClick,
+  menuLabel,
+  menu,
+  variant = "outline",
+  size = "sm",
+  disabled,
+  loading,
+  shortcut,
+  align = "end",
+  className,
+}: {
+  /** The main action's label, with an optional leading icon. */
+  children: React.ReactNode
+  onClick: () => void
+  /** Names the chevron part, e.g. "More import options". */
+  menuLabel: string
+  /** DropdownMenuItem children: the variants of the main action. Repeat the main action first so the menu is complete. */
+  menu: React.ReactNode
+  variant?: "default" | "outline" | "secondary"
+  size?: "xs" | "sm" | "default"
+  disabled?: boolean
+  loading?: boolean
+  shortcut?: string
+  align?: "start" | "end"
+  className?: string
+}) {
+  const icon = size === "xs" ? "icon-xs" : size === "sm" ? "icon-sm" : "icon"
+  return (
+    <ButtonGroup data-slot="split-button" data-variant={variant} className={className}>
+      <Button variant={variant} size={size} onClick={onClick} disabled={disabled} loading={loading} shortcut={shortcut}>
+        {children}
+      </Button>
+      {variant !== "outline" && <ButtonGroupSeparator />}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant={variant} size={icon} aria-label={menuLabel} disabled={disabled} className={cn(size === "xs" ? "w-5" : "w-6")}>
+            <ChevronDown />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align={align} className="min-w-48">{menu}</DropdownMenuContent>
+      </DropdownMenu>
+    </ButtonGroup>
+  )
+}

package/src/components/stepper.tsx

@@ -0,0 +1,78 @@
+/**
+ * TwoUX composition: a vertical list of numbered steps joined by a line (shadcn has no stepper).
+ * Done steps show a check, the current step is indigo and marked aria-current="step",
+ * later steps are faded. With onStepSelect, done steps become buttons to go back to.
+ */
+import { Check } from "lucide-react"
+import { cn } from "../lib/cn"
+import { Swap } from "./motion"
+
+type StepItem = { title: string; description?: string }
+
+export function Stepper({
+  steps,
+  current,
+  onStepSelect,
+  className,
+  "aria-label": label = "Progress",
+}: {
+  steps: StepItem[]
+  /** Index of the current step. Steps before it are done. */
+  current: number
+  /** Lets people go back to a done step. Steps ahead stay locked. */
+  onStepSelect?: (index: number) => void
+  className?: string
+  "aria-label"?: string
+}) {
+  return (
+    <ol aria-label={label} data-slot="stepper" className={cn("grid", className)}>
+      {steps.map((step, i) => {
+        const state = i < current ? "done" : i === current ? "current" : "upcoming"
+        const last = i === steps.length - 1
+        const marker = (
+          <span
+            data-slot="stepper-marker"
+            className={cn(
+              "relative z-10 grid size-5 shrink-0 place-items-center rounded-full border text-sm font-semibold tabular transition-[color,background-color,border-color] duration-(--duration-slow) ease-(--ease-standard)",
+              state === "done" && "border-primary bg-primary text-primary-foreground",
+              state === "current" && "border-primary bg-primary-soft text-primary-ink",
+              state === "upcoming" && "border-line-strong bg-surface text-ink-3"
+            )}
+          >
+            <Swap kind="icon" swapKey={state === "done" ? "done" : "number"}>{state === "done" ? <Check className="size-3" strokeWidth={3} aria-hidden="true" /> : i + 1}</Swap>
+          </span>
+        )
+        const text = (
+          <span className="grid gap-0.5 pb-5 text-left">
+            <span className={cn("text-base font-medium transition-colors duration-(--duration-slow) ease-(--ease-standard)", state === "upcoming" ? "text-ink-3" : "text-ink")}>
+              {step.title}
+              <span className="sr-only">{state === "done" ? " (done)" : state === "current" ? " (current step)" : ""}</span>
+            </span>
+            {step.description && <span className={cn("text-sm transition-colors duration-(--duration-slow) ease-(--ease-standard)", state === "upcoming" ? "text-ink-3" : "text-ink-2")}>{step.description}</span>}
+          </span>
+        )
+        const canSelect = state === "done" && !!onStepSelect
+        return (
+          <li key={step.title} data-state={state} aria-current={state === "current" ? "step" : undefined} className="group/step relative grid grid-cols-[20px_1fr] gap-x-3 has-[button:hover]:[&_[data-slot=stepper-marker]]:bg-primary-hover">
+            {!last && (
+              // The line fills downwards when the step is done, instead of switching colour.
+              <span aria-hidden="true" className="absolute top-5 bottom-0 left-[9.5px] w-px overflow-hidden bg-line-strong">
+                <span className={cn("block size-full origin-top bg-primary transition-transform duration-(--duration-slow) ease-(--ease-standard)", i < current ? "scale-y-100" : "scale-y-0")} />
+              </span>
+            )}
+            {/* Same elements in every state, so colour and icon changes can animate; a done step gets a button laid over the row. */}
+            {marker}
+            {text}
+            {canSelect && (
+              <button type="button" onClick={() => onStepSelect(i)} className="peer absolute inset-0 rounded-xs">
+                <span className="sr-only">Go back to {step.title}</span>
+              </button>
+            )}
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+export type { StepItem }

package/src/components/switch.tsx

@@ -0,0 +1,43 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "switch" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes:
+ *  - Thumb glides with TwoUX's ease-out
+ *  - Off track at 3.59:1 so the switch is visible when off (WCAG 1.4.11)
+ *  - Invisible hit area: 28px around the 16px track (WCAG 2.5.8)
+ *  - Sized to its label: a 16×28 track by default (14×24 small), no taller than the 15px text beside it, with 2px of track around the thumb
+ *  - Thumb travels the full track at each size
+ */
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex after:absolute after:-inset-1.5 after:rounded-full shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 px-px data-[size=default]:h-4 data-[size=default]:w-7 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-control",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block rounded-full bg-background ring-0 transition-transform duration-(--duration-base) ease-(--ease-out) group-data-[size=default]/switch:size-3 group-data-[size=sm]/switch:size-2.5 group-data-[size=default]/switch:data-[state=checked]:translate-x-3 group-data-[size=sm]/switch:data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/table.tsx

@@ -0,0 +1,126 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "table" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes:
+ *  - Adds containerClassName, so a table can scroll inside a fixed height and keep its header sticky
+ *  - Adds size="dense": 28px rows and header with 8px padding, the same 13px text, for spreadsheet-like data (inventories, ledgers, imports, mapping). Not a density setting
+ *  - Sticky header on the quiet surface, with the light divider
+ *  - Rows: light divider, hover fill, indigo tint when selected, an indigo edge on the keyboard-focused row
+ *  - Rows and header use the row tokens (36px, or 28px dense), 12px side padding and 2px top and bottom, so a 28px control in a cell keeps the row at 36px; header labels 12px medium grey, in sentence case
+ *  - Frozen columns: data-pinned on a head and its cells keeps them in view when the table scrolls sideways, at left var(--pin); data-pinned="last" draws the edge
+ */
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+function Table({ className, containerClassName, size = "default", ...props }: React.ComponentProps<"table"> & { containerClassName?: string; size?: "default" | "dense" }) {
+  return (
+    <div
+      data-slot="table-container"
+      className={cn("relative w-full overflow-x-auto", containerClassName)}
+    >
+      <table
+        data-slot="table"
+        data-size={size}
+        className={cn("group/table w-full caption-bottom text-base", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("sticky top-0 z-10 bg-surface-2 [&_tr]:border-b [&_tr]:border-line", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t border-line bg-surface-2 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-line transition-colors duration-(--duration-fast) ease-(--ease-out) outline-none hover:bg-hover has-aria-expanded:bg-hover data-[state=selected]:bg-primary-soft data-[focused=true]:shadow-[inset_2px_0_0_var(--color-primary)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-row px-3 text-left align-middle text-sm font-medium whitespace-nowrap text-ink-2 group-data-[size=dense]/table:h-row-dense group-data-[size=dense]/table:px-2 data-pinned:sticky data-pinned:left-[var(--pin,0px)] data-pinned:z-20 data-pinned:bg-surface-2 data-[pinned=last]:border-r data-[pinned=last]:border-line [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "h-row px-3 py-hair align-middle whitespace-nowrap group-data-[size=dense]/table:h-row-dense group-data-[size=dense]/table:px-2 group-data-[size=dense]/table:py-0 data-pinned:sticky data-pinned:left-[var(--pin,0px)] data-pinned:z-1 data-pinned:bg-surface data-[pinned=last]:border-r data-[pinned=last]:border-line in-[tr:hover]:data-pinned:bg-hover in-data-[state=selected]:data-pinned:bg-primary-soft [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-base text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/tabs.tsx

@@ -0,0 +1,118 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "tabs" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes:
+ *  - Inactive tabs use secondary text (9:1), not 60% ink, which is 4.46:1 on the tab rail
+ *  - TwoUX's default is the underline (line) style for page sections
+ *  - Line tabs span the width with a divider underneath
+ *  - Line tabs: no padding, indigo text and underline when active
+ *  - Adds count after the label; it pops when it changes
+ *  - One indicator slides to the active tab (underline or pill) instead of jumping; vertical tabs keep per-tab styling
+ */
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+import { Tabs as TabsPrimitive } from "radix-ui"
+import { Count } from "./motion"
+import { ActiveIndicator } from "../lib/active-indicator"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-md p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "h-9 w-full justify-start gap-5 rounded-none border-b border-line bg-transparent p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "line",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "line",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), "relative", className)}
+      {...props}
+    >
+      <ActiveIndicator
+        selector="[data-state=active]"
+        fit={variant === "line" ? "x" : "box"}
+        className={cn(
+          "group-data-[orientation=vertical]/tabs:hidden",
+          variant === "line" ? "bottom-[-1px] h-0.5 rounded-full bg-primary" : "rounded-sm bg-background shadow-sm"
+        )}
+      />
+      {props.children}
+    </TabsPrimitive.List>
+  )
+}
+
+function TabsTrigger({
+  className,
+  count,
+  children,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger> & { count?: number }) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-sm border border-transparent px-2 py-1 text-base font-medium whitespace-nowrap text-ink-2 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[orientation=vertical]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "group-data-[orientation=vertical]/tabs:data-[state=active]:bg-background data-[state=active]:text-foreground",
+        "group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:px-0 group-data-[variant=line]/tabs-list:data-[state=active]:text-primary-ink group-data-[variant=line]/tabs-list:after:bottom-[-1px] group-data-[variant=line]/tabs-list:after:bg-primary",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[orientation=vertical]/tabs:group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {count !== undefined && <Count value={count} className="text-sm font-normal text-ink-3" />}
+    </TabsPrimitive.Trigger>
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/components/tag-input.tsx

@@ -0,0 +1,253 @@
+/**
+ * TagInput: several short values that don't come from a list (email addresses, domains, keywords), typed or pasted.
+ * TwoUX composition on the generated shadcn Field. Nothing is dropped silently: duplicates are reported, invalid values
+ * stay as marked tags with their reason, and values past the limit stay in the input. Proposal: proposals/tag-input.md.
+ */
+"use client"
+
+import { AlertCircle, X } from "lucide-react"
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { Field, FieldDescription, FieldLabel } from "./field"
+
+type TagInputProps = {
+  label: string
+  value: string[]
+  onValueChange: (value: string[]) => void
+  /** The reason a value is not valid, or undefined when it is: "Not an email address." */
+  validateValue?: (value: string) => string | undefined
+  /** Most values people can add. Shows "3 of 10" under the field. */
+  max?: number
+  /** The thing entered, used in messages: { one: "address", many: "addresses" }. Defaults to value and values. */
+  noun?: { one: string; many: string }
+  /** Defaults to "Separate <many> with commas or new lines". */
+  hint?: string
+  /** An error from the form's own checks, such as "Add at least one address." */
+  error?: string
+  placeholder?: string
+  required?: boolean
+  optional?: boolean
+  disabled?: boolean
+  /** Values stay focusable and readable, without remove or edit. */
+  readOnly?: boolean
+  id?: string
+  /** Each value is submitted as a separate form value. */
+  name?: string
+  className?: string
+}
+
+const SPLIT = /[,;\n\t]+/
+const same = (a: string, b: string) => a.localeCompare(b, "en-GB", { sensitivity: "base" }) === 0
+
+/** Several free values in one field: Enter or comma adds, pasted lists are split, each value is checked as it is added. */
+export function TagInput({ label, value, onValueChange, validateValue, max, noun = { one: "value", many: "values" }, hint, error, placeholder, required, optional, disabled, readOnly, id, name, className }: TagInputProps) {
+  const auto = React.useId()
+  const fid = id ?? auto
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const chipRefs = React.useRef<(HTMLButtonElement | null)[]>([])
+  const [text, setText] = React.useState("")
+  const [notice, setNotice] = React.useState("")
+  const [flash, setFlash] = React.useState<string | null>(null)
+  const [focusIndex, setFocusIndex] = React.useState<number | null>(null)
+
+  React.useEffect(() => {
+    if (focusIndex === null) return
+    ;(chipRefs.current[focusIndex] ?? inputRef.current)?.focus()
+    setFocusIndex(null)
+  }, [focusIndex, value])
+  React.useEffect(() => {
+    if (!flash) return
+    const t = setTimeout(() => setFlash(null), 600)
+    return () => clearTimeout(t)
+  }, [flash])
+
+  const reasons = value.map((v) => validateValue?.(v))
+  const invalid = reasons.filter(Boolean).length
+  const word = (n: number) => (n === 1 ? noun.one : noun.many)
+
+  /** Adds values; returns the text that has to stay in the input (values past the limit). */
+  const add = (items: string[], pasted: boolean) => {
+    const next = [...value]
+    let added = 0, bad = 0
+    const dups: string[] = []
+    const left: string[] = []
+    for (const raw of items) {
+      const v = raw.trim()
+      if (!v) continue
+      const dup = next.find((x) => same(x, v))
+      if (dup) { dups.push(dup); continue }
+      if (max && next.length >= max) { left.push(v); continue }
+      next.push(v)
+      added++
+      if (validateValue?.(v)) bad++
+    }
+    if (added) onValueChange(next)
+    const parts: string[] = []
+    if (pasted && added) parts.push(`${added} added${bad ? `, ${bad} not valid` : ""}.`)
+    else if (bad) parts.push(`${validateValue?.(next[next.length - 1])}`)
+    if (dups.length === 1 && !pasted) parts.push(`${dups[0]} is already added.`)
+    else if (dups.length) parts.push(`${dups.length} already added.`)
+    if (left.length) parts.push(`You can add up to ${max}. ${left.length} ${word(left.length)} weren't added.`)
+    setNotice(parts.join(" "))
+    if (dups.length) setFlash(dups[dups.length - 1])
+    return left.join(", ")
+  }
+  const commit = () => {
+    if (!text.trim()) return
+    setText(add(text.split(SPLIT), false))
+  }
+  const remove = (i: number, then: "next" | "prev") => {
+    const v = value[i]
+    onValueChange(value.filter((_, j) => j !== i))
+    setNotice(`${v} removed.`)
+    // Focus the tag before (Backspace) or the one that moved into this place (Delete); the input when none is left.
+    const left = value.length - 1
+    setFocusIndex(left === 0 ? -1 : then === "prev" ? Math.max(i - 1, 0) : Math.min(i, left - 1))
+  }
+  const edit = (i: number) => {
+    const v = value[i]
+    onValueChange(value.filter((_, j) => j !== i))
+    setText(v)
+    setNotice("")
+    setFocusIndex(-1)
+  }
+
+  const shownError = error ?? (invalid ? `${invalid} ${word(invalid)} ${invalid === 1 ? "isn't" : "aren't"} valid. Fix or remove ${invalid === 1 ? "it" : "them"}.` : undefined)
+  const hintText = hint ?? `Separate ${noun.many} with commas or new lines`
+  const msgId = `${fid}-msg`
+  const helpId = `${fid}-help`
+
+  return (
+    <Field data-invalid={!!shownError || undefined} className={cn("gap-2", className)}>
+      <FieldLabel htmlFor={fid} id={`${fid}-label`}>
+        {label}
+        {required && <span aria-hidden="true" className="text-bad">*</span>}
+        {optional && <span className="font-normal text-ink-3">(optional)</span>}
+      </FieldLabel>
+      <div
+        data-slot="tag-input"
+        onMouseDown={(e) => {
+          if (e.target === e.currentTarget) {
+            e.preventDefault()
+            inputRef.current?.focus()
+          }
+        }}
+        className={cn(
+          "flex min-h-8 w-full min-w-0 cursor-text flex-wrap items-center gap-1 rounded-sm border border-input bg-background px-1 py-1 shadow-xs transition-[color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out) hover:border-input-hover",
+          "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50",
+          shownError && "not-focus-within:border-destructive-edge",
+          disabled && "pointer-events-none opacity-50",
+        )}
+      >
+        {value.length > 0 && (
+          <ul role="list" aria-labelledby={`${fid}-label`} className="contents">
+            {value.map((v, i) => {
+              const reason = reasons[i]
+              return (
+                <li
+                  key={v}
+                  className={cn(
+                    "inline-flex h-5.5 max-w-60 items-center gap-1 rounded-xs border px-control text-sm transition-colors duration-(--duration-base) ease-(--ease-out)",
+                    reason ? "border-bad-line bg-bad-bg text-ink" : "border-line-strong bg-surface text-ink",
+                    flash === v && "bg-selected",
+                  )}
+                >
+                  {reason && <AlertCircle className="size-3 shrink-0 text-bad" aria-hidden="true" />}
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    ref={(el) => {
+                      chipRefs.current[i] = el
+                    }}
+                    aria-label={reason ? `${v}, not valid: ${reason}` : v}
+                    aria-describedby={readOnly ? undefined : helpId}
+                    title={reason}
+                    disabled={disabled}
+                    onDoubleClick={() => !readOnly && edit(i)}
+                    onKeyDown={(e) => {
+                      if (e.key === "ArrowLeft") { e.preventDefault(); chipRefs.current[i - 1]?.focus() }
+                      if (e.key === "ArrowRight") { e.preventDefault(); (chipRefs.current[i + 1] ?? inputRef.current)?.focus() }
+                      if (e.key === "Home") { e.preventDefault(); chipRefs.current[0]?.focus() }
+                      if (e.key === "End" || e.key === "Escape") { e.preventDefault(); inputRef.current?.focus() }
+                      if (readOnly) return
+                      if (e.key === "Backspace") { e.preventDefault(); remove(i, "prev") }
+                      if (e.key === "Delete") { e.preventDefault(); remove(i, "next") }
+                      if (e.key === "Enter") { e.preventDefault(); edit(i) }
+                    }}
+                    className="min-w-0 truncate rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
+                  >
+                    {v}
+                  </button>
+                  {!readOnly && (
+                    <button
+                      type="button"
+                      tabIndex={-1}
+                      aria-label={`Remove ${v}`}
+                      disabled={disabled}
+                      onClick={() => remove(i, "next")}
+                      className="relative -mr-0.5 grid size-4 shrink-0 place-items-center rounded-xs text-ink-3 after:absolute after:-inset-1 hover:bg-hover hover:text-ink"
+                    >
+                      <X className="size-3" aria-hidden="true" />
+                    </button>
+                  )}
+                </li>
+              )
+            })}
+          </ul>
+        )}
+        <input
+          ref={inputRef}
+          id={fid}
+          value={text}
+          readOnly={readOnly}
+          disabled={disabled}
+          placeholder={value.length ? undefined : placeholder}
+          autoComplete="off"
+          aria-invalid={shownError ? true : undefined}
+          aria-describedby={msgId}
+          aria-required={required || undefined}
+          onChange={(e) => {
+            const t = e.target.value
+            if (/[,;]/.test(t)) setText(add(t.split(SPLIT), false))
+            else setText(t)
+          }}
+          onPaste={(e) => {
+            const pasted = e.clipboardData.getData("text")
+            if (!SPLIT.test(pasted)) return
+            e.preventDefault()
+            setText(add((text + pasted).split(SPLIT), true))
+          }}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            const atStart = e.currentTarget.selectionStart === 0 && e.currentTarget.selectionEnd === 0
+            if (e.key === "Enter" && text.trim()) { e.preventDefault(); commit() }
+            if (e.key === "Tab" && !e.shiftKey && text.trim()) commit()
+            if ((e.key === "Backspace" || e.key === "ArrowLeft") && atStart && value.length) {
+              e.preventDefault()
+              chipRefs.current[value.length - 1]?.focus()
+            }
+          }}
+          className="h-5.5 min-w-24 flex-1 bg-transparent px-control text-base outline-none placeholder:text-muted-foreground"
+        />
+      </div>
+      <div className="flex items-start gap-2">
+        <div className="min-w-0 flex-1">
+          {shownError ? (
+            // One message that wraps as text. Each invalid tag carries its own reason, and the live notice
+            // still tells screen readers what the last paste or entry did.
+            <p id={msgId} className="flex items-start gap-control text-sm text-bad">
+              <AlertCircle className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+              <span className="min-w-0">{shownError}</span>
+            </p>
+          ) : (
+            <FieldDescription id={msgId}>{notice || hintText}</FieldDescription>
+          )}
+        </div>
+        {max && <span className="tabular shrink-0 text-sm text-ink-3">{value.length} of {max}</span>}
+      </div>
+      <span id={helpId} hidden>Enter to edit, Delete to remove</span>
+      <span className="sr-only" role="status" aria-live="polite">{notice}</span>
+      {name && value.map((v) => <input key={v} type="hidden" name={name} value={v} />)}
+    </Field>
+  )
+}