@cronus-ui/ui 0.6.0

package/dist/components/kanban.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { closestCorners, DndContext, DragOverlay, KeyboardSensor, PointerSensor, pointerWithin, useDroppable, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical } from "lucide-react";
+import { forwardRef, useCallback, useMemo, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Badge } from "./badge.js";
+/** Locate which column an id belongs to. The id may be an item or a column. */
+function findColumnId(columns, id) {
+    const idStr = String(id);
+    if (columns.some((column) => column.id === idStr))
+        return idStr;
+    return columns.find((column) => column.items.some((item) => item.id === idStr))?.id;
+}
+function getItem(columns, id) {
+    const idStr = String(id);
+    for (const column of columns) {
+        const found = column.items.find((item) => item.id === idStr);
+        if (found)
+            return found;
+    }
+    return undefined;
+}
+/**
+ * Move/reorder an item into a target column at the index implied by `overId`.
+ * Returns a new columns array (never mutates the input) or the same reference
+ * when nothing would change.
+ */
+function moveItem(columns, activeId, overId) {
+    const fromColumnId = findColumnId(columns, activeId);
+    const toColumnId = findColumnId(columns, overId);
+    if (!fromColumnId || !toColumnId)
+        return columns;
+    const fromColumn = columns.find((column) => column.id === fromColumnId);
+    const toColumn = columns.find((column) => column.id === toColumnId);
+    if (!fromColumn || !toColumn)
+        return columns;
+    const fromIndex = fromColumn.items.findIndex((item) => item.id === String(activeId));
+    if (fromIndex < 0)
+        return columns;
+    const moved = fromColumn.items[fromIndex];
+    if (!moved)
+        return columns;
+    // Index of the card being hovered, or append to the end when hovering the
+    // column itself (e.g. an empty column or the gap below the last card).
+    const overIsColumn = toColumn.id === String(overId);
+    const overIndex = overIsColumn
+        ? toColumn.items.length
+        : toColumn.items.findIndex((item) => item.id === String(overId));
+    if (fromColumnId === toColumnId) {
+        if (overIndex < 0 || overIndex === fromIndex)
+            return columns;
+        const nextItems = [...fromColumn.items];
+        nextItems.splice(fromIndex, 1);
+        // `overIndex` is computed against the original array; after removing the
+        // moved card the same target index lands the card where it was hovered.
+        nextItems.splice(overIndex, 0, moved);
+        return columns.map((column) => column.id === fromColumnId ? { ...column, items: nextItems } : column);
+    }
+    const nextFrom = [...fromColumn.items];
+    nextFrom.splice(fromIndex, 1);
+    const insertAt = overIndex < 0 ? toColumn.items.length : overIndex;
+    const nextTo = [...toColumn.items];
+    nextTo.splice(insertAt, 0, moved);
+    return columns.map((column) => {
+        if (column.id === fromColumnId)
+            return { ...column, items: nextFrom };
+        if (column.id === toColumnId)
+            return { ...column, items: nextTo };
+        return column;
+    });
+}
+function defaultRenderItem(item) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "kanban-card-title", className: "block font-medium leading-snug text-fg", children: item.title }), item.description != null ? (_jsx("span", { "data-slot": "kanban-card-description", className: "mt-1 block text-sm leading-snug text-fg-secondary", children: item.description })) : null] }));
+}
+function KanbanCard({ item, render }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: item.id,
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (_jsxs("li", { ref: setNodeRef, "data-slot": "kanban-card", "data-dragging": isDragging || undefined, style: style, className: cn("group flex items-start gap-2 rounded-lg border border-border bg-surface-raised p-3 text-fg shadow-sm", "transition-[border-color,box-shadow] focus-within:border-border-strong", isDragging && "opacity-40"), children: [_jsx("button", { type: "button", "data-slot": "kanban-drag-handle", className: cn("mt-0.5 shrink-0 cursor-grab touch-none rounded-md p-0.5 text-fg-muted", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-raised active:cursor-grabbing hover:text-fg [&_svg]:size-4"), "aria-label": "Reordenar cart\u00E3o", ...attributes, ...listeners, children: _jsx(GripVertical, { "aria-hidden": "true" }) }), _jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1", children: render(item) })] }));
+}
+function KanbanColumnView({ column, render }) {
+    // Make the whole column a droppable target so cards can be dropped into an
+    // empty column (where there is no card to hover over).
+    const { setNodeRef, isOver } = useDroppable({ id: column.id });
+    const itemIds = useMemo(() => column.items.map((item) => item.id), [column.items]);
+    return (_jsxs("section", { "data-slot": "kanban-column", "aria-label": typeof column.title === "string" ? column.title : undefined, className: "flex w-72 shrink-0 flex-col rounded-xl border border-border bg-surface-inset", children: [_jsxs("header", { "data-slot": "kanban-column-header", className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsx("h3", { "data-slot": "kanban-column-title", className: "min-w-0 truncate font-display text-sm font-semibold text-fg", children: column.title }), _jsx(Badge, { variant: "secondary", "data-slot": "kanban-column-count", children: column.items.length })] }), _jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children: _jsx("ul", { ref: setNodeRef, "data-slot": "kanban-column-list", "data-over": isOver || undefined, className: cn("flex min-h-24 flex-1 flex-col gap-2 overflow-y-auto rounded-b-xl p-2", "transition-colors data-[over]:bg-surface-overlay/60"), children: column.items.map((item) => (_jsx(KanbanCard, { item: item, render: render }, item.id))) }) })] }));
+}
+/**
+ * A drag-and-drop board: columns of cards that reorder within a column and
+ * move across columns. Controlled via `columns` / `onColumnsChange` — the
+ * consumer owns state. SSR-safe (no effects run on the server).
+ */
+export const Kanban = forwardRef(({ columns, onColumnsChange, renderItem, className, ...props }, ref) => {
+    const [activeId, setActiveId] = useState(null);
+    const render = renderItem ?? defaultRenderItem;
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    // Prefer pointer-within (precise over empty columns), falling back to the
+    // closest corners so dropping near a card still resolves a target.
+    const collisionDetection = useCallback((args) => {
+        const pointerCollisions = pointerWithin(args);
+        return pointerCollisions.length > 0 ? pointerCollisions : closestCorners(args);
+    }, []);
+    const activeItem = activeId != null ? getItem(columns, activeId) : undefined;
+    const handleDragStart = useCallback((event) => {
+        setActiveId(event.active.id);
+    }, []);
+    const handleDragOver = useCallback((event) => {
+        const { active, over } = event;
+        if (!over)
+            return;
+        const fromColumnId = findColumnId(columns, active.id);
+        const toColumnId = findColumnId(columns, over.id);
+        // Only handle cross-column transfers live; same-column ordering is
+        // committed on drop to avoid thrashing while hovering.
+        if (!fromColumnId || !toColumnId || fromColumnId === toColumnId)
+            return;
+        const next = moveItem(columns, active.id, over.id);
+        if (next !== columns)
+            onColumnsChange(next);
+    }, [columns, onColumnsChange]);
+    const handleDragEnd = useCallback((event) => {
+        setActiveId(null);
+        const { active, over } = event;
+        if (!over)
+            return;
+        const next = moveItem(columns, active.id, over.id);
+        if (next !== columns)
+            onColumnsChange(next);
+    }, [columns, onColumnsChange]);
+    const handleDragCancel = useCallback(() => {
+        setActiveId(null);
+    }, []);
+    return (_jsxs(DndContext, { sensors: sensors, collisionDetection: collisionDetection, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx("div", { ref: ref, "data-slot": "kanban", className: cn("flex w-full gap-4 overflow-x-auto pb-2", className), ...props, children: columns.map((column) => (_jsx(KanbanColumnView, { column: column, render: render }, column.id))) }), _jsx(DragOverlay, { children: activeItem ? (_jsxs("div", { "data-slot": "kanban-card-overlay", className: cn("flex w-72 items-start gap-2 rounded-lg border border-border-strong", "bg-surface-overlay p-3 text-fg shadow-lg ring-1 ring-ring/40"), children: [_jsx("span", { className: "mt-0.5 shrink-0 text-fg-muted [&_svg]:size-4", children: _jsx(GripVertical, { "aria-hidden": "true" }) }), _jsx("div", { className: "min-w-0 flex-1", children: render(activeItem) })] })) : null })] }));
+});
+Kanban.displayName = "Kanban";
+//# sourceMappingURL=kanban.js.map

