@cronus-ui/ui 0.6.0

package/dist/components/particles.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../lib/cn.js";
+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 calm 2D particle field that drifts behind content. Canvas-only, no WebGL.
+ * Paused (and undrawn) under reduced motion so the surface stays still.
+ */
+export function Particles({ ref, className, children, count = 40, ...props }) {
+    const canvasRef = useRef(null);
+    const specks = useRef([]);
+    const frame = useRef(null);
+    const speckCount = Math.min(120, Math.max(8, Math.round(finiteOr(count, 40))));
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        let context = null;
+        try {
+            context = canvas.getContext("2d");
+        }
+        catch {
+            return;
+        }
+        if (!context)
+            return;
+        if (prefersReducedMotion())
+            return;
+        const resize = () => {
+            const parent = canvas.parentElement;
+            if (!parent)
+                return;
+            const rect = parent.getBoundingClientRect();
+            const ratio = window.devicePixelRatio || 1;
+            canvas.width = Math.max(1, Math.floor(rect.width * ratio));
+            canvas.height = Math.max(1, Math.floor(rect.height * ratio));
+            canvas.style.width = `${rect.width}px`;
+            canvas.style.height = `${rect.height}px`;
+            context.setTransform(ratio, 0, 0, ratio, 0, 0);
+            specks.current = Array.from({ length: speckCount }, (_, index) => ({
+                x: (index * 97) % Math.max(1, rect.width),
+                y: (index * 53) % Math.max(1, rect.height),
+                vx: ((index % 5) - 2) * 0.12,
+                vy: ((index % 3) - 1) * 0.08,
+                size: 1 + (index % 3) * 0.4,
+            }));
+        };
+        resize();
+        window.addEventListener("resize", resize);
+        const tick = () => {
+            const parent = canvas.parentElement;
+            if (!parent)
+                return;
+            const { width, height } = parent.getBoundingClientRect();
+            context.clearRect(0, 0, width, height);
+            context.fillStyle = "color-mix(in oklch, var(--cronus-fg) 35%, transparent)";
+            for (const speck of specks.current) {
+                speck.x += speck.vx;
+                speck.y += speck.vy;
+                if (speck.x < 0)
+                    speck.x = width;
+                if (speck.x > width)
+                    speck.x = 0;
+                if (speck.y < 0)
+                    speck.y = height;
+                if (speck.y > height)
+                    speck.y = 0;
+                context.beginPath();
+                context.arc(speck.x, speck.y, speck.size, 0, Math.PI * 2);
+                context.fill();
+            }
+            frame.current = requestAnimationFrame(tick);
+        };
+        frame.current = requestAnimationFrame(tick);
+        return () => {
+            window.removeEventListener("resize", resize);
+            if (frame.current !== null)
+                cancelAnimationFrame(frame.current);
+        };
+    }, [speckCount]);
+    return (_jsxs("div", { ref: ref, "data-slot": "particles", className: cn("relative overflow-hidden", className), ...props, children: [_jsx("canvas", { ref: canvasRef, tabIndex: -1, "aria-hidden": "true", className: "pointer-events-none absolute inset-0 motion-reduce:hidden" }), _jsx("div", { className: "relative", children: children })] }));
+}
+Particles.displayName = "Particles";
+//# sourceMappingURL=particles.js.map

package/dist/components/password-input.d.ts

@@ -0,0 +1,16 @@
+import { type InputHTMLAttributes } from "react";
+/**
+ * Estimate password strength from length and character-class variety.
+ * Pure helper — no side effects — so it can be unit-tested in isolation.
+ */
+export declare function getPasswordStrength(value: string): {
+    score: 0 | 1 | 2 | 3 | 4;
+    label: string;
+};
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    invalid?: boolean;
+    /** Show a 4-segment strength meter + label below the field. */
+    showStrength?: boolean;
+}
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=password-input.d.ts.map

