@pathscale/ui 2.2.2 → 2.3.1

package/dist/components/data-grid/createDataGrid.d.ts

@@ -0,0 +1,121 @@
+import { type Accessor, type JSX } from "solid-js";
+/**
+ * The imperative grid model.
+ *
+ * Ported from vue3-ui's `DataGrid` class, keeping its verbs and their
+ * positional shapes so a call site moves across unchanged:
+ *
+ * ```ts
+ * const grid = createDataGrid();
+ * grid.addColumn("id", "ID", "number");
+ * grid.addRow({ id: 1, firstName: "John" });
+ * ```
+ *
+ * Three things are deliberately different, and all three are the same bug.
+ * In vue3 `searchColumn`, `sortByColumn` and `switchPage` each rewrite the
+ * single `rows` array from `originalRows`, so any two of them compose by
+ * destroying each other: paging after a search silently restores the rows the
+ * search removed. Here `rows` is the source and everything downstream is
+ * derived — `filteredRows` -> `sortedRows` -> `pageRows` — so the three
+ * compose, and a search is no longer lost when the reader turns the page.
+ *
+ * Consequences of that, worth knowing before porting:
+ * - `searchColumn` accumulates. Two columns can filter at once; vue3 could
+ *   only ever hold the last query. `resetFilters()` clears all of them.
+ * - `sortByColumn(name)` toggles and takes a direction rather than vue3's
+ *   `ascendant: boolean`, because a bare `true` meaning "ascending" is the
+ *   kind of parameter 2.2 spent the release removing.
+ * - `switchPage(page)` takes the page. vue3's read a mutable field.
+ * - `deleteRow(index)` indexes the source rows, not what is on screen.
+ */
+export type DataGridDataType = "string" | "number" | "boolean" | "date" | "custom";
+export type DataGridRow = Record<string, unknown>;
+export type DataGridSortDirection = "ascending" | "descending";
+export type DataGridSort = {
+    column: string;
+    direction: DataGridSortDirection;
+};
+export type DataGridSelectionMode = "none" | "single" | "multiple";
+export type DataGridCellContext<Row extends DataGridRow = DataGridRow> = {
+    value: unknown;
+    row: Row;
+    column: DataGridColumn<Row>;
+    index: number;
+};
+export type DataGridColumn<Row extends DataGridRow = DataGridRow> = {
+    /** Key into the row. */
+    name: string;
+    /** Header text. vue3 called this `caption`, which collides with `<caption>`. */
+    label: string;
+    dataType: DataGridDataType;
+    visible: boolean;
+    sortable: boolean;
+    searchable: boolean;
+    sticky: boolean;
+    width?: string;
+    align?: "start" | "center" | "end";
+    /** Required in practice for `dataType: "custom"`; nothing else reads a custom cell. */
+    render?: (context: DataGridCellContext<Row>) => JSX.Element;
+    /** Overrides the dataType's ordering. Receives the raw cell values. */
+    compare?: (a: unknown, b: unknown) => number;
+};
+export type DataGridColumnOptions<Row extends DataGridRow = DataGridRow> = Partial<Omit<DataGridColumn<Row>, "name" | "label" | "dataType">>;
+export type CreateDataGridOptions<Row extends DataGridRow = DataGridRow> = {
+    columns?: readonly DataGridColumn<Row>[];
+    rows?: readonly Row[];
+    /** Stable identity for selection and keyed rendering. Defaults to `row.id`, then the index. */
+    getRowId?: (row: Row, index: number) => string;
+    /** Omit for no pagination. There is no separate `pagination` flag to disagree with it. */
+    pageSize?: number;
+    /** Omit for no checkbox column. Likewise no `checkable` flag. */
+    selection?: DataGridSelectionMode;
+    sort?: DataGridSort | null;
+    groupBy?: string | null;
+    /** Defaults for columns added later. */
+    sortable?: boolean;
+    searchable?: boolean;
+};
+export type DataGridModel<Row extends DataGridRow = DataGridRow> = {
+    addColumn(name: string, label: string, dataType?: DataGridDataType, options?: DataGridColumnOptions<Row>): void;
+    removeColumn(name: string): void;
+    addRow(row: Row, index?: number): void;
+    deleteRow(index: number): void;
+    setRows(rows: readonly Row[]): void;
+    columns: Accessor<DataGridColumn<Row>[]>;
+    visibleColumns: Accessor<DataGridColumn<Row>[]>;
+    columnsByName: Accessor<Record<string, DataGridColumn<Row>>>;
+    toggleColumn(name: string, visible?: boolean): void;
+    rows: Accessor<Row[]>;
+    filteredRows: Accessor<Row[]>;
+    sortedRows: Accessor<Row[]>;
+    pageRows: Accessor<Row[]>;
+    rowId(row: Row, index: number): string;
+    sort: Accessor<DataGridSort | null>;
+    setSort(sort: DataGridSort | null): void;
+    sortByColumn(name: string, direction?: DataGridSortDirection): void;
+    queries: Accessor<Record<string, string>>;
+    searchColumn(name: string, query: string): void;
+    resetFilters(): void;
+    filterRows(name: string, value: unknown): Row[];
+    page: Accessor<number>;
+    pageSize: Accessor<number>;
+    pageCount: Accessor<number>;
+    total: Accessor<number>;
+    switchPage(page: number): void;
+    setPageSize(size: number): void;
+    selectionMode: Accessor<DataGridSelectionMode>;
+    selectedIds: Accessor<ReadonlySet<string>>;
+    selectedRows: Accessor<Row[]>;
+    isSelected(row: Row, index: number): boolean;
+    toggleCheck(row: Row, index: number, selected?: boolean): void;
+    toggleCheckAll(selected: boolean): void;
+    groupBy: Accessor<string | null>;
+    setGroupBy(name: string | null): void;
+    /** Distinct values in a column, in first-seen order. vue3 returned an unordered Set. */
+    groups(name: string): unknown[];
+    groupedRows: Accessor<{
+        value: unknown;
+        rows: Row[];
+    }[]>;
+};
+export declare function createDataGrid<Row extends DataGridRow = DataGridRow>(options?: CreateDataGridOptions<Row>): DataGridModel<Row>;

