beacon-ui 3.1.5 → 3.1.8

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/components/Chip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnC,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAE5E,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB;AAsED,wBAAgB,IAAI,CAAC,EACnB,KAAoB,EACpB,KAAiB,EACjB,IAAW,EACX,WAAmB,EACnB,QAAgB,EAChB,KAAK,EACL,GAAG,GACJ,EAAE,SAAS,2CA0DX"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/components/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEnF,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAsED,wBAAgB,IAAI,CAAC,EACnB,KAAoB,EACpB,KAAiB,EACjB,IAAW,EACX,WAAmB,EACnB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CA2DX"}

package/dist/components/Chip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { ListDetailsIcon } from "../icons";
+import { useThemeSafe } from "../providers/ThemeProvider";
 const SIZE_CONFIG = {
     sm: {
         iconSize: 16,
@@ -52,7 +52,8 @@ const COLOR_CONFIG = {
         border: "var(--border-warning)",
     },
 };
-export function Chip({ label = "Identifier", color = "primary", size = "md", showBorders = false, showIcon = false, theme, hue, }) {
+export function Chip({ label = "Identifier", color = "primary", size = "md", showBorders = false, icon, className, style, children, ref, ...rest }) {
+    useThemeSafe(); // Ensure theme context is available
     const sizeConfig = SIZE_CONFIG[size];
     const colorConfig = COLOR_CONFIG[color];
     const chipStyles = useMemo(() => {
@@ -79,8 +80,8 @@ export function Chip({ label = "Identifier", color = "primary", size = "md", sho
                 borderColor: colorConfig.border,
             };
         }
-        return baseStyles;
-    }, [colorConfig, sizeConfig, showBorders]);
+        return { ...baseStyles, ...style };
+    }, [colorConfig, sizeConfig, showBorders, style]);
     const iconWrapperStyles = useMemo(() => {
         return {
             display: "flex",
@@ -95,5 +96,5 @@ export function Chip({ label = "Identifier", color = "primary", size = "md", sho
             color: colorConfig.fg,
         };
     }, [sizeConfig.iconSize, colorConfig.fg]);
-    return (_jsxs("div", { style: chipStyles, children: [showIcon && (_jsx("div", { style: iconWrapperStyles, children: _jsx(ListDetailsIcon, { size: sizeConfig.iconSize }) })), _jsx("span", { children: label })] }));
+    return (_jsxs("div", { ref: ref, className: className, style: chipStyles, ...rest, children: [icon && (_jsx("div", { style: iconWrapperStyles, children: icon })), children || _jsx("span", { children: label })] }));
 }

package/dist/components/Input.d.ts

@@ -1,24 +1,19 @@
-import type { Theme, HueVariant } from "../tokens/types";
-type InputSize = "sm" | "md" | "lg";
-type InputStatus = "default" | "active";
-interface InputProps {
+import { ComponentPropsWithRef } from "react";
+export type InputSize = "sm" | "md" | "lg";
+export type InputStatus = "default" | "active";
+export interface InputProps extends Omit<ComponentPropsWithRef<"input">, "size"> {
     label?: string;
-    placeholder?: string;
-    value?: string;
     size?: InputSize;
     status?: InputStatus;
     showLabel?: boolean;
-    showStartIcon?: boolean;
-    showEndIcon?: boolean;
-    showPlaceholderIcon?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    placeholderIcon?: React.ReactNode;
     showError?: boolean;
-    showNumberPrefix?: boolean;
+    errorMessage?: string;
+    numberPrefix?: string;
     rounded?: boolean;
     iconOnly?: boolean;
-    disabled?: boolean;
-    theme?: Theme;
-    hue?: HueVariant;
 }
-export declare function Input({ label, placeholder, value, size, status, showLabel, showStartIcon, showEndIcon, showPlaceholderIcon, showError, showNumberPrefix, rounded, iconOnly, disabled, theme, hue, }: InputProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Input({ label, size, status, showLabel, startIcon, endIcon, placeholderIcon, showError, errorMessage, numberPrefix, rounded, iconOnly, disabled, className, style, value, placeholder, ref, ...rest }: InputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Input.d.ts.map

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,13 @@
-import type { Theme, HueVariant } from "../tokens/types";
+import { ComponentPropsWithRef, ReactNode } from "react";
 type MenuVariant = "desktop" | "tablet-open" | "tablet-closed" | "mobile-open" | "mobile-closed" | "close-menu";
-interface MenuItem {
+export interface MenuItem {
     id: string;
     label: string;
+    icon?: ReactNode;
+    selected?: boolean;
+    onClick?: (item: MenuItem) => void;
 }
-interface MenuProps {
+export interface MenuProps extends ComponentPropsWithRef<"div"> {
     variant?: MenuVariant;
     showMenu?: boolean;
     showButton?: boolean;
@@ -13,9 +16,9 @@ interface MenuProps {
     headerSubtitle?: string;
     showChevrons?: boolean;
     avatarImageUrl?: string;
-    theme?: Theme;
-    hue?: HueVariant;
+    selectedItemId?: string;
+    onItemClick?: (item: MenuItem) => void;
 }
-export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, avatarImageUrl, theme: themeProp, hue: hueProp, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, avatarImageUrl, selectedItemId, onItemClick, 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;AAKzD,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,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,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,cAAc,EACd,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,OAAO,GACb,EAAE,SAAS,2CAiZX"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5E,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,CAAC;AAEhH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACpC;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;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACxC;AAUD,wBAAgB,IAAI,CAAC,EACnB,OAAmB,EACnB,QAAe,EACf,UAAiB,EACjB,SAA8B,EAC9B,WAAqB,EACrB,cAA2B,EAC3B,YAAmB,EACnB,cAAc,EACd,cAAc,EACd,WAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CA2aX"}

package/dist/components/Menu.js

@@ -1,9 +1,10 @@
 "use client";
 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 { useMemo, useState } from "react";
+import { CloseIcon, MenuIcon, DownloadIcon } from "../icons";
 import { Switch } from "./Switch";
 import { useThemeSafe } from "../providers/ThemeProvider";
+import { MenuItem as MenuItemComponent } from "./MenuItem";
 const DEFAULT_MENU_ITEMS = [
     { id: "1", label: "Menu Item #1" },
     { id: "2", label: "Menu Item #2" },
@@ -11,10 +12,10 @@ 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, avatarImageUrl, theme: themeProp, hue: hueProp, }) {
+export function Menu({ variant = "desktop", showMenu = true, showButton = true, menuItems = DEFAULT_MENU_ITEMS, headerTitle = "Title", headerSubtitle = "Subtitle", showChevrons = true, avatarImageUrl, selectedItemId, onItemClick, className, style, ref, ...rest }) {
     const themeContext = useThemeSafe();
-    const theme = themeProp ?? themeContext?.theme ?? "light";
-    const hue = hueProp ?? themeContext?.hue ?? "chromatic-prime";
+    const theme = themeContext?.theme ?? "dark";
+    const [hoveredItemId, setHoveredItemId] = useState(null);
     const containerStyles = useMemo(() => {
         const baseStyles = {
             display: "flex",
@@ -30,7 +31,7 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
             return {
                 ...baseStyles,
                 width: "240px",
-                height: "600px",
+                height: "100%",
                 borderLeft: "none",
                 borderTop: "none",
                 borderBottom: "none",
@@ -112,17 +113,6 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
             overflow: "hidden",
         };
     }, []);
-    const menuItemStyles = useMemo(() => {
-        return {
-            display: "flex",
-            gap: "var(--spacing-200)",
-            alignItems: "center",
-            padding: "var(--spacing-200) var(--spacing-200)",
-            borderRadius: "var(--corner-radius-200)",
-            backgroundColor: "var(--bg-page-primary)",
-            width: "100%",
-        };
-    }, []);
     const buttonStyles = useMemo(() => {
         return {
             display: "flex",
@@ -188,7 +178,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";
@@ -197,12 +187,27 @@ 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: avatarImageUrl ? (_jsx("img", { src: avatarImageUrl, 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: _jsx("img", { src: avatarImageUrl || "/images/avatars/avatar-female.png", alt: "User avatar", style: {
                                     width: "100%",
                                     height: "100%",
                                     objectFit: "cover",
                                     objectPosition: "center",
-                                } })) : (_jsx(UserPersonIcon, { size: 24 })) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
+                                }, onError: (e) => {
+                                    // Fallback to icon if image fails to load
+                                    const target = e.target;
+                                    target.style.display = "none";
+                                    const iconContainer = target.parentElement;
+                                    if (iconContainer && !iconContainer.querySelector("svg")) {
+                                        const iconWrapper = document.createElement("div");
+                                        iconWrapper.style.display = "flex";
+                                        iconWrapper.style.alignItems = "center";
+                                        iconWrapper.style.justifyContent = "center";
+                                        iconWrapper.style.width = "100%";
+                                        iconWrapper.style.height = "100%";
+                                        iconWrapper.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="var(--fg-neutral)"/></svg>`;
+                                        iconContainer.appendChild(iconWrapper);
+                                    }
+                                } }) }), 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)",
@@ -218,12 +223,27 @@ 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: avatarImageUrl ? (_jsx("img", { src: avatarImageUrl, alt: "User avatar", style: {
+            _jsxs("div", { style: mainRowStyles, children: [_jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: _jsx("img", { src: avatarImageUrl || "/images/avatars/avatar-female.png", alt: "User avatar", style: {
                                         width: "100%",
                                         height: "100%",
                                         objectFit: "cover",
                                         objectPosition: "center",
-                                    } })) : (_jsx(UserPersonIcon, { size: 24 })) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
+                                    }, onError: (e) => {
+                                        // Fallback to icon if image fails to load
+                                        const target = e.target;
+                                        target.style.display = "none";
+                                        const iconContainer = target.parentElement;
+                                        if (iconContainer && !iconContainer.querySelector("svg")) {
+                                            const iconWrapper = document.createElement("div");
+                                            iconWrapper.style.display = "flex";
+                                            iconWrapper.style.alignItems = "center";
+                                            iconWrapper.style.justifyContent = "center";
+                                            iconWrapper.style.width = "100%";
+                                            iconWrapper.style.height = "100%";
+                                            iconWrapper.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="var(--fg-neutral)"/></svg>`;
+                                            iconContainer.appendChild(iconWrapper);
+                                        }
+                                    } }) }), 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)",
@@ -244,13 +264,25 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
                     padding: isDesktop ? "var(--spacing-600) 0" : "var(--spacing-400) var(--spacing-200)",
                     width: "100%",
                     flex: isDesktop ? 1 : undefined,
-                }, children: menuItems.map((item) => (_jsxs("div", { style: menuItemStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "20px", height: "20px", flexShrink: 0, color: "var(--fg-neutral)" }, children: _jsx(UserPersonIcon, { size: 20 }) }), _jsx("p", { style: {
-                                fontFamily: "var(--font-secondary)",
-                                fontSize: "var(--body-small-text-size)",
-                                lineHeight: "var(--body-small-line-height)",
-                                fontWeight: "var(--font-weight-secondary-medium)",
-                                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(Switch, { checked: theme === "dark", showIcons: true }) })] }))] }));
+                }, children: menuItems.map((item) => {
+                    const isSelected = selectedItemId === item.id || item.selected === true;
+                    const isHovered = hoveredItemId === item.id;
+                    const handleClick = () => {
+                        if (item.onClick) {
+                            item.onClick(item);
+                        }
+                        if (onItemClick) {
+                            onItemClick(item);
+                        }
+                    };
+                    const handleMouseEnter = () => {
+                        setHoveredItemId(item.id);
+                    };
+                    const handleMouseLeave = () => {
+                        setHoveredItemId(null);
+                    };
+                    // Determine state for MenuItem component
+                    const itemState = isSelected ? "Active" : isHovered ? "Hovered" : "Default";
+                    return (_jsx(MenuItemComponent, { menuTitle: item.label, iconStart: true, iconStart1: item.icon || null, iconEnd: showChevrons, iconEnd1: null, state: itemState, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, 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/MenuItem.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+export type MenuItemState = "Default" | "Hovered" | "Active" | "Disabled";
+export interface MenuItemProps extends Omit<ComponentPropsWithRef<"button">, "onClick"> {
+    menuTitle?: string;
+    iconStart?: boolean;
+    iconStart1?: ReactNode | null;
+    iconEnd?: boolean;
+    iconEnd1?: ReactNode | null;
+    state?: MenuItemState;
+    onClick?: () => void;
+}
+export declare function MenuItem({ menuTitle, iconStart, iconStart1, iconEnd, iconEnd1, state, onClick, className, style, ...rest }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../src/components/MenuItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1E,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EACvB,SAAuB,EACvB,SAAgB,EAChB,UAAiB,EACjB,OAAc,EACd,QAAe,EACf,KAAiB,EACjB,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CAiIf"}

package/dist/components/MenuItem.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UserPersonIcon, ChevronRightIcon } from "../icons";
+export function MenuItem({ menuTitle = "Menu Item", iconStart = true, iconStart1 = null, iconEnd = true, iconEnd1 = null, state = "Default", onClick, className, style, ...rest }) {
+    const isActive = state === "Active";
+    const isDisabled = state === "Disabled";
+    const isHovered = state === "Hovered";
+    const isDefault = state === "Default";
+    // Background colors based on state
+    const backgroundColor = isActive
+        ? "var(--bg-primary-tonal)"
+        : isHovered
+            ? "var(--bg-page-secondary)"
+            : isDisabled
+                ? "var(--bg-page-primary)"
+                : "var(--bg-page-primary)";
+    // Text colors based on state
+    const textColor = isActive
+        ? "var(--fg-primary-on-tonal)"
+        : isDisabled
+            ? "var(--fg-on-disabled)"
+            : isHovered
+                ? "var(--fg-neutral)"
+                : "var(--fg-neutral-secondary)";
+    // Icon colors based on state
+    const iconColor = isActive
+        ? "var(--fg-primary-on-tonal)"
+        : isDisabled
+            ? "var(--fg-on-disabled)"
+            : isHovered
+                ? "var(--fg-neutral)"
+                : "var(--fg-neutral-secondary)";
+    // Chevron colors based on state
+    const chevronColor = isActive
+        ? "var(--fg-primary-on-tonal)"
+        : isDisabled
+            ? "var(--fg-on-disabled)"
+            : "var(--fg-neutral)";
+    // Border for disabled state
+    const borderStyle = isDisabled
+        ? "var(--border-width-25) solid var(--border-neutral-tertiary)"
+        : "none";
+    const containerStyles = {
+        display: "flex",
+        gap: "var(--spacing-200)",
+        alignItems: "center",
+        padding: "var(--spacing-200) var(--spacing-200)",
+        borderRadius: "var(--corner-radius-200)",
+        width: "100%",
+        backgroundColor,
+        border: borderStyle,
+        cursor: isDisabled ? "not-allowed" : onClick ? "pointer" : "default",
+        transition: "background-color 0.2s ease, border-color 0.2s ease",
+        ...style,
+    };
+    return (_jsxs("button", { type: "button", className: className, style: containerStyles, onClick: isDisabled ? undefined : onClick, disabled: isDisabled, ...rest, children: [iconStart && (_jsx("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "20px",
+                    height: "20px",
+                    flexShrink: 0,
+                    color: iconColor,
+                }, children: iconStart1 || _jsx(UserPersonIcon, { size: 20 }) })), _jsx("p", { style: {
+                    fontFamily: "var(--font-secondary)",
+                    fontSize: "var(--body-small-text-size)",
+                    lineHeight: "var(--body-small-line-height)",
+                    fontWeight: isActive ? "var(--font-weight-secondary-semibold)" : "var(--font-weight-secondary-medium)",
+                    color: textColor,
+                    margin: 0,
+                    flex: 1,
+                    textAlign: "left",
+                }, children: menuTitle }), iconEnd && !isDisabled && (_jsx("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "16px",
+                    height: "16px",
+                    flexShrink: 0,
+                    color: chevronColor,
+                }, children: iconEnd1 || _jsx(ChevronRightIcon, { size: 16 }) })), iconEnd && isDisabled && (_jsx("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "16px",
+                    height: "16px",
+                    flexShrink: 0,
+                    color: chevronColor,
+                }, children: iconEnd1 || _jsx(ChevronRightIcon, { size: 16 }) }))] }));
+}

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"}