package/dist/components/password-input.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Eye, EyeOff } from "lucide-react";
+import { forwardRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Input } from "./input.js";
+/**
+ * Estimate password strength from length and character-class variety.
+ * Pure helper — no side effects — so it can be unit-tested in isolation.
+ */
+export function getPasswordStrength(value) {
+    if (!value)
+        return { score: 0, label: "Weak" };
+    let variety = 0;
+    if (/[a-z]/.test(value))
+        variety += 1;
+    if (/[A-Z]/.test(value))
+        variety += 1;
+    if (/[0-9]/.test(value))
+        variety += 1;
+    if (/[^A-Za-z0-9]/.test(value))
+        variety += 1;
+    let points = 0;
+    if (value.length >= 8)
+        points += 1;
+    if (value.length >= 12)
+        points += 1;
+    points += variety >= 3 ? 2 : variety >= 2 ? 1 : 0;
+    const score = (Math.min(points, 4) || 1);
+    const label = ["Weak", "Weak", "Fair", "Good", "Strong"][score];
+    return { score, label };
+}
+const SEGMENT_COLORS = ["bg-error", "bg-error", "bg-warning", "bg-warning", "bg-success"];
+export const PasswordInput = forwardRef(({ className, showStrength = false, value, defaultValue, onChange, ...props }, ref) => {
+    const [visible, setVisible] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue != null ? String(defaultValue) : "");
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? String(value ?? "") : internalValue;
+    const strength = getPasswordStrength(currentValue);
+    return (_jsxs("div", { "data-slot": "password-input", className: cn("w-full", className), children: [_jsxs("div", { className: "relative", children: [_jsx(Input, { ref: ref, type: visible ? "text" : "password", className: "pr-10", value: value, defaultValue: defaultValue, onChange: (event) => {
+                            if (!isControlled)
+                                setInternalValue(event.target.value);
+                            onChange?.(event);
+                        }, ...props }), _jsx("button", { type: "button", "data-slot": "password-input-toggle", onClick: () => setVisible((v) => !v), "aria-label": visible ? "Hide password" : "Show password", "aria-pressed": visible, className: cn("absolute inset-y-0 right-0 flex w-10 items-center justify-center rounded-r-lg text-fg-tertiary", "transition-colors hover:text-fg outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", "disabled:opacity-50 disabled:pointer-events-none [&_svg]:size-4"), disabled: props.disabled, children: visible ? _jsx(EyeOff, { "aria-hidden": "true" }) : _jsx(Eye, { "aria-hidden": "true" }) })] }), showStrength && (_jsxs("div", { "data-slot": "password-input-strength", className: "mt-2 flex items-center gap-2", children: [_jsx("div", { className: "flex flex-1 gap-1", "aria-hidden": "true", children: [0, 1, 2, 3].map((segment) => (_jsx("div", { className: cn("h-1 flex-1 rounded-full transition-colors", segment < strength.score
+                                ? SEGMENT_COLORS[strength.score]
+                                : "bg-surface-overlay") }, segment))) }), _jsx("span", { className: "text-xs text-fg-tertiary", children: strength.label })] }))] }));
+});
+PasswordInput.displayName = "PasswordInput";
+//# sourceMappingURL=password-input.js.map

package/dist/components/phone-input.d.ts

