@taiv/ui 1.3.2 → 1.4.0

package/dist/components/Inputs/Controls/Checkbox/Checkbox.stories.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from './Checkbox';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/Controls/Checkbox',
+    component: Checkbox,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls the checkbox size and label font size',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        checked: {
+            control: { type: 'boolean' },
+            description: 'Controlled checked state',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Checkbox label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        description: {
+            control: { type: 'text' },
+            description: 'Description, displayed after the label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        error: {
+            control: { type: 'text' },
+            description: 'Error message displayed after the input',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        labelPosition: {
+            control: { type: 'select' },
+            options: ['left', 'right'],
+            description: 'Position of the label',
+            table: {
+                type: { summary: '"left" | "right"' },
+                defaultValue: { summary: '"right"' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(event: ChangeEvent<HTMLInputElement>) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'I agree to the terms and conditions',
+        checked: false,
+        size: 'md',
+        disabled: false,
+        labelPosition: 'right',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<Checkbox
+  label="I agree to the terms and conditions"
+  checked={isChecked}
+  onChange={(event) => setIsChecked(event.currentTarget.checked)}
+/>`,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Checkbox, { size: "sm", label: "Small Checkbox", checked: false }), _jsx(Checkbox, { size: "md", label: "Medium Checkbox (Default)", checked: true }), _jsx(Checkbox, { size: "lg", label: "Large Checkbox", checked: false })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Checkbox, { label: "Normal Checkbox", checked: true }), _jsx(Checkbox, { label: "Disabled Checkbox", checked: false, disabled: true }), _jsx(Checkbox, { label: "Checkbox with Description", description: "This is a description that provides additional context", checked: false }), _jsx(Checkbox, { label: "Checkbox with Error", error: "This field is required", checked: false })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const CustomStyles = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Checkbox, { label: "Custom Styled Checkbox", checked: true, styles: {
+                    input: {
+                        '&:checked': {
+                            backgroundColor: '#ff6b6b',
+                            borderColor: '#ff6b6b',
+                        },
+                    },
+                    label: {
+                        fontWeight: 600,
+                        color: '#333',
+                    },
+                } }), _jsx(Checkbox, { label: "Another Custom Style", checked: false, styles: {
+                    input: {
+                        borderRadius: '50%',
+                        '&:checked': {
+                            backgroundColor: '#4CAF50',
+                            borderColor: '#4CAF50',
+                        },
+                    },
+                    label: {
+                        color: '#4CAF50',
+                        fontSize: '16px',
+                    },
+                } })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

package/dist/components/Inputs/Controls/Radio/Radio.d.ts

@@ -0,0 +1,8 @@
+import { RadioProps as MantineRadioProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+interface RadioProps extends MantineRadioProps {
+    styles?: Record<string, CSSObject>;
+}
+declare const Radio: ({ styles, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export { Radio };
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/Inputs/Controls/Radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/Radio/Radio.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,KAAK,GAAI,sBAAsB,UAAU,4CAsC9C,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Inputs/Controls/Radio/Radio.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio as MantineRadio } from '@mantine/core';
+import { primary, neutral } from '../../../../constants/colors';
+import { fontBase, inputFontSize } from '../../../../constants/font';
+const Radio = ({ styles, ...props }) => {
+    const style = {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+        },
+        radio: {
+            cursor: props.disabled || props.checked ? 'default' : 'pointer',
+            margin: 0,
+            marginTop: 0,
+            lineHeight: 'normal',
+            '&[type="radio"]': {
+                margin: 0,
+                marginTop: 0,
+                lineHeight: 'normal',
+            },
+            '&:checked': {
+                backgroundColor: primary[200],
+                borderColor: primary[200],
+            },
+            '&:hover': {
+                backgroundColor: props.checked ? primary[200] : neutral[50],
+            },
+        },
+        icon: {
+            color: 'white',
+        },
+        label: {
+            cursor: props.disabled ? 'default' : 'pointer',
+            ...fontBase,
+            fontSize: inputFontSize['md'].fontSize,
+            lineHeight: '2.25rem',
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return _jsx(MantineRadio, { size: "lg", styles: style, ...props });
+};
+export { Radio };

package/dist/components/Inputs/Controls/Radio/Radio.stories.d.ts

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

package/dist/components/Inputs/Controls/Radio/Radio.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/Radio/Radio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAkE5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA8C1B,CAAC"}

package/dist/components/Inputs/Controls/Radio/Radio.stories.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio } from './Radio';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/Controls/Radio',
+    component: Radio,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        label: {
+            control: { type: 'text' },
+            description: 'Radio label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        description: {
+            control: { type: 'text' },
+            description: 'Description, displayed after the label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        error: {
+            control: { type: 'text' },
+            description: 'Error message displayed after the input',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        checked: {
+            control: { type: 'boolean' },
+            description: 'Checked state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        value: {
+            control: { type: 'text' },
+            description: 'Radio value',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(event: ChangeEvent<HTMLInputElement>) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Option 1',
+        value: 'option1',
+        checked: false,
+        disabled: false,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<Radio
+  label="Option 1"
+  value="option1"
+  checked={selectedValue === 'option1'}
+  onChange={(event) => setSelectedValue(event.currentTarget.value)}
+/>`,
+            },
+        },
+    },
+};
+export const RadioGroup = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Radio, { label: "Option 1", value: "option1", checked: true }), _jsx(Radio, { label: "Option 2", value: "option2", checked: false }), _jsx(Radio, { label: "Option 3", value: "option3", checked: false })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Radio, { label: "Normal Radio", value: "normal", checked: true }), _jsx(Radio, { label: "Disabled Radio", value: "disabled", checked: false, disabled: true }), _jsx(Radio, { label: "Radio with Description", description: "This is a description that provides additional context", value: "description", checked: false }), _jsx(Radio, { label: "Radio with Error", error: "This field is required", value: "error", checked: false })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const CustomStyles = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Radio, { label: "Custom Styled Radio", value: "custom1", checked: true, styles: {
+                    radio: {
+                        '&:checked': {
+                            backgroundColor: '#ff6b6b',
+                            borderColor: '#ff6b6b',
+                        },
+                    },
+                    label: {
+                        fontWeight: 600,
+                        color: '#333',
+                    },
+                } }), _jsx(Radio, { label: "Another Custom Style", value: "custom2", checked: false, styles: {
+                    radio: {
+                        '&:checked': {
+                            backgroundColor: '#4CAF50',
+                            borderColor: '#4CAF50',
+                        },
+                    },
+                    label: {
+                        color: '#4CAF50',
+                        fontSize: '16px',
+                    },
+                } })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

