@hanzo/ui 8.27.8 → 8.27.10

package/dist/backends/gui/data-table.cjs

@@ -0,0 +1,211 @@
+'use client';"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTable = DataTable;
+exports.DataTableColumnHeader = DataTableColumnHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DataTable — a table over an array, with sorting, a text filter, column
+ * visibility, row selection and pagination composed from one column list.
+ *
+ * A column names an `accessorKey` and, only where the default text rendering
+ * is not enough, a `header`/`cell` render function; the render functions get a
+ * `column`/`table` handle shaped like the one a caller already knows from
+ * TanStack Table (`getIsSorted`, `toggleSorting`, `getIsSelected`, …), so a
+ * column list ports over by keeping its shape and dropping only the
+ * `ColumnDef` import. Rows keep the identity of their position in `data`, so
+ * selection survives a sort or a filter.
+ *
+ * The grid is ONE `Grid` (`../../grid`), header and body cells alike, so every
+ * column shares one set of tracks; each row is a `display: contents` wrapper
+ * carrying `role="row"` so the cells inside stay direct grid children (Grid's
+ * own note: `grid-column` only reaches a direct child) while still grouping
+ * into a real accessible row.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const React = __importStar(require("react"));
+const grid_1 = require("../../grid.cjs");
+const button_1 = require("./button.cjs");
+const checkbox_1 = require("./checkbox.cjs");
+const dropdown_menu_1 = require("./dropdown-menu.cjs");
+const input_1 = require("./input.cjs");
+const slot_1 = require("./slot.cjs");
+const resolve = (def) => ({
+    id: def.id ?? (def.accessorKey != null ? String(def.accessorKey) : ''),
+    def,
+});
+const cycle = (current, id, desc) => {
+    if (typeof desc === 'boolean')
+        return { id, desc };
+    if (!current || current.id !== id)
+        return { id, desc: false };
+    return current.desc ? null : { id, desc: true };
+};
+function DataTable({ columns, data, filterColumnId, filterPlaceholder = 'Filter…', pageSize = 10, emptyMessage = 'No results.', }) {
+    const resolved = React.useMemo(() => columns.map(resolve), [columns]);
+    const [sorting, setSorting] = React.useState(null);
+    const [filterValue, setFilterValue] = React.useState('');
+    const [hidden, setHidden] = React.useState({});
+    const [selected, setSelected] = React.useState({});
+    const [pageIndex, setPageIndex] = React.useState(0);
+    const withIndex = React.useMemo(() => data.map((original, index) => ({ original, index })), [data]);
+    const filtered = React.useMemo(() => {
+        if (!filterColumnId || filterValue === '')
+            return withIndex;
+        const needle = filterValue.toLowerCase();
+        return withIndex.filter(({ original }) => {
+            const value = original[filterColumnId];
+            return String(value ?? '').toLowerCase().includes(needle);
+        });
+    }, [withIndex, filterColumnId, filterValue]);
+    const sorted = React.useMemo(() => {
+        if (!sorting)
+            return filtered;
+        const col = resolved.find((c) => c.id === sorting.id);
+        if (!col?.def.accessorKey)
+            return filtered;
+        const key = col.def.accessorKey;
+        const dir = sorting.desc ? -1 : 1;
+        return [...filtered].sort((a, b) => {
+            const av = a.original[key];
+            const bv = b.original[key];
+            if (av == null && bv == null)
+                return 0;
+            if (av == null)
+                return -1 * dir;
+            if (bv == null)
+                return 1 * dir;
+            return av > bv ? dir : av < bv ? -dir : 0;
+        });
+    }, [filtered, sorting, resolved]);
+    const paginate = pageSize > 0;
+    const pageCount = paginate ? Math.max(1, Math.ceil(sorted.length / pageSize)) : 1;
+    const clampedPageIndex = Math.min(pageIndex, pageCount - 1);
+    const pageRows = paginate
+        ? sorted.slice(clampedPageIndex * pageSize, clampedPageIndex * pageSize + pageSize)
+        : sorted;
+    const makeColumn = React.useCallback((col) => ({
+        id: col.id,
+        getIsSorted: () => (sorting && sorting.id === col.id ? (sorting.desc ? 'desc' : 'asc') : false),
+        toggleSorting: (desc) => setSorting((prev) => cycle(prev, col.id, desc)),
+        getCanHide: () => col.def.enableHiding !== false,
+        getIsVisible: () => hidden[col.id] !== true,
+        toggleVisibility: (visible) => setHidden((prev) => {
+            const isHidden = prev[col.id] === true;
+            const nextHidden = visible === undefined ? !isHidden : !visible;
+            return { ...prev, [col.id]: nextHidden };
+        }),
+    }), [sorting, hidden]);
+    const makeRow = React.useCallback((index, original) => {
+        const id = String(index);
+        return {
+            id,
+            original,
+            getValue: (columnId) => {
+                const col = resolved.find((c) => c.id === columnId);
+                return col?.def.accessorKey ? original[col.def.accessorKey] : undefined;
+            },
+            getIsSelected: () => selected[id] === true,
+            toggleSelected: (value) => setSelected((prev) => ({ ...prev, [id]: value === undefined ? !prev[id] : value })),
+        };
+    }, [resolved, selected]);
+    const instance = React.useMemo(() => ({
+        getAllColumns: () => resolved.map(makeColumn),
+        getColumn: (id) => {
+            const col = resolved.find((c) => c.id === id);
+            return col ? makeColumn(col) : undefined;
+        },
+        getIsAllPageRowsSelected: () => pageRows.length > 0 && pageRows.every(({ index }) => selected[String(index)] === true),
+        getIsSomePageRowsSelected: () => pageRows.some(({ index }) => selected[String(index)] === true) &&
+            !pageRows.every(({ index }) => selected[String(index)] === true),
+        toggleAllPageRowsSelected: (value) => setSelected((prev) => {
+            const allSelected = pageRows.every(({ index }) => prev[String(index)] === true);
+            const next = value === undefined ? !allSelected : value;
+            const out = { ...prev };
+            for (const { index } of pageRows)
+                out[String(index)] = next;
+            return out;
+        }),
+        getFilteredRowModel: () => ({ rows: sorted.map(({ original, index }) => makeRow(index, original)) }),
+        getFilteredSelectedRowModel: () => ({
+            rows: sorted.filter(({ index }) => selected[String(index)] === true).map(({ original, index }) => makeRow(index, original)),
+        }),
+        previousPage: () => setPageIndex((p) => Math.max(0, p - 1)),
+        nextPage: () => setPageIndex((p) => Math.min(pageCount - 1, p + 1)),
+        getCanPreviousPage: () => clampedPageIndex > 0,
+        getCanNextPage: () => clampedPageIndex < pageCount - 1,
+    }), [resolved, makeColumn, makeRow, pageRows, sorted, selected, pageCount, clampedPageIndex]);
+    const visible = resolved.filter((c) => hidden[c.id] !== true);
+    const hideable = resolved.filter((c) => c.def.enableHiding !== false);
+    const hasSelectColumn = resolved.some((c) => c.id === 'select');
+    const selectedCount = instance.getFilteredSelectedRowModel().rows.length;
+    const totalCount = instance.getFilteredRowModel().rows.length;
+    const align = (a) => a === 'right' ? 'right' : a === 'center' ? 'center' : 'left';
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$3", width: "100%", ...(0, slot_1.slot)('data-table'), children: [(filterColumnId || hideable.length > 0) && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$3", ...(0, slot_1.slot)('data-table-toolbar'), children: [filterColumnId ? ((0, jsx_runtime_1.jsx)(input_1.Input, { placeholder: filterPlaceholder, value: filterValue, onChangeText: setFilterValue, maxW: 360, flex: 1, ...(0, slot_1.slot)('data-table-filter') })) : ((0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 })), hideable.length > 0 && ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", size: "sm", ...(0, slot_1.slot)('data-table-view-options'), children: ["Columns ", (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14 })] }) }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuContent, { align: "end", children: hideable.map((col) => {
+                                    const api = makeColumn(col);
+                                    return ((0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuCheckboxItem, { checked: api.getIsVisible(), onCheckedChange: (value) => api.toggleVisibility(!!value), children: col.id }, col.id));
+                                }) })] }))] })), (0, jsx_runtime_1.jsx)(gui_1.YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: visible.length || 1, gap: 0, role: "table", ...(0, slot_1.slot)('data-table-grid'), children: [(0, jsx_runtime_1.jsx)("div", { role: "row", style: { display: 'contents' }, ...(0, slot_1.slot)('data-table-header-row'), children: visible.map((col) => {
+                                const api = makeColumn(col);
+                                const isSelectCol = col.id === 'select' && !col.def.header;
+                                const content = isSelectCol ? ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "Select all", checked: instance.getIsAllPageRowsSelected() ? true : instance.getIsSomePageRowsSelected() ? 'indeterminate' : false, onCheckedChange: (value) => instance.toggleAllPageRowsSelected(!!value) })) : typeof col.def.header === 'function' ? (col.def.header({ column: api, table: instance })) : col.def.header !== undefined ? (col.def.header) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontWeight: "600", color: "$quiet", children: col.id }));
+                                return ((0, jsx_runtime_1.jsx)(grid_1.Cell, { role: "columnheader", "aria-sort": api.getIsSorted() === 'asc' ? 'ascending' : api.getIsSorted() === 'desc' ? 'descending' : 'none', style: {
+                                        padding: 12,
+                                        borderBottom: '1px solid var(--edge)',
+                                        textAlign: align(col.def.align),
+                                    }, ...(0, slot_1.slot)('data-table-head'), children: content }, col.id));
+                            }) }), pageRows.length ? (pageRows.map(({ original, index }, position) => {
+                            const row = makeRow(index, original);
+                            const isSelected = row.getIsSelected();
+                            const isLastRow = position === pageRows.length - 1;
+                            return ((0, jsx_runtime_1.jsx)("div", { role: "row", "data-state": isSelected ? 'selected' : undefined, style: { display: 'contents' }, ...(0, slot_1.slot)('data-table-row'), children: visible.map((col) => {
+                                    const isSelectCol = col.id === 'select' && !col.def.cell;
+                                    const content = isSelectCol ? ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "Select row", checked: isSelected, onCheckedChange: (value) => row.toggleSelected(!!value) })) : col.def.cell ? (col.def.cell({ row, table: instance })) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { children: String(row.getValue(col.id) ?? '') }));
+                                    return ((0, jsx_runtime_1.jsx)(grid_1.Cell, { role: "cell", style: {
+                                            padding: 12,
+                                            borderBottom: isLastRow ? undefined : '1px solid var(--edge)',
+                                            textAlign: align(col.def.align),
+                                            background: isSelected ? 'var(--hover)' : undefined,
+                                        }, ...(0, slot_1.slot)('data-table-cell'), children: content }, col.id));
+                                }) }, row.id));
+                        })) : ((0, jsx_runtime_1.jsx)("div", { role: "row", style: { display: 'contents' }, children: (0, jsx_runtime_1.jsx)(grid_1.Cell, { col: visible.length || 1, role: "cell", style: { padding: 24, textAlign: 'center' }, ...(0, slot_1.slot)('data-table-empty'), children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { color: "$quiet", children: emptyMessage }) }) }))] }) }), (hasSelectColumn || paginate) && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$3", ...(0, slot_1.slot)('data-table-pagination'), children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontSize: "$1", color: "$quiet", children: hasSelectColumn ? `${selectedCount} of ${totalCount} row(s) selected.` : '' }), paginate && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "sm", disabled: !instance.getCanPreviousPage(), onPress: instance.previousPage, children: "Previous" }), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "sm", disabled: !instance.getCanNextPage(), onPress: instance.nextPage, children: "Next" })] }))] }))] }));
+}
+/** A sortable header cell: a ghost button whose icon shows the active direction. */
+function DataTableColumnHeader({ column, title }) {
+    const direction = column.getIsSorted();
+    const Icon = direction === 'asc' ? lucide_icons_2_1.ChevronUp : direction === 'desc' ? lucide_icons_2_1.ChevronDown : lucide_icons_2_1.ChevronsUpDown;
+    return ((0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "ghost", size: "sm", onPress: () => column.toggleSorting(direction === 'asc'), ...(0, slot_1.slot)('data-table-column-header'), children: [title, (0, jsx_runtime_1.jsx)(Icon, { size: 14 })] }));
+}

