@harismawan/stamp-ui 0.1.0 → 0.2.0

package/README.md

@@ -55,8 +55,9 @@ Light/dark mode is managed by the built-in `useThemeStore` (persisted). Omit
 
 ## Components
 
-- **Form:** `Button`, `Input`/`Select`/`Textarea`/`FieldWrap`/`FieldLabel`/`FieldError`, `NumberInput`, `Checkbox`, `Radio`/`RadioGroup`, `Switch`, `Slider`, `ColorPicker`, `IconPicker`
-- **Display:** `Card`, `Badge`, `Tag`, `Avatar`/`AvatarGroup`, `Stat`, `EmptyState`, `Divider`, `Progress`, `Spinner`, `Skeleton`/`SkeletonText`/`SkeletonCircle`/`SkeletonGroup`, `Table` primitives
+- **Form:** `Button`, `Input`/`Select`/`Textarea`/`FieldWrap`/`FieldLabel`/`FieldError`, `NumberInput`, `Checkbox`, `Radio`/`RadioGroup`, `Switch`, `Slider`, `ColorPicker`, `IconPicker`, `Combobox`, `TagInput`, `FileUpload`
+- **Display:** `Card`, `Badge`, `Tag`, `Avatar`/`AvatarGroup`, `Stat`, `EmptyState`, `Divider`, `Progress`, `Spinner`, `Skeleton`/`SkeletonText`/`SkeletonCircle`/`SkeletonGroup`, `Table` primitives, `DataTable`, `TreeView`
+- **Pickers & palette:** `DatePicker`, `DateRangePicker`, `Command`
 - **Overlays:** `Modal`, `Drawer`, `ConfirmDialog` (`confirmDialog`/`ConfirmViewport`), `Toast` (`toast`/`ToastViewport`), `Tooltip`, `Popover`, `Menu`/`MenuButton`/`MenuList`/`MenuItem`, `Alert`
 - **Disclosure & nav:** `Tabs`, `Accordion`, `Breadcrumb`, `Pagination`, `Stepper`
 - **Layout:** `Box`, `Stack`/`HStack`/`VStack`, `Grid`, `Container`

package/dist/GlobalStyles.js

@@ -26,14 +26,11 @@ export const GlobalStyles = createGlobalStyle `
     text-decoration: none;
     transition: color 120ms ${(p) => p.theme.easing.out};
     /*
-     * Hover uses the body text color (theme-aware: ink on cream ~18:1,
-     * cream-white on dark ~17:1), so links stay highly readable on interaction.
-     * The previous primaryHover (bright yellow #FFCB05) dropped to ~1.5:1 on the
-     * cream bg — illegible. An underline provides a non-color affordance too.
+     * Hover darkens to the body text color (theme-aware: ink on cream ~18:1,
+     * cream-white on dark ~17:1) so links stay highly readable. No underline.
      */
     &:hover {
       color: ${(p) => p.theme.colors.text};
-      text-decoration: underline;
     }
   }
 

package/dist/components/Button.js

@@ -38,10 +38,8 @@ const variantMap = {
     ${stamp};
     background: ${(p) => p.theme.colors.primary};
     color: ${(p) => p.theme.colors.primaryInk};
-    &:hover:not(:disabled):not([aria-disabled='true']) {
-      background: ${(p) => p.theme.colors.primaryHover};
-      color: ${(p) => p.theme.colors.primaryInk};
-    }
+    /* Color/background stay constant on hover; the stamp press (translate +
+     * shadow) is the only hover affordance. */
   `,
     ghost: css `
     background: transparent;

package/dist/components/Checkbox.d.ts

@@ -4,5 +4,11 @@ export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<'inpu
     onChange: (checked: boolean) => void;
     label?: string;
     disabled?: boolean;
+    /**
+     * Mixed state (e.g. a "select all" header where only some rows are selected).
+     * Sets the native `input.indeterminate` flag for assistive tech and renders a
+     * visible dash glyph. Only applies while `checked` is false.
+     */
+    indeterminate?: boolean;
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import styled from 'styled-components';
-import { Check } from 'lucide-react';
+import { Check, Minus } from 'lucide-react';
 const Root = styled.label `
   display: inline-flex;
   align-items: center;