package/dist/components/kbd.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes } from "react";
+export declare const Kbd: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/kbd.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 Kbd = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("kbd", { ref: ref, "data-slot": "kbd", className: cn("inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-md border border-border bg-surface-overlay px-1.5 font-mono text-[0.7rem] font-medium text-fg-secondary", className), ...props }));
+});
+Kbd.displayName = "Kbd";
+//# sourceMappingURL=kbd.js.map

package/dist/components/label.d.ts

@@ -0,0 +1,3 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+export declare const Label: import("react").ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+//# sourceMappingURL=label.d.ts.map

package/dist/components/label.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Label = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(LabelPrimitive.Root, { ref: ref, "data-slot": "label", className: cn("text-sm font-medium text-fg leading-none select-none", "peer-disabled:opacity-50 peer-disabled:cursor-not-allowed", className), ...props }));
+});
+Label.displayName = "Label";
+//# sourceMappingURL=label.js.map

package/dist/components/light-rays.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface LightRaysProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Seconds for one full rotation of the ray fan.
+     * @default 18
+     */
+    duration?: number;
+}
+/**
+ * Volumetric light rays fanning from the top of a surface. A rotating conic
+ * gradient is masked into a radial falloff so the beams read as shafts of
+ * light, not a spinning disc. Decorative and paused under reduced motion.
+ */
+export declare function LightRays({ ref, className, children, duration, style, ...props }: LightRaysProps): import("react").JSX.Element;
+export declare namespace LightRays {
+    var displayName: string;
+}
+//# sourceMappingURL=light-rays.d.ts.map

