@cronus-ui/ui 0.6.0

package/dist/components/textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Textarea = forwardRef(({ className, invalid = false, "aria-invalid": ariaInvalid, ...props }, ref) => {
+    return (_jsx("textarea", { ref: ref, "data-slot": "textarea", "aria-invalid": invalid ? true : ariaInvalid, className: cn("field-sizing-content min-h-20 w-full resize-y rounded-lg border border-border bg-surface-inset px-3 py-2 text-sm text-fg", "placeholder:text-fg-tertiary", "transition-[border-color,box-shadow] duration-150 ease-[var(--ease-out-quart)]", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", "disabled:opacity-50 disabled:pointer-events-none", "selection:bg-primary selection:text-primary-foreground", "aria-invalid:border-error aria-invalid:ring-2 aria-invalid:ring-error/30", invalid && "border-error focus-visible:ring-error focus-visible:ring-offset-surface-base", className), ...props }));
+});
+Textarea.displayName = "Textarea";
+//# sourceMappingURL=textarea.js.map

package/dist/components/tilt-card.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes } from "react";
+/**
+ * A card that tilts in 3D toward the pointer. The pointer position is mapped to a
+ * pair of rotations and written straight to the DOM via CSS custom properties
+ * (`--tilt-rx` / `--tilt-ry`, plus `--tilt-gx` / `--tilt-gy` for the glare) inside
+ * a single `requestAnimationFrame` — moving the pointer therefore never triggers a
+ * React re-render; the compositor recomputes the transform. A short
+ * `transition-transform` smooths the follow and eases the card back to flat on
+ * leave. Hover zoom and the glare sheen are toggled with a `data-tilting`
+ * attribute (CSS-driven). Unlike `SpotlightCard` (a flat radial glow), this is a
+ * real perspective transform with optional depth parallax.
+ *
+ * Performance: no state updates on `mousemove`; the pending frame is cancelled on
+ * every move, on leave, and on unmount. Accessibility: the effect is purely
+ * decorative — the card is not a control, keeps its natural focus/reading order,
+ * and is fully neutralised under `prefers-reduced-motion: reduce` (the transform
+ * is forced to `none` and the glare is hidden).
+ */
+export interface TiltCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Maximum rotation, in degrees, reached on each axis at the card's edges. Higher feels more dramatic. @default 12 */
+    maxTilt?: number;
+    /** Render a soft pointer-following glare sheen across the surface. @default false */
+    glare?: boolean;
+    /** Uniform zoom applied while the pointer is over the card (`1` = none). @default 1.03 */
+    scale?: number;
+    /** Lift the content toward the viewer on hover for a layered parallax depth effect. @default false */
+    parallax?: boolean;
+}
+export declare const TiltCard: import("react").ForwardRefExoticComponent<TiltCardProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=tilt-card.d.ts.map

package/dist/components/tilt-card.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { cn } from "../lib/cn.js";
+const prefersReducedMotion = () => typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+export const TiltCard = forwardRef(({ maxTilt = 12, glare = false, scale = 1.03, parallax = false, className, style, children, onMouseMove, onMouseEnter, onMouseLeave, ...props }, ref) => {
+    const localRef = useRef(null);
+    const frameRef = useRef(null);
+    const setRef = useCallback((node) => {
+        localRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const handleMouseMove = useCallback((event) => {
+        const node = localRef.current;
+        if (node && !prefersReducedMotion()) {
+            const clientX = event.clientX;
+            const clientY = event.clientY;
+            if (frameRef.current !== null) {
+                cancelAnimationFrame(frameRef.current);
+            }
+            frameRef.current = requestAnimationFrame(() => {
+                frameRef.current = null;
+                const current = localRef.current;
+                if (!current) {
+                    return;
+                }
+                const rect = current.getBoundingClientRect();
+                // Normalise pointer to 0..1 within the card, then clamp so a fast
+                // pointer that overshoots the bounds can't exceed maxTilt.
+                const px = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
+                const py = Math.min(Math.max((clientY - rect.top) / rect.height, 0), 1);
+                current.style.setProperty("--tilt-ry", `${(px - 0.5) * 2 * maxTilt}deg`);
+                current.style.setProperty("--tilt-rx", `${(0.5 - py) * 2 * maxTilt}deg`);
+                current.style.setProperty("--tilt-gx", `${px * 100}%`);
+                current.style.setProperty("--tilt-gy", `${py * 100}%`);
+            });
+        }
+        onMouseMove?.(event);
+    }, [maxTilt, onMouseMove]);
+    const handleMouseEnter = useCallback((event) => {
+        const node = localRef.current;
+        if (node && !prefersReducedMotion()) {
+            node.style.setProperty("--tilt-scale", String(scale));
+            node.setAttribute("data-tilting", "true");
+        }
+        onMouseEnter?.(event);
+    }, [scale, onMouseEnter]);
+    const handleMouseLeave = useCallback((event) => {
+        if (frameRef.current !== null) {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+        const node = localRef.current;
+        if (node) {
+            node.style.setProperty("--tilt-rx", "0deg");
+            node.style.setProperty("--tilt-ry", "0deg");
+            node.style.setProperty("--tilt-scale", "1");
+            node.removeAttribute("data-tilting");
+        }
+        onMouseLeave?.(event);
+    }, [onMouseLeave]);
+    // Cancel any in-flight frame if the card unmounts mid-tilt.
+    useEffect(() => () => {
+        if (frameRef.current !== null) {
+            cancelAnimationFrame(frameRef.current);
+        }
+    }, []);
+    return (_jsxs("div", { ref: setRef, "data-slot": "tilt-card", className: cn("group relative rounded-2xl border border-border bg-surface-raised p-6 text-fg shadow-sm", "[transform-style:preserve-3d] transition-[transform,box-shadow] duration-150 ease-out will-change-transform", "group-data-[tilting]:shadow-lg data-[tilting]:shadow-lg", "motion-reduce:transition-none motion-reduce:!transform-none", className), style: {
+            transform: "perspective(1000px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)) scale(var(--tilt-scale, 1))",
+            ...style,
+        }, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: [glare ? (_jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-10 overflow-hidden rounded-[inherit] opacity-0 transition-opacity duration-300 group-data-[tilting]:opacity-100 motion-reduce:hidden motion-reduce:transition-none", style: {
+                    background: "radial-gradient(600px circle at var(--tilt-gx, 50%) var(--tilt-gy, 50%), color-mix(in oklch, var(--cronus-fg) 16%, transparent), transparent 60%)",
+                } })) : null, _jsx("div", { className: cn("relative", parallax &&
+                    "[transform:translateZ(0)] transition-transform duration-150 ease-out group-data-[tilting]:[transform:translateZ(42px)] motion-reduce:!transform-none"), children: children })] }));
+});
+TiltCard.displayName = "TiltCard";
+//# sourceMappingURL=tilt-card.js.map

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

@@ -0,0 +1,58 @@
+/**
+ * A time picker that pairs a `Button` trigger (Clock icon + formatted value) with
+ * a `Popover` holding scrollable hour / minute (and optional second) columns.
+ *
+ * - **Value model**: controlled or uncontrolled via a `{ hours, minutes, seconds }`
+ *   object (24-hour `hours`) or a `"HH:mm"` / `"HH:mm:ss"` string; `onChange`
+ *   always emits the normalized object.
+ * - **12h / 24h**: `hourCycle` swaps a 0–23 hour column for a 1–12 column plus an
+ *   AM/PM column. `minuteStep` / `secondStep` set each column's granularity.
+ * - **Keyboard**: each column is an ARIA `listbox` — Arrow Up/Down (wrapping),
+ *   Home/End, PageUp/PageDown, type digits to jump to a value, and Enter to
+ *   confirm & close. Selection is committed on move/click; focus roves between
+ *   columns with Tab.
+ * - **Performance / a11y**: the active option is centered with `scrollIntoView`
+ *   (instant on open, smooth after — and always instant under
+ *   `prefers-reduced-motion: reduce`); the type-to-jump buffer's only timer is
+ *   cleared on unmount. No `setState` runs on scroll.
+ */
+export interface TimeValue {
+    /** Hours in 24-hour form, 0–23. */
+    hours: number;
+    /** Minutes, 0–59. */
+    minutes: number;
+    /** Seconds, 0–59 (only surfaced when `showSeconds` is set). */
+    seconds?: number;
+}
+export interface TimePickerProps {
+    /** Controlled value — a `{ hours, minutes, seconds }` object (24h `hours`) or a `"HH:mm"` / `"HH:mm:ss"` string. */
+    value?: TimeValue | string;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: TimeValue | string;
+    /** Fired with the normalized `{ hours, minutes, seconds }` whenever the time changes. */
+    onChange?: (value: TimeValue) => void;
+    /** `12` renders a 1–12 hour column plus an AM/PM column; `24` renders a 0–23 column. @default 12 */
+    hourCycle?: 12 | 24;
+    /** Granularity of the minute column, in minutes. @default 1 */
+    minuteStep?: number;
+    /** Render a seconds column. @default false */
+    showSeconds?: boolean;
+    /** Granularity of the seconds column, in seconds. @default 1 */
+    secondStep?: number;
+    /** Text shown on the trigger when no value is set. @default "Select time" */
+    placeholder?: string;
+    /** Disable the trigger and the whole panel. */
+    disabled?: boolean;
+    /** Accessible name for the trigger when there is no visible label. */
+    "aria-label"?: string;
+    /** Extra classes for the trigger button. */
+    className?: string;
+    /** Extra classes for the popover panel. */
+    contentClassName?: string;
+    /** Native id for the trigger. */
+    id?: string;
+    /** Popover alignment relative to the trigger. @default "start" */
+    align?: "start" | "center" | "end";
+}
+export declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/components/time-picker.js

@@ -0,0 +1,245 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clock } from "lucide-react";
+import { forwardRef, useEffect, useId, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+/** Vertical fade so the scroll columns read like a wheel without fragile spacer math. */
+const COLUMN_FADE = "linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent)";
+function clampInt(value, min, max) {
+    const rounded = Math.round(value);
+    return rounded < min ? min : rounded > max ? max : rounded;
+}
+function pad2(value) {
+    return String(value).padStart(2, "0");
+}
+/** Parse `"HH:mm"` or `"HH:mm:ss"` into a normalized `TimeValue`, or `null`. */
+function parseTimeString(input) {
+    const match = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/.exec(input.trim());
+    if (!match)
+        return null;
+    return {
+        hours: clampInt(Number(match[1]), 0, 23),
+        minutes: clampInt(Number(match[2]), 0, 59),
+        seconds: match[3] !== undefined ? clampInt(Number(match[3]), 0, 59) : 0,
+    };
+}
+/** Coerce any accepted input into a clamped `TimeValue`, or `undefined` when unset/invalid. */
+function normalize(value) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === "string")
+        return parseTimeString(value) ?? undefined;
+    return {
+        hours: clampInt(value.hours ?? 0, 0, 23),
+        minutes: clampInt(value.minutes ?? 0, 0, 59),
+        seconds: clampInt(value.seconds ?? 0, 0, 59),
+    };
+}
+function formatTime(time, hourCycle, showSeconds) {
+    const secondPart = showSeconds ? `:${pad2(time.seconds ?? 0)}` : "";
+    if (hourCycle === 24) {
+        return `${pad2(time.hours)}:${pad2(time.minutes)}${secondPart}`;
+    }
+    const period = time.hours < 12 ? "AM" : "PM";
+    const hour12 = time.hours % 12 === 0 ? 12 : time.hours % 12;
+    return `${pad2(hour12)}:${pad2(time.minutes)}${secondPart} ${period}`;
+}
+/** Convert a 1–12 clock hour + period into a 0–23 hour. */
+function to24Hour(hour12, period) {
+    if (period === "AM")
+        return hour12 === 12 ? 0 : hour12;
+    return hour12 === 12 ? 12 : hour12 + 12;
+}
+function buildMinuteRange(step) {
+    const safe = Math.max(1, Math.floor(step));
+    const out = [];
+    for (let i = 0; i < 60; i += safe)
+        out.push(i);
+    return out;
+}
+/** One scrollable, single-select column rendered as an ARIA listbox. */
+function TimeColumn({ label, header, options, selected, kind, disabled, onSelect, onConfirm, }) {
+    const baseId = useId();
+    const selectedRef = useRef(null);
+    const didScrollRef = useRef(false);
+    const bufferRef = useRef("");
+    const bufferTimerRef = useRef(null);
+    // The only timer in the component — reset the type-to-jump buffer and always
+    // clear it on unmount so nothing fires after the popover closes.
+    useEffect(() => {
+        return () => {
+            if (bufferTimerRef.current !== null)
+                clearTimeout(bufferTimerRef.current);
+        };
+    }, []);
+    // Center the active option: instant on first paint (open), smooth afterwards,
+    // and always instant when the user prefers reduced motion.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `selected` is the intended re-run trigger; the ref reads happen at effect time.
+    useEffect(() => {
+        const node = selectedRef.current;
+        if (!node)
+            return;
+        const prefersReduced = typeof window !== "undefined" &&
+            typeof window.matchMedia === "function" &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        node.scrollIntoView?.({
+            block: "center",
+            behavior: !didScrollRef.current || prefersReduced ? "auto" : "smooth",
+        });
+        didScrollRef.current = true;
+    }, [selected]);
+    const commitByIndex = (index) => {
+        const option = options[index];
+        if (option)
+            onSelect(option.value);
+    };
+    const move = (delta) => {
+        const length = options.length;
+        const current = selected === null ? -1 : options.findIndex((o) => o.value === selected);
+        const start = current < 0 ? (delta > 0 ? -1 : 0) : current;
+        const next = (((start + delta) % length) + length) % length;
+        commitByIndex(next);
+    };
+    const jumpByTyping = (key) => {
+        if (kind === "period") {
+            const lower = key.toLowerCase();
+            if (lower === "a")
+                onSelect("AM");
+            else if (lower === "p")
+                onSelect("PM");
+            return;
+        }
+        if (!/^\d$/.test(key))
+            return;
+        if (bufferTimerRef.current !== null)
+            clearTimeout(bufferTimerRef.current);
+        bufferRef.current = (bufferRef.current + key).slice(-2);
+        const target = Number(bufferRef.current);
+        // Exact match when present, otherwise the nearest available (respects step).
+        let best = options[0];
+        let bestDiff = Number.POSITIVE_INFINITY;
+        for (const option of options) {
+            const diff = Math.abs(option.value - target);
+            if (diff < bestDiff) {
+                bestDiff = diff;
+                best = option;
+            }
+        }
+        if (best)
+            onSelect(best.value);
+        bufferTimerRef.current = setTimeout(() => {
+            bufferRef.current = "";
+        }, 900);
+    };
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                move(1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                move(-1);
+                break;
+            case "PageDown":
+                event.preventDefault();
+                move(5);
+                break;
+            case "PageUp":
+                event.preventDefault();
+                move(-5);
+                break;
+            case "Home":
+                event.preventDefault();
+                commitByIndex(0);
+                break;
+            case "End":
+                event.preventDefault();
+                commitByIndex(options.length - 1);
+                break;
+            case "Enter":
+                event.preventDefault();
+                onConfirm?.();
+                break;
+            default:
+                jumpByTyping(event.key);
+        }
+    };
+    const activeId = selected !== null ? `${baseId}-${selected}` : undefined;
+    return (_jsxs("div", { className: "flex flex-col items-center gap-1.5", children: [_jsx("span", { className: "text-[0.6875rem] font-medium uppercase tracking-[0.08em] text-fg-tertiary", children: header }), _jsx("div", { role: "listbox", "aria-label": label, "aria-activedescendant": activeId, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, "data-slot": "time-picker-column", className: "h-48 w-16 space-y-1 overflow-y-auto overscroll-contain rounded-lg px-1 outline-none [scrollbar-width:none] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-floating [&::-webkit-scrollbar]:hidden", style: { maskImage: COLUMN_FADE, WebkitMaskImage: COLUMN_FADE }, children: options.map((option) => {
+                    const isSelected = option.value === selected;
+                    return (_jsx("div", { id: `${baseId}-${option.value}`, role: "option", "aria-selected": isSelected, ref: isSelected ? selectedRef : undefined, onClick: disabled ? undefined : () => onSelect(option.value), "data-slot": "time-picker-option", className: cn("flex h-9 scroll-my-2 items-center justify-center rounded-md text-sm tabular-nums transition-colors duration-150 motion-reduce:transition-none", disabled ? "cursor-default" : "cursor-pointer", isSelected
+                            ? "bg-[color-mix(in_oklch,var(--cronus-primary),black_30%)] font-semibold text-white shadow-xs"
+                            : "text-fg-secondary hover:bg-surface-overlay hover:text-fg"), children: option.label }, String(option.value)));
+                }) })] }));
+}
+TimeColumn.displayName = "TimeColumn";
+export const TimePicker = forwardRef(({ value: valueProp, defaultValue, onChange, hourCycle = 12, minuteStep = 1, showSeconds = false, secondStep = 1, placeholder = "Select time", disabled = false, "aria-label": ariaLabel, className, contentClassName, id, align = "start", }, ref) => {
+    const [open, setOpen] = useState(false);
+    const isControlled = valueProp !== undefined;
+    const [uncontrolled, setUncontrolled] = useState(() => normalize(defaultValue));
+    const currentValue = isControlled ? normalize(valueProp) : uncontrolled;
+    const isSet = currentValue !== undefined;
+    const time = currentValue ?? { hours: 0, minutes: 0, seconds: 0 };
+    const commit = (next) => {
+        const normalized = normalize(next) ?? { hours: 0, minutes: 0, seconds: 0 };
+        if (!isControlled)
+            setUncontrolled(normalized);
+        onChange?.(normalized);
+    };
+    const period = time.hours < 12 ? "AM" : "PM";
+    const hour12 = time.hours % 12 === 0 ? 12 : time.hours % 12;
+    const hourValues = hourCycle === 24
+        ? Array.from({ length: 24 }, (_, i) => i)
+        : [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+    const hourOptions = hourValues.map((v) => ({ value: v, label: pad2(v) }));
+    const minuteOptions = buildMinuteRange(minuteStep).map((v) => ({
+        value: v,
+        label: pad2(v),
+    }));
+    const secondOptions = buildMinuteRange(secondStep).map((v) => ({
+        value: v,
+        label: pad2(v),
+    }));
+    const selectedHour = !isSet ? null : hourCycle === 24 ? time.hours : hour12;
+    const selectedMinute = isSet ? time.minutes : null;
+    const selectedSecond = isSet ? (time.seconds ?? 0) : null;
+    const selectedPeriod = isSet ? period : null;
+    const handleHour = (value) => {
+        const h = value;
+        commit({ ...time, hours: hourCycle === 24 ? h : to24Hour(h, period) });
+    };
+    const handleMinute = (value) => {
+        commit({ ...time, minutes: value });
+    };
+    const handleSecond = (value) => {
+        commit({ ...time, seconds: value });
+    };
+    const handlePeriod = (value) => {
+        commit({ ...time, hours: to24Hour(hour12, value) });
+    };
+    const handleNow = () => {
+        const now = new Date();
+        commit({
+            hours: now.getHours(),
+            minutes: Math.floor(now.getMinutes() / Math.max(1, Math.floor(minuteStep))) *
+                Math.max(1, Math.floor(minuteStep)),
+            seconds: showSeconds
+                ? Math.floor(now.getSeconds() / Math.max(1, Math.floor(secondStep))) *
+                    Math.max(1, Math.floor(secondStep))
+                : 0,
+        });
+    };
+    const display = formatTime(time, hourCycle, showSeconds);
+    const closePanel = () => setOpen(false);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: ref, id: id, variant: "outline", disabled: disabled, "aria-haspopup": "dialog", "aria-label": ariaLabel ? (isSet ? `${ariaLabel}: ${display}` : ariaLabel) : undefined, "data-slot": "time-picker", className: cn("w-[240px] justify-start gap-2 font-normal", className), children: [_jsx(Clock, { className: "size-4 shrink-0 text-fg-tertiary" }), _jsx("span", { className: cn("tabular-nums", !isSet && "text-fg-muted"), children: isSet ? display : placeholder })] }) }), _jsxs(PopoverContent, { align: align, "aria-label": ariaLabel ?? "Choose a time", "data-slot": "time-picker-content", className: cn("w-auto p-3", contentClassName), children: [_jsxs("div", { className: "flex items-stretch justify-center gap-1", children: [_jsx(TimeColumn, { label: "Hour", header: "Hr", kind: "number", options: hourOptions, selected: selectedHour, disabled: disabled, onSelect: handleHour, onConfirm: closePanel }), _jsx(TimeColumn, { label: "Minute", header: "Min", kind: "number", options: minuteOptions, selected: selectedMinute, disabled: disabled, onSelect: handleMinute, onConfirm: closePanel }), showSeconds ? (_jsx(TimeColumn, { label: "Second", header: "Sec", kind: "number", options: secondOptions, selected: selectedSecond, disabled: disabled, onSelect: handleSecond, onConfirm: closePanel })) : null, hourCycle === 12 ? (_jsx(TimeColumn, { label: "AM or PM", header: "AM/PM", kind: "period", options: [
+                                    { value: "AM", label: "AM" },
+                                    { value: "PM", label: "PM" },
+                                ], selected: selectedPeriod, disabled: disabled, onSelect: handlePeriod, onConfirm: closePanel })) : null] }), _jsxs("div", { className: "mt-3 flex items-center justify-between gap-2 border-t border-border-soft pt-3", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: disabled, onClick: handleNow, "data-slot": "time-picker-now", children: "Now" }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: closePanel, "data-slot": "time-picker-done", children: "Done" })] })] })] }));
+});
+TimePicker.displayName = "TimePicker";
+//# sourceMappingURL=time-picker.js.map

