@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/components/schema-diagram.js

@@ -0,0 +1,226 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Background, BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Handle, Panel, Position, ReactFlow, ReactFlowProvider, useNodesInitialized, useReactFlow, useStore, } from "@xyflow/react";
+import { useEffect, useId, useMemo, useSyncExternalStore, } from "react";
+import { Add } from "reicon-react/icons/Add";
+import { Key } from "reicon-react/icons/Key";
+import { Minus } from "reicon-react/icons/Minus";
+import { Scan } from "reicon-react/icons/Scan";
+import { cn } from "../internal/classes.js";
+import { Badge } from "./badge.js";
+import { Button } from "./button.js";
+export const schemaTableStateNames = [
+    "new",
+    "changed",
+    "unchanged",
+    "linked",
+];
+export const schemaChangeNames = ["added", "changed", "removed"];
+export const schemaDiagramLayoutNames = [
+    "auto",
+    "horizontal",
+    "vertical",
+];
+const tableWidth = 264;
+const columnGap = 80;
+const rowGap = 48;
+const minZoom = 0.2;
+const maxZoom = 1.5;
+const fitOptions = { padding: 0.15, maxZoom: 1 };
+const panStep = 48;
+const tableHeight = (table) => 44 +
+    (table.fields.length === 0
+        ? 32
+        : table.fields.reduce((sum, field) => sum + (field.detail ? 48 : 32), 0));
+const stateBadge = {
+    new: { label: "New", variant: "success" },
+    changed: { label: "Changed", variant: "warning" },
+    linked: { label: "Existing", variant: "secondary" },
+    unchanged: null,
+};
+/** Referenced tables sit one column right of (or below) the tables that link to them. */
+function layout(tables, links, direction) {
+    const node = (table, x, y) => ({
+        id: table.id,
+        type: "table",
+        position: { x, y },
+        data: { table, direction },
+        ariaRole: "group",
+        ariaLabel: `${table.label} table`,
+        domAttributes: { "aria-roledescription": "table card" },
+        sourcePosition: direction === "vertical" ? Position.Bottom : Position.Right,
+        targetPosition: direction === "vertical" ? Position.Top : Position.Left,
+    });
+    if (direction === "vertical") {
+        const ordered = [];
+        const seen = new Set();
+        const add = (table) => {
+            if (table && !seen.has(table.id)) {
+                ordered.push(table);
+                seen.add(table.id);
+            }
+        };
+        for (const link of links)
+            for (const id of [link.source, link.target])
+                add(tables.find((table) => table.id === id));
+        for (const table of tables)
+            add(table);
+        let y = 0;
+        return ordered.map((table) => {
+            const placed = node(table, 0, y);
+            y += tableHeight(table) + rowGap;
+            return placed;
+        });
+    }
+    const depth = new Map(tables.map((table) => [table.id, 0]));
+    for (let pass = 0; pass < tables.length; pass++) {
+        let moved = false;
+        for (const link of links) {
+            const next = (depth.get(link.source) ?? 0) + 1;
+            if (link.source !== link.target &&
+                next > (depth.get(link.target) ?? 0) &&
+                next < tables.length) {
+                depth.set(link.target, next);
+                moved = true;
+            }
+        }
+        if (!moved)
+            break;
+    }
+    const columns = new Map();
+    return tables.map((table) => {
+        const column = depth.get(table.id) ?? 0;
+        const y = columns.get(column) ?? 0;
+        columns.set(column, y + tableHeight(table) + rowGap);
+        return node(table, column * (tableWidth + columnGap), y);
+    });
+}
+function TableCard({ data: { table, direction } }) {
+    const badge = stateBadge[table.state];
+    const vertical = direction === "vertical";
+    return (_jsxs("section", { "data-slot": "schema-table", "data-state": table.state, className: "sprout-schema-table", children: [_jsx(Handle, { type: "target", position: vertical ? Position.Top : Position.Left, isConnectable: false, className: "sprout-schema-handle sprout-schema-handle-target" }), _jsxs("header", { className: "sprout-schema-table-header", children: [_jsx("h3", { className: "sprout-schema-table-title", title: table.label, children: table.label }), badge && _jsx(Badge, { variant: badge.variant, children: badge.label })] }), table.fields.length === 0 ? (_jsx("p", { className: "sprout-schema-table-empty", children: table.state === "linked" ? "Fields not shown" : "No fields" })) : (_jsx("ul", { className: "sprout-schema-fields", children: table.fields.map((field) => (_jsxs("li", { "data-slot": "schema-field", "data-change": field.change, className: "sprout-schema-field", children: [_jsxs("div", { className: "sprout-schema-field-line", children: [_jsx("span", { className: "sprout-schema-field-key", children: field.unique && (_jsx(Key, { size: 11, "aria-label": "Unique", role: "img" })) }), _jsxs("span", { className: "sprout-schema-field-name", title: field.label, children: [field.label, field.required && (_jsxs("span", { className: "sprout-schema-field-required", children: [_jsx("span", { "aria-hidden": "true", children: " *" }), _jsx("span", { className: "sprout-schema-sr-only", children: ", required" })] }))] }), _jsx("span", { className: "sprout-schema-field-type", children: field.type }), field.change && (_jsxs("span", { className: "sprout-schema-sr-only", children: [", ", field.change] }))] }), field.detail && (_jsx("p", { className: "sprout-schema-field-detail", title: field.detail, children: field.detail })), _jsx(Handle, { id: field.id, type: "source", position: vertical ? Position.Bottom : Position.Right, isConnectable: false, className: "sprout-schema-handle" })] }, field.id))) }))] }));
+}
+function LinkLine({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, }) {
+    const [path, labelX, labelY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+        borderRadius: 12,
+        offset: 24,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { id: id, path: path }), data?.label && (_jsx(EdgeLabelRenderer, { children: _jsx("span", { "aria-hidden": "true", className: "nodrag nopan sprout-schema-link-label", style: {
+                        transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+                    }, children: data.label }) }))] }));
+}
+const nodeTypes = { table: TableCard };
+const edgeTypes = { link: LinkLine };
+const mobileQuery = "(max-width: 767px)";
+const motionQuery = "(prefers-reduced-motion: reduce)";
+function subscribeMobile(callback) {
+    const media = window.matchMedia(mobileQuery);
+    media.addEventListener("change", callback);
+    return () => media.removeEventListener("change", callback);
+}
+function useViewportMobile() {
+    return useSyncExternalStore(subscribeMobile, () => window.matchMedia(mobileQuery).matches, () => false);
+}
+const motion = (ms) => typeof window !== "undefined" && window.matchMedia(motionQuery).matches
+    ? 0
+    : ms;
+// The canvas panel animates open, so the first fit sees a narrower pane than the final one.
+function FitOnResize({ nodes }) {
+    const { fitView } = useReactFlow();
+    const width = useStore((state) => state.width);
+    const height = useStore((state) => state.height);
+    const measured = useNodesInitialized();
+    useEffect(() => {
+        if (!measured)
+            return;
+        const frame = requestAnimationFrame(() => void fitView(fitOptions));
+        return () => cancelAnimationFrame(frame);
+    }, [fitView, width, height, measured, nodes]);
+    return null;
+}
+function ZoomControls({ position, }) {
+    const { zoomIn, zoomOut, fitView } = useReactFlow();
+    const zoom = useStore((state) => state.transform[2]);
+    return (_jsxs(Panel, { position: position, className: "sprout-schema-controls", "data-slot": "schema-diagram-controls", role: "toolbar", "aria-label": "Diagram view", "aria-orientation": "vertical", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", title: "Zoom in", disabled: zoom >= maxZoom, onClick: () => void zoomIn({ duration: motion(160) }), children: _jsx(Add, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", title: "Zoom out", disabled: zoom <= minZoom, onClick: () => void zoomOut({ duration: motion(160) }), children: _jsx(Minus, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Fit to view", title: "Fit to view", onClick: () => void fitView({ ...fitOptions, duration: motion(180) }), children: _jsx(Scan, { size: 16, "aria-hidden": "true" }) })] }));
+}
+function useKeyboardView() {
+    const { getViewport, setViewport, zoomIn, zoomOut, fitView } = useReactFlow();
+    return (event) => {
+        const target = event.target;
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        if (target !== event.currentTarget &&
+            !target.classList.contains("react-flow__node"))
+            return;
+        const step = panStep * (event.shiftKey ? 4 : 1);
+        const pan = {
+            ArrowLeft: [step, 0],
+            ArrowRight: [-step, 0],
+            ArrowUp: [0, step],
+            ArrowDown: [0, -step],
+        };
+        const move = pan[event.key];
+        if (move) {
+            const { x, y, zoom } = getViewport();
+            void setViewport({ x: x + move[0], y: y + move[1], zoom }, { duration: motion(120) });
+        }
+        else if (event.key === "+" || event.key === "=") {
+            void zoomIn({ duration: motion(160) });
+        }
+        else if (event.key === "-" || event.key === "_") {
+            void zoomOut({ duration: motion(160) });
+        }
+        else if (event.key === "0") {
+            void fitView({ ...fitOptions, duration: motion(180) });
+        }
+        else
+            return;
+        event.preventDefault();
+    };
+}
+const keyboardHint = "Arrow keys pan, plus and minus zoom, and 0 fits the diagram. Tab moves between tables.";
+function DiagramFlow({ nodes, edges, direction, label, hintId, }) {
+    const onKeyDown = useKeyboardView();
+    return (_jsxs(ReactFlow, { className: "sprout-schema-flow", "data-slot": "schema-diagram-viewport", "aria-label": label, "aria-describedby": hintId, tabIndex: 0, onKeyDown: onKeyDown, nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, fitView: true, fitViewOptions: fitOptions, minZoom: minZoom, maxZoom: maxZoom, nodesConnectable: false, elementsSelectable: false, edgesFocusable: false, ariaLabelConfig: {
+            "node.a11yDescription.default": keyboardHint,
+            "node.a11yDescription.keyboardDisabled": keyboardHint,
+        }, proOptions: { hideAttribution: true }, children: [_jsx(Background, { gap: 16, size: 1 }), _jsx(FitOnResize, { nodes: nodes }), _jsx(ZoomControls, { position: direction === "vertical" ? "top-right" : "bottom-right" })] }));
+}
+/**
+ * A pan-and-zoom diagram of tables, their fields, and the links between them,
+ * with proposed changes marked on each table and field.
+ */
+export function SchemaDiagram({ tables, links, label, layout: layoutName = "auto", className, ...props }) {
+    const mobile = useViewportMobile();
+    const direction = layoutName === "auto" ? (mobile ? "vertical" : "horizontal") : layoutName;
+    const hintId = useId();
+    const nodes = useMemo(() => layout(tables, links, direction), [tables, links, direction]);
+    const edges = useMemo(() => {
+        const names = new Map(tables.map((table) => [table.id, table]));
+        return links.map((link) => {
+            const source = names.get(link.source);
+            const field = source?.fields.find((candidate) => candidate.id === link.field);
+            const from = `${source?.label ?? link.source}${field ? ` ${field.label}` : ""}`;
+            return {
+                id: link.id,
+                type: "link",
+                source: link.source,
+                sourceHandle: link.field,
+                target: link.target,
+                ariaLabel: `${from} links to ${names.get(link.target)?.label ?? link.target}: ${link.label}`,
+                data: { label: link.label },
+            };
+        });
+    }, [tables, links]);
+    return (_jsxs("div", { ...props, role: "figure", "aria-label": label, "data-slot": "schema-diagram", "data-layout": direction, className: cn("sprout-schema-diagram", className), children: [_jsx("p", { id: hintId, className: "sprout-schema-sr-only", children: keyboardHint }), _jsx(ReactFlowProvider, { children: _jsx(DiagramFlow, { nodes: nodes, edges: edges, direction: direction, label: label, hintId: hintId }) }, direction)] }));
+}
+/** Explains the change colors, the unique key, and the required mark. */
+export function SchemaLegend({ className, ...props }) {
+    return (_jsxs("ul", { "aria-label": "Legend", "data-slot": "schema-legend", ...props, className: cn("sprout-schema-legend", className), children: [schemaChangeNames.map((change) => (_jsxs("li", { className: "sprout-schema-legend-item", children: [_jsx("span", { "aria-hidden": "true", "data-change": change, className: "sprout-schema-legend-swatch" }), change[0].toUpperCase() + change.slice(1)] }, change))), _jsxs("li", { className: "sprout-schema-legend-item", children: [_jsx(Key, { size: 11, "aria-hidden": "true" }), "Unique"] }), _jsx("li", { className: "sprout-schema-legend-item", children: "* Required" })] }));
+}

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,22 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+export declare const scrollAreaSizeNames: readonly ["auto", "sm", "md"];
+export declare const scrollAreaVariantNames: readonly ["plain", "table"];
+export declare const scrollAreaOrientationNames: readonly ["vertical", "horizontal", "both"];
+export type ScrollAreaSize = (typeof scrollAreaSizeNames)[number];
+export type ScrollAreaVariant = (typeof scrollAreaVariantNames)[number];
+export type ScrollAreaOrientation = (typeof scrollAreaOrientationNames)[number];
+export interface ScrollAreaProps extends BaseScrollArea.Root.Props {
+    /** `"sm"` is 10rem tall, `"md"` is 16rem tall. `"auto"` follows its content or your className. */
+    size?: ScrollAreaSize;
+    /** `"table"` adds a bordered surface, caps the height at 60dvh, and makes the viewport a labeled region. */
+    variant?: ScrollAreaVariant;
+    /** Which scrollbars to draw. Each one appears only while its axis overflows. */
+    orientation?: ScrollAreaOrientation;
+    /** Accessible name for the scrolling viewport. */
+    viewportLabel?: string | undefined;
+}
+/** A scrolling region with thin, theme-aware scrollbars that keeps native keyboard and wheel scrolling. */
+export declare function ScrollArea({ className, children, size, variant, orientation, viewportLabel, ...props }: ScrollAreaProps): import("react").JSX.Element;
+export type ScrollBarProps = BaseScrollArea.Scrollbar.Props;
+/** One scrollbar track and thumb. `ScrollArea` draws these for you from `orientation`. */
+export declare function ScrollBar({ className, orientation, ...props }: ScrollBarProps): import("react").JSX.Element;

package/dist/components/scroll-area.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { stateClassName } from "../internal/classes.js";
+export const scrollAreaSizeNames = ["auto", "sm", "md"];
+export const scrollAreaVariantNames = ["plain", "table"];
+export const scrollAreaOrientationNames = [
+    "vertical",
+    "horizontal",
+    "both",
+];
+/** A scrolling region with thin, theme-aware scrollbars that keeps native keyboard and wheel scrolling. */
+export function ScrollArea({ className, children, size = "auto", variant = "plain", orientation = "vertical", viewportLabel, ...props }) {
+    return (_jsxs(BaseScrollArea.Root, { "data-slot": "scroll-area", "data-size": size, "data-variant": variant, className: stateClassName("sprout-scroll-area", className), ...props, children: [_jsx(BaseScrollArea.Viewport, { "data-slot": "scroll-area-viewport", role: variant === "table" ? "region" : undefined, "aria-label": viewportLabel, className: "sprout-scroll-area-viewport", children: children }), orientation !== "horizontal" && _jsx(ScrollBar, {}), orientation !== "vertical" && _jsx(ScrollBar, { orientation: "horizontal" }), _jsx(BaseScrollArea.Corner, { "data-slot": "scroll-area-corner", className: "sprout-scroll-area-corner" })] }));
+}
+/** One scrollbar track and thumb. `ScrollArea` draws these for you from `orientation`. */
+export function ScrollBar({ className, orientation = "vertical", ...props }) {
+    return (_jsx(BaseScrollArea.Scrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: stateClassName("sprout-scroll-area-scrollbar", className), ...props, children: _jsx(BaseScrollArea.Thumb, { "data-slot": "scroll-area-thumb", className: "sprout-scroll-area-thumb" }) }));
+}

package/dist/components/search-dialog.d.ts

@@ -0,0 +1,103 @@
+import { type ReactNode, type Ref } from "react";
+import { type DialogContentProps } from "./dialog.js";
+export interface SearchDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Visually hidden dialog title. It also names the results combobox. */
+    title: string;
+    /** Visually hidden description of what the search covers. */
+    description: string;
+    className?: string;
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: DialogContentProps["container"];
+    children: ReactNode;
+}
+/**
+ * A wide search palette pinned near the top of the viewport. You filter and
+ * group results yourself; arrow keys wrap and Enter opens the active item.
+ */
+export declare function SearchDialog({ open, onOpenChange, title, description, className, container, children, }: SearchDialogProps): import("react").JSX.Element;
+export interface SearchInputProps {
+    ref?: Ref<HTMLInputElement>;
+    value: string;
+    onValueChange: (value: string) => void;
+    placeholder: string;
+    /** Accessible name of the search field. */
+    label: string;
+    /** Accessible name of the trailing close button. */
+    closeLabel?: string;
+}
+/** The search field with a leading magnifier and a trailing close button. */
+export declare function SearchInput({ ref, value, onValueChange, placeholder, label, closeLabel, }: SearchInputProps): import("react").JSX.Element;
+export interface SearchFiltersProps {
+    /** Accessible name of the filter group. */
+    label: string;
+    children: ReactNode;
+}
+/** A row of toggle filters under the input. It scrolls sideways when narrow. */
+export declare function SearchFilters({ label, children }: SearchFiltersProps): import("react").JSX.Element;
+export interface SearchFilterProps {
+    pressed: boolean;
+    onPressedChange: (pressed: boolean) => void;
+    icon?: ReactNode;
+    children: ReactNode;
+}
+/** A pressable filter chip. */
+export declare function SearchFilter({ pressed, onPressedChange, icon, children, }: SearchFilterProps): import("react").JSX.Element;
+export interface SearchListProps {
+    /** Accessible name of the results listbox. */
+    label: string;
+    children: ReactNode;
+}
+/** The scrolling results area. It keeps a steady height so typing does not resize the dialog. */
+export declare function SearchList({ label, children }: SearchListProps): import("react").JSX.Element;
+export interface SearchGroupProps {
+    heading: string;
+    /** Shown as a badge after the heading. A group with a count of `0` is not rendered. */
+    count: number;
+    children: ReactNode;
+}
+/** Results under a heading with a count. Groups after the first get a dashed divider. */
+export declare function SearchGroup({ heading, count, children }: SearchGroupProps): import("react").JSX.Element | null;
+export interface SearchItemIconProps {
+    children: ReactNode;
+}
+/** A muted icon tile for an item's `media`. */
+export declare function SearchItemIcon({ children }: SearchItemIconProps): import("react").JSX.Element;
+export interface SearchItemProps {
+    /** Unique within the dialog. */
+    value: string;
+    onSelect: () => void;
+    /** Leading icon or avatar, centered in a 28px box. */
+    media: ReactNode;
+    title: string;
+    /** Muted text after the title, separated by a dot. */
+    meta?: string | undefined;
+    /** A second muted line. */
+    detail?: string | undefined;
+    /** Trailing hint such as a shortcut. It swaps for the Enter key while active. */
+    trailing?: ReactNode;
+}
+/** One result. The active item shows an Enter key hint. */
+export declare function SearchItem({ value, onSelect, media, title, meta, detail, trailing, }: SearchItemProps): import("react").JSX.Element;
+export interface SearchEmptyProps {
+    /** One to three icons shown as fanned tiles over a faint grid. */
+    media?: ReactNode;
+    title: string;
+    description: string;
+    /** A recovery action such as Clear search. */
+    action?: ReactNode;
+}
+/** Fills the list when nothing matches and is announced as a status. */
+export declare function SearchEmpty({ media, title, description, action, }: SearchEmptyProps): import("react").JSX.Element;
+export interface SearchFooterProps {
+    children: ReactNode;
+}
+/** A tinted strip of keyboard hints. Hidden below 640px, where there is no keyboard to hint at. */
+export declare function SearchFooter({ children }: SearchFooterProps): import("react").JSX.Element;
+export interface SearchHintProps {
+    keys: string;
+    children: ReactNode;
+}
+/** A key and what it does. */
+export declare function SearchHint({ keys, children }: SearchHintProps): import("react").JSX.Element;

package/dist/components/search-dialog.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { Children, Fragment, isValidElement, } from "react";
+import { X } from "reicon-react/icons/X";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { Command, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, } from "./dialog.js";
+/**
+ * A wide search palette pinned near the top of the viewport. You filter and
+ * group results yourself; arrow keys wrap and Enter opens the active item.
+ */
+export function SearchDialog({ open, onOpenChange, title, description, className, container, children, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => onOpenChange(next), children: _jsxs(DialogContent, { "data-slot": "search-dialog", placement: "top", showCloseButton: false, container: container, className: cn("sprout-search-dialog", className), children: [_jsx(DialogTitle, { className: "sprout-command-sr-only", children: title }), _jsx(DialogDescription, { className: "sprout-command-sr-only", children: description }), _jsx(Command, { shouldFilter: false, loop: true, label: title, className: "sprout-search-command", children: children })] }) }));
+}
+/** The search field with a leading magnifier and a trailing close button. */
+export function SearchInput({ ref, value, onValueChange, placeholder, label, closeLabel = "Close search", }) {
+    return (_jsxs("div", { "data-slot": "search-input", className: "sprout-search-input", children: [_jsx(CommandInput, { ref: ref, value: value, onValueChange: onValueChange, placeholder: placeholder, "aria-label": label }), _jsx(DialogClose, { render: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": closeLabel }), children: _jsx(X, { size: 16, "aria-hidden": "true" }) })] }));
+}
+/** A row of toggle filters under the input. It scrolls sideways when narrow. */
+export function SearchFilters({ label, children }) {
+    return (_jsx("div", { "data-slot": "search-filters", role: "group", "aria-label": label, className: "sprout-search-filters", children: children }));
+}
+/** A pressable filter chip. */
+export function SearchFilter({ pressed, onPressedChange, icon, children, }) {
+    return (_jsxs(Toggle, { "data-slot": "search-filter", pressed: pressed, onPressedChange: (next) => onPressedChange(next), className: "sprout-search-filter", children: [icon, children] }));
+}
+/** The scrolling results area. It keeps a steady height so typing does not resize the dialog. */
+export function SearchList({ label, children }) {
+    return (_jsx(CommandList, { "aria-label": label, className: "sprout-search-list", children: children }));
+}
+/** Results under a heading with a count. Groups after the first get a dashed divider. */
+export function SearchGroup({ heading, count, children }) {
+    if (count === 0)
+        return null;
+    return (_jsx(CommandGroup, { className: "sprout-search-group", heading: _jsxs("span", { className: "sprout-search-group-heading", children: [heading, " ", _jsx("span", { "data-slot": "search-group-count", className: "sprout-search-group-count", children: count })] }), children: children }));
+}
+/** A muted icon tile for an item's `media`. */
+export function SearchItemIcon({ children }) {
+    return (_jsx("span", { "data-slot": "search-item-icon", className: "sprout-search-item-icon", children: children }));
+}
+/** One result. The active item shows an Enter key hint. */
+export function SearchItem({ value, onSelect, media, title, meta, detail, trailing, }) {
+    return (_jsxs(CommandItem, { value: value, onSelect: () => onSelect(), className: "sprout-search-item", children: [_jsx("span", { "data-slot": "search-item-media", className: "sprout-search-item-media", children: media }), _jsxs("span", { className: "sprout-search-item-text", children: [_jsxs("span", { className: "sprout-search-item-line", children: [_jsx("span", { "data-slot": "search-item-title", className: "sprout-search-item-title", children: title }), meta && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "sprout-search-item-dot", children: "\u00B7" }), _jsx("span", { "data-slot": "search-item-meta", className: "sprout-search-item-meta", children: meta })] }))] }), detail && (_jsx("span", { "data-slot": "search-item-detail", className: "sprout-search-item-detail", children: detail }))] }), trailing && (_jsx("span", { "data-slot": "search-item-trailing", className: "sprout-search-item-trailing", children: trailing })), _jsx("kbd", { "aria-hidden": "true", className: "sprout-search-kbd sprout-search-item-enter", children: "\u21B5" })] }));
+}
+function tiles(media) {
+    const nodes = isValidElement(media) && media.type === Fragment
+        ? media.props.children
+        : media;
+    return Children.toArray(nodes).map((node, index) => (_jsx("span", { "data-slot": "search-empty-tile", className: "sprout-search-empty-tile", children: node }, index)));
+}
+/** Fills the list when nothing matches and is announced as a status. */
+export function SearchEmpty({ media, title, description, action, }) {
+    return (_jsxs("div", { "data-slot": "search-empty", role: "status", className: "sprout-search-empty", children: [media && (_jsx("div", { "aria-hidden": "true", className: "sprout-search-empty-media", children: _jsx("span", { className: "sprout-search-empty-tiles", children: tiles(media) }) })), _jsxs("div", { className: "sprout-search-empty-text", children: [_jsx("p", { className: "sprout-search-empty-title", children: title }), _jsx("p", { className: "sprout-search-empty-description", children: description })] }), action] }));
+}
+/** A tinted strip of keyboard hints. Hidden below 640px, where there is no keyboard to hint at. */
+export function SearchFooter({ children }) {
+    return (_jsx("footer", { "data-slot": "search-footer", className: "sprout-search-footer", children: children }));
+}
+/** A key and what it does. */
+export function SearchHint({ keys, children }) {
+    return (_jsxs("span", { "data-slot": "search-hint", className: "sprout-search-hint", children: [_jsx("kbd", { className: "sprout-search-kbd", children: keys }), children] }));
+}

