@cronus-ui/ui 0.6.0

package/dist/components/aspect-ratio.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * Constrains its content to a fixed width-to-height ratio using the native
+ * CSS `aspect-ratio` property (no JavaScript measurement, no dependency).
+ * The wrapper fills the available width; children should stretch to fill it
+ * (e.g. an `<img className="h-full w-full object-cover" />`).
+ */
+export const AspectRatio = forwardRef(({ ratio = 16 / 9, className, style, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "aspect-ratio", className: cn("relative w-full", className), style: { aspectRatio: ratio, ...style }, ...props }));
+});
+AspectRatio.displayName = "AspectRatio";
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/components/aurora-background.d.ts

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

package/dist/components/aurora-background.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const AuroraBackground = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, "data-slot": "aurora-background", className: cn("relative overflow-hidden", className), ...props, children: [_jsxs("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 -z-10", children: [_jsx("div", { className: "absolute -top-1/3 left-1/4 size-2/3 rounded-full bg-gradient-aurora opacity-30 blur-3xl animate-aurora" }), _jsx("div", { className: "absolute -bottom-1/3 right-1/4 size-2/3 rounded-full bg-gradient-aurora opacity-30 blur-3xl animate-aurora [animation-delay:-6s]" }), _jsx("div", { className: "absolute top-1/4 left-1/2 size-1/2 -translate-x-1/2 rounded-full bg-gradient-aurora opacity-20 blur-3xl animate-aurora [animation-delay:-12s]" })] }), _jsx("div", { className: "relative", children: children })] }));
+});
+AuroraBackground.displayName = "AuroraBackground";
+//# sourceMappingURL=aurora-background.js.map

package/dist/components/autocomplete.d.ts

@@ -0,0 +1,55 @@
+import { type InputHTMLAttributes } from "react";
+export interface AutocompleteOption {
+    /** Stable, unique value used for selection and highlighting. */
+    value: string;
+    /** Human-readable text rendered in the list. Defaults to `value`. */
+    label?: string;
+    /** Disable selecting this single suggestion. */
+    disabled?: boolean;
+}
+export interface AutocompleteProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "onSelect" | "role"> {
+    /**
+     * Static suggestions. When omitted, provide `onSearch` to fetch suggestions
+     * for the current query asynchronously.
+     */
+    options?: AutocompleteOption[];
+    /**
+     * Async resolver invoked (debounced) with the current query. Return the
+     * suggestions to render. Use together with `loading` for the busy state, or
+     * let the component manage `loading` automatically when `options` is omitted.
+     */
+    onSearch?: (query: string) => Promise<AutocompleteOption[]>;
+    /** Controlled free-text value. Pair with `onValueChange`. */
+    value?: string;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called with the new free-text value on every keystroke or selection. */
+    onValueChange?: (value: string) => void;
+    /** Called when a suggestion is committed (click / Enter on a highlight). */
+    onSelect?: (option: AutocompleteOption) => void;
+    /** Placeholder for the text input. */
+    placeholder?: string;
+    /** Message rendered when there are no suggestions for the query. */
+    emptyText?: string;
+    /**
+     * Forces the busy state (spinner + skeletons). When `onSearch` is provided
+     * and this is left undefined, the component tracks pending searches itself.
+     */
+    loading?: boolean;
+    /** Debounce, in ms, before `onSearch` fires or local filtering re-runs. */
+    debounceMs?: number;
+    /**
+     * When true (default), the committed value can be free text that is not in
+     * the suggestion list. When false, blurring or Enter with non-matching text
+     * reverts to the last valid value.
+     */
+    allowCustomValue?: boolean;
+    /** Disable the whole control. */
+    disabled?: boolean;
+    /** Extra classes for the popover content. */
+    contentClassName?: string;
+    /** Number of skeleton rows to show while loading. */
+    loadingSkeletonRows?: number;
+}
+export declare const Autocomplete: import("react").ForwardRefExoticComponent<AutocompleteProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/components/autocomplete.js

