@taiv/ui 1.12.0 → 1.13.0

package/dist/assets/assets.d.ts

@@ -0,0 +1,5 @@
+export declare const brand: {
+    src: string;
+    filename: string;
+}[];
+//# sourceMappingURL=assets.d.ts.map

package/dist/assets/assets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assets.d.ts","sourceRoot":"","sources":["../../src/assets/assets.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,KAAK;;;GASjB,CAAC"}

package/dist/assets/assets.js

@@ -0,0 +1,18 @@
+import taivIconBlack from './brand/taiv-icon-black.svg';
+import taivIconDark from './brand/taiv-icon-dark.svg';
+import taivIconWhite from './brand/taiv-icon-white.svg';
+import taivLogoBlack from './brand/taiv-logo-black.svg';
+import taivLogoDark from './brand/taiv-logo-dark.svg';
+import taivLogoOld from './brand/taiv-logo-old.svg';
+import taivLogoPurple from './brand/taiv-logo-purple.svg';
+import taivLogoWhite from './brand/taiv-logo-white.svg';
+export const brand = [
+    { src: taivIconBlack, filename: 'taiv-icon-black.svg' },
+    { src: taivIconDark, filename: 'taiv-icon-dark.svg' },
+    { src: taivIconWhite, filename: 'taiv-icon-white.svg' },
+    { src: taivLogoBlack, filename: 'taiv-logo-black.svg' },
+    { src: taivLogoDark, filename: 'taiv-logo-dark.svg' },
+    { src: taivLogoOld, filename: 'taiv-logo-old.svg' },
+    { src: taivLogoPurple, filename: 'taiv-logo-purple.svg' },
+    { src: taivLogoWhite, filename: 'taiv-logo-white.svg' },
+];

package/dist/assets/icons.d.ts

@@ -0,0 +1,6 @@
+export declare const actions: (string | import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>)[][];
+export declare const controls: (string | import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>)[][];
+export declare const feedback: (string | import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>)[][];
+export declare const navigation: string[][];
+export declare const icons: (string | import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>)[][];
+//# sourceMappingURL=icons.d.ts.map

package/dist/assets/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/assets/icons.ts"],"names":[],"mappings":"AAuBE,eAAO,MAAM,OAAO,kJAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,kJAYpB,CAAC;AAEA,eAAO,MAAM,QAAQ,kJAWpB,CAAC;AAEF,eAAO,MAAM,UAAU,YAYtB,CAAC;AAEF,eAAO,MAAM,KAAK,kJAAwD,CAAC"}

package/dist/assets/icons.js

