@cronus-ui/ui 0.6.0

package/dist/components/description-list.d.ts

@@ -0,0 +1,84 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * Layout recipes for the `<dl>` root. Every layout styles either supported
+ * composition from the parent: raw alternating `<dt>`/`<dd>` children, or
+ * pairs grouped in a {@link DescriptionItem} (or any plain `<div>` — valid
+ * inside a `<dl>` per the HTML spec). Use one composition per list — the spec
+ * forbids mixing raw pairs with div-wrapped groups in the same `<dl>`.
+ */
+declare const descriptionListVariants: (props?: ({
+    layout?: "grid" | "horizontal" | "stacked" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+    striped?: boolean | null | undefined;
+    bordered?: boolean | null | undefined;
+    detailsAlign?: "end" | "start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement>, VariantProps<typeof descriptionListVariants> {
+    /**
+     * How term/details pairs are arranged. `stacked` places each term above its
+     * details; `horizontal` aligns them into classic two-column rows with a
+     * divider between rows; `grid` spreads grouped pairs across a responsive
+     * 1 → 2 → 3 column set of card tiles.
+     * @default "stacked"
+     */
+    layout?: "stacked" | "horizontal" | "grid";
+    /**
+     * Density preset controlling the type scale and spacing.
+     * @default "md"
+     */
+    size?: "sm" | "md";
+    /**
+     * Tints alternate rows for scannability. The zebra counts only div-wrapped
+     * rows — wrap each pair in a {@link DescriptionItem} row (or a plain
+     * `<div>`); raw `<dt>`/`<dd>` pairs are never counted or tinted.
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Wraps the list in a rounded outer border and insets the content.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Alignment of the details column. Logical (`text-start`/`text-end`), so
+     * `end` stays correct in RTL.
+     * @default "start"
+     */
+    detailsAlign?: "start" | "end";
+}
+/**
+ * Semantic `<dl>` for label/value content — detail panes, order summaries and
+ * settings review screens. Purely presentational and SSR-safe: all three
+ * layouts are driven from this root, so the children stay simple primitives.
+ * Compose raw pairs, or group each pair with {@link DescriptionItem} (required
+ * for the `grid` layout and for `striped` rows). Use one composition per list —
+ * the HTML spec forbids mixing raw `<dt>`/`<dd>` pairs with div-wrapped groups
+ * in the same `<dl>`:
+ *
+ * ```tsx
+ * <DescriptionList layout="horizontal">
+ *   <DescriptionItem term="Order">#10245</DescriptionItem>
+ *   <DescriptionItem term="Status">Paid</DescriptionItem>
+ * </DescriptionList>
+ * ```
+ */
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDListElement>>;
+/** The label of a pair — a `<dt>` (exposed to assistive tech as a term). */
+export declare const DescriptionTerm: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+/** The value of a pair — a `<dd>` (exposed to assistive tech as a definition). */
+export declare const DescriptionDetails: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export interface DescriptionItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** The label rendered in the pair's {@link DescriptionTerm}. */
+    term: ReactNode;
+}
+/**
+ * Convenience wrapper that groups one term/details pair in a `<div>` (valid
+ * `<dl>` structure per the HTML spec). The pair renders as
+ * `<dt>{term}</dt><dd>{children}</dd>`; the parent {@link DescriptionList}
+ * styles the wrapper per layout (a subgrid row in `horizontal`, a card tile in
+ * `grid`, a zebra row when `striped`).
+ */
+export declare const DescriptionItem: import("react").ForwardRefExoticComponent<DescriptionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export { descriptionListVariants };
+//# sourceMappingURL=description-list.d.ts.map

package/dist/components/description-list.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/* ------------------------------------------------------------------ *
+ * DescriptionList (root)
+ * ------------------------------------------------------------------ */
+/**
+ * Layout recipes for the `<dl>` root. Every layout styles either supported
+ * composition from the parent: raw alternating `<dt>`/`<dd>` children, or
+ * pairs grouped in a {@link DescriptionItem} (or any plain `<div>` — valid
+ * inside a `<dl>` per the HTML spec). Use one composition per list — the spec
+ * forbids mixing raw pairs with div-wrapped groups in the same `<dl>`.
+ */
+const descriptionListVariants = cva("w-full min-w-0", {
+    variants: {
+        layout: {
+            // Terms sit above their details; groups separate vertically (spacing
+            // lives in the size compounds below).
+            stacked: "[&_dd]:mt-1",
+            // Classic definition list: two aligned columns, one divider per row.
+            // Raw dt/dd children flow straight into the grid tracks; row wrappers
+            // become subgrid rows so their cells align to the same tracks.
+            horizontal: cn("grid grid-cols-[fit-content(50%)_minmax(0,1fr)]", "[&>div]:col-span-2 [&>div]:grid [&>div]:grid-cols-subgrid", "[&_dt]:col-start-1 [&_dd]:col-start-2", 
+            // divide-y equivalent that draws one continuous line per row in either
+            // composition (whole wrappers, or a raw dt plus its adjacent dd).
+            "[&>div:not(:first-child)]:border-t [&>div:not(:first-child)]:border-border", "[&>dt:not(:first-child)]:border-t [&>dt:not(:first-child)]:border-border", "[&>dt:not(:first-child)+dd]:border-t [&>dt:not(:first-child)+dd]:border-border"),
+            // Responsive card tiles — group each pair with `DescriptionItem` (or a
+            // plain <div>) so every tile carries one term/details pair.
+            grid: cn("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", "[&>div]:rounded-lg [&>div]:border [&>div]:border-border [&>div]:bg-surface-raised", "[&_dd]:mt-1"),
+        },
+        size: {
+            sm: "text-xs",
+            md: "text-sm",
+        },
+        striped: { true: "", false: "" },
+        bordered: {
+            true: "overflow-hidden rounded-lg border border-border",
+            false: "",
+        },
+        detailsAlign: {
+            start: "",
+            end: "[&_dd]:text-end",
+        },
+    },
+    compoundVariants: [
+        // Vertical rhythm between stacked groups (row wrappers or raw pairs).
+        {
+            layout: "stacked",
+            size: "md",
+            class: "[&>div:not(:first-child)]:mt-4 [&>dt:not(:first-child)]:mt-4",
+        },
+        {
+            layout: "stacked",
+            size: "sm",
+            class: "[&>div:not(:first-child)]:mt-3 [&>dt:not(:first-child)]:mt-3",
+        },
+        // Horizontal row padding. The term's `pe-*` doubles as the column gutter —
+        // a real grid gap would slice the row dividers into two segments.
+        { layout: "horizontal", size: "md", class: "[&_dt]:pe-6 [&_dt]:py-3 [&_dd]:py-3" },
+        { layout: "horizontal", size: "sm", class: "[&_dt]:pe-4 [&_dt]:py-2 [&_dd]:py-2" },
+        // Grid tile spacing.
+        { layout: "grid", size: "md", class: "gap-4 [&>div]:p-4" },
+        { layout: "grid", size: "sm", class: "gap-3 [&>div]:p-3" },
+        // Zebra tint on alternate grouped rows, with an inset so the wash never
+        // touches the text (logical padding keeps it RTL-safe). `nth-of-type`
+        // counts only the <div> row wrappers, so raw dt/dd children can never
+        // skew the row parity (they don't participate in the zebra at all).
+        {
+            layout: "stacked",
+            striped: true,
+            class: "[&>div]:rounded-md [&>div]:p-3 [&>div:nth-of-type(even)]:bg-surface-inset",
+        },
+        {
+            layout: "horizontal",
+            striped: true,
+            class: "[&>div:nth-of-type(even)]:bg-surface-inset [&_dt]:ps-3 [&_dd]:pe-3",
+        },
+        { layout: "grid", striped: true, class: "[&>div:nth-of-type(even)]:bg-surface-inset" },
+        // Inset the content away from the outer border.
+        { layout: "stacked", bordered: true, class: "p-4" },
+        { layout: "horizontal", bordered: true, class: "[&_dt]:ps-3 [&_dd]:pe-3" },
+        { layout: "grid", bordered: true, class: "p-4" },
+    ],
+    defaultVariants: {
+        layout: "stacked",
+        size: "md",
+        striped: false,
+        bordered: false,
+        detailsAlign: "start",
+    },
+});
+/**
+ * Semantic `<dl>` for label/value content — detail panes, order summaries and
+ * settings review screens. Purely presentational and SSR-safe: all three
+ * layouts are driven from this root, so the children stay simple primitives.
+ * Compose raw pairs, or group each pair with {@link DescriptionItem} (required
+ * for the `grid` layout and for `striped` rows). Use one composition per list —
+ * the HTML spec forbids mixing raw `<dt>`/`<dd>` pairs with div-wrapped groups
+ * in the same `<dl>`:
+ *
+ * ```tsx
+ * <DescriptionList layout="horizontal">
+ *   <DescriptionItem term="Order">#10245</DescriptionItem>
+ *   <DescriptionItem term="Status">Paid</DescriptionItem>
+ * </DescriptionList>
+ * ```
+ */
+export const DescriptionList = forwardRef(({ className, layout, size, striped, bordered, detailsAlign, ...props }, ref) => {
+    return (_jsx("dl", { ref: ref, "data-slot": "description-list", className: cn(descriptionListVariants({ layout, size, striped, bordered, detailsAlign }), className), ...props }));
+});
+DescriptionList.displayName = "DescriptionList";
+/* ------------------------------------------------------------------ *
+ * DescriptionTerm / DescriptionDetails
+ * ------------------------------------------------------------------ */
+/** The label of a pair — a `<dt>` (exposed to assistive tech as a term). */
+export const DescriptionTerm = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("dt", { ref: ref, "data-slot": "description-term", className: cn("font-medium text-fg-secondary", className), ...props }));
+});
+DescriptionTerm.displayName = "DescriptionTerm";
+/** The value of a pair — a `<dd>` (exposed to assistive tech as a definition). */
+export const DescriptionDetails = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("dd", { ref: ref, "data-slot": "description-details", className: cn("min-w-0 break-words text-fg", className), ...props }));
+});
+DescriptionDetails.displayName = "DescriptionDetails";
+/**
+ * Convenience wrapper that groups one term/details pair in a `<div>` (valid
+ * `<dl>` structure per the HTML spec). The pair renders as
+ * `<dt>{term}</dt><dd>{children}</dd>`; the parent {@link DescriptionList}
+ * styles the wrapper per layout (a subgrid row in `horizontal`, a card tile in
+ * `grid`, a zebra row when `striped`).
+ */
+export const DescriptionItem = forwardRef(({ term, className, children, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, "data-slot": "description-item", className: cn("min-w-0", className), ...props, children: [_jsx(DescriptionTerm, { children: term }), _jsx(DescriptionDetails, { children: children })] }));
+});
+DescriptionItem.displayName = "DescriptionItem";
+export { descriptionListVariants };
+//# sourceMappingURL=description-list.js.map

