beacon-ui 3.1.4 → 3.1.7

package/dist/components/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExC,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB;AAuDD,wBAAgB,KAAK,CAAC,EACpB,KAAe,EACf,WAA2B,EAC3B,KAAU,EACV,IAAW,EACX,MAAkB,EAClB,SAAgB,EAChB,aAAqB,EACrB,WAAmB,EACnB,mBAA2B,EAC3B,SAAiB,EACjB,gBAAwB,EACxB,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,GAAG,GACJ,EAAE,UAAU,2CAgKZ"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuDD,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,MAAkB,EAClB,SAAgB,EAChB,SAAS,EACT,OAAO,EACP,eAAe,EACf,SAAiB,EACjB,YAA+B,EAC/B,YAAY,EACZ,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,SAAS,EACT,KAAK,EACL,KAAK,EACL,WAAW,EACX,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,2CAuKZ"}

package/dist/components/Input.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { UserPersonIcon, SearchIcon, ChevronDownIcon, AlertTriangleErrorIcon } from "../icons";
+import { useThemeSafe } from "../providers/ThemeProvider";
+import { AlertTriangleErrorIcon } from "../icons";
 const SIZE_CONFIG = {
     sm: {
         height: "28px",
@@ -40,9 +41,10 @@ const SIZE_CONFIG = {
         gap: "var(--spacing-200)",
     },
 };
-export function Input({ label = "Label", placeholder = "Placeholder", value = "", size = "md", status = "default", showLabel = true, showStartIcon = false, showEndIcon = false, showPlaceholderIcon = false, showError = false, showNumberPrefix = false, rounded = false, iconOnly = false, disabled = false, theme, hue, }) {
+export function Input({ label, size = "md", status = "default", showLabel = true, startIcon, endIcon, placeholderIcon, showError = false, errorMessage = "Error message!", numberPrefix, rounded = false, iconOnly = false, disabled = false, className, style, value, placeholder, ref, ...rest }) {
+    useThemeSafe(); // Ensure theme context is available
     const sizeConfig = SIZE_CONFIG[size];
-    const hasValue = value.length > 0;
+    const hasValue = value != null && String(value).length > 0;
     const borderColor = useMemo(() => {
         if (disabled) {
             return "var(--border-strong-100)";
@@ -72,22 +74,6 @@ export function Input({ label = "Label", placeholder = "Placeholder", value = ""
         };
         return baseStyles;
     }, [sizeConfig, borderColor, rounded, iconOnly, disabled]);
-    const textStyles = useMemo(() => {
-        return {
-            fontSize: sizeConfig.fontSize,
-            lineHeight: sizeConfig.lineHeight,
-            fontFamily: "var(--font-secondary)",
-            color: hasValue
-                ? "var(--fg-neutral-secondary)"
-                : disabled
-                    ? "var(--fg-disabled)"
-                    : "var(--fg-disabled)",
-            fontWeight: hasValue ? 500 : 400,
-            flex: iconOnly ? "none" : "1 0 0",
-            minWidth: iconOnly ? "auto" : 0,
-            minHeight: iconOnly ? "auto" : 0,
-        };
-    }, [sizeConfig, hasValue, disabled, iconOnly]);
     const labelStyles = useMemo(() => {
         return {
             fontSize: sizeConfig.labelFontSize,
@@ -131,8 +117,23 @@ export function Input({ label = "Label", placeholder = "Placeholder", value = ""
             color: "var(--fg-critical)",
         };
     }, []);
+    const inputStyles = {
+        fontSize: sizeConfig.fontSize,
+        lineHeight: sizeConfig.lineHeight,
+        fontFamily: "var(--font-secondary)",
+        color: hasValue ? "var(--fg-neutral-secondary)" : disabled ? "var(--fg-disabled)" : "var(--fg-disabled)",
+        fontWeight: hasValue ? 500 : 400,
+        flex: iconOnly ? "none" : "1 0 0",
+        minWidth: iconOnly ? "auto" : 0,
+        minHeight: iconOnly ? "auto" : 0,
+        border: "none",
+        background: "transparent",
+        outline: "none",
+        padding: 0,
+        width: "100%",
+    };
     if (iconOnly) {
-        return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-100)", width: "100%" }, children: _jsxs("div", { style: inputContainerStyles, children: [showPlaceholderIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(SearchIcon, { size: sizeConfig.iconSize }) })), showStartIcon && !showPlaceholderIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(UserPersonIcon, { size: sizeConfig.iconSize }) }))] }) }));
+        return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-100)", width: "100%" }, children: _jsxs("div", { style: inputContainerStyles, children: [placeholderIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", display: "flex", alignItems: "center", justifyContent: "center" }, children: placeholderIcon })), startIcon && !placeholderIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", display: "flex", alignItems: "center", justifyContent: "center" }, children: startIcon }))] }) }));
     }
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-100)", width: "100%" }, children: [showLabel && (_jsx("p", { style: labelStyles, children: label })), _jsxs("div", { style: inputContainerStyles, children: [showStartIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(UserPersonIcon, { size: sizeConfig.iconSize }) })), showPlaceholderIcon && !hasValue && (_jsx("div", { style: { color: iconOnly ? "var(--fg-neutral)" : "var(--fg-disabled)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(SearchIcon, { size: sizeConfig.iconSize }) })), showNumberPrefix && (_jsx("div", { style: prefixStyles, children: "+33" })), hasValue ? (_jsx("p", { style: textStyles, children: value })) : (_jsx("p", { style: textStyles, children: placeholder })), showEndIcon && (_jsx("div", { style: { color: "var(--fg-neutral-tertiary)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(ChevronDownIcon, { size: sizeConfig.iconSize }) }))] }), showError && (_jsxs("div", { style: errorContainerStyles, children: [_jsx("div", { style: { ...errorIconStyles, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(AlertTriangleErrorIcon, { size: 16 }) }), _jsx("p", { style: errorMessageStyles, children: "Error message!" })] }))] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-100)", width: "100%" }, children: [showLabel && label && (_jsx("label", { htmlFor: rest.id, style: labelStyles, children: label })), _jsxs("div", { style: inputContainerStyles, children: [startIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: startIcon })), placeholderIcon && !hasValue && (_jsx("div", { style: { color: iconOnly ? "var(--fg-neutral)" : "var(--fg-disabled)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: placeholderIcon })), numberPrefix && (_jsx("div", { style: prefixStyles, children: numberPrefix })), _jsx("input", { ref: ref, type: "text", value: value, placeholder: placeholder, disabled: disabled, className: className, style: { ...inputStyles, ...style }, ...rest }), endIcon && (_jsx("div", { style: { color: "var(--fg-neutral-tertiary)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: endIcon }))] }), showError && (_jsxs("div", { style: errorContainerStyles, children: [_jsx("div", { style: { ...errorIconStyles, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(AlertTriangleErrorIcon, { size: 16 }) }), _jsx("p", { style: errorMessageStyles, children: errorMessage })] }))] }));
 }