@@ -0,0 +1,57 @@
+import { IconArrowDown, IconArrowUp, IconCodeVariablePlus, IconCaretDownFilled, IconCaretUpFilled, IconCircleFilled, IconDeviceTv, IconEdit, IconHistory, IconPlus, IconRefresh, IconReload, IconSwitchHorizontal, IconTerminal2, IconTransfer, IconTrash, IconVolume, IconVolume2, IconVolume3, } from '@tabler/icons-react';
+import { colors } from '../constants/colors';
+export const actions = [
+    [IconPlus, 'Add'],
+    [IconTrash, 'Delete'],
+    [IconEdit, 'Edit'],
+    [IconRefresh, 'Refresh'],
+    [IconReload, 'Reboot Device'],
+    [IconHistory, 'Reset Factory Settings'],
+    [IconTerminal2, 'Dashboard Shell'],
+    [IconSwitchHorizontal, 'Swap Device'],
+    [IconTransfer, 'Swap Device'],
+    [IconDeviceTv, 'Device Peripherals'],
+    ['fas fa-plus', 'Add'],
+    ['fas fa-trash-alt', 'Delete'],
+    ['fas fa-upload', 'Upload'],
+    ['fas fa-power-off', 'Power On/Off'],
+];
+export const controls = [
+    [IconArrowDown, 'Sort Ascending'],
+    [IconArrowUp, 'Sort Descending'],
+    [IconCaretDownFilled, 'Expand'],
+    [IconCaretUpFilled, 'Collapse'],
+    [IconVolume3, 'Volume Muted'],
+    [IconVolume2, 'Volume Low'],
+    [IconVolume, 'Volume High'],
+    ['fas fa-search', 'Search'],
+    ['fas fa-chevron-right', 'Next'],
+    ['fas fa-chevron-left', 'Previous'],
+    ['fa fa-times', 'Close'],
+];
+export const feedback = [
+    [IconCircleFilled, colors.success[200], 'Status Online'],
+    [IconCircleFilled, colors.error[200], 'Status Offline'],
+    ['fas fa-info-circle', colors.primary[300], 'Info'],
+    ['fas fa-circle-question', colors.primary[300], 'Help'],
+    ['fas fa-check-circle', colors.success[200], 'Success'],
+    ['fas fa-exclamation-triangle', colors.warning[200], 'Warning'],
+    ['fas fa-exclamation-circle', colors.error[200], 'Error'],
+    ['fas fa-trash-can', colors.error[200], 'Delete'],
+    ['fas fa-copy', colors.primary[300], 'Copy to Clipboard'],
+    [IconCodeVariablePlus, 'Add Device'],
+];
+export const navigation = [
+    ['fas fa-desktop', 'TV Control/Devices'],
+    ['fas fa-cog', 'Settings'],
+    ['fas fa-image', 'Content'],
+    ['fas fa-random', 'Playlists'],
+    ['fas fa-calendar', 'Schedule'],
+    ['fas fa-dollar-sign', 'Payouts'],
+    ['fa fa-ban', 'Ad Preferences'],
+    ['fas fa-object-group', 'Device Groups'],
+    ['fas fa-lock', 'Super Admin'],
+    ['fas fa-external-link-square-alt', 'Open External Link'],
+    ['fas fa-sign-out-alt', 'Sign Out'],
+];
+export const icons = [...actions, ...controls, ...feedback, ...navigation];

package/dist/components/Info/Modals/Modal/Modal.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Modal } from './Modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=Modal.stories.d.ts.map

package/dist/components/Info/Modals/Modal/Modal.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAMhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAoC5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAenC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC"}

package/dist/components/Info/Modals/Modal/Modal.stories.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Modal } from './Modal';
+import { Text } from '../../../Typography/Text/Text';
+import { Button } from '../../../Inputs/Buttons/Button/Button';
+import { IconEdit, IconTrash } from '@tabler/icons-react';
+import taivLogo from '../../../../assets/brand/taiv-logo-dark.svg';
+const meta = {
+    title: 'Components/Info/Modals/Modal',
+    component: Modal,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        title: {
+            control: { type: 'text' },
+            description: 'Modal title',
+            table: { type: { summary: 'string' } },
+        },
+        subtitle: {
+            control: { type: 'text' },
+            description: 'Optional subtitle below the title',
+            table: { type: { summary: 'string' } },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Custom width override',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: "'40rem'" },
+            },
+        },
+        children: { control: false, description: 'Modal content', table: { type: { summary: 'ReactNode' } } },
+        opened: { control: false, description: 'Controls the state of the modal', table: { type: { summary: 'boolean' } } },
+        onClose: { control: false, description: 'Callback function when the modal is closed', table: { type: { summary: '() => void' } } },
+        icon: { control: { type: 'select' },
+            options: ['Edit', 'Trash', 'TaivLogo'],
+            mapping: {
+                Edit: _jsx(IconEdit, {}),
+                Trash: _jsx(IconTrash, {}),
+                TaivLogo: _jsx("img", { src: taivLogo, width: 64, height: 64, alt: "Taiv Logo" }),
+            }, description: 'Custom icon or image to display at the top of the modal', table: { type: { summary: 'ReactNode' } } },
+    },
+};
+export default meta;
+const ModalWithState = ({ title, subtitle, children, width, icon }) => {
+    const [opened, setOpened] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpened(true), children: "Open Modal" }), _jsx(Modal, { opened: opened, onClose: () => setOpened(false), title: title, subtitle: subtitle, width: width, icon: icon, children: children })] }));
+};
+export const Default = {
+    render: (args) => (_jsx(ModalWithState, { ...args, children: _jsx(Text, { children: "This is the modal content area where you can place any React components." }) })),
+    args: {
+        title: 'Modal Title',
+        subtitle: 'Optional subtitle text',
+        children: undefined,
+        opened: undefined,
+        onClose: undefined,
+        icon: undefined,
+        width: undefined,
+    },
+};

