automoby-kit 1.0.12 → 1.0.13

package/dist/esm/Tabs.js

@@ -1 +1,52 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import i from"react";import r from"./utils.js";const renderBadge=(e,i,a,l)=>void 0===e?null:t("div",{className:r("flex items-center justify-center rounded-[5px] font-sans font-bold text-white","transition-colors duration-200",l?"size-6 text-[14px] pt-0.5":"size-[25px] text-[14px] pt-[3px]",a?"bg-midnight":i?"bg-primary":"bg-neutral-main"),children:t("p",{className:"leading-[24px] whitespace-pre",dir:"auto",children:e})}),renderTabContent=(i,a,l)=>{const n=void 0!==i.count;return e("div",{className:r("flex flex-row items-center justify-start transition-colors duration-200","gap-1.5"),children:[n&&renderBadge(i.count,a,i.disabled,l),t("div",{className:r("font-sans text-nowrap text-right transition-colors duration-200",l?"text-[14px]":a?"text-[16px]":"text-[18px]",i.disabled?"font-normal text-midnight":a?"font-bold text-primary":"font-normal text-neutral-main",l?"leading-[24px]":a?"leading-normal":"leading-[1.9]"),children:t("p",{className:"whitespace-pre",dir:"auto",children:i.label})})]})},a=i.forwardRef(({items:i,activeTab:a,onTabChange:l,className:n,isMobile:o,...s},d)=>e("div",{ref:d,className:r("relative w-full",n),...s,children:[t("div",{className:"box-border flex flex-row items-center justify-end p-0 relative w-full",children:i.map(i=>((i,a,l,n)=>{const o=i.id===a;return e("div",{className:r("box-border flex flex-col items-center justify-between relative shrink-0","cursor-pointer transition-all duration-200",l?"h-12 px-3":"h-14 px-4",o?l?"pt-[11px] pb-0":"pt-3.5 pb-0":"py-0 justify-center",i.disabled&&"cursor-not-allowed opacity-50",!i.disabled&&"hover:opacity-80"),onClick:()=>((e,t,i)=>{t||i(e)})(i.id,i.disabled,n),onKeyDown:e=>((e,t,i,r)=>{"Enter"!==e.key&&" "!==e.key||i||(e.preventDefault(),r(t))})(e,i.id,i.disabled,n),tabIndex:i.disabled?-1:0,role:"tab","aria-selected":o,"aria-disabled":i.disabled,children:[renderTabContent(i,o,l),o&&t("div",{className:"bg-primary h-1 rounded-tl-[8px] rounded-tr-[8px] shrink-0 w-full"})]},i.id)})(i,a,o,l))}),t("div",{className:"absolute border-midnight-light border-[0px_0px_1px] border-solid bottom-[-0.5px] left-0 right-0 top-0 pointer-events-none"})]}));a.displayName="Tabs";export{a as Tabs};
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import cn from './utils.js';
+import { useMobile } from './contexts.js';
+
+// Helper functions moved outside component
+const handleTabClick = (tabId, disabled, onTabChange) => {
+    if (!disabled) {
+        onTabChange(tabId);
+    }
+};
+const handleKeyDown = (e, tabId, disabled, onTabChange) => {
+    if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+        e.preventDefault();
+        onTabChange(tabId);
+    }
+};
+const renderBadge = (count, isActive, disabled, isMobile) => {
+    if (count === undefined)
+        return null;
+    return (jsx("div", { className: cn('flex items-center justify-center rounded-[5px] font-sans font-bold text-white', 'transition-colors duration-200', isMobile
+            ? 'size-6 text-[14px] pt-0.5'
+            : 'size-[25px] text-[14px] pt-[3px]', disabled ? 'bg-midnight' : isActive ? 'bg-primary' : 'bg-neutral-main'), children: jsx("p", { className: "leading-[24px] whitespace-pre", dir: "auto", children: count }) }));
+};
+const renderTabContent = (item, isActive, isMobile) => {
+    const hasCount = item.count !== undefined;
+    return (jsxs("div", { className: cn('flex flex-row items-center justify-start transition-colors duration-200', isMobile ? 'gap-1.5' : 'gap-1.5'), children: [hasCount && renderBadge(item.count, isActive, item.disabled, isMobile), jsx("div", { className: cn('font-sans text-nowrap text-right transition-colors duration-200', isMobile ? 'text-[14px]' : isActive ? 'text-[16px]' : 'text-[18px]', item.disabled
+                    ? 'font-normal text-midnight'
+                    : isActive
+                        ? 'font-bold text-primary'
+                        : 'font-normal text-neutral-main', isMobile
+                    ? 'leading-[24px]'
+                    : isActive
+                        ? 'leading-normal'
+                        : 'leading-[1.9]'), children: jsx("p", { className: "whitespace-pre", dir: "auto", children: item.label }) })] }));
+};
+const renderTab = (item, activeTab, isMobile, onTabChange) => {
+    const isActive = item.id === activeTab;
+    return (jsxs("div", { className: cn('box-border flex flex-col items-center justify-between relative shrink-0', 'cursor-pointer transition-all duration-200', isMobile ? 'h-12 px-3' : 'h-14 px-4', isActive
+            ? isMobile
+                ? 'pt-[11px] pb-0'
+                : 'pt-3.5 pb-0'
+            : 'py-0 justify-center', item.disabled && 'cursor-not-allowed opacity-50', !item.disabled && 'hover:opacity-80'), onClick: () => handleTabClick(item.id, item.disabled, onTabChange), onKeyDown: (e) => handleKeyDown(e, item.id, item.disabled, onTabChange), tabIndex: item.disabled ? -1 : 0, role: "tab", "aria-selected": isActive, "aria-disabled": item.disabled, children: [renderTabContent(item, isActive, isMobile), isActive && (jsx("div", { className: "bg-primary h-1 rounded-tl-[8px] rounded-tr-[8px] shrink-0 w-full" }))] }, item.id));
+};
+const Tabs = React.forwardRef(({ items, activeTab, onTabChange, className, isMobile, ...props }, ref) => {
+    const detectedIsMobile = useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    return (jsxs("div", { ref: ref, className: cn('relative w-full', className), ...props, children: [jsx("div", { className: "box-border flex flex-row items-center justify-end p-0 relative w-full", children: items.map((item) => renderTab(item, activeTab, actualIsMobile, onTabChange)) }), jsx("div", { className: "absolute border-midnight-light border-[0px_0px_1px] border-solid bottom-[-0.5px] left-0 right-0 top-0 pointer-events-none" })] }));
+});
+Tabs.displayName = 'Tabs';
+
+export { Tabs };