@@ -33,7 +33,7 @@ const Box = styled.span `
   flex-shrink: 0;
   border: 2px solid ${(p) => p.theme.colors.border};
   border-radius: ${(p) => p.theme.radii.sm};
-  background: ${(p) => (p.$checked ? p.theme.colors.primary : p.theme.colors.surface)};
+  background: ${(p) => p.$checked || p.$indeterminate ? p.theme.colors.primary : p.theme.colors.surface};
   box-shadow: ${(p) => p.theme.shadow.stampSm};
   color: ${(p) => p.theme.colors.primaryInk};
   transition: background 80ms ${(p) => p.theme.easing.out};
@@ -43,7 +43,15 @@ const Box = styled.span `
     outline-offset: 2px;
   }
 `;
-export const Checkbox = React.forwardRef(({ checked, onChange, label, disabled, ...rest }, ref) => {
-    return (_jsxs(Root, { "$disabled": disabled, children: [_jsx(HiddenInput, { ref: ref, type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked), ...rest }), _jsx(Box, { "$checked": checked, "$disabled": disabled, "aria-hidden": "true", children: checked ? _jsx(Check, { size: 16, strokeWidth: 3 }) : null }), label != null ? _jsx("span", { children: label }) : null] }));
+export const Checkbox = React.forwardRef(({ checked, onChange, label, disabled, indeterminate = false, ...rest }, ref) => {
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current, []);
+    // Mixed state only applies while unchecked; a checked box is never "mixed".
+    const showIndeterminate = indeterminate && !checked;
+    React.useEffect(() => {
+        if (innerRef.current)
+            innerRef.current.indeterminate = showIndeterminate;
+    }, [showIndeterminate]);
+    return (_jsxs(Root, { "$disabled": disabled, children: [_jsx(HiddenInput, { ref: innerRef, type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked), ...rest }), _jsx(Box, { "$checked": checked, "$indeterminate": showIndeterminate, "$disabled": disabled, "aria-hidden": "true", children: checked ? (_jsx(Check, { size: 16, strokeWidth: 3 })) : showIndeterminate ? (_jsx(Minus, { size: 16, strokeWidth: 3 })) : null }), label != null ? _jsx("span", { children: label }) : null] }));
 });
 Checkbox.displayName = 'Checkbox';

package/dist/components/Combobox.d.ts

@@ -0,0 +1,30 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface ComboboxBaseProps {
+    options: ComboboxOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    /** Default: case-insensitive substring match on `label`. */
+    filter?: (opt: ComboboxOption, query: string) => boolean;
+    emptyText?: string;
+    id?: string;
+}
+interface SingleComboboxProps extends ComboboxBaseProps {
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+}
+interface MultiComboboxProps extends ComboboxBaseProps {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+}
+export type ComboboxProps = SingleComboboxProps | MultiComboboxProps;
+export declare function Combobox(props: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Combobox.js

@@ -0,0 +1,352 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { ChevronDown, Check, X } from 'lucide-react';
+import { useFloating, autoUpdate, offset, flip, shift, size, useDismiss, useRole, useListNavigation, useInteractions, FloatingPortal, } from '@floating-ui/react';
+import { Tag } from './Tag';
+const defaultFilter = (opt, query) => opt.label.toLowerCase().includes(query.toLowerCase());
+const Control = styled.div `
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${(p) => p.theme.space[1]};
+  width: 100%;
+  min-width: 0;
+  background: ${(p) => p.theme.colors.surface};
+  color: ${(p) => p.theme.colors.text};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  padding: 7px 10px;
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 1rem;
+  cursor: text;
+  transition: box-shadow 80ms ${(p) => p.theme.easing.out};
+
+  ${(p) => p.$disabled
+    ? `opacity: 0.6; cursor: not-allowed;`
+    : `&:focus-within { box-shadow: ${p.theme.shadow.stamp}; }`}
+`;
+const ControlInput = styled.input `
+  flex: 1 1 60px;
+  min-width: 60px;
+  font-family: inherit;
+  font-size: 1rem;
+  color: ${(p) => p.theme.colors.text};
+  background: transparent;
+  border: none;
+  padding: 4px 0;
+  outline: none;
+
+  &::placeholder {
+    color: ${(p) => p.theme.colors.textSubtle};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+const IconButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin: 0;
+  flex: none;
+  color: ${(p) => p.theme.colors.textMuted};
+  background: transparent;
+  border: none;
+  border-radius: ${(p) => p.theme.radii.xs};
+  cursor: pointer;
+  transition: color 80ms ${(p) => p.theme.easing.out};
+
+  &:hover:not(:disabled) {
+    color: ${(p) => p.theme.colors.text};
+  }
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 1px;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+const Chevron = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: ${(p) => p.theme.colors.textMuted};
+  transition: transform 80ms ${(p) => p.theme.easing.out};
+  transform: rotate(${(p) => (p.$open ? '180deg' : '0deg')});
+`;
+const Listbox = styled.ul `
+  list-style: none;
+  margin: 0;
+  padding: ${(p) => p.theme.space[1]};
+  background: ${(p) => p.theme.colors.surface};
+  color: ${(p) => p.theme.colors.text};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  box-shadow: ${(p) => p.theme.shadow.stamp};
+  font-family: ${(p) => p.theme.font.body};
+  overflow-y: auto;
+  z-index: 1000;
+  outline: none;
+`;
+const OptionRow = styled.li `
+  display: flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[2]};
+  font-size: 14px;
+  font-weight: ${(p) => (p.$selected ? 800 : 600)};
+  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')};
+  opacity: ${(p) => (p.$disabled ? 0.5 : 1)};
+  user-select: none;
+`;
+const OptionLabel = styled.span `
+  flex: 1 1 auto;
+  min-width: 0;
+`;
+const CheckIcon = styled.span `
+  display: inline-flex;
+  flex: none;
+  color: ${(p) => p.theme.colors.text};
+`;
+const EmptyRow = styled.li `
+  font-size: 14px;
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.textSubtle};
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]};
+  user-select: none;
+`;
+export function Combobox(props) {
+    const { options, placeholder, disabled = false, clearable = false, filter = defaultFilter, emptyText = 'No results', id: idProp, } = props;
+    const multiple = props.multiple === true;
+    // ── Normalize selection to string[] internally ───────────────────────────
+    const isControlled = props.value !== undefined;
+    const toArray = (v) => {
+        if (v == null)
+            return [];
+        return Array.isArray(v) ? v : [v];
+    };
+    const [uncontrolled, setUncontrolled] = React.useState(() => toArray(props.value !== undefined ? props.value : props.defaultValue));
+    const selected = isControlled ? toArray(props.value) : uncontrolled;
+    const labelFor = React.useCallback((value) => options.find((o) => o.value === value)?.label ?? '', [options]);
+    // ── Local UI state ────────────────────────────────────────────────────────
+    const reactId = React.useId();
+    const baseId = idProp ?? reactId;
+    const listboxId = `${baseId}-listbox`;
+    const optionId = (index) => `${baseId}-option-${index}`;
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState('');
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    const inputRef = React.useRef(null);
+    const listRef = React.useRef([]);
+    // Single-select: input mirrors the selected option's label when closed.
+    const singleSelectedLabel = !multiple && selected.length > 0 ? labelFor(selected[0]) : '';
+    const filtered = React.useMemo(() => options.filter((opt) => filter(opt, query)), [options, query, filter]);
+    const commitSelection = (next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        if (multiple) {
+            props.onChange?.(next);
+        }
+        else {
+            props.onChange?.(next.length > 0 ? next[0] : null);
+        }
+    };
+    const openList = () => {
+        if (disabled)
+            return;
+        setOpen(true);
+    };
+    const closeList = () => {
+        setOpen(false);
+        setActiveIndex(null);
+        setQuery('');
+    };
+    // ── Floating setup (mirror Popover / DropdownMenu) ────────────────────────
+    const { refs, floatingStyles, context } = useFloating({
+        open,
+        onOpenChange: (next) => {
+            if (next)
+                openList();
+            else
+                closeList();
+        },
+        placement: 'bottom-start',
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(8),
+            flip({ padding: 8 }),
+            shift({ padding: 8 }),
+            size({
+                apply({ rects, elements, availableHeight }) {
+                    Object.assign(elements.floating.style, {
+                        width: `${rects.reference.width}px`,
+                        maxHeight: `${Math.min(260, availableHeight)}px`,
+                    });
+                },
+                padding: 8,
+            }),
+        ],
+    });
+    const disabledIndices = React.useMemo(() => {
+        const indices = [];
+        filtered.forEach((opt, i) => {
+            if (opt.disabled)
+                indices.push(i);
+        });
+        return indices;
+    }, [filtered]);
+    // Escape is handled in `handleKeyDown` to support the two-stage behavior
+    // (first clears a non-empty query, second closes), so disable floating-ui's
+    // own escape-key dismissal here.
+    const dismiss = useDismiss(context, { escapeKey: false });
+    const role = useRole(context, { role: 'listbox' });
+    const listNavigation = useListNavigation(context, {
+        listRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        virtual: true,
+        loop: true,
+        disabledIndices,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        dismiss,
+        role,
+        listNavigation,
+    ]);
+    const selectOption = (opt) => {
+        if (opt.disabled)
+            return;
+        if (multiple) {
+            const exists = selected.includes(opt.value);
+            const next = exists
+                ? selected.filter((v) => v !== opt.value)
+                : [...selected, opt.value];
+            commitSelection(next);
+            // Stay open, clear query, keep focus in input.
+            setQuery('');
+            inputRef.current?.focus();
+        }
+        else {
+            commitSelection([opt.value]);
+            setOpen(false);
+            setActiveIndex(null);
+            setQuery('');
+        }
+    };
+    const handleClear = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        commitSelection([]);
+        setQuery('');
+        inputRef.current?.focus();
+    };
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        setQuery(value);
+        if (!open)
+            openList();
+        // Derive the next list directly from the new value to avoid the stale
+        // `filtered` memo (computed from the previous query). Highlight the first
+        // ENABLED option of the next list, or null if the query is empty / no match.
+        if (value.length === 0) {
+            setActiveIndex(null);
+            return;
+        }
+        const nextFiltered = options.filter((o) => filter(o, value));
+        const firstEnabled = nextFiltered.findIndex((o) => !o.disabled);
+        setActiveIndex(firstEnabled === -1 ? null : firstEnabled);
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        // Two-stage Escape: the first Escape clears a non-empty query but keeps the
+        // list open; a second Escape (empty query) closes the list.
+        if (e.key === 'Escape' && open) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (query !== '') {
+                setQuery('');
+                setActiveIndex(null);
+            }
+            else {
+                closeList();
+            }
+            return;
+        }
+        if (e.key === 'Backspace' && query === '' && multiple && selected.length > 0) {
+            e.preventDefault();
+            commitSelection(selected.slice(0, -1));
+            return;
+        }
+        if (!open && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+            openList();
+            return;
+        }
+        if (e.key === 'Enter') {
+            if (open && activeIndex != null && filtered[activeIndex]) {
+                e.preventDefault();
+                selectOption(filtered[activeIndex]);
+            }
+            return;
+        }
+    };
+    // The text shown in the input. While open we show the live query; when closed
+    // (single) we strictly revert to the selected option's label.
+    const inputValue = multiple ? query : open ? query : singleSelectedLabel;
+    const hasValue = selected.length > 0;
+    const showClear = clearable && hasValue && !disabled;
+    const activeId = activeIndex != null && filtered[activeIndex] ? optionId(activeIndex) : undefined;
+    const referenceProps = getReferenceProps({
+        role: 'combobox',
+        'aria-expanded': open,
+        'aria-controls': listboxId,
+        'aria-autocomplete': 'list',
+        'aria-activedescendant': open ? activeId : undefined,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        onFocus: openList,
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs(Control, { ref: refs.setReference, "$disabled": disabled, onMouseDown: (e) => {
+                    // Clicking the wrapper focuses the input and opens (ignore the inner
+                    // buttons / the input itself, which manage their own behavior).
+                    if (e.target === e.currentTarget && !disabled) {
+                        e.preventDefault();
+                        inputRef.current?.focus();
+                        openList();
+                    }
+                }, children: [multiple &&
+                        selected.map((value) => (_jsx(Tag, { onRemove: disabled
+                                ? undefined
+                                : () => commitSelection(selected.filter((v) => v !== value)), children: labelFor(value) || value }, value))), _jsx(ControlInput, { ref: inputRef, id: baseId, value: inputValue, placeholder: !multiple && hasValue ? undefined : placeholder, disabled: disabled, ...referenceProps }), showClear && (_jsx(IconButton, { type: "button", "aria-label": "Clear selection", onClick: handleClear, children: _jsx(X, { size: 16, strokeWidth: 3, "aria-hidden": "true" }) })), _jsx(Chevron, { "$open": open, "aria-hidden": "true", onMouseDown: (e) => {
+                            e.preventDefault();
+                            if (disabled)
+                                return;
+                            if (open)
+                                closeList();
+                            else {
+                                openList();
+                                inputRef.current?.focus();
+                            }
+                        }, children: _jsx(ChevronDown, { size: 18, strokeWidth: 3 }) })] }), open && (_jsx(FloatingPortal, { children: _jsx(Listbox, { ref: refs.setFloating, id: listboxId, style: floatingStyles, "aria-multiselectable": multiple ? true : undefined, ...getFloatingProps(), children: filtered.length === 0 ? (_jsx(EmptyRow, { children: emptyText })) : (filtered.map((opt, index) => {
+                        const isSelected = selected.includes(opt.value);
+                        const isActive = activeIndex === index;
+                        return (_jsxs(OptionRow, { id: optionId(index), role: "option", "aria-selected": isSelected, "aria-disabled": opt.disabled || undefined, "$active": isActive, "$selected": isSelected, "$disabled": opt.disabled === true, ref: (node) => {
+                                listRef.current[index] = node;
+                            }, ...getItemProps({
+                                onClick(e) {
+                                    e.preventDefault();
+                                    selectOption(opt);
+                                },
+                            }), children: [_jsx(OptionLabel, { children: opt.label }), isSelected && (_jsx(CheckIcon, { children: _jsx(Check, { size: 16, strokeWidth: 3, "aria-hidden": "true" }) }))] }, opt.value));
+                    })) }) }))] }));
+}

package/dist/components/Command.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface CommandItem {
+    id: string;
+    label: string;
+    keywords?: string[];
+    icon?: React.ReactNode;
+    group?: string;
+    shortcut?: string;
+    onSelect: () => void;
+    disabled?: boolean;
+}
+export interface CommandProps {
+    open: boolean;
+    onClose: () => void;
+    items: CommandItem[];
+    placeholder?: string;
+    emptyText?: string;
+    filter?: (item: CommandItem, query: string) => boolean;
+}
+export declare function Command({ open, onClose, items, placeholder, emptyText, filter, }: CommandProps): import("react/jsx-runtime").JSX.Element | null;