package/dist/components/dialog.d.ts

@@ -0,0 +1,26 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type ComponentPropsWithoutRef, type HTMLAttributes } from "react";
+export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps>;
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogPortal: import("react").FC<DialogPrimitive.DialogPortalProps>;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogOverlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface DialogContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Render the built-in top-right close button. Set `false` when the content
+     * supplies its own close affordance (e.g. a full-bleed gallery header).
+     */
+    showCloseButton?: boolean;
+}
+export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogHeader: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const DialogFooter: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogClose = DialogPrimitive.Close;
+export const DialogOverlay = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(DialogPrimitive.Overlay, { ref: ref, "data-slot": "dialog-overlay", className: cn("fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-[cronus-overlay-in_200ms_var(--ease-out-quart)] data-[state=closed]:animate-[cronus-overlay-out_160ms_var(--ease-out-quart)]", className), ...props }));
+});
+DialogOverlay.displayName = "DialogOverlay";
+export const DialogContent = forwardRef(({ className, children, showCloseButton = true, ...props }, ref) => {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, "data-slot": "dialog-content", className: cn("fixed inset-0 z-50 m-auto grid h-fit w-full max-w-lg gap-4 rounded-xl border border-border bg-surface-floating p-6 text-fg shadow-lg data-[state=open]:animate-[cronus-pop-in_200ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-pop-out_160ms_var(--ease-out-quart)_both]", className), ...props, children: [children, showCloseButton ? (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "absolute end-4 top-4 rounded-md text-fg-tertiary outline-none transition-opacity hover:text-fg focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base disabled:pointer-events-none", children: [_jsx(X, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
+});
+DialogContent.displayName = "DialogContent";
+export const DialogHeader = ({ className, ...props }) => {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-1.5 text-center sm:text-start", className), ...props }));
+};
+DialogHeader.displayName = "DialogHeader";
+export const DialogFooter = ({ className, ...props }) => {
+    return (_jsx("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props }));
+};
+DialogFooter.displayName = "DialogFooter";
+export const DialogTitle = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(DialogPrimitive.Title, { ref: ref, "data-slot": "dialog-title", className: cn("font-display text-lg font-semibold text-fg", className), ...props }));
+});
+DialogTitle.displayName = "DialogTitle";
+export const DialogDescription = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(DialogPrimitive.Description, { ref: ref, "data-slot": "dialog-description", className: cn("text-sm text-fg-secondary", className), ...props }));
+});
+DialogDescription.displayName = "DialogDescription";
+//# sourceMappingURL=dialog.js.map