package/dist/esm/Typography.js

@@ -1 +1,60 @@
-import t from"react";import e from"./utils.js";const o={h1:"text-[36px] font-[var(--font-weight-fat)]",h2:"text-[32px] font-[var(--font-weight-fat)]",h3:"text-[28px] font-[var(--font-weight-fat)]",h4:"text-[24px] font-[var(--font-weight-heavy)]",h5:"text-[22px] font-[var(--font-weight-heavy)]",h6:"text-[20px] font-[var(--font-weight-heavy)]","body-xl-heavy":"text-[20px] font-[var(--font-weight-heavy)]","body-l-heavy":"text-[18px] font-[var(--font-weight-heavy)]","body-l-bold":"text-[18px] font-[var(--font-weight-bold)]","body-l-medium":"text-[18px] font-[var(--font-weight-medium)]","body-m-heavy":"text-[16px] font-[var(--font-weight-heavy)]","body-m-bold":"text-[16px] font-[var(--font-weight-bold)]","body-m-medium":"text-[16px] font-[var(--font-weight-medium)]","body-s-heavy":"text-[14px] font-[var(--font-weight-heavy)]","body-s-bold":"text-[14px] font-[var(--font-weight-bold)]","body-s-medium":"text-[14px] font-[var(--font-weight-medium)]","body-ms-bold":"text-[13px] font-[var(--font-weight-bold)]","body-ms-medium":"text-[13px] font-[var(--font-weight-medium)]","body-xs-bold":"text-[12px] font-[var(--font-weight-bold)]","body-xs-medium":"text-[12px] font-[var(--font-weight-medium)]","body-t-bold":"text-[10px] font-[var(--font-weight-bold)]","body-t-medium":"text-[10px] font-[var(--font-weight-medium)]","body-ss-medium":"text-[9px] font-[var(--font-weight-medium)]"},getTypographyClasses=t=>o[t],a={primary:"text-[var(--color-primary)]",secondary:"text-[var(--color-secondary)]","neutral-darker":"text-[var(--color-neutral-darker)]","neutral-dark":"text-[var(--color-neutral-dark)]","neutral-main":"text-[var(--color-neutral-main)]",white:"text-[var(--color-white)]",inherit:"text-inherit"},r=t.forwardRef(({variant:r="body-m-medium",color:n="inherit",as:i,className:d,children:x,...f},h)=>{const m=i||(t=>t.startsWith("h")?t.split("-")[0]:"p")(r);return t.createElement(m,{ref:h,className:e(o[r],a[n],"leading-[var(--leading-default)]",d),...f},x)});r.displayName="Typography";export{r as Typography,getTypographyClasses};
+import React from 'react';
+import cn from './utils.js';
+
+const variantClasses = {
+    // Headings with Fat weight (900)
+    h1: 'text-[36px] font-[var(--font-weight-fat)]',
+    h2: 'text-[32px] font-[var(--font-weight-fat)]',
+    h3: 'text-[28px] font-[var(--font-weight-fat)]',
+    h4: 'text-[24px] font-[var(--font-weight-heavy)]',
+    h5: 'text-[22px] font-[var(--font-weight-heavy)]',
+    h6: 'text-[20px] font-[var(--font-weight-heavy)]',
+    // Body Copy with specific weight variants
+    'body-xl-heavy': 'text-[20px] font-[var(--font-weight-heavy)]',
+    'body-l-heavy': 'text-[18px] font-[var(--font-weight-heavy)]',
+    'body-l-bold': 'text-[18px] font-[var(--font-weight-bold)]',
+    'body-l-medium': 'text-[18px] font-[var(--font-weight-medium)]',
+    'body-m-heavy': 'text-[16px] font-[var(--font-weight-heavy)]',
+    'body-m-bold': 'text-[16px] font-[var(--font-weight-bold)]',
+    'body-m-medium': 'text-[16px] font-[var(--font-weight-medium)]',
+    'body-s-heavy': 'text-[14px] font-[var(--font-weight-heavy)]',
+    'body-s-bold': 'text-[14px] font-[var(--font-weight-bold)]',
+    'body-s-medium': 'text-[14px] font-[var(--font-weight-medium)]',
+    'body-ms-bold': 'text-[13px] font-[var(--font-weight-bold)]',
+    'body-ms-medium': 'text-[13px] font-[var(--font-weight-medium)]',
+    'body-xs-bold': 'text-[12px] font-[var(--font-weight-bold)]',
+    'body-xs-medium': 'text-[12px] font-[var(--font-weight-medium)]',
+    'body-t-bold': 'text-[10px] font-[var(--font-weight-bold)]',
+    'body-t-medium': 'text-[10px] font-[var(--font-weight-medium)]',
+    'body-ss-medium': 'text-[9px] font-[var(--font-weight-medium)]',
+};
+// Export for reuse in other components
+const getTypographyClasses = (variant) => {
+    return variantClasses[variant];
+};
+const colorClasses = {
+    primary: 'text-[var(--color-primary)]',
+    secondary: 'text-[var(--color-secondary)]',
+    'neutral-darker': 'text-[var(--color-neutral-darker)]',
+    'neutral-dark': 'text-[var(--color-neutral-dark)]',
+    'neutral-main': 'text-[var(--color-neutral-main)]',
+    white: 'text-[var(--color-white)]',
+    inherit: 'text-inherit',
+};
+const getDefaultElement = (variant) => {
+    if (variant.startsWith('h'))
+        return variant.split('-')[0]; // h1, h2, etc.
+    return 'p';
+};
+const Typography = React.forwardRef(({ variant = 'body-m-medium', color = 'inherit', as, className, children, ...props }, ref) => {
+    const Element = as || getDefaultElement(variant);
+    return React.createElement(Element, {
+        ref,
+        className: cn(variantClasses[variant], colorClasses[color], 'leading-[var(--leading-default)]', // 180% line height
+        className),
+        ...props,
+    }, children);
+});
+Typography.displayName = 'Typography';
+
+export { Typography, getTypographyClasses };

