@cronus-ui/ui 0.6.0

package/dist/components/tree-view.js

@@ -0,0 +1,197 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+const TreeViewContext = createContext(null);
+function useTreeView() {
+    const context = useContext(TreeViewContext);
+    if (context === null) {
+        throw new Error("<TreeViewItem> must be used within <TreeView>.");
+    }
+    return context;
+}
+/* ------------------------------------------------------------------ *
+ * Helpers
+ * ------------------------------------------------------------------ */
+function isBranchNode(node) {
+    return node.children !== undefined;
+}
+/**
+ * Depth-first flatten of the visible nodes (a branch's children are included
+ * only when the branch is expanded). Pure + synchronous so it is SSR-safe and
+ * drives both rendering order and roving keyboard navigation from one source.
+ */
+function flattenVisible(data, expandedIds, level = 1, parentId = undefined, out = []) {
+    for (const node of data) {
+        const isBranch = isBranchNode(node);
+        out.push({ node, level, parentId, isBranch });
+        if (isBranch && expandedIds.has(node.id) && node.children) {
+            flattenVisible(node.children, expandedIds, level + 1, node.id, out);
+        }
+    }
+    return out;
+}
+/* ------------------------------------------------------------------ *
+ * Root
+ * ------------------------------------------------------------------ */
+/**
+ * A hierarchical, accessible tree (file-tree style). Data-driven via the
+ * `data` prop, with controllable selection (`value`) and expansion
+ * (`expandedIds`). Implements the WAI-ARIA tree pattern: `role="tree"` root,
+ * `role="treeitem"` nodes with `aria-expanded`/`aria-selected`/`aria-level`,
+ * `role="group"` child lists, a single roving tab stop, and full keyboard
+ * navigation. SSR-safe (no DOM reads during render).
+ */
+export const TreeView = forwardRef(({ data, value: valueProp, defaultValue, onValueChange, expandedIds: expandedProp, defaultExpandedIds, onExpandedChange, className, "aria-label": ariaLabel = "Tree", ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isSelectionControlled = valueProp !== undefined;
+    const selectedId = isSelectionControlled ? valueProp : uncontrolledValue;
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(() => new Set(defaultExpandedIds));
+    const isExpansionControlled = expandedProp !== undefined;
+    const expandedIds = useMemo(() => (isExpansionControlled ? new Set(expandedProp) : uncontrolledExpanded), [isExpansionControlled, expandedProp, uncontrolledExpanded]);
+    // Registry of mounted treeitem nodes, used to move DOM focus on arrow keys.
+    const itemsRef = useRef(new Map());
+    const register = useCallback((id, node) => {
+        if (node === null) {
+            itemsRef.current.delete(id);
+        }
+        else {
+            itemsRef.current.set(id, node);
+        }
+    }, []);
+    const select = useCallback((id) => {
+        if (!isSelectionControlled) {
+            setUncontrolledValue(id);
+        }
+        onValueChange?.(id);
+    }, [isSelectionControlled, onValueChange]);
+    const toggleExpanded = useCallback((id, force) => {
+        const next = new Set(expandedIds);
+        const shouldOpen = force ?? !next.has(id);
+        if (shouldOpen) {
+            next.add(id);
+        }
+        else {
+            next.delete(id);
+        }
+        // No-op guard: avoid spurious change callbacks (e.g. ArrowRight on an
+        // already-open branch, ArrowLeft on an already-closed leaf).
+        if (next.size === expandedIds.size && shouldOpen === expandedIds.has(id)) {
+            return;
+        }
+        if (!isExpansionControlled) {
+            setUncontrolledExpanded(next);
+        }
+        onExpandedChange?.(Array.from(next));
+    }, [expandedIds, isExpansionControlled, onExpandedChange]);
+    // Flattened visible list — the single source of truth for nav + roving.
+    const flat = useMemo(() => flattenVisible(data, expandedIds), [data, expandedIds]);
+    // Roving tab stop: the first enabled visible node, derived synchronously so
+    // the tree is keyboard-reachable on first Tab without touching the DOM.
+    const rovingId = useMemo(() => flat.find((item) => !item.node.disabled)?.node.id, [flat]);
+    const focusId = useCallback((id) => {
+        if (id === undefined)
+            return;
+        itemsRef.current.get(id)?.focus();
+    }, []);
+    const onItemKeyDown = useCallback((event, item) => {
+        const currentFlat = flattenVisible(data, expandedIds);
+        const enabled = currentFlat.filter((entry) => !entry.node.disabled);
+        const index = enabled.findIndex((entry) => entry.node.id === item.node.id);
+        switch (event.key) {
+            case "ArrowDown": {
+                event.preventDefault();
+                focusId(enabled[Math.min(index + 1, enabled.length - 1)]?.node.id);
+                break;
+            }
+            case "ArrowUp": {
+                event.preventDefault();
+                focusId(enabled[Math.max(index - 1, 0)]?.node.id);
+                break;
+            }
+            case "ArrowRight": {
+                event.preventDefault();
+                if (item.isBranch && !expandedIds.has(item.node.id)) {
+                    // Collapsed branch → expand it.
+                    toggleExpanded(item.node.id, true);
+                }
+                else if (item.isBranch) {
+                    // Open branch → move to its first (enabled) child.
+                    const childIndex = currentFlat.findIndex((entry) => entry.parentId === item.node.id && !entry.node.disabled);
+                    focusId(currentFlat[childIndex]?.node.id);
+                }
+                break;
+            }
+            case "ArrowLeft": {
+                event.preventDefault();
+                if (item.isBranch && expandedIds.has(item.node.id)) {
+                    // Open branch → collapse it.
+                    toggleExpanded(item.node.id, false);
+                }
+                else if (item.parentId !== undefined) {
+                    // Leaf or closed branch → move to parent.
+                    focusId(item.parentId);
+                }
+                break;
+            }
+            case "Home": {
+                event.preventDefault();
+                focusId(enabled[0]?.node.id);
+                break;
+            }
+            case "End": {
+                event.preventDefault();
+                focusId(enabled[enabled.length - 1]?.node.id);
+                break;
+            }
+            case "Enter":
+            case " ": {
+                event.preventDefault();
+                select(item.node.id);
+                break;
+            }
+            default:
+                break;
+        }
+    }, [data, expandedIds, focusId, toggleExpanded, select]);
+    const contextValue = useMemo(() => ({
+        selectedId,
+        expandedIds,
+        rovingId,
+        select,
+        toggleExpanded,
+        onItemKeyDown,
+        register,
+    }), [selectedId, expandedIds, rovingId, select, toggleExpanded, onItemKeyDown, register]);
+    return (_jsx(TreeViewContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, role: "tree", "aria-label": ariaLabel, "data-slot": "tree-view", className: cn("flex w-full min-w-0 flex-col text-sm text-fg select-none", className), ...props, children: data.map((node) => (_jsx(TreeViewItem, { node: node, level: 1, parentId: undefined }, node.id))) }) }));
+});
+TreeView.displayName = "TreeView";
+function TreeViewItem({ node, level, parentId }) {
+    const { selectedId, expandedIds, rovingId, select, toggleExpanded, onItemKeyDown, register } = useTreeView();
+    const isBranch = isBranchNode(node);
+    const isExpanded = isBranch && expandedIds.has(node.id);
+    const isSelected = selectedId === node.id;
+    const isDisabled = node.disabled === true;
+    const flatSelf = { node, level, parentId, isBranch };
+    const setRef = useCallback((el) => register(node.id, el), [register, node.id]);
+    return (_jsxs("div", { "data-slot": "tree-view-item", className: "min-w-0", children: [_jsxs("div", { ref: setRef, role: "treeitem", "aria-level": level, "aria-selected": isSelected, "aria-expanded": isBranch ? isExpanded : undefined, "aria-disabled": isDisabled || undefined, "data-slot": "tree-view-item-trigger", "data-state": isExpanded ? "open" : "closed", "data-selected": isSelected || undefined, 
+                // Roving tabindex: exactly one node (the first enabled one) owns the tab
+                // stop; arrow keys move focus and shift the tab stop with it.
+                tabIndex: !isDisabled && node.id === rovingId ? 0 : -1, 
+                // Indent by depth. Inline padding keeps the focus ring spanning the full
+                // row width while the content still reads as nested.
+                style: { paddingInlineStart: `${(level - 1) * 1 + 0.5}rem` }, className: cn("flex h-8 cursor-pointer items-center gap-1.5 rounded-md pr-2", "transition-[background,color] duration-150 ease-[var(--ease-out-quart)] motion-reduce:transition-none", "text-fg-secondary hover:bg-surface-overlay hover:text-fg", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", isSelected && "bg-surface-overlay font-medium text-fg", isDisabled && "pointer-events-none opacity-50"), onClick: () => {
+                    if (isDisabled)
+                        return;
+                    if (isBranch) {
+                        toggleExpanded(node.id);
+                    }
+                    select(node.id);
+                }, onKeyDown: (event) => {
+                    if (isDisabled)
+                        return;
+                    onItemKeyDown(event, flatSelf);
+                }, children: [isBranch ? (_jsx(ChevronRight, { "aria-hidden": "true", "data-slot": "tree-view-chevron", className: cn("size-4 shrink-0 text-fg-tertiary transition-transform duration-200 ease-[var(--ease-out-quart)] motion-reduce:transition-none", isExpanded && "rotate-90") })) : (_jsx("span", { "aria-hidden": "true", className: "size-4 shrink-0" })), node.icon ? (_jsx("span", { "aria-hidden": "true", "data-slot": "tree-view-icon", className: "flex size-4 shrink-0 items-center justify-center text-fg-tertiary [&_svg]:size-4", children: node.icon })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: node.label })] }), isBranch && isExpanded && node.children ? (_jsx("div", { role: "group", "data-slot": "tree-view-group", className: "flex flex-col", children: node.children.map((child) => (_jsx(TreeViewItem, { node: child, level: level + 1, parentId: node.id }, child.id))) })) : null] }));
+}
+//# sourceMappingURL=tree-view.js.map