package/dist/components/Info/Modals/Modals.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { modalVariants } from './variants';
+interface ModalHookArgs {
+    variant: keyof typeof modalVariants;
+    title: string;
+    message: string;
+}
+declare const meta: Meta<ModalHookArgs>;
+export default meta;
+type Story = StoryObj<ModalHookArgs>;
+export declare const Default: Story;
+export declare const InfoVariants: Story;
+export declare const ConfirmationDefault: Story;
+export declare const ConfirmationVariants: Story;
+export declare const FormModalDemo: Story;
+//# sourceMappingURL=Modals.stories.d.ts.map

package/dist/components/Info/Modals/Modals.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modals.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/Modals.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,OAAO,aAAa,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CA+B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAoBrC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAeF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAsBF,eAAO,MAAM,mBAAmB,EAAE,KAOjC,CAAC;AAeF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AA8BF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

package/dist/components/Info/Modals/Modals.stories.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { useInfoModal } from '../../../hooks/useInfoModal';
+import { useConfirmationModal } from '../../../hooks/useConfirmationModal';
+import { FormModal } from './FormModal/FormModal';
+import { TextInput } from '../../Inputs/TextInputs/TextInput/TextInput';
+import { Title } from '../../Typography/Title/Title';
+import { modalVariants } from './variants';
+const meta = {
+    title: 'Hooks/Modals',
+    tags: ['!dev'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: Object.keys(modalVariants),
+            description: 'Preset modal style',
+            table: {
+                type: { summary: "'confirm' | 'info' | 'success' | 'error' | 'warning' | 'cancel'" },
+                defaultValue: { summary: "'info'" },
+            },
+        },
+        title: {
+            control: { type: 'text' },
+            description: 'Optional title override',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        message: {
+            control: { type: 'text' },
+            description: 'Optional message override',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+const DefaultDemo = (args) => {
+    const { show } = useInfoModal();
+    return (_jsx(Button, { onClick: () => show({
+            variant: args.variant,
+            title: args.title || undefined,
+            message: args.message || undefined,
+        }), children: "Show Info Modal" }));
+};
+export const Default = {
+    args: {
+        variant: 'info',
+        message: undefined,
+        title: undefined,
+    },
+    render: (args) => _jsx(DefaultDemo, { ...args }),
+};
+const InfoVariantsDemo = () => {
+    const { show } = useInfoModal();
+    return (_jsxs(Group, { gap: "0.5rem", children: [_jsx(Button, { variant: "primary", onClick: () => show({ variant: 'info' }), children: "Info" }), _jsx(Button, { variant: "success", onClick: () => show({ variant: 'success' }), children: "Success" }), _jsx(Button, { variant: "cancel", onClick: () => show({ variant: 'error' }), children: "Error" }), _jsx(Button, { variant: "warning", onClick: () => show({ variant: 'warning' }), children: "Warning" })] }));
+};
+export const InfoVariants = {
+    render: () => _jsx(InfoVariantsDemo, {}),
+};
+const ConfirmationDefaultDemo = (args) => {
+    const { show } = useConfirmationModal();
+    return (_jsx(Button, { onClick: () => show({
+            variant: args.variant,
+            title: args.title || undefined,
+            message: args.message || undefined,
+            onConfirm: () => console.log('Confirmed'),
+            onCancel: () => console.log('Cancelled'),
+        }), children: "Show Confirmation Modal" }));
+};
+export const ConfirmationDefault = {
+    args: {
+        variant: 'confirm',
+        title: undefined,
+        message: undefined,
+    },
+    render: (args) => _jsx(ConfirmationDefaultDemo, { ...args }),
+};
+const ConfirmationVariantsDemo = () => {
+    const { show } = useConfirmationModal();
+    return (_jsxs(Group, { gap: "0.5rem", children: [_jsx(Button, { variant: "primary", onClick: () => show({ variant: 'confirm', onConfirm: () => console.log('confirmed') }), children: "Confirm" }), _jsx(Button, { variant: "cancel", onClick: () => show({ variant: 'cancel', onConfirm: () => console.log('confirmed') }), children: "Cancel" }), _jsx(Button, { variant: "warning", onClick: () => show({ variant: 'warning', onConfirm: () => console.log('confirmed') }), children: "Warning" }), _jsx(Button, { variant: "success", onClick: () => show({ variant: 'success', onConfirm: () => console.log('confirmed') }), children: "Success" })] }));
+};
+export const ConfirmationVariants = {
+    render: () => _jsx(ConfirmationVariantsDemo, {}),
+};
+const FormModalExample = () => {
+    const [opened, setOpened] = useState(false);
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpened(true), children: "Add User" }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), modalVariant: "info", confirmLabel: "Submit", confirmButtonDisabled: name.trim().length === 0, children: _jsxs(Stack, { gap: "1rem", align: "center", children: [_jsx(Title, { variant: "cardSubheader", align: "center", children: "Fill out the user information below." }), _jsx(TextInput, { label: "Name", placeholder: "Enter a name", value: name, onChange: (e) => setName(e.target.value) }), _jsx(TextInput, { label: "Email", placeholder: "Enter an email", value: email, onChange: (e) => setEmail(e.target.value) })] }) })] }));
+};
+export const FormModalDemo = {
+    render: () => _jsx(FormModalExample, {}),
+};