package/dist/esm/components/Accordion/Accordion.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface AccordionProps {
+    /** The header text content */
+    title: string;
+    /** The body text content */
+    body: string;
+    /** Icon to display at the start of the header */
+    startIcon?: React.ReactNode;
+    /** Whether the accordion is expanded (controlled) */
+    isExpanded?: boolean;
+    /** Callback when the accordion state changes */
+    onToggle?: (isExpanded: boolean) => void;
+    /** Default expanded state (uncontrolled) */
+    defaultExpanded?: boolean;
+    /** Additional CSS classes for the root element */
+    className?: string;
+    /** Unique identifier for the accordion */
+    id?: string;
+    /** Whether the accordion is disabled */
+    disabled?: boolean;
+    /** Whether the component is in mobile mode (optional, auto-detected if not provided) */
+    isMobile?: boolean;
+}
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export { Accordion };

package/dist/esm/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,175 @@
+import { type AccordionProps } from './Accordion';
+type StoryArgs = AccordionProps & {
+    startIconType?: 'none' | 'number' | 'user' | 'help' | 'settings' | 'info';
+};
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        title: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        body: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        startIconType: {
+            name: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        defaultExpanded: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        isMobile: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        startIcon: {
+            table: {
+                disable: boolean;
+            };
+        };
+        isExpanded: {
+            table: {
+                disable: boolean;
+            };
+        };
+        onToggle: {
+            table: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    ({ startIconType, ...args }: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        title: string;
+        body: string;
+        startIconType: string;
+        defaultExpanded: boolean;
+        disabled: boolean;
+        isMobile: boolean;
+    };
+};
+export declare const Mobile: {
+    ({ startIconType, ...args }: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        title: string;
+        body: string;
+        startIconType: string;
+        defaultExpanded: boolean;
+        disabled: boolean;
+        isMobile: boolean;
+    };
+};
+export declare const Desktop: {
+    ({ startIconType, ...args }: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        defaultExpanded: boolean;
+        title: string;
+        body: string;
+        startIconType: string;
+        disabled: boolean;
+        isMobile: boolean;
+    };
+};
+export declare const ExpandedByDefault: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        defaultExpanded: boolean;
+        title: string;
+        body: string;
+        startIconType: string;
+        disabled: boolean;
+        isMobile: boolean;
+    };
+};
+export declare const Disabled: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        disabled: boolean;
+        title: string;
+        body: string;
+        startIconType: string;
+        defaultExpanded: boolean;
+        isMobile: boolean;
+    };
+};
+export declare const WithDifferentIcons: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        body: string;
+        title: string;
+        startIconType: string;
+        defaultExpanded: boolean;
+        disabled: boolean;
+        isMobile: boolean;
+    };
+};
+export declare const MultipleAccordions: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const MobileFAQ: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const Controlled: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        title: string;
+        body: string;
+        startIconType: string;
+        defaultExpanded: boolean;
+        disabled: boolean;
+        isMobile: boolean;
+    };
+};
+export declare const LongContent: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        title: string;
+        body: string;
+        startIconType: string;
+        defaultExpanded: boolean;
+        disabled: boolean;
+        isMobile: boolean;
+    };
+};

