beacon-ui 3.1.5 → 3.1.8

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

package/dist/components/Switch.js

@@ -1,64 +1,322 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { SwitchPreview } from "./SwitchPreview";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
 import { useThemeSafe } from "../providers/ThemeProvider";
-export function Switch({ checked = false, onChange, disabled = false, id, ariaLabel, showIcons = false, }) {
-    const themeContext = useThemeSafe();
-    const theme = themeContext?.theme;
-    const hue = themeContext?.hue;
-    const [status, setStatus] = useState("default");
-    const handleClick = useCallback(() => {
+import { SunIcon, MoonIcon } from "../icons";
+const TRACK_WIDTH = "52px";
+const HANDLE_SIZE = 24;
+const ICON_CONTAINER_SIZE = 32;
+const ICON_SIZE = 20;
+export function Switch({ checked = false, onChange, disabled = false, id, "aria-label": ariaLabel, showIcons = false, status: statusProp, className, style, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, 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(!checked);
         }
-    }, [checked, disabled, onChange]);
+        onClick?.(e);
+    }, [checked, disabled, onChange, onClick]);
     const handleKeyDown = useCallback((e) => {
-        if (disabled)
+        if (disabled) {
+            onKeyDown?.(e);
             return;
+        }
         if (e.key === " " || e.key === "Enter") {
             e.preventDefault();
             if (onChange) {
                 onChange(!checked);
             }
         }
-    }, [checked, disabled, onChange]);
-    const handleMouseEnter = useCallback(() => {
-        if (!disabled) {
-            setStatus("hovered");
+        onKeyDown?.(e);
+    }, [checked, disabled, onChange, onKeyDown]);
+    const handleMouseEnter = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("hovered");
         }
-    }, [disabled]);
-    const handleMouseLeave = useCallback(() => {
-        if (!disabled) {
-            setStatus("default");
+        onMouseEnter?.(e);
+    }, [disabled, statusProp, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("default");
         }
-    }, [disabled]);
-    const handleFocus = useCallback(() => {
-        if (!disabled) {
-            setStatus("focused");
+        onMouseLeave?.(e);
+    }, [disabled, statusProp, onMouseLeave]);
+    const handleFocus = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("focused");
         }
-    }, [disabled]);
-    const handleBlur = useCallback(() => {
-        if (!disabled) {
-            setStatus("default");
+        onFocus?.(e);
+    }, [disabled, statusProp, onFocus]);
+    const handleBlur = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("default");
         }
-    }, [disabled]);
-    const handleMouseDown = useCallback(() => {
-        if (!disabled) {
-            setStatus("pressed");
+        onBlur?.(e);
+    }, [disabled, statusProp, onBlur]);
+    const handleMouseDown = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("pressed");
         }
-    }, [disabled]);
-    const handleMouseUp = useCallback(() => {
-        if (!disabled) {
-            setStatus("hovered");
+        onMouseDown?.(e);
+    }, [disabled, statusProp, onMouseDown]);
+    const handleMouseUp = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("hovered");
         }
-    }, [disabled]);
+        onMouseUp?.(e);
+    }, [disabled, statusProp, onMouseUp]);
     const currentStatus = disabled ? "disabled" : status;