package/dist/backends/gui/data-table.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+export type DataTableSortDirection = 'asc' | 'desc' | false;
+/** The handle a column's `header` render function gets for its own column. */
+export interface DataTableColumnApi {
+    id: string;
+    getIsSorted: () => DataTableSortDirection;
+    toggleSorting: (desc?: boolean) => void;
+    getCanHide: () => boolean;
+    getIsVisible: () => boolean;
+    toggleVisibility: (visible?: boolean) => void;
+}
+/** The handle a `cell` render function gets for the row it belongs to. */
+export interface DataTableRow<TData> {
+    id: string;
+    original: TData;
+    getValue: (columnId: string) => unknown;
+    getIsSelected: () => boolean;
+    toggleSelected: (selected?: boolean) => void;
+}
+/** The whole-table handle, for a `select-all` header or a footer count. */
+export interface DataTableInstance<TData> {
+    getAllColumns: () => DataTableColumnApi[];
+    getColumn: (id: string) => DataTableColumnApi | undefined;
+    getIsAllPageRowsSelected: () => boolean;
+    getIsSomePageRowsSelected: () => boolean;
+    toggleAllPageRowsSelected: (selected?: boolean) => void;
+    getFilteredRowModel: () => {
+        rows: Array<DataTableRow<TData>>;
+    };
+    getFilteredSelectedRowModel: () => {
+        rows: Array<DataTableRow<TData>>;
+    };
+    previousPage: () => void;
+    nextPage: () => void;
+    getCanPreviousPage: () => boolean;
+    getCanNextPage: () => boolean;
+}
+export interface DataTableColumnDef<TData> {
+    /** Stable id. Defaults to `String(accessorKey)` when omitted. */
+    id?: string;
+    accessorKey?: keyof TData;
+    header?: React.ReactNode | ((ctx: {
+        column: DataTableColumnApi;
+        table: DataTableInstance<TData>;
+    }) => React.ReactNode);
+    cell?: (ctx: {
+        row: DataTableRow<TData>;
+        table: DataTableInstance<TData>;
+    }) => React.ReactNode;
+    enableSorting?: boolean;
+    enableHiding?: boolean;
+    align?: 'left' | 'center' | 'right';
+}
+export interface DataTableProps<TData> {
+    columns: Array<DataTableColumnDef<TData>>;
+    data: TData[];
+    /** Column id filtered by the toolbar's text input. Omit to hide it. */
+    filterColumnId?: string;
+    filterPlaceholder?: string;
+    /** Rows per page. `0` disables pagination (and its footer). Default 10. */
+    pageSize?: number;
+    emptyMessage?: string;
+}
+export declare function DataTable<TData>({ columns, data, filterColumnId, filterPlaceholder, pageSize, emptyMessage, }: DataTableProps<TData>): React.JSX.Element;
+export interface DataTableColumnHeaderProps {
+    column: DataTableColumnApi;
+    title: string;
+}
+/** A sortable header cell: a ghost button whose icon shows the active direction. */
+export declare function DataTableColumnHeader({ column, title }: DataTableColumnHeaderProps): React.JSX.Element;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/backends/gui/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/data-table.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CAAA;AAE3D,8EAA8E;AAC9E,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,WAAW,EAAE,MAAM,sBAAsB,CAAA;IACzC,aAAa,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,MAAM,OAAO,CAAA;IACzB,YAAY,EAAE,MAAM,OAAO,CAAA;IAC3B,gBAAgB,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CAC9C;AAED,0EAA0E;AAC1E,MAAM,WAAW,YAAY,CAAC,KAAK;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,KAAK,CAAA;IACf,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;IACvC,aAAa,EAAE,MAAM,OAAO,CAAA;IAC5B,cAAc,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7C;AAED,2EAA2E;AAC3E,MAAM,WAAW,iBAAiB,CAAC,KAAK;IACtC,aAAa,EAAE,MAAM,kBAAkB,EAAE,CAAA;IACzC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAA;IACzD,wBAAwB,EAAE,MAAM,OAAO,CAAA;IACvC,yBAAyB,EAAE,MAAM,OAAO,CAAA;IACxC,yBAAyB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,mBAAmB,EAAE,MAAM;QAAE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KAAE,CAAA;IAC/D,2BAA2B,EAAE,MAAM;QAAE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KAAE,CAAA;IACvE,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,kBAAkB,EAAE,MAAM,OAAO,CAAA;IACjC,cAAc,EAAE,MAAM,OAAO,CAAA;CAC9B;AAED,MAAM,WAAW,kBAAkB,CAAC,KAAK;IACvC,iEAAiE;IACjE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,KAAK,CAAA;IACzB,MAAM,CAAC,EACH,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,GAAG,EAAE;QAAE,MAAM,EAAE,kBAAkB,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAC/F,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAED,MAAM,WAAW,cAAc,CAAC,KAAK;IACnC,OAAO,EAAE,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAA;IACzC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAsBD,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,OAAO,EACP,IAAI,EACJ,cAAc,EACd,iBAA6B,EAC7B,QAAa,EACb,YAA4B,GAC7B,EAAE,cAAc,CAAC,KAAK,CAAC,qBA8RvB;AAED,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,kBAAkB,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;CACd;AAED,oFAAoF;AACpF,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,0BAA0B,qBAclF"}

