@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/components/state-panel.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentType, HTMLAttributes, ReactNode } from "react";
+export declare const statePanelKindNames: readonly ["empty", "loading", "success", "unavailable", "error"];
+export type StatePanelKind = (typeof statePanelKindNames)[number];
+export type StatePanelHeading = "h1" | "h2" | "h3" | "h4";
+export type StatePanelIcon = ComponentType<{
+    size?: number;
+}>;
+interface StatePanelBaseProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "role"> {
+    title: ReactNode;
+    description: ReactNode;
+    /** Heading element for `title`. Match the surrounding document outline. */
+    heading?: StatePanelHeading | undefined;
+    /**
+     * Icon for `empty` and `unavailable`. Pass `null` to show no icon.
+     * Other kinds use a fixed icon.
+     */
+    icon?: StatePanelIcon | null | undefined;
+    /** Actions or guidance shown below the description. */
+    children?: ReactNode;
+}
+export type StatePanelProps = StatePanelBaseProps & ({
+    kind: "empty";
+    /** Decorative preview of the filled state. Switches to the split layout. */
+    sample?: ReactNode;
+} | {
+    kind: "loading" | "success" | "unavailable";
+    sample?: never;
+} | {
+    kind: "error";
+    /** Errors always offer a recovery action or guidance. */
+    children: ReactNode;
+    sample?: never;
+});
+export declare function StatePanel({ kind, title, description, heading: Heading, icon, children, sample, className, ...props }: StatePanelProps): import("react").JSX.Element;
+export * from "./state-panel-samples.js";

package/dist/components/state-panel.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "reicon-react/icons/Check";
+import { Inbox } from "reicon-react/icons/Inbox";
+import { Loader } from "reicon-react/icons/Loader";
+import { Warning } from "reicon-react/icons/Warning";
+import { cn } from "../internal/classes.js";
+export const statePanelKindNames = [
+    "empty",
+    "loading",
+    "success",
+    "unavailable",
+    "error",
+];
+const roles = {
+    error: "alert",
+    loading: "status",
+    success: "status",
+};
+function Media({ kind, Icon }) {
+    return (_jsx("div", { "data-slot": "state-panel-media", className: "sprout-state-panel-media", "aria-hidden": "true", children: kind === "loading" ? (_jsx(Loader, { size: 16, className: "sprout-state-panel-spinner" })) : kind === "success" ? (_jsx(Check, { size: 20 })) : kind === "error" ? (_jsx(Warning, { size: 20, className: "sprout-state-panel-danger" })) : (_jsx(Icon, { size: 20 })) }));
+}
+export function StatePanel({ kind, title, description, heading: Heading = "h2", icon = Inbox, children, sample, className, ...props }) {
+    const media = icon === null && (kind === "empty" || kind === "unavailable") ? null : (_jsx(Media, { kind: kind, Icon: icon ?? Inbox }));
+    const hasActions = children !== undefined && children !== null && children !== false;
+    if (sample)
+        return (_jsx("section", { "data-slot": "state-panel", "data-kind": kind, "data-layout": "sample", ...props, className: cn("sprout-state-panel", className), children: _jsxs("div", { className: "sprout-state-panel-card", children: [_jsxs("div", { className: "sprout-state-panel-copy", children: [media, _jsxs("div", { className: "sprout-state-panel-text", children: [_jsx(Heading, { className: "sprout-state-panel-title", children: title }), _jsx("p", { className: "sprout-state-panel-description", children: description })] }), hasActions && (_jsx("div", { "data-slot": "state-panel-actions", className: "sprout-state-panel-actions", children: children }))] }), _jsx("div", { "data-slot": "state-panel-sample", className: "sprout-state-panel-sample", "aria-hidden": "true", inert: true, children: _jsx("div", { className: "sprout-state-panel-sample-window", children: sample }) })] }) }));
+    return (_jsxs("div", { "data-slot": "state-panel", "data-kind": kind, "data-layout": "centered", ...props, className: cn("sprout-state-panel", className), children: [media, _jsxs("div", { role: roles[kind], "aria-atomic": "true", className: "sprout-state-panel-text", children: [_jsx(Heading, { className: "sprout-state-panel-title", children: title }), _jsx("p", { className: "sprout-state-panel-description", children: description })] }), hasActions && (_jsx("div", { "data-slot": "state-panel-actions", className: "sprout-state-panel-actions", children: children }))] }));
+}
+export * from "./state-panel-samples.js";

package/dist/components/state-sample.d.ts