@@ -0,0 +1,279 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from "cmdk";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { CommandEmpty, CommandItem, CommandList } from "./command.js";
+import { Popover, PopoverAnchor, PopoverContent } from "./popover.js";
+import { Skeleton } from "./skeleton.js";
+import { Spinner } from "./spinner.js";
+const SKELETON_WIDTHS = ["w-3/4", "w-1/2", "w-5/6", "w-2/3"];
+function optionLabel(option) {
+    return option.label ?? option.value;
+}
+// cmdk indexes/filters/highlights by `value`; identical labels would collide, so
+// we feed it a value that is unique per option while still surfacing the label
+// (we own filtering via shouldFilter={false}, so the composite is never matched
+// against the query). The trailing value keeps duplicates distinct.
+function optionCmdkValue(option) {
+    return `${optionLabel(option)} ${option.value}`;
+}
+function defaultLocalFilter(options, query) {
+    if (query.trim() === "")
+        return options;
+    const needle = query.toLowerCase();
+    return options.filter((option) => optionLabel(option).toLowerCase().includes(needle));
+}
+export const Autocomplete = forwardRef(({ options, onSearch, value: valueProp, defaultValue, onValueChange, onSelect, placeholder = "Type to search…", emptyText = "No results found.", loading: loadingProp, debounceMs = 200, allowCustomValue = true, disabled = false, className, contentClassName, loadingSkeletonRows = 3, onKeyDown, onBlur, onFocus, id: idProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...inputProps }, forwardedRef) => {
+    // --- Controlled / uncontrolled free-text value ---------------------------
+    const isControlled = valueProp !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+    const value = isControlled ? valueProp : uncontrolledValue;
+    const [open, setOpen] = useState(false);
+    // Highlighted suggestion (drives cmdk + aria-activedescendant).
+    const [highlighted, setHighlighted] = useState("");
+    // Async results + internally tracked loading state.
+    const [asyncOptions, setAsyncOptions] = useState([]);
+    const [internalLoading, setInternalLoading] = useState(false);
+    // Real ids read back from the cmdk DOM. cmdk overwrites any id we set on the
+    // list/items with its own useId, so we must reference its generated ids to
+    // keep aria-controls / aria-activedescendant pointing at nodes that exist.
+    const [listboxId, setListboxId] = useState();
+    const [activeDescendant, setActiveDescendant] = useState();
+    const reactId = useId();
+    const id = idProp ?? `${reactId}-autocomplete`;
+    // Expose the underlying input while keeping a local handle for focus mgmt.
+    const inputRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => inputRef.current, []);
+    // The cmdk root, used to forward navigation keys into its roving listbox.
+    const commandRef = useRef(null);
+    // Last value that matched a real suggestion, for allowCustomValue=false revert.
+    // Seeded with the initial value; kept in sync below so a controlled value that
+    // changes after the first render does not leave a stale revert target.
+    const lastValidValue = useRef(value);
+    // Guards a blur that is the result of clicking an option inside the popover.
+    const selectingRef = useRef(false);
+    const isAsync = onSearch !== undefined;
+    const loading = loadingProp ?? (isAsync ? internalLoading : false);
+    const setValue = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    }, [isControlled, onValueChange]);
+    // --- Suggestion source ----------------------------------------------------
+    // For static options we filter locally; for async we use resolver output.
+    const localOptions = useMemo(() => (isAsync ? asyncOptions : defaultLocalFilter(options ?? [], value)), [isAsync, asyncOptions, options, value]);
+    // Debounced async search. Stale responses are dropped via a request token.
+    const requestToken = useRef(0);
+    useEffect(() => {
+        if (!isAsync || !open) {
+            // Closing (or leaving async mode) invalidates any in-flight request so a
+            // late-resolving promise cannot write stale results, and drops the old
+            // suggestions/loading so reopening never flashes a previous query.
+            requestToken.current++;
+            setAsyncOptions([]);
+            setInternalLoading(false);
+            return;
+        }
+        const token = ++requestToken.current;
+        setInternalLoading(true);
+        const handle = setTimeout(() => {
+            onSearch(value)
+                .then((result) => {
+                if (token !== requestToken.current)
+                    return;
+                setAsyncOptions(result);
+            })
+                .catch(() => {
+                if (token !== requestToken.current)
+                    return;
+                setAsyncOptions([]);
+            })
+                .finally(() => {
+                if (token !== requestToken.current)
+                    return;
+                setInternalLoading(false);
+            });
+        }, debounceMs);
+        return () => clearTimeout(handle);
+    }, [isAsync, open, value, debounceMs, onSearch]);
+    // Track the latest value that maps to a concrete suggestion.
+    useEffect(() => {
+        if (localOptions.some((option) => optionLabel(option) === value)) {
+            lastValidValue.current = value;
+        }
+    }, [localOptions, value]);
+    const commitSelection = useCallback((option) => {
+        if (option.disabled)
+            return;
+        const label = optionLabel(option);
+        setValue(label);
+        lastValidValue.current = label;
+        onSelect?.(option);
+        setOpen(false);
+        setHighlighted("");
+        // Return focus to the text input after committing.
+        requestAnimationFrame(() => inputRef.current?.focus());
+    }, [setValue, onSelect]);
+    const handleInputChange = useCallback((event) => {
+        const next = event.target.value;
+        setValue(next);
+        // Reopen on type-ahead; close only when the field is fully cleared.
+        setOpen(next.length > 0);
+    }, [setValue]);
+    // Forward navigation keys to cmdk so it manages roving focus + highlight.
+    const forwardToCommand = useCallback((event) => {
+        const node = commandRef.current;
+        if (!node)
+            return;
+        node.dispatchEvent(new KeyboardEvent("keydown", {
+            key: event.key,
+            code: event.code,
+            bubbles: true,
+            cancelable: true,
+        }));
+    }, []);
+    const handleKeyDown = useCallback((event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled)
+            return;
+        switch (event.key) {
+            case "ArrowDown":
+            case "ArrowUp": {
+                event.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                    return;
+                }
+                forwardToCommand(event);
+                return;
+            }
+            case "Home":
+            case "End": {
+                if (!open)
+                    return;
+                event.preventDefault();
+                forwardToCommand(event);
+                return;
+            }
+            case "Enter": {
+                if (!open)
+                    return;
+                const active = localOptions.find((option) => optionCmdkValue(option) === highlighted);
+                if (active && !active.disabled) {
+                    event.preventDefault();
+                    commitSelection(active);
+                }
+                else if (!allowCustomValue) {
+                    event.preventDefault();
+                    setValue(lastValidValue.current);
+                    setOpen(false);
+                }
+                else {
+                    // Free text: accept current input and dismiss suggestions.
+                    setOpen(false);
+                }
+                return;
+            }
+            case "Escape": {
+                if (open) {
+                    event.preventDefault();
+                    setOpen(false);
+                    setHighlighted("");
+                }
+                return;
+            }
+            default:
+                return;
+        }
+    }, [
+        onKeyDown,
+        disabled,
+        open,
+        localOptions,
+        highlighted,
+        allowCustomValue,
+        commitSelection,
+        forwardToCommand,
+        setValue,
+    ]);
+    const handleBlur = useCallback((event) => {
+        onBlur?.(event);
+        // Ignore blur caused by interacting with the suggestion list.
+        if (selectingRef.current) {
+            selectingRef.current = false;
+            return;
+        }
+        setOpen(false);
+        setHighlighted("");
+        if (!allowCustomValue && !localOptions.some((o) => optionLabel(o) === value)) {
+            setValue(lastValidValue.current);
+        }
+    }, [onBlur, allowCustomValue, localOptions, value, setValue]);
+    const handleFocus = useCallback((event) => {
+        onFocus?.(event);
+        if (value.length > 0)
+            setOpen(true);
+    }, [onFocus, value]);
+    // Resolve the real cmdk-generated ids from the DOM after each render that can
+    // change the list or the highlight. cmdk marks the active item with
+    // aria-selected="true" and assigns its own ids, so reading them here keeps
+    // aria-controls / aria-activedescendant referencing nodes that truly exist.
+    useEffect(() => {
+        if (!open) {
+            setListboxId(undefined);
+            setActiveDescendant(undefined);
+            return;
+        }
+        const root = commandRef.current;
+        const list = root?.querySelector("[cmdk-list]");
+        setListboxId(list?.id || undefined);
+        // While loading we render skeletons (no items) and an empty list has nothing
+        // highlightable. `highlighted` is cmdk's roving value — re-resolve whenever
+        // it or the rendered list changes so the id reflects the node cmdk marks.
+        const active = loading || !highlighted || localOptions.length === 0
+            ? null
+            : root?.querySelector('[cmdk-item][aria-selected="true"]');
+        setActiveDescendant(active?.id || undefined);
+    }, [open, highlighted, localOptions, loading]);
+    const showEmpty = !loading && localOptions.length === 0;
+    return (_jsxs(Popover, { open: open && !disabled, onOpenChange: setOpen, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { "data-slot": "autocomplete", className: "relative w-full", children: [_jsx("input", { ref: inputRef, id: id, type: "text", role: "combobox", autoComplete: "off", autoCorrect: "off", autoCapitalize: "none", spellCheck: false, "aria-autocomplete": "list", "aria-expanded": open && !disabled, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": activeDescendant, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-slot": "autocomplete-input", disabled: disabled, placeholder: placeholder, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: handleFocus, className: cn("flex h-10 w-full rounded-lg border border-border bg-surface-inset px-3 text-sm text-fg", "placeholder:text-fg-tertiary", "transition-[border-color,box-shadow] duration-150 ease-[var(--ease-out-quart)]", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", "disabled:opacity-50 disabled:pointer-events-none", "selection:bg-primary selection:text-primary-foreground", 
+                            // Reserve room for the trailing spinner while loading.
+                            loading && "pr-9", className), ...inputProps }), loading ? (_jsx("span", { "data-slot": "autocomplete-spinner", className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-fg-tertiary", children: _jsx(Spinner, { size: "sm", "aria-label": "Loading suggestions" }) })) : null] }) }), _jsx(PopoverContent, { align: "start", "data-slot": "autocomplete-content", 
+                // Keep focus on the text input so type-ahead never breaks.
+                onOpenAutoFocus: (event) => event.preventDefault(), onCloseAutoFocus: (event) => event.preventDefault(), 
+                // A pointerdown inside the list must not blur-commit before onSelect.
+                onPointerDownOutside: (event) => {
+                    if (inputRef.current?.contains(event.target))
+                        event.preventDefault();
+                }, className: cn("w-[var(--radix-popover-trigger-width)] min-w-[8rem] p-0", contentClassName), children: _jsx(CommandPrimitive, { ref: commandRef, 
+                    // We own filtering (local includes-match or async results).
+                    shouldFilter: false, 
+                    // cmdk owns roving highlight; mirror it for aria-activedescendant.
+                    value: highlighted, onValueChange: setHighlighted, "data-slot": "autocomplete-command", className: "flex h-full w-full flex-col overflow-hidden rounded-lg bg-surface-floating text-fg", children: _jsxs(CommandList
+                    // cmdk sets role="listbox" and its own id; the accessible name must
+                    // go through its `label` prop (it overrides any aria-label we pass).
+                    , { 
+                        // cmdk sets role="listbox" and its own id; the accessible name must
+                        // go through its `label` prop (it overrides any aria-label we pass).
+                        label: ariaLabel ?? "Suggestions", 
+                        // Block the blur-revert when a pointer lands on the list.
+                        onMouseDown: (event) => {
+                            selectingRef.current = true;
+                            event.preventDefault();
+                        }, children: [loading ? (_jsx("div", { "data-slot": "autocomplete-loading", className: "space-y-1.5 p-2", "aria-hidden": "true", children: Array.from({ length: Math.max(1, loadingSkeletonRows) }).map((_, index) => (_jsx(Skeleton
+                                // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length placeholder rows
+                                , { className: cn("h-7", SKELETON_WIDTHS[index % SKELETON_WIDTHS.length]) }, index))) })) : null, showEmpty ? _jsx(CommandEmpty, { children: emptyText }) : null, !loading
+                                ? localOptions.map((option) => {
+                                    const label = optionLabel(option);
+                                    return (_jsx(CommandItem, { 
+                                        // cmdk overwrites any id we set with its own; we read the
+                                        // generated id back from the DOM for aria-activedescendant.
+                                        // Use a value unique per option so duplicate labels do not
+                                        // collide in cmdk's index/highlight.
+                                        value: optionCmdkValue(option), disabled: option.disabled, onSelect: () => commitSelection(option), children: _jsx("span", { className: "truncate", children: label }) }, option.value));
+                                })
+                                : null] }) }) })] }));
+});
+Autocomplete.displayName = "Autocomplete";
+//# sourceMappingURL=autocomplete.js.map