@@ -0,0 +1,67 @@
+import { type InputHTMLAttributes } from "react";
+/** A single dialling country shown in the selector. */
+export interface PhoneCountry {
+    /** ISO 3166-1 alpha-2 code, e.g. `"BR"`. Used as the stable key. */
+    code: string;
+    /** Human-readable country name, e.g. `"Brazil"`. */
+    name: string;
+    /** International dialling code without the `+`, e.g. `"55"`. */
+    dialCode: string;
+    /** Flag emoji rendered in the trigger and list, e.g. `"🇧🇷"`. */
+    flag: string;
+    /**
+     * Digit group sizes for the national number, e.g. `[2, 5, 4]` renders
+     * `11 98765 4321`. Extra digits beyond the pattern become a trailing group.
+     */
+    format?: number[];
+}
+/**
+ * A compact, sensible default of ~20 common dialling countries with Brazil
+ * first. Pass your own list via the `countries` prop to override or extend it.
+ */
+export declare const DEFAULT_PHONE_COUNTRIES: PhoneCountry[];
+export interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type"> {
+    /** Controlled value as an E.164 string (e.g. `"+5511987654321"`). Pair with `onChange`. */
+    value?: string;
+    /** Initial E.164 (or bare national) value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called with the full E.164 string on every edit; empty string when no number is entered. */
+    onChange?: (value: string) => void;
+    /** ISO 3166-1 alpha-2 code selected on first render. Defaults to `"BR"`. */
+    defaultCountry?: string;
+    /** Overrides the built-in country list. Order controls the list order. */
+    countries?: PhoneCountry[];
+    /** Marks the field invalid (red border/ring + `aria-invalid`). */
+    invalid?: boolean;
+    /** Placeholder for the country search box inside the selector. */
+    searchPlaceholder?: string;
+    /** Message shown when no country matches the search. */
+    emptyText?: string;
+    /** Accessible name for the whole control and the number field. Defaults to `"Phone number"`. */
+    label?: string;
+    /** Accessible name for the country selector trigger. Defaults to `"Select country"`. */
+    countryLabel?: string;
+    /** Extra classes for the country selector popover. */
+    contentClassName?: string;
+    /** Name for a hidden input carrying the E.164 value, so the field submits inside a form. */
+    name?: string;
+}
+/**
+ * An international phone input: a searchable country selector (flag + dial code)
+ * fused to a national-number field that auto-groups digits for the selected
+ * country and emits the composed E.164 string via `onChange`.
+ *
+ * Behavior & performance: digit grouping is computed with a lightweight
+ * per-country pattern (no libphonenumber). The caret is preserved across
+ * reformatting via a `useLayoutEffect` that reads a ref set during `onChange` —
+ * no timers, intervals, or RAF are scheduled. Country selection and typing both
+ * flow through `onChange`, so controlled and uncontrolled usage both work; a
+ * synchronising effect keeps controlled state aligned without loops.
+ *
+ * Accessibility: the root is a labelled `role="group"`; the trigger is a
+ * `role="combobox"` (expanded state announced) and the number field is a
+ * labelled `type="tel"` input, which is the forwarded ref. Every transition
+ * degrades under `prefers-reduced-motion: reduce`.
+ */
+export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=phone-input.d.ts.map

package/dist/components/phone-input.js