@@ -0,0 +1,63 @@
+import { type ComponentType, type HTMLAttributes, type ReactNode } from "react";
+export type SampleIcon = ComponentType<{
+    size?: number;
+}>;
+export interface SampleWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Page icon at the start of the title bar. */
+    icon: SampleIcon;
+    /** Breadcrumb parts. The last part is the current page. */
+    trail: readonly string[];
+    /** Tab labels. The first tab is shown as selected. */
+    tabs?: readonly string[] | undefined;
+    /** Chip at the end of the title bar. */
+    label?: ReactNode;
+    children: ReactNode;
+}
+export declare function SampleWindow({ icon: Icon, trail, tabs, label, children, className, ...props }: SampleWindowProps): import("react").JSX.Element;
+export declare const sampleColumnSizeNames: readonly ["wide", "default", "narrow"];
+export type SampleColumnSize = (typeof sampleColumnSizeNames)[number];
+export type SampleColumn = {
+    label: string;
+    size?: SampleColumnSize;
+};
+export interface SampleTableProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    columns: readonly SampleColumn[];
+    rows: readonly (readonly ReactNode[])[];
+}
+export declare function SampleTable({ columns, rows, className, ...props }: SampleTableProps): import("react").JSX.Element;
+export type SampleListItem = {
+    leading?: ReactNode;
+    title: string;
+    detail?: string;
+    trailing?: ReactNode;
+};
+export interface SampleListProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    items: readonly SampleListItem[];
+}
+export declare function SampleList({ items, className, ...props }: SampleListProps): import("react").JSX.Element;
+export declare const sampleTextToneNames: readonly ["default", "strong", "muted", "link", "mono"];
+export type SampleTextTone = (typeof sampleTextToneNames)[number];
+export interface SampleTextProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: SampleTextTone | undefined;
+    children: ReactNode;
+}
+export declare function SampleText({ tone, className, ...props }: SampleTextProps): import("react").JSX.Element;
+export declare const sampleMarkToneNames: readonly ["red", "orange", "green", "blue", "violet", "teal"];
+export type SampleMarkTone = (typeof sampleMarkToneNames)[number];
+export declare const sampleMarkSizeNames: readonly ["sm", "md"];
+export type SampleMarkSize = (typeof sampleMarkSizeNames)[number];
+export interface SampleMarkProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    tone: SampleMarkTone;
+    size?: SampleMarkSize | undefined;
+}
+export declare function SampleMark({ tone, size, className, ...props }: SampleMarkProps): import("react").JSX.Element;
+export declare const sampleBarWidthNames: readonly ["sm", "md", "lg"];
+export type SampleBarWidth = (typeof sampleBarWidthNames)[number];
+export interface SampleBarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    width?: SampleBarWidth | undefined;
+}
+export declare function SampleBar({ width, className, ...props }: SampleBarProps): import("react").JSX.Element;
+export interface SampleIconTileProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    icon: SampleIcon;
+}
+export declare function SampleIconTile({ icon: Icon, className, ...props }: SampleIconTileProps): import("react").JSX.Element;