package/dist/components/light-rays.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const RAYS_KEYFRAMES = "@keyframes cronus-light-rays{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * Volumetric light rays fanning from the top of a surface. A rotating conic
+ * gradient is masked into a radial falloff so the beams read as shafts of
+ * light, not a spinning disc. Decorative and paused under reduced motion.
+ */
+export function LightRays({ ref, className, children, duration = 18, style, ...props }) {
+    const cycle = Math.max(4, finiteOr(duration, 18));
+    const raysStyle = { "--rays-duration": `${cycle}s` };
+    return (_jsxs("div", { ref: ref, "data-slot": "light-rays", className: cn("relative overflow-hidden", className), style: { ...raysStyle, ...style }, ...props, children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-hidden motion-reduce:hidden", children: [_jsx("style", { children: RAYS_KEYFRAMES }), _jsx("div", { className: "absolute -inset-1/2 [animation-duration:var(--rays-duration)] [animation-iteration-count:infinite] [animation-name:cronus-light-rays] [animation-timing-function:linear] [mask-image:radial-gradient(ellipse_at_center,black_20%,transparent_70%)]", style: {
+                            background: "repeating-conic-gradient(from 0deg, color-mix(in oklch, var(--cronus-primary) 22%, transparent) 0deg 6deg, transparent 6deg 28deg)",
+                        } })] }), _jsx("div", { className: "relative", children: children })] }));
+}
+LightRays.displayName = "LightRays";
+//# sourceMappingURL=light-rays.js.map

package/dist/components/lightbox.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from "react";
+export interface LightboxImage {
+    src: string;
+    alt: string;
+    caption?: string;
+}
+export interface LightboxProps extends HTMLAttributes<HTMLDivElement> {
+    /** The images to display in the gallery. */
+    images: LightboxImage[];
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when the open state should change. */
+    onOpenChange?: (open: boolean) => void;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    /** Controlled active image index. */
+    index?: number;
+    /** Called when the active index should change. */
+    onIndexChange?: (index: number) => void;
+    /** Uncontrolled initial index. */
+    defaultIndex?: number;
+}
+export declare const Lightbox: import("react").ForwardRefExoticComponent<LightboxProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=lightbox.d.ts.map

