beacon-ui 3.1.5 → 3.1.8

package/dist/components/Button.js

@@ -1,7 +1,8 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { SearchIcon, ChevronDownIcon, LoaderIcon } from "../icons";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useCallback } from "react";
+import { useThemeSafe } from "../providers/ThemeProvider";
+import { LoaderIcon } from "../icons";
 const CORNER_RADIUS_MAP = {
     0: "var(--corner-radius-none)",
     1: "var(--corner-radius-100)",
@@ -54,9 +55,51 @@ const LOADER_ICON_SIZE_MAP = {
     lg: 32,
     xl: 40,
 };
-export function Button({ variant, size, cornerRadius, hasStartIcon, hasEndIcon, fillContainer, justifyContent, state, theme, hue, }) {
+export function Button({ variant = "filled", size = "md", cornerRadius = 2, startIcon, endIcon, fillContainer = false, justifyContent = "center", loading = false, disabled = false, state: stateProp, color = "primary", type = "button", children, className, style, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ref, ...rest }) {
+    const themeContext = useThemeSafe();
     const sizeConfig = SIZE_CONFIG[size];
     const borderRadius = CORNER_RADIUS_MAP[cornerRadius];
+    const [internalState, setInternalState] = useState("default");
+    const state = stateProp ?? internalState;
+    const handleMouseEnter = useCallback((e) => {
+        if (!disabled && !loading && !stateProp) {
+            setInternalState("hovered");
+        }
+        onMouseEnter?.(e);
+    }, [disabled, loading, stateProp, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (!disabled && !loading && !stateProp) {
+            setInternalState("default");
+        }
+        onMouseLeave?.(e);
+    }, [disabled, loading, stateProp, onMouseLeave]);
+    const handleFocus = useCallback((e) => {
+        if (!disabled && !loading && !stateProp) {
+            setInternalState("focused");
+        }
+        onFocus?.(e);
+    }, [disabled, loading, stateProp, onFocus]);
+    const handleBlur = useCallback((e) => {
+        if (!disabled && !loading && !stateProp) {
+            setInternalState("default");
+        }
+        onBlur?.(e);
+    }, [disabled, loading, stateProp, onBlur]);
+    const handleMouseDown = useCallback((e) => {
+        if (!disabled && !loading && !stateProp) {
+            setInternalState("pressed");
+        }
+        onMouseDown?.(e);
+    }, [disabled, loading, stateProp, onMouseDown]);
+    const handleMouseUp = useCallback((e) => {
+        if (!disabled && !loading && !stateProp) {
+            setInternalState("hovered");
+        }
+        onMouseUp?.(e);
+    }, [disabled, loading, stateProp, onMouseUp]);
+    const isDisabled = disabled;
+    const isLoading = loading;
+    const currentState = isDisabled ? "default" : state;
     const buttonStyles = useMemo(() => {
         const baseStyles = {
             display: "inline-flex",
@@ -71,7 +114,7 @@ export function Button({ variant, size, cornerRadius, hasStartIcon, hasEndIcon,
             borderStyle: "solid",
             borderColor: "transparent",
             borderRadius,
-            cursor: state === "disabled" ? "not-allowed" : "pointer",
+            cursor: (isDisabled || isLoading) ? "not-allowed" : "pointer",
             transition: "background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease",
             minHeight: sizeConfig.height,
             paddingLeft: sizeConfig.paddingX,
@@ -79,36 +122,51 @@ export function Button({ variant, size, cornerRadius, hasStartIcon, hasEndIcon,
             paddingTop: sizeConfig.paddingY,
             paddingBottom: sizeConfig.paddingY,
             width: fillContainer ? "100%" : "auto",
-            opacity: state === "disabled" ? 0.6 : 1,
+            opacity: isDisabled ? 0.6 : 1,
         };
+        // Get color token prefixes based on color prop
+        const colorPrefix = color === "primary" ? "primary" : color;
+        const bgToken = `--bg-${colorPrefix}`;
+        const bgTonalToken = `--bg-${colorPrefix}-tonal`;
+        const bgHoverToken = `--bg-${colorPrefix}-on-hover`;
+        const bgPressedToken = color === "primary" ? `--bg-${colorPrefix}-pressed` : `--bg-${colorPrefix}-on-hover`;
+        const bgFocusedToken = color === "primary" ? `--bg-${colorPrefix}-on-focused` : `--bg-${colorPrefix}-on-hover`;
+        const bgTonalHoverToken = color === "primary" ? `--bg-${colorPrefix}-tonal-on-hover` : `--bg-${colorPrefix}-tonal`;
+        const fgToken = `--fg-${colorPrefix}`;
+        const fgTonalToken = `--fg-${colorPrefix}-on-tonal`;
+        const fgHoverToken = color === "primary" ? `--fg-${colorPrefix}-on-hover` : `--fg-${colorPrefix}`;
+        const borderToken = `--border-${colorPrefix}`;
+        const borderTonalToken = `--border-${colorPrefix}-tonal`;
+        const borderHoverToken = color === "primary" ? `--border-${colorPrefix}-on-hover` : `--border-${colorPrefix}`;
+        // For non-primary colors, use the base border token for hover since there's no specific hover border token
         // Get base variant styles
         let variantStyles = {};
         switch (variant) {
             case "filled":
                 variantStyles = {
-                    backgroundColor: "var(--bg-primary)",
+                    backgroundColor: `var(${bgToken})`,
                     color: "var(--fg-on-action)",
-                    borderColor: "var(--bg-primary)",
+                    borderColor: `var(${bgToken})`,
                 };
                 break;
             case "tonal":
                 variantStyles = {
-                    backgroundColor: "var(--bg-primary-tonal)",
-                    color: "var(--fg-primary-on-tonal)",
-                    borderColor: "var(--border-primary-tonal)",
+                    backgroundColor: `var(${bgTonalToken})`,
+                    color: `var(${fgTonalToken})`,
+                    borderColor: `var(${borderTonalToken})`,
                 };
                 break;
             case "outline":
                 variantStyles = {
                     backgroundColor: "transparent",
-                    color: "var(--fg-primary)",
-                    borderColor: "var(--border-primary)",
+                    color: `var(${fgToken})`,
+                    borderColor: `var(${borderToken})`,
                 };
                 break;
             case "link":
                 variantStyles = {
                     backgroundColor: "transparent",
-                    color: "var(--fg-primary)",
+                    color: `var(${fgToken})`,
                     borderWidth: 0,
                     borderStyle: "none",
                     borderColor: "transparent",
@@ -118,8 +176,9 @@ export function Button({ variant, size, cornerRadius, hasStartIcon, hasEndIcon,
                 break;
         }
         // Apply state-specific overrides
+        // When loading, preserve variant colors and don't apply state-specific styles
         const stateStyles = {};
-        if (state === "disabled") {
+        if (isDisabled) {
             if (variant === "filled") {
                 stateStyles.backgroundColor = "var(--bg-disabled)";
                 stateStyles.color = "var(--fg-on-disabled)";
@@ -138,90 +197,51 @@ export function Button({ variant, size, cornerRadius, hasStartIcon, hasEndIcon,
                 stateStyles.color = "var(--fg-disabled)";
             }
         }
-        else if (state === "hovered") {
+        else if (!isLoading && currentState === "hovered") {
             if (variant === "filled") {
-                stateStyles.backgroundColor = "var(--bg-primary-on-hover)";
-                stateStyles.borderColor = "var(--bg-primary-on-hover)";
+                stateStyles.backgroundColor = `var(${bgHoverToken})`;
+                stateStyles.borderColor = `var(${bgHoverToken})`;
             }
             else if (variant === "tonal") {
-                stateStyles.backgroundColor = "var(--bg-primary-tonal-on-hover)";
+                stateStyles.backgroundColor = `var(${bgTonalHoverToken})`;
             }
             else if (variant === "outline") {
-                stateStyles.borderColor = "var(--border-primary-on-hover)";
+                stateStyles.borderColor = `var(${borderHoverToken})`;
             }
             else if (variant === "link") {
-                stateStyles.color = "var(--fg-primary-on-hover)";
+                stateStyles.color = `var(${fgHoverToken})`;
             }
         }
-        else if (state === "pressed") {
+        else if (!isLoading && currentState === "pressed") {
             if (variant === "filled") {
-                stateStyles.backgroundColor = "var(--bg-primary-pressed)";
-                stateStyles.borderColor = "var(--bg-primary-pressed)";
+                stateStyles.backgroundColor = `var(${bgPressedToken})`;
+                stateStyles.borderColor = `var(${bgPressedToken})`;
             }
             else if (variant === "tonal") {
-                stateStyles.backgroundColor = "var(--bg-primary-tonal-on-hover)";
+                stateStyles.backgroundColor = `var(${bgTonalHoverToken})`;
             }
         }
-        else if (state === "focused") {
+        else if (!isLoading && currentState === "focused") {
             if (variant === "filled") {
-                stateStyles.backgroundColor = "var(--bg-primary-on-focused)";
-                stateStyles.borderColor = "var(--bg-primary-on-focused)";
+                stateStyles.backgroundColor = `var(${bgFocusedToken})`;
+                stateStyles.borderColor = `var(${bgFocusedToken})`;
             }
             else if (variant === "outline") {
-                stateStyles.borderColor = "var(--border-primary)";
+                stateStyles.borderColor = `var(${borderToken})`;
             }
-            stateStyles.outline = "2px solid var(--border-primary)";
+            stateStyles.outline = `2px solid var(${borderToken})`;
             stateStyles.outlineOffset = "2px";
         }
-        else if (state === "success") {
-            if (variant === "filled") {
-                stateStyles.backgroundColor = "var(--bg-success)";
-                stateStyles.borderColor = "var(--border-success)";
-            }
-            else if (variant === "tonal") {
-                stateStyles.backgroundColor = "var(--bg-success-tonal)";
-                stateStyles.color = "var(--fg-success-on-tonal)";
-                stateStyles.borderColor = "var(--border-success-tonal)";
-            }
-            else if (variant === "outline") {
-                stateStyles.color = "var(--fg-success)";
-                stateStyles.borderColor = "var(--border-success)";
-            }
-        }
-        else if (state === "critical") {
-            if (variant === "filled") {
-                stateStyles.backgroundColor = "var(--bg-critical)";
-                stateStyles.borderColor = "var(--border-critical)";
-            }
-            else if (variant === "tonal") {
-                stateStyles.backgroundColor = "var(--bg-critical-tonal)";
-                stateStyles.color = "var(--fg-critical-on-tonal)";
-                stateStyles.borderColor = "var(--border-critical-tonal)";
-            }
-            else if (variant === "outline") {
-                stateStyles.color = "var(--fg-critical)";
-                stateStyles.borderColor = "var(--border-critical)";
-            }
-        }
-        else if (state === "warning") {
-            if (variant === "filled") {
-                stateStyles.backgroundColor = "var(--bg-warning)";
-                stateStyles.borderColor = "var(--border-warning)";
-            }
-            else if (variant === "tonal") {
-                stateStyles.backgroundColor = "var(--bg-warning-tonal)";
-                stateStyles.color = "var(--fg-warning-on-tonal)";
-                stateStyles.borderColor = "var(--border-warning-tonal)";
-            }
-            else if (variant === "outline") {
-                stateStyles.color = "var(--fg-warning)";
-                stateStyles.borderColor = "var(--border-warning)";
-            }
+        return { ...baseStyles, ...variantStyles, ...stateStyles, ...style };
+    }, [variant, sizeConfig, borderRadius, fillContainer, justifyContent, currentState, isDisabled, isLoading, color, style]);
+    const showStartIcon = !loading && startIcon;
+    const showEndIcon = !loading && endIcon;
+    const handleClick = useCallback((e) => {
+        if (isDisabled || isLoading) {
+            e.preventDefault();
+            return;
         }
-        return { ...baseStyles, ...variantStyles, ...stateStyles };
-    }, [variant, sizeConfig, borderRadius, fillContainer, justifyContent, state]);
-    const isLoading = state === "loading";
-    const showStartIcon = !isLoading && hasStartIcon;
-    const showEndIcon = !isLoading && hasEndIcon;
-    return (_jsx("div", { className: "ds-button-preview-container", children: _jsx("div", { className: "ds-button-preview-canvas", children: _jsx("button", { type: "button", className: "ds-button-preview-button", style: buttonStyles, disabled: state === "disabled", children: isLoading ? (_jsx(LoaderIcon, { size: LOADER_ICON_SIZE_MAP[size], className: "ds-button-loading-spinner" })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ds-button-preview-start", children: [showStartIcon && _jsx(SearchIcon, { size: sizeConfig.iconSize }), _jsx("span", { children: "Button" })] }), showEndIcon && _jsx(ChevronDownIcon, { size: sizeConfig.iconSize })] })) }) }) }));
+        onClick?.(e);
+    }, [isDisabled, isLoading, onClick]);
+    return (_jsx("button", { ref: ref, type: type, className: className, style: buttonStyles, disabled: isDisabled, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...rest, children: loading ? (_jsx(LoaderIcon, { size: LOADER_ICON_SIZE_MAP[size], className: "ds-button-loading-spinner" })) : (_jsxs(_Fragment, { children: [showStartIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: startIcon }), children, showEndIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: endIcon })] })) }));
 }

package/dist/components/Card.d.ts

@@ -1,14 +1,12 @@
-import type { Theme, HueVariant } from "../tokens/types";
+import { ComponentPropsWithRef } from "react";
 import { type PatternType } from "../utils/patternPaths";
-type CardType = "product" | "experience" | "info" | "generic";
-type ProductCardSize = "full" | "half";
-type ProductCardStatus = "default" | "highlighted";
-type ExperienceCardType = "default" | "skills" | "contacts";
-type GenericCardStatus = "default" | "highlighted" | "selected";
-interface CardProps {
+export type CardType = "product" | "experience" | "info" | "generic";
+export type ProductCardSize = "full" | "half";
+export type ProductCardStatus = "default" | "highlighted";
+export type ExperienceCardType = "default" | "skills" | "contacts";
+export type GenericCardStatus = "default" | "highlighted" | "selected";
+export interface CardProps extends Omit<ComponentPropsWithRef<"div">, "slot"> {
     cardType: CardType;
-    theme: Theme;
-    hue: HueVariant;
     size?: ProductCardSize;
     status?: ProductCardStatus;
     hasImage?: boolean;
@@ -35,6 +33,5 @@ interface CardProps {
     showBorder?: boolean;
     slot?: React.ReactNode;
 }
-export declare function Card({ cardType, theme, hue, size, status, hasImage, imageAspectRatio, hasIdentifiers, hasButton, title, description, experienceType, positionName, companyName, year, experienceDescription, label, details, cardName, cardDescription, hasIcon, genericStatus, showBgPattern, patternType, showOverlay, showShadow, showBorder, slot, }: CardProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Card({ cardType, size, status, hasImage, imageAspectRatio, hasIdentifiers, hasButton, title, description, experienceType, positionName, companyName, year, experienceDescription, label, details, cardName, cardDescription, hasIcon, genericStatus, showBgPattern, patternType, showOverlay, showShadow, showBorder, slot, className, style, ref, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE3E,KAAK,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;AAG9D,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AACvC,KAAK,iBAAiB,GAAG,SAAS,GAAG,aAAa,CAAC;AAGnD,KAAK,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAG5D,KAAK,iBAAiB,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAEhE,UAAU,SAAS;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,UAAU,CAAC;IAEhB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,KAAK,EACL,GAAG,EAEH,IAAa,EACb,MAAkB,EAClB,QAAe,EACf,gBAAyB,EACzB,cAAqB,EACrB,SAAgB,EAChB,KAAuB,EACvB,WAAsI,EAEtI,cAA0B,EAC1B,YAA8B,EAC9B,WAA4B,EAC5B,IAAgB,EAChB,qBAA0C,EAC1C,KAAe,EACf,OAAmB,EAEnB,QAAsB,EACtB,eAAoC,EACpC,OAAc,EAEd,aAAyB,EACzB,aAAoB,EACpB,WAAqB,EACrB,WAAkB,EAClB,UAAiB,EACjB,UAAiB,EACjB,IAAI,GACL,EAAE,SAAS,2CAkyBX"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE3E,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;AAGrE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,aAAa,CAAC;AAG1D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAGnE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAEvE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3E,QAAQ,EAAE,QAAQ,CAAC;IAEnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EAER,IAAa,EACb,MAAkB,EAClB,QAAe,EACf,gBAAyB,EACzB,cAAqB,EACrB,SAAgB,EAChB,KAAuB,EACvB,WAAsI,EAEtI,cAA0B,EAC1B,YAA8B,EAC9B,WAA4B,EAC5B,IAAgB,EAChB,qBAA0C,EAC1C,KAAe,EACf,OAAmB,EAEnB,QAAsB,EACtB,eAAoC,EACpC,OAAc,EAEd,aAAyB,EACzB,aAAoB,EACpB,WAAqB,EACrB,WAAkB,EAClB,UAAiB,EACjB,UAAiB,EACjB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CAmyBX"}

package/dist/components/Card.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useThemeSafe } from "../providers/ThemeProvider";
 import { RightArrowIcon, ArrowDownFallSlotIcon } from "../icons";
 import { getPatternConfig } from "../utils/patternPaths";
-export function Card({ cardType, theme, hue, 
+export function Card({ cardType, 
 // ProductCard
 size = "full", status = "default", hasImage = true, imageAspectRatio = "16x9", hasIdentifiers = true, hasButton = true, title = "Product Title", description = "Add your products Details that description here. This paragraph is restricted only two lines even if content is large.", 
 // ExperienceCard
@@ -10,7 +11,8 @@ experienceType = "default", positionName = "Position Name", companyName = "Compa
 // InfoCard
 cardName = "Card Name", cardDescription = "Card Description", hasIcon = true, 
 // Generic Card
-genericStatus = "default", showBgPattern = true, patternType = "cubes", showOverlay = true, showShadow = true, showBorder = true, slot, }) {
+genericStatus = "default", showBgPattern = true, patternType = "cubes", showOverlay = true, showShadow = true, showBorder = true, slot, className, style, ref, ...rest }) {
+    useThemeSafe(); // Ensure theme context is available
     const renderProductCard = () => {
         const isFull = size === "full";
         const isHighlighted = status === "highlighted";
@@ -513,5 +515,5 @@ genericStatus = "default", showBgPattern = true, patternType = "cubes", showOver
                 return null;
         }
     };
-    return (_jsx("div", { className: "ds-card-preview-container", children: _jsx("div", { className: "ds-card-preview-canvas", children: renderCard() }) }));
+    return (_jsx("div", { ref: ref, className: className, style: style, ...rest, children: renderCard() }));
 }

package/dist/components/Checkbox.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAQA,UAAU,aAAa;IACrB,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAe,EACf,QAAQ,EACR,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,SAAiB,GAClB,EAAE,aAAa,2CAmGf"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAExF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC/F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAKD,wBAAgB,QAAQ,CAAC,EACvB,OAAe,EACf,QAAQ,EACR,QAAgB,EAChB,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,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,aAAa,2CAkSf"}

package/dist/components/Checkbox.js

@@ -1,64 +1,217 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { CheckboxPreview } from "./CheckboxPreview";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
 import { useThemeSafe } from "../providers/ThemeProvider";
-export function Checkbox({ checked = false, onChange, disabled = false, id, ariaLabel, label, showLabel = false, }) {
-    const themeContext = useThemeSafe();
-    const theme = themeContext?.theme;
-    const hue = themeContext?.hue;
-    const [status, setStatus] = useState("default");
-    const handleClick = useCallback(() => {
+import { CheckIcon } from "../icons";
+const CHECKBOX_SIZE = 20;
+const ICON_SIZE = 16; // 20px box - 4px padding (2px each side) = 16px
+export function Checkbox({ checked = false, onChange, disabled = false, id, "aria-label": ariaLabel, label, showLabel = 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("default");
+        onMouseDown?.(e);
+    }, [disabled, statusProp, onMouseDown]);
+    const handleMouseUp = useCallback((e) => {
+        if (!disabled && !statusProp) {
+            setInternalStatus("default");
         }
-    }, [disabled]);
+        onMouseUp?.(e);
+    }, [disabled, statusProp, onMouseUp]);
     const currentStatus = disabled ? "disabled" : status;
-    return (_jsx("button", { type: "button", id: id, role: "checkbox", "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 checkboxStyles = useMemo(() => {
+        const baseStyles = {
+            width: `${CHECKBOX_SIZE}px`,
+            height: `${CHECKBOX_SIZE}px`,
+            borderRadius: "var(--corner-radius-100)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            transition: "background-color 0.15s ease, border-color 0.15s ease",
+            boxSizing: "border-box",
+            overflow: "hidden",
+            position: "relative",
+        };
+        if (checked) {
+            // Checked state
+            if (isDisabled) {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-disabled)",
+                    border: "none",
+                    padding: "var(--spacing-50)",
+                };
+            }
+            if (currentStatus === "hovered") {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-primary-on-hover)",
+                    border: "none",
+                    padding: "var(--spacing-50)",
+                };
+            }
+            if (currentStatus === "focused" || currentStatus === "pressed") {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-primary-pressed)",
+                    border: "none",
+                    padding: "var(--spacing-50)",
+                };
+            }
+            // Default checked
+            return {
+                ...baseStyles,
+                backgroundColor: "var(--bg-primary)",
+                border: "none",
+                padding: "var(--spacing-50)",
+            };
+        }
+        else {
+            // Unchecked state
+            if (isDisabled) {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-page-primary)",
+                    border: "var(--border-width-50) solid var(--border-neutral-tertiary)",
+                };
+            }
+            if (currentStatus === "hovered" || currentStatus === "focused" || currentStatus === "pressed") {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-page-primary)",
+                    border: "var(--border-width-50) solid var(--border-neutral-primary)",
+                };
+            }
+            // Default unchecked
+            return {
+                ...baseStyles,
+                backgroundColor: "var(--bg-page-primary)",
+                border: "var(--border-width-50) solid var(--border-neutral-secondary)",
+            };
+        }
+    }, [checked, currentStatus, isDisabled]);
+    const iconColor = useMemo(() => {
+        if (isDisabled) {
+            return "var(--fg-on-disabled)";
+        }
+        return "var(--static-white)";
+    }, [isDisabled]);
+    const labelStyles = useMemo(() => {
+        const baseStyles = {
+            fontFamily: "var(--font-secondary)",
+            fontSize: "var(--body-small-text-size)",
+            lineHeight: "var(--body-small-line-height)",
+            fontWeight: "var(--font-weight-secondary-medium)",
+            margin: 0,
+        };
+        if (isDisabled) {
+            return {
+                ...baseStyles,
+                color: "var(--fg-on-disabled)",
+            };
+        }
+        if (checked) {
+            return {
+                ...baseStyles,
+                color: "var(--fg-neutral-secondary)",
+            };
+        }
+        return {
+            ...baseStyles,
+            color: "var(--fg-neutral-tertiary)",
+        };
+    }, [isDisabled, checked]);
+    const focusRingStyles = useMemo(() => {
+        if (currentStatus !== "focused")
+            return null;
+        return {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: "28px",
+            height: "28px",
+            marginTop: "0",
+            marginLeft: "0",
+            borderRadius: "var(--corner-radius-200)",
+            borderWidth: "var(--border-width-25)",
+            borderStyle: "solid",
+            borderColor: checked
+                ? "var(--border-primary)"
+                : "var(--border-neutral-primary)",
+            pointerEvents: "none",
+        };
+    }, [currentStatus, checked]);
+    return (_jsx("button", { ref: ref, type: "button", id: id, role: "checkbox", "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(CheckboxPreview, { checked: checked, status: currentStatus, label: label, showLabel: showLabel, theme: theme, hue: hue }) }));
+            ...style,
+        }, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...rest, children: _jsxs("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "var(--spacing-200)",
+                position: "relative",
+            }, children: [_jsxs("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }, children: [focusRingStyles && _jsx("div", { style: focusRingStyles }), _jsx("div", { style: checkboxStyles, children: checked && (_jsx("div", { style: {
+                                    color: iconColor,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    width: `${ICON_SIZE}px`,
+                                    height: `${ICON_SIZE}px`,
+                                    maxWidth: `${ICON_SIZE}px`,
+                                    maxHeight: `${ICON_SIZE}px`,
+                                    flexShrink: 0,
+                                    overflow: "hidden",
+                                }, children: _jsx(CheckIcon, { size: ICON_SIZE }) })) })] }), showLabel && label && _jsx("p", { style: labelStyles, children: label })] }) }));
 }

package/dist/components/Chip.d.ts

@@ -1,15 +1,12 @@
-import type { Theme, HueVariant } from "../tokens/types";
-type ChipSize = "sm" | "md" | "lg";
-type ChipColor = "primary" | "neutral" | "success" | "critical" | "warning";
-interface ChipProps {
+import { ComponentPropsWithRef } from "react";
+export type ChipSize = "sm" | "md" | "lg";
+export type ChipColor = "primary" | "neutral" | "success" | "critical" | "warning";
+export interface ChipProps extends ComponentPropsWithRef<"div"> {
     label?: string;
     color?: ChipColor;
     size?: ChipSize;
     showBorders?: boolean;
-    showIcon?: boolean;
-    theme?: Theme;
-    hue?: HueVariant;
+    icon?: React.ReactNode;
 }
-export declare function Chip({ label, color, size, showBorders, showIcon, theme, hue, }: ChipProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Chip({ label, color, size, showBorders, icon, className, style, children, ref, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Chip.d.ts.map