@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/ui/table.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+type TableProps = React.ComponentProps<"table"> & {
+  /**
+   * `compact` halves the header/cell padding for dense ledgers; `dense` drops
+   * the fixed header height and runs rows at a hairline's breath, for a small
+   * aside table that shares its column with other content.
+   */
+  density?: "default" | "compact" | "dense"
+}
+
+function Table({ className, density = "default", ...props }: TableProps) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        data-density={density}
+        className={cn(
+          "w-full caption-bottom text-xs",
+          density === "compact" &&
+            "[&_[data-slot=table-head]]:h-8 [&_[data-slot=table-cell]]:py-1 [&_[data-slot=table-row-header]]:py-1",
+          density === "dense" &&
+            "[&_[data-slot=table-head]]:h-auto [&_[data-slot=table-head]]:py-1 [&_[data-slot=table-cell]]:py-0.5 [&_[data-slot=table-row-header]]:py-0.5",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b [&_tr]:border-border", 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-border bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+type TableRowProps = React.ComponentProps<"tr"> & {
+  /**
+   * Marks a row the user can activate (a ledger row that expands, a
+   * drill-down row). Rows are not interactive by default, so the pointer
+   * cursor is opt-in and stays kit-level rather than an app-local utility.
+   */
+  interactive?: boolean
+}
+
+function TableRow({ className, interactive = false, ...props }: TableRowProps) {
+  return (
+    <tr
+      data-slot="table-row"
+      data-interactive={interactive || undefined}
+      className={cn(
+        "border-b border-border transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        interactive && "cursor-pointer",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+type TableHeadProps = React.ComponentProps<"th"> & {
+  /** Right-aligns the cell and turns on tabular figures (ledger numerals). */
+  numeric?: boolean
+}
+
+function TableHead({ className, numeric = false, ...props }: TableHeadProps) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0",
+        numeric && "text-end tabular-nums",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+type TableDataCellProps = React.ComponentProps<"td"> & {
+  /** Right-aligns the cell and turns on tabular figures (ledger numerals). */
+  numeric?: boolean
+}
+
+function TableCell({
+  className,
+  numeric = false,
+  ...props
+}: TableDataCellProps) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+        numeric && "text-end tabular-nums",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Row-header cell — the `<th scope="row">` that names a body row (a blotter
+ * symbol, a metric label). Cell-shaped (left, body padding) so it sits level
+ * with `TableCell`, unlike the column-oriented `TableHead`.
+ */
+function TableRowHeader({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-row-header"
+      scope="row"
+      className={cn(
+        "p-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableRowHeader,
+  TableCaption,
+}

package/src/ui/tabs.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  // `max-w-full overflow-x-auto` keeps an over-long list scrolling WITHIN the
+  // list instead of pushing the page wide — the reference audit's /account @390
+  // critical: a 6-tab settings list measured 459px with overflow-x:visible, so
+  // the whole page scrolled (scrollWidth 494 vs viewport 390). The list still
+  // shrink-wraps its content when there is room, so desktop is unchanged; only
+  // the overflow case becomes an internal scroller. The 3px list padding
+  // (p-[3px]) exactly clears the trigger's 3px focus-visible ring, so the
+  // scroller clips nothing the ring needs.
+  "group/tabs-list inline-flex w-fit max-w-full items-center justify-center overflow-x-auto rounded-none p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-colors group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] 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:cursor-not-allowed disabled:opacity-50 has-data-[icon=inline-end]:pe-1 has-data-[icon=inline-start]:ps-1 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_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-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-xs/relaxed outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/ui/tags-input.tsx

@@ -0,0 +1,168 @@
+"use client"
+/**
+ * TagsInput — the chips multi-select, promoted from the controls layer into
+ * the kit (#4306, batch K2). Controlled: the caller owns the tag list, the
+ * field owns the draft. Enter (or comma) commits the trimmed draft, Backspace
+ * on an empty draft removes the last chip, every chip carries its own ×
+ * remove, clicking anywhere in the field focuses the input. Duplicates are
+ * dropped before `onAdd` fires. Optional `suggestions` render as +chips below
+ * the field (already-added values are filtered out).
+ *
+ * The `.tg-*` dress is translated into token utilities here (logical
+ * padding, so chips mirror under RTL); the chipless-input stretch is the
+ * field's `:first-child` rule. The dashboard's deferred quant-chip dress is
+ * not carried — no live consumer passes it.
+ */
+import { useRef, useState } from "react"
+import type { HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from "react"
+
+import { cn } from "../lib/utils"
+
+export type TagChipProps = {
+  label: ReactNode
+  /** Renders the × remove control when present. */
+  onRemove?: () => void
+  removeAriaLabel?: string
+  className?: string
+}
+
+export function TagChip({ label, onRemove, removeAriaLabel, className }: TagChipProps) {
+  return (
+    <span
+      data-slot="tag-chip"
+      className={cn(
+        "inline-flex items-center gap-[0.35rem] border border-[color-mix(in_srgb,var(--accent)_32%,var(--hair))] bg-[color-mix(in_srgb,var(--accent)_12%,transparent)] ps-[0.6rem] pe-[0.35rem] py-[0.22rem] font-mono text-[0.74rem] whitespace-nowrap text-ink",
+        className,
+      )}
+    >
+      {label}
+      {onRemove ? (
+        <button
+          type="button"
+          className="inline-flex cursor-pointer items-center justify-center rounded-none border-none bg-transparent p-[0.1rem] text-ink-mute transition-colors duration-150 hover:text-ink"
+          aria-label={removeAriaLabel ?? "Remove"}
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove()
+          }}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            width="11"
+            height="11"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          >
+            <path d="M6 6l12 12M18 6L6 18" />
+          </svg>
+        </button>
+      ) : null}
+    </span>
+  )
+}
+
+export type TagsInputProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  /** The chips — caller-owned. */
+  value: string[]
+  /** A trimmed, dedup-checked tag was committed (Enter/comma/suggestion). */
+  onAdd?: (tag: string) => void
+  /** A chip's × was clicked, or Backspace fired on an empty draft. */
+  onRemove?: (tag: string, index: number) => void
+  /** Shown only while the field is chipless (the reference behavior). */
+  placeholder?: string
+  inputAriaLabel?: string
+  /** +chips below the field; values already in `value` are filtered out. */
+  suggestions?: string[]
+  suggestionsLabel?: string
+  disabled?: boolean
+}
+
+export function TagsInput({
+  value,
+  onAdd,
+  onRemove,
+  placeholder,
+  inputAriaLabel = "Add a tag",
+  suggestions,
+  suggestionsLabel = "suggestions",
+  disabled,
+  className,
+  onClick,
+  ...props
+}: TagsInputProps) {
+  const [draft, setDraft] = useState("")
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const add = (raw: string) => {
+    const tag = raw.trim().replace(/,$/, "")
+    if (tag && !value.includes(tag)) onAdd?.(tag)
+    setDraft("")
+  }
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault()
+      add(draft)
+    } else if (e.key === "Backspace" && draft === "" && value.length) {
+      onRemove?.(value[value.length - 1], value.length - 1)
+    }
+  }
+
+  const remaining = (suggestions ?? []).filter((s) => !value.includes(s))
+
+  return (
+    <>
+      <div
+        data-slot="tags-input"
+        className={cn(
+          "flex w-[min(100%,30rem)] cursor-text flex-wrap items-center gap-[0.4rem] border border-hair bg-surface px-[0.6rem] py-[0.5rem] 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)_20%,transparent)]",
+          className,
+        )}
+        onClick={(e: MouseEvent<HTMLDivElement>) => {
+          inputRef.current?.focus()
+          onClick?.(e)
+        }}
+        {...props}
+      >
+        {value.map((tag, i) => (
+          <TagChip
+            key={tag}
+            label={tag}
+            removeAriaLabel={`Remove ${tag}`}
+            onRemove={disabled ? undefined : () => onRemove?.(tag, i)}
+          />
+        ))}
+        <input
+          ref={inputRef}
+          className="min-w-[7rem] border-none bg-transparent p-[0.2rem] font-mono text-[0.8rem] text-ink outline-none first:flex-1 placeholder:text-ink-mute"
+          value={draft}
+          placeholder={value.length ? "" : placeholder}
+          aria-label={inputAriaLabel}
+          disabled={disabled}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={onKeyDown}
+        />
+      </div>
+      {remaining.length ? (
+        <div data-slot="tag-suggestions" className="mt-[0.7rem] flex flex-wrap items-center gap-[0.4rem]">
+          <span className="me-[0.2rem] font-mono text-[0.56rem] tracking-[0.1em] text-ink-mute uppercase">
+            {suggestionsLabel}
+          </span>
+          {remaining.map((s) => (
+            <button
+              key={s}
+              type="button"
+              className="cursor-pointer border border-hair bg-transparent px-[0.6rem] py-[0.25rem] font-mono text-[0.72rem] text-ink-soft transition-colors duration-150 hover:border-[color-mix(in_srgb,var(--accent)_45%,var(--hair))] hover:text-ink disabled:cursor-not-allowed"
+              disabled={disabled}
+              onClick={() => add(s)}
+            >
+              + {s}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </>
+  )
+}

package/src/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-none border border-input bg-transparent px-2.5 py-2 text-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/ui/tooltip.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { cn } from "../lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  hideArrow = false,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  > & {
+    /** Skip the rotated-square Arrow (the chat's long-standing no-arrow ruling). */
+    hideArrow?: boolean;
+  }) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          {hideArrow ? null : (
+            <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-inset-inline-end-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-inset-inline-start-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-inset-inline-end-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-inset-inline-start-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+          )}
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }