@cronus-ui/ui 0.6.0

package/dist/components/dynamic-island.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { useState } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A compact live-activity pill that morphs between views. The shell resizes
+ * with a spring; inner content cross-fades. Views are a tablist so the
+ * control is keyboard-operable. Reduced-motion visitors get an instant
+ * resize instead of the morph.
+ */
+export function DynamicIsland({ ref, className, views, value, defaultValue, onValueChange, ...props }) {
+    const reduce = !!useReducedMotion();
+    const fallback = defaultValue ?? views[0]?.id;
+    const [uncontrolled, setUncontrolled] = useState(fallback);
+    const selected = value ?? uncontrolled;
+    const active = views.find((view) => view.id === selected) ?? views[0];
+    const select = (id) => {
+        if (id === selected)
+            return;
+        if (value === undefined)
+            setUncontrolled(id);
+        onValueChange?.(id);
+    };
+    return (_jsxs("div", { ref: ref, "data-slot": "dynamic-island", className: cn("inline-flex flex-col items-center gap-3", className), ...props, children: [_jsx(motion.div, { layout: !reduce, "data-slot": "dynamic-island-shell", className: "overflow-hidden rounded-full border border-border bg-surface-floating px-4 py-2 text-fg shadow-md", transition: reduce ? { duration: 0 } : { type: "spring", bounce: 0.18, duration: 0.45 }, children: _jsx(motion.div, { initial: reduce ? false : { opacity: 0, filter: "blur(6px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: reduce ? { duration: 0 } : { duration: 0.2 }, className: "flex items-center gap-3", children: active?.content }, active?.id ?? "empty") }), _jsx("div", { role: "tablist", "aria-label": active?.label, className: "flex items-center gap-1", children: views.map((view) => {
+                    const isActive = view.id === selected;
+                    return (_jsx("button", { type: "button", role: "tab", "aria-selected": isActive, "aria-label": view.label, "data-slot": "dynamic-island-trigger", className: cn("size-2 rounded-full outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", isActive ? "bg-fg" : "bg-border hover:bg-border-strong"), onClick: () => select(view.id) }, view.id));
+                }) })] }));
+}
+DynamicIsland.displayName = "DynamicIsland";
+//# sourceMappingURL=dynamic-island.js.map

package/dist/components/empty.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from "react";
+export declare const Empty: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const EmptyIcon: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const EmptyTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const EmptyDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const EmptyContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=empty.d.ts.map

package/dist/components/empty.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Empty = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "empty", className: cn("flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border bg-surface-inset/40 px-6 py-12 text-center", className), ...props }));
+});
+Empty.displayName = "Empty";
+export const EmptyIcon = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "empty-icon", className: cn("flex size-11 items-center justify-center rounded-full bg-surface-overlay text-fg-tertiary [&_svg]:size-5", className), ...props }));
+});
+EmptyIcon.displayName = "EmptyIcon";
+export const EmptyTitle = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "empty-title", className: cn("font-display text-sm font-semibold text-fg", className), ...props }));
+});
+EmptyTitle.displayName = "EmptyTitle";
+export const EmptyDescription = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "empty-description", className: cn("max-w-sm text-sm text-fg-secondary", className), ...props }));
+});
+EmptyDescription.displayName = "EmptyDescription";
+export const EmptyContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "empty-content", className: cn("mt-1 flex items-center gap-2", className), ...props }));
+});
+EmptyContent.displayName = "EmptyContent";
+//# sourceMappingURL=empty.js.map

