@harismawan/stamp-ui 0.1.1 → 0.2.0

package/dist/components/Command.js

@@ -0,0 +1,273 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { Search } from 'lucide-react';
+const defaultFilter = (item, query) => {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return true;
+    if (item.label.toLowerCase().includes(q))
+        return true;
+    return (item.keywords ?? []).some((k) => k.toLowerCase().includes(q));
+};
+const Overlay = styled.div `
+  position: fixed;
+  inset: 0;
+  background: ${(p) => p.theme.colors.overlay};
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  z-index: 50;
+  padding: ${(p) => p.theme.space[9]} ${(p) => p.theme.space[5]} ${(p) => p.theme.space[5]};
+  animation: cfade 120ms ${(p) => p.theme.easing.out};
+
+  @keyframes cfade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const Panel = styled.div `
+  background: ${(p) => p.theme.colors.surface};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.lg};
+  box-shadow: ${(p) => p.theme.shadow.stampLg};
+  width: 100%;
+  max-width: 560px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: crise 140ms ${(p) => p.theme.easing.out};
+
+  @keyframes crise {
+    from {
+      transform: translate(-4px, -4px);
+    }
+    to {
+      transform: none;
+    }
+  }
+`;
+const SearchRow = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[3]};
+  padding: ${(p) => p.theme.space[4]} ${(p) => p.theme.space[5]};
+  border-bottom: 2px solid ${(p) => p.theme.colors.border};
+  color: ${(p) => p.theme.colors.textSubtle};
+`;
+const SearchInput = styled.input `
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 1rem;
+  font-weight: 600;
+  width: 100%;
+  min-width: 0;
+  background: transparent;
+  color: ${(p) => p.theme.colors.text};
+  border: none;
+  padding: 0;
+
+  &::placeholder {
+    color: ${(p) => p.theme.colors.textSubtle};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+const List = styled.ul `
+  list-style: none;
+  margin: 0;
+  padding: ${(p) => p.theme.space[2]};
+  max-height: 340px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.space[1]};
+`;
+const GroupLabel = styled.div `
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 0.75rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: ${(p) => p.theme.colors.textSubtle};
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]} ${(p) => p.theme.space[1]};
+`;
+const Option = styled.li `
+  display: flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[3]};
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 14px;
+  font-weight: 700;
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => (p.$active ? p.theme.colors.primarySoft : 'transparent')};
+  border-radius: ${(p) => p.theme.radii.sm};
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]};
+  cursor: ${(p) => (p.$disabled ? 'not-allowed' : 'pointer')};
+  user-select: none;
+  opacity: ${(p) => (p.$disabled ? 0.55 : 1)};
+  transition: background 80ms ${(p) => p.theme.easing.out};
+`;
+const OptionIcon = styled.span `
+  display: grid;
+  place-items: center;
+  color: ${(p) => p.theme.colors.textMuted};
+`;
+const OptionLabel = styled.span `
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const Shortcut = styled.span `
+  font-family: ${(p) => p.theme.font.mono};
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.textSubtle};
+`;
+const Empty = styled.div `
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 14px;
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.textSubtle};
+  padding: ${(p) => p.theme.space[3]};
+  text-align: center;
+`;
+const Group = styled.li `
+  list-style: none;
+`;
+const GroupOptions = styled.ul `
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.space[1]};
+`;
+export function Command({ open, onClose, items, placeholder, emptyText = 'No results', filter = defaultFilter, }) {
+    const [query, setQuery] = React.useState('');
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const inputRef = React.useRef(null);
+    const baseId = React.useId();
+    const listId = `${baseId}-list`;
+    // Reset query + active index whenever the palette transitions to open.
+    React.useEffect(() => {
+        if (open) {
+            setQuery('');
+            setActiveIndex(0);
+        }
+    }, [open]);
+    // Autofocus the input when opened.
+    React.useEffect(() => {
+        if (open && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [open]);
+    // Escape closes via document keydown (matches Modal).
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [open, onClose]);
+    const visible = React.useMemo(() => items.filter((item) => filter(item, query)), [items, query, filter]);
+    // Build the render structure: ungrouped first, then groups in first-appearance
+    // order. `ordered` flattens this in the SAME order rows are rendered, so keyboard
+    // navigation order matches the visual order.
+    const { ungrouped, groups, ordered } = React.useMemo(() => {
+        const groupOrder = [];
+        const byGroup = new Map();
+        const ungroupedItems = [];
+        for (const item of visible) {
+            if (item.group == null) {
+                ungroupedItems.push(item);
+            }
+            else {
+                let bucket = byGroup.get(item.group);
+                if (bucket == null) {
+                    bucket = [];
+                    byGroup.set(item.group, bucket);
+                    groupOrder.push(item.group);
+                }
+                bucket.push(item);
+            }
+        }
+        const groupRows = groupOrder.map((group, i) => ({
+            group,
+            labelId: `${baseId}-group-${i}`,
+            items: byGroup.get(group) ?? [],
+        }));
+        const orderedItems = [...ungroupedItems];
+        for (const row of groupRows)
+            orderedItems.push(...row.items);
+        return { ungrouped: ungroupedItems, groups: groupRows, ordered: orderedItems };
+    }, [visible, baseId]);
+    // Navigable items are the non-disabled ones, in rendered (visual) order.
+    const navigable = React.useMemo(() => ordered.filter((i) => !i.disabled), [ordered]);
+    // O(1) lookup from item -> its index within `navigable` (used per rendered option).
+    const navIndexByItem = React.useMemo(() => {
+        const map = new Map();
+        navigable.forEach((item, i) => map.set(item, i));
+        return map;
+    }, [navigable]);
+    // Keep activeIndex within the navigable range when the filtered set changes.
+    React.useEffect(() => {
+        setActiveIndex((prev) => {
+            if (navigable.length === 0)
+                return 0;
+            return Math.min(prev, navigable.length - 1);
+        });
+    }, [navigable.length]);
+    const activeId = navigable.length > 0 ? `${baseId}-opt-${navigable[activeIndex]?.id}` : undefined;
+    const selectItem = (item) => {
+        if (item.disabled)
+            return;
+        item.onSelect();
+        onClose();
+    };
+    const handleKeyDown = (e) => {
+        if (navigable.length === 0)
+            return;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActiveIndex((prev) => (prev + 1) % navigable.length);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveIndex((prev) => (prev - 1 + navigable.length) % navigable.length);
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            const item = navigable[activeIndex];
+            if (item)
+                selectItem(item);
+        }
+    };
+    const renderOption = (item) => {
+        const navIndex = navIndexByItem.get(item) ?? -1;
+        const isActive = navIndex !== -1 && navIndex === activeIndex;
+        return (_jsxs(Option, { id: `${baseId}-opt-${item.id}`, role: "option", "aria-selected": isActive, "aria-disabled": item.disabled || undefined, "$active": isActive, "$disabled": !!item.disabled, onMouseDown: (e) => {
+                // Prevent the input from losing focus on click.
+                e.preventDefault();
+            }, onClick: () => selectItem(item), onMouseEnter: () => {
+                if (navIndex !== -1)
+                    setActiveIndex(navIndex);
+            }, children: [item.icon != null && _jsx(OptionIcon, { "aria-hidden": "true", children: item.icon }), _jsx(OptionLabel, { children: item.label }), item.shortcut != null && _jsx(Shortcut, { children: item.shortcut })] }, item.id));
+    };
+    if (!open)
+        return null;
+    return (_jsx(Overlay, { onMouseDown: () => onClose(), children: _jsxs(Panel, { onMouseDown: (e) => e.stopPropagation(), children: [_jsxs(SearchRow, { children: [_jsx(Search, { size: 18, strokeWidth: 2.5, "aria-hidden": "true" }), _jsx(SearchInput, { ref: inputRef, type: "text", role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-activedescendant": activeId, "aria-autocomplete": "list", autoComplete: "off", placeholder: placeholder ?? 'Type a command...', value: query, onChange: (e) => {
+                                setQuery(e.target.value);
+                                setActiveIndex(0);
+                            }, onKeyDown: handleKeyDown })] }), _jsxs(List, { id: listId, role: "listbox", children: [ungrouped.map((item) => renderOption(item)), groups.map(({ group, labelId, items: groupItems }) => (_jsxs(Group, { role: "group", "aria-labelledby": labelId, children: [_jsx(GroupLabel, { id: labelId, children: group }), _jsx(GroupOptions, { children: groupItems.map((item) => renderOption(item)) })] }, labelId)))] }), ordered.length === 0 && _jsx(Empty, { role: "status", children: emptyText })] }) }));
+}