package/dist/components/typing-text.d.ts

@@ -0,0 +1,49 @@
+import { type HTMLAttributes, type Ref } from "react";
+export type TypingTextMotionPreference = "respect" | "always" | "never";
+export interface TypingTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    ref?: Ref<HTMLSpanElement>;
+    /**
+     * Phrases to type. A single string is treated as one phrase. When more than
+     * one is provided the component types, pauses, deletes, and moves on.
+     */
+    text: string | string[];
+    /**
+     * Milliseconds per typed character.
+     * @default 50
+     */
+    typingSpeed?: number;
+    /**
+     * Milliseconds per deleted character.
+     * @default 30
+     */
+    deletingSpeed?: number;
+    /**
+     * Milliseconds to rest on a finished phrase before deleting.
+     * @default 1400
+     */
+    pause?: number;
+    /**
+     * Loop back to the first phrase after the last. Defaults to `true` when
+     * more than one phrase is provided.
+     */
+    loop?: boolean;
+    /**
+     * How `prefers-reduced-motion` is honoured. Defaults to `"respect"` (show
+     * the current phrase in full). `"always"` forces the typewriter;
+     * `"never"` always shows the first phrase statically.
+     * @default "respect"
+     */
+    reducedMotion?: TypingTextMotionPreference;
+}
+/**
+ * A typewriter that types one or more phrases with a blinking caret. The
+ * accessible name is the current phrase (or the joined list, announced as a
+ * status region only when it settles — we keep the live string on the
+ * wrapper so AT reads the visible text). Reduced-motion visitors see the
+ * first phrase in full with no caret blink.
+ */
+export declare function TypingText({ ref, className, text, typingSpeed, deletingSpeed, pause, loop, reducedMotion, ...props }: TypingTextProps): import("react").JSX.Element;
+export declare namespace TypingText {
+    var displayName: string;
+}
+//# sourceMappingURL=typing-text.d.ts.map