package/dist/components/expandable-tabs.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode, type Ref } from "react";
+export interface ExpandableTab {
+    value: string;
+    label: string;
+    icon: ReactNode;
+    disabled?: boolean;
+}
+export interface ExpandableTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    ref?: Ref<HTMLDivElement>;
+    items: ExpandableTab[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+/**
+ * Icon tabs where the active item expands to reveal its label. A tablist with
+ * roving tabindex; the label collapse/expand is decorative and skipped under
+ * reduced motion (the active label just stays visible).
+ */
+export declare function ExpandableTabs({ ref, className, items, value, defaultValue, onValueChange, ...props }: ExpandableTabsProps): import("react").JSX.Element;
+export declare namespace ExpandableTabs {
+    var displayName: string;
+}
+//# sourceMappingURL=expandable-tabs.d.ts.map

package/dist/components/expandable-tabs.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useState } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * Icon tabs where the active item expands to reveal its label. A tablist with
+ * roving tabindex; the label collapse/expand is decorative and skipped under
+ * reduced motion (the active label just stays visible).
+ */
+export function ExpandableTabs({ ref, className, items, value, defaultValue, onValueChange, ...props }) {
+    const reduce = !!useReducedMotion();
+    const enabled = items.filter((item) => !item.disabled);
+    const fallback = defaultValue ?? enabled[0]?.value;
+    const [uncontrolled, setUncontrolled] = useState(fallback);
+    const selected = value ?? uncontrolled;
+    const select = (next) => {
+        if (next === selected)
+            return;
+        if (value === undefined)
+            setUncontrolled(next);
+        onValueChange?.(next);
+    };
+    return (_jsx("div", { ref: ref, "data-slot": "expandable-tabs", role: "tablist", className: cn("inline-flex items-center gap-1 rounded-full border border-border bg-surface-inset p-1", className), ...props, children: items.map((item) => {
+            const isActive = item.value === selected;
+            return (_jsxs("button", { type: "button", role: "tab", "data-slot": "expandable-tabs-item", "aria-selected": isActive, disabled: item.disabled, tabIndex: isActive ? 0 : -1, className: cn("inline-flex items-center gap-2 rounded-full px-2.5 py-1.5 text-sm font-medium text-fg-secondary outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base disabled:pointer-events-none disabled:opacity-50", isActive && "bg-surface-floating text-fg shadow-xs"), onClick: () => select(item.value), children: [_jsx("span", { className: "grid size-4 place-items-center [&_svg]:size-4", "aria-hidden": "true", children: item.icon }), _jsx(AnimatePresence, { initial: false, children: isActive ? (_jsx(motion.span, { initial: reduce ? false : { width: 0, opacity: 0 }, animate: { width: "auto", opacity: 1 }, exit: reduce ? { opacity: 1 } : { width: 0, opacity: 0 }, transition: reduce ? { duration: 0 } : { duration: 0.22, ease: [0.22, 1, 0.36, 1] }, className: "overflow-hidden whitespace-nowrap", children: item.label }, "label")) : (_jsx("span", { className: "sr-only", children: item.label })) })] }, item.value));
+        }) }));
+}
+ExpandableTabs.displayName = "ExpandableTabs";
+//# sourceMappingURL=expandable-tabs.js.map

package/dist/components/fab.d.ts

@@ -0,0 +1,35 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+/** A single speed-dial action revealed when the FAB is expanded. */
+export interface FabAction {
+    /** The glyph shown inside the round action button. */
+    icon: ReactNode;
+    /** Accessible name for the action (also shown as an optional text chip). */
+    label: string;
+    /** Invoked when the action is activated. */
+    onClick?: () => void;
+}
+export interface FabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The main glyph shown inside the floating button. */
+    icon: ReactNode;
+    /** Accessible name for the main button — wired to `aria-label`. */
+    label: string;
+    /**
+     * Optional speed-dial actions. When provided, clicking the FAB toggles an
+     * expanded vertical stack of smaller round buttons rendered above it.
+     */
+    actions?: FabAction[];
+}
+/**
+ * A floating action button: a prominent, round, solid-primary button that
+ * surfaces the primary action of a view. Positioning is left to the consumer —
+ * the component renders a `relative inline-flex` wrapper, so add e.g.
+ * `className="fixed bottom-6 right-6"` to pin it.
+ *
+ * When {@link FabProps.actions} are supplied it becomes a speed-dial: clicking
+ * the FAB toggles a vertical stack of smaller round action buttons above it,
+ * each with its own accessible name and an optional text chip. The main button
+ * exposes `aria-expanded` and rotates its glyph ~45° while open. Motion is
+ * staggered and honours `prefers-reduced-motion`.
+ */
+export declare const Fab: import("react").ForwardRefExoticComponent<FabProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=fab.d.ts.map

