@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/command-palette.d.ts

@@ -0,0 +1,57 @@
+import { Command } from "cmdk";
+import { type ComponentProps, type ReactNode } from "react";
+export interface UseCommandPaletteOptions {
+    /** Key pressed with ⌘ (macOS) or Ctrl (elsewhere). Defaults to `"k"`. */
+    hotkey?: string;
+    /** Turn the global listener off (e.g. while another modal owns the keyboard). */
+    enabled?: boolean;
+    defaultOpen?: boolean;
+}
+/** Open state for a CommandPalette plus a global ⌘K / Ctrl+K toggle. Spread `bind` onto the palette. */
+export declare function useCommandPalette({ hotkey, enabled, defaultOpen, }?: UseCommandPaletteOptions): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    toggle: () => void;
+    bind: {
+        open: boolean;
+        onOpenChange: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    };
+};
+export interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Groups / items / separators. */
+    children: ReactNode;
+    placeholder?: string;
+    /** Accessible name for the dialog and listbox. */
+    label?: string;
+    /** Shows a spinner in the input and a loading row in the list (async results). */
+    loading?: boolean;
+    /** Controlled query (e.g. to fetch async results); cleared when the palette closes. */
+    search?: string;
+    onSearchChange?: (search: string) => void;
+    /** Disable cmdk's built-in fuzzy filter when results are filtered server-side. */
+    shouldFilter?: boolean;
+    /** Custom empty state; receives the current query. */
+    empty?: (search: string) => ReactNode;
+    /** Left side of the footer (e.g. the current workspace). */
+    footer?: ReactNode;
+    className?: string;
+}
+/** Raycast-style launcher: big search, grouped results, keyboard hints. Pair with `useCommandPalette`. */
+export declare function CommandPalette({ open, onOpenChange, children, placeholder, label: labelProp, loading, search: searchProp, onSearchChange, shouldFilter, empty, footer, className, }: CommandPaletteProps): import("react").JSX.Element;
+export type CommandPaletteGroupProps = ComponentProps<typeof Command.Group>;
+/** Titled section; pass `heading`. Hidden automatically when none of its items match. */
+export declare function CommandPaletteGroup(props: CommandPaletteGroupProps): import("react").JSX.Element;
+export declare function CommandPaletteSeparator({ className, ...props }: ComponentProps<typeof Command.Separator>): import("react").JSX.Element;
+export interface CommandPaletteItemProps extends Omit<ComponentProps<typeof Command.Item>, "children"> {
+    children: ReactNode;
+    icon?: ReactNode;
+    /** Secondary line (path, model id, hint). */
+    description?: ReactNode;
+    /** Logical keys, e.g. `["mod", "n"]`. */
+    shortcut?: readonly string[];
+    /** Trailing adornment (badge, "Jump to" hint…). */
+    trailing?: ReactNode;
+}
+export declare function CommandPaletteItem({ icon, description, shortcut, trailing, onSelect, className, children, ...props }: CommandPaletteItemProps): import("react").JSX.Element;