package/dist/components/data-grid/createDataGrid.js

@@ -0,0 +1,252 @@
+import { createMemo, createSignal, getOwner } from "solid-js";
+import { createStore, produce } from "solid-js/store";
+const derive = (fn)=>getOwner() ? createMemo(fn) : fn;
+const compareValues = (a, b, dataType)=>{
+    if (a === b) return 0;
+    if (null == a) return -1;
+    if (null == b) return 1;
+    if ("number" === dataType) return Number(a) - Number(b);
+    if ("boolean" === dataType) return Number(Boolean(a)) - Number(Boolean(b));
+    if ("date" === dataType) return new Date(a).getTime() - new Date(b).getTime();
+    return String(a).localeCompare(String(b));
+};
+const matches = (value, query)=>{
+    if (null == value) return false;
+    return String(value).toLowerCase().includes(query.toLowerCase());
+};
+function createDataGrid(options = {}) {
+    const columnDefaults = {
+        sortable: options.sortable ?? true,
+        searchable: options.searchable ?? false
+    };
+    const [columnStore, setColumnStore] = createStore({
+        items: [
+            ...options.columns ?? []
+        ]
+    });
+    const [rowStore, setRowStore] = createStore({
+        items: [
+            ...options.rows ?? []
+        ]
+    });
+    const [sort, writeSort] = createSignal(options.sort ?? null);
+    const [queries, setQueries] = createSignal({});
+    const [page, setPage] = createSignal(0);
+    const [pageSize, setPageSize] = createSignal(options.pageSize ?? 0);
+    const [selectedIds, setSelectedIds] = createSignal(new Set());
+    const [groupBy, setGroupBy] = createSignal(options.groupBy ?? null);
+    const selectionMode = ()=>options.selection ?? "none";
+    const identify = (row, index)=>{
+        if (options.getRowId) return options.getRowId(row, index);
+        const own = row.id;
+        return null == own ? String(index) : String(own);
+    };
+    const idByRow = derive(()=>{
+        const map = new Map();
+        rowStore.items.forEach((row, index)=>map.set(row, identify(row, index)));
+        return map;
+    });
+    const rowId = (row, index)=>idByRow().get(row) ?? identify(row, index);
+    const columns = derive(()=>columnStore.items);
+    const visibleColumns = derive(()=>columnStore.items.filter((column)=>column.visible));
+    const columnsByName = derive(()=>Object.fromEntries(columnStore.items.map((column)=>[
+                column.name,
+                column
+            ])));
+    const rows = derive(()=>rowStore.items);
+    const filteredRows = derive(()=>{
+        const active = Object.entries(queries()).filter(([, query])=>query.length > 0);
+        if (0 === active.length) return rowStore.items;
+        return rowStore.items.filter((row)=>active.every(([name, query])=>matches(row[name], query)));
+    });
+    const sortedRows = derive(()=>{
+        const descriptor = sort();
+        if (!descriptor) return filteredRows();
+        const column = columnStore.items.find((item)=>item.name === descriptor.column);
+        if (!column) return filteredRows();
+        const sign = "ascending" === descriptor.direction ? 1 : -1;
+        const compare = column.compare ?? ((a, b)=>compareValues(a, b, column.dataType));
+        return [
+            ...filteredRows()
+        ].sort((a, b)=>sign * compare(a[column.name], b[column.name]));
+    });
+    const total = derive(()=>filteredRows().length);
+    const pageCount = derive(()=>{
+        const size = pageSize();
+        if (size <= 0) return 1;
+        return Math.max(1, Math.ceil(total() / size));
+    });
+    const pageRows = derive(()=>{
+        const size = pageSize();
+        if (size <= 0) return sortedRows();
+        const start = page() * size;
+        return sortedRows().slice(start, start + size);
+    });
+    const selectedRows = derive(()=>{
+        const ids = selectedIds();
+        return rowStore.items.filter((row, index)=>ids.has(rowId(row, index)));
+    });
+    const groupedRows = derive(()=>{
+        const name = groupBy();
+        if (!name) return [
+            {
+                value: void 0,
+                rows: pageRows()
+            }
+        ];
+        const buckets = new Map();
+        for (const row of pageRows()){
+            const value = row[name];
+            const bucket = buckets.get(value);
+            if (bucket) bucket.push(row);
+            else buckets.set(value, [
+                row
+            ]);
+        }
+        return [
+            ...buckets
+        ].map(([value, groupRows])=>({
+                value,
+                rows: groupRows
+            }));
+    });
+    return {
+        addColumn (name, label, dataType = "string", columnOptions = {}) {
+            setColumnStore("items", produce((items)=>{
+                items.push({
+                    name,
+                    label,
+                    dataType,
+                    visible: true,
+                    sticky: false,
+                    ...columnDefaults,
+                    ...columnOptions
+                });
+            }));
+        },
+        removeColumn (name) {
+            setColumnStore("items", (items)=>items.filter((column)=>column.name !== name));
+        },
+        addRow (row, index) {
+            setRowStore("items", produce((items)=>{
+                if (void 0 === index) items.push(row);
+                else items.splice(index, 0, row);
+            }));
+        },
+        deleteRow (index) {
+            setRowStore("items", produce((items)=>{
+                items.splice(index, 1);
+            }));
+        },
+        setRows (next) {
+            setRowStore("items", [
+                ...next
+            ]);
+        },
+        columns,
+        visibleColumns,
+        columnsByName,
+        toggleColumn (name, visible) {
+            setColumnStore("items", (items)=>items.map((column)=>column.name === name ? {
+                        ...column,
+                        visible: visible ?? !column.visible
+                    } : column));
+        },
+        rows,
+        filteredRows,
+        sortedRows,
+        pageRows,
+        rowId,
+        sort,
+        setSort (next) {
+            writeSort(next);
+            setPage(0);
+        },
+        sortByColumn (name, direction) {
+            const current = sort();
+            const apply = (next)=>{
+                writeSort(next);
+                setPage(0);
+            };
+            if (direction) return void apply({
+                column: name,
+                direction
+            });
+            if (!current || current.column !== name) return void apply({
+                column: name,
+                direction: "ascending"
+            });
+            apply("ascending" === current.direction ? {
+                column: name,
+                direction: "descending"
+            } : null);
+        },
+        queries,
+        searchColumn (name, query) {
+            setQueries((previous)=>({
+                    ...previous,
+                    [name]: query
+                }));
+            setPage(0);
+        },
+        resetFilters () {
+            setQueries({});
+            setPage(0);
+        },
+        filterRows (name, value) {
+            return rowStore.items.filter((row)=>row[name] === value);
+        },
+        page,
+        pageSize,
+        pageCount,
+        total,
+        switchPage (next) {
+            setPage(Math.min(Math.max(next, 0), pageCount() - 1));
+        },
+        setPageSize (size) {
+            setPageSize(size);
+            setPage(0);
+        },
+        selectionMode,
+        selectedIds,
+        selectedRows,
+        isSelected (row, index) {
+            return selectedIds().has(rowId(row, index));
+        },
+        toggleCheck (row, index, selected) {
+            const id = rowId(row, index);
+            setSelectedIds((previous)=>{
+                const shouldSelect = selected ?? !previous.has(id);
+                if ("single" === selectionMode()) return shouldSelect ? new Set([
+                    id
+                ]) : new Set();
+                const next = new Set(previous);
+                if (shouldSelect) next.add(id);
+                else next.delete(id);
+                return next;
+            });
+        },
+        toggleCheckAll (selected) {
+            if (!selected) return void setSelectedIds(new Set());
+            setSelectedIds(new Set(pageRows().map((row, index)=>rowId(row, index))));
+        },
+        groupBy,
+        setGroupBy,
+        groups (name) {
+            const seen = [];
+            const known = new Set();
+            for (const row of rowStore.items){
+                const value = row[name];
+                if (null != value) {
+                    if (!known.has(value)) {
+                        known.add(value);
+                        seen.push(value);
+                    }
+                }
+            }
+            return seen;
+        },
+        groupedRows
+    };
+}
+export { createDataGrid };