package/dist/components/fab.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { forwardRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { springSnappy } from "./motion-presets.js";
+/**
+ * A floating action button: a prominent, round, solid-primary button that
+ * surfaces the primary action of a view. Positioning is left to the consumer —
+ * the component renders a `relative inline-flex` wrapper, so add e.g.
+ * `className="fixed bottom-6 right-6"` to pin it.
+ *
+ * When {@link FabProps.actions} are supplied it becomes a speed-dial: clicking
+ * the FAB toggles a vertical stack of smaller round action buttons above it,
+ * each with its own accessible name and an optional text chip. The main button
+ * exposes `aria-expanded` and rotates its glyph ~45° while open. Motion is
+ * staggered and honours `prefers-reduced-motion`.
+ */
+export const Fab = forwardRef(({ icon, label, actions, className, onClick, ...props }, ref) => {
+    const reducedMotion = useReducedMotion();
+    const [open, setOpen] = useState(false);
+    const hasActions = !!actions && actions.length > 0;
+    return (_jsxs("div", { "data-slot": "fab", className: cn("relative inline-flex", className), children: [hasActions && (_jsx(AnimatePresence, { children: open && (_jsx(motion.ul, { "data-slot": "fab-actions", className: "absolute bottom-full right-0 mb-3 flex list-none flex-col items-end gap-3", initial: reducedMotion ? false : "hidden", animate: "visible", exit: reducedMotion ? undefined : "hidden", variants: {
+                        hidden: {},
+                        visible: { transition: { staggerChildren: 0.04, staggerDirection: -1 } },
+                    }, children: actions.map((action) => (_jsxs(motion.li, { className: "flex items-center gap-2", variants: {
+                            hidden: { opacity: 0, y: 8, scale: 0.8 },
+                            visible: { opacity: 1, y: 0, scale: 1 },
+                        }, transition: springSnappy, children: [_jsx("span", { className: "rounded-md bg-surface-overlay px-2 py-1 text-xs font-medium text-fg shadow-xs", children: action.label }), _jsx("button", { type: "button", "aria-label": action.label, onClick: action.onClick, className: "inline-flex size-11 items-center justify-center rounded-full bg-surface-raised text-fg shadow-md outline-none transition-[transform,box-shadow] duration-150 ease-[var(--ease-out-quart)] hover:shadow-lg focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base active:scale-95 [&_svg]:size-5 [&_svg]:shrink-0 [&_svg]:pointer-events-none", children: action.icon })] }, action.label))) })) })), _jsx("button", { ref: ref, type: "button", "aria-label": label, "aria-expanded": hasActions ? open : undefined, onClick: (event) => {
+                    if (hasActions)
+                        setOpen((prev) => !prev);
+                    onClick?.(event);
+                }, className: "inline-flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md outline-none transition-[transform,box-shadow,opacity] duration-150 ease-[var(--ease-out-quart)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base active:scale-95 [&_svg]:size-6 [&_svg]:shrink-0 [&_svg]:pointer-events-none", ...props, children: _jsx(motion.span, { className: "inline-flex", animate: reducedMotion ? undefined : { rotate: hasActions && open ? 45 : 0 }, transition: springSnappy, children: icon }) })] }));
+});
+Fab.displayName = "Fab";
+//# sourceMappingURL=fab.js.map

package/dist/components/field.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes, type LabelHTMLAttributes } from "react";
+export declare const Field: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FieldLabel: import("react").ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const FieldDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const FieldError: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=field.d.ts.map

package/dist/components/field.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Field = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "field", className: cn("flex flex-col gap-1.5", className), ...props }));
+});
+Field.displayName = "Field";
+export const FieldLabel = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("label", { ref: ref, "data-slot": "field-label", className: cn("text-sm font-medium text-fg leading-none select-none", className), ...props }));
+});
+FieldLabel.displayName = "FieldLabel";
+export const FieldDescription = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("p", { ref: ref, "data-slot": "field-description", className: cn("text-xs text-fg-secondary", className), ...props }));
+});
+FieldDescription.displayName = "FieldDescription";
+export const FieldError = forwardRef(({ className, children, ...props }, ref) => {
+    if (!children)
+        return null;
+    return (_jsx("p", { ref: ref, "data-slot": "field-error", role: "alert", className: cn("text-xs text-error-strong", className), ...props, children: children }));
+});
+FieldError.displayName = "FieldError";
+//# sourceMappingURL=field.js.map