package/dist/components/dock.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** A single dock entry — an icon button or, when `href` is set, a link. */
+export interface DockItem {
+    /** The glyph shown in the dock (kept `aria-hidden`; the button carries the name). */
+    icon: ReactNode;
+    /** Accessible name — wired to both `title` and `aria-label`. */
+    label: string;
+    /** Activated on click (ignored when `href` is set). */
+    onClick?: () => void;
+    /** Render the item as a link to this destination instead of a button. */
+    href?: string;
+}
+export interface DockProps extends HTMLAttributes<HTMLDivElement> {
+    /** The dock entries, left to right. */
+    items: DockItem[];
+    /** Peak scale an item reaches at the pointer's center. Defaults to `1.6`. */
+    magnification?: number;
+    /** Resting item size in pixels. Defaults to `44`. */
+    baseItemSize?: number;
+    /** Pointer influence radius in pixels — how far the magnify reaches. Defaults to `120`. */
+    distance?: number;
+}
+/**
+ * A macOS-style icon dock with magnify-on-hover. Items grow as the pointer
+ * approaches and settle back as it moves away, smoothed with a spring. The bar
+ * is a rounded, bordered, backdrop-blurred surface of icon buttons (or links,
+ * when an item has an `href`).
+ *
+ * Each item is named by its `label` (via `title` + `aria-label`); the glyphs
+ * themselves stay `aria-hidden`. When the visitor prefers reduced motion the
+ * magnify is skipped entirely and every item renders at {@link DockProps.baseItemSize}.
+ */
+export declare const Dock: import("react").ForwardRefExoticComponent<DockProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=dock.d.ts.map

