beacon-ui 3.1.4

package/CHANGELOG.md

@@ -0,0 +1,50 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [3.1.4] - 2025-12-29
+
+### Added
+- Initial npm package release as `beacon-ui`
+- README.md with installation and usage instructions
+- CHANGELOG.md for version tracking
+- Comprehensive documentation for all components
+- TypeScript type exports for design tokens
+- 9 production-ready components:
+  - Avatar
+  - Button
+  - Card
+  - Checkbox
+  - Chip
+  - Input
+  - Menu
+  - Radio Button
+  - Switch
+- ThemeProvider for theme and hue management
+- Complete design token system:
+  - Primitives (colors, spacing, typography)
+  - Semantic tokens (primary, success, warning, critical)
+  - Brand tokens (light/dark themes)
+  - Responsive tokens (desktop, tablet, mobile)
+  - Effect tokens (shadows)
+  - Typography tokens
+- TypeScript support with full type definitions
+- Icon component library
+- Support for multiple themes (light/dark)
+- Support for multiple hue variants (chromatic-prime, hue-sky, hue-indigo)
+
+### Features
+- Token-driven architecture
+- WCAG 2.1 AA accessibility compliance
+- Responsive design support
+- Full TypeScript support
+- React 18 and 19 compatibility
+
+---
+
+## Version History
+
+- **3.1.4** - Initial release of `beacon-ui` package

package/README.md

@@ -0,0 +1,175 @@
+# Beacon Design System
+
+A comprehensive React design system with 9 production-ready components and design tokens. Built with TypeScript and token-driven architecture for consistency and scalability.
+
+## Installation
+
+```bash
+npm install beacon-ui
+```
+
+## Quick Start
+
+### 1. Import Tokens CSS
+
+Import the design tokens in your main CSS file or at the root of your application:
+
+```tsx
+import 'beacon-ui/tokens';
+```
+
+Or import specific token files:
+
+```tsx
+import 'beacon-ui/tokens/primitives';
+import 'beacon-ui/tokens/semantic';
+import 'beacon-ui/tokens/brand-light';
+import 'beacon-ui/tokens/brand-dark';
+import 'beacon-ui/tokens/responsive';
+import 'beacon-ui/tokens/effects';
+import 'beacon-ui/tokens/typography';
+```
+
+### 2. Wrap Your App with ThemeProvider
+
+```tsx
+import { ThemeProvider } from 'beacon-ui';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark" defaultHue="hue-sky">
+      {/* Your app content */}
+    </ThemeProvider>
+  );
+}
+```
+
+### 3. Use Components
+
+```tsx
+import { Button, Card, Checkbox, Switch, Input, Avatar, Chip, Menu, RadioButton } from 'beacon-ui';
+
+function MyComponent() {
+  return (
+    <>
+      <Button
+        variant="filled"
+        size="md"
+        cornerRadius={2}
+        hasStartIcon={false}
+        hasEndIcon={false}
+        fillContainer={false}
+        justifyContent="center"
+        state="default"
+        theme="dark"
+        hue="hue-sky"
+      />
+      <Checkbox checked={true} onChange={(checked) => console.log(checked)} />
+      <Switch checked={false} onChange={(checked) => console.log(checked)} />
+    </>
+  );
+}
+```
+
+## Components
+
+- **Avatar** - User avatars with icon, text, or image support
+- **Button** - Multiple variants (filled, tonal, outline, link) with sizes and states
+- **Card** - Flexible card components (product, experience, info, generic)
+- **Checkbox** - Accessible checkbox with label support
+- **Chip** - Compact labels and tags
+- **Input** - Form inputs with icons, labels, and error states
+- **Menu** - Navigation menus for desktop, tablet, and mobile
+- **Radio Button** - Radio button groups with label support
+- **Switch** - Toggle switches with optional icons
+
+## Design Tokens
+
+Beacon Design System uses a comprehensive token system:
+
+- **Primitives** - Base color, spacing, and typography values
+- **Semantic** - Context-aware tokens (primary, success, warning, critical)
+- **Brand** - Theme-specific tokens (light/dark)
+- **Responsive** - Breakpoint-aware tokens for desktop, tablet, and mobile
+- **Effects** - Shadows and visual effects
+- **Typography** - Font families, sizes, weights, and line heights
+
+## Theme Support
+
+Beacon supports multiple themes and hue variants:
+
+### Themes
+- `light` - Light theme
+- `dark` - Dark theme (default)
+
+### Hue Variants
+- `chromatic-prime` - Default chromatic palette
+- `hue-sky` - Sky blue variant
+- `hue-indigo` - Indigo variant
+
+### Using Theme Context
+
+```tsx
+import { useTheme } from 'beacon-ui';
+
+function ThemeToggle() {
+  const { theme, hue, setTheme, setHue, toggleTheme } = useTheme();
+  
+  return (
+    <button onClick={toggleTheme}>
+      Current theme: {theme}
+    </button>
+  );
+}
+```
+
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```tsx
+import type { 
+  Theme, 
+  HueVariant,
+  ColorPrimitive,
+  SemanticColor,
+  SpacingToken,
+  BackgroundToken,
+  ForegroundToken,
+  BorderToken
+} from 'beacon-ui';
+```
+
+## Accessibility
+
+All components are built with accessibility in mind:
+- WCAG 2.1 AA compliant
+- Proper ARIA attributes
+- Keyboard navigation support
+- Focus management
+- Screen reader friendly
+
+## Responsive Design
+
+Components adapt seamlessly across breakpoints:
+- Desktop (default)
+- Tablet (max-width: 1024px)
+- Mobile (max-width: 768px)
+
+## Documentation
+
+For detailed documentation, component APIs, and examples, visit:
+https://beacon.uxraza.com/
+
+## Version
+
+Current version: **3.1.4**
+
+## License
+
+MIT
+
+## Repository
+
+https://github.com/raza-ahmed/beacon
+