-    return (_jsx("button", { type: "button", id: id, role: "switch", "aria-checked": checked, "aria-label": ariaLabel, "aria-disabled": disabled, disabled: disabled, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, style: {
+    const isDisabled = disabled;
+    const trackStyles = useMemo(() => {
+        const baseStyles = {
+            display: "flex",
+            alignItems: "center",
+            padding: "var(--spacing-50)",
+            borderRadius: "var(--corner-radius-full)",
+            borderWidth: "var(--border-width-25)",
+            borderStyle: "solid",
+            position: "relative",
+            transition: "background-color 0.15s ease, border-color 0.15s ease",
+        };
+        if (showIcons) {
+            // With icons variant
+            if (currentStatus === "disabled") {
+                return {
+                    ...baseStyles,
+                    width: "auto",
+                    backgroundColor: "var(--bg-page-primary)",
+                    borderColor: "var(--border-strong-100)",
+                    justifyContent: "flex-end",
+                };
+            }
+            if (currentStatus === "hovered") {
+                return {
+                    ...baseStyles,
+                    width: "auto",
+                    backgroundColor: "var(--bg-page-secondary)",
+                    borderColor: "var(--border-strong-200)",
+                    justifyContent: "flex-end",
+                };
+            }
+            if (currentStatus === "focused" || currentStatus === "pressed") {
+                return {
+                    ...baseStyles,
+                    width: "auto",
+                    backgroundColor: "var(--bg-page-secondary)",
+                    borderColor: "var(--border-neutral-primary)",
+                    justifyContent: "flex-end",
+                };
+            }
+            return {
+                ...baseStyles,
+                width: "auto",
+                backgroundColor: "var(--bg-page-primary)",
+                borderColor: "var(--border-strong-200)",
+                justifyContent: "flex-end",
+            };
+        }
+        // Default variant (no icons)
+        if (currentStatus === "disabled") {
+            if (checked) {
+                return {
+                    ...baseStyles,
+                    width: TRACK_WIDTH,
+                    backgroundColor: "var(--bg-primary-disabled)",
+                    borderColor: "var(--border-strong-100)",
+                    justifyContent: "flex-end",
+                };
+            }
+            else {
+                return {
+                    ...baseStyles,
+                    width: TRACK_WIDTH,
+                    backgroundColor: "var(--bg-disabled)",
+                    borderColor: "var(--border-strong-100)",
+                    justifyContent: "flex-start",
+                };
+            }
+        }
+        if (checked) {
+            if (currentStatus === "hovered") {
+                return {
+                    ...baseStyles,
+                    width: TRACK_WIDTH,
+                    backgroundColor: "var(--bg-primary-on-hover)",
+                    borderColor: "var(--border-strong-100)",
+                    justifyContent: "flex-end",
+                };
+            }
+            if (currentStatus === "focused") {
+                return {
+                    ...baseStyles,
+                    width: TRACK_WIDTH,
+                    backgroundColor: "var(--bg-primary-on-focused)",
+                    borderColor: "var(--border-primary)",
+                    justifyContent: "flex-end",
+                };
+            }
+            if (currentStatus === "pressed") {
+                return {
+                    ...baseStyles,
+                    width: TRACK_WIDTH,
+                    backgroundColor: "var(--bg-primary-pressed)",
+                    borderColor: "var(--border-primary)",
+                    justifyContent: "flex-end",
+                };
+            }
+            return {
+                ...baseStyles,
+                width: TRACK_WIDTH,
+                backgroundColor: "var(--bg-primary)",
+                borderColor: "var(--border-strong-100)",
+                justifyContent: "flex-end",
+            };
+        }
+        else {
+            if (currentStatus === "hovered") {
+                return {
+                    ...baseStyles,
+                    width: TRACK_WIDTH,
+                    backgroundColor: "var(--bg-page-secondary)",
+                    borderColor: "var(--border-strong-100)",
+                    justifyContent: "flex-start",
+                };
+            }
+            if (currentStatus === "focused") {
+                return {
+                    ...baseStyles,
+                    width: TRACK_WIDTH,
+                    backgroundColor: "var(--bg-page-secondary)",
+                    borderColor: "var(--border-neutral-secondary)",
+                    justifyContent: "flex-start",
+                };
+            }
+            if (currentStatus === "pressed") {
+                return {
+                    ...baseStyles,
+                    width: TRACK_WIDTH,
+                    backgroundColor: "var(--bg-page-secondary)",
+                    borderColor: "var(--border-strong)",
+                    justifyContent: "flex-start",
+                };
+            }
+            return {
+                ...baseStyles,
+                width: TRACK_WIDTH,
+                backgroundColor: "var(--bg-page-primary)",
+                borderColor: "var(--border-strong-100)",
+                justifyContent: "flex-start",
+            };
+        }
+    }, [checked, currentStatus, showIcons]);
+    const handleStyles = useMemo(() => {
+        return {
+            width: `${HANDLE_SIZE}px`,
+            height: `${HANDLE_SIZE}px`,
+            borderRadius: "var(--corner-radius-full)",
+            backgroundColor: checked ? "var(--fg-on-action)" : "var(--fg-disabled)",
+            flexShrink: 0,
+            boxShadow: "var(--shadow-subtle)",
+        };
+    }, [checked]);
+    const nightContainerStyles = useMemo(() => {
+        const baseStyles = {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: `${ICON_CONTAINER_SIZE}px`,
+            height: `${ICON_CONTAINER_SIZE}px`,
+            borderRadius: "var(--corner-radius-full)",
+            flexShrink: 0,
+            border: "none",
+        };
+        if (checked) {
+            return {
+                ...baseStyles,
+                backgroundColor: "transparent",
+            };
+        }
+        else {
+            if (currentStatus === "disabled") {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-page-secondary)",
+                };
+            }
+            if (currentStatus === "pressed") {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-page-tertiary)",
+                };
+            }
+            return {
+                ...baseStyles,
+                backgroundColor: "var(--bg-page-tertiary)",
+            };
+        }
+    }, [checked, currentStatus]);
+    const dayContainerStyles = useMemo(() => {
+        const baseStyles = {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: `${ICON_CONTAINER_SIZE}px`,
+            height: `${ICON_CONTAINER_SIZE}px`,
+            borderRadius: "var(--corner-radius-full)",
+            flexShrink: 0,
+            border: "none",
+        };
+        if (checked) {
+            if (currentStatus === "disabled") {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-page-secondary)",
+                };
+            }
+            if (currentStatus === "pressed") {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-page-tertiary)",
+                };
+            }
+            return {
+                ...baseStyles,
+                backgroundColor: "var(--bg-page-tertiary)",
+            };
+        }
+        else {
+            return {
+                ...baseStyles,
+                backgroundColor: "transparent",
+            };
+        }
+    }, [checked, currentStatus]);
+    const nightIconColor = useMemo(() => {
+        if (currentStatus === "disabled") {
+            return "var(--fg-disabled)";
+        }
+        if (checked) {
+            return "var(--fg-primary)";
+        }
+        return "var(--fg-neutral)";
+    }, [checked, currentStatus]);
+    const dayIconColor = useMemo(() => {
+        if (currentStatus === "disabled") {
+            return "var(--fg-disabled)";
+        }
+        if (checked) {
+            return "var(--fg-neutral)";
+        }
+        return "var(--fg-warning)";
+    }, [checked, currentStatus]);
+    const switchElement = showIcons ? (_jsxs("div", { style: trackStyles, children: [_jsx("div", { style: nightContainerStyles, children: _jsx("div", { style: { color: nightIconColor, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(MoonIcon, { size: ICON_SIZE }) }) }), _jsx("div", { style: dayContainerStyles, children: _jsx("div", { style: { color: dayIconColor, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(SunIcon, { size: ICON_SIZE }) }) })] })) : (_jsx("div", { style: trackStyles, children: _jsx("div", { style: handleStyles }) }));
+    return (_jsx("button", { ref: ref, type: "button", id: id, role: "switch", "aria-checked": checked, "aria-label": ariaLabel, "aria-disabled": disabled, disabled: disabled, className: className, style: {
             border: "none",
             background: "none",
             padding: 0,
             cursor: disabled ? "not-allowed" : "pointer",
             outline: "none",
-        }, children: _jsx(SwitchPreview, { checked: checked, status: currentStatus, showIcons: showIcons, theme: theme, hue: hue }) }));
+            ...style,
+        }, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...rest, children: switchElement }));
 }