package/dist/components/state-sample.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, } from "react";
+import { cn } from "../internal/classes.js";
+export function SampleWindow({ icon: Icon, trail, tabs, label = "Example", children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "state-sample", ...props, className: cn("sprout-state-sample", className), children: [_jsxs("div", { className: "sprout-state-sample-bar", children: [_jsx("span", { className: "sprout-state-sample-icon", "aria-hidden": "true", children: _jsx(Icon, { size: 14 }) }), trail.map((part, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { className: "sprout-state-sample-faint", "aria-hidden": "true", children: "/" })), _jsx("span", { className: "sprout-state-sample-crumb", "data-current": index === trail.length - 1 ? "" : undefined, children: part })] }, index))), _jsx("span", { className: "sprout-state-sample-faint", "aria-hidden": "true", children: "\u00B7\u00B7\u00B7" }), _jsx("span", { className: "sprout-state-sample-label", children: label })] }), tabs && tabs.length > 0 && (_jsx("div", { className: "sprout-state-sample-tabs", children: tabs.map((tab, index) => (_jsx("span", { className: "sprout-state-sample-tab", "data-selected": index === 0 ? "" : undefined, children: tab }, index))) })), children] }));
+}
+export const sampleColumnSizeNames = ["wide", "default", "narrow"];
+export function SampleTable({ columns, rows, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "state-sample-table", ...props, className: cn("sprout-state-sample-table", className), children: [_jsxs("div", { className: "sprout-state-sample-head", children: [_jsx("span", { className: "sprout-state-sample-check", "aria-hidden": "true" }), columns.map((column, index) => (_jsx("span", { className: "sprout-state-sample-cell", "data-size": column.size ?? "default", children: column.label }, index)))] }), rows.map((row, rowIndex) => (_jsxs("div", { className: "sprout-state-sample-row", children: [_jsx("span", { className: "sprout-state-sample-check", "aria-hidden": "true" }), row.map((cell, cellIndex) => (_jsx("span", { className: "sprout-state-sample-cell", "data-size": columns[cellIndex]?.size ?? "default", children: cell }, cellIndex)))] }, rowIndex)))] }));
+}
+export function SampleList({ items, className, ...props }) {
+    return (_jsx("div", { "data-slot": "state-sample-list", ...props, className: cn("sprout-state-sample-list", className), children: items.map((item, index) => (_jsxs("div", { className: "sprout-state-sample-item", children: [item.leading && (_jsx("span", { className: "sprout-state-sample-leading", children: item.leading })), _jsxs("span", { className: "sprout-state-sample-copy", children: [_jsx("span", { className: "sprout-state-sample-title", children: item.title }), item.detail && (_jsx("span", { className: "sprout-state-sample-detail", children: item.detail }))] }), item.trailing && (_jsx("span", { className: "sprout-state-sample-trailing", children: item.trailing }))] }, index))) }));
+}
+export const sampleTextToneNames = [
+    "default",
+    "strong",
+    "muted",
+    "link",
+    "mono",
+];
+export function SampleText({ tone = "default", className, ...props }) {
+    return (_jsx("span", { "data-slot": "state-sample-text", "data-tone": tone, ...props, className: cn("sprout-state-sample-text", className) }));
+}
+export const sampleMarkToneNames = [
+    "red",
+    "orange",
+    "green",
+    "blue",
+    "violet",
+    "teal",
+];
+export const sampleMarkSizeNames = ["sm", "md"];
+export function SampleMark({ tone, size = "sm", className, ...props }) {
+    return (_jsx("span", { "data-slot": "state-sample-mark", "data-tone": tone, "data-size": size, "aria-hidden": "true", ...props, className: cn("sprout-state-sample-mark", className) }));
+}
+export const sampleBarWidthNames = ["sm", "md", "lg"];
+export function SampleBar({ width = "md", className, ...props }) {
+    return (_jsx("span", { "data-slot": "state-sample-bar", "data-width": width, "aria-hidden": "true", ...props, className: cn("sprout-state-sample-placeholder", className) }));
+}
+export function SampleIconTile({ icon: Icon, className, ...props }) {
+    return (_jsx("span", { "data-slot": "state-sample-icon-tile", "aria-hidden": "true", ...props, className: cn("sprout-state-sample-icon-tile", className), children: _jsx(Icon, { size: 14 }) }));
+}

package/dist/components/switch.d.ts

