@tulipfarm/sprout 0.3.1 → 0.5.0

package/dist/components/schema-diagram.js

@@ -1,51 +1,39 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Background, BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Handle, Position, ReactFlow, ReactFlowProvider, } from "@xyflow/react";
-import { useId, useMemo } from "react";
-import { Key } from "reicon-react/icons/Key";
-import { cn } from "../internal/classes.js";
-import { FitOnResize, flowMaxZoom as maxZoom, flowMinZoom as minZoom, useKeyboardView, useViewportMobile, ZoomControls, } from "../internal/flow.js";
-import { Badge } from "./badge.js";
-export const schemaTableStateNames = [
-    "new",
-    "changed",
-    "unchanged",
-    "linked",
-];
-export const schemaChangeNames = ["added", "changed", "removed"];
-export const schemaDiagramLayoutNames = [
-    "auto",
-    "horizontal",
-    "vertical",
-];
+import { Background, BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Handle, Position, ReactFlow, ReactFlowProvider, } from '@xyflow/react';
+import { useId, useMemo } from 'react';
+import { Key } from 'reicon-react/icons/Key';
+import { cn } from '../internal/classes.js';
+import { FitOnResize, flowMaxZoom as maxZoom, flowMinZoom as minZoom, useKeyboardView, useViewportMobile, ZoomControls, } from '../internal/flow.js';
+import { Badge } from './badge.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 fitOptions = { padding: 0.15, maxZoom: 1 };
-const tableHeight = (table) => 44 +
-    (table.fields.length === 0
-        ? 32
-        : table.fields.reduce((sum, field) => sum + (field.detail ? 48 : 32), 0));
+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" },
+    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",
+        type: 'table',
         position: { x, y },
         data: { table, direction },
-        ariaRole: "group",
+        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,
+        domAttributes: { 'aria-roledescription': 'table card' },
+        sourcePosition: direction === 'vertical' ? Position.Bottom : Position.Right,
+        targetPosition: direction === 'vertical' ? Position.Top : Position.Left,
     });
-    if (direction === "vertical") {
+    if (direction === 'vertical') {
         const ordered = [];
         const seen = new Set();
         const add = (table) => {
@@ -56,24 +44,22 @@ function layout(tables, links, direction) {
         };
         for (const link of links)
             for (const id of [link.source, link.target])
-                add(tables.find((table) => table.id === id));
+                add(tables.find(table => table.id === id));
         for (const table of tables)
             add(table);
         let y = 0;
-        return ordered.map((table) => {
+        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]));
+    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) {
+            if (link.source !== link.target && next > (depth.get(link.target) ?? 0) && next < tables.length) {
                 depth.set(link.target, next);
                 moved = true;
             }
@@ -82,7 +68,7 @@ function layout(tables, links, direction) {
             break;
     }
     const columns = new Map();
-    return tables.map((table) => {
+    return tables.map(table => {
         const column = depth.get(table.id) ?? 0;
         const y = columns.get(column) ?? 0;
         columns.set(column, y + tableHeight(table) + rowGap);
@@ -91,8 +77,8 @@ function layout(tables, links, direction) {
 }
 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))) }))] }));
+    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({
@@ -111,32 +97,32 @@ function LinkLine({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targ
 }
 const nodeTypes = { table: TableCard };
 const edgeTypes = { link: LinkLine };
-const keyboardHint = "Arrow keys pan, plus and minus zoom, and 0 fits the diagram. Tab moves between tables.";
+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(fitOptions);
     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, fit: fitOptions }), _jsx(ZoomControls, { position: direction === "vertical" ? "top-right" : "bottom-right", fit: fitOptions, className: "sprout-schema-controls", slot: "schema-diagram-controls" })] }));