package/dist/components/Menu.d.ts

@@ -1,10 +1,10 @@
-import type { Theme, HueVariant } from "../tokens/types";
+import { ComponentPropsWithRef } from "react";
 type MenuVariant = "desktop" | "tablet-open" | "tablet-closed" | "mobile-open" | "mobile-closed" | "close-menu";
 interface MenuItem {
     id: string;
     label: string;
 }
-interface MenuProps {
+export interface MenuProps extends ComponentPropsWithRef<"div"> {
     variant?: MenuVariant;
     showMenu?: boolean;
     showButton?: boolean;
@@ -12,9 +12,8 @@ interface MenuProps {
     headerTitle?: string;
     headerSubtitle?: string;
     showChevrons?: boolean;
-    theme?: Theme;
-    hue?: HueVariant;
+    avatarImageUrl?: string;
 }
-export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, theme, hue, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, avatarImageUrl, className, style, ref, ...rest }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Menu.d.ts.map

package/dist/components/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,CAAC;AAEhH,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB;AAUD,wBAAgB,IAAI,CAAC,EACnB,OAAmB,EACnB,QAAe,EACf,UAAiB,EACjB,SAA8B,EAC9B,WAAqB,EACrB,cAA2B,EAC3B,YAAmB,EACnB,KAAK,EACL,GAAG,GACJ,EAAE,SAAS,2CA0YX"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAKvD,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,CAAC;AAEhH,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAUD,wBAAgB,IAAI,CAAC,EACnB,OAAmB,EACnB,QAAe,EACf,UAAiB,EACjB,SAA8B,EAC9B,WAAqB,EACrB,cAA2B,EAC3B,YAAmB,EACnB,cAAc,EACd,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CAgZX"}

