@raydenui/ui 0.9.7 → 0.10.0

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, createContext, useCallback, useEffect, useLayoutEffect, useContext, useMemo, useRef, useState, } from "react";
+import { cn } from "../../utils/cn.js";
+import { SharedLayout } from "../../motion/SharedLayout.js";
+import { useRaydenMotion } from "../../motion/MotionProvider.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const TabsContext = createContext(null);
+export function useTabsContext() {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error("Tab must be used within Tabs");
+    return ctx;
+}
+export function Tabs({ motion = false, variant = "line", size = "sm", orientation = "horizontal", value, defaultValue = "", onValueChange, children, className, }) {
+    const listRef = useRef(null);
+    const [indicator, setIndicator] = useState(null);
+    const { preset } = useRaydenMotion(motion);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const enabledValues = [];
+    function collect(nodes) {
+        Children.forEach(nodes, (node) => {
+            if (!isValidElement(node))
+                return;
+            if (typeof node.props.value === "string") {
+                if (!node.props.disabled)
+                    enabledValues.push(node.props.value);
+            }
+            else if (node.props.children)
+                collect(node.props.children);
+        });
+    }
+    collect(children);
+    const requestedValue = value ?? internalValue;
+    const activeValue = enabledValues.includes(requestedValue)
+        ? requestedValue
+        : (enabledValues[0] ?? "");
+    const tabsRef = useRef(new Map());
+    const onSelect = useCallback((val) => {
+        if (value === undefined)
+            setInternalValue(val);
+        onValueChange?.(val);
+    }, [value, onValueChange]);
+    const registerTab = useCallback((tabValue, element) => {
+        if (element) {
+            tabsRef.current.set(tabValue, element);
+        }
+        else {
+            tabsRef.current.delete(tabValue);
+        }
+    }, []);
+    const isVertical = orientation === "vertical";
+    const arrowNext = isVertical ? "ArrowDown" : "ArrowRight";
+    const arrowPrev = isVertical ? "ArrowUp" : "ArrowLeft";
+    useBrowserLayoutEffect(() => {
+        const list = listRef.current;
+        if (!motion || !list)
+            return;
+        const measure = () => {
+            const selected = Array.from(list.querySelectorAll('[role="tab"]')).find((tab) => tab.getAttribute("aria-selected") === "true");
+            if (!selected) {
+                setIndicator(null);
+                return;
+            }
+            const base = {
+                left: selected.offsetLeft,
+                top: selected.offsetTop,
+                width: selected.offsetWidth,
+                height: selected.offsetHeight,
+            };
+            if (variant === "line") {
+                if (isVertical) {
+                    base.left += base.width - 2;
+                    base.width = 2;
+                }
+                else {
+                    base.top += base.height - 2;
+                    base.height = 2;
+                }
+            }
+            setIndicator((previous) => previous &&
+                Object.keys(base).every((key) => base[key] === previous[key])
+                ? previous
+                : base);
+        };
+        measure();
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+        observer?.observe(list);
+        Array.from(list.children).forEach((child) => observer?.observe(child));
+        return () => observer?.disconnect();
+    }, [activeValue, motion, variant, size, isVertical, children]);
+    const handleKeyDown = (e) => {
+        const tabs = Array.from(tabsRef.current.entries())
+            .filter(([, el]) => !el.disabled)
+            .sort((a, b) => a[1].compareDocumentPosition(b[1]) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1)
+            .map(([val, el]) => ({ value: val, element: el }));
+        if (tabs.length === 0)
+            return;
+        const currentIndex = tabs.findIndex((t) => t.element === document.activeElement);
+        let nextIndex;
+        switch (e.key) {
+            case arrowNext:
+                e.preventDefault();
+                nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case arrowPrev:
+                e.preventDefault();
+                nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+                break;
+            case "Home":
+                e.preventDefault();
+                nextIndex = 0;
+                break;
+            case "End":
+                e.preventDefault();
+                nextIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        const nextTab = tabs[nextIndex];
+        if (nextTab) {
+            nextTab.element.focus();
+            onSelect(nextTab.value);
+        }
+    };
+    const contextValue = useMemo(() => ({ activeValue, onSelect, variant, size, orientation, registerTab, motion }), [activeValue, onSelect, variant, size, orientation, registerTab, motion]);
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs("div", { ref: listRef, "data-rayden-motion": motion ? preset : undefined, className: cn("inline-flex", motion && "relative isolate", isVertical ? "flex-col" : "", variant === "line" && !isVertical && "border-b border-grey-200", variant === "line" && isVertical && "border-r border-grey-200", variant === "pill" && (isVertical ? "gap-1" : "gap-1"), variant === "segmented" &&
+                "border border-grey-100 bg-grey-50 rounded-lg p-0.5 gap-0.5 overflow-hidden", className), role: "tablist", "aria-orientation": orientation, onKeyDown: handleKeyDown, children: [motion && indicator && (_jsx(SharedLayout, { "aria-hidden": "true", "data-rayden-tab-indicator": "", motion: motion, layoutKey: `${activeValue}:${indicator.left}:${indicator.top}:${indicator.width}:${indicator.height}`, className: cn("pointer-events-none absolute", variant === "line" ? "bg-primary-400" : "bg-primary-50", variant === "pill" && "rounded-full", variant === "segmented" && "rounded-md"), style: indicator })), children] }) }));
+}