package/dist/components/search-field.d.ts

@@ -0,0 +1,17 @@
+export interface SearchFieldProps {
+    /** Accessible name of the input. It is also the placeholder when none is given. */
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string | undefined;
+    maxLength?: number | undefined;
+    id?: string | undefined;
+    /** Classes for the group. It is full width up to 24rem by default. */
+    className?: string | undefined;
+}
+/**
+ * An `InputGroup` preset for search: a leading magnifier and a clear button
+ * that appears once there is text. Clear and Escape empty the value and keep
+ * focus in the input. A disabled ancestor `fieldset` disables both controls.
+ */
+export declare function SearchField({ label, value, onChange, placeholder, maxLength, id, className, }: SearchFieldProps): import("react").JSX.Element;

package/dist/components/search-field.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Search } from "reicon-react/icons/Search";
+import { X } from "reicon-react/icons/X";
+import { cn } from "../internal/classes.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "./input-group.js";
+/**
+ * An `InputGroup` preset for search: a leading magnifier and a clear button
+ * that appears once there is text. Clear and Escape empty the value and keep
+ * focus in the input. A disabled ancestor `fieldset` disables both controls.
+ */
+export function SearchField({ label, value, onChange, placeholder, maxLength, id, className, }) {
+    const input = useRef(null);
+    // The first Escape clears the text; with no text it reaches popovers and dialogs.
+    const onKeyDown = (event) => {
+        if (event.key !== "Escape" || !value)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        onChange("");
+    };
+    return (_jsxs(InputGroup, { "data-slot": "search-field", className: cn("sprout-search-field", className), children: [_jsx(InputGroupAddon, { children: _jsx(Search, { size: 16, "aria-hidden": "true" }) }), _jsx(InputGroupInput, { ref: input, id: id, type: "search", "aria-label": label, maxLength: maxLength, value: value, placeholder: placeholder ?? label, autoComplete: "off", spellCheck: false, onChange: (event) => onChange(event.currentTarget.value), onKeyDown: onKeyDown }), value && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { "data-slot": "search-field-clear", size: "icon-xs", "aria-label": "Clear search", className: "sprout-search-field-clear", onClick: () => {
+                        onChange("");
+                        input.current?.focus();
+                    }, children: _jsx(X, { size: 14, "aria-hidden": "true" }) }) }))] }));
+}