package/dist/components/Menu.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { UserPersonIcon, ChevronRightIcon, CloseIcon, MenuIcon, DownloadIcon } from "../icons";
-import { SwitchPreview } from "./SwitchPreview";
+import { Switch } from "./Switch";
+import { useThemeSafe } from "../providers/ThemeProvider";
 const DEFAULT_MENU_ITEMS = [
     { id: "1", label: "Menu Item #1" },
     { id: "2", label: "Menu Item #2" },
@@ -10,7 +11,9 @@ const DEFAULT_MENU_ITEMS = [
     { id: "4", label: "Menu Item #4" },
     { id: "5", label: "Menu Item #5" },
 ];
-export function Menu({ variant = "desktop", showMenu = true, showButton = true, menuItems = DEFAULT_MENU_ITEMS, headerTitle = "Title", headerSubtitle = "Subtitle", showChevrons = true, theme, hue, }) {
+export function Menu({ variant = "desktop", showMenu = true, showButton = true, menuItems = DEFAULT_MENU_ITEMS, headerTitle = "Title", headerSubtitle = "Subtitle", showChevrons = true, avatarImageUrl, className, style, ref, ...rest }) {
+    const themeContext = useThemeSafe();
+    const theme = themeContext?.theme ?? "dark";
     const containerStyles = useMemo(() => {
         const baseStyles = {
             display: "flex",
@@ -26,7 +29,7 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
             return {
                 ...baseStyles,
                 width: "240px",
-                height: "600px",
+                height: "100%",
                 borderLeft: "none",
                 borderTop: "none",
                 borderBottom: "none",
@@ -184,7 +187,7 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
         };
     }, []);
     if (variant === "close-menu") {
-        return (_jsx("div", { style: containerStyles, children: _jsx("button", { style: iconButtonStyles, children: _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "32px", height: "32px" }, children: _jsx(CloseIcon, { size: 32 }) }) }) }));
+        return (_jsx("div", { ref: ref, className: className, style: { ...containerStyles, ...style }, ...rest, children: _jsx("button", { style: iconButtonStyles, children: _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "32px", height: "32px" }, children: _jsx(CloseIcon, { size: 32 }) }) }) }));
     }
     const isDesktop = variant === "desktop";
     const isTabletOpen = variant === "tablet-open";
@@ -193,12 +196,12 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
     const isMobileClosed = variant === "mobile-closed";
     const showMenuItems = (isDesktop || isTabletOpen || isMobileOpen) && showMenu;
     const showHeaderContent = isDesktop || isTabletOpen || isTabletClosed;