package/dist/components/command-palette.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { Command } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import { createContext, use, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { keyShortcutsProps } from "../lib/keys.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { dialogBackdropClass, dialogPopupStyles, dialogViewportClass } from "./dialog.js";
+import { Kbd, Shortcut } from "./kbd.js";
+import { Spinner } from "./spinner.js";
+/** Open state for a CommandPalette plus a global ⌘K / Ctrl+K toggle. Spread `bind` onto the palette. */
+export function useCommandPalette({ hotkey = "k", enabled = true, defaultOpen = false, } = {}) {
+    const [open, setOpen] = useState(defaultOpen);
+    const toggle = useCallback(() => setOpen((o) => !o), []);
+    useEffect(() => {
+        if (!enabled)
+            return undefined;
+        const key = hotkey.toLowerCase();
+        const onKeyDown = (event) => {
+            if (event.defaultPrevented || event.repeat)
+                return;
+            if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey)
+                return;
+            if (event.key.toLowerCase() !== key)
+                return;
+            event.preventDefault();
+            setOpen((o) => !o);
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [hotkey, enabled]);
+    const bind = useMemo(() => ({ open, onOpenChange: setOpen }), [open]);
+    return { open, setOpen, toggle, bind };
+}
+/* ------------------------------------------------------------------------------------------ */
+/* Palette                                                                                    */
+/* ------------------------------------------------------------------------------------------ */
+const PaletteContext = createContext({ close: () => undefined });
+/** Raycast-style launcher: big search, grouped results, keyboard hints. Pair with `useCommandPalette`. */
+export function CommandPalette({ open, onOpenChange, children, placeholder, label: labelProp, loading = false, search: searchProp, onSearchChange, shouldFilter, empty, footer, className, }) {
+    const container = usePortalContainer();
+    const t = useUiStrings().commandPalette;
+    const keys = useUiStrings().kbd.keys;
+    const label = labelProp ?? t.label;
+    const [uncontrolledSearch, setUncontrolledSearch] = useState("");
+    const search = searchProp ?? uncontrolledSearch;
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const setSearch = (next) => {
+        if (searchProp === undefined)
+            setUncontrolledSearch(next);
+        onSearchChange?.(next);
+    };
+    const context = useMemo(() => ({ close: () => onOpenChange(false) }), [onOpenChange]);
+    return (_jsx(BaseDialog.Root, { open: open, onOpenChange: (next) => onOpenChange(next), onOpenChangeComplete: (isOpen) => {
+            if (!isOpen)
+                setSearch("");
+        }, children: _jsxs(BaseDialog.Portal, { container: container, children: [_jsx(BaseDialog.Backdrop, { "data-slot": "command-palette-backdrop", className: dialogBackdropClass }), _jsx(BaseDialog.Viewport, { className: dialogViewportClass, children: _jsxs(BaseDialog.Popup, { "data-slot": "command-palette", initialFocus: inputRef, className: cn(dialogPopupStyles({ size: "lg" }), "mt-[min(12vh,7rem)] mb-auto max-w-[640px] overflow-hidden", className), children: [_jsx(BaseDialog.Title, { className: "sr-only", children: label }), _jsx(PaletteContext, { value: context, children: _jsxs(Command, { label: label, loop: true, vimBindings: false, ...(shouldFilter !== undefined && { shouldFilter }), className: "flex min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle px-4", children: [_jsx(SearchIcon, { "aria-hidden": true, className: "size-[18px] shrink-0 text-fg-subtle" }), _jsx(Command.Input, { ref: inputRef, value: search, onValueChange: (value) => {
+                                                        setSearch(value);
+                                                        // New query → start from the top of the list.
+                                                        listRef.current?.scrollTo({ top: 0 });
+                                                    }, placeholder: placeholder ?? t.placeholder, className: "h-full min-w-0 flex-1 bg-transparent text-md text-fg outline-none placeholder:text-fg-faint" }), loading ? (_jsx(Spinner, { size: "md", className: "text-fg-subtle" })) : (_jsx(Kbd, { size: "md", className: "shrink-0", children: keys.esc }))] }), _jsxs(Command.List, { ref: listRef, label: label, className: cn("max-h-[min(440px,58vh)] scroll-py-2 overflow-y-auto overscroll-contain p-2", "[&_[cmdk-group]+[cmdk-group]]:mt-1", "[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:h-7 [&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:items-center", "[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-fg-subtle"), children: [loading && (_jsx(Command.Loading, { label: t.loadingResults, children: _jsxs("div", { className: "flex h-10 items-center gap-3 px-3 text-sm text-fg-subtle", children: [_jsx(Spinner, { size: "sm" }), t.searching] }) })), !loading && (_jsx(Command.Empty, { children: empty ? (empty(search)) : (_jsxs("div", { className: "flex flex-col items-center gap-1 px-6 py-10 text-center", children: [_jsx(SearchIcon, { "aria-hidden": true, className: "mb-2 size-5 text-fg-faint" }), _jsx("p", { className: "text-base text-fg", children: t.noResults }), _jsx("p", { className: "max-w-full truncate text-sm text-fg-subtle", children: t.nothingMatches({ query: search }) })] })) })), children] }), _jsxs("div", { className: "flex h-10 shrink-0 items-center gap-4 border-t border-border-subtle bg-bg-subtle/60 px-4 text-xs text-fg-subtle", children: [_jsx("div", { className: "min-w-0 flex-1 truncate", children: footer }), _jsx(FooterHint, { keys: ["up", "down"], label: t.hints.navigate }), _jsx(FooterHint, { keys: ["enter"], label: t.hints.select }), _jsx(FooterHint, { keys: ["esc"], label: t.hints.close })] })] }) })] }) })] }) }));
+}
+function FooterHint({ keys, label }) {
+    return (_jsxs("span", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx(Shortcut, { keys: keys, size: "sm", spoken: true, className: "gap-0.5" }), _jsx("span", { children: label })] }));
+}
+/** Titled section; pass `heading`. Hidden automatically when none of its items match. */
+export function CommandPaletteGroup(props) {
+    return _jsx(Command.Group, { "data-slot": "command-palette-group", ...props });
+}
+export function CommandPaletteSeparator({ className, ...props }) {
+    return (_jsx(Command.Separator, { "data-slot": "command-palette-separator", className: cn("-mx-2 my-1.5 h-px bg-border-subtle", className), ...props }));
+}
+export function CommandPaletteItem({ icon, description, shortcut, trailing, onSelect, className, children, ...props }) {
+    const { close } = use(PaletteContext);
+    return (_jsxs(Command.Item, { "data-slot": "command-palette-item", ...keyShortcutsProps(shortcut), onSelect: (value) => {
+            onSelect?.(value);
+            close();
+        }, className: cn("group/cmd relative flex min-h-10 cursor-default select-none items-center gap-3 rounded-lg px-3 text-base text-fg outline-none", "transition-colors duration-(--duration-instant) ease-(--ease-standard)", "data-[selected=true]:bg-hover data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45", className), ...props, children: [icon !== undefined && (_jsx("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center text-fg-subtle transition-colors duration-(--duration-instant) group-data-[selected=true]/cmd:text-fg [&_svg]:size-4", children: icon })), description === undefined ? (_jsx("span", { className: "min-w-0 flex-1 truncate", children: children })) : (_jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-2 py-2", children: [_jsx("span", { className: "shrink-0 truncate", children: children }), _jsx("span", { className: "min-w-0 truncate text-sm text-fg-subtle", children: description })] })), trailing, shortcut && _jsx(Shortcut, { keys: shortcut, size: "md", className: "ms-auto shrink-0 ps-3" })] }));
+}

package/dist/components/context-menu.d.ts

@@ -0,0 +1,24 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type { ComponentProps, ReactNode } from "react";
+export { MenuCheckboxItem as ContextMenuCheckboxItem, MenuGroup as ContextMenuGroup, MenuGroupLabel as ContextMenuGroupLabel, MenuItem as ContextMenuItem, MenuLinkItem as ContextMenuLinkItem, MenuRadioGroup as ContextMenuRadioGroup, MenuRadioItem as ContextMenuRadioItem, MenuSeparator as ContextMenuSeparator, MenuSubmenuRoot as ContextMenuSubmenuRoot, MenuSubmenuTrigger as ContextMenuSubmenuTrigger, } from "./menu.js";
+export declare const ContextMenuRoot: typeof BaseContextMenu.Root;
+/** The area that opens the menu on right-click / long-press. Renders a `<div>`. */
+export declare function ContextMenuTrigger({ className, ...props }: ComponentProps<typeof BaseContextMenu.Trigger>): import("react").JSX.Element;
+export interface ContextMenuContentProps extends ComponentProps<typeof BaseContextMenu.Popup> {
+    positionerProps?: ComponentProps<typeof BaseContextMenu.Positioner>;
+}
+/** Portal + pointer-anchored positioner + popup. */
+export declare function ContextMenuContent({ positionerProps, className, ...props }: ContextMenuContentProps): import("react").JSX.Element;
+/** Popup for a nested context submenu; overlaps the parent so the first item aligns with the trigger. */
+export declare function ContextMenuSubmenuContent({ positionerProps, className, ...props }: ContextMenuContentProps): import("react").JSX.Element;
+export interface ContextMenuProps {
+    /** The region that responds to right-click. */
+    children: ReactNode;
+    /** Menu items. */
+    content: ReactNode;
+    /** Class for the trigger region. */
+    className?: string;
+    disabled?: boolean;
+}
+/** Convenience wrapper: `<ContextMenu content={…items…}><Row/></ContextMenu>`. */
+export declare function ContextMenu({ children, content, className, disabled }: ContextMenuProps): import("react").JSX.Element;

package/dist/components/context-menu.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { withBase } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { menuPopupClass, menuPositionerClass } from "./menu.js";
+/*
+ * Context menus share every item part with Menu (Base UI re-exports the same primitives), so
+ * items, labels and separators are re-exported from menu.tsx under ContextMenu* names.
+ */
+export { MenuCheckboxItem as ContextMenuCheckboxItem, MenuGroup as ContextMenuGroup, MenuGroupLabel as ContextMenuGroupLabel, MenuItem as ContextMenuItem, MenuLinkItem as ContextMenuLinkItem, MenuRadioGroup as ContextMenuRadioGroup, MenuRadioItem as ContextMenuRadioItem, MenuSeparator as ContextMenuSeparator, MenuSubmenuRoot as ContextMenuSubmenuRoot, MenuSubmenuTrigger as ContextMenuSubmenuTrigger, } from "./menu.js";
+export const ContextMenuRoot = BaseContextMenu.Root;
+/** The area that opens the menu on right-click / long-press. Renders a `<div>`. */
+export function ContextMenuTrigger({ className, ...props }) {
+    return (_jsx(BaseContextMenu.Trigger, { "data-slot": "context-menu-trigger", className: withBase("select-none", className), ...props }));
+}
+/** Portal + pointer-anchored positioner + popup. */
+export function ContextMenuContent({ positionerProps, className, ...props }) {
+    const container = usePortalContainer();
+    return (_jsx(BaseContextMenu.Portal, { container: container, children: _jsx(BaseContextMenu.Positioner, { collisionPadding: 8, className: menuPositionerClass, ...positionerProps, children: _jsx(BaseContextMenu.Popup, { "data-slot": "context-menu", className: withBase(menuPopupClass, className), ...props }) }) }));
+}
+/** Popup for a nested context submenu; overlaps the parent so the first item aligns with the trigger. */
+export function ContextMenuSubmenuContent({ positionerProps, className, ...props }) {
+    const container = usePortalContainer();
+    return (_jsx(BaseContextMenu.Portal, { container: container, children: _jsx(BaseContextMenu.Positioner, { sideOffset: -2, alignOffset: -5, collisionPadding: 8, className: menuPositionerClass, ...positionerProps, children: _jsx(BaseContextMenu.Popup, { "data-slot": "context-menu-submenu", className: withBase(menuPopupClass, className), ...props }) }) }));
+}
+/** Convenience wrapper: `<ContextMenu content={…items…}><Row/></ContextMenu>`. */
+export function ContextMenu({ children, content, className, disabled }) {
+    return (_jsxs(BaseContextMenu.Root, { ...(disabled !== undefined && { disabled }), children: [_jsx(ContextMenuTrigger, { className: className, children: children }), _jsx(ContextMenuContent, { children: content })] }));
+}

package/dist/components/copy-button.d.ts

@@ -0,0 +1,9 @@
+import { type IconButtonProps } from "./button.js";
+export interface CopyButtonProps extends Omit<IconButtonProps, "aria-label" | "children" | "value" | "onClick"> {
+    /** Text to copy, or a getter evaluated on click (for large/derived values). */
+    value: string | (() => string);
+    /** Accessible + tooltip label (default `codeBlock.copy`). */
+    label?: string;
+}
+/** Icon button that copies `value` and confirms with a check. */
+export declare function CopyButton({ value, label, size, className, ...props }: CopyButtonProps): import("react").JSX.Element;

package/dist/components/copy-button.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Copy } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { KitMotion } from "../lib/kit-motion.js";
+import { spring } from "../lib/motion.js";
+import { useCopyToClipboard } from "../lib/use-copy-to-clipboard.js";
+import { IconButton } from "./button.js";
+import { DrawnCheck } from "./drawn-check.js";
+import { Tooltip } from "./tooltip.js";
+/** Icon button that copies `value` and confirms with a check. */
+export function CopyButton({ value, label, size = "xs", className, ...props }) {
+    const strings = useUiStrings().codeBlock;
+    const [copied, copy] = useCopyToClipboard();
+    const name = copied ? strings.copied : (label ?? strings.copy);
+    return (_jsx(Tooltip, { content: name, children: _jsxs(IconButton, { "data-slot": "copy-button", "aria-label": name, size: size, className: cn("text-fg-subtle", className), onClick: () => copy(typeof value === "function" ? value() : value), ...props, children: [_jsx(KitMotion, { children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(m.span, { initial: copied ? { opacity: 0, scale: 0.6 } : { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1, transition: copied ? spring.bouncy : spring.snappy }, exit: { opacity: 0, scale: 0.6, transition: { duration: 0.08 } }, className: "grid place-items-center", children: copied ? _jsx(DrawnCheck, { className: "text-fg" }) : _jsx(Copy, {}) }, copied ? "check" : "copy") }) }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? strings.copiedAnnouncement : "" })] }) }));
+}

