@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/task-list.js

@@ -0,0 +1,238 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarDays, ChevronDown, Flag, ListPlus, Pencil, Plus, Trash2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat, useLocale } from "../lib/locale.js";
+import { useNow } from "../lib/data-islands.js";
+import { dayKey } from "../lib/value-format.js";
+import { Avatar } from "./avatar.js";
+import { IconButton } from "./button.js";
+import { Checkbox } from "./checkbox.js";
+import { toast } from "./toast.js";
+export const taskListLabels = {
+    list: "Tasks",
+    progress: "{done} of {total} done",
+    hideCompleted: "Hide completed",
+    showCompleted: "Show completed ({count})",
+    add: "Add a task",
+    addSubtask: "Add subtask",
+    addSubtaskTo: "Add subtask to “{title}”",
+    edit: "Edit task “{title}”",
+    remove: "Delete task “{title}”",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    due: "Due {when}",
+    overdue: "Overdue · {when}",
+    priority: "{level} priority",
+    low: "Low",
+    medium: "Medium",
+    high: "High",
+    urgent: "Urgent",
+    assignee: "Assigned to {name}",
+    subtasks: "{done}/{total}",
+    expand: "Show subtasks of “{title}”",
+    empty: "No tasks yet",
+    allDone: "All done. Nice work.",
+    toggleError: "Couldn't update “{title}”",
+    saveError: "Couldn't save the task",
+    newTask: "New task title",
+};
+function flatten(items) {
+    return items.flatMap((i) => [i, ...(i.children ? flatten(i.children) : [])]);
+}
+function applyDone(items, overrides) {
+    return items.map((i) => ({ ...i, done: overrides[i.id] ?? i.done, children: i.children ? applyDone(i.children, overrides) : undefined }));
+}
+/**
+ * Checkable tasks with assignee, due date, priority and subtasks: deal follow-ups, onboarding,
+ * an editorial checklist. Optimistic toggles, inline add and edit, overdue / due-today tones,
+ * and a progress header announced politely ("4 of 7 done").
+ *
+ * ```tsx
+ * <TaskList title="Onboarding" items={tasks} onToggle={api.toggle} onAdd={api.add} />
+ * <TaskList variant="checklist" items={prePublish} onToggle={toggle} />
+ * ```
+ */
+export const TaskList = React.forwardRef(function TaskList({ items, onToggle, onAdd, onEdit, onRemove, onReorder, title, hideCompleted: hideProp, defaultHideCompleted = false, onHideCompletedChange, showProgress = true, sortCompleted, variant = "list", today, readOnly, labels, className, ...props }, ref) {
+    const t = useLabels("taskList", taskListLabels, labels);
+    const f = useFormat();
+    const { timeZone } = useLocale();
+    const now = useNow();
+    const todayKey = today ? (typeof today === "string" ? today : dayKey(today, timeZone)) : now === null ? null : dayKey(now, timeZone);
+    const [hideState, setHideState] = React.useState(defaultHideCompleted);
+    const hide = hideProp ?? hideState;
+    const setHide = (v) => {
+        setHideState(v);
+        onHideCompletedChange?.(v);
+    };
+    const [overrides, setOverrides] = React.useState({});
+    const headingId = React.useId();
+    // Drop overrides once the parent's data agrees.
+    React.useEffect(() => {
+        setOverrides((o) => {
+            const flat = new Map(flatten(items).map((i) => [i.id, i.done]));
+            let changed = false;
+            const next = {};
+            for (const k in o) {
+                if (flat.get(k) === o[k])
+                    changed = true;
+                else
+                    next[k] = o[k];
+            }
+            return changed ? next : o;
+        });
+    }, [items]);
+    const view = React.useMemo(() => applyDone(items, overrides), [items, overrides]);
+    const all = flatten(view);
+    const done = all.filter((i) => i.done).length;
+    const total = all.length;
+    const toggle = async (task, next) => {
+        if (!onToggle)
+            return;
+        setOverrides((o) => ({ ...o, [task.id]: next }));
+        try {
+            await onToggle(task.id, next);
+        }
+        catch {
+            setOverrides((o) => {
+                const n = { ...o };
+                delete n[task.id];
+                return n;
+            });
+            toast.danger(t("toggleError", { title: task.title }));
+        }
+    };
+    const ctx = {
+        t,
+        f,
+        todayKey,
+        variant,
+        readOnly: Boolean(readOnly),
+        hide,
+        sortCompleted: Boolean(sortCompleted),
+        toggle,
+        onAdd: readOnly ? undefined : onAdd,
+        onEdit: readOnly ? undefined : onEdit,
+        onRemove: readOnly ? undefined : onRemove,
+        onReorder: readOnly ? undefined : onReorder,
+    };
+    const ratio = total ? done / total : 0;
+    return (_jsxs("div", { ref: ref, "data-slot": "task-list", "data-variant": variant, className: cn("flex flex-col gap-3 [--task-box:1.125rem]", className), "aria-labelledby": title ? headingId : undefined, role: title ? "group" : undefined, ...props, children: [title || showProgress ? (_jsxs("div", { "data-slot": "task-list-header", className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-baseline gap-3", children: [title ? (_jsx("h3", { id: headingId, className: "text-sm font-semibold text-fg", children: title })) : null, showProgress && total > 0 ? (_jsx("span", { className: "text-xs text-fg-muted tabular", "aria-live": "polite", children: t("progress", { done: f.number(done), total: f.number(total) }) })) : null, done > 0 ? (_jsx("button", { type: "button", "aria-pressed": hide, onClick: () => setHide(!hide), className: "ms-auto cursor-pointer text-xs font-medium text-fg-muted underline-offset-2 hover:text-fg hover:underline focus-ring", children: hide ? t("showCompleted", { count: f.number(done) }) : t("hideCompleted") })) : null] }), showProgress && total > 0 ? (_jsx("span", { "aria-hidden": true, className: "relative block h-1 overflow-hidden rounded-full bg-track", children: _jsx("span", { className: cn("absolute inset-y-0 start-0 rounded-full transition-[width] duration-500 ease-out motion-reduce:transition-none", ratio === 1 ? "bg-success" : "bg-accent"), style: { width: `${ratio * 100}%` } }) })) : null] })) : null, total === 0 ? (_jsx("p", { className: "rounded-ui border border-dashed border-line px-3 py-3 text-[13px] text-fg-subtle", children: t("empty") })) : hide && done === total ? (_jsx("p", { className: "rounded-ui bg-[color-mix(in_srgb,var(--success)_9%,transparent)] px-3 py-2.5 text-[13px] font-medium text-success", children: t("allDone") })) : (_jsx(TaskGroup, { items: view, ctx: ctx, depth: 0, "aria-label": typeof title === "string" ? title : t("list") })), total > 0 && done === total && !hide ? _jsx("p", { className: "text-[13px] font-medium text-success", children: t("allDone") }) : null, ctx.onAdd ? _jsx(TaskAdd, { onAdd: (v) => ctx.onAdd(v), t: t }) : null] }));
+});
+function TaskGroup({ items, ctx, depth, parentId, ...props }) {
+    let list = ctx.hide ? items.filter((i) => !i.done) : items;
+    if (ctx.sortCompleted)
+        list = [...list.filter((i) => !i.done), ...list.filter((i) => i.done)];
+    const ids = items.map((i) => i.id);
+    const move = (id, delta) => {
+        const from = ids.indexOf(id);
+        const to = from + delta;
+        if (from < 0 || to < 0 || to >= ids.length)
+            return;
+        const next = [...ids];
+        next.splice(to, 0, next.splice(from, 1)[0]);
+        void ctx.onReorder?.(next, parentId);
+    };
+    return (_jsx("ul", { "data-slot": "task-group", "data-depth": depth, className: cn("flex flex-col", depth > 0 && "ms-[calc(var(--task-box)/2+0.25rem)] border-s border-line ps-3"), ...props, children: list.map((task) => (_jsx(TaskItem, { task: task, ctx: ctx, depth: depth, parentId: parentId, onMove: ctx.onReorder ? (d) => move(task.id, d) : undefined }, task.id))) }));
+}
+function dueInfo(due, todayKey, done, ctx) {
+    if (!todayKey)
+        return { text: ctx.f.date(due, { month: "short", day: "numeric" }), tone: "muted", spoken: ctx.t("due", { when: ctx.f.date(due, "long") }) };
+    const days = Math.round((Date.UTC(+due.slice(0, 4), +due.slice(5, 7) - 1, +due.slice(8, 10)) - Date.UTC(+todayKey.slice(0, 4), +todayKey.slice(5, 7) - 1, +todayKey.slice(8, 10))) / 86_400_000);
+    const rel = Math.abs(days) <= 6 ? ctx.f.relative(days, "day", { numeric: "auto" }) : ctx.f.date(due, { month: "short", day: "numeric", ...(due.slice(0, 4) !== todayKey.slice(0, 4) ? { year: "numeric" } : {}) });
+    const text = rel.charAt(0).toLocaleUpperCase(ctx.f.locale) + rel.slice(1);
+    const tone = done ? "muted" : days < 0 ? "danger" : days === 0 ? "warning" : "muted";
+    return { text, tone, spoken: tone === "danger" ? ctx.t("overdue", { when: text }) : ctx.t("due", { when: text }) };
+}
+const PRIORITY_TONE = {
+    low: "text-fg-subtle",
+    medium: "text-info",
+    high: "text-warning",
+    urgent: "text-danger",
+};
+function TaskItem({ task, ctx, depth, parentId, onMove }) {
+    const { t } = ctx;
+    const [editing, setEditing] = React.useState(false);
+    const [adding, setAdding] = React.useState(false);
+    const [open, setOpen] = React.useState(true);
+    const titleId = React.useId();
+    const kids = task.children ?? [];
+    const kidsDone = flatten(kids).filter((k) => k.done).length;
+    const kidsTotal = flatten(kids).length;
+    const editBtn = React.useRef(null);
+    const rich = ctx.variant === "list";
+    const due = task.due && rich ? dueInfo(task.due, ctx.todayKey, task.done, ctx) : null;
+    const locked = task.disabled || ctx.readOnly;
+    return (_jsxs("li", { "data-slot": "task-item", "data-done": task.done ? "" : undefined, onKeyDown: (e) => {
+            if (!onMove || !e.altKey || (e.key !== "ArrowUp" && e.key !== "ArrowDown"))
+                return;
+            if (e.target !== e.currentTarget && e.target.closest("li") !== e.currentTarget)
+                return;
+            e.preventDefault();
+            onMove(e.key === "ArrowUp" ? -1 : 1);
+            const el = e.target;
+            requestAnimationFrame(() => el.focus());
+        }, children: [_jsxs("div", { className: cn("group/task relative -mx-2 flex items-start gap-2.5 rounded-ui-sm px-2 transition-colors hover:bg-hover", rich ? "py-2" : "py-1.5"), children: [_jsx(Checkbox, { checked: task.done, disabled: task.disabled, readOnly: ctx.readOnly, "aria-labelledby": titleId, onCheckedChange: (v) => ctx.toggle(task, v === true), className: "mt-px" }), _jsxs("div", { className: "min-w-0 flex-1", children: [editing ? (_jsx(TaskTitleEditor, { initial: task.title, label: t("edit", { title: task.title }), onCancel: () => {
+                                    setEditing(false);
+                                    requestAnimationFrame(() => editBtn.current?.focus());
+                                }, onSave: async (title) => {
+                                    try {
+                                        await ctx.onEdit(task.id, { title });
+                                        setEditing(false);
+                                        requestAnimationFrame(() => editBtn.current?.focus());
+                                    }
+                                    catch {
+                                        toast.danger(t("saveError"));
+                                    }
+                                } })) : (_jsx("span", { id: titleId, className: cn("block text-[13.5px] leading-[var(--task-box)] text-fg transition-colors", task.done && "text-fg-subtle line-through decoration-[color-mix(in_srgb,var(--fg-subtle)_70%,transparent)]"), onDoubleClick: () => !locked && ctx.onEdit && setEditing(true), children: task.title })), task.description && !editing ? _jsx("p", { className: cn("mt-0.5 text-xs text-fg-muted", task.done && "text-fg-subtle"), children: task.description }) : null, rich && (due || task.priority || task.assignee || kidsTotal > 0) && !editing ? (_jsxs("div", { "data-slot": "task-meta", className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted", children: [kidsTotal > 0 ? (_jsxs("button", { type: "button", "aria-expanded": open, onClick: () => setOpen((o) => !o), className: "inline-flex cursor-pointer items-center gap-1 rounded-ui-sm tabular hover:text-fg focus-ring", children: [_jsx(ChevronDown, { className: cn("size-3.5 transition-transform motion-reduce:transition-none", !open && "-rotate-90 rtl:rotate-90"), "aria-hidden": true }), _jsxs("span", { className: "sr-only", children: [t("expand", { title: task.title }), ", "] }), t("subtasks", { done: kidsDone, total: kidsTotal })] })) : null, due ? (_jsxs("span", { className: cn("inline-flex items-center gap-1", due.tone === "danger" && "font-medium text-danger", due.tone === "warning" && "font-medium text-warning"), children: [_jsx(CalendarDays, { className: "size-3.5", "aria-hidden": true }), _jsx("span", { "aria-hidden": true, children: due.text }), _jsx("span", { className: "sr-only", children: due.spoken })] })) : null, task.priority && task.priority !== "low" ? (_jsxs("span", { className: cn("inline-flex items-center gap-1", PRIORITY_TONE[task.priority], task.done && "text-fg-subtle"), children: [_jsx(Flag, { className: "size-3.5", "aria-hidden": true, fill: task.priority === "urgent" ? "currentColor" : "none" }), _jsx("span", { children: t("priority", { level: t(task.priority) }) })] })) : null, task.assignee ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Avatar, { name: task.assignee.name, src: task.assignee.avatar, size: "xs", "aria-hidden": true }), _jsx("span", { className: "sr-only", children: t("assignee", { name: task.assignee.name }) }), _jsx("span", { "aria-hidden": true, className: "max-sm:hidden", children: task.assignee.name.split(" ")[0] })] })) : null] })) : null] }), !locked && !editing && (ctx.onEdit || ctx.onRemove || ctx.onAdd) ? (_jsxs("span", { className: "flex shrink-0 items-center gap-0.5 opacity-100 transition-opacity sm:opacity-0 sm:group-hover/task:opacity-100 sm:group-focus-within/task:opacity-100 [@media(hover:none)]:opacity-100", children: [ctx.onAdd && depth === 0 && rich ? (_jsx(IconButton, { label: t("addSubtaskTo", { title: task.title }), size: "xs", tooltip: false, onClick: () => setAdding(true), children: _jsx(ListPlus, {}) })) : null, ctx.onEdit ? (_jsx(IconButton, { ref: editBtn, label: t("edit", { title: task.title }), size: "xs", tooltip: false, onClick: () => setEditing(true), children: _jsx(Pencil, {}) })) : null, ctx.onRemove ? (_jsx(IconButton, { label: t("remove", { title: task.title }), size: "xs", tooltip: false, className: "hover:text-danger", onClick: () => void ctx.onRemove(task.id), children: _jsx(Trash2, {}) })) : null] })) : null] }), (kids.length > 0 && open) || adding ? (_jsxs("div", { className: "pb-1", children: [kids.length > 0 && open ? _jsx(TaskGroup, { items: kids, ctx: ctx, depth: depth + 1, parentId: task.id }) : null, adding ? (_jsx("div", { className: "ms-[calc(var(--task-box)/2+0.25rem)] border-s border-line ps-3", children: _jsx(TaskAdd, { autoFocus: true, compact: true, placeholder: t("addSubtask"), t: t, onCancel: () => setAdding(false), onAdd: (v) => ctx.onAdd(v, task.id) }) })) : null] })) : null] }));
+}
+function TaskTitleEditor({ initial, label, onSave, onCancel }) {
+    const [v, setV] = React.useState(initial);
+    const [busy, setBusy] = React.useState(false);
+    return (_jsx("input", { autoFocus: true, "aria-label": label, value: v, disabled: busy, dir: "auto", onChange: (e) => setV(e.target.value), onBlur: () => !busy && onCancel(), onKeyDown: async (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onCancel();
+            }
+            else if (e.key === "Enter") {
+                e.preventDefault();
+                const next = v.trim();
+                if (!next || next === initial)
+                    return onCancel();
+                setBusy(true);
+                await onSave(next);
+                setBusy(false);
+            }
+        }, className: "-my-0.5 h-[calc(var(--task-box)+0.25rem)] w-full rounded-ui-sm border border-field-border-hover bg-field px-1.5 text-[13.5px] text-fg outline-none focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_18%,transparent)]" }));
+}
+function TaskAdd({ onAdd, onCancel, t, placeholder, autoFocus, compact }) {
+    const [v, setV] = React.useState("");
+    const [busy, setBusy] = React.useState(false);
+    const ref = React.useRef(null);
+    return (_jsxs("div", { "data-slot": "task-add", className: cn("group/add flex items-center gap-2.5 rounded-ui-sm text-fg-subtle focus-within:text-fg-muted", compact ? "py-1" : "-mx-2 px-2 py-1.5 hover:bg-hover"), children: [_jsx(Plus, { className: "size-(--task-box) shrink-0 p-px", "aria-hidden": true }), _jsx("input", { ref: ref, autoFocus: autoFocus, value: v, dir: "auto", disabled: busy, placeholder: placeholder ?? t("add"), "aria-label": placeholder ?? t("add"), onChange: (e) => setV(e.target.value), onBlur: () => !v && onCancel?.(), onKeyDown: async (e) => {
+                    if (e.key === "Escape" && onCancel) {
+                        e.preventDefault();
+                        onCancel();
+                    }
+                    if (e.key !== "Enter")
+                        return;
+                    e.preventDefault();
+                    const title = v.trim();
+                    if (!title)
+                        return;
+                    setBusy(true);
+                    try {
+                        await onAdd(title);
+                        setV("");
+                    }
+                    catch {
+                        toast.danger(t("saveError"));
+                    }
+                    finally {
+                        setBusy(false);
+                        requestAnimationFrame(() => ref.current?.focus());
+                    }
+                }, className: "h-7 min-w-0 flex-1 bg-transparent text-[13.5px] text-fg outline-none placeholder:text-fg-subtle" })] }));
+}

package/dist/components/time-picker.d.ts

@@ -0,0 +1,119 @@
+import * as React from "react";
+declare const timePickerLabels: {
+    hour: string;
+    minute: string;
+    second: string;
+    dayPeriod: string;
+    time: string;
+    showTimes: string;
+    times: string;
+    start: string;
+    end: string;
+    to: string;
+    durationHours: string;
+    durationMinutes: string;
+    nextDay: string;
+    empty: string;
+};
+export type TimePickerLabels = typeof timePickerLabels;
+export interface TimeInputProps {
+    /** `"HH:mm"` (or `"HH:mm:ss"` with `seconds`), 24h, whatever the display. `null` = empty. */
+    value?: string | null;
+    defaultValue?: string | null;
+    /** Called with a complete time, or `null` when the input is emptied or left incomplete. */
+    onValueChange?: (value: string | null) => void;
+    /** Display hour cycle. Default from the locale (en-US 12, tr 24). */
+    hourCycle?: 12 | 24;
+    /** Minutes per ArrowUp / ArrowDown on the minute segment. Default 1. */
+    step?: number;
+    /** Show a seconds segment. */
+    seconds?: boolean;
+    /** Earliest allowed time (`"HH:mm"`). Out of range marks the input invalid. */
+    min?: string;
+    /** Latest allowed time (`"HH:mm"`). */
+    max?: string;
+    /** Return `true` for times that are not allowed. */
+    disabledTimes?: (time: string) => boolean;
+    /** Hidden input name (submits `"HH:mm"`). */
+    name?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "ghost";
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Leading icon. Default a clock; `null` hides it. */
+    icon?: React.ReactNode;
+    /** Content at the end of the box (TimePicker puts its slot button here). */
+    trailing?: React.ReactNode;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    labels?: Partial<TimePickerLabels>;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+}
+/** True when a time breaks `min` / `max` / `disabledTimes`. */
+export declare function isTimeOutOfRange(value: string | null | undefined, opts: {
+    min?: string;
+    max?: string;
+    disabledTimes?: (t: string) => boolean;
+}): boolean;
+/**
+ * Segmented time entry: each part is an ARIA spinbutton. ↑/↓ change the value, digits type
+ * ahead and auto-advance, ←/→ move between parts, Backspace clears. Segment order, separator
+ * and AM/PM come from `Intl`; the value is always `"HH:mm"` 24h.
+ *
+ * ```tsx
+ * <Field label="Start"><TimeInput value={time} onValueChange={setTime} /></Field>
+ * ```
+ */
+export declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLDivElement>>;
+export interface TimePickerProps extends TimeInputProps {
+    /** Show a slot list popover (every `step` minutes). Default `false`. */
+    slots?: boolean;
+    /** Minutes between slots and per arrow press. Default 15. */
+    step?: number;
+    /** First and last slot of the list. Default `min`/`max`, else the whole day. */
+    slotRange?: {
+        start: string;
+        end: string;
+    };
+    /** Popover open state (controlled). */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Time of day: a segmented input with an optional list of slots every `step` minutes.
+ * The value is `"HH:mm"` 24h; the display follows the locale (en-US 2:30 PM, tr 14:30).
+ *
+ * ```tsx
+ * <TimePicker value={time} onValueChange={setTime} slots step={30} min="09:00" max="18:00" />
+ * ```
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;
+export interface TimeRange {
+    start: string | null;
+    end: string | null;
+}
+export interface TimeRangePickerProps extends Omit<TimeInputProps, "value" | "defaultValue" | "onValueChange" | "name" | "trailing" | "icon"> {
+    value?: TimeRange;
+    defaultValue?: TimeRange;
+    onValueChange?: (value: TimeRange) => void;
+    /** Allow an end before the start (night shift, ends the next day). Default `false`. */
+    overnight?: boolean;
+    /** Show the duration after the inputs. Default `true`. */
+    showDuration?: boolean;
+    nameStart?: string;
+    nameEnd?: string;
+}
+/** Minutes between two times; with `overnight` an earlier end counts as the next day. */
+export declare function timeRangeMinutes(range: TimeRange, overnight?: boolean): number | null;
+/**
+ * Start and end time with a duration hint (shift start/end, opening hours). The end must be after
+ * the start unless `overnight` is set.
+ */
+export declare const TimeRangePicker: React.ForwardRefExoticComponent<TimeRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};