@eml-payments/ui-kit 0.1.0 → 0.1.1

package/README.md

@@ -1,2 +1,3 @@
-# apprepo.template
-Template for new app repos
+# apprepo.template
+
+Template for new app repos

package/dist/components/Button/Button.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { Loader2Icon } from 'lucide-react';
+export const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            primary: 'bg-[var(--uikit-primary)] text-white ' +
+                'hover:bg-[var(--uikit-primary)]/90 ' +
+                'focus:bg-[var(--uikit-primary)]',
+            secondary: 'bg-white border border-[var(--uikit-secondary)] text-[var(--uikit-secondary)] ' +
+                'hover:bg-[var(--uikit-secondary)] hover:text-white ' +
+                'focus:bg-white focus:text-[var(--uikit-secondary)] focus:border-[var(--uikit-primary)]',
+            outlined: 'bg-transparent border border-[var(--uikit-primary)] text-[var(--uikit-secondary)] ' +
+                'focus:border-[var(--uikit-secondary)]',
+            ghost: 'bg-transparent text-[var(--uikit-secondary)] ' +
+                'hover:bg-transparent hover:border hover:border-[var(--uikit-primary)] ' +
+                'focus:text-[var(--uikit-secondary)] focus:border-[var(--uikit-secondary)]',
+            destructive: 'bg-[var(--uikit-error)] text-white ' +
+                'hover:bg-[var(--uikit-error)]/90 ' +
+                'focus:bg-[var(--uikit-error)]',
+        },
+        size: {
+            default: 'h-9 px-4 py-2',
+            sm: 'h-8 rounded-md px-3 text-xs',
+            lg: 'h-10 rounded-md px-8',
+            icon: 'h-9 w-9',
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'default',
+    },
+});
+export const Button = React.forwardRef(({ variant, size, asChild = false, loading = false, children, className, loadingText, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size }), className), ref: ref, disabled: loading || props.disabled, ...props, children: _jsxs("span", { className: "flex items-center gap-2", children: [loading && _jsx(Loader2Icon, { className: "animate-spin" }), loading ? loadingText : children] }) }));
+});

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from './Button';
+const meta = {
+    title: 'UIKit/Button',
+    component: Button,
+    tags: ['autodocs'],
+    args: {
+        children: 'Click me',
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        variant: 'primary',
+    },
+};
+export const Secondary = {
+    args: {
+        variant: 'secondary',
+    },
+};
+export const Outlined = {
+    args: {
+        variant: 'outlined',
+    },
+};
+export const Ghost = {
+    args: {
+        variant: 'ghost',
+    },
+};
+export const Destructive = {
+    args: {
+        variant: 'destructive',
+    },
+};
+export const Loading = {
+    args: {
+        loading: true,
+    },
+};
+export const WithLoadingText = {
+    args: {
+        loading: true,
+        loadingText: 'Saving',
+    },
+};
+export const WithIconLeft = {
+    render: () => _jsx(Button, { children: "\u26A1Click me" }),
+};
+export const WithIconRight = {
+    render: () => _jsx(Button, { children: "Click me\u26A1" }),
+};
+export const DisabledVariants = {
+    render: () => (_jsxs("div", { style: { display: 'flex', gap: '12px', flexWrap: 'wrap' }, children: [_jsx(Button, { variant: "primary", disabled: true, children: "Primary" }), _jsx(Button, { variant: "secondary", disabled: true, children: "Secondary" }), _jsx(Button, { variant: "outlined", disabled: true, children: "Outlined" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Ghost" })] })),
+};
+export const AllSizes = {
+    render: () => (_jsxs("div", { style: { display: 'flex', gap: '12px', flexWrap: 'wrap' }, children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "default", children: "Default" }), _jsx(Button, { size: "lg", children: "Large" }), _jsx(Button, { size: "icon", "aria-label": "Icon", children: "\u26A1" })] })),
+};

package/dist/components/Button/Button.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Button/index.js

@@ -0,0 +1 @@
+export * from './Button';

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils';
+const Checkbox = React.forwardRef(({ className, label, labelPosition = 'left', ...props }, ref) => {
+    // Define the position classes for label placement
+    const positionClasses = {
+        left: 'flex-row',
+        right: 'flex-row-reverse',
+        top: 'flex-col',
+        bottom: 'flex-col-reverse',
+    };
+    // Combine the position classes with the base classes
+    const wrapperClass = cn('inline-flex items-center gap-2', positionClasses[labelPosition]);
+    return (_jsxs("div", { className: wrapperClass, children: [label && (_jsx("label", { htmlFor: props.id, className: cn('text-sm font-medium cursor-pointer', {
+                    'cursor-not-allowed opacity-70': props.disabled,
+                }), children: label })), _jsx(CheckboxPrimitive.Root, { ref: ref, className: cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn('flex items-center justify-center text-current'), children: _jsx(Check, { className: "h-4 w-4" }) }) })] }));
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export { Checkbox };

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Checkbox } from './Checkbox';
+const meta = {
+    title: 'UIKit/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+    args: {
+        checked: false,
+        disabled: false,
+        labelPosition: 'right',
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+export const Checked = {
+    args: { checked: true },
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const DisabledChecked = {
+    args: { checked: true, disabled: true },
+};
+export const ControlledCheckbox = {
+    render: (args) => {
+        const [checked, setChecked] = useState(args.checked);
+        return _jsx(Checkbox, { ...args, checked: checked, onCheckedChange: (value) => setChecked(value) });
+    },
+};
+export const WithLabel = {
+    args: { label: 'Checkbox Label', id: 'checkbox-label', disabled: true },
+};
+export const WithLabelPosition = {
+    args: { label: 'Checkbox Label', labelPosition: 'left', id: 'checkbox-label-position' },
+};
+export const ControlledAndLabel = {
+    args: { label: 'Controlled Checkbox', id: 'controlled-checkbox' },
+    render: (args) => {
+        const [checked, setChecked] = useState(args.checked);
+        return _jsx(Checkbox, { ...args, checked: checked, onCheckedChange: (value) => setChecked(value) });
+    },
+};

package/dist/components/Checkbox/Checkbox.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export * from './Checkbox.types';

package/dist/components/Divider/Divider.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+export const Divider = ({ orientation = 'horizontal', color = 'var(--uikit-secondary)', className, ...props }) => {
+    const orientationStyles = orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full';
+    return (_jsx("div", { className: cn(orientationStyles, className), style: {
+            backgroundColor: color,
+        }, role: "separator", "aria-orientation": orientation, "aria-hidden": "true", ...props }));
+};

package/dist/components/Divider/Divider.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider } from './Divider';
+const meta = {
+    title: 'UIKit/Divider',
+    component: Divider,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Horizontal = {
+    render: () => (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "text-sm", children: "Section Above" }), _jsx(Divider, { orientation: "horizontal" }), _jsx("div", { className: "text-sm", children: "Section Below" })] })),
+};
+export const HorizontalCustomColor = {
+    render: () => (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "text-sm", children: "Above custom divider" }), _jsx(Divider, { orientation: "horizontal", color: "#f97316" }), _jsx("div", { className: "text-sm", children: "Below custom divider" })] })),
+};
+export const Vertical = {
+    render: () => (_jsxs("div", { className: "flex items-center space-x-2 h-8", children: [_jsx("button", { className: "text-sm px-3 py-1", children: "Option A" }), _jsx(Divider, { orientation: "vertical" }), _jsx("button", { className: "text-sm px-3 py-1", children: "Option B" })] })),
+};
+export const VerticalTall = {
+    render: () => (_jsxs("div", { className: "flex gap-4 items-stretch h-24", children: [_jsx("div", { className: "flex-1 bg-muted p-2", children: "Column A" }), _jsx(Divider, { orientation: "vertical" }), _jsx("div", { className: "flex-1 bg-muted p-2", children: "Column B" })] })),
+};