package/dist/components/select.d.ts

@@ -0,0 +1,57 @@
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+export declare const selectTriggerSizeNames: readonly ["default", "sm", "calendar"];
+export declare const selectTriggerWidthNames: readonly ["fit", "full"];
+export type SelectTriggerSize = (typeof selectTriggerSizeNames)[number];
+export type SelectTriggerWidth = (typeof selectTriggerWidthNames)[number];
+export type SelectProps<Value = unknown, Multiple extends boolean | undefined = false> = SelectPrimitive.Root.Props<Value, Multiple>;
+/**
+ * Holds the value and open state. It takes every Base UI select root prop,
+ * including `items`, `value`, `defaultValue`, `onValueChange`, `disabled`,
+ * `required`, and `name`.
+ */
+export declare const Select: typeof SelectPrimitive.Root;
+export type SelectGroupProps = SelectPrimitive.Group.Props;
+export declare function SelectGroup({ className, ...props }: SelectGroupProps): import("react").JSX.Element;
+export type SelectValueProps = SelectPrimitive.Value.Props;
+/**
+ * Shows the chosen item. Pass `placeholder` for the empty state, or children
+ * to show a custom label such as a name looked up from the value.
+ */
+export declare function SelectValue({ className, ...props }: SelectValueProps): import("react").JSX.Element;
+export interface SelectTriggerProps extends SelectPrimitive.Trigger.Props {
+    /**
+     * `default` is 32px for forms. `sm` is 28px for toolbars, filters, table
+     * rows, and inline sentences. `calendar` is a 32px control with small text
+     * for calendar headers.
+     */
+    size?: SelectTriggerSize;
+    /** `fit` sizes to the value. `full` fills the parent, as in form fields. */
+    width?: SelectTriggerWidth;
+}
+export declare function SelectTrigger({ className, size, width, children, ...rest }: SelectTriggerProps): import("react").JSX.Element;
+type PositionerProps = Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+export interface SelectContentProps extends SelectPrimitive.Popup.Props, PositionerProps {
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: SelectPrimitive.Portal.Props["container"];
+}
+/**
+ * The list surface. It renders its own portal, positioner, list, and scroll
+ * arrows. By default the chosen item lines up over the trigger; pass
+ * `alignItemWithTrigger={false}` to open below it instead.
+ */
+export declare function SelectContent({ side, sideOffset, align, alignOffset, alignItemWithTrigger, collisionPadding, collisionAvoidance, sticky, positionMethod, container, className, children, ...props }: SelectContentProps): import("react").JSX.Element;
+export type SelectLabelProps = SelectPrimitive.GroupLabel.Props;
+export declare function SelectLabel({ className, ...props }: SelectLabelProps): import("react").JSX.Element;
+export type SelectItemProps = SelectPrimitive.Item.Props;
+/**
+ * One choice. Children may hold an icon, rich content, or plain text. Long
+ * text wraps instead of being cut off.
+ */
+export declare function SelectItem({ className, children, ...props }: SelectItemProps): import("react").JSX.Element;
+export type SelectSeparatorProps = SelectPrimitive.Separator.Props;
+export declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react").JSX.Element;
+export type SelectScrollUpButtonProps = SelectPrimitive.ScrollUpArrow.Props;
+export declare function SelectScrollUpButton({ className, ...props }: SelectScrollUpButtonProps): import("react").JSX.Element;
+export type SelectScrollDownButtonProps = SelectPrimitive.ScrollDownArrow.Props;
+export declare function SelectScrollDownButton({ className, ...props }: SelectScrollDownButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/select.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { Check } from "reicon-react/icons/Check";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { ChevronUp } from "reicon-react/icons/ChevronUp";
+import { cn, stateClassName } from "../internal/classes.js";
+import { useFieldControl } from "./field.js";
+export const selectTriggerSizeNames = ["default", "sm", "calendar"];
+export const selectTriggerWidthNames = ["fit", "full"];
+/**
+ * Holds the value and open state. It takes every Base UI select root prop,
+ * including `items`, `value`, `defaultValue`, `onValueChange`, `disabled`,
+ * `required`, and `name`.
+ */
+export const Select = SelectPrimitive.Root;
+export function SelectGroup({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props, className: stateClassName("sprout-select-group", className) }));
+}
+/**
+ * Shows the chosen item. Pass `placeholder` for the empty state, or children
+ * to show a custom label such as a name looked up from the value.
+ */
+export function SelectValue({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props, className: stateClassName("sprout-select-value", className) }));
+}
+export function SelectTrigger({ className, size = "default", width = "fit", children, ...rest }) {
+    const props = useFieldControl(rest);
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, "data-width": width, ...props, className: stateClassName(cn("sprout-select-trigger", `sprout-select-trigger-${size}`, `sprout-select-trigger-${width}`), className), children: [children, _jsx(SelectPrimitive.Icon, { className: "sprout-select-icon", children: _jsx(ChevronDown, { "aria-hidden": "true" }) })] }));
+}
+/**
+ * The list surface. It renders its own portal, positioner, list, and scroll
+ * arrows. By default the chosen item lines up over the trigger; pass
+ * `alignItemWithTrigger={false}` to open below it instead.
+ */
+export function SelectContent({ side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, container, className, children, ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { container: container, children: _jsx(SelectPrimitive.Positioner, { className: "sprout-select-positioner", side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, ...props, className: stateClassName("sprout-select-content", className), children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { className: "sprout-select-list", children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
+}
+export function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", ...props, className: stateClassName("sprout-select-label", className) }));
+}
+/**
+ * One choice. Children may hold an icon, rich content, or plain text. Long
+ * text wraps instead of being cut off.
+ */
+export function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", ...props, className: stateClassName("sprout-select-item", className), children: [_jsx(SelectPrimitive.ItemText, { className: "sprout-select-item-text", children: children }), _jsx(SelectPrimitive.ItemIndicator, { className: "sprout-select-item-indicator", children: _jsx(Check, { "aria-hidden": "true" }) })] }));
+}
+export function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", ...props, className: stateClassName("sprout-select-separator", className) }));
+}
+export function SelectScrollUpButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpArrow, { "data-slot": "select-scroll-up-button", ...props, className: stateClassName("sprout-select-scroll-button sprout-select-scroll-up", className), children: _jsx(ChevronUp, { "aria-hidden": "true" }) }));
+}
+export function SelectScrollDownButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", ...props, className: stateClassName("sprout-select-scroll-button sprout-select-scroll-down", className), children: _jsx(ChevronDown, { "aria-hidden": "true" }) }));
+}

package/dist/components/selection-slot.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentProps, type ReactNode } from "react";
+export interface SelectionSlotProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Shows `selection` in place of `children`. */
+    active: boolean;
+    /** The toolbar for the current selection, such as a count and bulk actions. */
+    selection: ReactNode;
+    /** The tools shown while nothing is selected, such as search and filters. */
+    children: ReactNode;
+}
+/**
+ * Swaps a toolbar for a selection toolbar in the same place. Both share one
+ * grid cell, so the row keeps the height of the taller one and nothing below
+ * it moves. The hidden tools stay mounted, so their state survives, but are
+ * inert. Focus moves into the selection when it came from the hidden tools,
+ * and returns to where it was when the selection closes. If that element is
+ * gone, focus that was in the selection goes to the first tool.
+ */
+export declare function SelectionSlot({ active, selection, children, className, ...props }: SelectionSlotProps): import("react").JSX.Element;