package/dist/backends/gui/data-table.js

@@ -0,0 +1,175 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — a table over an array, with sorting, a text filter, column
+ * visibility, row selection and pagination composed from one column list.
+ *
+ * A column names an `accessorKey` and, only where the default text rendering
+ * is not enough, a `header`/`cell` render function; the render functions get a
+ * `column`/`table` handle shaped like the one a caller already knows from
+ * TanStack Table (`getIsSorted`, `toggleSorting`, `getIsSelected`, …), so a
+ * column list ports over by keeping its shape and dropping only the
+ * `ColumnDef` import. Rows keep the identity of their position in `data`, so
+ * selection survives a sort or a filter.
+ *
+ * The grid is ONE `Grid` (`../../grid`), header and body cells alike, so every
+ * column shares one set of tracks; each row is a `display: contents` wrapper
+ * carrying `role="row"` so the cells inside stay direct grid children (Grid's
+ * own note: `grid-column` only reaches a direct child) while still grouping
+ * into a real accessible row.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ChevronDown, ChevronUp, ChevronsUpDown } from '@hanzogui/lucide-icons-2';
+import * as React from 'react';
+import { Cell, Grid } from '../../grid.js';
+import { Button } from './button.js';
+import { Checkbox } from './checkbox.js';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from './dropdown-menu.js';
+import { Input } from './input.js';
+import { slot } from './slot.js';
+const resolve = (def) => ({
+    id: def.id ?? (def.accessorKey != null ? String(def.accessorKey) : ''),
+    def,
+});
+const cycle = (current, id, desc) => {
+    if (typeof desc === 'boolean')
+        return { id, desc };
+    if (!current || current.id !== id)
+        return { id, desc: false };
+    return current.desc ? null : { id, desc: true };
+};
+export function DataTable({ columns, data, filterColumnId, filterPlaceholder = 'Filter…', pageSize = 10, emptyMessage = 'No results.', }) {
+    const resolved = React.useMemo(() => columns.map(resolve), [columns]);
+    const [sorting, setSorting] = React.useState(null);
+    const [filterValue, setFilterValue] = React.useState('');
+    const [hidden, setHidden] = React.useState({});
+    const [selected, setSelected] = React.useState({});
+    const [pageIndex, setPageIndex] = React.useState(0);
+    const withIndex = React.useMemo(() => data.map((original, index) => ({ original, index })), [data]);
+    const filtered = React.useMemo(() => {
+        if (!filterColumnId || filterValue === '')
+            return withIndex;
+        const needle = filterValue.toLowerCase();
+        return withIndex.filter(({ original }) => {
+            const value = original[filterColumnId];
+            return String(value ?? '').toLowerCase().includes(needle);
+        });
+    }, [withIndex, filterColumnId, filterValue]);
+    const sorted = React.useMemo(() => {
+        if (!sorting)
+            return filtered;
+        const col = resolved.find((c) => c.id === sorting.id);
+        if (!col?.def.accessorKey)
+            return filtered;
+        const key = col.def.accessorKey;
+        const dir = sorting.desc ? -1 : 1;
+        return [...filtered].sort((a, b) => {
+            const av = a.original[key];
+            const bv = b.original[key];
+            if (av == null && bv == null)
+                return 0;
+            if (av == null)
+                return -1 * dir;
+            if (bv == null)
+                return 1 * dir;
+            return av > bv ? dir : av < bv ? -dir : 0;
+        });
+    }, [filtered, sorting, resolved]);
+    const paginate = pageSize > 0;
+    const pageCount = paginate ? Math.max(1, Math.ceil(sorted.length / pageSize)) : 1;
+    const clampedPageIndex = Math.min(pageIndex, pageCount - 1);
+    const pageRows = paginate
+        ? sorted.slice(clampedPageIndex * pageSize, clampedPageIndex * pageSize + pageSize)
+        : sorted;
+    const makeColumn = React.useCallback((col) => ({
+        id: col.id,
+        getIsSorted: () => (sorting && sorting.id === col.id ? (sorting.desc ? 'desc' : 'asc') : false),
+        toggleSorting: (desc) => setSorting((prev) => cycle(prev, col.id, desc)),
+        getCanHide: () => col.def.enableHiding !== false,
+        getIsVisible: () => hidden[col.id] !== true,
+        toggleVisibility: (visible) => setHidden((prev) => {
+            const isHidden = prev[col.id] === true;
+            const nextHidden = visible === undefined ? !isHidden : !visible;
+            return { ...prev, [col.id]: nextHidden };
+        }),
+    }), [sorting, hidden]);
+    const makeRow = React.useCallback((index, original) => {
+        const id = String(index);
+        return {
+            id,
+            original,
+            getValue: (columnId) => {
+                const col = resolved.find((c) => c.id === columnId);
+                return col?.def.accessorKey ? original[col.def.accessorKey] : undefined;
+            },
+            getIsSelected: () => selected[id] === true,
+            toggleSelected: (value) => setSelected((prev) => ({ ...prev, [id]: value === undefined ? !prev[id] : value })),
+        };
+    }, [resolved, selected]);
+    const instance = React.useMemo(() => ({
+        getAllColumns: () => resolved.map(makeColumn),
+        getColumn: (id) => {
+            const col = resolved.find((c) => c.id === id);
+            return col ? makeColumn(col) : undefined;
+        },
+        getIsAllPageRowsSelected: () => pageRows.length > 0 && pageRows.every(({ index }) => selected[String(index)] === true),
+        getIsSomePageRowsSelected: () => pageRows.some(({ index }) => selected[String(index)] === true) &&
+            !pageRows.every(({ index }) => selected[String(index)] === true),
+        toggleAllPageRowsSelected: (value) => setSelected((prev) => {
+            const allSelected = pageRows.every(({ index }) => prev[String(index)] === true);
+            const next = value === undefined ? !allSelected : value;
+            const out = { ...prev };
+            for (const { index } of pageRows)
+                out[String(index)] = next;
+            return out;
+        }),
+        getFilteredRowModel: () => ({ rows: sorted.map(({ original, index }) => makeRow(index, original)) }),
+        getFilteredSelectedRowModel: () => ({
+            rows: sorted.filter(({ index }) => selected[String(index)] === true).map(({ original, index }) => makeRow(index, original)),
+        }),
+        previousPage: () => setPageIndex((p) => Math.max(0, p - 1)),
+        nextPage: () => setPageIndex((p) => Math.min(pageCount - 1, p + 1)),
+        getCanPreviousPage: () => clampedPageIndex > 0,
+        getCanNextPage: () => clampedPageIndex < pageCount - 1,
+    }), [resolved, makeColumn, makeRow, pageRows, sorted, selected, pageCount, clampedPageIndex]);
+    const visible = resolved.filter((c) => hidden[c.id] !== true);
+    const hideable = resolved.filter((c) => c.def.enableHiding !== false);
+    const hasSelectColumn = resolved.some((c) => c.id === 'select');
+    const selectedCount = instance.getFilteredSelectedRowModel().rows.length;
+    const totalCount = instance.getFilteredRowModel().rows.length;
+    const align = (a) => a === 'right' ? 'right' : a === 'center' ? 'center' : 'left';
+    return (_jsxs(YStack, { gap: "$3", width: "100%", ...slot('data-table'), children: [(filterColumnId || hideable.length > 0) && (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", ...slot('data-table-toolbar'), children: [filterColumnId ? (_jsx(Input, { placeholder: filterPlaceholder, value: filterValue, onChangeText: setFilterValue, maxW: 360, flex: 1, ...slot('data-table-filter') })) : (_jsx(XStack, { flex: 1 })), hideable.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", ...slot('data-table-view-options'), children: ["Columns ", _jsx(ChevronDown, { size: 14 })] }) }), _jsx(DropdownMenuContent, { align: "end", children: hideable.map((col) => {
+                                    const api = makeColumn(col);
+                                    return (_jsx(DropdownMenuCheckboxItem, { checked: api.getIsVisible(), onCheckedChange: (value) => api.toggleVisibility(!!value), children: col.id }, col.id));
+                                }) })] }))] })), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", children: _jsxs(Grid, { columns: visible.length || 1, gap: 0, role: "table", ...slot('data-table-grid'), children: [_jsx("div", { role: "row", style: { display: 'contents' }, ...slot('data-table-header-row'), children: visible.map((col) => {
+                                const api = makeColumn(col);
+                                const isSelectCol = col.id === 'select' && !col.def.header;
+                                const content = isSelectCol ? (_jsx(Checkbox, { "aria-label": "Select all", checked: instance.getIsAllPageRowsSelected() ? true : instance.getIsSomePageRowsSelected() ? 'indeterminate' : false, onCheckedChange: (value) => instance.toggleAllPageRowsSelected(!!value) })) : typeof col.def.header === 'function' ? (col.def.header({ column: api, table: instance })) : col.def.header !== undefined ? (col.def.header) : (_jsx(SizableText, { fontWeight: "600", color: "$quiet", children: col.id }));
+                                return (_jsx(Cell, { role: "columnheader", "aria-sort": api.getIsSorted() === 'asc' ? 'ascending' : api.getIsSorted() === 'desc' ? 'descending' : 'none', style: {
+                                        padding: 12,
+                                        borderBottom: '1px solid var(--edge)',
+                                        textAlign: align(col.def.align),
+                                    }, ...slot('data-table-head'), children: content }, col.id));
+                            }) }), pageRows.length ? (pageRows.map(({ original, index }, position) => {
+                            const row = makeRow(index, original);
+                            const isSelected = row.getIsSelected();
+                            const isLastRow = position === pageRows.length - 1;
+                            return (_jsx("div", { role: "row", "data-state": isSelected ? 'selected' : undefined, style: { display: 'contents' }, ...slot('data-table-row'), children: visible.map((col) => {
+                                    const isSelectCol = col.id === 'select' && !col.def.cell;
+                                    const content = isSelectCol ? (_jsx(Checkbox, { "aria-label": "Select row", checked: isSelected, onCheckedChange: (value) => row.toggleSelected(!!value) })) : col.def.cell ? (col.def.cell({ row, table: instance })) : (_jsx(SizableText, { children: String(row.getValue(col.id) ?? '') }));
+                                    return (_jsx(Cell, { role: "cell", style: {
+                                            padding: 12,
+                                            borderBottom: isLastRow ? undefined : '1px solid var(--edge)',
+                                            textAlign: align(col.def.align),
+                                            background: isSelected ? 'var(--hover)' : undefined,
+                                        }, ...slot('data-table-cell'), children: content }, col.id));
+                                }) }, row.id));
+                        })) : (_jsx("div", { role: "row", style: { display: 'contents' }, children: _jsx(Cell, { col: visible.length || 1, role: "cell", style: { padding: 24, textAlign: 'center' }, ...slot('data-table-empty'), children: _jsx(SizableText, { color: "$quiet", children: emptyMessage }) }) }))] }) }), (hasSelectColumn || paginate) && (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", ...slot('data-table-pagination'), children: [_jsx(SizableText, { fontSize: "$1", color: "$quiet", children: hasSelectColumn ? `${selectedCount} of ${totalCount} row(s) selected.` : '' }), paginate && (_jsxs(XStack, { gap: "$2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: !instance.getCanPreviousPage(), onPress: instance.previousPage, children: "Previous" }), _jsx(Button, { variant: "outline", size: "sm", disabled: !instance.getCanNextPage(), onPress: instance.nextPage, children: "Next" })] }))] }))] }));
+}
+/** A sortable header cell: a ghost button whose icon shows the active direction. */
+export function DataTableColumnHeader({ column, title }) {
+    const direction = column.getIsSorted();
+    const Icon = direction === 'asc' ? ChevronUp : direction === 'desc' ? ChevronDown : ChevronsUpDown;
+    return (_jsxs(Button, { variant: "ghost", size: "sm", onPress: () => column.toggleSorting(direction === 'asc'), ...slot('data-table-column-header'), children: [title, _jsx(Icon, { size: 14 })] }));
+}
+//# sourceMappingURL=data-table.js.map