package/dist/components/typing-text.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../lib/cn.js";
+const graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : null;
+function segmentGraphemes(value) {
+    if (graphemeSegmenter) {
+        return Array.from(graphemeSegmenter.segment(value), (segment) => segment.segment);
+    }
+    return Array.from(value);
+}
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+function prefersReducedMotion() {
+    return (typeof window !== "undefined" &&
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+}
+/**
+ * A typewriter that types one or more phrases with a blinking caret. The
+ * accessible name is the current phrase (or the joined list, announced as a
+ * status region only when it settles — we keep the live string on the
+ * wrapper so AT reads the visible text). Reduced-motion visitors see the
+ * first phrase in full with no caret blink.
+ */
+export function TypingText({ ref, className, text, typingSpeed = 50, deletingSpeed = 30, pause = 1400, loop, reducedMotion = "respect", ...props }) {
+    const phrases = (Array.isArray(text) ? text : [text]).filter((phrase) => phrase.length > 0);
+    const shouldLoop = loop ?? phrases.length > 1;
+    const firstPhrase = phrases[0] ?? "";
+    const [phraseIndex, setPhraseIndex] = useState(0);
+    const [glyphCount, setGlyphCount] = useState(() => reducedMotion === "never" ? segmentGraphemes(firstPhrase).length : 0);
+    const [deleting, setDeleting] = useState(false);
+    const [staticMode, setStaticMode] = useState(reducedMotion === "never");
+    const phrase = phrases[phraseIndex] ?? firstPhrase;
+    const glyphs = segmentGraphemes(phrase);
+    useEffect(() => {
+        const reduce = reducedMotion === "never"
+            ? true
+            : reducedMotion === "always"
+                ? false
+                : prefersReducedMotion();
+        setStaticMode(reduce);
+        if (reduce) {
+            setGlyphCount(segmentGraphemes(firstPhrase).length);
+            setPhraseIndex(0);
+            setDeleting(false);
+        }
+    }, [firstPhrase, reducedMotion]);
+    useEffect(() => {
+        if (staticMode || phrases.length === 0)
+            return;
+        const typeMs = Math.max(8, finiteOr(typingSpeed, 50));
+        const deleteMs = Math.max(8, finiteOr(deletingSpeed, 30));
+        const pauseMs = Math.max(0, finiteOr(pause, 1400));
+        if (!deleting && glyphCount === glyphs.length) {
+            if (!shouldLoop && phraseIndex === phrases.length - 1)
+                return;
+            const timeout = window.setTimeout(() => setDeleting(true), pauseMs);
+            return () => window.clearTimeout(timeout);
+        }
+        if (deleting && glyphCount === 0) {
+            const next = (phraseIndex + 1) % phrases.length;
+            const timeout = window.setTimeout(() => {
+                setPhraseIndex(next);
+                setDeleting(false);
+            }, 80);
+            return () => window.clearTimeout(timeout);
+        }
+        const timeout = window.setTimeout(() => setGlyphCount((count) => count + (deleting ? -1 : 1)), deleting ? deleteMs : typeMs);
+        return () => window.clearTimeout(timeout);
+    }, [
+        deleting,
+        deletingSpeed,
+        glyphCount,
+        glyphs.length,
+        pause,
+        phraseIndex,
+        phrases.length,
+        shouldLoop,
+        staticMode,
+        typingSpeed,
+    ]);
+    const visible = glyphs.slice(0, glyphCount).join("");
+    return (_jsxs("span", { ref: ref, "data-slot": "typing-text", className: cn("inline whitespace-pre-wrap", className), ...props, children: [visible, staticMode ? null : (_jsx("span", { "aria-hidden": "true", className: "ms-px inline-block h-[1em] w-px translate-y-[0.1em] animate-pulse bg-fg align-baseline" }))] }));
+}
+TypingText.displayName = "TypingText";
+//# sourceMappingURL=typing-text.js.map

package/dist/components/usage-meter.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+type UsageMeterTone = "auto" | "primary" | "success" | "warning" | "error";
+type UsageMeterVariant = "linear" | "circular";
+export interface UsageMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Current usage. */
+    value: number;
+    /** The quota / limit the usage is measured against. */
+    max: number;
+    /** Optional label shown beside (linear) or below (circular) the meter. */
+    label?: ReactNode;
+    /** Unit suffix appended to the value readout, e.g. "tokens". */
+    unit?: string;
+    /** Layout: a horizontal bar or an SVG ring. */
+    variant?: UsageMeterVariant;
+    /** Color. `auto` derives severity from the usage ratio; others are explicit. */
+    tone?: UsageMeterTone;
+    /** Override the `value / max` readout. */
+    formatValue?: (value: number, max: number) => string;
+    /** Whether to render the textual value/percentage readout. */
+    showValue?: boolean;
+    /** Diameter of the ring in px (circular variant only). */
+    size?: number;
+}
+export declare const UsageMeter: import("react").ForwardRefExoticComponent<UsageMeterProps & import("react").RefAttributes<HTMLDivElement>>;
+/** Thin wrapper that always renders the linear variant. */
+export declare const UsageMeterLinear: import("react").ForwardRefExoticComponent<Omit<UsageMeterProps, "variant"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Thin wrapper that always renders the circular variant. */
+export declare const UsageMeterCircular: import("react").ForwardRefExoticComponent<Omit<UsageMeterProps, "variant"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=usage-meter.d.ts.map