package/dist/components/avatar-group.d.ts

@@ -0,0 +1,39 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes, type ReactNode } from "react";
+declare const avatarGroupItemVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const avatarGroupOverflowVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AvatarGroupAvatar {
+    /** Image source for the avatar. */
+    src?: string;
+    /** Alt text for the image; also used as the fallback's accessible context. */
+    alt?: string;
+    /** Text shown when the image is missing or still loading (e.g. initials). */
+    fallback: ReactNode;
+}
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarGroupItemVariants> {
+    /**
+     * Avatars to stack. Compose `<Avatar>` children, or pass `avatars` for the
+     * data-driven shorthand. `avatars` takes precedence when both are provided.
+     */
+    avatars?: AvatarGroupAvatar[];
+    /** Show the first `max` avatars, then a "+N" overflow chip for the rest. */
+    max?: number;
+    /**
+     * Horizontal overlap between avatars as a Tailwind negative-margin class
+     * (e.g. `-space-x-2`). Defaults to a tasteful offset.
+     */
+    spacing?: string;
+}
+/**
+ * Overlapping stack of avatars with an optional "+N" overflow chip — for teams
+ * or social proof ("loved by 9,000+"). The `size` prop drives both the avatars
+ * and the chip, overriding any size set on individual children for a uniform
+ * row.
+ */
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export { avatarGroupItemVariants, avatarGroupOverflowVariants };
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/components/avatar-group.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Children, cloneElement, forwardRef, isValidElement, } from "react";
+import { cn } from "../lib/cn.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+const avatarGroupItemVariants = cva(
+// A ring in the surface color makes overlapping avatars read as a stack.
+"ring-2 ring-surface-base", {
+    variants: {
+        size: {
+            sm: "size-7",
+            md: "size-9",
+            lg: "size-11",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+const avatarGroupOverflowVariants = cva("relative flex shrink-0 items-center justify-center rounded-full bg-surface-overlay font-medium text-fg-secondary ring-2 ring-surface-base", {
+    variants: {
+        size: {
+            sm: "size-7 text-xs",
+            md: "size-9 text-sm",
+            lg: "size-11 text-base",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+/**
+ * Overlapping stack of avatars with an optional "+N" overflow chip — for teams
+ * or social proof ("loved by 9,000+"). The `size` prop drives both the avatars
+ * and the chip, overriding any size set on individual children for a uniform
+ * row.
+ */
+export const AvatarGroup = forwardRef(({ className, children, avatars, max, size, spacing = "-space-x-2", "aria-label": ariaLabel, ...props }, ref) => {
+    const items = avatars
+        ? avatars.map((avatar, index) => (_jsxs(Avatar, { children: [avatar.src ? _jsx(AvatarImage, { src: avatar.src, alt: avatar.alt }) : null, _jsx(AvatarFallback, { children: avatar.fallback })] }, index)))
+        : Children.toArray(children).filter(isValidElement);
+    const total = items.length;
+    const limit = max != null && max >= 0 && max < total ? max : total;
+    const visible = items.slice(0, limit);
+    const overflow = total - limit;
+    return (_jsxs("div", { ref: ref, "data-slot": "avatar-group", role: "group", "aria-label": ariaLabel ?? "Avatar group", className: cn("flex items-center", spacing, className), ...props, children: [visible.map((child, index) => cloneElement(child, {
+                // Overlap order: each avatar sits above the one before it.
+                style: { zIndex: index, ...child.props.style },
+                className: cn(avatarGroupItemVariants({ size }), child.props.className),
+            })), overflow > 0 ? (_jsxs("span", { "data-slot": "avatar-group-overflow", role: "img", "aria-label": `${overflow} more`, style: { zIndex: visible.length }, className: avatarGroupOverflowVariants({ size }), children: ["+", overflow] })) : null] }));
+});
+AvatarGroup.displayName = "AvatarGroup";
+export { avatarGroupItemVariants, avatarGroupOverflowVariants };
+//# sourceMappingURL=avatar-group.js.map

package/dist/components/avatar.d.ts

@@ -0,0 +1,5 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const AvatarImage: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+export declare const AvatarFallback: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Avatar = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(AvatarPrimitive.Root, { ref: ref, "data-slot": "avatar", className: cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className), ...props }));
+});
+Avatar.displayName = "Avatar";
+export const AvatarImage = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(AvatarPrimitive.Image, { ref: ref, "data-slot": "avatar-image", className: cn("aspect-square size-full object-cover", className), ...props }));
+});
+AvatarImage.displayName = "AvatarImage";
+export const AvatarFallback = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(AvatarPrimitive.Fallback, { ref: ref, "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-surface-overlay text-sm font-medium text-fg-secondary", className), ...props }));
+});
+AvatarFallback.displayName = "AvatarFallback";
+//# sourceMappingURL=avatar.js.map

