@tulipfarm/sprout 0.3.0 → 0.4.0

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

@@ -1,35 +1,2 @@
-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";
+export * from '../internal/state-panel.js';
+export * from './state-panel-samples.js';

package/dist/components/state-panel.js

@@ -1,29 +1,2 @@
-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 { Warning } from "reicon-react/icons/Warning";
-import { cn } from "../internal/classes.js";
-import { Spinner } from "./spinner.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(Spinner, { "aria-hidden": "true" })) : 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";
+export * from '../internal/state-panel.js';
+export * from './state-panel-samples.js';

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

@@ -1,8 +1,8 @@
-import { type ComponentType, type HTMLAttributes, type ReactNode } from "react";
+import { type ComponentType, type HTMLAttributes, type ReactNode } from 'react';
 export type SampleIcon = ComponentType<{
     size?: number;
 }>;
-export interface SampleWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+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. */
@@ -20,7 +20,7 @@ export type SampleColumn = {
     label: string;
     size?: SampleColumnSize;
 };
-export interface SampleTableProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+export interface SampleTableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     columns: readonly SampleColumn[];
     rows: readonly (readonly ReactNode[])[];
 }
@@ -31,7 +31,7 @@ export type SampleListItem = {
     detail?: string;
     trailing?: ReactNode;
 };
-export interface SampleListProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+export interface SampleListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     items: readonly SampleListItem[];
 }
 export declare function SampleList({ items, className, ...props }: SampleListProps): import("react").JSX.Element;
@@ -46,18 +46,18 @@ export declare const sampleMarkToneNames: readonly ["red", "orange", "green", "b
 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"> {
+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"> {
+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"> {
+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

@@ -1,42 +1,29 @@
 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] }));
+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 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)))] }));
+    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))) }));
+    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 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 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 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 }) }));
+    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

@@ -1,4 +1,4 @@
-import { Switch as BaseSwitch } from "@base-ui/react/switch";
+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 {

package/dist/components/switch.js

@@ -1,14 +1,14 @@
-"use client";
+'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"];
+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 }) {
+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" }) }));
+    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

@@ -1,4 +1,4 @@
-import type { TableState } from "./table.js";
+import type { TableState } from './table.js';
 export interface TableUrlStateOptions {
     /** Prefixes every query key, for pages with more than one Table. */
     prefix?: string;
@@ -10,7 +10,7 @@ export interface TableUrlStateOptions {
  * 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): {
+export declare function useTableUrlState({ prefix, pageSize }?: TableUrlStateOptions): {
     state: Partial<TableState>;
     onStateChange: (next: TableState) => undefined;
 };

package/dist/components/table-nuqs.js

@@ -1,17 +1,16 @@
-"use client";
-import { createParser, parseAsArrayOf, parseAsInteger, parseAsJson, parseAsString, useQueryStates, } from "nuqs";
+'use client';
+import { createParser, parseAsArrayOf, parseAsInteger, parseAsJson, parseAsString, useQueryStates } from 'nuqs';
 const parseAsSorting = createParser({
-    parse: (value) => value
-        .split(",")
+    parse: value => value
+        .split(',')
         .filter(Boolean)
-        .map((part) => {
-        const [id = "", dir] = part.split(".");
-        return { id, desc: dir === "desc" };
+        .map(part => {
+        const [id = '', dir] = part.split('.');
+        return { id, desc: dir === 'desc' };
     }),
-    serialize: (sorting) => sorting.map((s) => `${s.id}.${s.desc ? "desc" : "asc"}`).join(","),
+    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")
+const isFilters = (value) => Array.isArray(value) && value.every(f => typeof f === 'object' && f !== null && typeof f.id === 'string')
     ? value
     : null;
 /**
@@ -19,11 +18,11 @@ const isFilters = (value) => Array.isArray(value) &&
  * 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, } = {}) {
+export function useTableUrlState({ prefix = '', pageSize = 10 } = {}) {
     const [query, setQuery] = useQueryStates({
         sort: parseAsSorting.withDefault([]),
         filters: parseAsJson(isFilters).withDefault([]),
-        q: parseAsString.withDefault(""),
+        q: parseAsString.withDefault(''),
         group: parseAsArrayOf(parseAsString).withDefault([]),
         page: parseAsInteger.withDefault(1),
         size: parseAsInteger.withDefault(pageSize),

package/dist/components/table.d.ts

@@ -1,5 +1,5 @@
-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";
+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"];
@@ -38,7 +38,7 @@ export interface TableColumn<Row> {
     aggregate?: TableAggregate;
     /** Formats aggregate values. Defaults to `toLocaleString()`. */
     formatAggregate?: (value: number) => ReactNode;
-    pin?: "left" | "right";
+    pin?: 'left' | 'right';
     hidden?: boolean;
 }
 /**
@@ -60,7 +60,7 @@ export interface TableState {
 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;
+    'aria-label': string;
     data: Row[];
     columns: TableColumn<Row>[];
     getRowId: (row: Row) => string;