package/dist/components/lightbox.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Dialog, DialogClose, DialogContent } from "./dialog.js";
+export const Lightbox = forwardRef(({ className, images, open, onOpenChange, defaultOpen = false, index, onIndexChange, defaultIndex = 0, ...props }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpenControlled = open !== undefined;
+    const isOpen = isOpenControlled ? open : uncontrolledOpen;
+    const [uncontrolledIndex, setUncontrolledIndex] = useState(defaultIndex);
+    const isIndexControlled = index !== undefined;
+    const currentIndex = isIndexControlled ? index : uncontrolledIndex;
+    const count = images.length;
+    const clampedIndex = count > 0 ? Math.min(Math.max(currentIndex, 0), count - 1) : 0;
+    const setOpen = useCallback((next) => {
+        if (!isOpenControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [isOpenControlled, onOpenChange]);
+    const setIndex = useCallback((next) => {
+        if (count === 0)
+            return;
+        const clamped = Math.min(Math.max(next, 0), count - 1);
+        if (!isIndexControlled)
+            setUncontrolledIndex(clamped);
+        onIndexChange?.(clamped);
+    }, [count, isIndexControlled, onIndexChange]);
+    const current = images[clampedIndex];
+    const goPrev = useCallback(() => setIndex(clampedIndex - 1), [setIndex, clampedIndex]);
+    const goNext = useCallback(() => setIndex(clampedIndex + 1), [setIndex, clampedIndex]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handler = (event) => {
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                goPrev();
+            }
+            else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                goNext();
+            }
+        };
+        document.addEventListener("keydown", handler);
+        return () => document.removeEventListener("keydown", handler);
+    }, [isOpen, goPrev, goNext]);
+    const atStart = clampedIndex <= 0;
+    const atEnd = clampedIndex >= count - 1;
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: setOpen, children: _jsx(DialogContent
+        // The header renders its own dark-themed close, so suppress the
+        // dialog's default light-theme one.
+        , { 
+            // The header renders its own dark-themed close, so suppress the
+            // dialog's default light-theme one.
+            showCloseButton: false, className: "inset-0 h-full max-w-full rounded-none border-none bg-black/95 p-0 text-white", "aria-label": "Image gallery", children: _jsxs("div", { ref: ref, "data-slot": "lightbox", className: cn("flex h-full w-full flex-col", className), ...props, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 p-4", children: [_jsx("span", { "data-slot": "lightbox-counter", className: "text-sm text-white/70", children: count > 0 ? `${clampedIndex + 1} / ${count}` : "0 / 0" }), _jsx(DialogClose, { "data-slot": "lightbox-close", "aria-label": "Close", className: "rounded-md p-1.5 text-white/70 outline-none transition-colors hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: _jsx(X, { className: "size-5" }) })] }), _jsxs("div", { className: "relative flex min-h-0 flex-1 items-center justify-center px-2", children: [_jsx("button", { type: "button", "aria-label": "Previous image", onClick: goPrev, disabled: atStart, className: "absolute left-2 z-10 rounded-full bg-black/40 p-2 text-white/80 outline-none transition-colors hover:bg-black/60 hover:text-white focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-40", children: _jsx(ChevronLeft, { className: "size-6" }) }), current ? (_jsx("img", { "data-slot": "lightbox-image", src: current.src, alt: current.alt, className: "max-h-full max-w-full object-contain" })) : null, _jsx("button", { type: "button", "aria-label": "Next image", onClick: goNext, disabled: atEnd, className: "absolute right-2 z-10 rounded-full bg-black/40 p-2 text-white/80 outline-none transition-colors hover:bg-black/60 hover:text-white focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-40", children: _jsx(ChevronRight, { className: "size-6" }) })] }), current?.caption ? (_jsx("p", { "data-slot": "lightbox-caption", className: "px-4 pt-3 text-center text-sm text-white/80", children: current.caption })) : null, count > 1 ? (_jsx("div", { "data-slot": "lightbox-thumbnails", className: "flex items-center justify-center gap-2 overflow-x-auto p-4", children: images.map((image, i) => (_jsx("button", { type: "button", "aria-label": `View image ${i + 1}`, "aria-current": i === clampedIndex, onClick: () => setIndex(i), className: cn(
+                            // contract-ok: anel externo com literal, não ring-inset nem
+                            // ring-offset-surface-*. O inset é um box-shadow interno e
+                            // a <img> abaixo o cobre por inteiro — o foco sumiria. E o
+                            // fundo aqui é o scrim bg-black/95 que este componente
+                            // define, não um token de superfície, então branco sobre
+                            // preto é o par correto (ver docs/adr/0001). O offset
+                            // separa o anel da miniatura; a seleção usa anel rente,
+                            // então os dois estados continuam distinguíveis.
+                            "size-14 shrink-0 overflow-hidden rounded-md outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-black", i === clampedIndex ? "ring-2 ring-white" : "opacity-60 hover:opacity-100"), children: _jsx("img", { src: image.src, alt: "", className: "size-full object-cover" }) }, `${image.src}-${i}`))) })) : null] }) }) }));
+});
+Lightbox.displayName = "Lightbox";
+//# sourceMappingURL=lightbox.js.map