@@ -0,0 +1,225 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "./command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+const BRAZIL = {
+    code: "BR",
+    name: "Brazil",
+    dialCode: "55",
+    flag: "🇧🇷",
+    format: [2, 5, 4],
+};
+/**
+ * A compact, sensible default of ~20 common dialling countries with Brazil
+ * first. Pass your own list via the `countries` prop to override or extend it.
+ */
+export const DEFAULT_PHONE_COUNTRIES = [
+    BRAZIL,
+    { code: "US", name: "United States", dialCode: "1", flag: "🇺🇸", format: [3, 3, 4] },
+    { code: "PT", name: "Portugal", dialCode: "351", flag: "🇵🇹", format: [3, 3, 3] },
+    { code: "GB", name: "United Kingdom", dialCode: "44", flag: "🇬🇧", format: [4, 3, 3] },
+    { code: "ES", name: "Spain", dialCode: "34", flag: "🇪🇸", format: [3, 3, 3] },
+    { code: "FR", name: "France", dialCode: "33", flag: "🇫🇷", format: [1, 2, 2, 2, 2] },
+    { code: "DE", name: "Germany", dialCode: "49", flag: "🇩🇪", format: [3, 4, 4] },
+    { code: "IT", name: "Italy", dialCode: "39", flag: "🇮🇹", format: [3, 3, 4] },
+    { code: "NL", name: "Netherlands", dialCode: "31", flag: "🇳🇱", format: [1, 4, 4] },
+    { code: "MX", name: "Mexico", dialCode: "52", flag: "🇲🇽", format: [2, 4, 4] },
+    { code: "AR", name: "Argentina", dialCode: "54", flag: "🇦🇷", format: [2, 4, 4] },
+    { code: "CL", name: "Chile", dialCode: "56", flag: "🇨🇱", format: [1, 4, 4] },
+    { code: "CO", name: "Colombia", dialCode: "57", flag: "🇨🇴", format: [3, 3, 4] },
+    { code: "CA", name: "Canada", dialCode: "1", flag: "🇨🇦", format: [3, 3, 4] },
+    { code: "AU", name: "Australia", dialCode: "61", flag: "🇦🇺", format: [3, 3, 3] },
+    { code: "JP", name: "Japan", dialCode: "81", flag: "🇯🇵", format: [2, 4, 4] },
+    { code: "IN", name: "India", dialCode: "91", flag: "🇮🇳", format: [5, 5] },
+    { code: "CN", name: "China", dialCode: "86", flag: "🇨🇳", format: [3, 4, 4] },
+    { code: "ZA", name: "South Africa", dialCode: "27", flag: "🇿🇦", format: [2, 3, 4] },
+    { code: "AE", name: "United Arab Emirates", dialCode: "971", flag: "🇦🇪", format: [2, 3, 4] },
+    { code: "NG", name: "Nigeria", dialCode: "234", flag: "🇳🇬", format: [3, 3, 4] },
+    { code: "PH", name: "Philippines", dialCode: "63", flag: "🇵🇭", format: [3, 3, 4] },
+];
+/** E.164 caps the full number (country code + national) at 15 digits. */
+const E164_MAX_DIGITS = 15;
+/** Guaranteed-defined fallback for when a code can't be resolved (e.g. empty list). */
+const FALLBACK_COUNTRY = BRAZIL;
+const digitsOf = (input) => (input ?? "").replace(/\D+/g, "");
+const maxNationalDigits = (country) => Math.max(0, E164_MAX_DIGITS - country.dialCode.length);
+/** Group a run of digits into space-separated chunks per the country pattern. */
+function formatNational(digits, groups) {
+    if (!groups || groups.length === 0) {
+        return digits;
+    }
+    const parts = [];
+    let index = 0;
+    for (const size of groups) {
+        if (index >= digits.length) {
+            break;
+        }
+        parts.push(digits.slice(index, index + size));
+        index += size;
+    }
+    if (index < digits.length) {
+        parts.push(digits.slice(index));
+    }
+    return parts.join(" ");
+}
+/** Placeholder mask derived from the grouping pattern, e.g. `00 00000 0000`. */
+function maskFromFormat(groups) {
+    if (!groups || groups.length === 0) {
+        return undefined;
+    }
+    return groups.map((size) => "0".repeat(size)).join(" ");
+}
+/** Map a caret position expressed in digit-count onto the formatted string. */
+function caretForDigitIndex(formatted, digitIndex) {
+    if (digitIndex <= 0) {
+        return 0;
+    }
+    let seen = 0;
+    for (let i = 0; i < formatted.length; i += 1) {
+        if (formatted.charCodeAt(i) >= 48 && formatted.charCodeAt(i) <= 57) {
+            seen += 1;
+            if (seen === digitIndex) {
+                return i + 1;
+            }
+        }
+    }
+    return formatted.length;
+}
+/**
+ * Split an E.164 (or bare national) string into a country + national number.
+ * When the input starts with `+`, the country is resolved by the longest
+ * matching dial code, preferring the currently-selected country so that
+ * countries sharing a dial code (e.g. US/CA on `1`) don't snap around.
+ */
+function splitPhone(raw, countries, preferredCode) {
+    const trimmed = (raw ?? "").trim();
+    const digits = digitsOf(trimmed);
+    if (!trimmed.startsWith("+")) {
+        return { code: preferredCode, national: digits };
+    }
+    const preferred = countries.find((c) => c.code === preferredCode);
+    if (preferred && digits.startsWith(preferred.dialCode)) {
+        return { code: preferred.code, national: digits.slice(preferred.dialCode.length) };
+    }
+    let match;
+    for (const country of countries) {
+        if (digits.startsWith(country.dialCode) &&
+            (!match || country.dialCode.length > match.dialCode.length)) {
+            match = country;
+        }
+    }
+    if (match) {
+        return { code: match.code, national: digits.slice(match.dialCode.length) };
+    }
+    return { code: preferred?.code ?? countries[0]?.code ?? preferredCode, national: digits };
+}
+/**
+ * An international phone input: a searchable country selector (flag + dial code)
+ * fused to a national-number field that auto-groups digits for the selected
+ * country and emits the composed E.164 string via `onChange`.
+ *
+ * Behavior & performance: digit grouping is computed with a lightweight
+ * per-country pattern (no libphonenumber). The caret is preserved across
+ * reformatting via a `useLayoutEffect` that reads a ref set during `onChange` —
+ * no timers, intervals, or RAF are scheduled. Country selection and typing both
+ * flow through `onChange`, so controlled and uncontrolled usage both work; a
+ * synchronising effect keeps controlled state aligned without loops.
+ *
+ * Accessibility: the root is a labelled `role="group"`; the trigger is a
+ * `role="combobox"` (expanded state announced) and the number field is a
+ * labelled `type="tel"` input, which is the forwarded ref. Every transition
+ * degrades under `prefers-reduced-motion: reduce`.
+ */
+export const PhoneInput = forwardRef(({ value, defaultValue, onChange, defaultCountry = "BR", countries = DEFAULT_PHONE_COUNTRIES, invalid = false, disabled = false, placeholder, searchPlaceholder = "Search country…", emptyText = "No country found.", label = "Phone number", countryLabel = "Select country", className, contentClassName, name, id, autoComplete = "tel-national", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }, ref) => {
+    const countryMap = useMemo(() => new Map(countries.map((country) => [country.code, country])), [countries]);
+    const isControlled = value !== undefined;
+    // Seed internal state once from `value`/`defaultValue`; later controlled
+    // updates flow through the sync effect below. Lazy initialisers run only on
+    // the first render, so this never reacts to prop changes.
+    const seed = () => {
+        const parsed = splitPhone(value ?? defaultValue, countries, defaultCountry);
+        const resolved = countryMap.get(parsed.code) ?? FALLBACK_COUNTRY;
+        return {
+            code: resolved.code,
+            national: parsed.national.slice(0, maxNationalDigits(resolved)),
+        };
+    };
+    const [open, setOpen] = useState(false);
+    const [countryCode, setCountryCode] = useState(() => seed().code);
+    const [national, setNational] = useState(() => seed().national);
+    const inputRef = useRef(null);
+    const caretRef = useRef(null);
+    const focusInputOnCloseRef = useRef(false);
+    const country = countryMap.get(countryCode) ?? FALLBACK_COUNTRY;
+    const maxDigits = maxNationalDigits(country);
+    const formattedValue = formatNational(national, country.format);
+    const e164 = national ? `+${country.dialCode}${national}` : "";
+    const setRef = useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // Keep internal state aligned with a controlled `value` without re-render loops.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only re-sync when the controlled value changes.
+    useEffect(() => {
+        if (!isControlled) {
+            return;
+        }
+        const parsed = splitPhone(value, countries, countryCode);
+        const nextCountry = countryMap.get(parsed.code) ?? FALLBACK_COUNTRY;
+        setCountryCode(nextCountry.code);
+        setNational(parsed.national.slice(0, maxNationalDigits(nextCountry)));
+    }, [value, isControlled]);
+    // Restore the caret after a reformat (runs before paint; no scheduled work).
+    useLayoutEffect(() => {
+        const node = inputRef.current;
+        if (node && caretRef.current !== null && document.activeElement === node) {
+            node.setSelectionRange(caretRef.current, caretRef.current);
+        }
+        caretRef.current = null;
+    });
+    const emit = useCallback((code, nationalDigits) => {
+        const dialCode = countryMap.get(code)?.dialCode ?? "";
+        onChange?.(nationalDigits ? `+${dialCode}${nationalDigits}` : "");
+    }, [countryMap, onChange]);
+    const handleNationalChange = useCallback((event) => {
+        const el = event.target;
+        const caret = el.selectionStart ?? el.value.length;
+        const digitsBeforeCaret = digitsOf(el.value.slice(0, caret)).length;
+        const nextDigits = digitsOf(el.value).slice(0, maxDigits);
+        caretRef.current = caretForDigitIndex(formatNational(nextDigits, country.format), digitsBeforeCaret);
+        setNational(nextDigits);
+        emit(countryCode, nextDigits);
+    }, [country.format, maxDigits, countryCode, emit]);
+    const handleSelectCountry = useCallback((code) => {
+        const next = countryMap.get(code);
+        if (!next) {
+            return;
+        }
+        const clamped = national.slice(0, maxNationalDigits(next));
+        setCountryCode(code);
+        setNational(clamped);
+        emit(code, clamped);
+        focusInputOnCloseRef.current = true;
+        setOpen(false);
+    }, [national, countryMap, emit]);
+    return (_jsxs("div", { "data-slot": "phone-input", role: "group", "aria-label": ariaLabel ?? label, "aria-labelledby": ariaLabelledby, "aria-disabled": disabled || undefined, "data-invalid": invalid || undefined, className: cn("flex h-10 w-full items-center rounded-lg border border-border bg-surface-inset text-fg", "transition-[border-color,box-shadow] duration-150 ease-[var(--ease-out-quart)] motion-reduce:transition-none", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-surface-base", invalid && "border-error focus-within:ring-error focus-within:ring-offset-surface-base", disabled && "opacity-50", className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-label": `${countryLabel}. ${country.name}, +${country.dialCode}`, disabled: disabled, "data-slot": "phone-input-country", className: cn("flex h-full shrink-0 items-center gap-1.5 rounded-l-lg pr-2 pl-3 text-sm outline-none", "text-fg-secondary transition-colors duration-150 ease-[var(--ease-out-quart)] motion-reduce:transition-none", "hover:bg-surface-overlay focus-visible:bg-surface-overlay disabled:pointer-events-none"), children: [_jsx("span", { "aria-hidden": "true", className: "text-base leading-none", children: country.flag }), _jsxs("span", { className: "tabular-nums", children: ["+", country.dialCode] }), _jsx(ChevronDown, { "aria-hidden": "true", "data-open": open || undefined, className: "size-3.5 text-fg-tertiary transition-transform duration-200 ease-[var(--ease-out-quart)] data-[open]:rotate-180 motion-reduce:transition-none" })] }) }), _jsx(PopoverContent, { align: "start", sideOffset: 8, "data-slot": "phone-input-content", onCloseAutoFocus: (event) => {
+                            if (focusInputOnCloseRef.current) {
+                                event.preventDefault();
+                                focusInputOnCloseRef.current = false;
+                                inputRef.current?.focus();
+                            }
+                        }, className: cn("w-[280px] p-0", contentClassName), children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: searchPlaceholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyText }), countries.map((item) => {
+                                            const isSelected = item.code === countryCode;
+                                            return (_jsxs(CommandItem, { value: `${item.name} +${item.dialCode} ${item.code}`, onSelect: () => handleSelectCountry(item.code), children: [_jsx("span", { "aria-hidden": "true", className: "text-base leading-none", children: item.flag }), _jsx("span", { className: "flex-1 truncate", children: item.name }), _jsxs("span", { className: "shrink-0 text-fg-tertiary tabular-nums", children: ["+", item.dialCode] }), _jsx(Check, { "aria-hidden": "true", className: cn("size-4 shrink-0 text-primary", isSelected ? "opacity-100" : "opacity-0") }), isSelected ? _jsx("span", { className: "sr-only", children: ", selected" }) : null] }, item.code));
+                                        })] })] }) })] }), _jsx("span", { "aria-hidden": "true", className: "h-5 w-px shrink-0 bg-border" }), _jsx("input", { ref: setRef, id: id, type: "tel", inputMode: "tel", autoComplete: autoComplete, disabled: disabled, "aria-label": ariaLabelledby ? undefined : (ariaLabel ?? label), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-invalid": invalid || undefined, "data-slot": "phone-input-field", placeholder: placeholder ?? maskFromFormat(country.format), value: formattedValue, onChange: handleNationalChange, className: cn("h-full min-w-0 flex-1 bg-transparent px-3 text-sm text-fg outline-none", "placeholder:text-fg-tertiary disabled:pointer-events-none", "selection:bg-primary selection:text-primary-foreground"), ...props }), name ? _jsx("input", { type: "hidden", name: name, value: e164 }) : null] }));
+});
+PhoneInput.displayName = "PhoneInput";
+//# sourceMappingURL=phone-input.js.map

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

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "react";
+import { type ChartSeries } from "./chart.js";
+export interface PieChartItem {
+    key: string;
+    value: number;
+}
+export interface PieChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: PieChartItem[];
+    series: ChartSeries[];
+}
+export declare function PieChart({ data, series, className, ...props }: PieChartProps): import("react").JSX.Element;
+//# sourceMappingURL=pie-chart.d.ts.map