package/dist/components/data-grid/index.d.ts

@@ -0,0 +1,8 @@
+export type { CreateDataGridOptions, DataGridCellContext, DataGridColumn, DataGridColumnOptions, DataGridDataType, DataGridModel, DataGridRow, DataGridSelectionMode, DataGridSort, DataGridSortDirection, } from "./createDataGrid";
+export { createDataGrid } from "./createDataGrid";
+export type { DataGridBorders, DataGridProps, DataGridSticky, DataGridStriping, } from "./DataGrid.generated";
+import type { JSX } from "solid-js";
+import type { DataGridProps as Props } from "./DataGrid.generated";
+import type { DataGridRow as Row } from "./createDataGrid";
+declare const DataGrid: <R extends Row = Row>(props: Props<R>) => JSX.Element;
+export default DataGrid;

package/dist/components/data-grid/index.js

@@ -0,0 +1,5 @@
+import DataGrid_generated from "./DataGrid.generated.js";
+const DataGrid = DataGrid_generated;
+const data_grid = DataGrid;
+export { createDataGrid } from "./createDataGrid.js";
+export default data_grid;

package/dist/components/spinner/Spinner.css

@@ -52,24 +52,43 @@
   /* -------------------------------------------------------------------------------------------------
    * Color variants
    * -----------------------------------------------------------------------------------------------*/