package/dist/components/dock.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useMotionValue, useReducedMotion, useSpring, useTransform, } from "motion/react";
+import { forwardRef, useRef } from "react";
+import { cn } from "../lib/cn.js";
+const DEFAULT_MAGNIFICATION = 1.6;
+const DEFAULT_BASE_ITEM_SIZE = 44;
+const DEFAULT_DISTANCE = 120;
+/**
+ * A macOS-style icon dock with magnify-on-hover. Items grow as the pointer
+ * approaches and settle back as it moves away, smoothed with a spring. The bar
+ * is a rounded, bordered, backdrop-blurred surface of icon buttons (or links,
+ * when an item has an `href`).
+ *
+ * Each item is named by its `label` (via `title` + `aria-label`); the glyphs
+ * themselves stay `aria-hidden`. When the visitor prefers reduced motion the
+ * magnify is skipped entirely and every item renders at {@link DockProps.baseItemSize}.
+ */
+export const Dock = forwardRef(({ items, magnification = DEFAULT_MAGNIFICATION, baseItemSize = DEFAULT_BASE_ITEM_SIZE, distance = DEFAULT_DISTANCE, className, onMouseMove, onMouseLeave, ...props }, ref) => {
+    const reducedMotion = useReducedMotion();
+    // Pointer X relative to the viewport; items read it to size themselves.
+    // Park it far away so nothing is magnified before the pointer arrives.
+    const pointerX = useMotionValue(Number.POSITIVE_INFINITY);
+    return (_jsx("div", { ref: ref, "data-slot": "dock", onMouseMove: (event) => {
+            if (!reducedMotion)
+                pointerX.set(event.clientX);
+            onMouseMove?.(event);
+        }, onMouseLeave: (event) => {
+            pointerX.set(Number.POSITIVE_INFINITY);
+            onMouseLeave?.(event);
+        }, className: cn("inline-flex items-end gap-2 rounded-2xl border border-border bg-surface-raised/70 px-3 py-2 backdrop-blur", className), ...props, children: items.map((item) => (_jsx(DockButton, { item: item, pointerX: pointerX, magnification: magnification, baseItemSize: baseItemSize, distance: distance, reducedMotion: !!reducedMotion }, item.label))) }));
+});
+Dock.displayName = "Dock";
+function DockButton({ item, pointerX, magnification, baseItemSize, distance, reducedMotion, }) {
+    // Live element ref so the transforms can read this item's center on each
+    // frame; stable for the item's lifetime.
+    const ref = useRef(null);
+    // Signed distance from the pointer to this item's horizontal center. When the
+    // pointer is parked at +Infinity this resolves to Infinity, so the item rests
+    // at its base size.
+    const delta = useTransform(pointerX, (x) => {
+        const rect = ref.current?.getBoundingClientRect();
+        if (!rect)
+            return Number.POSITIVE_INFINITY;
+        return x - (rect.left + rect.width / 2);
+    });
+    const targetSize = useTransform(delta, [-distance, 0, distance], [baseItemSize, baseItemSize * magnification, baseItemSize], { clamp: true });
+    const size = useSpring(targetSize, { stiffness: 260, damping: 22, mass: 0.2 });
+    const sharedClassName = "inline-flex aspect-square items-center justify-center rounded-xl bg-surface-overlay text-fg outline-none transition-colors hover:bg-surface-base focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base [&_svg]:size-1/2 [&_svg]:shrink-0 [&_svg]:pointer-events-none";
+    const style = reducedMotion ? { width: baseItemSize, height: baseItemSize } : { width: size };
+    const glyph = (_jsx("span", { "aria-hidden": "true", className: "contents", children: item.icon }));
+    if (item.href) {
+        return (_jsx(motion.a, { ref: (node) => {
+                ref.current = node;
+            }, href: item.href, title: item.label, "aria-label": item.label, "data-slot": "dock-item", style: style, className: sharedClassName, children: glyph }));
+    }
+    return (_jsx(motion.button, { ref: (node) => {
+            ref.current = node;
+        }, type: "button", title: item.label, "aria-label": item.label, "data-slot": "dock-item", onClick: item.onClick, style: style, className: sharedClassName, children: glyph }));
+}
+//# sourceMappingURL=dock.js.map