-    return (_jsxs("div", { style: containerStyles, children: [isDesktop ? (_jsx(_Fragment, { children: _jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: _jsx("img", { src: "/images/avatars/avatar-female.png", alt: "User avatar", style: {
+    return (_jsxs("div", { ref: ref, className: className, style: { ...containerStyles, ...style }, ...rest, children: [isDesktop ? (_jsx(_Fragment, { children: _jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: avatarImageUrl ? (_jsx("img", { src: avatarImageUrl, alt: "User avatar", style: {
                                     width: "100%",
                                     height: "100%",
                                     objectFit: "cover",
                                     objectPosition: "center",
-                                } }) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
+                                } })) : (_jsx(UserPersonIcon, { size: 24 })) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
                                         fontFamily: "var(--font-secondary)",
                                         fontSize: "var(--body-small-text-size)",
                                         lineHeight: "var(--body-small-line-height)",
@@ -214,12 +217,12 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
                                         margin: 0,
                                     }, children: headerSubtitle })] }))] }) })) : (
             /* Tablet/Mobile: Header and Footer in single row */
-            _jsxs("div", { style: mainRowStyles, children: [_jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: _jsx("img", { src: "/images/avatars/avatar-female.png", alt: "User avatar", style: {
+            _jsxs("div", { style: mainRowStyles, children: [_jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: avatarImageUrl ? (_jsx("img", { src: avatarImageUrl, alt: "User avatar", style: {
                                         width: "100%",
                                         height: "100%",
                                         objectFit: "cover",
                                         objectPosition: "center",
-                                    } }) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
+                                    } })) : (_jsx(UserPersonIcon, { size: 24 })) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
                                             fontFamily: "var(--font-secondary)",
                                             fontSize: "var(--body-small-text-size)",
                                             lineHeight: "var(--body-small-line-height)",
@@ -233,7 +236,7 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
                                             fontWeight: "var(--font-weight-secondary-medium)",
                                             color: "var(--fg-neutral)",
                                             margin: 0,
-                                        }, children: headerSubtitle })] }))] }), _jsxs("div", { style: footerStyles, children: [showButton && (_jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] })), _jsx(SwitchPreview, { checked: theme === "dark", showIcons: true, theme: theme, hue: hue }), _jsx("button", { style: iconButtonStyles, children: _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "32px", height: "32px" }, children: [(isTabletOpen || isMobileOpen) && _jsx(CloseIcon, { size: 32 }), (isTabletClosed || isMobileClosed) && _jsx(MenuIcon, { size: 32 })] }) })] })] })), showMenuItems && (_jsx("div", { style: {
+                                        }, children: headerSubtitle })] }))] }), _jsxs("div", { style: footerStyles, children: [showButton && (_jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] })), _jsx(Switch, { checked: theme === "dark", showIcons: true }), _jsx("button", { style: iconButtonStyles, children: _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "32px", height: "32px" }, children: [(isTabletOpen || isMobileOpen) && _jsx(CloseIcon, { size: 32 }), (isTabletClosed || isMobileClosed) && _jsx(MenuIcon, { size: 32 })] }) })] })] })), showMenuItems && (_jsx("div", { style: {
                     display: "flex",
                     flexDirection: "column",
                     gap: "var(--spacing-200)",
@@ -248,5 +251,5 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
                                 color: "var(--fg-neutral-secondary)",
                                 margin: 0,
                                 flex: 1,
-                            }, children: item.label }), showChevrons && (_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px", flexShrink: 0, color: "var(--fg-neutral)" }, children: _jsx(ChevronRightIcon, { size: 16 }) }))] }, item.id))) })), isDesktop && (_jsxs(_Fragment, { children: [showButton && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-400)", padding: "var(--spacing-400)", width: "100%" }, children: _jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] }) })), _jsx("div", { style: footerStyles, children: _jsx(SwitchPreview, { checked: theme === "dark", showIcons: true, theme: theme, hue: hue }) })] }))] }));
+                            }, children: item.label }), showChevrons && (_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px", flexShrink: 0, color: "var(--fg-neutral)" }, children: _jsx(ChevronRightIcon, { size: 16 }) }))] }, item.id))) })), isDesktop && (_jsxs(_Fragment, { children: [showButton && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-400)", padding: "var(--spacing-400)", width: "100%" }, children: _jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] }) })), _jsx("div", { style: footerStyles, children: _jsx(Switch, { checked: theme === "dark", showIcons: true }) })] }))] }));
 }

package/dist/components/RadioButton.d.ts