package/dist/components/file-dropzone.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+export interface FileDropzoneProps {
+    onFiles: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+    /**
+     * Accessible name for the file input. Defaults to `"Upload files"` so the
+     * control is never nameless.
+     */
+    "aria-label"?: string;
+    /** IDs of element(s) that describe the dropzone (e.g. accepted types). */
+    "aria-describedby"?: string;
+}
+/**
+ * A drag-and-drop file picker.
+ *
+ * The whole surface is a `<label>` that wraps a single visually-hidden
+ * `<input type="file">` — the only interactive, labelable control. That keeps
+ * the widget natively accessible: clicking anywhere opens the picker, the input
+ * is keyboard-focusable and Enter/Space open the picker for free, and there is
+ * no nested-interactive (no `role="button"` around the input). Drag-and-drop is
+ * layered on the label; drops are forwarded to `onFiles` just like picks.
+ */
+export declare const FileDropzone: import("react").ForwardRefExoticComponent<FileDropzoneProps & import("react").RefAttributes<HTMLLabelElement>>;
+//# sourceMappingURL=file-dropzone.d.ts.map

package/dist/components/file-dropzone.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { UploadCloud } from "lucide-react";
+import { forwardRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A drag-and-drop file picker.
+ *
+ * The whole surface is a `<label>` that wraps a single visually-hidden
+ * `<input type="file">` — the only interactive, labelable control. That keeps
+ * the widget natively accessible: clicking anywhere opens the picker, the input
+ * is keyboard-focusable and Enter/Space open the picker for free, and there is
+ * no nested-interactive (no `role="button"` around the input). Drag-and-drop is
+ * layered on the label; drops are forwarded to `onFiles` just like picks.
+ */
+export const FileDropzone = forwardRef(({ onFiles, accept, multiple = false, disabled = false, className, children, "aria-label": ariaLabel = "Upload files", "aria-describedby": ariaDescribedBy, }, ref) => {
+    const [dragging, setDragging] = useState(false);
+    const emit = (fileList) => {
+        if (!fileList || fileList.length === 0)
+            return;
+        onFiles(Array.from(fileList));
+    };
+    const handleDragEnter = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (disabled)
+            return;
+        setDragging(true);
+    };
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (disabled)
+            return;
+        setDragging(true);
+    };
+    const handleDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setDragging(false);
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setDragging(false);
+        if (disabled)
+            return;
+        emit(event.dataTransfer.files);
+    };
+    return (_jsxs("label", { ref: ref, "data-slot": "file-dropzone", "aria-disabled": disabled || undefined, "data-dragging": dragging, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, className: cn("flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-border bg-surface-inset px-6 py-10 text-center text-sm text-fg-secondary transition-colors hover:border-border-strong data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/5", 
+        // Move the focus ring onto the label when the hidden input is
+        // keyboard-focused, so the whole surface shows focus.
+        "outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:ring-offset-surface-base", disabled && "cursor-not-allowed opacity-50", className), children: [_jsx("input", { type: "file", accept: accept, multiple: multiple, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className: "sr-only", onChange: (event) => {
+                    emit(event.target.files);
+                    event.target.value = "";
+                } }), children ?? (_jsxs(_Fragment, { children: [_jsx(UploadCloud, { className: "size-6 text-fg-muted", "aria-hidden": true }), _jsxs("span", { children: ["Drag & drop or ", _jsx("span", { className: "font-medium text-fg", children: "browse" })] })] }))] }));
+});
+FileDropzone.displayName = "FileDropzone";
+//# sourceMappingURL=file-dropzone.js.map

package/dist/components/flickering-grid.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface FlickeringGridProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Number of columns in the grid.
+     * @default 16
+     */
+    columns?: number;
+    /**
+     * Number of rows in the grid.
+     * @default 10
+     */
+    rows?: number;
+}
+/**
+ * A grid of cells that independently flicker — a quiet digital texture for
+ * empty states and hero backdrops. Timings are derived from the cell index so
+ * SSR and the client paint the same field. Decorative and paused under
+ * reduced motion (cells sit at a still, faint opacity).
+ */
+export declare function FlickeringGrid({ ref, className, children, columns, rows, style, ...props }: FlickeringGridProps): import("react").JSX.Element;
+export declare namespace FlickeringGrid {
+    var displayName: string;
+}
+//# sourceMappingURL=flickering-grid.d.ts.map