+            'node.a11yDescription.default': keyboardHint,
+            'node.a11yDescription.keyboardDisabled': keyboardHint,
+        }, proOptions: { hideAttribution: true }, children: [_jsx(Background, { gap: 16, size: 1 }), _jsx(FitOnResize, { nodes: nodes, fit: fitOptions }), _jsx(ZoomControls, { position: direction === 'vertical' ? 'top-right' : 'bottom-right', fit: fitOptions, className: "sprout-schema-controls", slot: "schema-diagram-controls" })] }));
 }
 /**
  * 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 }) {
+export function SchemaDiagram({ tables, links, label, layout: layoutName = 'auto', className, ...props }) {
     const mobile = useViewportMobile();
-    const direction = layoutName === "auto" ? (mobile ? "vertical" : "horizontal") : layoutName;
+    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]));
+        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}` : ""}`;
+            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",
+                type: 'link',
                 source: link.source,
                 sourceHandle: link.field,
                 target: link.target,
@@ -145,9 +131,9 @@ export function SchemaDiagram({ tables, links, label, layout: layoutName = "auto
             };
         });
     }, [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)] }));
+    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" })] }));
+    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

@@ -1,12 +1,12 @@
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-export declare const scrollAreaSizeNames: readonly ["auto", "sm", "md"];
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+export declare const scrollAreaSizeNames: readonly ["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. */
+    /** `"sm"` is 10rem tall, `"md"` is 16rem tall. Leave it out to follow the 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;

package/dist/components/scroll-area.js

@@ -1,19 +1,15 @@
-"use client";
+'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",
-];
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+import { stateClassName } from '../internal/classes.js';
+export const scrollAreaSizeNames = ['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" })] }));
+export function ScrollArea({ className, children, size, 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" }) }));
+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

@@ -1,5 +1,5 @@
-import { type ReactNode, type Ref } from "react";
-import { type DialogContentProps } from "./dialog.js";
+import { type ReactNode, type Ref } from 'react';
+import { type DialogContentProps } from './dialog.js';
 export interface SearchDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -9,7 +9,7 @@ export interface SearchDialogProps {
     description: string;
     className?: string;
     /** Where the portal renders. Defaults to `document.body`. */
-    container?: DialogContentProps["container"];
+    container?: DialogContentProps['container'];
     children: ReactNode;
 }
 /**
@@ -43,7 +43,7 @@ export interface SearchFilterProps {
     children: ReactNode;
 }
 /** A pressable filter chip. */
-export declare function SearchFilter({ pressed, onPressedChange, icon, children, }: SearchFilterProps): import("react").JSX.Element;
+export declare function SearchFilter({ pressed, onPressedChange, icon, children }: SearchFilterProps): import("react").JSX.Element;
 export interface SearchListProps {
     /** Accessible name of the results listbox. */
     label: string;
@@ -79,7 +79,7 @@ export interface SearchItemProps {
     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 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;
@@ -89,7 +89,7 @@ export interface SearchEmptyProps {
     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 declare function SearchEmpty({ media, title, description, action }: SearchEmptyProps): import("react").JSX.Element;
 export interface SearchFooterProps {
     children: ReactNode;
 }

package/dist/components/search-dialog.js

@@ -1,22 +1,22 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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 { Kbd } from "./kbd.js";
-import { Toggle } from "./toggle.js";
-import { Command, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, } from "./dialog.js";
+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 { Kbd } from './kbd.js';
+import { Toggle } from './toggle.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 })] }) }));
+    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", }) {
+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. */
@@ -24,8 +24,8 @@ 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", variant: "outline", size: "sm", pressed: pressed, onPressedChange: (next) => onPressedChange(next), children: [icon, children] }));
+export function SearchFilter({ pressed, onPressedChange, icon, children }) {
+    return (_jsxs(Toggle, { "data-slot": "search-filter", variant: "outline", size: "sm", pressed: pressed, onPressedChange: next => onPressedChange(next), children: [icon, children] }));
 }
 /** The scrolling results area. It keeps a steady height so typing does not resize the dialog. */
 export function SearchList({ label, children }) {
@@ -35,14 +35,14 @@ export function SearchList({ label, children }) {
 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 }));
+    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, }) {
+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, { variant: "outline", "aria-hidden": "true", className: "sprout-search-item-enter", children: "\u21B5" })] }));
 }
 function tiles(media) {
@@ -52,7 +52,7 @@ function tiles(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, }) {
+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. */

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

@@ -14,4 +14,4 @@ export interface SearchFieldProps {
  * 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;
+export declare function SearchField({ label, value, onChange, placeholder, maxLength, id, className }: SearchFieldProps): import("react").JSX.Element;

package/dist/components/search-field.js

@@ -1,27 +1,27 @@
-"use client";
+'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";
+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, }) {
+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)
+        if (event.key !== 'Escape' || !value)
             return;
         event.preventDefault();
         event.stopPropagation();
