automoby-kit 1.0.0

package/dist/types/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;
+    /** Force mobile mode (optional, for testing/storybook) */
+    forceMobile?: boolean;
+}
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export { Accordion };

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

@@ -0,0 +1,174 @@
+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;
+            };
+        };
+        forceMobile: {
+            name: string;
+            control: {
+                type: 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;
+        forceMobile: 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;
+        forceMobile: 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;
+        forceMobile: 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;
+        forceMobile: 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;
+        forceMobile: 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;
+        forceMobile: 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;
+        forceMobile: 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;
+        forceMobile: boolean;
+    };
+};

package/dist/types/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/types/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/types/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+    testIsMobile?: boolean;
+}
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+export { Breadcrumb };

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

@@ -0,0 +1,176 @@
+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;
+        };
+        testIsMobile: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+    };
+    args: {
+        items: ({
+            label: string;
+            href: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            href?: undefined;
+            onClick?: undefined;
+        })[];
+    };
+};
+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: {
+        testIsMobile: 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: {
+        testIsMobile: boolean;
+        items: ({
+            label: string;
+            onClick: () => void;
+        } | {
+            label: string;
+            onClick?: undefined;
+        })[];
+    };
+};
+export declare const ResponsiveComparison: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

package/dist/types/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/types/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;
+};

package/dist/types/components/Chips/Chips.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface ChipsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The variant/color of the chip
+     */
+    variant?: 'purple' | 'red' | 'green' | 'orange' | 'blue' | 'white' | 'disabled';
+    /**
+     * Size of the chip - affects padding and font size. If not provided, automatically detected from MobileContext
+     */
+    size?: 'mobile' | 'desktop';
+    /**
+     * Text content of the chip
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the chip is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler for the chip
+     */
+    onClick?: () => void;
+    /**
+     * Click handler for the X icon/close button
+     */
+    onIconClick?: () => void;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Override mobile detection
+     */
+    isMobile?: boolean;
+}
+export declare const Chips: React.ForwardRefExoticComponent<ChipsProps & React.RefAttributes<HTMLDivElement>>;
+export default Chips;

package/dist/types/components/Chips/Chips.stories.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("@/components/Chips/Chips").ChipsProps & React.RefAttributes<HTMLDivElement>>;
+    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;
+        };
+        isMobile: {
+            name: string;
+            control: {
+                type: string;
+            };
+            defaultValue: boolean;
+        };
+        disabled: {
+            name: string;
+            control: {
+                type: string;
+            };
+            defaultValue: boolean;
+        };
+        children: {
+            name: string;
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
+    };
+};
+export default _default;
+type StoryProps = {
+    variant: 'purple' | 'red' | 'green' | 'orange' | 'blue' | 'white';
+    size: 'mobile' | 'desktop';
+    isMobile: boolean;
+    disabled: boolean;
+    children: string;
+};
+export declare const Playground: {
+    (args: StoryProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    args: {
+        variant: string;
+        size: string;
+        isMobile: boolean;
+        disabled: boolean;
+        children: string;
+    };
+};
+export declare const AllVariants: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const AutoResponsive: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const DisabledStates: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const InteractiveExample: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const ResponsiveComparison: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

package/dist/types/components/Divider/Divider.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Width of the divider
+     * @default "100%"
+     */
+    width?: string | number;
+    /**
+     * Height (thickness) of the divider
+     * @default 1
+     */
+    height?: string | number;
+    /**
+     * Orientation of the divider
+     * @default "horizontal"
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Color variant of the divider
+     * @default "neutral-light"
+     */
+    variant?: 'neutral-light' | 'neutral-main' | 'primary';
+}
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+export { Divider };