package/dist/components/flickering-grid.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const FLICKER_KEYFRAMES = "@keyframes cronus-flicker{0%,100%{opacity:0.08}50%{opacity:0.45}}";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * A grid of cells that independently flicker — a quiet digital texture for
+ * empty states and hero backdrops. Timings are derived from the cell index so
+ * SSR and the client paint the same field. Decorative and paused under
+ * reduced motion (cells sit at a still, faint opacity).
+ */
+export function FlickeringGrid({ ref, className, children, columns = 16, rows = 10, style, ...props }) {
+    const cols = Math.min(48, Math.max(2, Math.round(finiteOr(columns, 16))));
+    const rowCount = Math.min(32, Math.max(2, Math.round(finiteOr(rows, 10))));
+    const cells = cols * rowCount;
+    return (_jsxs("div", { ref: ref, "data-slot": "flickering-grid", className: cn("relative overflow-hidden", className), style: style, ...props, children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 grid motion-reduce:opacity-40", style: {
+                    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+                    gridTemplateRows: `repeat(${rowCount}, minmax(0, 1fr))`,
+                    gap: 2,
+                }, children: [_jsx("style", { children: FLICKER_KEYFRAMES }), Array.from({ length: cells }, (_, index) => {
+                        const cellStyle = {
+                            "--flicker-delay": `${(index * 37) % 1600}ms`,
+                            "--flicker-duration": `${1.4 + ((index * 11) % 18) / 10}s`,
+                        };
+                        return (_jsx("span", { className: "rounded-[1px] bg-fg [animation-delay:var(--flicker-delay)] [animation-duration:var(--flicker-duration)] [animation-iteration-count:infinite] [animation-name:cronus-flicker] motion-reduce:[animation-name:none]", style: cellStyle }, index));
+                    })] }), _jsx("div", { className: "relative", children: children })] }));
+}
+FlickeringGrid.displayName = "FlickeringGrid";
+//# sourceMappingURL=flickering-grid.js.map

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

@@ -0,0 +1,70 @@
+import { type HTMLAttributes } from "react";
+/** What causes the card to reveal its back face. */
+export type FlipCardTrigger = "hover" | "click" | "controlled";
+/** Axis the card rotates around when it flips. */
+export type FlipCardAxis = "horizontal" | "vertical";
+export interface FlipCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * What flips the card. `"hover"` flips on pointer hover **and** keyboard focus
+     * (so it is fully operable without a mouse); `"click"` toggles on click, Enter
+     * or Space and exposes `role="button"` + `aria-pressed`; `"controlled"` never
+     * self-flips — you drive it entirely through the {@link flipped} prop.
+     * @default "hover"
+     */
+    trigger?: FlipCardTrigger;
+    /**
+     * Axis the card rotates around. `"horizontal"` spins left↔right (`rotateY`);
+     * `"vertical"` tumbles top↔bottom (`rotateX`).
+     * @default "horizontal"
+     */
+    axis?: FlipCardAxis;
+    /**
+     * Controlled flip state. When provided the card shows the back face iff `true`
+     * and its own hover/click toggling is suppressed (parent owns the state).
+     */
+    flipped?: boolean;
+    /** Initial flip state when uncontrolled. @default false */
+    defaultFlipped?: boolean;
+    /**
+     * Fires with the next flip state whenever the card would flip. Still called
+     * while controlled, so you can lift the state up.
+     */
+    onFlippedChange?: (flipped: boolean) => void;
+    /**
+     * Accessible name for the flip control. Strongly recommended for
+     * `trigger="click"`, where the whole card is a single button.
+     */
+    "aria-label"?: string;
+}
+/**
+ * A 3D flip card composed from `FlipCard` + `FlipCardFront` + `FlipCardBack`
+ * (wired through context). Both faces are always in the DOM, stacked with
+ * `position: absolute`; the inner wrapper is a `transform-style: preserve-3d`
+ * stage that rotates 180° on a spring-eased `transition-transform`, and each
+ * face uses `backface-visibility: hidden` so only the forward-facing side shows.
+ *
+ * Triggers: `"hover"` flips on pointer hover or keyboard focus, `"click"`
+ * toggles on click / Enter / Space (with `role="button"` + `aria-pressed`), and
+ * `"controlled"` flips only via the `flipped` prop. State is uncontrolled by
+ * default and lifts up through `onFlippedChange`.
+ *
+ * Performance: the rotation is a single compositor-friendly `transform`; there
+ * are no timers, animation frames or `mousemove` state updates to clean up.
+ * Accessibility: the inactive face is `inert`, so its content never double-reads
+ * to a screen reader and its focusable children stay out of the tab order until
+ * that face is showing. Under `prefers-reduced-motion: reduce` the rotation is
+ * forced off and the faces cross-swap instantly (no spin).
+ */
+export declare const FlipCard: import("react").ForwardRefExoticComponent<FlipCardProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * The front (default) face of a {@link FlipCard}. Shown while the card is not
+ * flipped; becomes `inert` and instantly hidden (reduced motion) once the card
+ * turns to the back.
+ */
+export declare const FlipCardFront: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * The back face of a {@link FlipCard}. Pre-rotated 180° on the card's axis so it
+ * faces the viewer once the stage turns. `inert` while the front is showing.
+ */
+export declare const FlipCardBack: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=flip-card.d.ts.map