package/dist/components/DataTable.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export interface DataTableColumn<T> {
+    key: string;
+    header: React.ReactNode;
+    /** Default: `String(row[key])`. */
+    render?: (row: T) => React.ReactNode;
+    sortable?: boolean;
+    /**
+     * Default: `row[key]`. A column sorts numerically when every present value is
+     * a number (or a numeric string); missing values (null/undefined/empty) sort
+     * to the end in both directions. Any non-numeric present value falls back to a
+     * locale string comparison for the whole column.
+     */
+    sortAccessor?: (row: T) => string | number;
+    align?: 'left' | 'right' | 'center';
+    width?: string;
+}
+export interface DataTableSort {
+    key: string;
+    dir: 'asc' | 'desc';
+}
+export interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    rowKey: (row: T) => string;
+    selectable?: boolean;
+    selectedKeys?: string[];
+    defaultSelectedKeys?: string[];
+    onSelectionChange?: (keys: string[]) => void;
+    /** Enables internal pagination. */
+    pageSize?: number;
+    defaultSort?: DataTableSort;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    emptyText?: React.ReactNode;
+    caption?: string;
+}
+export declare function DataTable<T>(props: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable.js

@@ -0,0 +1,229 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+import { Table, THead, TBody, Tr, Th, Td } from './Table';
+import { Checkbox } from './Checkbox';
+import { Pagination } from './Pagination';
+const SortButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[1]};
+  width: 100%;
+  justify-content: ${(p) => p.$align === 'right' ? 'flex-end' : p.$align === 'center' ? 'center' : 'flex-start'};
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 800;
+  color: ${(p) => p.theme.colors.text};
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: color 80ms ${(p) => p.theme.easing.out};
+
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 2px;
+  }
+`;
+const FooterCell = styled.td `
+  padding: ${(p) => p.theme.space[3]};
+  border-top: 2px solid ${(p) => p.theme.colors.border};
+`;
+const FooterInner = styled.div `
+  display: flex;
+  justify-content: flex-end;
+`;
+const Caption = styled.caption `
+  caption-side: top;
+  text-align: left;
+  font-family: ${(p) => p.theme.font.body};
+  font-weight: 800;
+  color: ${(p) => p.theme.colors.text};
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]};
+`;
+function defaultAccessor(column) {
+    if (column.sortAccessor)
+        return column.sortAccessor;
+    return (row) => {
+        const v = row[column.key];
+        return typeof v === 'number' ? v : String(v ?? '');
+    };
+}
+function defaultRender(column, row) {
+    if (column.render)
+        return column.render(row);
+    return String(row[column.key] ?? '');
+}
+/** A value that should sort to the end of the column regardless of direction. */
+function isMissing(v) {
+    return v === '' || (typeof v === 'number' && Number.isNaN(v));
+}
+/**
+ * Parses a sort value to a finite number, or `null` if it is not numeric.
+ * Numeric strings (e.g. `"10"`) are accepted so a column backed by strings of
+ * digits still sorts numerically.
+ */
+function toNumber(v) {
+    if (typeof v === 'number')
+        return Number.isFinite(v) ? v : null;
+    if (v.trim() === '')
+        return null;
+    const n = Number(v);
+    return Number.isFinite(n) ? n : null;
+}
+/**
+ * A column is treated as numeric when at least one present value is numeric and
+ * no present value is non-numeric. Missing values (null/undefined/empty) do not
+ * disqualify numeric mode — they simply sort to the end.
+ */
+function isNumericColumn(values) {
+    let sawNumber = false;
+    for (const v of values) {
+        if (isMissing(v))
+            continue;
+        if (toNumber(v) === null)
+            return false;
+        sawNumber = true;
+    }
+    return sawNumber;
+}
+/**
+ * Compares two sort values. In numeric mode both are coerced to numbers and
+ * missing values are pushed to the end (always last, independent of asc/desc).
+ * Otherwise a case-insensitive locale comparison is used.
+ */
+function compareValues(a, b, numeric) {
+    const aMissing = isMissing(a);
+    const bMissing = isMissing(b);
+    // Missing values always sort last; this branch is direction-independent and
+    // the caller must not negate its result (see sortedData).
+    if (aMissing || bMissing) {
+        if (aMissing && bMissing)
+            return 0;
+        return aMissing ? 1 : -1;
+    }
+    if (numeric) {
+        const na = toNumber(a);
+        const nb = toNumber(b);
+        if (na !== null && nb !== null)
+            return na - nb;
+    }
+    return String(a).localeCompare(String(b));
+}
+/** Cycles a column's sort state: unsorted -> asc -> desc -> unsorted. */
+function nextSort(current, key) {
+    if (!current || current.key !== key)
+        return { key, dir: 'asc' };
+    if (current.dir === 'asc')
+        return { key, dir: 'desc' };
+    return null;
+}
+export function DataTable(props) {
+    const { columns, data, rowKey, selectable = false, selectedKeys, defaultSelectedKeys, onSelectionChange, pageSize, defaultSort, onSortChange, emptyText = 'No data', caption, } = props;
+    // --- Sort state (internal; `onSortChange` reports every change). ---
+    const [sort, setSort] = React.useState(defaultSort ?? null);
+    // --- Selection state (controlled when `selectedKeys` provided). ---
+    const selectionControlled = selectedKeys !== undefined;
+    const [uncontrolledSelection, setUncontrolledSelection] = React.useState(() => defaultSelectedKeys ?? []);
+    const selection = selectionControlled ? selectedKeys : uncontrolledSelection;
+    const commitSelection = React.useCallback((next) => {
+        if (!selectionControlled)
+            setUncontrolledSelection(next);
+        onSelectionChange?.(next);
+    }, [selectionControlled, onSelectionChange]);
+    // --- Pagination state. ---
+    const [page, setPage] = React.useState(1);
+    // --- Sorted data (client-side). ---
+    const sortedData = React.useMemo(() => {
+        if (!sort)
+            return data;
+        const column = columns.find((c) => c.key === sort.key);
+        if (!column)
+            return data;
+        const accessor = defaultAccessor(column);
+        const values = data.map(accessor);
+        const numeric = isNumericColumn(values);
+        const copy = [...data];
+        copy.sort((a, b) => {
+            const av = accessor(a);
+            const bv = accessor(b);
+            // Missing values stay last in both directions, so handle them before the
+            // direction flip rather than letting it invert their placement.
+            const aMissing = isMissing(av);
+            const bMissing = isMissing(bv);
+            if (aMissing || bMissing) {
+                if (aMissing && bMissing)
+                    return 0;
+                return aMissing ? 1 : -1;
+            }
+            const result = compareValues(av, bv, numeric);
+            return sort.dir === 'asc' ? result : -result;
+        });
+        return copy;
+    }, [data, sort, columns]);
+    // --- Page slice. ---
+    const pageCount = pageSize ? Math.max(1, Math.ceil(sortedData.length / pageSize)) : 1;
+    const clampedPage = Math.min(page, pageCount);
+    const pageRows = React.useMemo(() => {
+        if (!pageSize)
+            return sortedData;
+        const start = (clampedPage - 1) * pageSize;
+        return sortedData.slice(start, start + pageSize);
+    }, [sortedData, pageSize, clampedPage]);
+    const handleSort = (key) => {
+        const next = nextSort(sort, key);
+        setSort(next);
+        setPage(1); // reset to first page when the sort changes
+        onSortChange?.(next);
+    };
+    const selectionSet = React.useMemo(() => new Set(selection), [selection]);
+    const pageKeys = React.useMemo(() => pageRows.map(rowKey), [pageRows, rowKey]);
+    const selectedOnPage = pageKeys.filter((k) => selectionSet.has(k));
+    const allOnPageSelected = pageKeys.length > 0 && selectedOnPage.length === pageKeys.length;
+    const someOnPageSelected = selectedOnPage.length > 0 && !allOnPageSelected;
+    const toggleAllOnPage = (checked) => {
+        if (checked) {
+            const next = new Set(selectionSet);
+            for (const k of pageKeys)
+                next.add(k);
+            commitSelection([...next]);
+        }
+        else {
+            const pageSet = new Set(pageKeys);
+            commitSelection(selection.filter((k) => !pageSet.has(k)));
+        }
+    };
+    const toggleRow = (key, checked) => {
+        if (checked) {
+            if (selectionSet.has(key))
+                return;
+            commitSelection([...selection, key]);
+        }
+        else {
+            commitSelection(selection.filter((k) => k !== key));
+        }
+    };
+    const totalColumns = columns.length + (selectable ? 1 : 0);
+    return (_jsxs(Table, { children: [caption ? _jsx(Caption, { children: caption }) : null, _jsx(THead, { children: _jsxs(Tr, { children: [selectable ? (_jsx(Th, { style: { width: '1%' }, children: _jsx(Checkbox, { checked: allOnPageSelected, indeterminate: someOnPageSelected, onChange: toggleAllOnPage, "aria-label": "Select all rows on this page" }) })) : null, columns.map((column) => {
+                            const isSorted = sort?.key === column.key;
+                            const ariaSort = !column.sortable
+                                ? undefined
+                                : isSorted
+                                    ? sort.dir === 'asc'
+                                        ? 'ascending'
+                                        : 'descending'
+                                    : 'none';
+                            return (_jsx(Th, { "aria-sort": ariaSort, style: {
+                                    textAlign: column.align ?? 'left',
+                                    width: column.width,
+                                }, children: column.sortable ? (_jsxs(SortButton, { type: "button", "$align": column.align, onClick: () => handleSort(column.key), children: [column.header, isSorted ? (sort.dir === 'asc' ? (_jsx(ChevronUp, { size: 16, strokeWidth: 3, "aria-hidden": "true" })) : (_jsx(ChevronDown, { size: 16, strokeWidth: 3, "aria-hidden": "true" }))) : null] })) : (column.header) }, column.key));
+                        })] }) }), _jsx(TBody, { children: pageRows.length === 0 ? (_jsx(Tr, { children: _jsx(Td, { colSpan: totalColumns, style: { textAlign: 'center' }, children: emptyText }) })) : (pageRows.map((row) => {
+                    const key = rowKey(row);
+                    const rowSelected = selectionSet.has(key);
+                    return (_jsxs(Tr, { children: [selectable ? (_jsx(Td, { style: { width: '1%' }, children: _jsx(Checkbox, { checked: rowSelected, onChange: (checked) => toggleRow(key, checked), "aria-label": `Select row ${key}` }) })) : null, columns.map((column) => (_jsx(Td, { style: {
+                                    textAlign: column.align ?? 'left',
+                                    width: column.width,
+                                }, children: defaultRender(column, row) }, column.key)))] }, key));
+                })) }), pageSize && sortedData.length > 0 ? (_jsx("tfoot", { children: _jsx("tr", { children: _jsx(FooterCell, { colSpan: totalColumns, children: _jsx(FooterInner, { children: _jsx(Pagination, { page: clampedPage, pageCount: pageCount, onChange: setPage }) }) }) }) })) : null] }));
+}

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface DatePickerProps {
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (date: Date | null) => void;
+    min?: Date;
+    max?: Date;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    format?: (date: Date) => string;
+    weekStartsOn?: 0 | 1;
+    id?: string;
+}
+export declare function DatePicker(props: DatePickerProps): React.ReactElement;