package/dist/components/usage-meter.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+// Token-driven tone classes. Linear uses a `bg-*` fill; circular strokes via
+// `currentColor`, so it pairs a matching `text-*` class (mirrors Spinner).
+const toneStyles = {
+    primary: { fill: "bg-primary", stroke: "text-primary" },
+    success: { fill: "bg-success", stroke: "text-success" },
+    warning: { fill: "bg-warning", stroke: "text-warning" },
+    error: { fill: "bg-error", stroke: "text-error" },
+};
+/**
+ * Resolve the ratio (0–1) defensively: a non-finite `value`/`max` or a
+ * `max <= 0` collapses to 0 so the meter renders an empty track instead of
+ * `NaN`/`Infinity` widths. The ratio is clamped to 0–1 so values over `max`
+ * cap the bar at 100%.
+ */
+function resolveRatio(value, max) {
+    if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) {
+        return 0;
+    }
+    return Math.min(1, Math.max(0, value / max));
+}
+// `tone: "auto"` maps the usage ratio to a severity color:
+// ≤75% primary, 75–90% warning, >90% error.
+function toneForRatio(ratio) {
+    if (ratio > 0.9) {
+        return "error";
+    }
+    if (ratio > 0.75) {
+        return "warning";
+    }
+    return "primary";
+}
+// Pinned to en-US on purpose. A bare `toLocaleString()` reads the ambient
+// locale, which differs between the server (Node) and the browser (the
+// visitor's), so the same meter renders two different strings and React
+// reports a hydration mismatch. A published component must be deterministic;
+// apps that want localized digits pass `formatValue`.
+const VALUE_FORMATTER = new Intl.NumberFormat("en-US");
+function defaultFormatValue(value, max) {
+    const safeValue = Number.isFinite(value) ? value : 0;
+    const safeMax = Number.isFinite(max) ? max : 0;
+    return `${VALUE_FORMATTER.format(safeValue)} / ${VALUE_FORMATTER.format(safeMax)}`;
+}
+export const UsageMeter = forwardRef(({ className, value, max, label, unit, variant = "linear", tone = "auto", formatValue, showValue = true, size = 96, "aria-label": ariaLabel, ...props }, ref) => {
+    const ratio = resolveRatio(value, max);
+    const percent = Math.round(ratio * 100);
+    const resolvedTone = tone === "auto" ? toneForRatio(ratio) : tone;
+    const styles = toneStyles[resolvedTone];
+    const readout = (formatValue ?? defaultFormatValue)(value, max);
+    const valueText = unit ? `${readout} ${unit}` : readout;
+    // Prefer an explicit aria-label, then the label, then the value readout so
+    // assistive tech always announces something meaningful.
+    const accessibleLabel = ariaLabel ?? (typeof label === "string" ? label : undefined) ?? valueText;
+    const safeMax = Number.isFinite(max) && max > 0 ? max : 0;
+    const safeValue = Number.isFinite(value) ? Math.min(Math.max(value, 0), safeMax) : 0;
+    const meterAria = {
+        role: "meter",
+        "aria-valuenow": safeValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": safeMax,
+        "aria-valuetext": `${percent}%`,
+        "aria-label": accessibleLabel,
+    };
+    if (variant === "circular") {
+        return (_jsx(UsageMeterCircularImpl, { ref: ref, className: className, label: label, percent: percent, valueText: showValue ? valueText : undefined, showValue: showValue, stroke: styles.stroke, ratio: ratio, size: size, meterAria: meterAria, ...props }));
+    }
+    return (_jsxs("div", { ref: ref, "data-slot": "usage-meter", className: cn("flex flex-col gap-2", className), ...props, children: [(label != null || showValue) && (_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [label != null ? (_jsx("span", { "data-slot": "usage-meter-label", className: "font-medium text-fg", children: label })) : (_jsx("span", {})), showValue && (_jsxs("span", { "data-slot": "usage-meter-value", className: "flex items-baseline gap-2 tabular-nums text-fg-secondary", children: [_jsx("span", { children: valueText }), _jsxs("span", { className: "text-fg-tertiary", children: [percent, "%"] })] }))] })), _jsx("div", { "data-slot": "usage-meter-track", ...meterAria, className: "relative h-2 w-full overflow-hidden rounded-full bg-surface-overlay", children: _jsx("div", { "data-slot": "usage-meter-fill", className: cn("h-full rounded-full transition-[width] duration-500 ease-[var(--ease-out-quart)]", styles.fill), style: { width: `${ratio * 100}%` } }) })] }));
+});
+UsageMeter.displayName = "UsageMeter";
+const UsageMeterCircularImpl = forwardRef(({ className, label, percent, valueText, showValue, stroke, ratio, size, meterAria, ...props }, ref) => {
+    // Geometry: a 12.5%-of-size stroke reads well at the ~96px default. The
+    // radius leaves room for the stroke so it isn't clipped by the viewBox.
+    const strokeWidth = Math.max(2, Math.round(size * 0.1));
+    const radius = size / 2 - strokeWidth / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = circumference * (1 - ratio);
+    return (_jsxs("div", { ref: ref, "data-slot": "usage-meter", className: cn("inline-flex flex-col items-center gap-2", className), ...props, children: [_jsxs("div", { "data-slot": "usage-meter-ring", ...meterAria, className: "relative inline-flex items-center justify-center", style: { width: size, height: size }, children: [_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", 
+                        // Rotate so the ring fills clockwise from 12 o'clock.
+                        className: cn("-rotate-90", stroke), "aria-hidden": "true", children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, className: "text-surface-overlay" }), _jsx("circle", { "data-slot": "usage-meter-ring-progress", cx: size / 2, cy: size / 2, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: dashOffset, className: "transition-[stroke-dashoffset] duration-500 ease-[var(--ease-out-quart)]" })] }), showValue && (_jsxs("span", { "data-slot": "usage-meter-value", className: "absolute inset-0 flex items-center justify-center font-display text-lg font-semibold tabular-nums text-fg", children: [percent, "%"] }))] }), label != null && (_jsx("div", { "data-slot": "usage-meter-label", className: "text-center text-sm font-medium text-fg", children: label })), showValue && valueText && (_jsx("div", { className: "text-center text-xs tabular-nums text-fg-secondary", children: valueText }))] }));
+});
+UsageMeterCircularImpl.displayName = "UsageMeterCircularImpl";
+/** Thin wrapper that always renders the linear variant. */
+export const UsageMeterLinear = forwardRef((props, ref) => _jsx(UsageMeter, { ref: ref, variant: "linear", ...props }));
+UsageMeterLinear.displayName = "UsageMeterLinear";
+/** Thin wrapper that always renders the circular variant. */
+export const UsageMeterCircular = forwardRef((props, ref) => _jsx(UsageMeter, { ref: ref, variant: "circular", ...props }));
+UsageMeterCircular.displayName = "UsageMeterCircular";
+//# sourceMappingURL=usage-meter.js.map

