@harismawan/stamp-ui 0.1.0 → 0.2.0

package/dist/components/TreeView.js

@@ -0,0 +1,282 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { ChevronRight } from 'lucide-react';
+const Root = styled.div `
+  font-family: ${(p) => p.theme.font.body};
+  color: ${(p) => p.theme.colors.text};
+`;
+const Group = styled.div `
+  /* role="group" container for a branch's children. */
+`;
+// The treeitem element itself. It owns focus (roving tabIndex) so the focus
+// ring lives here, but the visual row layout lives in the presentational Row
+// nested inside it. This lets the treeitem OWN its child role="group".
+const Item = styled.div `
+  outline: none;
+  border-radius: ${(p) => p.theme.radii.sm};
+
+  &:focus-visible {
+    box-shadow: ${(p) => p.theme.shadow.stamp};
+  }
+`;
+const Row = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[2]};
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]};
+  padding-left: calc(
+    ${(p) => p.theme.space[3]} + ${(p) => p.$level - 1} * ${(p) => p.theme.space[4]}
+  );
+  border-radius: ${(p) => p.theme.radii.sm};
+  font-size: 0.95rem;
+  font-weight: ${(p) => (p.$selected ? 800 : 600)};
+  background: ${(p) => (p.$selected ? p.theme.colors.primarySoft : 'transparent')};
+  color: ${(p) => p.theme.colors.text};
+  cursor: ${(p) => (p.$disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${(p) => (p.$disabled ? 0.5 : 1)};
+  user-select: none;
+  transition: background 80ms ${(p) => p.theme.easing.out};
+`;
+const Toggle = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  color: ${(p) => p.theme.colors.textMuted};
+  transition: transform 80ms ${(p) => p.theme.easing.out};
+  transform: rotate(${(p) => (p.$expanded ? '90deg' : '0deg')});
+`;
+// Reserves the same horizontal space as the chevron for leaf nodes so labels
+// line up with their sibling branches.
+const TogglePlaceholder = styled.span `
+  display: inline-flex;
+  flex: none;
+  width: 18px;
+  height: 18px;
+`;
+const IconSlot = styled.span `
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+`;
+const Label = styled.span `
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+export function TreeView({ nodes, expandedIds, defaultExpandedIds, onExpandedChange, selectedId, defaultSelectedId, onSelect, id: idProp, }) {
+    const reactId = React.useId();
+    const baseId = idProp ?? reactId;
+    const expandedControlled = expandedIds !== undefined;
+    const selectedControlled = selectedId !== undefined;
+    const [expandedUncontrolled, setExpandedUncontrolled] = React.useState(() => defaultExpandedIds ?? []);
+    const [selectedUncontrolled, setSelectedUncontrolled] = React.useState(() => defaultSelectedId ?? null);
+    const expanded = expandedControlled ? expandedIds : expandedUncontrolled;
+    const selected = selectedControlled ? selectedId : selectedUncontrolled;
+    const expandedSet = React.useMemo(() => new Set(expanded), [expanded]);
+    // Flatten the tree into the order treeitems are visible on screen, honoring
+    // the current expanded set. This drives roving tabindex + keyboard nav.
+    const visible = React.useMemo(() => {
+        const out = [];
+        const walk = (list, level, parentId) => {
+            for (const node of list) {
+                const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+                const isExpanded = hasChildren && expandedSet.has(node.id);
+                out.push({ node, level, parentId, hasChildren, expanded: isExpanded });
+                if (isExpanded && node.children) {
+                    walk(node.children, level + 1, node.id);
+                }
+            }
+        };
+        walk(nodes, 1, null);
+        return out;
+    }, [nodes, expandedSet]);
+    // The treeitem that owns tabIndex 0 (roving). Falls back to the first
+    // enabled visible item if the active one disappears (e.g. parent collapsed).
+    const [activeId, setActiveId] = React.useState(null);
+    const firstEnabledId = React.useMemo(() => {
+        const found = visible.find((v) => !v.node.disabled);
+        return found ? found.node.id : null;
+    }, [visible]);
+    const effectiveActiveId = activeId !== null && visible.some((v) => v.node.id === activeId) ? activeId : firstEnabledId;
+    const itemRefs = React.useRef(new Map());
+    const focusItem = React.useCallback((nodeId) => {
+        const el = itemRefs.current.get(nodeId);
+        if (el)
+            el.focus();
+    }, []);
+    const setExpanded = React.useCallback((next) => {
+        if (!expandedControlled)
+            setExpandedUncontrolled(next);
+        onExpandedChange?.(next);
+    }, [expandedControlled, onExpandedChange]);
+    const toggleExpanded = React.useCallback((nodeId) => {
+        const next = expandedSet.has(nodeId)
+            ? expanded.filter((x) => x !== nodeId)
+            : [...expanded, nodeId];
+        setExpanded(next);
+    }, [expanded, expandedSet, setExpanded]);
+    const expand = React.useCallback((nodeId) => {
+        if (expandedSet.has(nodeId))
+            return;
+        setExpanded([...expanded, nodeId]);
+    }, [expanded, expandedSet, setExpanded]);
+    const collapse = React.useCallback((nodeId) => {
+        if (!expandedSet.has(nodeId))
+            return;
+        setExpanded(expanded.filter((x) => x !== nodeId));
+    }, [expanded, expandedSet, setExpanded]);
+    const select = React.useCallback((node) => {
+        if (node.disabled)
+            return;
+        if (!selectedControlled)
+            setSelectedUncontrolled(node.id);
+        onSelect?.(node.id);
+    }, [selectedControlled, onSelect]);
+    const moveTo = React.useCallback((nodeId) => {
+        setActiveId(nodeId);
+        focusItem(nodeId);
+    }, [focusItem]);
+    // Tracks whether focus currently lives inside this tree, so we only re-target
+    // focus after a collapse if the user was actually navigating the tree.
+    const treeHadFocus = React.useRef(false);
+    // When the focused treeitem leaves the visible set (e.g. an ancestor is
+    // collapsed and the focused child unmounts), DOM focus would otherwise drop to
+    // <body>. If the tree held focus, re-target it to the fallback
+    // (effectiveActiveId) so keyboard navigation keeps working.
+    React.useEffect(() => {
+        if (effectiveActiveId === null || !treeHadFocus.current)
+            return;
+        const active = document.activeElement;
+        const focusInsideTree = active instanceof HTMLElement &&
+            Array.from(itemRefs.current.values()).includes(active);
+        // Focus is still on a live treeitem in this tree — nothing to fix.
+        if (focusInsideTree)
+            return;
+        // Focus was lost (dropped to <body> or null) because the focused item
+        // unmounted. Pull it back to the fallback item.
+        if (active === null || active === document.body) {
+            focusItem(effectiveActiveId);
+        }
+    }, [effectiveActiveId, visible, focusItem]);
+    const handleKeyDown = (e, item) => {
+        // Treeitems are nested in the DOM (a parent treeitem OWNS its child
+        // role="group"), so a keydown on a child bubbles up to every ancestor
+        // treeitem's handler. Only let the treeitem the event actually originated on
+        // act, otherwise an ancestor would override the navigation/selection.
+        if (e.target !== e.currentTarget)
+            return;
+        const index = visible.findIndex((v) => v.node.id === item.node.id);
+        if (index === -1)
+            return;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                if (index < visible.length - 1)
+                    moveTo(visible[index + 1].node.id);
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                if (index > 0)
+                    moveTo(visible[index - 1].node.id);
+                break;
+            }
+            case 'ArrowRight': {
+                e.preventDefault();
+                if (item.hasChildren) {
+                    if (!item.expanded) {
+                        expand(item.node.id);
+                    }
+                    else if (index < visible.length - 1 && visible[index + 1].parentId === item.node.id) {
+                        moveTo(visible[index + 1].node.id);
+                    }
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                e.preventDefault();
+                if (item.hasChildren && item.expanded) {
+                    collapse(item.node.id);
+                }
+                else if (item.parentId !== null) {
+                    moveTo(item.parentId);
+                }
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                e.preventDefault();
+                select(item.node);
+                break;
+            }
+            case 'Home': {
+                e.preventDefault();
+                if (visible.length > 0)
+                    moveTo(visible[0].node.id);
+                break;
+            }
+            case 'End': {
+                e.preventDefault();
+                if (visible.length > 0)
+                    moveTo(visible[visible.length - 1].node.id);
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    // Recursive renderer. The treeitem element CONTAINS both its presentational
+    // row and (when expanded) the nested role="group" of its children, so the
+    // ARIA ownership mirrors the tree hierarchy: tree -> treeitem -> group ->
+    // treeitem. `parentId` is threaded through so ArrowLeft can move to the parent
+    // treeitem.
+    const renderNodes = (list, level, parentId) => list.map((node) => {
+        const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+        const isExpanded = hasChildren && expandedSet.has(node.id);
+        const isSelected = selected === node.id;
+        const isActive = effectiveActiveId === node.id;
+        const item = { node, level, parentId, hasChildren, expanded: isExpanded };
+        return (_jsxs(Item, { ref: (el) => {
+                if (el)
+                    itemRefs.current.set(node.id, el);
+                else
+                    itemRefs.current.delete(node.id);
+            }, id: `${baseId}-item-${node.id}`, role: "treeitem", "aria-level": level, "aria-selected": isSelected, "aria-expanded": hasChildren ? isExpanded : undefined, "aria-disabled": node.disabled || undefined, "aria-labelledby": `${baseId}-label-${node.id}`, tabIndex: isActive ? 0 : -1, onKeyDown: (e) => handleKeyDown(e, item), 
+            // Selection lives on the treeitem element itself (the focusable,
+            // interactive node), so clicking anywhere on the row — or the treeitem
+            // padding — selects it, matching Enter/Space. stopPropagation keeps a
+            // click from bubbling to an ANCESTOR treeitem (which now DOM-contains
+            // this one) and selecting that instead.
+            onClick: (e) => {
+                e.stopPropagation();
+                if (node.disabled)
+                    return;
+                setActiveId(node.id);
+                select(node);
+            }, children: [_jsxs(Row, { "$selected": isSelected, "$disabled": node.disabled === true, "$level": level, children: [hasChildren ? (_jsx(Toggle, { "$expanded": isExpanded, onClick: (e) => {
+                                e.stopPropagation();
+                                if (node.disabled)
+                                    return;
+                                setActiveId(node.id);
+                                toggleExpanded(node.id);
+                            }, children: _jsx(ChevronRight, { size: 16, "aria-hidden": "true" }) })) : (_jsx(TogglePlaceholder, { "aria-hidden": "true" })), node.icon != null && _jsx(IconSlot, { "aria-hidden": "true", children: node.icon }), _jsx(Label, { id: `${baseId}-label-${node.id}`, children: node.label })] }), hasChildren && isExpanded && (_jsx(Group, { role: "group", children: renderNodes(node.children, level + 1, node.id) }))] }, node.id));
+    });
+    return (_jsx(Root, { role: "tree", id: baseId, onFocus: () => {
+            treeHadFocus.current = true;
+        }, onBlur: (e) => {
+            // Only clear when focus genuinely leaves the tree for another element.
+            // A null relatedTarget usually means the focused item unmounted (e.g. a
+            // collapse), in which case we keep the flag so focus can be re-targeted.
+            const next = e.relatedTarget;
+            if (next && !e.currentTarget.contains(next)) {
+                treeHadFocus.current = false;
+            }
+        }, children: renderNodes(nodes, 1, null) }));
+}

package/dist/components/internal/calendar.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Shared internal calendar module — month math + grid rendering used by
+ * DatePicker and DateRangePicker. No date library; all helpers operate at DAY
+ * granularity (time zeroed) and build dates with `new Date(year, month, day)`
+ * in local time. Not exported from `index.ts`.
+ */
+import React from 'react';
+/** First day of `d`'s month at local midnight. */
+export declare function startOfMonth(d: Date): Date;
+/**
+ * `d` shifted by `n` whole months. The day-of-month is clamped to the target
+ * month's length so month-end days don't overflow into the following month
+ * (e.g. Jan 31 + 1 month -> Feb 28/29, not Mar 3).
+ */
+export declare function addMonths(d: Date, n: number): Date;
+/** True when `a` and `b` fall on the same calendar day. */
+export declare function isSameDay(a: Date, b: Date): boolean;
+/** True when `a`'s day is strictly before `b`'s day (time ignored). */
+export declare function isBefore(a: Date, b: Date): boolean;
+/** True when `a`'s day is strictly after `b`'s day (time ignored). */
+export declare function isAfter(a: Date, b: Date): boolean;
+/**
+ * Inclusive day-granularity bounds check. A `null`/`undefined` bound is open
+ * (no constraint on that side).
+ */
+export declare function isWithin(d: Date, min?: Date | null, max?: Date | null): boolean;
+/**
+ * Build a 6-row x 7-column matrix of Date objects for `month`, including
+ * leading days from the previous month and trailing days from the next month
+ * so the grid is always full and aligned to `weekStartsOn` (0=Sunday,
+ * 1=Monday). All cells are local-midnight Dates.
+ */
+export declare function buildMonthMatrix(month: Date, weekStartsOn: 0 | 1): Date[][];
+/** 2-char weekday labels rotated so index 0 is `weekStartsOn`. */
+export declare function weekdayLabels(weekStartsOn: 0 | 1): string[];
+/** Long month name + space + 4-digit year, e.g. "May 2026". */
+export declare function monthLabel(month: Date): string;
+export interface MonthGridProps {
+    month: Date;
+    weekStartsOn?: 0 | 1;
+    isSelected?: (day: Date) => boolean;
+    isInRange?: (day: Date) => boolean;
+    isRangeStart?: (day: Date) => boolean;
+    isRangeEnd?: (day: Date) => boolean;
+    isDisabled?: (day: Date) => boolean;
+    isToday?: (day: Date) => boolean;
+    onSelect: (day: Date) => void;
+    focusedDay?: Date | null;
+    onFocusDay?: (day: Date) => void;
+    labelId?: string;
+}
+export declare function MonthGrid(props: MonthGridProps): React.ReactElement;

package/dist/components/internal/calendar.js

@@ -0,0 +1,301 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shared internal calendar module — month math + grid rendering used by
+ * DatePicker and DateRangePicker. No date library; all helpers operate at DAY
+ * granularity (time zeroed) and build dates with `new Date(year, month, day)`
+ * in local time. Not exported from `index.ts`.
+ */
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import styled from 'styled-components';
+// --- Pure helpers ----------------------------------------------------------
+/** Local-midnight Date for the same calendar day (time zeroed). */
+function startOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+/** First day of `d`'s month at local midnight. */
+export function startOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+/**
+ * `d` shifted by `n` whole months. The day-of-month is clamped to the target
+ * month's length so month-end days don't overflow into the following month
+ * (e.g. Jan 31 + 1 month -> Feb 28/29, not Mar 3).
+ */
+export function addMonths(d, n) {
+    const t = new Date(d.getFullYear(), d.getMonth() + n, 1);
+    const daysInMonth = new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate();
+    return new Date(t.getFullYear(), t.getMonth(), Math.min(d.getDate(), daysInMonth));
+}
+/** True when `a` and `b` fall on the same calendar day. */
+export function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+/** True when `a`'s day is strictly before `b`'s day (time ignored). */
+export function isBefore(a, b) {
+    return startOfDay(a).getTime() < startOfDay(b).getTime();
+}
+/** True when `a`'s day is strictly after `b`'s day (time ignored). */
+export function isAfter(a, b) {
+    return startOfDay(a).getTime() > startOfDay(b).getTime();
+}
+/**
+ * Inclusive day-granularity bounds check. A `null`/`undefined` bound is open
+ * (no constraint on that side).
+ */
+export function isWithin(d, min, max) {
+    if (min != null && isBefore(d, min))
+        return false;
+    if (max != null && isAfter(d, max))
+        return false;
+    return true;
+}
+/**
+ * Build a 6-row x 7-column matrix of Date objects for `month`, including
+ * leading days from the previous month and trailing days from the next month
+ * so the grid is always full and aligned to `weekStartsOn` (0=Sunday,
+ * 1=Monday). All cells are local-midnight Dates.
+ */
+export function buildMonthMatrix(month, weekStartsOn) {
+    const first = startOfMonth(month);
+    // How many leading days from the previous month precede the 1st.
+    const lead = (first.getDay() - weekStartsOn + 7) % 7;
+    const gridStart = new Date(first.getFullYear(), first.getMonth(), 1 - lead);
+    const matrix = [];
+    for (let row = 0; row < 6; row++) {
+        const week = [];
+        for (let col = 0; col < 7; col++) {
+            const offset = row * 7 + col;
+            week.push(new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + offset));
+        }
+        matrix.push(week);
+    }
+    return matrix;
+}
+const FULL_WEEKDAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+/** 2-char weekday labels rotated so index 0 is `weekStartsOn`. */
+export function weekdayLabels(weekStartsOn) {
+    return FULL_WEEKDAY_LABELS.map((_, i) => FULL_WEEKDAY_LABELS[(i + weekStartsOn) % 7]);
+}
+/** Long month name + space + 4-digit year, e.g. "May 2026". */
+export function monthLabel(month) {
+    return `${month.toLocaleString(undefined, { month: 'long' })} ${month.getFullYear()}`;
+}
+/** Stable ISO-ish key (YYYY-MM-DD) for a local calendar day. */
+function dayKey(d) {
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${y}-${m}-${day}`;
+}
+// --- MonthGrid component ----------------------------------------------------
+const Grid = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.space[1]};
+  font-family: ${(p) => p.theme.font.body};
+`;
+const Row = styled.div `
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: ${(p) => p.theme.space[1]};
+`;
+const WeekdayCell = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  font-size: 12px;
+  font-weight: 800;
+  color: ${(p) => p.theme.colors.textSubtle};
+  text-transform: uppercase;
+`;
+const DayButton = styled.button `
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 36px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: ${(p) => (p.$today ? 800 : 700)};
+  border: 2px solid transparent;
+  border-radius: ${(p) => p.theme.radii.sm};
+  cursor: pointer;
+  transition: background 80ms ${(p) => p.theme.easing.out};
+
+  color: ${(p) => p.$selected
+    ? p.theme.colors.primaryInk
+    : p.$outside
+        ? p.theme.colors.textSubtle
+        : p.theme.colors.text};
+
+  background: ${(p) => p.$selected ? p.theme.colors.primary : p.$inRange ? p.theme.colors.primarySoft : 'transparent'};
+
+  outline: ${(p) => (p.$today ? `2px solid ${p.theme.colors.accent}` : 'none')};
+  outline-offset: ${(p) => (p.$today ? '-2px' : '0')};
+
+  &:hover:not(:disabled) {
+    background: ${(p) => (p.$selected ? p.theme.colors.primary : p.theme.colors.surfaceSunken)};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+`;
+const NAV_KEYS = new Set([
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'PageUp',
+    'PageDown',
+    'Home',
+    'End',
+    'Enter',
+    ' ',
+]);
+export function MonthGrid(props) {
+    const { month, weekStartsOn = 0, isSelected, isInRange, isRangeStart, isRangeEnd, isDisabled, isToday, onSelect, focusedDay, onFocusDay, labelId, } = props;
+    const matrix = useMemo(() => buildMonthMatrix(month, weekStartsOn), [month, weekStartsOn]);
+    const labels = useMemo(() => weekdayLabels(weekStartsOn), [weekStartsOn]);
+    const dayIsSelected = useCallback((day) => Boolean(isSelected?.(day)) || Boolean(isRangeStart?.(day)) || Boolean(isRangeEnd?.(day)), [isSelected, isRangeStart, isRangeEnd]);
+    const dayIsToday = useCallback((day) => (isToday ? isToday(day) : isSameDay(day, new Date())), [isToday]);
+    const dayIsDisabled = useCallback((day) => Boolean(isDisabled?.(day)), [isDisabled]);
+    // Determine which cell owns tabIndex 0 (roving tabindex): focusedDay, else
+    // the first selected day, else the first enabled day of the displayed month.
+    const rovingDay = useMemo(() => {
+        if (focusedDay)
+            return focusedDay;
+        const flat = matrix.flat();
+        const selected = flat.find((d) => d.getMonth() === month.getMonth() && dayIsSelected(d) && !dayIsDisabled(d));
+        if (selected)
+            return selected;
+        const firstEnabled = flat.find((d) => d.getMonth() === month.getMonth() && !dayIsDisabled(d));
+        if (firstEnabled)
+            return firstEnabled;
+        // No enabled day in the displayed month: fall back to the first enabled day
+        // anywhere in the matrix so the grid still has a focusable tab stop. Only if
+        // every cell is disabled do we fall back to flat[0].
+        const anyEnabled = flat.find((d) => !dayIsDisabled(d));
+        return anyEnabled ?? flat[0];
+    }, [focusedDay, matrix, month, dayIsSelected, dayIsDisabled]);
+    // Ref map: ISO day-string -> button element, used to move DOM focus.
+    const cellRefs = useRef(new Map());
+    useEffect(() => {
+        if (!focusedDay)
+            return;
+        const el = cellRefs.current.get(dayKey(focusedDay));
+        if (el)
+            el.focus();
+    }, [focusedDay]);
+    const handleKeyDown = (e) => {
+        if (!NAV_KEYS.has(e.key))
+            return;
+        const current = rovingDay;
+        if (!current)
+            return;
+        let next = null;
+        // Per-day step direction used to search outward for the nearest enabled
+        // day when the computed target lands on a disabled (out-of-range) day.
+        let step = 0;
+        switch (e.key) {
+            case 'ArrowLeft':
+                next = addDays(current, -1);
+                step = -1;
+                break;
+            case 'ArrowRight':
+                next = addDays(current, 1);
+                step = 1;
+                break;
+            case 'ArrowUp':
+                next = addDays(current, -7);
+                step = -1;
+                break;
+            case 'ArrowDown':
+                next = addDays(current, 7);
+                step = 1;
+                break;
+            case 'PageUp':
+                next = addMonths(current, -1);
+                step = -1;
+                break;
+            case 'PageDown':
+                next = addMonths(current, 1);
+                step = 1;
+                break;
+            case 'Home': {
+                const offset = (current.getDay() - weekStartsOn + 7) % 7;
+                next = addDays(current, -offset);
+                step = 1; // search forward from week start toward an enabled day
+                break;
+            }
+            case 'End': {
+                const offset = (current.getDay() - weekStartsOn + 7) % 7;
+                next = addDays(current, 6 - offset);
+                step = -1; // search backward from week end toward an enabled day
+                break;
+            }
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (!dayIsDisabled(current))
+                    onSelect(current);
+                return;
+        }
+        if (!next)
+            return;
+        // If the target is disabled, search outward in the travel direction for the
+        // nearest enabled day, bounded by the grid extent. Never focus a disabled
+        // (non-focusable) day, which would drop DOM focus to <body>.
+        if (dayIsDisabled(next) && step !== 0) {
+            const gridStart = matrix[0][0];
+            const gridEnd = matrix[matrix.length - 1][6];
+            let candidate = addDays(next, step);
+            next = null;
+            while (candidate && !isBefore(candidate, gridStart) && !isAfter(candidate, gridEnd)) {
+                if (!dayIsDisabled(candidate)) {
+                    next = candidate;
+                    break;
+                }
+                candidate = addDays(candidate, step);
+            }
+        }
+        if (next && !dayIsDisabled(next)) {
+            e.preventDefault();
+            onFocusDay?.(next);
+        }
+    };
+    return (_jsxs(Grid, { role: "grid", "aria-labelledby": labelId, onKeyDown: handleKeyDown, children: [_jsx(Row, { role: "row", children: labels.map((label, i) => (_jsx(WeekdayCell, { role: "columnheader", "aria-label": label, children: label }, i))) }), matrix.map((week, rowIndex) => (_jsx(Row, { role: "row", children: week.map((day) => {
+                    const outside = day.getMonth() !== month.getMonth();
+                    const selected = dayIsSelected(day);
+                    const inRange = Boolean(isInRange?.(day)) && !selected;
+                    const today = dayIsToday(day);
+                    const disabled = dayIsDisabled(day);
+                    const isRoving = Boolean(rovingDay && isSameDay(day, rovingDay));
+                    const key = dayKey(day);
+                    return (_jsx("div", { role: "gridcell", "aria-selected": selected, tabIndex: -1, children: _jsx(DayButton, { type: "button", ref: (el) => {
+                                if (el)
+                                    cellRefs.current.set(key, el);
+                                else
+                                    cellRefs.current.delete(key);
+                            }, "$outside": outside, "$selected": selected, "$inRange": inRange, "$today": today, tabIndex: isRoving ? 0 : -1, disabled: disabled, "aria-label": day.toLocaleDateString(), onClick: () => {
+                                if (disabled)
+                                    return;
+                                onFocusDay?.(day);
+                                onSelect(day);
+                            }, children: day.getDate() }) }, key));
+                }) }, rowIndex)))] }));
+}
+/** `d` shifted by `n` whole days at local midnight. */
+function addDays(d, n) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+}