package/dist/backends/gui/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../../../src/backends/gui/data-table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACxD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACjF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAmE7B,MAAM,OAAO,GAAG,CAAS,GAA8B,EAAmB,EAAE,CAAC,CAAC;IAC5E,EAAE,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACtE,GAAG;CACJ,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,CACZ,OAA6C,EAC7C,EAAU,EACV,IAAkC,EACI,EAAE;IACxC,IAAI,OAAO,IAAI,KAAK,SAAS;QAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAA;IAClD,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE;QAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;IAC7D,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;AACjD,CAAC,CAAA;AAED,MAAM,UAAU,SAAS,CAAQ,EAC/B,OAAO,EACP,IAAI,EACJ,cAAc,EACd,iBAAiB,GAAG,SAAS,EAC7B,QAAQ,GAAG,EAAE,EACb,YAAY,GAAG,aAAa,GACN;IACtB,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,OAAc,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAE5E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAuC,IAAI,CAAC,CAAA;IACxF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAA0B,EAAE,CAAC,CAAA;IACvE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAA0B,EAAE,CAAC,CAAA;IAC3E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEnD,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEnG,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,CAAC,cAAc,IAAI,WAAW,KAAK,EAAE;YAAE,OAAO,SAAS,CAAA;QAC3D,MAAM,MAAM,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;QACxC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YACvC,MAAM,KAAK,GAAI,QAAoC,CAAC,cAAc,CAAC,CAAA;YACnE,OAAO,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;QAC3D,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,CAAA;IAE5C,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,OAAO;YAAE,OAAO,QAAQ,CAAA;QAC7B,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC,CAAA;QACrD,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,WAAW;YAAE,OAAO,QAAQ,CAAA;QAC1C,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,WAAW,CAAA;QAC/B,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACjC,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACjC,MAAM,EAAE,GAAI,CAAC,CAAC,QAAoC,CAAC,GAAa,CAAC,CAAA;YACjE,MAAM,EAAE,GAAI,CAAC,CAAC,QAAoC,CAAC,GAAa,CAAC,CAAA;YACjE,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE,IAAI,IAAI;gBAAE,OAAO,CAAC,CAAA;YACtC,IAAI,EAAE,IAAI,IAAI;gBAAE,OAAO,CAAC,CAAC,GAAG,GAAG,CAAA;YAC/B,IAAI,EAAE,IAAI,IAAI;gBAAE,OAAO,CAAC,GAAG,GAAG,CAAA;YAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;QAC3C,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEjC,MAAM,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAA;IAC7B,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACjF,MAAM,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,GAAG,CAAC,CAAC,CAAA;IAC3D,MAAM,QAAQ,GAAG,QAAQ;QACvB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,GAAG,QAAQ,EAAE,gBAAgB,GAAG,QAAQ,GAAG,QAAQ,CAAC;QACnF,CAAC,CAAC,MAAM,CAAA;IAEV,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,GAAoB,EAAsB,EAAE,CAAC,CAAC;QAC7C,EAAE,EAAE,GAAG,CAAC,EAAE;QACV,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC/F,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QACxE,UAAU,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,YAAY,KAAK,KAAK;QAChD,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,IAAI;QAC3C,gBAAgB,EAAE,CAAC,OAAO,EAAE,EAAE,CAC5B,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE;YACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;YACtC,MAAM,UAAU,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;YAC/D,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,CAAA;QAC1C,CAAC,CAAC;KACL,CAAC,EACF,CAAC,OAAO,EAAE,MAAM,CAAC,CAClB,CAAA;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B,CAAC,KAAa,EAAE,QAAe,EAAuB,EAAE;QACtD,MAAM,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;QACxB,OAAO;YACL,EAAE;YACF,QAAQ;YACR,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACrB,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAA;gBACnD,OAAO,GAAG,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAAE,QAAoC,CAAC,GAAG,CAAC,GAAG,CAAC,WAAqB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAChH,CAAC;YACD,aAAa,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,IAAI;YAC1C,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE,CACxB,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;SACtF,CAAA;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,CAAA;IAED,MAAM,QAAQ,GAA6B,KAAK,CAAC,OAAO,CACtD,GAAG,EAAE,CAAC,CAAC;QACL,aAAa,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;QAC7C,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE;YAChB,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;YAC7C,OAAO,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QAC1C,CAAC;QACD,wBAAwB,EAAE,GAAG,EAAE,CAC7B,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC;QACxF,yBAAyB,EAAE,GAAG,EAAE,CAC9B,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC;YAC9D,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC;QAClE,yBAAyB,EAAE,CAAC,KAAK,EAAE,EAAE,CACnC,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE;YACnB,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAA;YAC/E,MAAM,IAAI,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAA;YACvD,MAAM,GAAG,GAAG,EAAE,GAAG,IAAI,EAAE,CAAA;YACvB,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,QAAQ;gBAAE,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAA;YAC3D,OAAO,GAAG,CAAA;QACZ,CAAC,CAAC;QACJ,mBAAmB,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC;QACpG,2BAA2B,EAAE,GAAG,EAAE,CAAC,CAAC;YAClC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;SAC5H,CAAC;QACF,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QAC3D,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QACnE,kBAAkB,EAAE,GAAG,EAAE,CAAC,gBAAgB,GAAG,CAAC;QAC9C,cAAc,EAAE,GAAG,EAAE,CAAC,gBAAgB,GAAG,SAAS,GAAG,CAAC;KACvD,CAAC,EACF,CAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,CAAC,CACzF,CAAA;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;IAC7D,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,KAAK,KAAK,CAAC,CAAA;IACrE,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAA;IAC/D,MAAM,aAAa,GAAG,QAAQ,CAAC,2BAA2B,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACxE,MAAM,UAAU,GAAG,QAAQ,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IAE7D,MAAM,KAAK,GAAG,CAAC,CAAqC,EAAE,EAAE,CACtD,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;IAE9D,OAAO,CACL,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,MAAM,KAAK,IAAI,CAAC,YAAY,CAAC,aACjD,CAAC,cAAc,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAC1C,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,EAAC,GAAG,EAAC,IAAI,KAAK,IAAI,CAAC,oBAAoB,CAAC,aACnF,cAAc,CAAC,CAAC,CAAC,CAChB,KAAC,KAAK,IACJ,WAAW,EAAE,iBAAiB,EAC9B,KAAK,EAAE,WAAW,EAClB,YAAY,EAAE,cAAc,EAC5B,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,CAAC,KACH,IAAI,CAAC,mBAAmB,CAAC,GAC7B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,GAAI,CACpB,EACA,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACtB,MAAC,YAAY,eACX,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,MAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,KAAK,IAAI,CAAC,yBAAyB,CAAC,yBAC7D,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,IAC1B,GACW,EACtB,KAAC,mBAAmB,IAAC,KAAK,EAAC,KAAK,YAC7B,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oCACpB,MAAM,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAA;oCAC3B,OAAO,CACL,KAAC,wBAAwB,IAEvB,OAAO,EAAE,GAAG,CAAC,YAAY,EAAE,EAC3B,eAAe,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,YAEjE,GAAG,CAAC,EAAE,IAJF,GAAG,CAAC,EAAE,CAKc,CAC5B,CAAA;gCACH,CAAC,CAAC,GACkB,IACT,CAChB,IACM,CACV,EAED,KAAC,MAAM,IAAC,WAAW,EAAE,CAAC,EAAE,WAAW,EAAC,cAAc,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,YAC/E,MAAC,IAAI,IAAC,OAAO,EAAE,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,OAAO,KAAK,IAAI,CAAC,iBAAiB,CAAC,aAClF,cAAK,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,KAAM,IAAI,CAAC,uBAAuB,CAAC,YAC9E,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gCACnB,MAAM,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAA;gCAC3B,MAAM,WAAW,GAAG,GAAG,CAAC,EAAE,KAAK,QAAQ,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAA;gCAC1D,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,CAC5B,KAAC,QAAQ,kBACI,YAAY,EACvB,OAAO,EAAE,QAAQ,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,yBAAyB,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,EACpH,eAAe,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,GAChF,CACH,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,CACzC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CACjD,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CACjC,GAAG,CAAC,GAAG,CAAC,MAAM,CACf,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,YACzC,GAAG,CAAC,EAAE,GACK,CACf,CAAA;gCACD,OAAO,CACL,KAAC,IAAI,IAEH,IAAI,EAAC,cAAc,eAEjB,GAAG,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,EAElG,KAAK,EAAE;wCACL,OAAO,EAAE,EAAE;wCACX,YAAY,EAAE,uBAAuB;wCACrC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC;qCAChC,KACG,IAAI,CAAC,iBAAiB,CAAC,YAE1B,OAAO,IAZH,GAAG,CAAC,EAAE,CAaN,CACR,CAAA;4BACH,CAAC,CAAC,GACE,EAEL,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CACjB,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE;4BAC7C,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;4BACpC,MAAM,UAAU,GAAG,GAAG,CAAC,aAAa,EAAE,CAAA;4BACtC,MAAM,SAAS,GAAG,QAAQ,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;4BAClD,OAAO,CACL,cAEE,IAAI,EAAC,KAAK,gBACE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC/C,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,KAC1B,IAAI,CAAC,gBAAgB,CAAC,YAEzB,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oCACnB,MAAM,WAAW,GAAG,GAAG,CAAC,EAAE,KAAK,QAAQ,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAA;oCACxD,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,CAC5B,KAAC,QAAQ,kBACI,YAAY,EACvB,OAAO,EAAE,UAAU,EACnB,eAAe,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,GAChE,CACH,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CACvC,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,cAAE,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAe,CAChE,CAAA;oCACD,OAAO,CACL,KAAC,IAAI,IAEH,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;4CACL,OAAO,EAAE,EAAE;4CACX,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB;4CAC7D,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC;4CAC/B,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;yCACpD,KACG,IAAI,CAAC,iBAAiB,CAAC,YAE1B,OAAO,IAVH,GAAG,CAAC,EAAE,CAWN,CACR,CAAA;gCACH,CAAC,CAAC,IAlCG,GAAG,CAAC,EAAE,CAmCP,CACP,CAAA;wBACH,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,cAAK,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YAC5C,KAAC,IAAI,IACH,GAAG,EAAE,OAAO,CAAC,MAAM,IAAI,CAAC,EACxB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,KACvC,IAAI,CAAC,kBAAkB,CAAC,YAE5B,KAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,YAAE,YAAY,GAAe,GACnD,GACH,CACP,IACI,GACA,EAER,CAAC,eAAe,IAAI,QAAQ,CAAC,IAAI,CAChC,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,EAAC,GAAG,EAAC,IAAI,KAAK,IAAI,CAAC,uBAAuB,CAAC,aACvF,KAAC,WAAW,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,YACtC,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,OAAO,UAAU,mBAAmB,CAAC,CAAC,CAAC,EAAE,GAChE,EACb,QAAQ,IAAI,CACX,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,aACd,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,CAAC,QAAQ,CAAC,kBAAkB,EAAE,EACxC,OAAO,EAAE,QAAQ,CAAC,YAAY,yBAGvB,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,QAAQ,qBAE3F,IACF,CACV,IACM,CACV,IACM,CACV,CAAA;AACH,CAAC;AAOD,oFAAoF;AACpF,MAAM,UAAU,qBAAqB,CAAC,EAAE,MAAM,EAAE,KAAK,EAA8B;IACjF,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,EAAE,CAAA;IACtC,MAAM,IAAI,GAAG,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAA;IAClG,OAAO,CACL,MAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,KAAK,KAAK,CAAC,KACpD,IAAI,CAAC,0BAA0B,CAAC,aAEnC,KAAK,EACN,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,IACX,CACV,CAAA;AACH,CAAC"}