package/dist/components/Avatar.d.ts

@@ -0,0 +1,20 @@
+import type { Theme, HueVariant } from "../tokens/types";
+type AvatarSize = "sm" | "md" | "lg" | "xl";
+type AvatarType = "icon" | "text" | "image";
+type AvatarColor = "primary" | "neutral" | "success" | "critical" | "warning";
+type AvatarVariant = "solid" | "faded";
+interface AvatarProps {
+    size: AvatarSize;
+    type: AvatarType;
+    color: AvatarColor;
+    variant: AvatarVariant;
+    isRound: boolean;
+    hasStroke: boolean;
+    theme: Theme;
+    hue: HueVariant;
+    initials?: string;
+    imageUrl?: string;
+}
+export declare function Avatar({ size, type, color, variant, isRound, hasStroke, theme, hue, initials, imageUrl, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvC,UAAU,WAAW;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,UAAU,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAwBD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,EACH,QAAe,EACf,QAAQ,GACT,EAAE,WAAW,2CA4Lb"}

package/dist/components/Avatar.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { UserPersonIcon } from "../icons";
+// Avatar container sizes
+const CONTAINER_SIZE_CONFIG = {
+    sm: { width: "32px", height: "32px" },
+    md: { width: "48px", height: "48px" },
+    lg: { width: "64px", height: "64px" },
+    xl: { width: "124px", height: "124px" },
+};
+// Icon sizes (no xl)
+const ICON_SIZE_CONFIG = {
+    sm: { size: 16 },
+    md: { size: 24 },
+    lg: { size: 40 },
+};
+// Text sizes (no xl)
+const TEXT_SIZE_CONFIG = {
+    sm: { fontSize: "var(--body-small-text-size)" },
+    md: { fontSize: "var(--body-regular-text-size)" },
+    lg: { fontSize: "var(--heading-h5-text-size)" },
+};
+export function Avatar({ size, type, color, variant, isRound, hasStroke, theme, hue, initials = "JD", imageUrl, }) {
+    const [imageError, setImageError] = useState(false);
+    const containerSize = CONTAINER_SIZE_CONFIG[size];
+    const avatarStyles = useMemo(() => {
+        // Determine border color for stroke based on variant and color
+        let borderColor = "";
+        if (hasStroke) {
+            if (variant === "solid") {
+                // Solid variants use tonal border colors (except warning which uses solid)
+                switch (color) {
+                    case "primary":
+                        borderColor = "var(--border-primary-tonal)";
+                        break;
+                    case "neutral":
+                        borderColor = "var(--border-strong-100)";
+                        break;
+                    case "success":
+                        borderColor = "var(--border-success-tonal)";
+                        break;
+                    case "critical":
+                        borderColor = "var(--border-critical-tonal)";
+                        break;
+                    case "warning":
+                        borderColor = "var(--border-warning)";
+                        break;
+                }
+            }
+            else {
+                // Faded variants use solid border colors
+                switch (color) {
+                    case "primary":
+                        borderColor = "var(--border-primary)";
+                        break;
+                    case "neutral":
+                        borderColor = "var(--border-strong-100)";
+                        break;
+                    case "success":
+                        borderColor = "var(--border-success)";
+                        break;
+                    case "critical":
+                        borderColor = "var(--border-critical)";
+                        break;
+                    case "warning":
+                        borderColor = "var(--border-warning)";
+                        break;
+                }
+            }
+        }
+        const baseStyles = {
+            width: containerSize.width,
+            height: containerSize.height,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            overflow: "hidden",
+            position: "relative",
+            border: hasStroke ? `var(--border-width-50) solid ${borderColor}` : "none",
+            boxSizing: "border-box",
+        };
+        // Corner radius: default 8px, or full (50%) if isRound
+        if (isRound) {
+            baseStyles.borderRadius = "50%";
+        }
+        else {
+            baseStyles.borderRadius = "8px"; // Default 8px corner radius
+        }
+        // Background color based on color and variant
+        let backgroundColor = "";
+        let textColor = "var(--fg-on-action)";
+        if (variant === "solid") {
+            switch (color) {
+                case "primary":
+                    backgroundColor = "var(--bg-primary)";
+                    break;
+                case "neutral":
+                    backgroundColor = "var(--color-neutral-500)";
+                    break;
+                case "success":
+                    backgroundColor = "var(--bg-success)";
+                    break;
+                case "critical":
+                    backgroundColor = "var(--bg-critical)";
+                    break;
+                case "warning":
+                    backgroundColor = "var(--bg-warning)";
+                    break;
+            }
+        }
+        else {
+            // faded variant
+            switch (color) {
+                case "primary":
+                    backgroundColor = "var(--bg-primary-tonal)";
+                    textColor = "var(--fg-primary-on-tonal)";
+                    break;
+                case "neutral":
+                    backgroundColor = "var(--color-neutral-200)";
+                    textColor = "var(--fg-neutral)";
+                    break;
+                case "success":
+                    backgroundColor = "var(--bg-success-tonal)";
+                    textColor = "var(--fg-success-on-tonal)";
+                    break;
+                case "critical":
+                    backgroundColor = "var(--bg-critical-tonal)";
+                    textColor = "var(--fg-critical-on-tonal)";
+                    break;
+                case "warning":
+                    backgroundColor = "var(--bg-warning-tonal)";
+                    textColor = "var(--fg-warning-on-tonal)";
+                    break;
+            }
+        }
+        baseStyles.backgroundColor = backgroundColor;
+        baseStyles.color = textColor;
+        return baseStyles;
+    }, [containerSize, isRound, hasStroke, color, variant]);
+    const handleImageError = () => {
+        setImageError(true);
+    };
+    const renderContent = () => {
+        if (type === "image" && imageUrl && !imageError) {
+            return (_jsx("img", { src: imageUrl, alt: "Avatar", onError: handleImageError, style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                } }));
+        }
+        if (type === "text" || (type === "image" && imageError)) {
+            // Text type: no xl size
+            const textSize = size === "xl" ? "lg" : size;
+            const textConfig = TEXT_SIZE_CONFIG[textSize];
+            return (_jsx("span", { style: {
+                    fontSize: textConfig.fontSize,
+                    fontWeight: "var(--font-weight-secondary-medium)",
+                    lineHeight: "1",
+                    userSelect: "none",
+                }, children: initials }));
+        }
+        // Icon type: no xl size
+        const iconSize = size === "xl" ? "lg" : size;
+        const iconConfig = ICON_SIZE_CONFIG[iconSize];
+        return (_jsx("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }, children: _jsx(UserPersonIcon, { size: iconConfig.size }) }));
+    };
+    return (_jsx("div", { className: "ds-avatar-preview-container", children: _jsx("div", { className: "ds-avatar-preview-canvas", children: _jsx("div", { className: "ds-avatar-preview-avatar", style: avatarStyles, children: renderContent() }) }) }));
+}

package/dist/components/Button.d.ts

@@ -0,0 +1,21 @@
+import type { Theme, HueVariant } from "../tokens/types";
+type ButtonVariant = "filled" | "tonal" | "outline" | "link";
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+type CornerRadiusStep = 0 | 1 | 2 | 3 | 4 | 5;
+type ButtonState = "default" | "hovered" | "focused" | "pressed" | "disabled" | "loading" | "success" | "critical" | "warning";
+type JustifyContent = "center" | "space-between";
+interface ButtonProps {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    cornerRadius: CornerRadiusStep;
+    hasStartIcon: boolean;
+    hasEndIcon: boolean;
+    fillContainer: boolean;
+    justifyContent: JustifyContent;
+    state: ButtonState;
+    theme: Theme;
+    hue: HueVariant;
+}
+export declare function Button({ variant, size, cornerRadius, hasStartIcon, hasEndIcon, fillContainer, justifyContent, state, theme, hue, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAC7D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,KAAK,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC9C,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAC/H,KAAK,cAAc,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEjD,UAAU,WAAW;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,gBAAgB,CAAC;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,cAAc,CAAC;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,UAAU,CAAC;CACjB;AAkED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,aAAa,EACb,cAAc,EACd,KAAK,EACL,KAAK,EACL,GAAG,GACJ,EAAE,WAAW,2CAmLb"}

package/dist/components/Button.js

@@ -0,0 +1,227 @@
+"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";
+const CORNER_RADIUS_MAP = {
+    0: "var(--corner-radius-none)",
+    1: "var(--corner-radius-100)",
+    2: "var(--corner-radius-200)",
+    3: "var(--corner-radius-300)",
+    4: "var(--corner-radius-400)",
+    5: "var(--corner-radius-full)",
+};
+const SIZE_CONFIG = {
+    xs: {
+        height: "28px",
+        paddingX: "var(--spacing-200)",
+        paddingY: "var(--spacing-50)",
+        fontSize: "var(--body-extra-small-text-size)",
+        iconSize: "xs",
+    },
+    sm: {
+        height: "36px",
+        paddingX: "var(--spacing-300)",
+        paddingY: "var(--spacing-100)",
+        fontSize: "var(--body-small-text-size)",
+        iconSize: "xs",
+    },
+    md: {
+        height: "44px",
+        paddingX: "var(--spacing-400)",
+        paddingY: "var(--spacing-200)",
+        fontSize: "var(--body-regular-text-size)",
+        iconSize: "xs",
+    },
+    lg: {
+        height: "56px",
+        paddingX: "var(--spacing-500)",
+        paddingY: "var(--spacing-300)",
+        fontSize: "var(--body-medium-text-size)",
+        iconSize: "sm",
+    },
+    xl: {
+        height: "68px",
+        paddingX: "var(--spacing-600)",
+        paddingY: "var(--spacing-400)",
+        fontSize: "var(--body-medium-text-size)",
+        iconSize: "sm",
+    },
+};
+const LOADER_ICON_SIZE_MAP = {
+    xs: 20,
+    sm: 24,
+    md: 24,
+    lg: 32,
+    xl: 40,
+};
+export function Button({ variant, size, cornerRadius, hasStartIcon, hasEndIcon, fillContainer, justifyContent, state, theme, hue, }) {
+    const sizeConfig = SIZE_CONFIG[size];
+    const borderRadius = CORNER_RADIUS_MAP[cornerRadius];
+    const buttonStyles = useMemo(() => {
+        const baseStyles = {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: justifyContent,
+            gap: "var(--spacing-100)",
+            fontFamily: "var(--font-secondary)",
+            fontSize: sizeConfig.fontSize,
+            lineHeight: "1",
+            fontWeight: "var(--font-weight-secondary-medium)",
+            borderWidth: "var(--border-width-25)",
+            borderStyle: "solid",
+            borderColor: "transparent",
+            borderRadius,
+            cursor: state === "disabled" ? "not-allowed" : "pointer",
+            transition: "background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease",
+            minHeight: sizeConfig.height,
+            paddingLeft: sizeConfig.paddingX,
+            paddingRight: sizeConfig.paddingX,
+            paddingTop: sizeConfig.paddingY,
+            paddingBottom: sizeConfig.paddingY,
+            width: fillContainer ? "100%" : "auto",
+            opacity: state === "disabled" ? 0.6 : 1,
+        };
+        // Get base variant styles
+        let variantStyles = {};
+        switch (variant) {
+            case "filled":
+                variantStyles = {
+                    backgroundColor: "var(--bg-primary)",
+                    color: "var(--fg-on-action)",
+                    borderColor: "var(--bg-primary)",
+                };
+                break;
+            case "tonal":
+                variantStyles = {
+                    backgroundColor: "var(--bg-primary-tonal)",
+                    color: "var(--fg-primary-on-tonal)",
+                    borderColor: "var(--border-primary-tonal)",
+                };
+                break;
+            case "outline":
+                variantStyles = {
+                    backgroundColor: "transparent",
+                    color: "var(--fg-primary)",
+                    borderColor: "var(--border-primary)",
+                };
+                break;
+            case "link":
+                variantStyles = {
+                    backgroundColor: "transparent",
+                    color: "var(--fg-primary)",
+                    borderWidth: 0,
+                    borderStyle: "none",
+                    borderColor: "transparent",
+                    textDecoration: "underline",
+                    textUnderlineOffset: "2px",
+                };
+                break;
+        }
+        // Apply state-specific overrides
+        const stateStyles = {};
+        if (state === "disabled") {
+            if (variant === "filled") {
+                stateStyles.backgroundColor = "var(--bg-disabled)";
+                stateStyles.color = "var(--fg-on-disabled)";
+                stateStyles.borderColor = "var(--border-disabled)";
+            }
+            else if (variant === "tonal") {
+                stateStyles.backgroundColor = "var(--bg-disabled)";
+                stateStyles.color = "var(--fg-disabled)";
+                stateStyles.borderColor = "var(--border-disabled)";
+            }
+            else if (variant === "outline") {
+                stateStyles.color = "var(--fg-disabled)";
+                stateStyles.borderColor = "var(--border-disabled)";
+            }
+            else if (variant === "link") {
+                stateStyles.color = "var(--fg-disabled)";
+            }
+        }
+        else if (state === "hovered") {
+            if (variant === "filled") {
+                stateStyles.backgroundColor = "var(--bg-primary-on-hover)";
+                stateStyles.borderColor = "var(--bg-primary-on-hover)";
+            }
+            else if (variant === "tonal") {
+                stateStyles.backgroundColor = "var(--bg-primary-tonal-on-hover)";
+            }
+            else if (variant === "outline") {
+                stateStyles.borderColor = "var(--border-primary-on-hover)";
+            }
+            else if (variant === "link") {
+                stateStyles.color = "var(--fg-primary-on-hover)";
+            }
+        }
+        else if (state === "pressed") {
+            if (variant === "filled") {
+                stateStyles.backgroundColor = "var(--bg-primary-pressed)";
+                stateStyles.borderColor = "var(--bg-primary-pressed)";
+            }
+            else if (variant === "tonal") {
+                stateStyles.backgroundColor = "var(--bg-primary-tonal-on-hover)";
+            }
+        }
+        else if (state === "focused") {
+            if (variant === "filled") {
+                stateStyles.backgroundColor = "var(--bg-primary-on-focused)";
+                stateStyles.borderColor = "var(--bg-primary-on-focused)";
+            }
+            else if (variant === "outline") {
+                stateStyles.borderColor = "var(--border-primary)";
+            }
+            stateStyles.outline = "2px solid var(--border-primary)";
+            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 };
+    }, [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 })] })) }) }) }));
+}