package/dist/components/Divider/Divider.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Divider/index.js

@@ -0,0 +1 @@
+export * from './Divider';

package/dist/components/Ellipsis/Ellipsis.functions.js

@@ -0,0 +1,8 @@
+export function middleEllipsis(text, maxLength) {
+    if (text.length <= maxLength)
+        return text;
+    const visibleChars = maxLength - 3;
+    const start = Math.ceil(visibleChars / 2);
+    const end = Math.floor(visibleChars / 2);
+    return `${text.slice(0, start)}...${text.slice(text.length - end)}`;
+}

package/dist/components/Ellipsis/Ellipsis.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { middleEllipsis } from './Ellipsis.functions';
+export const EllipsisText = ({ text, maxLength = 32, mode = 'end', width = '', className, ...props }) => {
+    const content = mode === 'middle' ? middleEllipsis(text, maxLength) : text;
+    return (_jsx("span", { className: cn('inline-block overflow-hidden whitespace-nowrap text-ellipsis', mode === 'end' ? 'truncate' : '', width, className), ...props, children: content }));
+};

package/dist/components/Ellipsis/Ellipsis.stories.js

@@ -0,0 +1,27 @@
+import { EllipsisText } from './Ellipsis';
+const meta = {
+    title: 'UIKit/EllipsisText',
+    component: EllipsisText,
+    tags: ['autodocs'],
+};
+export default meta;
+export const EndEllipsis = {
+    args: {
+        text: 'Pellentesque bibendum interdum bibendum. Vivamus libero dolor.',
+        mode: 'end',
+        width: 'w-[200px]',
+    },
+};
+export const MiddleEllipsis = {
+    args: {
+        text: 'FirstnameMiddleInitialLastname',
+        mode: 'middle',
+        maxLength: 20,
+    },
+};
+export const NoEllipsisNeeded = {
+    args: {
+        text: 'Short title',
+        mode: 'end',
+    },
+};