package/dist/components/Tabs/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = exports.Tabs = void 0;
+var Tabs_1 = require("./Tabs.cjs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
+var Tab_1 = require("./Tab.cjs");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });

package/dist/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { Tabs } from "./Tabs.js";
+export { Tab } from "./Tab.js";

package/dist/components/Tooltip/Tooltip.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useControllableValue_1 = require("../../hooks/useControllableValue.cjs");
+const useDismissableLayer_1 = require("../../hooks/useDismissableLayer.cjs");
+const cn_1 = require("../../utils/cn.cjs");
+const useCollisionAwareSide_1 = require("../../hooks/useCollisionAwareSide.cjs");
+const useBrowserLayoutEffect = typeof window === "undefined" ? react_1.useEffect : react_1.useLayoutEffect;
+/** With children, provides a hover/focus tooltip (or a click popover for actions).
+ * Without children, retains the original standalone panel API. */
+exports.Tooltip = (0, react_1.forwardRef)(({ theme = "light", position = "top-left", placement, title, content, children, delay = 0, open: controlledOpen, defaultOpen = false, onOpenChange, onClose, primaryAction, secondaryAction, className, ...rest }, ref) => {
+    const id = (0, react_1.useId)();
+    const [open, changeOpen] = (0, useControllableValue_1.useControllableValue)(controlledOpen, defaultOpen, onOpenChange);
+    const timer = (0, react_1.useRef)(undefined);
+    const wrapper = (0, react_1.useRef)(null);
+    const panelRef = (0, react_1.useRef)(null);
+    const interactive = !!(onClose || primaryAction || secondaryAction);
+    const preferredSide = (placement ?? position.split("-")[0]);
+    // Fixed side classes put the panel off-screen at a viewport edge; flip when the
+    // preferred side does not fit.
+    const side = (0, useCollisionAwareSide_1.useCollisionAwareSide)(preferredSide, open, wrapper, panelRef);
+    const setOpen = (next) => {
+        clearTimeout(timer.current);
+        changeOpen(next);
+    };
+    const close = () => {
+        setOpen(false);
+        if (children && interactive)
+            wrapper.current?.querySelector("button, a[href], [tabindex]")?.focus();
+        onClose?.();
+    };
+    (0, react_1.useEffect)(() => () => clearTimeout(timer.current), []);
+    const hasPanel = !!children;
+    // Focus the panel only on the closed -> open transition, never on a rerender.
+    const wasOpen = (0, react_1.useRef)(false);
+    useBrowserLayoutEffect(() => {
+        if (open && !wasOpen.current && hasPanel && interactive) {
+            panelRef.current?.focus();
+        }
+        wasOpen.current = open;
+    }, [open, hasPanel, interactive]);
+    (0, useDismissableLayer_1.useDismissableLayer)({
+        open: open && hasPanel,
+        containerRef: wrapper,
+        onDismiss: (reason) => {
+            if (reason === "escape")
+                close();
+            else
+                setOpen(false);
+        },
+    });
+    const panel = ((0, jsx_runtime_1.jsxs)("div", { id: id, ref: panelRef, role: interactive ? "dialog" : "tooltip", "aria-label": interactive ? (title ?? "More information") : undefined, tabIndex: interactive ? -1 : undefined, className: (0, cn_1.cn)("flex max-w-[min(20rem,calc(100vw-2rem))] flex-col gap-4 rounded-lg border p-4 text-sm shadow-soft-sm", theme === "dark"
+            ? "bg-tooltip-dark text-tooltip-dark-text border-tooltip-dark"
+            : "bg-surface text-on-surface border-grey-200"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1 space-y-1", children: [title && (0, jsx_runtime_1.jsx)("p", { className: "font-semibold", children: title }), (0, jsx_runtime_1.jsx)("div", { children: content })] }), onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Close", onClick: close, className: "rounded px-1 focus-visible:outline-2 focus-visible:outline-current", children: "\u00D7" }))] }), (primaryAction || secondaryAction) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [secondaryAction && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "rounded font-semibold underline focus-visible:outline-2 focus-visible:outline-current", onClick: secondaryAction.onClick, children: secondaryAction.label })), primaryAction && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "rounded font-semibold underline focus-visible:outline-2 focus-visible:outline-current", onClick: primaryAction.onClick, children: primaryAction.label }))] }))] }));
+    const trigger = (0, react_1.isValidElement)(children)
+        ? (0, react_1.cloneElement)(children, {
+            ...(interactive
+                ? {
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": open,
+                    "aria-controls": open ? id : undefined,
+                }
+                : {
+                    "aria-describedby": [children.props["aria-describedby"], open ? id : undefined]
+                        .filter(Boolean)
+                        .join(" ") || undefined,
+                }),
+            onClick: (event) => {
+                children.props.onClick?.(event);
+                if (interactive && !event.defaultPrevented)
+                    setOpen(!open);
+            },
+        })
+        : children;
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rest, ref: (node) => {
+            wrapper.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, className: (0, cn_1.cn)("relative inline-flex", className), onMouseEnter: (event) => {
+            rest.onMouseEnter?.(event);
+            if (children && !interactive) {
+                clearTimeout(timer.current);
+                timer.current = setTimeout(() => setOpen(true), delay);
+            }
+        }, onMouseLeave: (event) => {
+            rest.onMouseLeave?.(event);
+            if (children && !interactive && !wrapper.current?.contains(document.activeElement))
+                setOpen(false);
+        }, onFocus: (event) => {
+            rest.onFocus?.(event);
+            if (children && !interactive)
+                setOpen(true);
+        }, children: [trigger, children
+                ? open && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("absolute z-50 w-max max-w-[calc(100vw-2rem)]", side === "top" && "bottom-full left-1/2 -translate-x-1/2 pb-2", side === "bottom" && "top-full left-1/2 -translate-x-1/2 pt-2", side === "left" && "right-full top-1/2 -translate-y-1/2 pr-2", side === "right" && "left-full top-1/2 -translate-y-1/2 pl-2"), children: panel }))
+                : panel] }));
+});
+exports.Tooltip.displayName = "Tooltip";

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement, useEffect, useId, useLayoutEffect, useRef, } from "react";
+import { useControllableValue } from "../../hooks/useControllableValue.js";
+import { useDismissableLayer } from "../../hooks/useDismissableLayer.js";
+import { cn } from "../../utils/cn.js";
+import { useCollisionAwareSide } from "../../hooks/useCollisionAwareSide.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** With children, provides a hover/focus tooltip (or a click popover for actions).
+ * Without children, retains the original standalone panel API. */
+export const Tooltip = forwardRef(({ theme = "light", position = "top-left", placement, title, content, children, delay = 0, open: controlledOpen, defaultOpen = false, onOpenChange, onClose, primaryAction, secondaryAction, className, ...rest }, ref) => {
+    const id = useId();
+    const [open, changeOpen] = useControllableValue(controlledOpen, defaultOpen, onOpenChange);
+    const timer = useRef(undefined);
+    const wrapper = useRef(null);
+    const panelRef = useRef(null);
+    const interactive = !!(onClose || primaryAction || secondaryAction);
+    const preferredSide = (placement ?? position.split("-")[0]);
+    // Fixed side classes put the panel off-screen at a viewport edge; flip when the
+    // preferred side does not fit.
+    const side = useCollisionAwareSide(preferredSide, open, wrapper, panelRef);
+    const setOpen = (next) => {
+        clearTimeout(timer.current);
+        changeOpen(next);
+    };
+    const close = () => {
+        setOpen(false);
+        if (children && interactive)
+            wrapper.current?.querySelector("button, a[href], [tabindex]")?.focus();
+        onClose?.();
+    };
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const hasPanel = !!children;
+    // Focus the panel only on the closed -> open transition, never on a rerender.
+    const wasOpen = useRef(false);
+    useBrowserLayoutEffect(() => {
+        if (open && !wasOpen.current && hasPanel && interactive) {
+            panelRef.current?.focus();
+        }
+        wasOpen.current = open;
+    }, [open, hasPanel, interactive]);
+    useDismissableLayer({
+        open: open && hasPanel,
+        containerRef: wrapper,
+        onDismiss: (reason) => {
+            if (reason === "escape")
+                close();
+            else
+                setOpen(false);
+        },
+    });
+    const panel = (_jsxs("div", { id: id, ref: panelRef, role: interactive ? "dialog" : "tooltip", "aria-label": interactive ? (title ?? "More information") : undefined, tabIndex: interactive ? -1 : undefined, className: cn("flex max-w-[min(20rem,calc(100vw-2rem))] flex-col gap-4 rounded-lg border p-4 text-sm shadow-soft-sm", theme === "dark"
+            ? "bg-tooltip-dark text-tooltip-dark-text border-tooltip-dark"
+            : "bg-surface text-on-surface border-grey-200"), children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [title && _jsx("p", { className: "font-semibold", children: title }), _jsx("div", { children: content })] }), onClose && (_jsx("button", { type: "button", "aria-label": "Close", onClick: close, className: "rounded px-1 focus-visible:outline-2 focus-visible:outline-current", children: "\u00D7" }))] }), (primaryAction || secondaryAction) && (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [secondaryAction && (_jsx("button", { type: "button", className: "rounded font-semibold underline focus-visible:outline-2 focus-visible:outline-current", onClick: secondaryAction.onClick, children: secondaryAction.label })), primaryAction && (_jsx("button", { type: "button", className: "rounded font-semibold underline focus-visible:outline-2 focus-visible:outline-current", onClick: primaryAction.onClick, children: primaryAction.label }))] }))] }));
+    const trigger = isValidElement(children)
+        ? cloneElement(children, {
+            ...(interactive
+                ? {
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": open,
+                    "aria-controls": open ? id : undefined,
+                }
+                : {
+                    "aria-describedby": [children.props["aria-describedby"], open ? id : undefined]
+                        .filter(Boolean)
+                        .join(" ") || undefined,
+                }),
+            onClick: (event) => {
+                children.props.onClick?.(event);
+                if (interactive && !event.defaultPrevented)
+                    setOpen(!open);
+            },
+        })
+        : children;
+    return (_jsxs("div", { ...rest, ref: (node) => {
+            wrapper.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, className: cn("relative inline-flex", className), onMouseEnter: (event) => {
+            rest.onMouseEnter?.(event);
+            if (children && !interactive) {
+                clearTimeout(timer.current);
+                timer.current = setTimeout(() => setOpen(true), delay);
+            }
+        }, onMouseLeave: (event) => {
+            rest.onMouseLeave?.(event);
+            if (children && !interactive && !wrapper.current?.contains(document.activeElement))
+                setOpen(false);
+        }, onFocus: (event) => {
+            rest.onFocus?.(event);
+            if (children && !interactive)
+                setOpen(true);
+        }, children: [trigger, children
+                ? open && (_jsx("div", { className: cn("absolute z-50 w-max max-w-[calc(100vw-2rem)]", side === "top" && "bottom-full left-1/2 -translate-x-1/2 pb-2", side === "bottom" && "top-full left-1/2 -translate-x-1/2 pt-2", side === "left" && "right-full top-1/2 -translate-y-1/2 pr-2", side === "right" && "left-full top-1/2 -translate-y-1/2 pl-2"), children: panel }))
+                : panel] }));
+});
+Tooltip.displayName = "Tooltip";

