beacon-ui 3.1.5 → 3.1.7

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

@@ -7,6 +7,15 @@ export { Avatar } from "./components/Avatar";
 export { Chip } from "./components/Chip";
 export { Menu } from "./components/Menu";
 export { RadioButton } from "./components/RadioButton";
+export type { ButtonProps, ButtonVariant, ButtonSize, CornerRadiusStep, JustifyContent, ButtonState } 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,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACjI,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/package.json

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