-        onChange("");
+        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("");
+    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", "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

@@ -1,5 +1,5 @@
-import { Select as SelectPrimitive } from "@base-ui/react/select";
-export declare const selectTriggerSizeNames: readonly ["default", "sm", "calendar"];
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+export declare const selectTriggerSizeNames: readonly ["md", "sm", "lg"];
 export declare const selectTriggerWidthNames: readonly ["fit", "full"];
 export type SelectTriggerSize = (typeof selectTriggerSizeNames)[number];
 export type SelectTriggerWidth = (typeof selectTriggerWidthNames)[number];
@@ -19,20 +19,16 @@ export type SelectValueProps = SelectPrimitive.Value.Props;
  */
 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.
-     */
+    /** `sm` is 28px, `md` is 32px (`--sprout-control-height`), and `lg` is 36px. */
     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">;
+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"];
+    container?: SelectPrimitive.Portal.Props['container'];
 }
 /**
  * The list surface. It renders its own portal, positioner, list, and scroll

package/dist/components/select.js

@@ -1,13 +1,13 @@
-"use client";
+'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"];
+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 = ['md', 'sm', 'lg'];
+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`,
@@ -15,43 +15,43 @@ export const selectTriggerWidthNames = ["fit", "full"];
  */
 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) }));
+    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) }));
+    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 }) {
+export function SelectTrigger({ className, size = 'md', 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" }) })] }));
+    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 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) }));
+    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" }) })] }));
+    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) }));
+    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" }) }));
+    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" }) }));
+    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

@@ -1,5 +1,5 @@
-import { type ComponentProps, type ReactNode } from "react";
-export interface SelectionSlotProps extends Omit<ComponentProps<"div">, "children"> {
+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. */

package/dist/components/selection-slot.js

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, } from "react";
-import { cn } from "../internal/classes.js";
+import { useLayoutEffect, useRef } from 'react';
+import { cn } from '../internal/classes.js';
 const tabbable = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
 function focusable(root) {
-    return Array.from(root?.querySelectorAll(tabbable) ?? []).find((node) => !node.closest("[inert]") && node.getClientRects().length > 0);
+    return Array.from(root?.querySelectorAll(tabbable) ?? []).find(node => !node.closest('[inert]') && node.getClientRects().length > 0);
 }
 function lost() {
     const current = document.activeElement;
@@ -27,10 +27,7 @@ export function SelectionSlot({ active, selection, children, className, ...props
     useLayoutEffect(() => {
         if (active && !previous.current) {
             const current = document.activeElement;
-            origin.current =
-                current instanceof HTMLElement && current !== document.body
-                    ? current
-                    : null;
+            origin.current = current instanceof HTMLElement && current !== document.body ? current : null;
             if (origin.current && tools.current?.contains(origin.current))
                 focusable(selected.current)?.focus({ preventScroll: true });
         }
@@ -44,7 +41,7 @@ export function SelectionSlot({ active, selection, children, className, ...props
             inside.current = false;
         previous.current = active;
     }, [active]);
-    return (_jsxs("div", { "data-slot": "selection-slot", "data-active": active || undefined, className: cn("sprout-selection-slot", className), ...props, children: [_jsx("div", { ref: tools, "data-slot": "selection-slot-default", className: "sprout-selection-slot-layer", inert: active, "aria-hidden": active || undefined, children: children }), active && (_jsx("div", { ref: selected, onFocus: () => (inside.current = true), onBlur: (event) => {
+    return (_jsxs("div", { "data-slot": "selection-slot", "data-active": active || undefined, className: cn('sprout-selection-slot', className), ...props, children: [_jsx("div", { ref: tools, "data-slot": "selection-slot-default", className: "sprout-selection-slot-layer", inert: active, "aria-hidden": active || undefined, children: children }), active && (_jsx("div", { ref: selected, onFocus: () => (inside.current = true), onBlur: event => {
                     // A null target means focus was dropped, as when the focused button is disabled.
                     const next = event.relatedTarget;
                     if (next && !event.currentTarget.contains(next))