package/dist/components/pie-chart.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cell, Pie, PieChart as RechartsPieChart } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, chartSeriesConfig, } from "./chart.js";
+export function PieChart({ data, series, className, ...props }) {
+    const config = chartSeriesConfig(series);
+    const rows = data.map((item) => ({
+        ...item,
+        fill: `var(--color-${item.key})`,
+    }));
+    return (_jsx("div", { "data-slot": "pie-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: config, className: "h-full w-full", children: _jsxs(RechartsPieChart, { accessibilityLayer: true, children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(Pie, { data: rows, dataKey: "value", nameKey: "key", strokeWidth: 0, children: rows.map((item) => (_jsx(Cell, { fill: item.fill }, item.key))) })] }) }) }));
+}
+//# sourceMappingURL=pie-chart.js.map

package/dist/components/pill-nav.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type ReactNode, type Ref } from "react";
+export interface PillNavItem {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface PillNavProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    ref?: Ref<HTMLElement>;
+    items: PillNavItem[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial selected value when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+/**
+ * A compact navigation row whose active item is marked by a sliding pill.
+ * Keyboard: Left/Right (and Up/Down) move selection; Home/End jump. The
+ * sliding thumb is decorative — selection is exposed as `aria-current`.
+ */
+export declare function PillNav({ ref, className, items, value, defaultValue, onValueChange, ...props }: PillNavProps): import("react").JSX.Element;
+export declare namespace PillNav {
+    var displayName: string;
+}
+//# sourceMappingURL=pill-nav.d.ts.map

package/dist/components/pill-nav.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { useId, useState, } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A compact navigation row whose active item is marked by a sliding pill.
+ * Keyboard: Left/Right (and Up/Down) move selection; Home/End jump. The
+ * sliding thumb is decorative — selection is exposed as `aria-current`.
+ */
+export function PillNav({ ref, className, items, value, defaultValue, onValueChange, ...props }) {
+    const reduce = !!useReducedMotion();
+    const layoutId = useId();
+    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);
+    };
+    const move = (from, direction) => {
+        if (enabled.length === 0)
+            return;
+        const index = enabled.findIndex((item) => item.value === from);
+        const current = index === -1 ? 0 : index;
+        const last = enabled.length - 1;
+        const nextIndex = direction === "first"
+            ? 0
+            : direction === "last"
+                ? last
+                : direction === "next"
+                    ? Math.min(last, current + 1)
+                    : Math.max(0, current - 1);
+        const next = enabled[nextIndex];
+        if (next)
+            select(next.value);
+    };
+    const onKeyDown = (event, current) => {
+        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+            event.preventDefault();
+            move(current, "next");
+        }
+        else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+            event.preventDefault();
+            move(current, "prev");
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            move(current, "first");
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            move(current, "last");
+        }
+    };
+    return (_jsx("nav", { ref: ref, "data-slot": "pill-nav", 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", "data-slot": "pill-nav-item", disabled: item.disabled, "aria-current": isActive ? "page" : undefined, tabIndex: isActive ? 0 : -1, className: cn("relative z-0 rounded-full px-3.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 && "text-fg"), onClick: () => select(item.value), onKeyDown: (event) => onKeyDown(event, item.value), children: [isActive ? (_jsx(motion.span, { layoutId: reduce ? undefined : layoutId, "aria-hidden": "true", className: "absolute inset-0 -z-10 rounded-full bg-surface-floating shadow-xs", transition: reduce ? { duration: 0 } : { type: "spring", bounce: 0.15, duration: 0.4 } })) : null, item.label] }, item.value));
+        }) }));
+}
+PillNav.displayName = "PillNav";
+//# sourceMappingURL=pill-nav.js.map