package/dist/components/Inputs/Controls/RadioList/RadioList.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface RadioListOption {
+    value: string;
+    label: string;
+    rightContent?: React.ReactNode;
+}
+interface RadioListProps {
+    data: RadioListOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    width?: React.CSSProperties['width'];
+}
+declare const RadioList: ({ data, value, onChange, disabled, width }: RadioListProps) => import("react/jsx-runtime").JSX.Element;
+export { RadioList };
+//# sourceMappingURL=RadioList.d.ts.map

package/dist/components/Inputs/Controls/RadioList/RadioList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/RadioList/RadioList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;CACtC;AAED,QAAA,MAAM,SAAS,GAAI,4CAAoD,cAAc,4CAkCpF,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Inputs/Controls/RadioList/RadioList.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '../../../Layout/Stack/Stack';
+import { Radio } from '../Radio/Radio';
+import { neutral } from '../../../../constants/colors';
+import { Group } from '../../../Layout/Group/Group';
+const RadioList = ({ data, value, onChange, disabled = false, width }) => {
+    const handleChange = (optionValue) => {
+        if (onChange) {
+            onChange(optionValue);
+        }
+    };
+    return (_jsx(Stack, { gap: "0", style: {
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '16px',
+            overflow: 'hidden',
+            padding: '0.2rem 0 0.2rem 0',
+            width,
+        }, children: data.map((option, index) => (_jsxs(Group, { position: "apart", style: {
+                padding: '1rem 1.2rem 0.8rem 1.2rem',
+                borderBottom: index < data.length - 1 ? `1px solid ${neutral[100]}` : 'none',
+                backgroundColor: 'white',
+            }, children: [_jsx(Radio, { value: option.value, label: option.label, checked: value === option.value, onChange: () => handleChange(option.value), disabled: disabled }), option.rightContent && option.rightContent] }, option.value))) }));
+};
+export { RadioList };

package/dist/components/Inputs/Controls/RadioList/RadioList.stories.d.ts

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

package/dist/components/Inputs/Controls/RadioList/RadioList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioList.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/RadioList/RadioList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA4ChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgCnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAoBpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC"}

