beacon-ui 3.1.5 → 3.1.8

package/CHANGELOG.md

@@ -5,6 +5,37 @@ 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.8] - 2025-12-29
+
+### Fixed
+- Button component now preserves variant colors (success, critical, warning) when in loading state
+- Previously, buttons would revert to default/primary color when loading was enabled
+- Loading state no longer overrides variant-specific colors
+
+## [3.1.7] - 2025-12-29
+
+### Changed
+- Menu component desktop variant now uses `height: "100%"` by default to fill container height instead of fixed `600px`
+- Custom height can still be set via the `style` prop to override the default behavior
+
+## [3.1.6] - 2025-12-29
+
+### Added
+- Optional `state` prop to Button component for controlled state management (default, hovered, focused, pressed)
+- Optional `status` prop to Switch, Checkbox, and RadioButton components for controlled state management
+- Components now support both controlled (via props) and uncontrolled (internal state) modes
+- Exported status/state types: `ButtonState`, `SwitchStatus`, `CheckboxStatus`, `RadioButtonStatus`
+
+### Fixed
+- Menu component now uses public `Switch` component API instead of internal `SwitchPreview`
+- Menu component accepts optional `avatarImageUrl` prop instead of hardcoded image path
+- Menu component properly uses theme context for theme and hue values
+- Fixed nested button hydration error in Switch component wrapper
+
+### Changed
+- Menu component falls back to `UserPersonIcon` when `avatarImageUrl` is not provided
+- Button, Switch, Checkbox, and RadioButton components now only update internal state when status/state prop is not provided (controlled pattern)
+
 ## [3.1.5] - 2025-12-29
 
 ### Fixed

package/README.md