package/dist/backends/gui/date-picker.cjs

@@ -0,0 +1,66 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = DatePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DatePicker — a button that opens a calendar in a popover, for picking one
+ * date (`mode="single"`, the default) or a range (`mode="range"`), with an
+ * optional list of quick presets shown above the calendar.
+ *
+ * The trigger reads the current pick, or `placeholder` while empty. `selected`
+ * and `onSelect` name the value the same way `Calendar` does, since this is a
+ * `Calendar` with a trigger and a panel in front of it, not a different
+ * contract. Picking a single date closes the popover; a range stays open
+ * until both ends are set. `disabled` marks days that cannot be picked, same
+ * contract as `Calendar`.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const button_1 = require("./button.cjs");
+const calendar_1 = require("./calendar.cjs");
+const popover_1 = require("./popover.cjs");
+const select_1 = require("./select.cjs");
+const slot_1 = require("./slot.cjs");
+const MONTHS = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
+const format = (d) => `${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+function DatePicker(props) {
+    const { placeholder = 'Pick a date', disabled, className, width = 280 } = props;
+    const isRange = props.mode === 'range';
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [ownDate, setOwnDate] = (0, react_1.useState)(isRange ? undefined : props.selected);
+    const [ownRange, setOwnRange] = (0, react_1.useState)(isRange ? props.selected : undefined);
+    const date = !isRange ? (props.selected ?? ownDate) : undefined;
+    const range = isRange ? (props.selected ?? ownRange) : undefined;
+    const selectDate = (d) => {
+        setOwnDate(d);
+        props.onSelect?.(d);
+        setOpen(false);
+    };
+    const selectRange = (r) => {
+        setOwnRange(r);
+        props.onSelect?.(r);
+    };
+    const label = isRange
+        ? range?.from
+            ? range.to && !sameDay(range.to, range.from)
+                ? `${format(range.from)} - ${format(range.to)}`
+                : format(range.from)
+            : placeholder
+        : date
+            ? format(date)
+            : placeholder;
+    const empty = isRange ? !range?.from : !date;
+    const presets = !isRange ? props.presets : undefined;
+    return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('date-picker-trigger'), "data-empty": empty || undefined, variant: "outline", width: width, justify: "flex-start", className: className, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Calendar, { size: 16 }), empty ? (0, jsx_runtime_1.jsx)(gui_1.SizableText, { color: "$quiet", children: label }) : label] }) }), (0, jsx_runtime_1.jsxs)(popover_1.PopoverContent, { ...(0, slot_1.slot)('date-picker-content'), width: "auto", p: 0, align: "start", children: [presets && presets.length > 0 && ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('date-picker-presets'), p: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsxs)(select_1.Select, { onValueChange: (value) => {
+                                const days = Number(value);
+                                const picked = new Date();
+                                picked.setDate(picked.getDate() + days);
+                                selectDate(picked);
+                            }, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { ...(0, slot_1.slot)('date-picker-preset-trigger'), children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: presets.map((preset) => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: String(preset.days), children: preset.label }, preset.days))) })] }) })), isRange ? ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", selected: range, onSelect: selectRange, defaultMonth: range?.from, numberOfMonths: props.numberOfMonths ?? 2, disabled: disabled, initialFocus: true })) : ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", selected: date, onSelect: selectDate, disabled: disabled, initialFocus: true }))] })] }));
+}

package/dist/backends/gui/date-picker.d.ts

@@ -0,0 +1,29 @@
+import type { CalendarRange } from './calendar.js';
+/** A quick pick offered above the calendar: `label` shown, `days` from today. */
+export interface DatePickerPreset {
+    label: string;
+    days: number;
+}
+interface DatePickerSharedProps {
+    placeholder?: string;
+    disabled?: (date: Date) => boolean;
+    className?: string;
+    width?: number;
+}
+export interface DatePickerSingleProps extends DatePickerSharedProps {
+    mode?: 'single';
+    selected?: Date;
+    onSelect?: (date: Date | undefined) => void;
+    /** Quick picks (e.g. "Today", "In a week") shown above the calendar. Single mode only. */
+    presets?: DatePickerPreset[];
+}
+export interface DatePickerRangeProps extends DatePickerSharedProps {
+    mode: 'range';
+    selected?: CalendarRange;
+    onSelect?: (range: CalendarRange | undefined) => void;
+    numberOfMonths?: number;
+}
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+export declare function DatePicker(props: DatePickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/backends/gui/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/date-picker.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAe/C,iFAAiF;AACjF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAClE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAC3C,0FAA0F;IAC1F,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB;IACjE,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAA;IACrD,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAE1E,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BA6FhD"}