@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/calendar.js

@@ -0,0 +1,483 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, RotateCcw } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLocale } from "../lib/locale.js";
+import { useLabels } from "../lib/labels.js";
+import { useControllableState, useEventCallback } from "../lib/use-controllable-state.js";
+import { dateToIso, getDateFnsLocale, isoToDate, todayIso } from "../lib/date.js";
+import { getWeekInfo } from "../locale-data/core/week-info.js";
+import { holidayName } from "../locale-data/core/holidays.js";
+import { trHolidays } from "../locale-data/tr/holidays.js";
+import { Button, IconButton } from "./button.js";
+/* ------------------------------------------------------------------ */
+/* Labels                                                              */
+/* ------------------------------------------------------------------ */
+const calendarLabels = {
+    prevMonth: "Previous month",
+    nextMonth: "Next month",
+    prevYear: "Previous year",
+    nextYear: "Next year",
+    selectMonth: "Select month",
+    selectYear: "Select year",
+    nav: "Calendar navigation",
+    today: "Today",
+    todayDay: "Today, {date}",
+    selectedDay: "{date}, selected",
+    weekNumber: "Week {week}",
+    weekColumn: "Week",
+    weekColumnShort: "Wk",
+    holiday: "Holiday",
+    halfDay: "{name} (from {time})",
+    weekend: "Weekend",
+    more: "+{count} more",
+    loading: "Loading…",
+    slots: "Available times",
+    noSlots: "No times available on this day",
+    slotsError: "Couldn't load the times.",
+    retry: "Try again",
+    slotsLeft: "{count, plural, one {# slot left} other {# slots left}}",
+    unavailable: "unavailable",
+};
+/** Turns string / matcher input into react-day-picker matchers (min/max become `before`/`after`). */
+export function toDayMatchers(options) {
+    const out = [];
+    const min = isoToDate(options.min);
+    const max = isoToDate(options.max);
+    if (min)
+        out.push({ before: min });
+    if (max)
+        out.push({ after: max });
+    const list = options.disabledDays === undefined ? [] : Array.isArray(options.disabledDays) ? options.disabledDays : [options.disabledDays];
+    for (const m of list) {
+        if (typeof m === "string") {
+            const d = isoToDate(m);
+            if (d)
+                out.push(d);
+        }
+        else
+            out.push(m);
+    }
+    return out;
+}
+/** react-day-picker `weekStartsOn` (0 = Sunday) and `firstWeekContainsDate` of a locale. */
+export function useCalendarWeek(locale) {
+    const ctx = useLocale();
+    const info = getWeekInfo(locale ?? ctx.locale);
+    return React.useMemo(() => ({
+        weekStartsOn: (info.firstDay % 7),
+        firstWeekContainsDate: (info.minimalDays >= 4 ? 4 : 1),
+        /** ISO weekdays (1 = Monday … 7 = Sunday) of the weekend. */
+        weekend: info.weekend,
+    }), [info]);
+}
+const GridContext = React.createContext({ size: "md" });
+// Modifiers surfaced as data attributes on the day cell (in addition to rdp's own).
+const DATA_MODIFIERS = {
+    range_start: "data-range-start",
+    range_middle: "data-range-middle",
+    range_end: "data-range-end",
+    weekend: "data-weekend",
+    holiday: "data-holiday",
+    preview: "data-preview",
+    previewEnd: "data-preview-end",
+    marked: "data-marked",
+};
+function GridDay({ day, modifiers, children, ...props }) {
+    const ctx = React.useContext(GridContext);
+    const extra = {};
+    for (const [mod, attr] of Object.entries(DATA_MODIFIERS))
+        if (modifiers[mod])
+            extra[attr] = "";
+    // Non-interactive grids (mode "none") get plain text from rdp; wrap it in the same day box so
+    // holidays, markers, today and outside days keep their styling.
+    const isStatic = !React.isValidElement(children);
+    const dayExtra = isStatic ? ctx.renderDayExtra?.(day.date, modifiers) : null;
+    return (_jsx("td", { ...props, ...extra, children: isStatic ? (_jsxs("span", { className: "ui-cal-day", "data-static": "", title: ctx.dayTitle?.(day.date, modifiers), children: [_jsx("span", { "data-slot": "calendar-day-number", children: children }), dayExtra != null && dayExtra !== false ? (_jsx("span", { "data-slot": "calendar-day-extra", "aria-hidden": true, children: dayExtra })) : null] })) : (children) }));
+}
+function GridDayButton({ day, modifiers, className, children, ...props }) {
+    const ctx = React.useContext(GridContext);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    const extra = ctx.renderDayExtra?.(day.date, modifiers);
+    const title = ctx.dayTitle?.(day.date, modifiers);
+    const hasExtra = extra != null && extra !== false;
+    // With visible extras (event lines, counts) the day's name moves from aria-label into hidden
+    // text: an aria-label that doesn't contain the visible "2 Discovery call" fails WCAG 2.5.3.
+    const { "aria-label": ariaLabel, ...buttonProps } = props;
+    return (_jsxs("button", { ref: ref, title: title, ...buttonProps, "aria-label": hasExtra ? undefined : ariaLabel, className: cn("ui-cal-day", className), children: [hasExtra && ariaLabel ? _jsx("span", { className: "sr-only", children: ariaLabel }) : null, _jsx("span", { "data-slot": "calendar-day-number", "aria-hidden": hasExtra && ariaLabel ? true : undefined, children: children }), hasExtra ? (_jsx("span", { "data-slot": "calendar-day-extra", "aria-hidden": true, children: extra })) : null] }));
+}
+function GridChevron({ orientation = "left", className }) {
+    const Icon = orientation === "right" ? ChevronRight : orientation === "down" ? ChevronDown : orientation === "up" ? ChevronUp : ChevronLeft;
+    return _jsx(Icon, { "aria-hidden": true, className: cn("size-4", (orientation === "left" || orientation === "right") && "rtl:-scale-x-100", className) });
+}
+const MonthDateContext = React.createContext(null);
+function GridMonthCaption({ calendarMonth, displayIndex: _i, ...props }) {
+    return (_jsx(MonthDateContext.Provider, { value: calendarMonth.date, children: _jsx("div", { ...props }) }));
+}
+function GridCaptionLabel({ children, className, ...props }) {
+    const month = React.useContext(MonthDateContext);
+    const { locale } = useLocale();
+    // In label mode the caption is a status region: split "November 2026" into month + muted year.
+    if (props.role === "status" && month) {
+        const parts = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).formatToParts(month);
+        return (_jsx("span", { ...props, className: className, children: parts.map((p, i) => p.type === "year" ? (_jsx("span", { className: "font-normal text-fg-muted", children: p.value }, i)) : (_jsx(React.Fragment, { children: p.value }, i))) }));
+    }
+    return (_jsx("span", { ...props, className: className, children: children }));
+}
+const gridComponents = {
+    Day: GridDay,
+    DayButton: GridDayButton,
+    Chevron: GridChevron,
+    MonthCaption: GridMonthCaption,
+    CaptionLabel: GridCaptionLabel,
+};
+const navButton = "inline-flex size-8 items-center justify-center rounded-ui-sm text-fg-muted transition-colors hover:bg-hover hover:text-fg focus-ring aria-disabled:pointer-events-none aria-disabled:opacity-30";
+const gridClassNames = {
+    root: "ui-cal relative w-fit max-w-full",
+    months: "ui-cal-months relative flex flex-col gap-x-8 gap-y-5 sm:flex-row",
+    month: "grid content-start gap-2",
+    month_caption: "flex h-8 items-center ps-1.5 pe-[4.5rem]",
+    caption_label: "inline-flex items-center gap-1 text-sm font-semibold tracking-[-0.01em] text-fg [&_svg]:size-3.5 [&_svg]:text-fg-subtle",
+    nav: "absolute end-0 top-0 z-[1] flex h-8 items-center gap-0.5",
+    button_previous: navButton,
+    button_next: navButton,
+    chevron: "",
+    dropdowns: "flex items-center gap-1.5",
+    dropdown_root: "relative inline-flex h-7 items-center rounded-ui-sm border border-field-border bg-field ps-2 pe-1.5 transition-[border-color,box-shadow] hover:border-field-border-hover has-[:focus-visible]:border-ring has-[:focus-visible]:shadow-[0_0_0_3px_var(--accent-soft)]",
+    dropdown: "absolute inset-0 w-full cursor-pointer appearance-none opacity-0",
+    month_grid: "ui-cal-grid border-separate border-spacing-x-0 border-spacing-y-0.5",
+    weekdays: "",
+    weekday: "ui-cal-weekday h-7 p-0 text-center align-middle text-[10.5px] font-medium uppercase tracking-[0.08em] text-fg-subtle",
+    weeks: "",
+    week: "",
+    week_number_header: "ui-cal-weekno h-7 p-0 text-center align-middle font-mono text-[10px] font-normal tracking-wide text-fg-subtle",
+    week_number: "ui-cal-weekno p-0 text-center align-middle font-mono text-[10px] font-normal text-fg-subtle tabular",
+    day: "ui-cal-cell p-0 text-center align-middle",
+    day_button: "",
+    footer: "ui-cal-footer",
+    // State classes are replaced by data attributes (see GridDay).
+    selected: "",
+    range_start: "",
+    range_middle: "",
+    range_end: "",
+    today: "",
+    outside: "",
+    disabled: "",
+    hidden: "invisible",
+    focused: "",
+};
+/** react-day-picker styled with tokens. See `CalendarGridProps`. */
+export function CalendarGrid(props) {
+    const { size = "md", renderDayExtra, describeDay, dayTitle, markWeekends = true, labels, ariaLabels, className, classNames, components, modifiers, ...rest } = props;
+    const t = useLabels("calendar", calendarLabels, labels);
+    const { locale, dir } = useLocale();
+    const fnsLocale = getDateFnsLocale(locale);
+    const week = useCalendarWeek();
+    const allModifiers = React.useMemo(() => {
+        if (!markWeekends)
+            return modifiers;
+        const weekend = week.weekend;
+        return { weekend: (d) => weekend.includes(((d.getDay() + 6) % 7) + 1), ...modifiers };
+    }, [markWeekends, modifiers, week.weekend]);
+    const describe = useEventCallback(describeDay);
+    const dayLabelFormat = React.useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: "full" }), [locale]);
+    const rdpLabels = React.useMemo(() => ({
+        labelPrevious: () => t("prevMonth"),
+        labelNext: () => t("nextMonth"),
+        labelMonthDropdown: () => t("selectMonth"),
+        labelYearDropdown: () => t("selectYear"),
+        labelNav: () => t("nav"),
+        labelWeekNumber: (week) => t("weekNumber", { week }),
+        labelWeekNumberHeader: () => t("weekColumn"),
+        // Non-interactive cells (read-only grids) are labelled on the <td>; same Intl date.
+        labelGridcell: (date, mods) => {
+            const label = dayLabelFormat.format(date);
+            return mods?.today ? t("todayDay", { date: label }) : label;
+        },
+        labelDayButton: (date, mods) => {
+            // Intl, not date-fns "PPPP": the name must contain the visible day number ("November 1",
+            // not "November 1st") or it fails WCAG 2.5.3 label-in-name on every day button.
+            let label = dayLabelFormat.format(date);
+            if (mods.today)
+                label = t("todayDay", { date: label });
+            const more = describe(date, mods);
+            if (more)
+                label = `${label}, ${more}`;
+            if (mods.disabled)
+                label = `${label}, ${t("unavailable")}`;
+            if (mods.selected)
+                label = t("selectedDay", { date: label });
+            return label;
+        },
+        ...ariaLabels,
+    }), [t, dayLabelFormat, describe, ariaLabels]);
+    const ctx = React.useMemo(() => ({ renderDayExtra, dayTitle, size }), [renderDayExtra, dayTitle, size]);
+    return (_jsx(GridContext.Provider, { value: ctx, children: _jsx(DayPicker, { locale: fnsLocale, dir: dir, weekStartsOn: week.weekStartsOn, firstWeekContainsDate: week.firstWeekContainsDate, showOutsideDays: true, formatters: { formatWeekNumberHeader: () => t("weekColumnShort") }, ...rest, modifiers: allModifiers, labels: rdpLabels, className: cn(className), "data-size": size, classNames: { ...gridClassNames, ...classNames }, components: { ...gridComponents, ...components } }) }));
+}
+const monthOf = (value) => {
+    if (!value)
+        return null;
+    const iso = /^\d{4}-\d{2}$/.test(value) ? `${value}-01` : value;
+    const d = isoToDate(iso);
+    return d ? new Date(d.getFullYear(), d.getMonth(), 1) : null;
+};
+const addMonths = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+const lastOfMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0);
+const asArray = (v) => (v === undefined ? [] : Array.isArray(v) ? v : [v]);
+const toneVar = {
+    neutral: "var(--fg-muted)",
+    accent: "var(--accent-ink)",
+    success: "var(--success)",
+    warning: "var(--warning)",
+    danger: "var(--danger)",
+    info: "var(--info)",
+};
+function initialSelectionMonth(props) {
+    const v = props.value ?? props.defaultValue;
+    if (!v)
+        return undefined;
+    if (typeof v === "string")
+        return v;
+    if (Array.isArray(v))
+        return v[0];
+    return v.from;
+}
+/**
+ * Standalone month, multi-month or year calendar with per-day content: marker dots, holidays,
+ * counts, availability. Values are `YYYY-MM-DD` strings. Week start, weekend and month names
+ * follow the locale; holidays come from the locale pack (Turkish public holidays for `tr`).
+ *
+ * ```tsx
+ * <Calendar
+ *   value={day}
+ *   onValueChange={setDay}
+ *   markers={{ "2026-11-12": { label: "2 scheduled posts", tone: "accent", count: 2 } }}
+ * />
+ * <Calendar months={12} size="sm" markers={density} />
+ * ```
+ */
+export const Calendar = React.forwardRef(function Calendar(props, ref) {
+    const { months = 1, month: monthProp, defaultMonth, onMonthChange, onVisibleRangeChange, min, max, disabledDays, required, showWeekNumbers, holidays: holidaysProp, holidayRegion, markers, renderDay, size: sizeProp, variant = "plain", header = true, headerAction, legend, loading, weekStartsOn, footer, gridProps, className, id, labels, } = props;
+    const mode = props.mode ?? "single";
+    const t = useLabels("calendar", calendarLabels, labels);
+    const { locale, timeZone } = useLocale();
+    const isYear = months === 12;
+    const size = sizeProp ?? (isYear ? "sm" : "md");
+    const today = todayIso(timeZone === "UTC" ? undefined : timeZone);
+    // Visible month
+    const startOf = React.useCallback((d) => (isYear ? new Date(d.getFullYear(), 0, 1) : d), [isYear]);
+    const initialMonth = () => startOf(monthOf(defaultMonth) ?? monthOf(initialSelectionMonth(props)) ?? monthOf(today));
+    const [visibleMonth, setVisibleMonth] = useControllableState({
+        value: monthProp ? (monthOf(monthProp) ?? undefined) : undefined,
+        defaultValue: initialMonth,
+        onChange: (d) => onMonthChange?.(dateToIso(d)),
+        name: "Calendar",
+    });
+    const firstMonth = startOf(visibleMonth);
+    const lastMonth = addMonths(firstMonth, months - 1);
+    const rangeStart = dateToIso(firstMonth);
+    const rangeEnd = dateToIso(lastOfMonth(lastMonth));
+    const reportRange = useEventCallback(onVisibleRangeChange);
+    React.useEffect(() => {
+        reportRange({ start: rangeStart, end: rangeEnd });
+    }, [rangeStart, rangeEnd, reportRange]);
+    // Selection (string values ↔ rdp Dates)
+    const [single, setSingle] = useControllableState({
+        value: mode === "single" ? props.value : undefined,
+        defaultValue: mode === "single" ? (props.defaultValue ?? null) : null,
+        onChange: mode === "single" ? props.onValueChange : undefined,
+        name: "Calendar",
+    });
+    const [multiple, setMultiple] = useControllableState({
+        value: mode === "multiple" ? props.value : undefined,
+        defaultValue: mode === "multiple" ? (props.defaultValue ?? []) : [],
+        onChange: mode === "multiple" ? props.onValueChange : undefined,
+        name: "Calendar",
+    });
+    const [range, setRange] = useControllableState({
+        value: mode === "range" ? props.value : undefined,
+        defaultValue: mode === "range" ? (props.defaultValue ?? null) : null,
+        onChange: mode === "range" ? props.onValueChange : undefined,
+        name: "Calendar",
+    });
+    // Holidays in view
+    const providers = React.useMemo(() => {
+        if (holidaysProp === false)
+            return [];
+        if (holidaysProp)
+            return asArray(holidaysProp);
+        return locale.toLowerCase().startsWith("tr") ? [trHolidays] : [];
+    }, [holidaysProp, locale]);
+    const padStart = dateToIso(new Date(firstMonth.getFullYear(), firstMonth.getMonth(), -6));
+    const padEnd = dateToIso(new Date(lastMonth.getFullYear(), lastMonth.getMonth() + 1, 7));
+    const holidayMap = React.useMemo(() => {
+        const map = new Map();
+        for (const p of providers)
+            for (const h of p.get({ start: padStart, end: padEnd }, { region: holidayRegion })) {
+                const list = map.get(h.date) ?? [];
+                list.push(h);
+                map.set(h.date, list);
+            }
+        return map;
+    }, [providers, padStart, padEnd, holidayRegion]);
+    const holidayLabel = React.useCallback((h) => {
+        const name = holidayName(h, locale, "tr");
+        return h.partial ? t("halfDay", { name, time: h.partial.from }) : name;
+    }, [locale, t]);
+    const markerList = React.useCallback((iso) => asArray(markers?.[iso]), [markers]);
+    const describeDay = React.useCallback((date) => {
+        const iso = dateToIso(date);
+        const words = [...(holidayMap.get(iso) ?? []).map(holidayLabel), ...markerList(iso).map((m) => m.label)];
+        return words.length ? words.join(", ") : undefined;
+    }, [holidayMap, holidayLabel, markerList]);
+    const dayTitle = React.useCallback((date) => {
+        const iso = dateToIso(date);
+        const words = [...(holidayMap.get(iso) ?? []).map(holidayLabel), ...markerList(iso).map((m) => m.label)];
+        return words.length ? words.join(" · ") : undefined;
+    }, [holidayMap, holidayLabel, markerList]);
+    const renderDayExtra = React.useCallback((date, mods) => {
+        const iso = dateToIso(date);
+        const hs = holidayMap.get(iso) ?? [];
+        const ms = markerList(iso);
+        if (renderDay) {
+            return renderDay(date, {
+                iso,
+                isToday: !!mods.today,
+                isWeekend: !!mods.weekend,
+                outside: !!mods.outside,
+                selected: !!mods.selected,
+                disabled: !!mods.disabled,
+                holidays: hs,
+                markers: ms,
+            });
+        }
+        if (loading && !mods.outside)
+            return _jsx("span", { className: "ui-cal-dots", children: _jsx("span", { className: "ui-cal-dot ui-cal-dot-loading" }) });
+        if (size === "lg") {
+            if (!hs.length && !ms.length)
+                return null;
+            const shown = ms.slice(0, 2);
+            return (_jsxs("span", { className: "ui-cal-lines", children: [hs.map((h, i) => (_jsx("span", { className: "ui-cal-line ui-cal-line-holiday", children: holidayLabel(h) }, `h${i}`))), shown.map((m, i) => (_jsx("span", { className: "ui-cal-line", style: { "--tone": toneVar[m.tone ?? "accent"] }, children: m.label }, i))), ms.length > shown.length ? _jsx("span", { className: "ui-cal-line-more", children: t("more", { count: ms.length - shown.length }) }) : null] }));
+        }
+        const dots = [];
+        if (hs.length)
+            dots.push({ tone: "var(--warning)", key: "holiday" });
+        for (const [i, m] of ms.entries())
+            if (dots.length < 3)
+                dots.push({ tone: toneVar[m.tone ?? "accent"], key: String(i) });
+        if (!dots.length)
+            return null;
+        return (_jsx("span", { className: "ui-cal-dots", children: dots.map((d) => (_jsx("span", { className: "ui-cal-dot", style: { "--tone": d.tone } }, d.key))) }));
+    }, [holidayMap, markerList, renderDay, loading, size, holidayLabel, t]);
+    const modifiers = React.useMemo(() => ({
+        holiday: (d) => holidayMap.has(dateToIso(d)),
+        marked: (d) => markerList(dateToIso(d)).length > 0,
+    }), [holidayMap, markerList]);
+    const disabled = React.useMemo(() => toDayMatchers({ min, max, disabledDays }), [min, max, disabledDays]);
+    // Navigation
+    const step = isYear ? 12 : months;
+    const minMonth = monthOf(min);
+    const maxMonth = monthOf(max);
+    const canPrev = !minMonth || addMonths(firstMonth, -1) >= startOf(minMonth);
+    const canNext = !maxMonth || addMonths(lastMonth, 1) <= maxMonth;
+    const go = (n) => setVisibleMonth(addMonths(firstMonth, n));
+    const goToday = () => setVisibleMonth(startOf(monthOf(today)));
+    const showingToday = today >= rangeStart && today <= rangeEnd;
+    const title = isYear
+        ? new Intl.DateTimeFormat(locale, { year: "numeric" }).format(firstMonth)
+        : months === 1
+            ? null
+            : new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).formatRange(firstMonth, lastMonth).replace(/[\u2009\u202f]/g, " ");
+    const monthParts = months === 1 ? new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).formatToParts(firstMonth) : null;
+    // Legend: given items + holidays when any are in view.
+    const legendItems = React.useMemo(() => {
+        if (!legend)
+            return [];
+        const items = Array.isArray(legend) ? [...legend] : [];
+        const anyHoliday = [...holidayMap.keys()].some((k) => k >= rangeStart && k <= rangeEnd);
+        if (anyHoliday && !items.some((i) => i.kind === "holiday"))
+            items.push({ label: t("holiday"), kind: "holiday" });
+        return items;
+    }, [legend, holidayMap, rangeStart, rangeEnd, t]);
+    const selectionProps = mode === "single"
+        ? { mode: "single", required, selected: isoToDate(single) ?? undefined, onSelect: (d) => setSingle(d ? dateToIso(d) : null) }
+        : mode === "multiple"
+            ? { mode: "multiple", selected: multiple.map((v) => isoToDate(v)).filter(Boolean), onSelect: (ds) => setMultiple((ds ?? []).map(dateToIso).sort()) }
+            : mode === "range"
+                ? {
+                    mode: "range",
+                    selected: range ? { from: isoToDate(range.from) ?? undefined, to: isoToDate(range.to) ?? undefined } : undefined,
+                    onSelect: (r) => setRange(r?.from ? { from: dateToIso(r.from), ...(r.to ? { to: dateToIso(r.to) } : {}) } : null),
+                }
+                : {};
+    const week = useCalendarWeek();
+    const { classNames: gridClassNamesProp, ...restGrid } = gridProps ?? {};
+    return (_jsxs("div", { ref: ref, id: id, "data-slot": "calendar", "data-variant": variant, "data-months": months, "aria-busy": loading || undefined, className: cn("grid min-w-0 gap-3", variant === "card" && "surface rounded-ui-lg p-[calc(var(--gap)*1.1)]", size === "lg" && "w-full", className), children: [header ? (_jsxs("div", { "data-slot": "calendar-header", className: "flex min-h-8 flex-wrap items-center gap-x-3 gap-y-2", children: [_jsx("h3", { className: "me-auto min-w-0 text-[15px] font-semibold tracking-[-0.015em] text-fg", children: monthParts
+                            ? monthParts.map((p, i) => p.type === "year" ? (_jsx("span", { className: "font-normal text-fg-muted", children: p.value }, i)) : (_jsx(React.Fragment, { children: p.value }, i)))
+                            : title }), headerAction, _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { size: "xs", variant: "secondary", onClick: goToday, disabled: showingToday, children: t("today") }), _jsx(IconButton, { size: "sm", label: isYear ? t("prevYear") : t("prevMonth"), tooltip: false, onClick: () => go(-step), disabled: !canPrev, children: _jsx(ChevronLeft, { className: "rtl:-scale-x-100" }) }), _jsx(IconButton, { size: "sm", label: isYear ? t("nextYear") : t("nextMonth"), tooltip: false, onClick: () => go(step), disabled: !canNext, children: _jsx(ChevronRight, { className: "rtl:-scale-x-100" }) })] })] })) : null, _jsx(CalendarGrid, { ...selectionProps, size: size, labels: labels, month: firstMonth, onMonthChange: (d) => setVisibleMonth(startOf(d)), numberOfMonths: months, pagedNavigation: true, hideNavigation: header, showOutsideDays: months === 1, fixedWeeks: months === 1 && size !== "lg", showWeekNumber: showWeekNumbers, weekStartsOn: weekStartsOn ?? week.weekStartsOn, startMonth: minMonth ?? undefined, endMonth: maxMonth ?? undefined, disabled: disabled, modifiers: modifiers, renderDayExtra: renderDayExtra, describeDay: describeDay, dayTitle: dayTitle, "aria-label": props["aria-label"], footer: footer, classNames: {
+                    ...(months === 1 && header ? { month_caption: "sr-only" } : null),
+                    ...(isYear ? { months: "ui-cal-months grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", month_caption: "flex h-7 items-center ps-1.5" } : null),
+                    ...(size === "lg" ? { root: "ui-cal relative w-full", months: "ui-cal-months relative grid gap-6", month: "grid min-w-0 content-start gap-2" } : null),
+                    ...gridClassNamesProp,
+                }, ...restGrid }), legendItems.length ? _jsx(CalendarLegend, { items: legendItems }) : null] }));
+});
+/** Key for the marks on a Calendar (dot tones, holidays, today). */
+export const CalendarLegend = React.forwardRef(function CalendarLegend({ items, className, labels: _labels, ...props }, ref) {
+    return (_jsx("ul", { ref: ref, "data-slot": "calendar-legend", className: cn("flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-fg-muted", className), ...props, children: items.map((item, i) => (_jsxs("li", { className: "inline-flex items-center gap-1.5", children: [item.kind === "holiday" ? (_jsx("span", { "aria-hidden": true, className: "ui-cal-legend-holiday" })) : item.kind === "today" ? (_jsx("span", { "aria-hidden": true, className: "h-0.5 w-3 rounded-full bg-accent-ink" })) : (_jsx("span", { "aria-hidden": true, className: "size-1.5 rounded-full", style: { background: toneVar[item.tone ?? "accent"] } })), item.label] }, i))) }));
+});
+/**
+ * Time slots for the selected day (booking). A `radiogroup` with roving focus: arrows move,
+ * Space / Enter selects. Unavailable slots are shown struck through and skipped.
+ *
+ * ```tsx
+ * <CalendarSlots day={day} slots={slots} value={time} onValueChange={setTime} />
+ * ```
+ */
+export const CalendarSlots = React.forwardRef(function CalendarSlots({ slots, value: valueProp, defaultValue, onValueChange, day, loading, error, onRetry, hourCycle, columns = 3, labels, className, ...props }, ref) {
+    const t = useLabels("calendar", calendarLabels, labels);
+    const { locale, format } = useLocale();
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? null, onChange: onValueChange, name: "CalendarSlots" });
+    const headingId = React.useId();
+    const listRef = React.useRef(null);
+    const timeFmt = React.useMemo(() => new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", timeZone: "UTC", ...(hourCycle ? { hourCycle: hourCycle === 12 ? "h12" : "h23" } : null) }), [locale, hourCycle]);
+    const show = (hhmm) => {
+        const [h, m] = hhmm.split(":").map(Number);
+        return timeFmt.format(new Date(Date.UTC(1970, 0, 1, h ?? 0, m ?? 0)));
+    };
+    const enabled = slots.filter((s) => s.available);
+    const focusIndex = Math.max(0, enabled.findIndex((s) => s.start === value));
+    const available = enabled.length;
+    const onKeyDown = (e) => {
+        const keys = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+        if (!(e.key in keys) && e.key !== "Home" && e.key !== "End")
+            return;
+        const buttons = Array.from(listRef.current?.querySelectorAll('[role="radio"]:not([aria-disabled="true"])') ?? []);
+        const cur = buttons.indexOf(document.activeElement);
+        if (!buttons.length)
+            return;
+        e.preventDefault();
+        const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+        let delta = keys[e.key] ?? 0;
+        if (rtl && (e.key === "ArrowLeft" || e.key === "ArrowRight"))
+            delta = -delta;
+        const next = e.key === "Home" ? 0 : e.key === "End" ? buttons.length - 1 : (cur + delta + buttons.length) % buttons.length;
+        const el = buttons[next];
+        el.focus();
+        setValue(el.dataset.value ?? null);
+    };
+    return (_jsxs("div", { ref: ref, "data-slot": "calendar-slots", className: cn("grid content-start gap-3", className), ...props, children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h4", { id: headingId, className: "text-[13px] font-semibold text-fg", children: day ? format.date(day, { weekday: "long", month: "long", day: "numeric" }) : t("slots") }), !loading && !error && slots.length ? _jsx("span", { className: "text-xs text-fg-subtle tabular", children: t("slotsLeft", { count: available }) }) : null] }), loading ? (_jsx("div", { className: cn("grid gap-1.5", columns === 2 ? "grid-cols-2" : columns === 4 ? "grid-cols-4" : "grid-cols-3"), "aria-label": t("loading"), role: "status", children: Array.from({ length: 9 }, (_, i) => (_jsx("span", { className: "h-(--control-h) animate-pulse rounded-ui-sm bg-skeleton motion-reduce:animate-none" }, i))) })) : error ? (_jsxs("div", { role: "alert", className: "grid justify-items-start gap-2 rounded-ui border border-dashed border-line px-3 py-3 text-[13px] text-fg-muted", children: [_jsx("span", { children: error === true ? t("slotsError") : error }), onRetry ? (_jsxs(Button, { size: "xs", variant: "secondary", onClick: onRetry, children: [_jsx(RotateCcw, {}), " ", t("retry")] })) : null] })) : !slots.length || !available ? (_jsx("p", { className: "rounded-ui border border-dashed border-line px-3 py-4 text-center text-[13px] text-fg-muted", children: t("noSlots") })) : (_jsx("div", { ref: listRef, role: "radiogroup", "aria-labelledby": headingId, onKeyDown: onKeyDown, className: cn("grid gap-1.5", columns === 2 ? "grid-cols-2" : columns === 4 ? "grid-cols-4" : "grid-cols-3"), children: slots.map((s) => {
+                    const checked = s.start === value;
+                    const idx = enabled.indexOf(s);
+                    return (_jsxs("button", { type: "button", role: "radio", "aria-checked": checked, "aria-disabled": !s.available || undefined, "data-value": s.start, "data-state": checked ? "checked" : "unchecked", tabIndex: s.available && idx === focusIndex ? 0 : -1, onClick: () => s.available && setValue(s.start), className: cn("flex h-(--control-h) flex-col items-center justify-center rounded-ui-sm border text-[13px] font-medium tabular transition-[background-color,border-color,color] focus-ring", checked
+                            ? "border-transparent bg-accent text-accent-fg"
+                            : s.available
+                                ? "border-field-border bg-field text-fg hover:border-field-border-hover hover:bg-hover"
+                                : "cursor-not-allowed border-dashed border-line text-fg-subtle line-through decoration-fg-subtle/60"), children: [_jsx("span", { children: show(s.start) }), s.label ? _jsx("span", { className: cn("text-[10.5px] font-normal leading-none", checked ? "text-accent-fg/80" : "text-fg-subtle"), children: s.label }) : null] }, s.start));
+                }) }))] }));
+});