@@ -47,30 +47,302 @@ function App() {
 ### 3. Use Components
 
 ```tsx
-import { Button, Card, Checkbox, Switch, Input, Avatar, Chip, Menu, RadioButton } from 'beacon-ui';
+import { Button, Checkbox, Switch, Input, Avatar, Chip } 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"
+      <Button onClick={() => console.log('Clicked!')}>
+        Click Me
+      </Button>
+      
+      <Checkbox 
+        checked={true} 
+        onChange={(checked) => console.log(checked)} 
+        label="Accept terms"
+        showLabel
+      />
+      
+      <Switch 
+        checked={false} 
+        onChange={(checked) => console.log(checked)} 
+      />
+    </>
+  );
+}
+```
+
+## Getting Started
+
+### Basic Button Usage
+
+```tsx
+import { Button } from 'beacon-ui';
+
+function MyComponent() {
+  return (
+    <Button onClick={() => alert('Hello!')}>
+      Click Me
+    </Button>
+  );
+}
+```
+
+### Button with Icons
+
+```tsx
+import { Button } from 'beacon-ui';
+import { SearchIcon } from 'beacon-icons';
+
+function SearchButton() {
+  return (
+    <Button 
+      startIcon={<SearchIcon size="xs" />}
+      onClick={() => console.log('Search')}
+    >
+      Search
+    </Button>
+  );
+}
+```
+
+### Button Variants
+
+```tsx
+import { Button } from 'beacon-ui';
+
+function ButtonVariants() {
+  return (
+    <>
+      <Button variant="filled">Filled</Button>
+      <Button variant="tonal">Tonal</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="link">Link</Button>
+    </>
+  );
+}
+```
+
+### Button Sizes
+
+```tsx
+import { Button } from 'beacon-ui';
+
+function ButtonSizes() {
+  return (
+    <>
+      <Button size="xs">Extra Small</Button>
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+      <Button size="xl">Extra Large</Button>
+    </>
+  );
+}
+```
+
+### Button States
+
+```tsx
+import { Button } from 'beacon-ui';
+
+function ButtonStates() {
+  return (
+    <>
+      <Button>Default</Button>
+      <Button disabled>Disabled</Button>
+      <Button loading>Loading</Button>
+    </>
+  );
+}
+```
+
+### Form Input
+
+```tsx
+import { Input } from 'beacon-ui';
+import { SearchIcon } from 'beacon-icons';
+
+function SearchInput() {
+  const [value, setValue] = useState('');
+  
+  return (
+    <Input
+      label="Search"
+      placeholder="Enter search term"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      startIcon={<SearchIcon size={16} />}
+    />
+  );
+}
+```
+
+### Checkbox
+
+```tsx
+import { Checkbox } from 'beacon-ui';
+
+function TermsCheckbox() {
+  const [accepted, setAccepted] = useState(false);
+  
+  return (
+    <Checkbox
+      checked={accepted}
+      onChange={setAccepted}
+      label="I accept the terms and conditions"
+      showLabel
+    />
+  );
+}
+```
+
+### Switch
+
+```tsx
+import { Switch } from 'beacon-ui';
+
+function NotificationSwitch() {
+  const [enabled, setEnabled] = useState(false);
+  
+  return (
+    <Switch
+      checked={enabled}
+      onChange={setEnabled}
+      aria-label="Enable notifications"
+    />
+  );
+}
+```
+
+### Avatar
+
+```tsx
+import { Avatar } from 'beacon-ui';
+
+function UserAvatar() {
+  return (
+    <>
+      <Avatar type="icon" size="md" color="primary" />
+      <Avatar type="text" initials="JD" size="md" color="primary" />
+      <Avatar type="image" imageUrl="/avatar.jpg" size="md" />
+    </>
+  );
+}
+```
+
+### Chip
+
+```tsx
+import { Chip } from 'beacon-ui';
+import { ListDetailsIcon } from 'beacon-icons';
+
+function Tags() {
+  return (
+    <>
+      <Chip label="React" color="primary" />
+      <Chip label="TypeScript" color="success" />
+      <Chip 
+        label="Design System" 
+        color="neutral"
+        icon={<ListDetailsIcon size={20} />}
       />
-      <Checkbox checked={true} onChange={(checked) => console.log(checked)} />
-      <Switch checked={false} onChange={(checked) => console.log(checked)} />
     </>
   );
 }
 ```
 
+## Common Patterns
+
+### Form with Validation
+
+```tsx
+import { Input, Button } from 'beacon-ui';
+
+function LoginForm() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  
+  const handleSubmit = () => {
+    if (!email.includes('@')) {
+      setError('Invalid email address');
+      return;
+    }
+    // Submit form
+  };
+  
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+      <Input
+        label="Email"
+        type="email"
+        value={email}
+        onChange={(e) => {
+          setEmail(e.target.value);
+          setError('');
+        }}
+        showError={!!error}
+        errorMessage={error}
+      />
+      <Button type="submit">Submit</Button>
+    </form>
+  );
+}
+```
+
+### Theme Toggle
+
+```tsx
+import { useTheme, Button } from 'beacon-ui';
+
+function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+  
+  return (
+    <Button onClick={toggleTheme}>
+      Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
+    </Button>
+  );
+}
+```
+
+### Accessible Form Controls
+
+```tsx
+import { Checkbox, RadioButton, Switch } from 'beacon-ui';
+
+function SettingsForm() {
+  const [notifications, setNotifications] = useState(false);
+  const [selectedOption, setSelectedOption] = useState('option1');
+  
+  return (
+    <form>
+      <Switch
+        checked={notifications}
+        onChange={setNotifications}
+        aria-label="Enable email notifications"
+      />
+      
+      <RadioButton
+        selected={selectedOption === 'option1'}
+        onChange={() => setSelectedOption('option1')}
+        label="Option 1"
+        showLabel
+        name="options"
+      />
+      
+      <RadioButton
+        selected={selectedOption === 'option2'}
+        onChange={() => setSelectedOption('option2')}
+        label="Option 2"
+        showLabel
+        name="options"
+      />
+    </form>
+  );
+}
+```
+
 ## Components
 
 - **Avatar** - User avatars with icon, text, or image support
@@ -83,6 +355,63 @@ function MyComponent() {
 - **Radio Button** - Radio button groups with label support
 - **Switch** - Toggle switches with optional icons
 
+## Component APIs
+
+### Button
+
+```tsx
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "filled" | "tonal" | "outline" | "link";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  cornerRadius?: 0 | 1 | 2 | 3 | 4 | 5;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  fillContainer?: boolean;
+  loading?: boolean;
+  children: React.ReactNode;
+}
+```
+
+### Checkbox
+
+```tsx
+interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  label?: string;
+  showLabel?: boolean;
+}
+```
+
+### Switch
+
+```tsx
+interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  showIcons?: boolean;
+}
+```
+
+### Input
+
+```tsx
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  status?: "default" | "active";
+  showLabel?: boolean;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  placeholderIcon?: React.ReactNode;
+  showError?: boolean;
+  errorMessage?: string;
+  numberPrefix?: string;
+  rounded?: boolean;
+  iconOnly?: boolean;
+}
+```
+
 ## Design Tokens
 
 Beacon Design System uses a comprehensive token system:
@@ -129,6 +458,12 @@ Full TypeScript support with exported types:
 
 ```tsx
 import type { 
+  ButtonProps,
+  CheckboxProps,
+  SwitchProps,
+  InputProps,
+  AvatarProps,
+  ChipProps,
   Theme, 
   HueVariant,
   ColorPrimitive,
@@ -156,6 +491,63 @@ Components adapt seamlessly across breakpoints:
 - Tablet (max-width: 1024px)
 - Mobile (max-width: 768px)
 
+## Troubleshooting
+
+### Components not styling correctly
+
+Make sure you've imported the tokens CSS:
+
+```tsx
+import 'beacon-ui/tokens';
+```
+
+### Theme not applying
+
+Ensure your app is wrapped with `ThemeProvider`:
+
+```tsx
+import { ThemeProvider } from 'beacon-ui';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark">
+      {/* Your components */}
+    </ThemeProvider>
+  );
+}
+```
+
+### TypeScript errors
+
+All component props extend standard HTML element types, so you can use any standard HTML attributes:
+
+```tsx
+<Button 
+  onClick={handleClick}
+  className="my-button"
+  id="submit-btn"
+  aria-label="Submit form"
+>
+  Submit
+</Button>
+```
+
+### Icons not showing
+
+Icons are in a separate package. Install and import them:
+
+```bash
+npm install beacon-icons
+```
+
+```tsx
+import { SearchIcon } from 'beacon-icons';
+
+<Button startIcon={<SearchIcon size="xs" />}>
+  Search
+</Button>
+```
+
 ## Documentation
 
 For detailed documentation, component APIs, and examples, visit:
@@ -163,7 +555,7 @@ https://beacon.uxraza.com/
 
 ## Version
 
-Current version: **3.1.4**
+Current version: **3.1.5**
 
 ## License
 
@@ -172,4 +564,3 @@ MIT
 ## Repository
 
 https://github.com/raza-ahmed/beacon
-

package/dist/components/Avatar.d.ts

@@ -1,20 +1,17 @@
-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;
+import { ComponentPropsWithRef } from "react";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarType = "icon" | "text" | "image";
+export type AvatarColor = "primary" | "neutral" | "success" | "critical" | "warning";
+export type AvatarVariant = "solid" | "faded";
+export interface AvatarProps extends ComponentPropsWithRef<"div"> {
+    size?: AvatarSize;
+    type?: AvatarType;
+    color?: AvatarColor;
+    variant?: AvatarVariant;
+    isRound?: boolean;
+    hasStroke?: boolean;
     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 {};
+export declare function Avatar({ size, type, color, variant, isRound, hasStroke, initials, imageUrl, className, style, ref, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Avatar.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAIjE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AACrF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC/D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAwBD,wBAAgB,MAAM,CAAC,EACrB,IAAW,EACX,IAAa,EACb,KAAiB,EACjB,OAAiB,EACjB,OAAe,EACf,SAAiB,EACjB,QAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAyLb"}

package/dist/components/Avatar.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
+import { useThemeSafe } from "../providers/ThemeProvider";
 import { UserPersonIcon } from "../icons";
 // Avatar container sizes
 const CONTAINER_SIZE_CONFIG = {
@@ -21,7 +22,8 @@ const TEXT_SIZE_CONFIG = {
     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, }) {
+export function Avatar({ size = "md", type = "icon", color = "primary", variant = "solid", isRound = false, hasStroke = false, initials = "JD", imageUrl, className, style, ref, ...rest }) {
+    useThemeSafe(); // Ensure theme context is available
     const [imageError, setImageError] = useState(false);
     const containerSize = CONTAINER_SIZE_CONFIG[size];
     const avatarStyles = useMemo(() => {
@@ -137,8 +139,8 @@ export function Avatar({ size, type, color, variant, isRound, hasStroke, theme,
         }
         baseStyles.backgroundColor = backgroundColor;
         baseStyles.color = textColor;
-        return baseStyles;
-    }, [containerSize, isRound, hasStroke, color, variant]);
+        return { ...baseStyles, ...style };
+    }, [containerSize, isRound, hasStroke, color, variant, style]);
     const handleImageError = () => {
         setImageError(true);
     };
@@ -170,5 +172,5 @@ export function Avatar({ size, type, color, variant, isRound, hasStroke, theme,
                 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() }) }) }));
+    return (_jsx("div", { ref: ref, className: className, style: avatarStyles, ...rest, children: renderContent() }));
 }

package/dist/components/Button.d.ts

@@ -1,21 +1,23 @@
-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;
+import { ComponentPropsWithRef } from "react";
+export type ButtonVariant = "filled" | "tonal" | "outline" | "link";
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type CornerRadiusStep = 0 | 1 | 2 | 3 | 4 | 5;
+export type JustifyContent = "center" | "space-between";
+export type ButtonState = "default" | "hovered" | "focused" | "pressed";
+export type ButtonColor = "primary" | "success" | "critical" | "warning";
+export interface ButtonProps extends Omit<ComponentPropsWithRef<"button">, "type"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    cornerRadius?: CornerRadiusStep;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    fillContainer?: boolean;
+    justifyContent?: JustifyContent;
+    loading?: boolean;
+    state?: ButtonState;
+    color?: ButtonColor;
+    type?: "button" | "submit" | "reset";
+    children: React.ReactNode;
 }
-export declare function Button({ variant, size, cornerRadius, hasStartIcon, hasEndIcon, fillContainer, justifyContent, state, theme, hue, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Button({ variant, size, cornerRadius, startIcon, endIcon, fillContainer, justifyContent, loading, disabled, state: stateProp, color, type, children, className, style, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ref, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,eAAe,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkED,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,IAAW,EACX,YAAgB,EAChB,SAAS,EACT,OAAO,EACP,aAAqB,EACrB,cAAyB,EACzB,OAAe,EACf,QAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAiPb"}