package/dist/components/video-player.d.ts

@@ -0,0 +1,48 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes, type ReactNode, type Ref } from "react";
+declare const videoPlayerVariants: (props?: ({
+    aspect?: "video" | "square" | "wide" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface VideoPlayerLabels {
+    /** Accessible name for the play buttons (center overlay + control bar). */
+    play: string;
+    /** Accessible name for the pause button. */
+    pause: string;
+    /** Accessible name for the mute button while audio is audible. */
+    mute: string;
+    /** Accessible name for the unmute button while audio is muted. */
+    unmute: string;
+    /** Accessible name for the seek slider. */
+    seek: string;
+    /** Accessible name for the volume slider. */
+    volume: string;
+    /** Accessible name for the playback-rate cycle button. */
+    settings: string;
+    /** Accessible name for the fullscreen button while windowed. */
+    fullscreen: string;
+    /** Accessible name for the fullscreen button while fullscreen. */
+    exitFullscreen: string;
+}
+export interface VideoPlayerProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof videoPlayerVariants> {
+    /** Video source URL. */
+    src: string;
+    /** Preview image shown before the first frame is available. */
+    poster?: string;
+    /** Starts playback automatically once the media can play. @default false */
+    autoPlay?: boolean;
+    /** Restarts playback from the beginning when the video ends. @default false */
+    loop?: boolean;
+    /** Starts with the audio muted. @default false */
+    muted?: boolean;
+    /** Frame aspect ratio: 16:9 (`"video"`), 1:1 (`"square"`) or 21:9 (`"wide"`). @default "video" */
+    aspect?: "video" | "square" | "wide";
+    /** Control-label overrides for i18n. Every label defaults to English. */
+    labels?: Partial<VideoPlayerLabels>;
+    /** Ref to the underlying `<video>` element, for imperative control. */
+    videoRef?: Ref<HTMLVideoElement>;
+    /** Extra media children, e.g. a captions `<track>` or additional `<source>` elements. */
+    children?: ReactNode;
+}
+export declare const VideoPlayer: import("react").ForwardRefExoticComponent<VideoPlayerProps & import("react").RefAttributes<HTMLDivElement>>;
+export { videoPlayerVariants };
+//# sourceMappingURL=video-player.d.ts.map