package/dist/components/flip-card.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo, useState, } from "react";
+import { cn } from "../lib/cn.js";
+const FlipCardContext = createContext(null);
+function useFlipCard(component) {
+    const context = useContext(FlipCardContext);
+    if (context === null) {
+        throw new Error(`<${component}> must be used within <FlipCard>.`);
+    }
+    return context;
+}
+/**
+ * A 3D flip card composed from `FlipCard` + `FlipCardFront` + `FlipCardBack`
+ * (wired through context). Both faces are always in the DOM, stacked with
+ * `position: absolute`; the inner wrapper is a `transform-style: preserve-3d`
+ * stage that rotates 180° on a spring-eased `transition-transform`, and each
+ * face uses `backface-visibility: hidden` so only the forward-facing side shows.
+ *
+ * Triggers: `"hover"` flips on pointer hover or keyboard focus, `"click"`
+ * toggles on click / Enter / Space (with `role="button"` + `aria-pressed`), and
+ * `"controlled"` flips only via the `flipped` prop. State is uncontrolled by
+ * default and lifts up through `onFlippedChange`.
+ *
+ * Performance: the rotation is a single compositor-friendly `transform`; there
+ * are no timers, animation frames or `mousemove` state updates to clean up.
+ * Accessibility: the inactive face is `inert`, so its content never double-reads
+ * to a screen reader and its focusable children stay out of the tab order until
+ * that face is showing. Under `prefers-reduced-motion: reduce` the rotation is
+ * forced off and the faces cross-swap instantly (no spin).
+ */
+export const FlipCard = forwardRef(({ trigger = "hover", axis = "horizontal", flipped: controlledFlipped, defaultFlipped = false, onFlippedChange, className, children, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, "aria-label": ariaLabel, ...props }, ref) => {
+    const [internalFlipped, setInternalFlipped] = useState(defaultFlipped);
+    const isControlled = controlledFlipped !== undefined;
+    const flipped = isControlled ? controlledFlipped : internalFlipped;
+    const interactive = trigger !== "controlled";
+    const setFlipped = (next) => {
+        if (!isControlled) {
+            setInternalFlipped(next);
+        }
+        onFlippedChange?.(next);
+    };
+    const handleClick = (event) => {
+        if (trigger === "click") {
+            setFlipped(!flipped);
+        }
+        onClick?.(event);
+    };
+    const handleKeyDown = (event) => {
+        if (trigger === "click" && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            setFlipped(!flipped);
+        }
+        onKeyDown?.(event);
+    };
+    const handleMouseEnter = (event) => {
+        if (trigger === "hover") {
+            setFlipped(true);
+        }
+        onMouseEnter?.(event);
+    };
+    const handleMouseLeave = (event) => {
+        if (trigger === "hover") {
+            setFlipped(false);
+        }
+        onMouseLeave?.(event);
+    };
+    const handleFocus = (event) => {
+        if (trigger === "hover") {
+            setFlipped(true);
+        }
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        // Only unflip when focus actually leaves the card — not when it moves
+        // between the card's own descendants (e.g. tabbing onto a back-face link).
+        if (trigger === "hover" && !event.currentTarget.contains(event.relatedTarget)) {
+            setFlipped(false);
+        }
+        onBlur?.(event);
+    };
+    const rotation = axis === "vertical" ? "rotateX(180deg)" : "rotateY(180deg)";
+    const contextValue = useMemo(() => ({ flipped, axis }), [flipped, axis]);
+    // aria-label must live on a role that supports naming (never a bare div).
+    const role = trigger === "click" ? "button" : ariaLabel ? "group" : undefined;
+    return (_jsx(FlipCardContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, "data-slot": "flip-card", "data-flipped": flipped ? "" : undefined, role: role, tabIndex: interactive ? 0 : undefined, "aria-pressed": trigger === "click" ? flipped : undefined, "aria-label": ariaLabel, className: cn("group/flip relative isolate min-h-[16rem] rounded-2xl [perspective:1600px]", interactive &&
+                "cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", className), onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, ...props, children: _jsx("div", { className: cn("relative size-full transition-transform duration-[600ms] ease-[var(--ease-spring)] [transform-style:preserve-3d] will-change-transform", "motion-reduce:transition-none motion-reduce:!transform-none"), style: { transform: flipped ? rotation : undefined }, children: children }) }) }));
+});
+FlipCard.displayName = "FlipCard";
+const faceClassName = cn("absolute inset-0 flex flex-col overflow-hidden rounded-2xl border border-border text-fg shadow-sm", "[backface-visibility:hidden] motion-reduce:[backface-visibility:visible]");
+/**
+ * The front (default) face of a {@link FlipCard}. Shown while the card is not
+ * flipped; becomes `inert` and instantly hidden (reduced motion) once the card
+ * turns to the back.
+ */
+export const FlipCardFront = forwardRef(({ className, ...props }, ref) => {
+    const { flipped } = useFlipCard("FlipCardFront");
+    return (_jsx("div", { ref: ref, "data-slot": "flip-card-front", "data-active": !flipped || undefined, inert: flipped || undefined, className: cn(faceClassName, "bg-surface-raised", 
+        // Reduced motion: no spin, so hide the front the instant we flip.
+        "motion-reduce:group-data-[flipped]/flip:invisible", className), ...props }));
+});
+FlipCardFront.displayName = "FlipCardFront";
+/**
+ * The back face of a {@link FlipCard}. Pre-rotated 180° on the card's axis so it
+ * faces the viewer once the stage turns. `inert` while the front is showing.
+ */
+export const FlipCardBack = forwardRef(({ className, style, ...props }, ref) => {
+    const { flipped, axis } = useFlipCard("FlipCardBack");
+    const preRotate = {
+        transform: axis === "vertical" ? "rotateX(180deg)" : "rotateY(180deg)",
+    };
+    return (_jsx("div", { ref: ref, "data-slot": "flip-card-back", "data-active": flipped || undefined, inert: !flipped || undefined, className: cn(faceClassName, "bg-surface-elevated", 
+        // Reduced motion: drop the 180° pre-rotation and swap by visibility.
+        "motion-reduce:!transform-none motion-reduce:invisible motion-reduce:group-data-[flipped]/flip:visible", className), style: { ...preRotate, ...style }, ...props }));
+});
+FlipCardBack.displayName = "FlipCardBack";
+//# sourceMappingURL=flip-card.js.map