package/dist/components/Ellipsis/Ellipsis.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Ellipsis/index.js

@@ -0,0 +1 @@
+export * from './Ellipsis';

package/dist/components/Input/Input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useUIKitTheme } from '../../context/useUIKitTheme';
+import { cn } from '../../lib/utils';
+export const Input = React.forwardRef(({ type, label, error, className, helperText, icon, ...props }, ref) => {
+    const theme = useUIKitTheme();
+    return (_jsxs("div", { className: cn(className), children: [label && _jsx("label", { className: cn('text-sm font-medium text-foreground'), children: label }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: type, style: { fontFamily: theme.fontFamily }, className: cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition ', { 'border-error focus-visible:ring-error': error }, className), ref: ref, onChange: props.onChange, ...props }), icon && _jsx("span", { className: "absolute inset-y-0 right-3 flex items-center pl-3", children: icon })] }), error ? (_jsx("label", { className: cn('text-sm font-medium text-error'), children: error })) : helperText ? (_jsx("label", { className: cn('text-sm font-medium text-foreground'), children: helperText })) : null] }));
+});

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from './Input';
+const meta = {
+    title: 'UIKit/Input',
+    component: Input,
+    tags: ['autodocs'],
+    args: {
+        type: 'text',
+        label: 'Label',
+        placeholder: 'Enter text...',
+    },
+};
+export default meta;
+export const Text = {
+    args: { type: 'text', placeholder: 'Enter text...' },
+};
+export const Number = {
+    args: { type: 'number', placeholder: 'Enter number...' },
+};
+export const WithValue = {
+    args: { value: 'Sample text' },
+};
+export const WithLabel = {
+    args: { label: 'Sample Label', placeholder: 'Enter text...' },
+};
+export const PasswordInput = {
+    args: { type: 'password', placeholder: 'Enter password...' },
+};
+export const WithHelperText = {
+    args: { helperText: 'This is a helper text', placeholder: 'Enter text...' },
+};
+export const Disabled = {
+    args: { disabled: true, placeholder: 'Disabled input' },
+};
+export const DisabledWithValue = {
+    args: { disabled: true, value: 'Disabled input with value' },
+};
+export const WithError = {
+    args: { error: 'Something went wrong' },
+};
+export const withIcon = {
+    args: {
+        icon: (_jsx("span", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M12 6C13.1 6 14 6.9 14 8C14 9.1 13.1 10 12 10C10.9 10 10 9.1 10 8C10 6.9 10.9 6 12 6ZM12 16C14.7 16 17.8 17.29 18 18H6C6.23 17.28 9.31 16 12 16ZM12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z", fill: "black" }) }) })),
+    },
+};

package/dist/components/Input/Input.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Input/index.js

@@ -0,0 +1,2 @@
+export * from './Input';
+export * from './Input.types';

package/dist/components/Label/Label.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: cn(labelVariants(), className), ...props })));
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label };

package/dist/components/Label/Label.stories.js

@@ -0,0 +1,17 @@
+import { Label } from './Label';
+const meta = {
+    title: 'UIKit/Label',
+    component: Label,
+    tags: ['autodocs'],
+    args: {
+        children: 'Label Text',
+        htmlFor: 'label-id',
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+export const WithCustomStyle = {
+    args: { className: 'text-blue-500 font-bold' },
+};

package/dist/components/Label/Label.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Label/index.js

@@ -0,0 +1,2 @@
+export * from './Label';
+export * from './Label.types';

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx(RadioGroupPrimitive.Root, { className: cn('grid gap-2', className), ...props, ref: ref });
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn('aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx(Circle, { className: "h-3.5 w-3.5 fill-primary" }) }) }));
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+export { RadioGroup, RadioGroupItem };

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioGroup, RadioGroupItem } from './RadioGroup';
+import { Label } from '../Label';
+const meta = {
+    title: 'UIKit/RadioGroup',
+    component: RadioGroup,
+    tags: ['autodocs'],
+    args: {
+        defaultValue: 'option1',
+        disabled: false,
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+    render: (args) => (_jsxs(RadioGroup, { ...args, children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option1", id: "option1" }), _jsx(Label, { htmlFor: "option1", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option2", id: "option2-disabled" }), _jsx(Label, { htmlFor: "option2-disabled", children: "Option 2" })] })] })),
+};
+export const Horizontal = {
+    args: {},
+    render: (args) => (_jsxs(RadioGroup, { ...args, className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option1", id: "option1-horizontal" }), _jsx(Label, { htmlFor: "option1-horizontal", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option2", id: "option2-horizontal" }), _jsx(Label, { htmlFor: "option2-horizontal", children: "Option 2" })] })] })),
+};
+export const Disabled = {
+    args: {},
+    render: (args) => (_jsxs(RadioGroup, { ...args, disabled: true, children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option1", id: "option1-disabled" }), _jsx(Label, { htmlFor: "option1-disabled", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option2", id: "option2-disabled" }), _jsx(Label, { htmlFor: "option2-disabled", children: "Option 2" })] })] })),
+};
+export const Size = {
+    args: {},
+    render: (args) => (_jsxs(RadioGroup, { ...args, className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option1", id: "option1-size" }), _jsx(Label, { htmlFor: "option1-size", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option2", id: "option2-size", className: "h-5 w-5 [&_svg]:h-3 [&_svg]:w-3" }), _jsx(Label, { htmlFor: "option2-size", children: "Option 2" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option3", id: "option3-size", className: "h-6 w-6 [&_svg]:h-4 [&_svg]:w-4" }), _jsx(Label, { htmlFor: "option3-size", children: "Option 3" })] })] })),
+};

package/dist/components/RadioGroup/RadioGroup.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,2 @@
+export * from './RadioGroup';
+export * from './RadioGroup.types';

package/dist/components/Switch/Switch.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { cn } from '../../lib/utils';
+import { Label } from '../Label/Label';
+const sizeClasses = {
+    sm: {
+        root: 'h-4 w-8',
+        thumb: 'h-3 w-3 data-[state=checked]:translate-x-4',
+    },
+    md: {
+        root: 'h-6 w-11',
+        thumb: 'h-4 w-4 data-[state=checked]:translate-x-5',
+    },
+    lg: {
+        root: 'h-7 w-14',
+        thumb: 'h-5 w-5 data-[state=checked]:translate-x-7',
+    },
+};
+const Switch = React.forwardRef(({ className, label, labelPosition = 'left', ...props }, ref) => {
+    // Define the position classes for label placement
+    const positionClasses = {
+        left: 'flex-row',
+        right: 'flex-row-reverse',
+        top: 'flex-col',
+        bottom: 'flex-col-reverse',
+    };
+    // Combine the position classes with the base classses
+    const wrapperClass = cn('inline-flex items-center gap-2', positionClasses[labelPosition]);
+    return (_jsxs("div", { className: wrapperClass, children: [label && (_jsx(Label, { htmlFor: props.id, className: cn('text-sm font-medium cursor-pointer', {
+                    'cursor-not-allowed opacity-70': props.disabled,
+                }), children: label })), _jsx(SwitchPrimitives.Root, { className: cn('peer inline-flex h-[24px] w-[42px] shrink-0 cursor-pointer items-center rounded-full border-2 border-black shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-transparent', className), ...props, ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn('pointer-events-none block h-[15px] w-[15px] rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[20px] data-[state=checked]:bg-[var(--uikit-primary)] data-[state=unchecked]:translate-x-[2px] data-[state=unchecked]:bg-black') }) })] }));
+});
+Switch.displayName = SwitchPrimitives.Root.displayName;
+export { Switch };

package/dist/components/Switch/Switch.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Switch } from './Switch';
+const meta = {
+    title: 'UIKit/Switch',
+    component: Switch,
+    tags: ['autodocs'],
+    args: {
+        checked: false,
+        disabled: false,
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+export const Checked = {
+    args: { checked: true },
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const ControlledSwitch = {
+    render: (args) => {
+        const [checked, setChecked] = useState(args.checked);
+        return _jsx(Switch, { ...args, checked: checked, onCheckedChange: (value) => setChecked(value) });
+    },
+};
+export const WithLabel = {
+    args: {
+        label: 'Switch Label',
+        id: 'switch-label',
+    },
+};
+export const WithLabelPosition = {
+    args: { label: 'Switch Label', labelPosition: 'left' },
+};
+export const ControlledAndLabel = {
+    args: {
+        label: 'Controlled Switch',
+        id: 'controlled-switch',
+    },
+    render: (args) => {
+        const [checked, setChecked] = useState(args.checked);
+        return (_jsx(Switch, { ...args, id: "controlled-switch", checked: checked, onCheckedChange: (value) => setChecked(value) }));
+    },
+};

package/dist/components/Switch/Switch.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Switch/index.js

@@ -0,0 +1,2 @@
+export * from './Switch';
+export * from './Switch.types';