package/dist/components/copy-command.d.ts

@@ -0,0 +1,18 @@
+export interface CopyCommandProps {
+    /** The command copied and shown. */
+    readonly command: string;
+    /** Written before it and left out of the copy (`$`); `""` for none. */
+    readonly prompt?: string | undefined;
+    /**
+     * What copying does ("Copy install command"); the name is it and the command, so it holds the text
+     * the button shows. Default: "Copy <command>".
+     */
+    readonly label?: string | undefined;
+    readonly className?: string | undefined;
+}
+/**
+ * A command to paste into a terminal as one button: the prompt, the command and the copy mark. The
+ * check that confirms the copy draws in the accent, one of its few uses, and a polite live region says
+ * it was copied.
+ */
+export declare function CopyCommand({ command, prompt, label, className }: CopyCommandProps): import("react").JSX.Element;

package/dist/components/copy-command.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Copy } from "lucide-react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { useCopyToClipboard } from "../lib/use-copy-to-clipboard.js";
+import { DrawnCheck } from "./drawn-check.js";
+/**
+ * A command to paste into a terminal as one button: the prompt, the command and the copy mark. The
+ * check that confirms the copy draws in the accent, one of its few uses, and a polite live region says
+ * it was copied.
+ */
+export function CopyCommand({ command, prompt = "$", label, className }) {
+    const strings = useUiStrings().codeBlock;
+    const [copied, copy] = useCopyToClipboard();
+    return (_jsxs("button", { type: "button", "data-slot": "copy-command", onClick: () => copy(command), "aria-label": label === undefined
+            ? strings.copyCommand({ command })
+            : strings.copyLabelledCommand({ label, command }), className: cn("group inline-flex h-10 max-w-full items-center gap-3 rounded-xl border border-border bg-surface px-3.5 font-mono text-sm text-fg-muted shadow-xs outline-none", "transition-[border-color,color] duration-(--duration-fast) ease-(--ease-standard) hover:border-border-strong hover:text-fg focus-visible:ring-focus", className), children: [prompt !== "" && (_jsx("span", { "aria-hidden": true, className: "select-none text-fg-faint", children: prompt })), _jsx("span", { dir: "ltr", className: "truncate", children: command }), _jsx("span", { className: "grid size-5 shrink-0 place-items-center text-fg-subtle group-hover:text-fg", children: copied ? _jsx(DrawnCheck, { className: "size-3.5 text-accent" }) : _jsx(Copy, { "aria-hidden": true, className: "size-3.5" }) }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? strings.copiedAnnouncement : "" })] }));
+}