package/dist/components/Inputs/Controls/RadioList/RadioList.stories.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioList } from './RadioList';
+const meta = {
+    title: 'Components/Inputs/Controls/RadioList',
+    component: RadioList,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        data: {
+            control: { type: 'object' },
+            description: 'Array of radio options',
+            table: {
+                type: { summary: 'RadioListOption[]' },
+            },
+        },
+        value: {
+            control: { type: 'text' },
+            description: 'Selected value',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(value: string) => void' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state for all options',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Width of the radio list',
+            table: {
+                type: { summary: 'React.CSSProperties["width"]' },
+            },
+        },
+    },
+};
+export default meta;
+const basicOptions = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+];
+const optionsWithDescriptions = [
+    { value: 'basic', label: 'Basic Plan', rightContent: _jsx("span", { style: { color: '#666', fontSize: '14px' }, children: "$9/month" }) },
+    { value: 'pro', label: 'Pro Plan', rightContent: _jsx("span", { style: { color: '#666', fontSize: '14px' }, children: "$19/month" }) },
+    { value: 'enterprise', label: 'Enterprise Plan', rightContent: _jsx("span", { style: { color: '#666', fontSize: '14px' }, children: "$49/month" }) },
+];
+const optionsWithIcons = [
+    {
+        value: 'email',
+        label: 'Email Notifications',
+        rightContent: _jsx("span", { style: { color: '#4CAF50', fontSize: '14px' }, children: "\u2713" }),
+    },
+    {
+        value: 'sms',
+        label: 'SMS Notifications',
+        rightContent: _jsx("span", { style: { color: '#666', fontSize: '14px' }, children: "\u2717" }),
+    },
+    {
+        value: 'push',
+        label: 'Push Notifications',
+        rightContent: _jsx("span", { style: { color: '#4CAF50', fontSize: '14px' }, children: "\u2713" }),
+    },
+];
+export const Default = {
+    args: {
+        data: basicOptions,
+        value: 'option1',
+        disabled: false,
+        width: '300px',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<RadioList
+  data={[
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ]}
+  value={selectedValue}
+  onChange={(value) => setSelectedValue(value)}
+/>`,
+            },
+        },
+    },
+};
+export const WithRightContent = {
+    render: () => _jsx(RadioList, { data: optionsWithDescriptions, value: "pro", width: "400px" }),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const WithIcons = {
+    render: () => _jsx(RadioList, { data: optionsWithIcons, value: "email", width: "350px" }),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2rem' }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '0.5rem' }, children: "Normal State" }), _jsx(RadioList, { data: basicOptions, value: "option2", width: "300px" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '0.5rem' }, children: "Disabled State" }), _jsx(RadioList, { data: basicOptions, value: "option1", disabled: true, width: "300px" })] })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const CustomWidth = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2rem' }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '0.5rem' }, children: "Narrow Width (200px)" }), _jsx(RadioList, { data: basicOptions, value: "option1", width: "200px" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '0.5rem' }, children: "Wide Width (500px)" }), _jsx(RadioList, { data: optionsWithDescriptions, value: "pro", width: "500px" })] })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

package/dist/components/Inputs/Controls/Toggle/Toggle.d.ts

@@ -0,0 +1,29 @@
+import { CSSObject, SwitchProps as MantineToggleProps } from '@mantine/core';
+declare const componentSizes: {
+    readonly sm: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly width: 2.4;
+        readonly height: 1.8;
+        readonly mantineSize: "md";
+        readonly thumbScale: 1.3;
+        readonly thumbTranslate: 2;
+    };
+    readonly md: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly width: 4.8;
+        readonly height: 2.8;
+        readonly mantineSize: "xl";
+        readonly thumbScale: 1.3;
+        readonly thumbTranslate: 10;
+    };
+};
+interface ToggleProps extends MantineToggleProps {
+    size?: keyof typeof componentSizes;
+    label?: string;
+    styles?: Record<string, CSSObject>;
+}
+declare const Toggle: ({ checked, onChange, styles, size, label, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export { Toggle };
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/components/Inputs/Controls/Toggle/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/Toggle/Toggle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKtG,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;CAGV,CAAC;AAEX,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,sDAA6D,WAAW,4CAmCvF,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Inputs/Controls/Toggle/Toggle.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch as MantineToggle } from '@mantine/core';
+import { neutral, primary } from '../../../../constants/colors';
+import { fontBase, fontSize } from '../../../../constants/font';
+// Size Presets
+const componentSizes = {
+    sm: { width: 2.4, height: 1.8, mantineSize: 'md', thumbScale: 1.3, thumbTranslate: 2, ...fontSize['sm'] },
+    md: { width: 4.8, height: 2.8, mantineSize: 'xl', thumbScale: 1.3, thumbTranslate: 10, ...fontSize['md'] },
+};
+const Toggle = ({ checked, onChange, styles, size = 'md', label, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const style = {
+        container: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1rem',
+        },
+        track: {
+            width: `${selectedSize.width}rem`,
+            height: `${selectedSize.height}rem`,
+            transition: 'background-color 300ms ease-in-out',
+            cursor: 'pointer',
+            backgroundColor: checked ? primary[200] : neutral[50],
+        },
+        thumb: {
+            transform: `scale(${selectedSize.thumbScale}) translateX(${checked ? `-${selectedSize.thumbTranslate + selectedSize.thumbTranslate / 2}%` : `${selectedSize.thumbTranslate}%`})`,
+            boxShadow: checked ? '0 2px 2px rgba(0,0,0,0.2)' : 'none',
+            transition: 'all 300ms ease-in-out',
+            border: checked ? `1px solid ${primary[200]}` : `1px solid ${neutral[50]}`,
+        },
+        label: {
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return (_jsxs("div", { style: style.container, children: [_jsx(MantineToggle, { checked: checked, onChange: onChange, color: primary[200], size: selectedSize.mantineSize, styles: style, ...props }), label && _jsx("span", { style: style.label, children: label })] }));
+};
+export { Toggle };

package/dist/components/Inputs/Controls/Toggle/Toggle.stories.d.ts

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

package/dist/components/Inputs/Controls/Toggle/Toggle.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/Toggle/Toggle.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,CA0F7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA8C1B,CAAC"}