package/dist/components/floating-label-input.d.ts

@@ -0,0 +1,34 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+/**
+ * A text field whose label begins in the placeholder position and floats up to a
+ * compact caption on focus or when the field is filled.
+ *
+ * The float is driven **entirely by CSS** — the label reacts to the input's
+ * `:placeholder-shown` and `:focus` states via Tailwind `peer-*` variants, so
+ * there is no state, no `onChange` bookkeeping, and no React re-render while the
+ * user types. The movement animates `transform` + `color` only (GPU-composited,
+ * no layout thrash) with a soft spring easing; under
+ * `prefers-reduced-motion: reduce` the transition collapses to an instant snap.
+ *
+ * Works with controlled and uncontrolled inputs alike (the state is read from the
+ * DOM, not React), forwards its ref to the underlying `<input>`, and binds the
+ * label via `id`/`htmlFor`. Helper text is wired through `aria-describedby`, and
+ * the invalid state is fully token-driven (border, label, and helper turn to the
+ * error color, and the helper is announced via `role="alert"`).
+ */
+export interface FloatingLabelInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder"> {
+    /** The label text. Sits in the placeholder position, then floats up when the field is focused or filled. */
+    label: ReactNode;
+    /** Optional caption rendered under the field and linked to the input via `aria-describedby`. Turns into an error message when `invalid`. */
+    helperText?: ReactNode;
+    /** Marks the field invalid — drives the error border/ring, error label color, and an announced (`role="alert"`) helper. */
+    invalid?: boolean;
+    /** Decorative content (usually an icon) pinned to the left; the label and input inset to make room. */
+    startAdornment?: ReactNode;
+    /** Content (icon or button) pinned to the right; the input insets to make room. */
+    endAdornment?: ReactNode;
+    /** Extra classes for the floating `<label>`. */
+    labelClassName?: string;
+}
+export declare const FloatingLabelInput: import("react").ForwardRefExoticComponent<FloatingLabelInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=floating-label-input.d.ts.map