package/dist/components/Info/Notifications/Notifications.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { NotificationProvider } from './NotificationProvider/NotificationProvider';
+declare const meta: Meta<typeof NotificationProvider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const GenericError: Story;
+export declare const AsyncNotifications: Story;
+//# sourceMappingURL=Notifications.stories.d.ts.map

package/dist/components/Info/Notifications/Notifications.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Notifications/Notifications.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAKnF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAuC3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqBnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAgBF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAQF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAyCF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC"}

package/dist/components/Info/Notifications/Notifications.stories.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { NotificationProvider } from './NotificationProvider/NotificationProvider';
+import { Group } from '../../Layout/Group/Group';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { useNotifications } from '../../../hooks/useNotifications';
+const meta = {
+    title: 'Hooks/Notifications',
+    tags: ['!dev'],
+    component: NotificationProvider,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['success', 'error', 'warning', 'info', 'copy'],
+            description: 'Visual style and icon of the notification',
+            table: {
+                type: { summary: "'success' | 'error' | 'warning' | 'info' | 'copy'" },
+                defaultValue: { summary: "'info'" },
+            },
+        },
+        message: {
+            control: { type: 'text' },
+            description: 'Notification body text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        title: {
+            control: { type: 'text' },
+            description: 'Optional title override (defaults to variant title)',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        id: {
+            control: { type: 'text' },
+            description: 'Optional unique ID for tracking or hiding',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+const DefaultDemo = (args) => {
+    const { show } = useNotifications();
+    return (_jsx(Button, { onClick: () => show({
+            variant: args.variant,
+            message: args.message,
+            title: args.title || undefined,
+            id: args.id || undefined,
+        }), children: "Show Notification" }));
+};
+export const Default = {
+    args: {
+        variant: 'info',
+        message: 'Operation completed successfully!',
+        title: undefined,
+        id: undefined,
+    },
+    render: (args) => _jsx(DefaultDemo, { ...args }),
+};
+const VariantsDemo = () => {
+    const { show } = useNotifications();
+    return (_jsxs(Group, { gap: "0.5rem", children: [_jsx(Button, { variant: "success", onClick: () => show({ variant: 'success', message: 'Operation completed successfully!' }), children: "Success" }), _jsx(Button, { variant: "cancel", onClick: () => show({ variant: 'error', message: 'Something went wrong!' }), children: "Error" }), _jsx(Button, { variant: "warning", onClick: () => show({ variant: 'warning', message: 'Please review your input' }), children: "Warning" }), _jsx(Button, { variant: "primary", onClick: () => show({ variant: 'info', message: 'Here is some useful information' }), children: "Info" }), _jsx(Button, { variant: "secondary", onClick: () => show({ variant: 'copy', message: 'Copied to clipboard!' }), children: "Copy" })] }));
+};
+export const Variants = {
+    render: () => _jsx(VariantsDemo, {}),
+};
+const GenericErrorDemo = () => {
+    const { showError } = useNotifications();
+    return _jsx(Button, { variant: "cancel", onClick: showError, children: "Show Generic Error" });
+};
+export const GenericError = {
+    render: () => _jsx(GenericErrorDemo, {}),
+};
+const AsyncDemo = () => {
+    const { show, showLoading, showError, hide } = useNotifications();
+    const [isLoadingSuccess, setIsLoadingSuccess] = useState(false);
+    const [isLoadingFailure, setIsLoadingFailure] = useState(false);
+    const handleSuccess = () => {
+        setIsLoadingSuccess(true);
+        const id = showLoading({ message: 'Processing your request...' });
+        setTimeout(() => {
+            hide(id);
+            show({ variant: 'success', message: 'Operation completed!' });
+            setIsLoadingSuccess(false);
+        }, 3000);
+    };
+    const handleFailure = () => {
+        setIsLoadingFailure(true);
+        const id = showLoading({ message: 'Processing your request...' });
+        setTimeout(() => {
+            hide(id);
+            showError();
+            setIsLoadingFailure(false);
+        }, 3000);
+    };
+    return (_jsxs(Group, { gap: "0.5rem", children: [_jsx(Button, { variant: "success", onClick: handleSuccess, loading: isLoadingSuccess, children: isLoadingSuccess ? 'Processing...' : 'Async Success' }), _jsx(Button, { variant: "cancel", onClick: handleFailure, loading: isLoadingFailure, children: isLoadingFailure ? 'Processing...' : 'Async Failure' })] }));
+};
+export const AsyncNotifications = {
+    render: () => _jsx(AsyncDemo, {}),
+};

package/dist/components/Inputs/Buttons/Button/Button.stories.d.ts

@@ -7,5 +7,6 @@ export declare const Default: Story;
 export declare const Variants: Story;
 export declare const Sizes: Story;
 export declare const States: Story;
+export declare const TogglingButtons: Story;
 export declare const CustomStyles: Story;
 //# sourceMappingURL=Button.stories.d.ts.map

package/dist/components/Inputs/Buttons/Button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAmG7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAKlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyH7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgC1B,CAAC"}

package/dist/components/Inputs/Buttons/Button/Button.stories.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Button } from './Button';
 import { Group } from '../../../Layout/Group/Group';
+import { IconPlus, IconEdit, IconTrash, IconDeviceFloppy } from '@tabler/icons-react';
 const meta = {
     title: 'Components/Inputs/Buttons/Button',
     component: Button,
@@ -47,15 +49,29 @@ const meta = {
             },
         },
         leftIcon: {
-            control: { type: 'text' },
-            description: 'Adds icon before button label',
+            control: { type: 'select' },
+            options: ['Plus', 'Edit', 'Trash', 'Save'],
+            mapping: {
+                Plus: _jsx(IconPlus, { size: 16 }),
+                Edit: _jsx(IconEdit, { size: 16 }),
+                Trash: _jsx(IconTrash, { size: 16 }),
+                Save: _jsx(IconDeviceFloppy, { size: 16 }),
+            },
+            description: 'Adds icon before button label - you can import any icon',
             table: {
                 type: { summary: 'ReactNode' },
             },
         },
         rightIcon: {
-            control: { type: 'text' },
-            description: 'Adds icon after button label',
+            control: { type: 'select' },
+            options: ['Plus', 'Edit', 'Trash', 'Save'],
+            mapping: {
+                Plus: _jsx(IconPlus, { size: 16 }),
+                Edit: _jsx(IconEdit, { size: 16 }),
+                Trash: _jsx(IconTrash, { size: 16 }),
+                Save: _jsx(IconDeviceFloppy, { size: 16 }),
+            },
+            description: 'Adds icon after button label - you can import any icon',
             table: {
                 type: { summary: 'ReactNode' },
             },
@@ -90,6 +106,14 @@ const meta = {
                 type: { summary: '() => void' },
             },
         },
+        toggled: {
+            control: { type: 'boolean' },
+            description: 'Toggles the button state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            }
+        },
         shadow: {
             control: { type: 'boolean' },
             description: 'Adds shadow to the button',
@@ -110,9 +134,10 @@ export const Default = {
         loading: false,
         fullWidth: false,
         shadow: false,
+        toggled: false,
         leftIcon: undefined,
         rightIcon: undefined,
-        styles: {},
+        styles: undefined,
         onClick: () => { },
     },
 };
@@ -123,29 +148,27 @@ export const Sizes = {
     render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" }), _jsx(Button, { size: "lg", children: "Large" })] })),
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" }), _jsx(Button, { shadow: true, children: "Shadow" })] })),
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" })] })),
+};
+export const TogglingButtons = {
+    render: () => {
+        const [toggled, setToggled] = useState(false);
+        return (_jsx(Group, { gap: "1.6rem", children: _jsx(Button, { toggled: toggled, onClick: () => setToggled(!toggled), children: toggled ? 'On' : 'Off' }) }));
+    },
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { styles: {
-                    root: {
-                        borderRadius: '20px',
-                        background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
-                        '&:hover': {
-                            background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
-                        },
-                    },
-                }, children: "Gradient Button" }), _jsx(Button, { styles: {
-                    root: {
-                        borderRadius: '0px',
-                        background: 'black',
-                        color: 'white',
-                        border: '2px solid white',
-                        '&:hover': {
-                            background: 'white',
-                            color: 'black',
-                        },
-                    },
-                }, children: "Custom Border" })] })),
+    args: {
+        children: 'Custom Button',
+        styles: {
+            root: {
+                borderRadius: '20px',
+                background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
+                '&:hover': {
+                    background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
+                },
+            },
+        },
+    },
     parameters: {
         docs: {
             source: {
@@ -160,24 +183,7 @@ export const CustomStyles = {
     },
   }}
 >
-  Gradient Button
-</Button>
-
-<Button
-  styles={{
-    root: {
-      borderRadius: '0px',
-      background: 'black',
-      color: 'white',
-      border: '2px solid white',
-      '&:hover': {
-        background: 'white',
-        color: 'black',
-      },
-    },
-  }}
->
-  Custom Border
+  Custom Button
 </Button>`,
             },
         },

package/dist/components/Layout/AutoGrid/AutoGrid.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AutoGrid } from './AutoGrid';
+declare const meta: Meta<typeof AutoGrid>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=AutoGrid.stories.d.ts.map

package/dist/components/Layout/AutoGrid/AutoGrid.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoGrid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/AutoGrid/AutoGrid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAqD/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkBnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC"}