package/dist/components/data-table.d.ts

@@ -0,0 +1,240 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+export interface DataTableColumn<Row> {
+    /** Unique in the table. */
+    readonly key: string;
+    readonly header: ReactNode;
+    readonly cell: (row: Row) => ReactNode;
+    /** Figures (counts, money, sizes, durations): aligned to the end, in tabular figures. */
+    readonly numeric?: boolean;
+    /** Where the column's header and cells sit when they aren't figures (a comparison's checkmarks: `center`). */
+    readonly align?: "start" | "center" | "end";
+    /** Classes for the column's header and every cell in it: its width. */
+    readonly className?: string;
+    /** Classes for the column's body cells, or a function of the row: tone, weight, truncation. */
+    readonly cellClassName?: string | ((row: Row) => string | undefined);
+}
+declare const dataTable: import("tailwind-variants").TVReturnType<{
+    size: {
+        /** Inside a card or a pane: a detail under something larger. */
+        sm: {
+            table: string;
+            headCell: string;
+            cell: string;
+        };
+        md: {
+            table: string;
+            headCell: string;
+            cell: string;
+        };
+        /** A page's own table (a plan comparison): roomy cells, the outer columns off the edges, banded groups. */
+        lg: {
+            table: string;
+            headCell: string;
+            cell: string;
+            groupCell: string;
+        };
+    };
+    /** Column widths are set, not measured from the content (long names truncate). */
+    fixed: {
+        true: {
+            table: string;
+        };
+    };
+    /** Keeps the column headers in view while the rows scroll under them. */
+    stickyHeader: {
+        true: {
+            head: string;
+        };
+    };
+    /** The column headers are for assistive technology only (the columns explain themselves). */
+    hideHeader: {
+        true: {
+            head: string;
+        };
+    };
+    /** The table reaches the edges of its pane: the first and last columns keep a gap from them. */
+    inset: {
+        true: {
+            headCell: string;
+            cell: string;
+        };
+    };
+}, {
+    table: string;
+    caption: string;
+    head: string;
+    headRow: string;
+    headCell: string;
+    row: string;
+    cell: string;
+    /** A group's heading row: the label across every column, above the group's rows. */
+    groupCell: string;
+    /** The rows that sum the body up, under a full-strength rule. */
+    foot: string;
+}, undefined, {
+    size: {
+        /** Inside a card or a pane: a detail under something larger. */
+        sm: {
+            table: string;
+            headCell: string;
+            cell: string;
+        };
+        md: {
+            table: string;
+            headCell: string;
+            cell: string;
+        };
+        /** A page's own table (a plan comparison): roomy cells, the outer columns off the edges, banded groups. */
+        lg: {
+            table: string;
+            headCell: string;
+            cell: string;
+            groupCell: string;
+        };
+    };
+    /** Column widths are set, not measured from the content (long names truncate). */
+    fixed: {
+        true: {
+            table: string;
+        };
+    };
+    /** Keeps the column headers in view while the rows scroll under them. */
+    stickyHeader: {
+        true: {
+            head: string;
+        };
+    };
+    /** The column headers are for assistive technology only (the columns explain themselves). */
+    hideHeader: {
+        true: {
+            head: string;
+        };
+    };
+    /** The table reaches the edges of its pane: the first and last columns keep a gap from them. */
+    inset: {
+        true: {
+            headCell: string;
+            cell: string;
+        };
+    };
+}, {
+    table: string;
+    caption: string;
+    head: string;
+    headRow: string;
+    headCell: string;
+    row: string;
+    cell: string;
+    /** A group's heading row: the label across every column, above the group's rows. */
+    groupCell: string;
+    /** The rows that sum the body up, under a full-strength rule. */
+    foot: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        /** Inside a card or a pane: a detail under something larger. */
+        sm: {
+            table: string;
+            headCell: string;
+            cell: string;
+        };
+        md: {
+            table: string;
+            headCell: string;
+            cell: string;
+        };
+        /** A page's own table (a plan comparison): roomy cells, the outer columns off the edges, banded groups. */
+        lg: {
+            table: string;
+            headCell: string;
+            cell: string;
+            groupCell: string;
+        };
+    };
+    /** Column widths are set, not measured from the content (long names truncate). */
+    fixed: {
+        true: {
+            table: string;
+        };
+    };
+    /** Keeps the column headers in view while the rows scroll under them. */
+    stickyHeader: {
+        true: {
+            head: string;
+        };
+    };
+    /** The column headers are for assistive technology only (the columns explain themselves). */
+    hideHeader: {
+        true: {
+            head: string;
+        };
+    };
+    /** The table reaches the edges of its pane: the first and last columns keep a gap from them. */
+    inset: {
+        true: {
+            headCell: string;
+            cell: string;
+        };
+    };
+}, {
+    table: string;
+    caption: string;
+    head: string;
+    headRow: string;
+    headCell: string;
+    row: string;
+    cell: string;
+    /** A group's heading row: the label across every column, above the group's rows. */
+    groupCell: string;
+    /** The rows that sum the body up, under a full-strength rule. */
+    foot: string;
+}>>;
+/** Rows under one heading (a plan comparison's "Models", "Teams"): one `<tbody>` with its label. */
+export interface DataTableGroup<Row> {
+    /** Unique in the table. */
+    readonly key: string;
+    readonly label: ReactNode;
+    readonly rows: readonly Row[];
+}
+interface DataTableBaseProps<Row> extends Omit<ComponentProps<"table">, "children">, Omit<VariantProps<typeof dataTable>, "fixed" | "stickyHeader" | "hideHeader" | "inset"> {
+    /** What the table holds, read first by assistive technology. */
+    readonly caption: ReactNode;
+    /** The caption is for assistive technology only (a heading above already says it). */
+    readonly hideCaption?: boolean;
+    readonly columns: readonly DataTableColumn<Row>[];
+    readonly rowKey: (row: Row) => string;
+    /** The key of the column that names each row: its cells are the row headers. */
+    readonly rowHeader: string;
+    /** Classes for a row (a failed request's danger tone), from the row. */
+    readonly rowClassName?: (row: Row) => string | undefined;
+    /** A row's tooltip, from the row. */
+    readonly rowTitle?: (row: Row) => string | undefined;
+    readonly fixed?: boolean;
+    readonly stickyHeader?: boolean;
+    readonly hideHeader?: boolean;
+    readonly inset?: boolean;
+    /** Classes for the header row's group (a sticky header's background, when it isn't the surface). */
+    readonly headClassName?: string;
+    /** Classes for each group's heading cell (a band of its own colour). */
+    readonly groupClassName?: string;
+    /**
+     * Rows under the body, in a `<tfoot>`: a total. The same columns render them, the naming column's
+     * cells are their row headers, and they are set in the medium weight.
+     */
+    readonly footer?: readonly Row[];
+}
+/** The rows, or the rows in labelled groups (each its own `<tbody>`, headed across the columns). */
+export type DataTableProps<Row> = DataTableBaseProps<Row> & ({
+    readonly rows: readonly Row[];
+    readonly groups?: never;
+} | {
+    readonly groups: readonly DataTableGroup<Row>[];
+    readonly rows?: never;
+});
+/**
+ * A table of records: a caption, column headers scoped to their columns, the naming column as row
+ * headers, and figures aligned to the end of their columns (the right in English, the left in a
+ * right-to-left language) in tabular figures. Columns say how each cell renders.
+ */
+export declare function DataTable<Row>({ caption, hideCaption, columns, rows, groups, rowKey, rowHeader, rowClassName, rowTitle, size, fixed, stickyHeader, hideHeader, inset, headClassName, groupClassName, footer, className, ...props }: DataTableProps<Row>): import("react").JSX.Element;
+export {};