package/dist/esm/components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the backdrop is visible
+     */
+    isOpen?: boolean;
+    /**
+     * Callback function when backdrop is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Whether to show a blur effect
+     */
+    blur?: boolean;
+    /**
+     * Custom z-index (defaults to z-51 which is drawer z-index + 1)
+     */
+    zIndex?: number;
+}
+export declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/Backdrop/Backdrop.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Backdrop } from './Backdrop';
+declare const meta: Meta<typeof Backdrop>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const Interactive: Story;
+export declare const WithBlur: Story;
+export declare const WithContent: Story;

package/dist/esm/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+    /**
+     * Whether the component is in mobile mode (optional, auto-detected if not provided)
+     */
+    isMobile?: boolean;
+}
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+export { Breadcrumb };

package/dist/esm/components/Breadcrumb/Breadcrumb.stories.d.ts

@@ -0,0 +1,177 @@
+import { BreadcrumbProps } from './Breadcrumb';
+type StoryArgs = BreadcrumbProps;
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        items: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        className: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        isMobile: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+    };
+    args: {
+        items: ({
+            label: string;
+            href: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            href?: undefined;
+            onClick?: undefined;
+        })[];
+        isMobile: boolean;
+    };
+};
+export default _default;
+export declare const Default: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        items: ({
+            label: string;
+            href: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            href?: undefined;
+            onClick?: undefined;
+        })[];
+    };
+};
+export declare const ShortBreadcrumb: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        items: ({
+            label: string;
+            href: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            href?: undefined;
+            onClick?: undefined;
+        })[];
+    };
+};
+export declare const LongBreadcrumb: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        items: ({
+            label: string;
+            href: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            href?: undefined;
+            onClick?: undefined;
+        })[];
+    };
+};
+export declare const WithClickHandlers: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        items: ({
+            label: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            onClick?: undefined;
+        })[];
+    };
+};
+export declare const WithMixedNavigation: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        items: ({
+            label: string;
+            href: string;
+            onClick?: undefined;
+        } | {
+            label: string;
+            onClick: () => void;
+            href?: undefined;
+        } | {
+            label: string;
+            href: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            href?: undefined;
+            onClick?: undefined;
+        })[];
+    };
+};
+export declare const EnglishContent: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        items: ({
+            label: string;
+            href: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            href?: undefined;
+            onClick?: undefined;
+        })[];
+    };
+};
+export declare const DesktopView: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        isMobile: boolean;
+        items: ({
+            label: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            onClick?: undefined;
+        })[];
+    };
+};
+export declare const MobileView: {
+    (args: StoryArgs): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        isMobile: boolean;
+        items: ({
+            label: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            onClick?: undefined;
+        })[];
+    };
+};
+export declare const ResponsiveComparison: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TypographyVariant } from '../Typography/Typography';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    textVariant?: TypographyVariant;
+    icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
+    loading?: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/Button/Button.stories.d.ts

@@ -0,0 +1,100 @@
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("@/components/Button/Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        variant: {
+            name: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            defaultValue: string;
+        };
+        size: {
+            name: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            defaultValue: string;
+        };
+        textVariant: {
+            name: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        disabled: {
+            name: string;
+            control: {
+                type: string;
+            };
+            defaultValue: boolean;
+        };
+        loading: {
+            name: string;
+            control: {
+                type: string;
+            };
+            defaultValue: boolean;
+        };
+        iconPosition: {
+            name: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            defaultValue: string;
+        };
+        children: {
+            name: string;
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
+    };
+};
+export default _default;
+type StoryProps = {
+    variant: 'primary' | 'secondary' | 'tertiary' | 'ghost';
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    disabled: boolean;
+    loading: boolean;
+    children: string;
+};
+export declare const Playground: {
+    (args: StoryProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        variant: string;
+        size: string;
+        disabled: boolean;
+        loading: boolean;
+        children: string;
+    };
+};
+export declare const AllVariantsAndSizes: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const WithIcon: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const DisabledStates: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const WithCustomTypography: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};