@sentropic/design-system-react 0.8.0 → 0.9.0

package/dist/catalog.js

@@ -1316,4 +1316,389 @@ export function TreeView({ nodes, selectedId, expandedIds, defaultExpandedIds =
 export function UnorderedList({ items, className, ...rest }) {
     return (_jsx("ul", { ...rest, className: classNames("st-unorderedList", className), children: items.map((item, index) => renderListItem(item, index, false)) }));
 }
+function StarIcon({ size, fill }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: fill, stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }));
+}
+function StarHalfIcon({ size }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2v15.77z", fill: "currentColor" }), _jsx("path", { d: "M12 2v15.77l6.18 3.25L17 14.14 22 9.27l-6.91-1.01L12 2z" })] }));
+}
+export function Rating({ value, max = 5, onChange, readonly = false, allowHalf = false, size = "md", name, label, className, ...rest }) {
+    const [current, setCurrent] = useControlled(value, value ?? 0, onChange);
+    const iconSize = size === "sm" ? 16 : size === "lg" ? 28 : 22;
+    const stars = Array.from({ length: max }, (_, i) => i + 1);
+    // L'étoile « focusable » (tabindex 0) suit la valeur ; à 0 c'est la première.
+    const focusedStar = current > 0 ? Math.ceil(current) : 1;
+    function fill(star) {
+        if (current >= star)
+            return "full";
+        if (allowHalf && current >= star - 0.5)
+            return "half";
+        return "empty";
+    }
+    function commit(next) {
+        if (readonly)
+            return;
+        setCurrent(Math.max(0, Math.min(max, next)));
+    }
+    function onStarClick(event, star) {
+        if (readonly)
+            return;
+        let next = star;
+        if (allowHalf) {
+            const rect = event.currentTarget.getBoundingClientRect();
+            const isLeftHalf = event.clientX - rect.left < rect.width / 2;
+            next = isLeftHalf ? star - 0.5 : star;
+        }
+        // Re-cliquer la valeur déjà sélectionnée remet à zéro.
+        if (next === current) {
+            commit(0);
+            return;
+        }
+        commit(next);
+    }
+    function onKeyDown(event) {
+        if (readonly)
+            return;
+        const step = allowHalf ? 0.5 : 1;
+        let handled = true;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                commit(Math.min(max, current + step));
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                commit(Math.max(0, current - step));
+                break;
+            case "Home":
+                commit(0);
+                break;
+            case "End":
+                commit(max);
+                break;
+            default:
+                handled = false;
+        }
+        if (handled)
+            event.preventDefault();
+    }
+    return (_jsx("div", { ...rest, className: classNames("st-rating", `st-rating--${size}`, readonly && "st-rating--readonly", className), role: "radiogroup", "aria-label": label, "aria-readonly": readonly ? "true" : undefined, children: stars.map((star) => {
+            const state = fill(star);
+            return (_jsx("button", { type: "button", className: classNames("st-rating__star", state === "full" && "st-rating__star--full", state === "half" && "st-rating__star--half"), role: "radio", name: name, "aria-checked": Math.ceil(current) === star ? "true" : "false", "aria-label": `${star} / ${max}`, tabIndex: !readonly && star === focusedStar ? 0 : -1, disabled: readonly, onClick: (event) => onStarClick(event, star), onKeyDown: onKeyDown, children: state === "half" ? (_jsx(StarHalfIcon, { size: iconSize })) : (_jsx(StarIcon, { size: iconSize, fill: state === "full" ? "currentColor" : "none" })) }, star));
+        }) }));
+}
+function timeToMinutes(hhmm) {
+    if (!hhmm)
+        return null;
+    const match = /^(\d{1,2}):(\d{2})$/.exec(hhmm);
+    if (!match)
+        return null;
+    const h = Number(match[1]);
+    const m = Number(match[2]);
+    if (h < 0 || h > 23 || m < 0 || m > 59)
+        return null;
+    return h * 60 + m;
+}
+function timeFromMinutes(total) {
+    const h = Math.floor(total / 60);
+    const m = total % 60;
+    return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+}
+export function TimePicker({ value, onChange, step = 15, min, max, format = "24", size = "md", disabled = false, label, className, id, ...rest }) {
+    const reactId = React.useId();
+    const fieldId = id ?? `st-timepicker-${reactId}`;
+    const listId = `${fieldId}-list`;
+    const hostRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    const [current, setCurrent] = useControlled(value, value ?? "", onChange);
+    function display(hhmm) {
+        if (format === "24")
+            return hhmm;
+        const total = timeToMinutes(hhmm);
+        if (total === null)
+            return hhmm;
+        const h24 = Math.floor(total / 60);
+        const m = total % 60;
+        const period = h24 < 12 ? "AM" : "PM";
+        let h12 = h24 % 12;
+        if (h12 === 0)
+            h12 = 12;
+        return `${String(h12).padStart(2, "0")}:${String(m).padStart(2, "0")} ${period}`;
+    }
+    const slots = React.useMemo(() => {
+        const safeStep = step > 0 ? step : 15;
+        const lower = timeToMinutes(min) ?? 0;
+        const upper = timeToMinutes(max) ?? 23 * 60 + 59;
+        const result = [];
+        for (let t = lower; t <= upper; t += safeStep) {
+            result.push(timeFromMinutes(t));
+        }
+        return result;
+    }, [step, min, max]);
+    const displayValue = current ? display(current) : "";
+    function toggleOpen() {
+        if (disabled)
+            return;
+        setOpen((prev) => !prev);
+    }
+    function pick(slot) {
+        setCurrent(slot);
+        setOpen(false);
+    }
+    useOutsideMouseDown(open, hostRef, () => setOpen(false));
+    return (_jsxs("div", { className: classNames("st-field", className), ref: hostRef, ...rest, children: [_jsxs("div", { className: "st-field__control", children: [label ? (_jsx("label", { className: "st-field__label", htmlFor: fieldId, children: label })) : null, _jsxs("span", { className: classNames("st-timepicker", `st-timepicker--${size}`), children: [_jsx("input", { id: fieldId, type: "text", readOnly: true, className: "st-timepicker__control", value: displayValue, placeholder: format === "24" ? "HH:mm" : "hh:mm AM", disabled: disabled, role: "combobox", "aria-haspopup": "listbox", "aria-controls": listId, "aria-expanded": open ? "true" : "false", onClick: toggleOpen }), _jsx("button", { type: "button", className: "st-timepicker__trigger", "aria-label": "Ouvrir la liste des horaires", "aria-haspopup": "listbox", "aria-expanded": open ? "true" : "false", disabled: disabled, onClick: toggleOpen, children: _jsx(ClockIcon, { size: 16 }) })] })] }), open ? (_jsx("ul", { id: listId, className: "st-timepicker__list", role: "listbox", "aria-label": label ?? "Horaires", tabIndex: -1, onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                        event.preventDefault();
+                        setOpen(false);
+                    }
+                }, children: slots.map((slot) => (_jsx("li", { role: "presentation", children: _jsx("button", { type: "button", className: classNames("st-timepicker__option", slot === current && "st-timepicker__option--selected"), role: "option", "aria-selected": slot === current ? "true" : "false", onClick: () => pick(slot), children: display(slot) }) }, slot))) })) : null] }));
+}
+function ClockIcon({ size }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("polyline", { points: "12 6 12 12 16 14" })] }));
+}
+function calStartOfDay(date) {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    return d;
+}
+function calToISO(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+}
+function calParseISO(iso) {
+    if (!iso)
+        return null;
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+    if (!match)
+        return null;
+    const d = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+    return Number.isNaN(d.getTime()) ? null : calStartOfDay(d);
+}
+function calIsSameDay(a, b) {
+    if (!a || !b)
+        return false;
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+export function Calendar({ value, onChange, min, max, range = false, weekStartsOn = 1, locale = "fr-FR", month, className, previousMonthLabel, nextMonthLabel, ...rest }) {
+    const [activeValue, setCurrent] = useControlled(value, value ?? null, onChange);
+    const isFr = (locale ?? "fr-FR").toLowerCase().startsWith("fr");
+    const resolvedPrevLabel = previousMonthLabel ?? (isFr ? "Mois précédent" : "Previous month");
+    const resolvedNextLabel = nextMonthLabel ?? (isFr ? "Mois suivant" : "Next month");
+    const monthFormatter = React.useMemo(() => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }), [locale]);
+    const weekdayFormatter = React.useMemo(() => new Intl.DateTimeFormat(locale, { weekday: "short" }), [locale]);
+    const cellFormatter = React.useMemo(() => new Intl.DateTimeFormat(locale, { day: "numeric", month: "long", year: "numeric" }), [locale]);
+    const single = range ? null : calParseISO(activeValue);
+    const rangeStart = range && Array.isArray(activeValue) ? calParseISO(activeValue[0]) : null;
+    const rangeEnd = range && Array.isArray(activeValue) ? calParseISO(activeValue[1]) : null;
+    function pickInitialMonth() {
+        const parsed = calParseISO(month ? `${month}-01` : undefined);
+        if (parsed)
+            return parsed;
+        if (!range && single)
+            return single;
+        if (range && rangeStart)
+            return rangeStart;
+        return calStartOfDay(new Date());
+    }
+    const initial = React.useRef(pickInitialMonth());
+    const [viewYear, setViewYear] = React.useState(initial.current.getFullYear());
+    const [viewMonth, setViewMonth] = React.useState(initial.current.getMonth());
+    // Resynchronise le mois affiché lorsque la prop `month` change.
+    React.useEffect(() => {
+        const parsed = calParseISO(month ? `${month}-01` : undefined);
+        if (parsed) {
+            setViewYear(parsed.getFullYear());
+            setViewMonth(parsed.getMonth());
+        }
+    }, [month]);
+    const today = React.useMemo(() => calStartOfDay(new Date()), []);
+    const weekdayLabels = React.useMemo(() => {
+        // 2024-01-07 est un dimanche : on énumère puis on tourne selon weekStartsOn.
+        const sample = new Date(Date.UTC(2024, 0, 7));
+        const labels = [];
+        for (let i = 0; i < 7; i++) {
+            const d = new Date(sample);
+            d.setUTCDate(sample.getUTCDate() + i);
+            labels.push(weekdayFormatter.format(d));
+        }
+        return [...labels.slice(weekStartsOn), ...labels.slice(0, weekStartsOn)];
+    }, [weekdayFormatter, weekStartsOn]);
+    const grid = React.useMemo(() => {
+        const first = new Date(viewYear, viewMonth, 1);
+        const firstDayIdx = first.getDay();
+        const offset = (firstDayIdx - weekStartsOn + 7) % 7;
+        const start = new Date(viewYear, viewMonth, 1 - offset);
+        const cells = [];
+        for (let i = 0; i < 42; i++) {
+            const d = new Date(start);
+            d.setDate(start.getDate() + i);
+            cells.push({ date: calStartOfDay(d), inMonth: d.getMonth() === viewMonth });
+        }
+        return cells;
+    }, [viewYear, viewMonth, weekStartsOn]);
+    const minDate = calParseISO(min);
+    const maxDate = calParseISO(max);
+    function isOutOfBounds(date) {
+        const d = calStartOfDay(date).getTime();
+        if (minDate && d < minDate.getTime())
+            return true;
+        if (maxDate && d > maxDate.getTime())
+            return true;
+        return false;
+    }
+    function isSelected(date) {
+        if (!range)
+            return calIsSameDay(single, date);
+        return calIsSameDay(rangeStart, date) || calIsSameDay(rangeEnd, date);
+    }
+    function isInRange(date) {
+        if (!range || !rangeStart || !rangeEnd)
+            return false;
+        const d = calStartOfDay(date).getTime();
+        return d > rangeStart.getTime() && d < rangeEnd.getTime();
+    }
+    function previousMonth() {
+        if (viewMonth === 0) {
+            setViewMonth(11);
+            setViewYear((y) => y - 1);
+        }
+        else {
+            setViewMonth((m) => m - 1);
+        }
+    }
+    function nextMonth() {
+        if (viewMonth === 11) {
+            setViewMonth(0);
+            setViewYear((y) => y + 1);
+        }
+        else {
+            setViewMonth((m) => m + 1);
+        }
+    }
+    function pickDate(date) {
+        if (isOutOfBounds(date))
+            return;
+        const picked = calStartOfDay(date);
+        const iso = calToISO(picked);
+        if (!range) {
+            setCurrent(iso);
+            return;
+        }
+        // Mode plage : (re)démarrage si pas de début, ou si plage déjà complète,
+        // ou si la date est antérieure au début courant.
+        if (!rangeStart || (rangeStart && rangeEnd) || picked.getTime() < rangeStart.getTime()) {
+            setCurrent([iso, null]);
+            return;
+        }
+        setCurrent([calToISO(rangeStart), iso]);
+    }
+    const monthLabel = monthFormatter.format(new Date(viewYear, viewMonth, 1));
+    return (_jsxs("div", { className: classNames("st-calendar", className), ...rest, children: [_jsxs("div", { className: "st-calendar__nav", children: [_jsx("button", { type: "button", className: "st-calendar__navBtn", "aria-label": resolvedPrevLabel, onClick: previousMonth, children: _jsx(ChevronLeftIcon, { size: 18 }) }), _jsx("span", { className: "st-calendar__monthLabel", "aria-live": "polite", children: monthLabel }), _jsx("button", { type: "button", className: "st-calendar__navBtn", "aria-label": resolvedNextLabel, onClick: nextMonth, children: _jsx(ChevronRightIcon, { size: 18 }) })] }), _jsxs("div", { className: "st-calendar__grid", role: "grid", tabIndex: -1, "aria-label": monthLabel, onKeyDown: (event) => {
+                    if (event.key === "PageUp") {
+                        event.preventDefault();
+                        previousMonth();
+                    }
+                    else if (event.key === "PageDown") {
+                        event.preventDefault();
+                        nextMonth();
+                    }
+                }, children: [_jsx("div", { className: "st-calendar__weekdays", role: "row", children: weekdayLabels.map((wd, i) => (_jsx("span", { className: "st-calendar__weekday", role: "columnheader", children: wd }, `${wd}-${i}`))) }), _jsx("div", { className: "st-calendar__days", children: grid.map((cell, i) => {
+                            const oob = isOutOfBounds(cell.date);
+                            const selected = isSelected(cell.date);
+                            const inRange = isInRange(cell.date);
+                            const isToday = calIsSameDay(cell.date, today);
+                            return (_jsx("button", { type: "button", className: classNames("st-calendar__day", !cell.inMonth && "st-calendar__day--outside", selected && "st-calendar__day--selected", inRange && "st-calendar__day--inRange", isToday && "st-calendar__day--today"), role: "gridcell", "aria-label": cellFormatter.format(cell.date), "aria-selected": selected ? "true" : "false", "aria-current": isToday ? "date" : undefined, "aria-disabled": oob ? "true" : undefined, disabled: oob, onClick: () => pickDate(cell.date), children: cell.date.getDate() }, i));
+                        }) })] })] }));
+}
+function ChevronLeftIcon({ size }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }));
+}
+function ChevronRightIcon({ size }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }));
+}
+export function SlideIndicator({ count, current = 0, onChange, size = "md", variant = "dots", label = "Diapositive", className, ...rest }) {
+    const items = Array.from({ length: Math.max(0, count) }, (_, i) => i);
+    function select(index) {
+        if (index < 0 || index >= count || index === current)
+            return;
+        onChange?.(index);
+    }
+    function onKeyDown(event, index) {
+        let target = index;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                target = Math.min(count - 1, index + 1);
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                target = Math.max(0, index - 1);
+                break;
+            case "Home":
+                target = 0;
+                break;
+            case "End":
+                target = count - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        select(target);
+    }
+    return (_jsx("div", { ...rest, className: classNames("st-slideIndicator", `st-slideIndicator--${size}`, `st-slideIndicator--${variant}`, className), role: "tablist", "aria-label": label, children: items.map((index) => (_jsx("button", { type: "button", className: classNames("st-slideIndicator__dot", index === current && "st-slideIndicator__dot--current"), role: "tab", "aria-selected": index === current ? "true" : "false", "aria-current": index === current ? "true" : undefined, "aria-label": `${label} ${index + 1}`, tabIndex: index === current ? 0 : -1, onClick: () => select(index), onKeyDown: (event) => onKeyDown(event, index) }, index))) }));
+}
+export function Autosave({ status = "idle", lastSaved, onRetry, labels, retryLabel, locale = "fr-FR", className, ...rest }) {
+    const isFr = (locale ?? "fr-FR").toLowerCase().startsWith("fr");
+    const DEFAULT_LABELS = isFr
+        ? {
+            idle: "Modifications enregistrées",
+            saving: "Enregistrement…",
+            saved: "Enregistré",
+            error: "Échec de l'enregistrement",
+        }
+        : {
+            idle: "All changes saved",
+            saving: "Saving…",
+            saved: "Saved",
+            error: "Failed to save",
+        };
+    const resolvedRetryLabel = retryLabel ?? (isFr ? "Réessayer" : "Retry");
+    const statusLabel = labels?.[status] ?? DEFAULT_LABELS[status];
+    const role = status === "error" ? "alert" : "status";
+    // Heure relative de la dernière sauvegarde (rendu uniquement sur idle/saved).
+    const relativeTime = (() => {
+        if (!lastSaved)
+            return "";
+        const date = lastSaved instanceof Date ? lastSaved : new Date(lastSaved);
+        if (Number.isNaN(date.getTime()))
+            return "";
+        const diffMs = Date.now() - date.getTime();
+        const diffSec = Math.round(diffMs / 1000);
+        const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+        if (Math.abs(diffSec) < 60)
+            return rtf.format(-diffSec, "second");
+        const diffMin = Math.round(diffSec / 60);
+        if (Math.abs(diffMin) < 60)
+            return rtf.format(-diffMin, "minute");
+        const diffHour = Math.round(diffMin / 60);
+        if (Math.abs(diffHour) < 24)
+            return rtf.format(-diffHour, "hour");
+        const diffDay = Math.round(diffHour / 24);
+        return rtf.format(-diffDay, "day");
+    })();
+    const showRelative = (status === "saved" || status === "idle") && relativeTime !== "";
+    return (_jsxs("div", { ...rest, className: classNames("st-autosave", `st-autosave--${status}`, className), role: role, "aria-live": "polite", children: [_jsx("span", { className: "st-autosave__icon", "aria-hidden": "true", children: status === "saving" ? (_jsx("span", { className: "st-autosave__spinner", children: _jsx(LoaderCircleIcon, { size: 16 }) })) : status === "saved" ? (_jsx(CircleCheckIcon, { size: 16 })) : status === "error" ? (_jsx(CircleAlertIcon, { size: 16 })) : null }), _jsx("span", { className: "st-autosave__label", children: statusLabel }), showRelative ? _jsx("span", { className: "st-autosave__time", children: relativeTime }) : null, status === "error" && onRetry ? (_jsx("button", { type: "button", className: "st-autosave__retry", onClick: () => onRetry?.(), children: resolvedRetryLabel })) : null] }));
+}
+function LoaderCircleIcon({ size }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
+}
+function CircleCheckIcon({ size }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "m9 12 2 2 4-4" })] }));
+}
+function CircleAlertIcon({ size }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), _jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })] }));
+}
 //# sourceMappingURL=catalog.js.map