package/dist/components/card.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export declare const cardVariants: (props?: ({
+    variant?: "inset" | "outline" | "ghost" | "surface" | null | undefined;
+    padding?: "none" | "sm" | "md" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof cardVariants> {
+    /** Merge onto the child — e.g. `<Card asChild interactive><Link href>…</Link></Card>` makes the whole card a link. */
+    asChild?: boolean;
+    /** Semantic element. Use `"section"` with `aria-labelledby` pointing at the CardTitle id. Default `"div"`. */
+    as?: "div" | "section" | "article" | "aside" | "li";
+    /** Sets `aria-busy`; render `<CardBody loading />` for the shimmer. */
+    loading?: boolean;
+    /** Selected state for selectable cards (`data-selected`, accent border). */
+    selected?: boolean;
+}
+/**
+ * The main content surface. Takes its glass or solid material from tokens; spacing follows
+ * `--gap` (density axis). In glass mode nest cards with `variant="inset"` — a second blurred
+ * surface costs frames and blurs text.
+ *
+ * ```tsx
+ * <Card>
+ *   <CardHeader title="Open deals" description="Pipeline value by stage" action={<Button size="sm">View all</Button>} />
+ *   <CardBody>…</CardBody>
+ * </Card>
+ * ```
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Small line above the title ("Q3 · Sales"). No CSS uppercase — Turkish-safe. */
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Actions at the top end. */
+    action?: React.ReactNode;
+    /** Heading level of `title`. Default `"h3"`. */
+    titleAs?: "h2" | "h3" | "h4";
+    /** Id for the title (for `aria-labelledby` on a section card). */
+    titleId?: string;
+    /** Hairline under the header. */
+    divider?: boolean;
+}
+/** Prop-based header (title, description, action). For custom layouts compose CardTitle / CardDescription / CardAction. */
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/** Small mono line above a title. */
+export declare function CardEyebrow({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+/** Card title. Default `<h3>`. */
+export declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: "h2" | "h3" | "h4" | "p";
+} & React.RefAttributes<HTMLHeadingElement>>;
+/** Secondary line under the title. */
+export declare function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+/** Actions slot at the top end of a header. */
+export declare function CardAction({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Replace the content with a text skeleton. */
+    loading?: boolean;
+    /** Lines of the loading skeleton. Default 3. */
+    loadingLines?: number;
+}
+export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** A secondary tile inside a card (`surface-2`, never blurs). */
+export declare const Inset: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { SkeletonText } from "./skeleton.js";
+export const cardVariants = cva("relative block [--card-p:var(--gap)]", {
+    variants: {
+        variant: {
+            /** The main surface: glass or solid from tokens. */
+            surface: "surface rounded-ui-lg",
+            /** Hairline border, no fill — quiet grouping on a surface. */
+            outline: "rounded-ui-lg border border-line",
+            /** No chrome; keeps the card spacing. */
+            ghost: "rounded-ui-lg",
+            /** A card inside a card: `surface-2`, never blurs (glass budget). */
+            inset: "surface-2 rounded-ui",
+        },
+        padding: {
+            /** Parts (CardHeader/Body/Footer) bring their own padding. */
+            none: "",
+            sm: "p-[calc(var(--card-p)*0.7)]",
+            md: "p-(--card-p)",
+        },
+        interactive: {
+            true: "cursor-pointer transition-[border-color,box-shadow,transform] duration-150 hover:border-field-border-hover focus-ring has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-ring motion-safe:active:translate-y-px",
+        },
+    },
+    defaultVariants: { variant: "surface", padding: "none" },
+});
+/**
+ * The main content surface. Takes its glass or solid material from tokens; spacing follows
+ * `--gap` (density axis). In glass mode nest cards with `variant="inset"` — a second blurred
+ * surface costs frames and blurs text.
+ *
+ * ```tsx
+ * <Card>
+ *   <CardHeader title="Open deals" description="Pipeline value by stage" action={<Button size="sm">View all</Button>} />
+ *   <CardBody>…</CardBody>
+ * </Card>
+ * ```
+ */
+export const Card = React.forwardRef(function Card({ className, variant, padding, interactive, asChild, as = "div", loading, selected, ...props }, ref) {
+    const Comp = (asChild ? Slot.Root : as);
+    return (_jsx(Comp, { ref: ref, "data-slot": "card", "data-variant": variant ?? "surface", "data-selected": selected ? "" : undefined, "aria-busy": loading || undefined, className: cn(cardVariants({ variant, padding, interactive }), selected && "border-accent-ink! ring-1 ring-accent-ink", className), ...props }));
+});
+/** Prop-based header (title, description, action). For custom layouts compose CardTitle / CardDescription / CardAction. */
+export const CardHeader = React.forwardRef(function CardHeader({ eyebrow, title, description, action, titleAs = "h3", titleId, divider, className, children, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, "data-slot": "card-header", className: cn("flex items-start justify-between gap-4 px-(--card-p,1.25rem) pt-[calc(var(--card-p,1.25rem)*0.8)] pb-[calc(var(--card-p,1.25rem)*0.6)]", divider && "border-b border-line pb-[calc(var(--card-p,1.25rem)*0.8)]", className), ...props, children: [_jsxs("div", { className: "min-w-0", children: [eyebrow ? _jsx(CardEyebrow, { children: eyebrow }) : null, title ? (_jsx(CardTitle, { as: titleAs, id: titleId, children: title })) : null, description ? _jsx(CardDescription, { children: description }) : null, children] }), action ? _jsx(CardAction, { children: action }) : null] }));
+});
+/** Small mono line above a title. */
+export function CardEyebrow({ className, ...props }) {
+    return _jsx("p", { "data-slot": "card-eyebrow", className: cn("mb-1 font-mono text-[11px] tracking-[0.06em] text-fg-subtle", className), ...props });
+}
+/** Card title. Default `<h3>`. */
+export const CardTitle = React.forwardRef(function CardTitle({ as: Tag = "h3", className, ...props }, ref) {
+    return _jsx(Tag, { ref: ref, "data-slot": "card-title", className: cn("text-[15px] font-semibold tracking-[-0.01em] text-balance text-fg", className), ...props });
+});
+/** Secondary line under the title. */
+export function CardDescription({ className, ...props }) {
+    return _jsx("p", { "data-slot": "card-description", className: cn("mt-0.5 text-[13px] text-pretty text-fg-muted", className), ...props });
+}
+/** Actions slot at the top end of a header. */
+export function CardAction({ className, ...props }) {
+    return _jsx("div", { "data-slot": "card-action", className: cn("flex shrink-0 items-center gap-1.5", className), ...props });
+}
+export const CardBody = React.forwardRef(function CardBody({ className, loading, loadingLines = 3, children, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "data-slot": "card-body", className: cn("px-(--card-p,1.25rem) pb-(--card-p,1.25rem)", className), ...props, children: loading ? _jsx(SkeletonText, { lines: loadingLines }) : children }));
+});
+export const CardFooter = React.forwardRef(function CardFooter({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "data-slot": "card-footer", className: cn("flex items-center gap-2 border-t border-line px-(--card-p,1.25rem) py-[calc(var(--card-p,1.25rem)*0.6)]", className), ...props }));
+});
+/** A secondary tile inside a card (`surface-2`, never blurs). */
+export const Inset = React.forwardRef(function Inset({ className, ...props }, ref) {
+    return _jsx("div", { ref: ref, "data-slot": "inset", className: cn("surface-2 rounded-ui", className), ...props });
+});