@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/date-picker/date-picker.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { CalendarDays, ChevronDown } from "lucide-react";
+import { Calendar } from "../calendar/calendar.js";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./date-picker.module.css";
+const monthStart = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+const { spring, duration, ease, blur } = motionTokens;
+const instant = { duration: duration.instant };
+/** Each part of the date rolls with time: a later date rises from below, an earlier one drops from above. Parts that did not change stay still. */
+const valueRoll = {
+    enter: (direction) => ({ opacity: 0, y: `${direction * 0.35}em`, filter: `blur(${blur.soft}px)` }),
+    center: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: duration.standard, ease: ease.enter } },
+    exit: (direction) => ({ opacity: 0, y: `${direction * -0.3}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: 0.14, ease: ease.standard } }),
+};
+/** Reduced motion keeps a short crossfade; resting values match the roll so server and client markup agree. */
+const valueFade = { enter: { opacity: 0 }, center: { opacity: 1, y: 0, filter: "blur(0px)", transition: instant }, exit: { opacity: 0, transition: instant } };
+/** The footer confirms the pick: new copy rises in with a soft blur while the old line lifts away. */
+const statusRise = {
+    enter: { opacity: 0, y: "0.3em", filter: `blur(${blur.soft}px)` },
+    center: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: duration.standard, ease: ease.enter } },
+    exit: { opacity: 0, y: "-0.3em", filter: `blur(${blur.subtle}px)`, transition: { duration: 0.14, ease: ease.standard } },
+};
+export function DatePicker({ label, value, onChange, description, placeholder = "Select a date", minDate, maxDate, disabledDates, locale = "en-US", format = { month: "short", day: "numeric", year: "numeric" }, showToday, id, className, disabled, ...buttonProps }) {
+    const generatedId = useId();
+    const controlId = id ?? generatedId;
+    const hintId = description ? `${controlId}-description` : undefined;
+    const [open, setOpen] = useState(false);
+    const [month, setMonth] = useState(monthStart(value ?? new Date()));
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const closeTimer = useRef(undefined);
+    const formatter = new Intl.DateTimeFormat(locale, format);
+    const reduce = useReducedMotion() ?? false;
+    const time = value?.getTime() ?? null;
+    const [previousTime, setPreviousTime] = useState(time);
+    const [direction, setDirection] = useState(1);
+    if (previousTime !== time) {
+        setPreviousTime(time);
+        setDirection(time === null || previousTime === null || time >= previousTime ? 1 : -1);
+    }
+    const shown = value ? formatter.format(value) : placeholder;
+    const parts = value ? formatter.formatToParts(value) : [];
+    // Parts after a wider or narrower segment move on the same curve the new text arrives on, so they never overlap it.
+    const partMotion = reduce ? { duration: 0 } : { duration: duration.standard, ease: ease.enter };
+    useEffect(() => {
+        const onPointerDown = (event) => { if (!rootRef.current?.contains(event.target)) {
+            window.clearTimeout(closeTimer.current);
+            setOpen(false);
+        } };
+        document.addEventListener("pointerdown", onPointerDown);
+        return () => { document.removeEventListener("pointerdown", onPointerDown); window.clearTimeout(closeTimer.current); };
+    }, []);
+    /** Opening moves focus to the day that owns the tab stop, so arrows work at once; a pointer open shows no ring. */
+    useEffect(() => {
+        if (open)
+            popoverRef.current?.querySelector("[data-present] [data-date][tabindex=\"0\"]")?.focus({ preventScroll: true });
+    }, [open]);
+    /** Closing hands focus back to the trigger when it was inside the calendar, so keyboard users never land on the page body. */
+    const close = () => {
+        window.clearTimeout(closeTimer.current);
+        if (popoverRef.current?.contains(document.activeElement))
+            triggerRef.current?.focus();
+        setOpen(false);
+    };
+    /** The calendar always opens on the month of the current value, or today's month. */
+    const show = () => { window.clearTimeout(closeTimer.current); setMonth(monthStart(value ?? new Date())); setOpen(true); };
+    /** A picked day lets the highlight glide onto it and the footer confirm it, then the calendar returns to the field. */
+    const selectDate = (date) => {
+        onChange?.(date);
+        window.clearTimeout(closeTimer.current);
+        if (reduce || !date)
+            close();
+        else
+            closeTimer.current = window.setTimeout(close, 300);
+    };
+    const onTriggerKeyDown = (event) => {
+        if ((event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") && !open) {
+            event.preventDefault();
+            show();
+        }
+        if (event.key === "Escape")
+            close();
+    };
+    /** Tabbing past the popover closes it; focus moving within the field keeps it open. */
+    const onBlur = (event) => {
+        const next = event.relatedTarget;
+        if (open && next && !rootRef.current?.contains(next)) {
+            window.clearTimeout(closeTimer.current);
+            setOpen(false);
+        }
+    };
+    return _jsxs("div", { className: [styles.field, className].filter(Boolean).join(" "), ref: rootRef, onBlur: onBlur, children: [_jsx("label", { className: styles.label, htmlFor: controlId, children: label }), _jsxs("div", { className: styles.anchor, children: [_jsxs("button", { ...buttonProps, ref: triggerRef, id: controlId, type: "button", disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-describedby": hintId, className: styles.trigger, onClick: () => (open ? close() : show()), onKeyDown: onTriggerKeyDown, children: [_jsx(CalendarDays, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("span", { className: styles.srOnly, children: shown }), _jsx("span", { className: styles.valueText, "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: 1, children: value ? _jsx(motion.span, { className: styles.value, custom: 1, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: parts.map((part, index) => _jsx(motion.span, { className: styles.part, layout: "position", layoutDependency: time, transition: partMotion, children: part.type === "literal" ? _jsx("span", { className: styles.partValue, children: part.value }) : _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: _jsx(motion.span, { className: styles.partValue, custom: direction, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: part.value }, part.value) }) }, `${index}-${part.type}`)) }, "value") : _jsx(motion.span, { className: styles.placeholder, custom: -1, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: placeholder }, "placeholder") }) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), _jsx(AnimatePresence, { children: open && _jsxs(motion.div, { ref: popoverRef, className: styles.popover, role: "dialog", "aria-label": `${label} calendar`, onKeyDown: (event) => { if (event.key === "Escape") {
+                                event.stopPropagation();
+                                close();
+                            } }, initial: reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: .95 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? instant : { ...spring.snappy, opacity: { duration: duration.fast, ease: ease.enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -6, scale: .97 }), transition: { duration: 0.14, ease: ease.standard } }, children: [_jsx(Calendar, { value: value, onChange: selectDate, month: month, onMonthChange: setMonth, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates, locale: locale, showToday: showToday }), _jsxs("div", { className: styles.footer, children: [_jsx("button", { type: "button", onClick: () => selectDate(undefined), disabled: !value, children: "Clear" }), _jsx("span", { className: styles.status, children: _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { variants: reduce ? valueFade : statusRise, initial: "enter", animate: "center", exit: "exit", children: value ? `Selected ${formatter.format(value)}` : "Choose a day" }, time ?? "none") }) })] })] }) })] }), description && _jsx("span", { id: hintId, className: styles.description, children: description })] });
+}

package/components/date-picker/date-picker.module.css

@@ -0,0 +1,34 @@
+.field { display: grid; gap: 7px; min-width: 0; }
+.label { color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+.anchor { position: relative; min-width: 0; }
+/* The trigger anchors the calendar, so press feedback stays in color; it never scales. */
+.trigger { position: relative; display: flex; width: 100%; min-height: var(--control-height-md); align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 12px; background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .trigger:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-muted); } }
+.trigger:active:not(:disabled), .trigger[aria-expanded="true"] { border-color: var(--border-strong); background: var(--surface-muted); }
+.trigger:disabled { cursor: not-allowed; opacity: .5; }
+.trigger > svg:first-child { flex: 0 0 auto; color: var(--text-muted); }
+/* Old and new values cross in place; each part of a date is its own box so a wider day or month moves the rest along on a spring. */
+.valueText { position: relative; display: flex; flex: 1; min-width: 0; }
+.value, .part { position: relative; display: inline-flex; white-space: pre; }
+.value { font-variant-numeric: tabular-nums; }
+.partValue { display: inline-block; white-space: pre; }
+.placeholder { min-width: 0; overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
+.srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.chevron { flex: 0 0 auto; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring); }
+.trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
+/* Grows out of the trigger's calendar icon and returns there on close. */
+.popover { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(320px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); padding: 16px; background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: 22px -8px; will-change: transform, opacity; }
+/* On phone widths the calendar matches the field instead of running past the screen edge, and a tighter inset keeps the month and its controls on one row. */
+@media (max-width: 360px) { .popover { right: 0; width: auto; padding: 12px; } }
+.footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; border-top: 1px solid var(--border-subtle); padding-top: 11px; color: var(--text-muted); font-size: var(--text-xs); }
+/* Old and new status lines share one cell, pinned to the trailing edge so a shorter line never shifts. */
+.status { display: grid; min-width: 0; justify-items: end; }
+.status > span { grid-area: 1 / 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.footer button { border: 0; border-radius: var(--radius-control); padding: 4px 8px; background: transparent; color: var(--text-secondary); font: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+@media (hover: hover) and (pointer: fine) { .footer button:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); } }
+.footer button:active:not(:disabled) { transform: scale(.97); transition-duration: var(--duration-fast), var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard); }
+.footer button:disabled { cursor: not-allowed; opacity: .4; }
+.description { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); transition: opacity var(--duration-fast) var(--ease-standard); }
+/* The open calendar covers the hint; fading it keeps its first letters from peeking past the popover's rounded corner. */
+.anchor:has(.popover) + .description { opacity: 0; }
+@media (prefers-reduced-motion: reduce) { .trigger, .chevron, .footer button, .description { transition: none; } .footer button:active:not(:disabled) { transform: none; } }

package/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,44 @@
+/** An inclusive range of whole days. */
+export interface DateRange {
+    start: Date;
+    end: Date;
+}
+/** A shortcut in the preset rail. `range` receives the viewer's local today. */
+export interface DateRangePreset {
+    label: string;
+    range: (today: Date) => DateRange;
+}
+/**
+ * A range picker whose trigger grows into the panel it opens. The panel shows two months beside a preset rail, or one
+ * month with a scrolling preset row when space is tight. The range highlight stretches across each week as you hover
+ * or move with the keyboard, the ends glide between days, months slide in the direction you travel, and on Apply the
+ * formatted label flies back into the trigger as the surface shrinks around it.
+ * Use it for reports, filters, and bookings where a start and end date are chosen together.
+ */
+export interface DateRangePickerProps {
+    /** Controlled value. Pass `null` for no selection. */
+    value?: DateRange | null;
+    /** Uncontrolled starting value. */
+    defaultValue?: DateRange | null;
+    /** Called with the applied range. */
+    onChange?: (range: DateRange) => void;
+    /** Accessible name of the trigger and the dialog. Defaults to "Date range". */
+    label?: string;
+    placeholder?: string;
+    presets?: DateRangePreset[];
+    minDate?: Date;
+    maxDate?: Date;
+    /** 0 is Sunday, 1 is Monday. Defaults to 0. */
+    weekStartsOn?: 0 | 1;
+    locale?: string;
+    /** Force one or two months. `auto` picks two when the boundary is wide enough. */
+    months?: "auto" | 1 | 2;
+    /** The element the panel should stay inside. Defaults to the viewport. */
+    boundary?: () => HTMLElement | null;
+    className?: string;
+}
+export declare const defaultDateRangePresets: DateRangePreset[];
+/** The viewer's local date (lib/use-today.ts, shared with calendar). Re-exported so existing imports from date-range-picker keep working. */
+export { useToday } from "../../lib/use-today.js";
+export declare function DateRangePicker({ value, defaultValue, onChange, label, placeholder, presets, minDate, maxDate, weekStartsOn, locale, months, boundary, className }: DateRangePickerProps): import("react").JSX.Element;
+export default DateRangePicker;