package/dist/index.d.ts

@@ -5,8 +5,18 @@ export { Switch } from "./components/Switch";
 export { Input } from "./components/Input";
 export { Avatar } from "./components/Avatar";
 export { Chip } from "./components/Chip";
-export { Menu } from "./components/Menu";
+export { Menu, type MenuItem as MenuItemData } from "./components/Menu";
+export { MenuItem, type MenuItemProps, type MenuItemState } from "./components/MenuItem";
 export { RadioButton } from "./components/RadioButton";
+export type { ButtonProps, ButtonVariant, ButtonSize, CornerRadiusStep, JustifyContent, ButtonState, ButtonColor } from "./components/Button";
+export type { CardProps, CardType, ProductCardSize, ProductCardStatus, ExperienceCardType, GenericCardStatus } from "./components/Card";
+export type { CheckboxProps, CheckboxStatus } from "./components/Checkbox";
+export type { SwitchProps, SwitchStatus } from "./components/Switch";
+export type { InputProps, InputSize, InputStatus } from "./components/Input";
+export type { AvatarProps, AvatarSize, AvatarType, AvatarColor, AvatarVariant } from "./components/Avatar";
+export type { ChipProps, ChipSize, ChipColor } from "./components/Chip";
+export type { MenuProps } from "./components/Menu";
+export type { RadioButtonProps, RadioButtonStatus } from "./components/RadioButton";
 export { ThemeProvider, useTheme, useThemeSafe } from "./providers/ThemeProvider";
 export type { Theme, HueVariant } from "./tokens/types";
 export type { ColorPrimitive, SemanticColor, SpacingToken, BackgroundToken, ForegroundToken, BorderToken, } from "./tokens/types";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9I,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxI,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -7,6 +7,7 @@ export { Input } from "./components/Input";
 export { Avatar } from "./components/Avatar";
 export { Chip } from "./components/Chip";
 export { Menu } from "./components/Menu";
+export { MenuItem } from "./components/MenuItem";
 export { RadioButton } from "./components/RadioButton";
 // Providers
 export { ThemeProvider, useTheme, useThemeSafe } from "./providers/ThemeProvider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beacon-ui",
-  "version": "3.1.5",
+  "version": "3.1.8",
   "description": "Beacon Design System - Components and tokens",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",