package/dist/index.d.ts

@@ -38,3 +38,11 @@ export { Breadcrumb, BreadcrumbItem, type BreadcrumbProps, type BreadcrumbItemPr
 export { Pagination, type PaginationProps } from './components/Pagination';
 export { Stepper, type StepDef, type StepperProps, type StepperOrientation, } from './components/Stepper';
 export { Table, THead, TBody, Tr, Th, Td } from './components/Table';
+export { Combobox, type ComboboxProps, type ComboboxOption, } from './components/Combobox';
+export { DataTable, type DataTableProps, type DataTableColumn, type DataTableSort, } from './components/DataTable';
+export { DatePicker, type DatePickerProps } from './components/DatePicker';
+export { Command, type CommandProps, type CommandItem, } from './components/Command';
+export { FileUpload, formatFileSize, type FileUploadProps, type FileUploadRejection, type FileUploadRejectReason, } from './components/FileUpload';
+export { TreeView, type TreeViewProps, type TreeNode, } from './components/TreeView';
+export { TagInput, type TagInputProps } from './components/TagInput';
+export { DateRangePicker, type DateRangePickerProps, type DateRange, } from './components/DateRangePicker';

package/dist/index.js

@@ -41,3 +41,11 @@ export { Breadcrumb, BreadcrumbItem, } from './components/Breadcrumb';
 export { Pagination } from './components/Pagination';
 export { Stepper, } from './components/Stepper';
 export { Table, THead, TBody, Tr, Th, Td } from './components/Table';
+export { Combobox, } from './components/Combobox';
+export { DataTable, } from './components/DataTable';
+export { DatePicker } from './components/DatePicker';
+export { Command, } from './components/Command';
+export { FileUpload, formatFileSize, } from './components/FileUpload';
+export { TreeView, } from './components/TreeView';
+export { TagInput } from './components/TagInput';
+export { DateRangePicker, } from './components/DateRangePicker';

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "@harismawan/stamp-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Stamp-aesthetic React component library — chunky borders, hard offset shadows, no gradients.",
   "license": "MIT",
   "author": "Harismawan <mail@harismawan.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/harismawan/stamp-ui.git"
+  },
+  "homepage": "https://github.com/harismawan/stamp-ui#readme",
+  "bugs": "https://github.com/harismawan/stamp-ui/issues",
   "type": "module",
   "sideEffects": false,
   "files": ["dist"],