package/dist/components/timeline.d.ts

@@ -0,0 +1,81 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes, type LiHTMLAttributes, type OlHTMLAttributes, type ReactNode, type TimeHTMLAttributes } from "react";
+/**
+ * Vertical activity / history feed. Renders an ordered list (`<ol>`) of
+ * {@link TimelineItem}s, each with a dot on a left rail and a connector line
+ * running down to the next event. Purely presentational and SSR-safe — there
+ * is no state or effects. Compose items inside it:
+ *
+ * ```tsx
+ * <Timeline>
+ *   <TimelineItem>
+ *     <TimelineDot tone="success" />
+ *     <TimelineContent>
+ *       <TimelineTitle>Order shipped</TimelineTitle>
+ *       <TimelineTime dateTime="2026-06-23">Jun 23</TimelineTime>
+ *       <TimelineDescription>Left the warehouse.</TimelineDescription>
+ *     </TimelineContent>
+ *   </TimelineItem>
+ * </Timeline>
+ * ```
+ */
+export declare const Timeline: import("react").ForwardRefExoticComponent<OlHTMLAttributes<HTMLOListElement> & import("react").RefAttributes<HTMLOListElement>>;
+export interface TimelineItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    /**
+     * Render the trailing connector line below this item's dot. Defaults to
+     * `true`; the rail draws a line down to the next event. Set `false` on the
+     * final item so the rail stops at its dot (auto-detected when the item is the
+     * last child of a {@link Timeline}, so this is rarely needed by hand).
+     */
+    connector?: boolean;
+}
+/**
+ * A single event row. Lays out as a two-column grid — a left rail holding the
+ * {@link TimelineDot} plus the vertical {@link TimelineConnector}, and the
+ * content column. The connector is rendered automatically (no trailing line on
+ * the last item); pass `connector={false}` to drop it explicitly. Any
+ * {@link TimelineDot} child is hoisted onto the rail, so the common markup is
+ * just the dot followed by the content.
+ */
+export declare const TimelineItem: import("react").ForwardRefExoticComponent<TimelineItemProps & import("react").RefAttributes<HTMLLIElement>>;
+declare const timelineDotVariants: (props?: ({
+    tone?: "default" | "success" | "warning" | "primary" | "error" | null | undefined;
+    withIcon?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TimelineDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, Omit<VariantProps<typeof timelineDotVariants>, "withIcon"> {
+    /**
+     * Optional glyph (e.g. a `lucide-react` icon) rendered inside the dot. When
+     * present the dot becomes a ring-bordered chip sized to hold it; otherwise it
+     * is a small solid disc.
+     */
+    icon?: ReactNode;
+}
+/**
+ * The marker on a {@link TimelineItem}'s rail. Without an `icon` it is a small
+ * solid disc colored by `tone` (default = muted, primary/success/warning/error
+ * map to the matching token); with an `icon` it renders as a ring-bordered chip
+ * holding the glyph. Decorative styling only — the event's meaning lives in the
+ * adjacent {@link TimelineTitle}.
+ */
+export declare const TimelineDot: import("react").ForwardRefExoticComponent<TimelineDotProps & import("react").RefAttributes<HTMLSpanElement>>;
+/**
+ * The vertical line linking one event to the next. Normally rendered for you by
+ * {@link TimelineItem} (which omits it on the last item); exposed for manual
+ * composition. Stretches to fill the rail below the dot and is decorative, so
+ * it is hidden from assistive tech.
+ */
+export declare const TimelineConnector: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Wrapper for an item's text column. Stacks the title, time and description. */
+export declare const TimelineContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** The event's headline. */
+export declare const TimelineTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * The muted timestamp for an event. Renders a real `<time>` element — pass
+ * `dateTime` for the machine-readable value when the visible text is a friendly
+ * label.
+ */
+export declare const TimelineTime: import("react").ForwardRefExoticComponent<TimeHTMLAttributes<HTMLTimeElement> & import("react").RefAttributes<HTMLTimeElement>>;
+/** Optional supporting copy under the title. */
+export declare const TimelineDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { timelineDotVariants };
+//# sourceMappingURL=timeline.d.ts.map