package/dist/components/popover.d.ts

@@ -0,0 +1,7 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type ComponentProps } from "react";
+export declare function Popover({ modal, ...props }: ComponentProps<typeof PopoverPrimitive.Root>): import("react").JSX.Element;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/popover.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+export function Popover({ modal = false, ...props }) {
+    return _jsx(PopoverPrimitive.Root, { modal: modal, ...props });
+}
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+export const PopoverContent = forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("z-50 w-72 rounded-lg border border-border bg-surface-floating p-3 text-fg shadow-lg outline-none 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 }) }));
+});
+PopoverContent.displayName = "PopoverContent";
+//# sourceMappingURL=popover.js.map

package/dist/components/profit-loss-chart.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface ProfitLossPoint {
+    month: string;
+    pnl: number;
+}
+export interface ProfitLossChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: ProfitLossPoint[];
+}
+export declare function ProfitLossChart({ data, className, ...props }: ProfitLossChartProps): import("react").JSX.Element;
+//# sourceMappingURL=profit-loss-chart.d.ts.map

package/dist/components/profit-loss-chart.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CartesianGrid, Line, LineChart, ReferenceLine, XAxis } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartCursor, ChartTooltip, ChartTooltipContent } from "./chart.js";
+export function ProfitLossChart({ data, className, ...props }) {
+    return (_jsx("div", { "data-slot": "profit-loss-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: { pnl: { label: "P/L", color: "var(--cronus-success)" } }, className: "h-full w-full", children: _jsxs(LineChart, { accessibilityLayer: true, data: data, margin: { left: 8, right: 8, top: 8 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "4 4" }), _jsx(ReferenceLine, { y: 0, stroke: "var(--cronus-border)" }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 12 }), _jsx(ChartTooltip, { cursor: _jsx(ChartCursor, { labelKey: "month" }), content: _jsx(ChartTooltipContent, {}) }), _jsx(Line, { type: "monotone", dataKey: "pnl", stroke: "var(--cronus-success)", strokeWidth: 2, dot: false })] }) }) }));
+}
+//# sourceMappingURL=profit-loss-chart.js.map

package/dist/components/progress.d.ts

@@ -0,0 +1,10 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+/**
+ * A determinate/indeterminate progress bar. The Radix Root is the
+ * `role="progressbar"` element, so `aria-label`/`aria-labelledby` (and any
+ * other prop) spread straight onto it — always pass one describing what the
+ * bar measures (e.g. "Upload progress") so the progressbar has an accessible
+ * name and satisfies `aria-progressbar-name` (WCAG 4.1.2).
+ */
+export declare const Progress: import("react").ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=progress.d.ts.map