package/dist/components/line-chart.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+import { type ChartSeries } from "./chart.js";
+export interface LineChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: Record<string, unknown>[];
+    xKey?: string;
+    series: ChartSeries[];
+    formatValue?: (value: number, name: string) => string;
+}
+export declare function LineChart({ data, xKey, series, formatValue, className, ...props }: LineChartProps): import("react").JSX.Element;
+//# sourceMappingURL=line-chart.d.ts.map

package/dist/components/line-chart.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CartesianGrid, Line, LineChart as RechartsLineChart, XAxis } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartCursor, ChartTooltip, ChartTooltipContent, chartSeriesConfig, } from "./chart.js";
+export function LineChart({ data, xKey = "date", series, formatValue, className, ...props }) {
+    const config = chartSeriesConfig(series);
+    return (_jsx("div", { "data-slot": "line-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: config, className: "h-full w-full", children: _jsxs(RechartsLineChart, { accessibilityLayer: true, data: data, margin: { left: 8, right: 8, top: 8 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "4 4" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 12, minTickGap: 24 }), _jsx(ChartTooltip, { cursor: _jsx(ChartCursor, { labelKey: xKey }), content: _jsx(ChartTooltipContent, { formatValue: formatValue }) }), series.map((item) => (_jsx(Line, { type: "monotone", dataKey: item.key, stroke: `var(--color-${item.key})`, strokeWidth: 2, dot: false, activeDot: { r: 4, strokeWidth: 0 }, animationDuration: 1100, animationEasing: "ease-out" }, item.key)))] }) }) }));
+}
+//# sourceMappingURL=line-chart.js.map

package/dist/components/live-line-chart.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes } from "react";
+export interface LiveLinePoint {
+    tick: number;
+    value: number;
+}
+export interface LiveLineChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: LiveLinePoint[];
+    interval?: number;
+    maxPoints?: number;
+}
+export declare function LiveLineChart({ data, interval, maxPoints, className, ...props }: LiveLineChartProps): import("react").JSX.Element;
+//# sourceMappingURL=live-line-chart.d.ts.map

package/dist/components/live-line-chart.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartCursor, ChartTooltip, ChartTooltipContent } from "./chart.js";
+export function LiveLineChart({ data, interval = 1000, maxPoints = 24, className, ...props }) {
+    const [points, setPoints] = useState(data);
+    const visible = useRef(true);
+    useEffect(() => {
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
+        if (reduced)
+            return;
+        const id = window.setInterval(() => {
+            if (!visible.current)
+                return;
+            setPoints((prev) => {
+                const last = prev.at(-1);
+                const next = {
+                    tick: (last?.tick ?? 0) + 1,
+                    value: Math.max(0, (last?.value ?? 50) + (Math.random() - 0.48) * 8),
+                };
+                return [...prev.slice(-(maxPoints - 1)), next];
+            });
+        }, interval);
+        return () => window.clearInterval(id);
+    }, [interval, maxPoints]);
+    useEffect(() => {
+        if (typeof IntersectionObserver === "undefined")
+            return;
+        const root = document.querySelector("[data-slot='live-line-chart']");
+        if (!root)
+            return;
+        const io = new IntersectionObserver((entries) => {
+            visible.current = entries.some((entry) => entry.isIntersecting);
+        });
+        io.observe(root);
+        return () => io.disconnect();
+    }, []);
+    return (_jsx("div", { "data-slot": "live-line-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: { value: { label: "Value", color: "var(--cronus-chart-1)" } }, className: "h-full w-full", children: _jsxs(LineChart, { accessibilityLayer: true, data: points, margin: { left: 8, right: 8, top: 8 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "4 4" }), _jsx(XAxis, { dataKey: "tick", tickLine: false, axisLine: false, tickMargin: 12 }), _jsx(ChartTooltip, { cursor: _jsx(ChartCursor, { labelKey: "tick" }), content: _jsx(ChartTooltipContent, {}) }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: "var(--color-value)", strokeWidth: 2, dot: false, isAnimationActive: false })] }) }) }));
+}
+//# sourceMappingURL=live-line-chart.js.map

package/dist/components/logo-carousel.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentType, type HTMLAttributes, type ReactNode, type SVGProps } from "react";
+export interface LogoCarouselItem {
+    id: string;
+    label: string;
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    node?: ReactNode;
+}
+export type LogoCarouselVariant = "ghost" | "surface";
+export type LogoCarouselSize = "sm" | "md" | "lg";
+export type LogoCarouselMotionPreference = "user" | "always" | "never";
+export interface LogoCarouselProps extends HTMLAttributes<HTMLUListElement> {
+    items: LogoCarouselItem[];
+    columns?: number;
+    /** Alias kept for snippets that call this pattern `columnCount`. */
+    columnCount?: number;
+    interval?: number;
+    staggerDelay?: number;
+    pauseOnHover?: boolean;
+    ariaLabel?: string;
+    variant?: LogoCarouselVariant;
+    size?: LogoCarouselSize;
+    motionPreference?: LogoCarouselMotionPreference;
+    itemClassName?: string;
+    logoClassName?: string;
+}
+export declare const LogoCarousel: import("react").ForwardRefExoticComponent<LogoCarouselProps & import("react").RefAttributes<HTMLUListElement>>;
+//# sourceMappingURL=logo-carousel.d.ts.map

package/dist/components/logo-carousel.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { forwardRef, useEffect, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { easeOutQuart } from "./motion-presets.js";
+const MIN_INTERVAL = 800;
+const MAX_COLUMNS = 8;
+const COLUMN_KEYS = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth"];
+const itemVariantClasses = {
+    ghost: "border border-transparent bg-transparent px-3 text-fg-secondary/70 shadow-none hover:text-fg",
+    surface: "border border-border bg-surface-raised/80 px-4 text-fg-secondary shadow-sm backdrop-blur hover:text-fg",
+};
+const itemSizeClasses = {
+    sm: "h-12 sm:h-14",
+    md: "h-16 sm:h-20",
+    lg: "h-20 sm:h-24",
+};
+const logoSizeClasses = {
+    sm: "text-base sm:text-lg",
+    md: "text-xl sm:text-2xl",
+    lg: "text-4xl sm:text-6xl",
+};
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function getInitials(label) {
+    const words = label.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return "";
+    return words
+        .slice(0, 2)
+        .map((word) => word.at(0) ?? "")
+        .join("")
+        .toUpperCase();
+}
+function LogoMark({ item, className, size, }) {
+    const Icon = item.icon;
+    return (_jsx("span", { "aria-hidden": "true", className: cn("inline-flex max-w-full items-center justify-center gap-2 font-display font-semibold leading-none text-current [&>svg]:shrink-0", item.node ? "whitespace-normal" : "truncate", logoSizeClasses[size], className), children: item.node ? (item.node) : Icon ? (_jsx(Icon, { className: "size-[1em] shrink-0", focusable: "false" })) : (_jsx("span", { className: "tracking-normal", children: getInitials(item.label) })) }));
+}
+export const LogoCarousel = forwardRef(({ className, itemClassName, logoClassName, items, columns, columnCount, interval = 2200, staggerDelay = 0.07, pauseOnHover = true, ariaLabel = "Logo carousel", variant = "ghost", size = "lg", motionPreference = "user", style, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    const [activePage, setActivePage] = useState(0);
+    const [isPaused, setIsPaused] = useState(false);
+    const logos = items.filter((item) => item.id && item.label);
+    const requestedColumns = finiteOr(columnCount ?? columns ?? 3, 3);
+    const resolvedColumns = logos.length > 0
+        ? clamp(Math.round(requestedColumns), 1, Math.min(MAX_COLUMNS, logos.length))
+        : 1;
+    const safeInterval = Math.max(finiteOr(interval, 2200), MIN_INTERVAL);
+    const safeStaggerDelay = Math.max(finiteOr(staggerDelay, 0.07), 0);
+    const canCycle = logos.length > resolvedColumns;
+    const motionEnabled = motionPreference === "always" || (motionPreference === "user" && !shouldReduceMotion);
+    const shouldAnimate = motionEnabled && canCycle;
+    const visibleItems = logos.length > 0
+        ? Array.from({ length: resolvedColumns }, (_, columnIndex) => {
+            const item = logos[(activePage * resolvedColumns + columnIndex) % logos.length];
+            if (!item)
+                return null;
+            return {
+                item,
+                slotKey: COLUMN_KEYS[columnIndex] ?? `column-${columnIndex + 1}`,
+                columnIndex,
+            };
+        }).filter((entry) => entry !== null)
+        : [];
+    useEffect(() => {
+        if (!shouldAnimate || isPaused)
+            return;
+        const timer = window.setInterval(() => {
+            setActivePage((current) => current + 1);
+        }, safeInterval);
+        return () => window.clearInterval(timer);
+    }, [isPaused, safeInterval, shouldAnimate]);
+    return (_jsx("ul", { ref: ref, "aria-label": ariaLabel, "aria-live": "off", "data-slot": "logo-carousel", style: { ...style, "--logo-carousel-columns": resolvedColumns }, className: cn("m-0 grid w-full list-none grid-cols-2 gap-3 p-0 sm:[grid-template-columns:repeat(var(--logo-carousel-columns),minmax(0,1fr))]", className), onMouseEnter: (event) => {
+            onMouseEnter?.(event);
+            if (pauseOnHover)
+                setIsPaused(true);
+        }, onMouseLeave: (event) => {
+            onMouseLeave?.(event);
+            if (pauseOnHover)
+                setIsPaused(false);
+        }, onFocus: (event) => {
+            onFocus?.(event);
+            if (pauseOnHover)
+                setIsPaused(true);
+        }, onBlur: (event) => {
+            onBlur?.(event);
+            if (pauseOnHover)
+                setIsPaused(false);
+        }, ...props, children: visibleItems.map(({ item, slotKey, columnIndex }) => (_jsx("li", { "aria-label": item.label, "data-slot": "logo-carousel-item", className: cn("relative flex min-w-0 items-center justify-center overflow-hidden rounded-xl transition-colors", itemVariantClasses[variant], itemSizeClasses[size], itemClassName), children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.div, { className: "absolute inset-0 flex items-center justify-center px-4", initial: shouldAnimate ? { opacity: 0, y: 22, scale: 0.96, filter: "blur(10px)" } : false, animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }, exit: shouldAnimate
+                        ? { opacity: 0, y: -22, scale: 0.96, filter: "blur(10px)" }
+                        : undefined, transition: shouldAnimate
+                        ? { ...easeOutQuart, delay: columnIndex * safeStaggerDelay }
+                        : { duration: 0 }, children: _jsx(LogoMark, { item: item, size: size, className: logoClassName }) }, item.id) }) }, slotKey))) }));
+});
+LogoCarousel.displayName = "LogoCarousel";
+//# sourceMappingURL=logo-carousel.js.map