package/dist/components/dot-pattern.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type Ref } from "react";
+export interface DotPatternProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Gap between dots, in pixels.
+     * @default 16
+     */
+    gap?: number;
+    /**
+     * Dot radius, in pixels.
+     * @default 1
+     */
+    radius?: number;
+}
+/**
+ * A faint SVG dotted field that sits behind content. Colour inherits
+ * `currentColor` (set `text-fg` / `text-primary` on the wrapper). Decorative
+ * (`aria-hidden`) with no motion of its own.
+ */
+export declare function DotPattern({ ref, className, children, gap, radius, ...props }: DotPatternProps): import("react").JSX.Element;
+export declare namespace DotPattern {
+    var displayName: string;
+}
+//# sourceMappingURL=dot-pattern.d.ts.map

package/dist/components/dot-pattern.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * A faint SVG dotted field that sits behind content. Colour inherits
+ * `currentColor` (set `text-fg` / `text-primary` on the wrapper). Decorative
+ * (`aria-hidden`) with no motion of its own.
+ */
+export function DotPattern({ ref, className, children, gap = 16, radius = 1, ...props }) {
+    const patternId = useId();
+    const cell = Math.max(4, finiteOr(gap, 16));
+    const r = Math.max(0.25, finiteOr(radius, 1));
+    return (_jsxs("div", { ref: ref, "data-slot": "dot-pattern", className: cn("relative overflow-hidden text-fg", className), ...props, children: [_jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 size-full opacity-[0.18]", children: [_jsx("defs", { children: _jsx("pattern", { id: patternId, width: cell, height: cell, patternUnits: "userSpaceOnUse", children: _jsx("circle", { cx: cell / 2, cy: cell / 2, r: r, fill: "currentColor" }) }) }), _jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }), _jsx("div", { className: "relative", children: children })] }));
+}
+DotPattern.displayName = "DotPattern";
+//# sourceMappingURL=dot-pattern.js.map

package/dist/components/drawer.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentProps } from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+export declare const Drawer: {
+    ({ shouldScaleBackground, ...props }: ComponentProps<typeof DrawerPrimitive.Root>): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const DrawerTrigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DrawerPortal: typeof import("vaul").Portal;
+export declare const DrawerClose: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DrawerOverlay: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerHeader: {
+    ({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const DrawerFooter: {
+    ({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const DrawerTitle: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const DrawerDescription: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=drawer.d.ts.map

package/dist/components/drawer.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../lib/cn.js";
+export const Drawer = ({ shouldScaleBackground = true, ...props }) => {
+    return (_jsx(DrawerPrimitive.Root, { "data-slot": "drawer", shouldScaleBackground: shouldScaleBackground, ...props }));
+};
+Drawer.displayName = "Drawer";
+export const DrawerTrigger = DrawerPrimitive.Trigger;
+export const DrawerPortal = DrawerPrimitive.Portal;
+export const DrawerClose = DrawerPrimitive.Close;
+export const DrawerOverlay = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(DrawerPrimitive.Overlay, { ref: ref, "data-slot": "drawer-overlay", className: cn("fixed inset-0 z-50 bg-black/50", className), ...props }));
+});
+DrawerOverlay.displayName = "DrawerOverlay";
+export const DrawerContent = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs(DrawerPortal, { children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerPrimitive.Content, { ref: ref, "data-slot": "drawer-content", className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-xl border border-border bg-surface-floating text-fg", className), ...props, children: [_jsx("div", { className: "mx-auto mt-4 h-1.5 w-12 shrink-0 rounded-full bg-border" }), children] })] }));
+});
+DrawerContent.displayName = "DrawerContent";
+export const DrawerHeader = ({ className, ...props }) => {
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn("grid gap-1.5 p-4 text-center sm:text-left", className), ...props }));
+};
+DrawerHeader.displayName = "DrawerHeader";
+export const DrawerFooter = ({ className, ...props }) => {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
+};
+DrawerFooter.displayName = "DrawerFooter";
+export const DrawerTitle = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(DrawerPrimitive.Title, { ref: ref, "data-slot": "drawer-title", className: cn("font-display text-lg font-semibold text-fg", className), ...props }));
+});
+DrawerTitle.displayName = "DrawerTitle";
+export const DrawerDescription = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(DrawerPrimitive.Description, { ref: ref, "data-slot": "drawer-description", className: cn("text-sm text-fg-secondary", className), ...props }));
+});
+DrawerDescription.displayName = "DrawerDescription";
+//# sourceMappingURL=drawer.js.map

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,32 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { type ComponentProps, type HTMLAttributes } from "react";
+/**
+ * Non-modal by default. Radix's modal dropdown installs RemoveScroll on
+ * `body`, which unsticks site chrome (`position: sticky` + `overflow-x: clip`)
+ * and makes the navbar/sidebar jump. A menu is not a dialog — don't lock the page.
+ */
+export declare function DropdownMenu({ modal, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react").JSX.Element;
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuPortal: import("react").FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+export declare const DropdownMenuSub: import("react").FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubTrigger: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubContent: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuCheckboxItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuRadioItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuLabel: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuShortcut: {
+    ({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/dropdown-menu.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * Non-modal by default. Radix's modal dropdown installs RemoveScroll on
+ * `body`, which unsticks site chrome (`position: sticky` + `overflow-x: clip`)
+ * and makes the navbar/sidebar jump. A menu is not a dialog — don't lock the page.
+ */
+export function DropdownMenu({ modal = false, ...props }) {
+    return _jsx(DropdownMenuPrimitive.Root, { modal: modal, ...props });
+}
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+export const DropdownMenuSubTrigger = forwardRef(({ className, inset, children, ...props }, ref) => {
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, "data-slot": "dropdown-menu-sub-trigger", className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[state=open]:bg-surface-overlay data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", inset && "ps-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ms-auto" })] }));
+});
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+export const DropdownMenuSubContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, "data-slot": "dropdown-menu-sub-content", className: cn("z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-surface-floating p-1 text-fg shadow-lg data-[state=open]:animate-[cronus-pop-in_180ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-pop-out_140ms_var(--ease-out-quart)_both]", className), ...props }));
+});
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+export const DropdownMenuContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-surface-floating p-1 text-fg shadow-lg data-[state=open]:animate-[cronus-pop-in_180ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-pop-out_140ms_var(--ease-out-quart)_both]", className), ...props }) }));
+});
+DropdownMenuContent.displayName = "DropdownMenuContent";
+export const DropdownMenuItem = forwardRef(({ className, inset, ...props }, ref) => {
+    return (_jsx(DropdownMenuPrimitive.Item, { ref: ref, "data-slot": "dropdown-menu-item", className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", inset && "ps-8", className), ...props }));
+});
+DropdownMenuItem.displayName = "DropdownMenuItem";
+export const DropdownMenuCheckboxItem = forwardRef(({ className, children, checked, ...props }, ref) => {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, "data-slot": "dropdown-menu-checkbox-item", checked: checked, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", className), ...props, children: [_jsx("span", { className: "absolute start-2 flex size-4 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-4" }) }) }), children] }));
+});
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+export const DropdownMenuRadioItem = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, "data-slot": "dropdown-menu-radio-item", className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", className), ...props, children: [_jsx("span", { className: "absolute start-2 flex size-4 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "size-2 fill-current" }) }) }), children] }));
+});
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+export const DropdownMenuLabel = forwardRef(({ className, inset, ...props }, ref) => {
+    return (_jsx(DropdownMenuPrimitive.Label, { ref: ref, "data-slot": "dropdown-menu-label", className: cn("px-2 py-1.5 text-xs text-fg-tertiary", inset && "ps-8", className), ...props }));
+});
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+export const DropdownMenuSeparator = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+});
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+export const DropdownMenuShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ms-auto text-xs tracking-widest text-fg-tertiary", className), ...props }));
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/dynamic-island.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode, type Ref } from "react";
+export interface DynamicIslandView {
+    id: string;
+    /** Accessible name for this view. */
+    label: string;
+    content: ReactNode;
+}
+export interface DynamicIslandProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    ref?: Ref<HTMLDivElement>;
+    views: DynamicIslandView[];
+    /** Controlled active view id. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+}
+/**
+ * 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 declare function DynamicIsland({ ref, className, views, value, defaultValue, onValueChange, ...props }: DynamicIslandProps): import("react").JSX.Element;
+export declare namespace DynamicIsland {
+    var displayName: string;
+}
+//# sourceMappingURL=dynamic-island.d.ts.map