package/dist/components/data-table.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, tv } from "../lib/cn.js";
+const dataTable = tv({
+    slots: {
+        table: "w-full border-collapse",
+        caption: "pb-2 text-start text-sm font-medium text-fg",
+        head: "",
+        headRow: "border-b border-border",
+        headCell: "pe-3 text-start align-bottom text-xs font-medium text-fg-subtle last:pe-0",
+        row: "border-b border-border-subtle last:border-b-0",
+        cell: "pe-3 text-start last:pe-0",
+        /** A group's heading row: the label across every column, above the group's rows. */
+        groupCell: "pt-4 pb-1.5 text-start text-xs font-medium text-fg-subtle",
+        /** The rows that sum the body up, under a full-strength rule. */
+        foot: "border-t border-border font-medium text-fg",
+    },
+    variants: {
+        size: {
+            /** Inside a card or a pane: a detail under something larger. */
+            sm: { table: "text-xs", headCell: "py-1", cell: "py-1" },
+            md: { table: "text-sm", headCell: "py-1.5", cell: "py-1.5" },
+            /** A page's own table (a plan comparison): roomy cells, the outer columns off the edges, banded groups. */
+            lg: {
+                table: "text-sm",
+                headCell: "px-4 py-3.5 first:ps-6 last:pe-6",
+                cell: "px-4 py-3.5 first:ps-6 last:pe-6",
+                groupCell: "bg-bg-subtle px-6 py-2.5",
+            },
+        },
+        /** Column widths are set, not measured from the content (long names truncate). */
+        fixed: { true: { table: "table-fixed" } },
+        /** Keeps the column headers in view while the rows scroll under them. */
+        stickyHeader: { true: { head: "sticky top-0 z-(--z-sticky) bg-surface" } },
+        /** The column headers are for assistive technology only (the columns explain themselves). */
+        hideHeader: { true: { head: "sr-only" } },
+        /** The table reaches the edges of its pane: the first and last columns keep a gap from them. */
+        inset: { true: { headCell: "first:ps-2 last:pe-2", cell: "first:ps-2 last:pe-2" } },
+    },
+    defaultVariants: { size: "md" },
+});
+/**
+ * A table of records: a caption, column headers scoped to their columns, the naming column as row
+ * headers, and figures aligned to the end of their columns (the right in English, the left in a
+ * right-to-left language) in tabular figures. Columns say how each cell renders.
+ */
+export function DataTable({ caption, hideCaption = false, columns, rows, groups, rowKey, rowHeader, rowClassName, rowTitle, size, fixed = false, stickyHeader = false, hideHeader = false, inset = false, headClassName, groupClassName, footer, className, ...props }) {
+    const styles = dataTable({ size, fixed, stickyHeader, hideHeader, inset });
+    const align = (column) => {
+        if (column.numeric === true)
+            return "text-end tabular whitespace-nowrap";
+        if (column.align === "center")
+            return "text-center";
+        return column.align === "end" ? "text-end" : undefined;
+    };
+    const renderRow = (row, total = false) => (_jsx("tr", { title: rowTitle?.(row), className: styles.row({ className: rowClassName?.(row) }), children: columns.map((column) => {
+            const Cell = column.key === rowHeader ? "th" : "td";
+            const own = typeof column.cellClassName === "function" ? column.cellClassName(row) : column.cellClassName;
+            return (_jsx(Cell, { ...(Cell === "th" ? { scope: "row" } : {}), className: styles.cell({
+                    className: cn(Cell === "th" && !total && "font-normal", column.className, align(column), own),
+                }), children: column.cell(row) }, column.key));
+        }) }, rowKey(row)));
+    return (_jsxs("table", { "data-slot": "data-table", className: styles.table({ className }), ...props, children: [_jsx("caption", { className: hideCaption ? "sr-only" : styles.caption(), children: caption }), _jsx("thead", { className: styles.head({ className: headClassName }), children: _jsx("tr", { className: styles.headRow(), children: columns.map((column) => (_jsx("th", { scope: "col", className: styles.headCell({ className: cn(column.className, align(column)) }), children: column.header }, column.key))) }) }), groups === undefined ? (_jsx("tbody", { children: rows.map((row) => renderRow(row)) })) : (groups.map((group) => (_jsxs("tbody", { children: [_jsx("tr", { children: _jsx("th", { scope: "colgroup", colSpan: columns.length, className: styles.groupCell({ className: groupClassName }), children: group.label }) }), group.rows.map((row) => renderRow(row))] }, group.key)))), footer !== undefined && footer.length > 0 && (_jsx("tfoot", { className: styles.foot(), children: footer.map((row) => renderRow(row, true)) }))] }));
+}