package/dist/components/magnetic.d.ts

@@ -0,0 +1,44 @@
+import { type HTMLAttributes } from "react";
+export interface MagneticProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * How strongly the content is pulled toward the pointer, as a fraction of
+     * the pointer's offset from the wrapper's center. `0` is inert, `1` glues
+     * the content to the cursor. Values outside `0–1` are clamped.
+     * @default 0.3
+     */
+    strength?: number;
+    /**
+     * Radius of the magnetic field in pixels, measured from the wrapper's
+     * center. The pull is strongest near the center and eases back to zero at
+     * this distance, so crossing the field's edge never pops. Pad the wrapper
+     * (e.g. `className="p-10"`) to give the field room beyond the content's own
+     * box — the attraction can only be felt where the wrapper is hovered.
+     * @default 120
+     */
+    radius?: number;
+}
+/**
+ * A magnetic-hover wrapper: its children are gently attracted toward the
+ * cursor while it is inside a proximity field around the wrapper's center.
+ * Classic use is a hero call-to-action or an icon row that leans into the
+ * pointer before it even lands.
+ *
+ * Mechanism: `pointermove` on the wrapper records the cursor, and a
+ * `requestAnimationFrame` loop lerps a `translate` that is written **straight
+ * to the child's `style.transform`** — pointer tracking never touches React
+ * state, so there are zero re-renders during the interaction. The pull is the
+ * pointer's offset from center scaled by {@link MagneticProps.strength} and by
+ * a linear falloff that reaches zero at {@link MagneticProps.radius}, so the
+ * attraction dissolves smoothly at the field's edge. On leave the transform is
+ * reset to zero and a short springy CSS transition (suppressed while tracking
+ * via a `data-magnetic-active` attribute) eases the content back to rest.
+ *
+ * The effect is disabled entirely under `prefers-reduced-motion: reduce` and
+ * on coarse pointers (`(pointer: coarse)` — touch has no hover to attract
+ * toward), with a `motion-reduce` CSS backstop on the transform itself.
+ * Accessibility: purely decorative — the wrapper is not a control, children
+ * keep their natural focus order and focus-visible styling, and keyboard users
+ * simply see the content at rest.
+ */
+export declare const Magnetic: import("react").ForwardRefExoticComponent<MagneticProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=magnetic.d.ts.map