package/dist/components/floating-label-input.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../lib/cn.js";
+import { Input } from "./input.js";
+export const FloatingLabelInput = forwardRef(({ className, labelClassName, label, helperText, invalid = false, startAdornment, endAdornment, id: idProp, disabled, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+    const reactId = useId();
+    const id = idProp ?? reactId;
+    const helperId = helperText ? `${id}-helper` : undefined;
+    const describedBy = cn(ariaDescribedBy, helperId) || undefined;
+    return (_jsxs("div", { "data-slot": "floating-label-input", className: cn("w-full", className), children: [_jsxs("div", { className: "relative", children: [startAdornment ? (_jsx("span", { "aria-hidden": "true", "data-slot": "floating-label-input-start", className: "pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3 text-fg-tertiary [&_svg]:size-4", children: startAdornment })) : null, _jsx(Input, { ref: ref, id: id, invalid: invalid, disabled: disabled, placeholder: " ", "aria-describedby": describedBy, className: cn("peer h-14 pt-4 placeholder:text-transparent", startAdornment && "pl-10", endAdornment && "pr-10"), ...props }), _jsx("label", { htmlFor: id, "data-slot": "floating-label-input-label", className: cn("pointer-events-none absolute top-1/2 z-10 origin-left select-none text-sm", startAdornment ? "left-10" : "left-3", 
+                        // Smooth spring float — transform + color only (GPU-composited).
+                        "transition-[transform,color] duration-300 ease-[var(--ease-spring)]", "motion-reduce:transition-none motion-reduce:duration-0", 
+                        // Floated (base — applies when filled, and re-asserted on focus below).
+                        "-translate-y-[1.6rem] scale-[0.8]", invalid ? "text-error-strong" : "text-fg-secondary", 
+                        // Resting: empty and unfocused → sits in the placeholder position.
+                        "peer-placeholder-shown:translate-y-[-50%] peer-placeholder-shown:scale-100 peer-placeholder-shown:text-fg-tertiary", 
+                        // Focused: float back up and take the accent (or error) color.
+                        // `text-primary-strong` (AA-tuned): the raw `primary` fill reads
+                        // ~2:1 as this small label on white in the bright-accent light themes.
+                        "peer-focus:-translate-y-[1.6rem] peer-focus:scale-[0.8]", invalid ? "peer-focus:text-error-strong" : "peer-focus:text-primary-strong", 
+                        // Disabled dimming mirrors the input.
+                        "peer-disabled:opacity-50", labelClassName), children: label }), endAdornment ? (_jsx("span", { "data-slot": "floating-label-input-end", className: "absolute inset-y-0 right-0 z-10 flex items-center pr-3 text-fg-tertiary [&_svg]:size-4", children: endAdornment })) : null] }), helperText ? (_jsx("p", { id: helperId, "data-slot": "floating-label-input-helper", role: invalid ? "alert" : undefined, className: cn("mt-1.5 px-1 text-xs", invalid ? "text-error-strong" : "text-fg-secondary"), children: helperText })) : null] }));
+});
+FloatingLabelInput.displayName = "FloatingLabelInput";
+//# sourceMappingURL=floating-label-input.js.map