-  .spinner--current {
+  /* `--flavor-` to match every other component, and the full set: the recipe
+     named six classes this file never defined, so half the values a caller
+     could pass rendered unflavoured. */
+  .spinner--flavor-current {
     color: currentColor;
   }
 
-  .spinner--accent {
-    color: var(--color-accent);
+  .spinner--flavor-neutral {
+    color: var(--color-neutral, currentColor);
   }
 
-  .spinner--success {
-    color: var(--color-success);
+  .spinner--flavor-primary {
+    color: var(--color-primary, currentColor);
   }
 
-  .spinner--warning {
-    color: var(--color-warning);
+  .spinner--flavor-secondary {
+    color: var(--color-secondary, currentColor);
   }
 
-  .spinner--danger {
-    color: var(--color-error);
+  .spinner--flavor-accent {
+    color: var(--color-accent, currentColor);
+  }
+
+  .spinner--flavor-info {
+    color: var(--color-info, currentColor);
+  }
+
+  .spinner--flavor-success {
+    color: var(--color-success, currentColor);
+  }
+
+  .spinner--flavor-warning {
+    color: var(--color-warning, currentColor);
+  }
+
+  .spinner--flavor-destructive {
+    color: var(--color-error, currentColor);
   }
 
   /* -------------------------------------------------------------------------------------------------

package/dist/components/spinner/Spinner.generated.d.ts

@@ -1,11 +1,11 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Spinner.css";
 import { type JSX } from "solid-js";
-import type { Size, State, UIBaseProps } from "../vocabulary";
+import type { Flavor, Size, UIBaseProps } from "../vocabulary";
 export type SpinnerShape = "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity";
 export type SpinnerProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps & {
     size?: Size;
-    state?: State;
+    flavor?: Flavor;
     shape?: SpinnerShape;
     label?: string;
 };

package/dist/components/spinner/Spinner.generated.js

@@ -3,7 +3,7 @@ import { defineComponent } from "solid-layouts/application-boundary";
 import "./Spinner.css";
 import { createUniqueId } from "solid-js";
 import { spinner } from "./Spinner.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=spinner-icon fill=none viewBox="0 0 24 24"><defs><linearGradient x1=50% x2=50% y1=5.271% y2=91.793%><stop offset=0% stop-state=currentColor></stop><stop offset=100% stop-state=currentColor stop-opacity=0.55></stop></linearGradient><linearGradient x1=50% x2=50% y1=15.24% y2=87.15%><stop offset=0% stop-state=currentColor stop-opacity=0></stop><stop offset=100% stop-state=currentColor stop-opacity=0.55></stop></linearGradient></defs><g fill=none><path d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"transform="translate(1.5 1.625)"></path><path d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"transform="translate(1.5 1.625)">'), _tmpl$2 = /*#__PURE__*/ template("<span>");
+var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=spinner-icon fill=none viewBox="0 0 24 24"><defs><linearGradient x1=50% x2=50% y1=5.271% y2=91.793%><stop offset=0% stop-color=currentColor></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient><linearGradient x1=50% x2=50% y1=15.24% y2=87.15%><stop offset=0% stop-color=currentColor stop-opacity=0></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient></defs><g fill=none><path d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"transform="translate(1.5 1.625)"></path><path d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"transform="translate(1.5 1.625)">'), _tmpl$2 = /*#__PURE__*/ template("<span>");
 const SpinnerSVG = ()=>{
     const id = createUniqueId();
     return (()=>{

package/dist/components/spinner/Spinner.recipe.d.ts

@@ -20,15 +20,16 @@ export declare const spinner: import("solid-layouts").Recipe<{
             readonly lg: "spinner--lg";
             readonly xl: "spinner--xl";
         };
-        readonly state: {
-            readonly neutral: "spinner--neutral";
-            readonly primary: "spinner--primary";
-            readonly secondary: "spinner--secondary";
-            readonly accent: "spinner--accent";
-            readonly success: "spinner--success";
-            readonly warning: "spinner--warning";
-            readonly danger: "spinner--danger";
-            readonly info: "spinner--info";
+        readonly flavor: {
+            readonly current: "spinner--flavor-current";
+            readonly neutral: "spinner--flavor-neutral";
+            readonly primary: "spinner--flavor-primary";
+            readonly secondary: "spinner--flavor-secondary";
+            readonly accent: "spinner--flavor-accent";
+            readonly success: "spinner--flavor-success";
+            readonly warning: "spinner--flavor-warning";
+            readonly destructive: "spinner--flavor-destructive";
+            readonly info: "spinner--flavor-info";
         };
         readonly shape: {
             readonly spinner: "spinner--spinner";
@@ -42,7 +43,7 @@ export declare const spinner: import("solid-layouts").Recipe<{
     };
     readonly defaults: {
         readonly size: "md";
-        readonly state: "neutral";
+        readonly flavor: "current";
         readonly shape: "spinner";
         readonly label: "Loading";
     };

package/dist/components/spinner/Spinner.recipe.js

@@ -15,15 +15,16 @@ const spinner = recipe({
             lg: "spinner--lg",
             xl: "spinner--xl"
         },
-        state: {
-            neutral: "spinner--neutral",
-            primary: "spinner--primary",
-            secondary: "spinner--secondary",
-            accent: "spinner--accent",
-            success: "spinner--success",
-            warning: "spinner--warning",
-            danger: "spinner--danger",
-            info: "spinner--info"
+        flavor: {
+            current: "spinner--flavor-current",
+            neutral: "spinner--flavor-neutral",
+            primary: "spinner--flavor-primary",
+            secondary: "spinner--flavor-secondary",
+            accent: "spinner--flavor-accent",
+            success: "spinner--flavor-success",
+            warning: "spinner--flavor-warning",
+            destructive: "spinner--flavor-destructive",
+            info: "spinner--flavor-info"
         },
         shape: {
             spinner: "spinner--spinner",
@@ -37,7 +38,7 @@ const spinner = recipe({
     },
     defaults: {
         size: "md",
-        state: "neutral",
+        flavor: "current",
         shape: "spinner",
         label: "Loading"
     },
@@ -53,15 +54,16 @@ const spinner = recipe({
                         lg: "spinner--lg",
                         xl: "spinner--xl"
                     },
-                    state: {
-                        neutral: "spinner--neutral",
-                        primary: "spinner--primary",
-                        secondary: "spinner--secondary",
-                        accent: "spinner--accent",
-                        success: "spinner--success",
-                        warning: "spinner--warning",
-                        danger: "spinner--danger",
-                        info: "spinner--info"
+                    flavor: {
+                        current: "spinner--flavor-current",
+                        neutral: "spinner--flavor-neutral",
+                        primary: "spinner--flavor-primary",
+                        secondary: "spinner--flavor-secondary",
+                        accent: "spinner--flavor-accent",
+                        success: "spinner--flavor-success",
+                        warning: "spinner--flavor-warning",
+                        destructive: "spinner--flavor-destructive",
+                        info: "spinner--flavor-info"
                     },
                     shape: {
                         spinner: "spinner--spinner",

package/dist/components/table/ExpandToggle.generated.js

@@ -3,7 +3,7 @@ import { defineComponent } from "solid-layouts/application-boundary";
 import { Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import icon from "../icon/index.js";
-import { componentRecipe } from "./Table.recipe.js";
+import { tableExpandToggleRecipe } from "./Table.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<button>");
 const __solidLayoutExpandToggle = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
@@ -86,7 +86,7 @@ const __solidLayoutExpandToggle = (_stable, p)=>{
     })();
 };
 const ExpandToggle = defineComponent({
-    recipe: componentRecipe,
+    recipe: tableExpandToggleRecipe,
     layout: __solidLayoutExpandToggle,
     embedded: true
 });

package/dist/components/table/InlineConfirm.generated.js

@@ -3,7 +3,7 @@ import { defineComponent } from "solid-layouts/application-boundary";
 import { splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import button_0 from "../button/index.js";
-import { componentRecipe } from "./Table.recipe.js";
+import { tableInlineConfirmRecipe } from "./Table.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template('<div><span class="text-sm text-base-content/70"data-slot=table-inline-confirm-prompt></span><div class="inline-flex items-center gap-2"data-slot=table-inline-confirm-actions>');
 const toButtonFlavor = (variant)=>{
     if ("danger" === variant) return "destructive";
@@ -74,7 +74,7 @@ const __solidLayoutInlineConfirm = (_stable, p)=>{
     })();
 };
 const InlineConfirm = defineComponent({
-    recipe: componentRecipe,
+    recipe: tableInlineConfirmRecipe,
     layout: __solidLayoutInlineConfirm,
     embedded: true
 });

package/dist/components/table/MobileListView.generated.js

@@ -4,7 +4,7 @@ import { For, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { Empty } from "../empty/index.js";
 import icon from "../icon/index.js";
-import { componentRecipe } from "./Table.recipe.js";
+import { tableMobileListViewRecipe } from "./Table.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><ul>"), _tmpl$2 = /*#__PURE__*/ template("<li class=py-8 data-slot=table-mobile-list-view-empty>"), _tmpl$3 = /*#__PURE__*/ template("<li>");
 const __solidLayoutMobileListView = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
@@ -103,7 +103,7 @@ const __solidLayoutMobileListView = (_stable, p)=>{
     })();
 };
 const MobileListView = defineComponent({
-    recipe: componentRecipe,
+    recipe: tableMobileListViewRecipe,
     layout: __solidLayoutMobileListView,
     embedded: true
 });

package/dist/components/table/SortIcon.generated.js

@@ -3,7 +3,7 @@ import { defineComponent } from "solid-layouts/application-boundary";
 import { Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import icon from "../icon/index.js";
-import { componentRecipe } from "./Table.recipe.js";
+import { tableSortIconRecipe } from "./Table.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutSortIcon = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
@@ -65,7 +65,7 @@ const __solidLayoutSortIcon = (_stable, p)=>{
     })();
 };
 const SortIcon = defineComponent({
-    recipe: componentRecipe,
+    recipe: tableSortIconRecipe,
     layout: __solidLayoutSortIcon,
     embedded: true
 });

package/dist/components/table/Table.context.d.ts

@@ -0,0 +1,23 @@
+import { type Accessor, type JSX } from "solid-js";
+export type TableVariant = "primary" | "secondary";
+export type TableSortDirection = "ascending" | "descending";
+export type TableSortDescriptor = {
+    column: string;
+    direction: TableSortDirection;
+};
+export type TableColumnRenderProps = {
+    sortDirection: TableSortDirection | undefined;
+};
+export type TableColumnChildren = JSX.Element | ((props: TableColumnRenderProps) => JSX.Element);
+export type TableContextValue = {
+    variant: Accessor<TableVariant>;
+};
+export declare const TableContext: import("solid-js").Context<TableContextValue | undefined>;
+export type TableContentContextValue = {
+    sortDescriptor: Accessor<TableSortDescriptor | undefined>;
+    onSortChange?: (descriptor: TableSortDescriptor) => void;
+};
+export declare const TableContentContext: import("solid-js").Context<TableContentContextValue | undefined>;
+export declare const useTableContext: () => TableContextValue;
+export declare const useTableContentContext: () => TableContentContextValue;
+export declare const invokeEventHandler: (handler: unknown, event: Event) => void;