package/dist/components/Tooltip/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+var Tooltip_1 = require("./Tooltip.cjs");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });

package/dist/components/Tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip } from "./Tooltip.js";

package/dist/context/ThemeContext.cjs

@@ -0,0 +1,97 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+exports.useResolvedTheme = useResolvedTheme;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ThemeContext = (0, react_1.createContext)(null);
+const STORAGE_KEY = "rayden-theme";
+function getSystemTheme() {
+    if (typeof window === "undefined")
+        return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getStoredTheme(storageKey) {
+    if (typeof window === "undefined")
+        return null;
+    let stored;
+    try {
+        stored = localStorage.getItem(storageKey);
+    }
+    catch {
+        // Storage can throw in a private window or when site data is blocked.
+        return null;
+    }
+    if (stored === "light" || stored === "dark" || stored === "system")
+        return stored;
+    // null means "no stored preference", which is distinct from a stored "system".
+    return null;
+}
+function ThemeProvider({ children, defaultTheme = "system", storageKey = STORAGE_KEY, disableSystemTheme = false, }) {
+    const [theme, setThemeState] = (0, react_1.useState)(() => {
+        if (typeof window === "undefined")
+            return defaultTheme;
+        return getStoredTheme(storageKey) ?? defaultTheme;
+    });
+    const [systemTheme, setSystemTheme] = (0, react_1.useState)(() => getSystemTheme());
+    // Listen for system theme changes
+    (0, react_1.useEffect)(() => {
+        if (disableSystemTheme)
+            return;
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const handleChange = (e) => {
+            setSystemTheme(e.matches ? "dark" : "light");
+        };
+        mediaQuery.addEventListener("change", handleChange);
+        return () => mediaQuery.removeEventListener("change", handleChange);
+    }, [disableSystemTheme]);
+    // Resolve the actual theme
+    const resolvedTheme = (0, react_1.useMemo)(() => {
+        if (theme === "system") {
+            return disableSystemTheme ? "light" : systemTheme;
+        }
+        return theme;
+    }, [theme, systemTheme, disableSystemTheme]);
+    // Apply theme to document
+    (0, react_1.useEffect)(() => {
+        const root = document.documentElement;
+        root.classList.remove("light", "dark");
+        root.classList.add(resolvedTheme);
+    }, [resolvedTheme]);
+    const setTheme = (0, react_1.useCallback)((newTheme) => {
+        setThemeState(newTheme);
+        try {
+            localStorage.setItem(storageKey, newTheme);
+        }
+        catch {
+            // Persisting is best-effort; the in-memory theme still applies.
+        }
+    }, [storageKey]);
+    const toggleTheme = (0, react_1.useCallback)(() => {
+        setTheme(resolvedTheme === "light" ? "dark" : "light");
+    }, [resolvedTheme, setTheme]);
+    const value = (0, react_1.useMemo)(() => ({
+        theme,
+        resolvedTheme,
+        setTheme,
+        toggleTheme,
+    }), [theme, resolvedTheme, setTheme, toggleTheme]);
+    return (0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: value, children: children });
+}
+function useTheme() {
+    const context = (0, react_1.useContext)(ThemeContext);
+    if (!context) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+/**
+ * Hook that returns only the resolved theme (light or dark).
+ * Useful for components that just need to know the current theme.
+ */
+function useResolvedTheme() {
+    const { resolvedTheme } = useTheme();
+    return resolvedTheme;
+}

package/dist/context/ThemeContext.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+const ThemeContext = createContext(null);
+const STORAGE_KEY = "rayden-theme";
+function getSystemTheme() {
+    if (typeof window === "undefined")
+        return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getStoredTheme(storageKey) {
+    if (typeof window === "undefined")
+        return null;
+    let stored;
+    try {
+        stored = localStorage.getItem(storageKey);
+    }
+    catch {
+        // Storage can throw in a private window or when site data is blocked.
+        return null;
+    }
+    if (stored === "light" || stored === "dark" || stored === "system")
+        return stored;
+    // null means "no stored preference", which is distinct from a stored "system".
+    return null;
+}
+export function ThemeProvider({ children, defaultTheme = "system", storageKey = STORAGE_KEY, disableSystemTheme = false, }) {
+    const [theme, setThemeState] = useState(() => {
+        if (typeof window === "undefined")
+            return defaultTheme;
+        return getStoredTheme(storageKey) ?? defaultTheme;
+    });
+    const [systemTheme, setSystemTheme] = useState(() => getSystemTheme());
+    // Listen for system theme changes
+    useEffect(() => {
+        if (disableSystemTheme)
+            return;
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const handleChange = (e) => {
+            setSystemTheme(e.matches ? "dark" : "light");
+        };
+        mediaQuery.addEventListener("change", handleChange);
+        return () => mediaQuery.removeEventListener("change", handleChange);
+    }, [disableSystemTheme]);
+    // Resolve the actual theme
+    const resolvedTheme = useMemo(() => {
+        if (theme === "system") {
+            return disableSystemTheme ? "light" : systemTheme;
+        }
+        return theme;
+    }, [theme, systemTheme, disableSystemTheme]);
+    // Apply theme to document
+    useEffect(() => {
+        const root = document.documentElement;
+        root.classList.remove("light", "dark");
+        root.classList.add(resolvedTheme);
+    }, [resolvedTheme]);
+    const setTheme = useCallback((newTheme) => {
+        setThemeState(newTheme);
+        try {
+            localStorage.setItem(storageKey, newTheme);
+        }
+        catch {
+            // Persisting is best-effort; the in-memory theme still applies.
+        }
+    }, [storageKey]);
+    const toggleTheme = useCallback(() => {
+        setTheme(resolvedTheme === "light" ? "dark" : "light");
+    }, [resolvedTheme, setTheme]);
+    const value = useMemo(() => ({
+        theme,
+        resolvedTheme,
+        setTheme,
+        toggleTheme,
+    }), [theme, resolvedTheme, setTheme, toggleTheme]);
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+/**
+ * Hook that returns only the resolved theme (light or dark).
+ * Useful for components that just need to know the current theme.
+ */
+export function useResolvedTheme() {
+    const { resolvedTheme } = useTheme();
+    return resolvedTheme;
+}

package/dist/fonts/README.md

@@ -0,0 +1,13 @@
+# Rayden webfonts
+
+Downloaded from the Google Fonts CSS API on 2026-09-22 using a modern Chromium user agent:
+
+https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&display=swap
+
+Files are unmodified WOFF2 subsets from fonts.gstatic.com: Hanken Grotesk v12 (normal and italic, weights 100–900), Manrope v20 (normal, weights 200–800). Unicode ranges in ../fonts.css control subset loading. Google Fonts' original SIL Open Font License files are included alongside the assets.
+
+Upstream sources:
+- https://github.com/google/fonts/tree/main/ofl/hankengrotesk
+- https://github.com/google/fonts/tree/main/ofl/manrope
+
+These assets are copied to dist/fonts during the library build. Consumers opt in with @raydenui/ui/fonts.css. SF Mono and Menlo are local fallbacks and are not bundled.