package/dist/components/badge.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes } from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "info" | "success" | "warning" | "destructive" | "primary" | "secondary" | "outline" | "error" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export { badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+const badgeVariants = cva("inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap [&_svg]:size-3", {
+    variants: {
+        variant: {
+            default: "bg-surface-overlay text-fg border-border",
+            // Solid fill (not a 15% tint) so the label clears WCAG AA on every
+            // theme/mode: same-hue text on a pale primary tint reads <4.5:1 in the
+            // bright-accent light themes, whereas primary-foreground on solid primary
+            // is >=5:1 everywhere.
+            primary: "bg-primary text-primary-foreground border-transparent",
+            secondary: "bg-surface-overlay text-fg-secondary border-border",
+            outline: "text-fg border-border",
+            // Same-hue text on a 15% tint reads <4.5:1 in several themes, so the
+            // label uses the AA-tuned `*-strong` text variant (the tint stays the raw
+            // fill). See @cronus-ui/tokens CONTRACT.md.
+            success: "bg-success/15 text-success-strong border-transparent",
+            warning: "bg-warning/15 text-warning-strong border-transparent",
+            destructive: "bg-error/15 text-error-strong border-transparent",
+            // `error` is a deprecated alias of `destructive`; kept for backward
+            // compatibility. Prefer `destructive` to match Button/Alert.
+            error: "bg-error/15 text-error-strong border-transparent",
+            info: "bg-info/15 text-info-strong border-transparent",
+        },
+    },
+    defaultVariants: { variant: "default" },
+});
+export const Badge = forwardRef(({ className, variant, ...props }, ref) => {
+    return (_jsx("span", { ref: ref, "data-slot": "badge", "data-variant": variant ?? "default", className: cn(badgeVariants({ variant }), className), ...props }));
+});
+Badge.displayName = "Badge";
+export { badgeVariants };
+//# sourceMappingURL=badge.js.map

package/dist/components/banner.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from "class-variance-authority";
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * Dismissible announcement / promo bar — a full-width horizontal strip pinned
+ * to the top of a page or section (the "Top Banner" of a billing SDK). Renders
+ * an optional leading icon, the message (a `title` + optional `description`, or
+ * free-form `children`), an optional right-aligned `action` (a CTA Button or
+ * link), and — when `dismissible` — a trailing close button.
+ *
+ * Colour strategy mirrors {@link Alert}: semantic variants tint the surface
+ * wash + border + icon while the body text stays on `fg`/`fg-secondary` (which
+ * meet AA against every surface), so contrast is safe across themes/modes
+ * without low-chroma coloured body text. The `brand` variant is the exception:
+ * it's a solid `bg-primary` promo fill carrying `primary-foreground` text, and
+ * everything inside (icon, action, close) inherits that foreground.
+ */
+declare const bannerVariants: (props?: ({
+    variant?: "default" | "info" | "success" | "warning" | "error" | "brand" | null | undefined;
+    align?: "center" | "start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BannerProps extends Omit<HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof bannerVariants> {
+    /** Headline text. Pair with `description`, or omit and pass `children`. */
+    title?: ReactNode;
+    /** Optional secondary line shown after the title. */
+    description?: ReactNode;
+    /** Leading glyph rendered before the message (e.g. a lucide icon). */
+    icon?: ReactNode;
+    /** Right-aligned call to action (a {@link Button}, link, etc.). */
+    action?: ReactNode;
+    /** Render a trailing close button. Defaults to `true`. */
+    dismissible?: boolean;
+    /** Fired after the banner is dismissed (controlled or not). */
+    onDismiss?: () => void;
+    /** Controlled visibility. When provided, the component is fully controlled. */
+    open?: boolean;
+    /** Initial visibility for the uncontrolled case. Defaults to `true`. */
+    defaultOpen?: boolean;
+    /** Accessible label for the announcement region. Defaults to "Announcement". */
+    label?: string;
+    /** Free-form message body, used when `title`/`description` are not supplied. */
+    children?: ReactNode;
+}
+export declare const Banner: import("react").ForwardRefExoticComponent<BannerProps & import("react").RefAttributes<HTMLElement>>;
+export { bannerVariants };
+//# sourceMappingURL=banner.d.ts.map