@@ -1,13 +1,11 @@
-import type { Theme, HueVariant } from "../tokens/types";
-type RadioButtonStatus = "default" | "hovered" | "focused" | "pressed" | "disabled";
-interface RadioButtonProps {
+import { ComponentPropsWithRef } from "react";
+export type RadioButtonStatus = "default" | "hovered" | "focused" | "pressed" | "disabled";
+export interface RadioButtonProps extends Omit<ComponentPropsWithRef<"input">, "type" | "onChange"> {
     selected?: boolean;
-    status?: RadioButtonStatus;
+    onChange?: (selected: boolean) => void;
     label?: string;
     showLabel?: boolean;
-    theme?: Theme;
-    hue?: HueVariant;
+    status?: RadioButtonStatus;
 }
-export declare function RadioButton({ selected, status, label, showLabel, theme, hue, }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function RadioButton({ selected, onChange, disabled, id, label, showLabel, status: statusProp, className, style, onClick, onFocus, onBlur, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, ref, ...rest }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RadioButton.d.ts.map

package/dist/components/RadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../src/components/RadioButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEzD,KAAK,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEpF,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB;AAID,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,MAAkB,EAClB,KAAsB,EACtB,SAAgB,EAChB,KAAK,EACL,GAAG,GACJ,EAAE,gBAAgB,2CAuJlB"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../src/components/RadioButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAE3F,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACjG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAID,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,EAAE,EACF,KAAsB,EACtB,SAAgB,EAChB,MAAM,EAAE,UAAU,EAClB,SAAS,EACT,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,2CA4PlB"}

package/dist/components/RadioButton.js

@@ -1,9 +1,55 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, useState, useCallback } from "react";
+import { useThemeSafe } from "../providers/ThemeProvider";
 const RADIO_SIZE = 20;
-export function RadioButton({ selected = false, status = "default", label = "Radio Button", showLabel = true, theme, hue, }) {
-    const disabled = status === "disabled";
+export function RadioButton({ selected = false, onChange, disabled = false, id, label = "Radio Button", showLabel = true, status: statusProp, className, style, onClick, onFocus, onBlur, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, ref, ...rest }) {
+    useThemeSafe(); // Ensure theme context is available
+    const [internalStatus, setInternalStatus] = useState("default");
+    const status = statusProp ?? internalStatus;
+    const handleClick = useCallback((e) => {
+        if (!disabled && onChange) {
+            onChange(!selected);
+        }
+        onClick?.(e);
+    }, [selected, disabled, onChange, onClick]);
+    const handleFocus = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("focused");
+        }
+        onFocus?.(e);
+    }, [disabled, statusProp, onFocus]);
+    const handleBlur = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("default");
+        }
+        onBlur?.(e);
+    }, [disabled, statusProp, onBlur]);
+    const handleMouseEnter = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("hovered");
+        }
+        onMouseEnter?.(e);
+    }, [disabled, statusProp, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("default");
+        }
+        onMouseLeave?.(e);
+    }, [disabled, statusProp, onMouseLeave]);
+    const handleMouseDown = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("pressed");
+        }
+        onMouseDown?.(e);
+    }, [disabled, statusProp, onMouseDown]);
+    const handleMouseUp = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("default");
+        }
+        onMouseUp?.(e);
+    }, [disabled, statusProp, onMouseUp]);
+    const currentStatus = disabled ? "disabled" : status;
     const radioStyles = useMemo(() => {
         const baseStyles = {
             width: `${RADIO_SIZE}px`,
@@ -28,7 +74,7 @@ export function RadioButton({ selected = false, status = "default", label = "Rad
                     backgroundColor: "transparent",
                 };
             }
-            if (status === "hovered") {
+            if (currentStatus === "hovered") {
                 return {
                     ...baseStyles,
                     borderWidth: "var(--border-width-150)",
@@ -37,7 +83,7 @@ export function RadioButton({ selected = false, status = "default", label = "Rad
                     backgroundColor: "transparent",
                 };
             }
-            if (status === "focused" || status === "pressed") {
+            if (currentStatus === "focused" || currentStatus === "pressed") {
                 return {
                     ...baseStyles,
                     borderWidth: "var(--border-width-150)",
@@ -66,7 +112,7 @@ export function RadioButton({ selected = false, status = "default", label = "Rad
                     backgroundColor: "transparent",
                 };
             }
-            if (status === "hovered" || status === "focused" || status === "pressed") {
+            if (currentStatus === "hovered" || currentStatus === "focused" || currentStatus === "pressed") {
                 return {
                     ...baseStyles,
                     borderWidth: "var(--border-width-25)",
@@ -84,7 +130,7 @@ export function RadioButton({ selected = false, status = "default", label = "Rad
                 backgroundColor: "transparent",
             };
         }
-    }, [selected, status, disabled]);
+    }, [selected, currentStatus, disabled]);
     const labelStyles = useMemo(() => {
         const baseStyles = {
             fontFamily: "var(--font-secondary)",
@@ -105,14 +151,8 @@ export function RadioButton({ selected = false, status = "default", label = "Rad
         };
     }, [disabled]);
     const focusRingStyles = useMemo(() => {
-        if (status !== "focused")
+        if (currentStatus !== "focused")
             return null;
-        // Focus ring should be positioned outside the radio button
-        // The container is always 20px with box-sizing: border-box
-        // When selected: border is 6px (border-width-150), so the visual outer edge is at 20px
-        // When unselected: border is 1px (border-width-25), so the visual outer edge is at 20px
-        // The focus ring should be 4px outside the container edge, centered on the container
-        // Using explicit width/height and centering to ensure consistent alignment: 20px + 8px (4px on each side) = 28px
         return {
             position: "absolute",
             top: "50%",
@@ -130,11 +170,23 @@ export function RadioButton({ selected = false, status = "default", label = "Rad
                 : "var(--border-neutral-primary)",
             pointerEvents: "none",
         };
-    }, [status, selected]);
+    }, [currentStatus, selected]);
     return (_jsxs("div", { style: {
             display: "flex",
             alignItems: "center",
             gap: "var(--spacing-200)",
             position: "relative",
-        }, children: [_jsx("div", { style: radioStyles, children: focusRingStyles && _jsx("div", { style: focusRingStyles }) }), showLabel && label && _jsx("p", { style: labelStyles, children: label })] }));
+        }, className: className, children: [_jsx("div", { style: radioStyles, children: focusRingStyles && _jsx("div", { style: focusRingStyles }) }), _jsx("input", { ref: ref, type: "radio", id: id, checked: selected, disabled: disabled, onChange: () => {
+                    if (!disabled && onChange) {
+                        onChange(!selected);
+                    }
+                }, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, style: {
+                    position: "absolute",
+                    opacity: 0,
+                    width: `${RADIO_SIZE}px`,
+                    height: `${RADIO_SIZE}px`,
+                    margin: 0,
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    ...style,
+                }, ...rest }), showLabel && label && (_jsx("label", { htmlFor: id, style: labelStyles, children: label }))] }));
 }

package/dist/components/Switch.d.ts

@@ -1,11 +1,10 @@
-interface SwitchProps {
+import { ComponentPropsWithRef } from "react";
+export type SwitchStatus = "default" | "hovered" | "focused" | "pressed" | "disabled";
+export interface SwitchProps extends Omit<ComponentPropsWithRef<"button">, "onChange" | "type"> {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    id?: string;
-    ariaLabel?: string;
     showIcons?: boolean;
+    status?: SwitchStatus;
 }
-export declare function Switch({ checked, onChange, disabled, id, ariaLabel, showIcons, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Switch({ checked, onChange, disabled, id, "aria-label": ariaLabel, showIcons, status: statusProp, className, style, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ref, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/components/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":"AAQA,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAe,EACf,QAAQ,EACR,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,SAAiB,GAClB,EAAE,WAAW,2CAkGb"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtF,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC7F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAOD,wBAAgB,MAAM,CAAC,EACrB,OAAe,EACf,QAAQ,EACR,QAAgB,EAChB,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,SAAS,EACT,KAAK,EACL,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CA2Yb"}