@@ -0,0 +1,12 @@
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+export declare const switchSizeNames: readonly ["default", "sm"];
+export type SwitchSize = (typeof switchSizeNames)[number];
+export interface SwitchProps extends BaseSwitch.Root.Props {
+    /** `default` is a 32 × 18px track. `sm` is a 24 × 14px track. */
+    size?: SwitchSize | undefined;
+}
+/**
+ * An on/off switch for a setting that applies right away. Name it with a
+ * wrapping `Label`, a `Label htmlFor` pointing at its `id`, or `aria-label`.
+ */
+export declare function Switch({ size, className, disabled, ref, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/components/switch.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { cn, stateClassName } from "../internal/classes.js";
+import { useFieldsetDisabled } from "../internal/fieldset.js";
+export const switchSizeNames = ["default", "sm"];
+/**
+ * An on/off switch for a setting that applies right away. Name it with a
+ * wrapping `Label`, a `Label htmlFor` pointing at its `id`, or `aria-label`.
+ */
+export function Switch({ size = "default", className, disabled, ref, ...props }) {
+    const [fieldsetDisabled, fieldsetRef] = useFieldsetDisabled(ref);
+    return (_jsx(BaseSwitch.Root, { "data-slot": "switch", "data-size": size, ...props, ref: fieldsetRef, disabled: disabled || fieldsetDisabled, className: stateClassName(cn("sprout-switch", `sprout-switch-size-${size}`), className), children: _jsx(BaseSwitch.Thumb, { "data-slot": "switch-thumb", className: "sprout-switch-thumb" }) }));
+}

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

@@ -0,0 +1,16 @@
+import type { TableState } from "./table.js";
+export interface TableUrlStateOptions {
+    /** Prefixes every query key, for pages with more than one Table. */
+    prefix?: string;
+    /** Page size used when the URL has none. */
+    pageSize?: number;
+}
+/**
+ * Keeps a Table's View state (sort, filters, search, grouping, page) in the
+ * URL with nuqs, so a shared link opens the same view. Spread the result into
+ * `<Table {...useTableUrlState()} />`. Needs a nuqs adapter higher in the tree.
+ */
+export declare function useTableUrlState({ prefix, pageSize, }?: TableUrlStateOptions): {
+    state: Partial<TableState>;
+    onStateChange: (next: TableState) => undefined;
+};

package/dist/components/table-nuqs.js

@@ -0,0 +1,59 @@
+"use client";
+import { createParser, parseAsArrayOf, parseAsInteger, parseAsJson, parseAsString, useQueryStates, } from "nuqs";
+const parseAsSorting = createParser({
+    parse: (value) => value
+        .split(",")
+        .filter(Boolean)
+        .map((part) => {
+        const [id = "", dir] = part.split(".");
+        return { id, desc: dir === "desc" };
+    }),
+    serialize: (sorting) => sorting.map((s) => `${s.id}.${s.desc ? "desc" : "asc"}`).join(","),
+});
+const isFilters = (value) => Array.isArray(value) &&
+    value.every((f) => typeof f === "object" && f !== null && typeof f.id === "string")
+    ? value
+    : null;
+/**
+ * Keeps a Table's View state (sort, filters, search, grouping, page) in the
+ * URL with nuqs, so a shared link opens the same view. Spread the result into
+ * `<Table {...useTableUrlState()} />`. Needs a nuqs adapter higher in the tree.
+ */
+export function useTableUrlState({ prefix = "", pageSize = 10, } = {}) {
+    const [query, setQuery] = useQueryStates({
+        sort: parseAsSorting.withDefault([]),
+        filters: parseAsJson(isFilters).withDefault([]),
+        q: parseAsString.withDefault(""),
+        group: parseAsArrayOf(parseAsString).withDefault([]),
+        page: parseAsInteger.withDefault(1),
+        size: parseAsInteger.withDefault(pageSize),
+    }, {
+        urlKeys: {
+            sort: `${prefix}sort`,
+            filters: `${prefix}filters`,
+            q: `${prefix}q`,
+            group: `${prefix}group`,
+            page: `${prefix}page`,
+            size: `${prefix}size`,
+        },
+    });
+    const state = {
+        sorting: query.sort,
+        columnFilters: query.filters,
+        globalFilter: query.q,
+        grouping: query.group,
+        pagination: {
+            pageIndex: Math.max(0, query.page - 1),
+            pageSize: query.size,
+        },
+    };
+    const onStateChange = (next) => void setQuery({
+        sort: next.sorting.length ? next.sorting : null,
+        filters: next.columnFilters.length ? next.columnFilters : null,
+        q: next.globalFilter || null,
+        group: next.grouping.length ? next.grouping : null,
+        page: next.pagination.pageIndex ? next.pagination.pageIndex + 1 : null,
+        size: next.pagination.pageSize === pageSize ? null : next.pagination.pageSize,
+    });
+    return { state, onStateChange };
+}

package/dist/components/table.d.ts

@@ -0,0 +1,120 @@
+import { type ReactNode } from "react";
+import { type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnSizingState, type ColumnVisibilityState, type ExpandedState, type GroupingState, type PaginationState, type RowData, type SortingState } from "@tanstack/react-table";
+export declare const tableVariantNames: readonly ["plain", "grid"];
+export declare const tableNarrowNames: readonly ["scroll", "stack"];
+export declare const tableAlignNames: readonly ["left", "right"];
+export declare const tableFilterNames: readonly ["text", "number", "select", "date", "boolean"];
+export declare const tableEditNames: readonly ["text", "number", "select", "date", "checkbox"];
+export declare const tableAggregateNames: readonly ["sum", "count", "min", "max", "mean"];
+export type TableVariant = (typeof tableVariantNames)[number];
+export type TableNarrow = (typeof tableNarrowNames)[number];
+export type TableAlign = (typeof tableAlignNames)[number];
+export type TableFilter = (typeof tableFilterNames)[number];
+export type TableEdit = (typeof tableEditNames)[number];
+export type TableAggregate = (typeof tableAggregateNames)[number];
+export interface TableOption {
+    label: string;
+    value: string;
+}
+export interface TableColumn<Row> {
+    key: keyof Row & string;
+    header: string;
+    /** Shows an info button next to the header whose tooltip explains the column. */
+    hint?: string;
+    /** Custom cell content. Sorting, filtering, and editing still use `row[key]`. */
+    cell?: (row: Row) => ReactNode;
+    /** `"right"` aligns numbers and dates to the end of the column. */
+    align?: TableAlign;
+    /** Starting width in pixels. Columns without one share the free space. */
+    width?: number;
+    sort?: boolean;
+    filter?: TableFilter;
+    /** Choices for `filter: "select"` and `edit: "select"`. */
+    options?: TableOption[];
+    edit?: TableEdit;
+    /** Lets people group rows by this column from the Toolbar. */
+    group?: boolean;
+    /** Shown on group rows and in the footer total row. */
+    aggregate?: TableAggregate;
+    /** Formats aggregate values. Defaults to `toLocaleString()`. */
+    formatAggregate?: (value: number) => ReactNode;
+    pin?: "left" | "right";
+    hidden?: boolean;
+}
+/**
+ * The View state (sort, filters, search, grouping, page) and the Layout
+ * (widths, order, pinning, hidden columns).
+ */
+export interface TableState {
+    sorting: SortingState;
+    columnFilters: ColumnFiltersState;
+    globalFilter: string;
+    grouping: GroupingState;
+    expanded: ExpandedState;
+    pagination: PaginationState;
+    columnSizing: ColumnSizingState;
+    columnOrder: ColumnOrderState;
+    columnPinning: ColumnPinningState;
+    columnVisibility: ColumnVisibilityState;
+}
+export declare const tableLayoutKeys: readonly ["columnSizing", "columnOrder", "columnPinning", "columnVisibility"];
+export interface TableProps<Row> {
+    /** Names the table, and the scrolling region when it overflows. */
+    "aria-label": string;
+    data: Row[];
+    columns: TableColumn<Row>[];
+    getRowId: (row: Row) => string;
+    /** Names a row in control labels, like "Select Invoices". Defaults to the row id. */
+    rowLabel?: (row: Row) => string;
+    /**
+     * `"plain"` is borderless. `"grid"` frames the table in a bordered
+     * `ScrollArea` capped at 60dvh, with column dividers and a pinned header.
+     */
+    variant?: TableVariant;
+    /** On narrow containers, `"scroll"` scrolls sideways and `"stack"` turns rows into cards. */
+    narrow?: TableNarrow;
+    caption?: ReactNode;
+    /** The server sorts, filters, and pages. Pass `rowCount` and handle `onStateChange`. */
+    manual?: boolean;
+    rowCount?: number;
+    /** Controls any part of the state. Anything left out stays internal. */
+    state?: Partial<TableState>;
+    onStateChange?: (state: TableState) => void;
+    /** Saves the Layout to localStorage under this key. */
+    persistKey?: string;
+    /** Shows a search field in the Toolbar. */
+    searchable?: boolean;
+    /** Shows the Columns menu for hiding, pinning, and resetting columns. */
+    columnMenu?: boolean;
+    resizable?: boolean;
+    /** Lets people drag column headers to reorder them. */
+    reorderable?: boolean;
+    selectable?: boolean;
+    onSelectionChange?: (ids: string[]) => void;
+    /** Splits rows into pages of this size. */
+    pageSize?: number;
+    /** Renders only the rows in view, inside a scroll box capped at 60dvh. */
+    virtual?: boolean;
+    /** Adds drag handles to rows. Indexes are positions in `data`. */
+    onRowReorder?: (from: number, to: number) => void;
+    getSubRows?: (row: Row) => Row[] | undefined;
+    /** Adds an Edit action that opens Row edit. A rejected promise keeps the row open and shows the error. */
+    onRowSave?: (row: Row, changes: Partial<Row>) => void | Promise<void>;
+    /** Makes the first cell a link whose hit area covers the row. */
+    getRowHref?: (row: Row) => string;
+    /** Makes the first cell a button whose hit area covers the row. */
+    onRowClick?: (row: Row) => void;
+    /** Accepts files dragged onto a row. */
+    onRowDrop?: (row: Row, files: File[]) => void;
+    /** Content for the pinned trailing actions cell. */
+    actions?: (row: Row) => ReactNode;
+    loading?: boolean;
+    empty?: ReactNode;
+    className?: string;
+}
+/**
+ * A data table. Pass rows and column settings; it renders the header, body,
+ * Toolbar, and footer, and runs sorting, filtering, grouping, selection,
+ * paging, Row edit, and Layout changes for you.
+ */
+export declare function Table<R extends RowData>(props: TableProps<R>): import("react").JSX.Element;