@taiv/ui 1.11.0 → 1.13.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/SegmentedControl/SegmentedControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAUtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAkHvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAwBpB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC"}

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

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SegmentedControl } from './SegmentedControl';
+import { Group } from '../../../Layout/Group/Group';
+import { Stack } from '../../../Layout/Stack/Stack';
+const sampleData = [
+    { label: 'React', value: 'react' },
+    { label: 'Angular', value: 'ng' },
+    { label: 'Vue', value: 'vue' },
+];
+const meta = {
+    title: 'Components/Inputs/Controls/SegmentedControl',
+    component: SegmentedControl,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls segment padding and label font size',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        data: {
+            control: { type: 'object' },
+            description: 'Segments as strings or { value, label, disabled? } objects',
+            table: {
+                type: { summary: "string[] | SegmentedControlItem[]" },
+            },
+        },
+        value: {
+            control: { type: 'text' },
+            description: 'Selected segment value (controlled)',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        defaultValue: {
+            control: { type: 'text' },
+            description: 'Default value when uncontrolled',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disables the entire control',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        fullWidth: {
+            control: { type: 'boolean' },
+            description: 'Stretch to 100% of the container width',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        orientation: {
+            control: { type: 'select' },
+            options: ['horizontal', 'vertical'],
+            description: 'Layout direction of segments',
+            table: {
+                type: { summary: "'horizontal' | 'vertical'" },
+                defaultValue: { summary: "'horizontal'" },
+            },
+        },
+        readOnly: {
+            control: { type: 'boolean' },
+            description: 'Non-interactive but not visually disabled',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        color: {
+            control: { type: 'color' },
+            description: 'Active segment color (Mantine color key or CSS color)',
+            table: {
+                type: { summary: 'MantineColor' },
+            },
+        },
+        radius: {
+            control: { type: 'text' },
+            description: 'Border radius (theme key or CSS value)',
+            table: {
+                type: { summary: "MantineNumberSize" },
+            },
+        },
+        transitionDuration: {
+            control: { type: 'number' },
+            description: 'Transition duration in ms (0 to disable)',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '200' },
+            },
+        },
+        name: {
+            control: { type: 'text' },
+            description: 'Name attribute for the underlying radio group',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object (Mantine Styles API)',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Called with the new value when selection changes',
+            table: {
+                type: { summary: '(value: string) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        var _a, _b;
+        const [value, setValue] = useState((_a = args.value) !== null && _a !== void 0 ? _a : 'react');
+        return _jsx(SegmentedControl, { ...args, data: (_b = args.data) !== null && _b !== void 0 ? _b : sampleData, value: value, onChange: setValue });
+    },
+    args: {
+        data: sampleData,
+        size: 'md',
+        disabled: false,
+        fullWidth: false,
+        orientation: 'horizontal',
+        readOnly: false,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `const [value, setValue] = useState('react');
+
+<SegmentedControl
+  data={[
+    { label: 'React', value: 'react' },
+    { label: 'Angular', value: 'ng' },
+    { label: 'Vue', value: 'vue' },
+  ]}
+  value={value}
+  onChange={setValue}
+/>`,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Stack, { gap: "1.6rem", children: [_jsx(SegmentedControl, { size: "sm", data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { size: "md", data: sampleData, value: "ng", onChange: () => { } }), _jsx(SegmentedControl, { size: "lg", data: sampleData, value: "vue", onChange: () => { } })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const StringData = {
+    render: () => (_jsx(SegmentedControl, { data: ['Day', 'Week', 'Month', 'Year'], value: "Week", onChange: () => { } })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Stack, { gap: "1.6rem", style: { minWidth: '28rem' }, children: [_jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, disabled: true }), _jsx(SegmentedControl, { data: [
+                    { value: 'preview', label: 'Preview', disabled: true },
+                    { value: 'code', label: 'Code' },
+                    { value: 'export', label: 'Export' },
+                ], value: "code", onChange: () => { } }), _jsx(SegmentedControl, { data: sampleData, value: "vue", onChange: () => { }, readOnly: true })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const FullWidth = {
+    render: () => (_jsx("div", { style: { width: '36rem', maxWidth: '100%' }, children: _jsx(SegmentedControl, { fullWidth: true, data: sampleData, value: "react", onChange: () => { } }) })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const Orientation = {
+    render: () => (_jsxs(Group, { gap: "3rem", align: "flex-start", children: [_jsx(SegmentedControl, { data: sampleData, value: "ng", onChange: () => { }, orientation: "horizontal" }), _jsx(SegmentedControl, { data: sampleData, value: "vue", onChange: () => { }, orientation: "vertical" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const CustomStyles = {
+    render: () => (_jsx(Group, { gap: "2rem", children: _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, styles: {
+                root: {
+                    backgroundColor: '#f0f4f8',
+                },
+                label: {
+                    '&:not([data-active])': {
+                        color: '#495057',
+                    },
+                },
+            } }) })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

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"}

package/dist/components/Layout/AutoGrid/AutoGrid.stories.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AutoGrid } from './AutoGrid';
+import { Card } from '../Card/Card';
+import { Title } from '../../Typography/Title/Title';
+const meta = {
+    title: 'Components/Layout/AutoGrid',
+    component: AutoGrid,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/simple-grid/)\n\nThe AutoGrid component is a responsive grid where each item takes an equal amount of space. It extends Mantine v6's SimpleGrid component and provides automatic column distribution with customizable spacing.",
+            },
+        },
+    },
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Content for the AutoGrid - each child node is a grid item',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        cols: {
+            control: { type: 'number' },
+            description: 'Number of columns in each row',
+            table: {
+                type: { summary: 'number | ResponsiveObject' },
+                defaultValue: { summary: '1' },
+            },
+        },
+        spacing: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Horizontal spacing between items',
+            table: {
+                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        verticalSpacing: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Vertical spacing between items',
+            table: {
+                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number" },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles to override with if necessary',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+    },
+};
+export default meta;
+const SampleCard = ({ title, description }) => (_jsxs(Card, { animate: true, padding: "lg", children: [_jsx(Title, { variant: "cardHeader", children: title }), _jsx(Title, { variant: "cardSubheader", children: description })] }));
+const items = [
+    { id: 1, title: 'Item 1', description: 'Grid item content' },
+    { id: 2, title: 'Item 2', description: 'Grid item content' },
+    { id: 3, title: 'Item 3', description: 'Grid item content' },
+    { id: 4, title: 'Item 4', description: 'Grid item content' },
+    { id: 5, title: 'Item 5', description: 'Grid item content' },
+    { id: 6, title: 'Item 6', description: 'Grid item content' },
+];
+export const Default = {
+    args: {
+        children: undefined,
+        cols: 3,
+        spacing: 'md',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '700px' }, children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsx(AutoGrid, { ...args, children: items.map((item) => (_jsx(SampleCard, { title: item.title, description: item.description }, item.id))) })),
+};

package/dist/components/Layout/Box/Box.d.ts

@@ -1,10 +1,8 @@
 import { BoxProps as MantineBoxProps } from '@mantine/core';
-import { CSSObject } from '@mantine/styles';
 interface BoxProps extends MantineBoxProps {
     width?: string | number;
     onClick?: () => void;
-    styles?: Record<string, CSSObject>;
 }
-declare const Box: ({ width, styles, onClick, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+declare const Box: ({ width, onClick, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 export { Box };
 //# sourceMappingURL=Box.d.ts.map

package/dist/components/Layout/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,QAAQ,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,QAAS,SAAQ,eAAe;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,GAAG,GAAI,sCAAsC,QAAQ,4CAE1D,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,QAAQ,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAE/E,UAAU,QAAS,SAAQ,eAAe;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,GAAG,GAAI,8BAA8B,QAAQ,4CAElD,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/Layout/Box/Box.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box as MantineBox } from '@mantine/core';
-const Box = ({ width, styles, onClick, ...props }) => {
-    return _jsx(MantineBox, { w: width, styles: styles, onClick: onClick, ...props });
+const Box = ({ width, onClick, ...props }) => {
+    return _jsx(MantineBox, { w: width, onClick: onClick, ...props });
 };
 export { Box };

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

@@ -4,6 +4,5 @@ declare const meta: Meta<typeof Box>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Alignment: Story;
-export declare const CustomStyling: Story;
+export declare const BoxStyling: Story;
 //# sourceMappingURL=Box.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CA0B1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAqDvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAyC3B,CAAC"}
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAuB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC"}

package/dist/components/Layout/Box/Box.stories.js

@@ -1,121 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from './Box';
-import { Group } from '../Group/Group';
+import { Text } from '../../Typography/Text/Text';
+import { neutral } from '../../../constants/colors';
 const meta = {
-    title: 'Layouts/Box',
+    title: 'Components/Layout/Box',
     component: Box,
+    parameters: {
+        layout: 'centered',
+    },
     argTypes: {
+        children: {
+            control: { type: 'text' },
+            description: 'Content to render inside the Box',
+            table: { type: { summary: 'ReactNode' } },
+        },
         width: {
             control: { type: 'text' },
             description: 'Custom width',
-            table: {
-                type: { summary: 'string | number' },
-            },
-        },
-        styles: {
-            control: { type: 'object' },
-            description: 'Custom styles object',
-            table: {
-                type: { summary: 'Record<string, CSSObject>' },
-            },
+            table: { type: { summary: 'string | number' } },
         },
         onClick: {
             action: 'clicked',
             description: 'Click handler function',
-            table: {
-                type: { summary: '() => void' },
-            },
+            table: { type: { summary: '() => void' } },
         },
     },
 };
 export default meta;
 export const Default = {
     args: {
-        children: 'Box lets you add inline styles with sx prop',
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: `<Box
-  sx={(theme) => ({
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-    textAlign: 'center',
-    padding: theme.spacing.xl,
-    borderRadius: theme.radius.md,
-    cursor: 'pointer',
-    '&:hover': {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-    },
-  })}
->
-  Box lets you add inline styles with sx prop
-</Box>`,
-            },
-        },
-    },
-};
-export const Alignment = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Box, { sx: (theme) => ({
-                    backgroundColor: theme.colors.blue[0],
-                    padding: theme.spacing.md,
-                    borderRadius: theme.radius.md,
-                    textAlign: 'left',
-                    border: `1px solid ${theme.colors.blue[3]}`,
-                }), children: "Left Aligned" }), _jsx(Box, { sx: (theme) => ({
-                    backgroundColor: theme.colors.green[0],
-                    padding: theme.spacing.md,
-                    borderRadius: theme.radius.md,
-                    textAlign: 'center',
-                    border: `1px solid ${theme.colors.green[3]}`,
-                }), children: "Center Aligned" }), _jsx(Box, { sx: (theme) => ({
-                    backgroundColor: theme.colors.orange[0],
-                    padding: theme.spacing.md,
-                    borderRadius: theme.radius.md,
-                    textAlign: 'right',
-                    border: `1px solid ${theme.colors.orange[3]}`,
-                }), children: "Right Aligned" })] })),
-    parameters: {
-        docs: {
-            source: {
-                code: `<Box
-  sx={(theme) => ({
-    textAlign: 'center',
-    padding: theme.spacing.md,
-    backgroundColor: theme.colors.blue[0],
-  })}
->
-  Center Aligned Content
-</Box>`,
-            },
+        children: 'Box is a styled div — use it as a wrapper or for custom styling',
+        sx: {
+            backgroundColor: neutral[50],
+            padding: '2.4rem',
+            borderRadius: '8px',
         },
     },
 };
-export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Box, { sx: (theme) => ({
-                    backgroundColor: theme.colors.red[0],
-                    color: theme.colors.red[9],
-                    padding: theme.spacing.lg,
-                    borderRadius: theme.radius.lg,
-                    border: `2px solid ${theme.colors.red[3]}`,
-                    boxShadow: theme.shadows.md,
-                    '&:hover': {
-                        transform: 'translateY(-2px)',
-                        boxShadow: theme.shadows.lg,
-                    },
-                }), children: "Custom Styled Box" }), _jsx(Box, { sx: (theme) => ({
-                    background: `linear-gradient(45deg, ${theme.colors.violet[3]}, ${theme.colors.pink[3]})`,
-                    color: 'white',
-                    padding: theme.spacing.xl,
-                    borderRadius: theme.radius.xl,
-                    textAlign: 'center',
-                    fontWeight: 600,
-                    boxShadow: theme.shadows.xl,
-                }), children: "Gradient Box" })] })),
+export const BoxStyling = {
+    render: () => (_jsx(Box, { sx: {
+            backgroundColor: neutral[25],
+            padding: '2.4rem',
+            borderRadius: '8px',
+            border: `1px dashed ${neutral[100]}`,
+        }, children: _jsx(Text, { weight: "semibold", children: "This is a box that has been styled" }) })),
     parameters: {
-        docs: {
-            source: {
-                code: false,
-            },
-        },
+        docs: { source: { code: false } },
     },
 };

package/dist/components/Layout/Card/Card.d.ts

@@ -4,5 +4,5 @@ export interface CardProps extends MantineCardProps {
     children: React.ReactNode;
     animate?: boolean;
 }
-export declare const Card: ({ children, animate, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, animate, p, radius, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

package/dist/components/Layout/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnF,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,GAAI,iCAAyC,SAAS,4CAiBtE,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnF,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,GAAI,4CAAoE,SAAS,4CAiBjG,CAAC"}

package/dist/components/Layout/Card/Card.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card as MantineCard } from '@mantine/core';
-export const Card = ({ children, animate = false, ...props }) => {
+export const Card = ({ children, animate = false, p = "2.4rem", radius = "20px", ...props }) => {
     const hoverAnimation = {
         style: { transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out' },
         onMouseEnter: (e) => {
@@ -12,5 +12,5 @@ export const Card = ({ children, animate = false, ...props }) => {
             e.currentTarget.style.boxShadow = 'none';
         },
     };
-    return (_jsx(MantineCard, { p: "1.8rem", radius: "20px", withBorder: true, ...(animate ? hoverAnimation : {}), ...props, children: children }));
+    return (_jsx(MantineCard, { p: p, radius: radius, withBorder: true, ...(animate ? hoverAnimation : {}), ...props, children: children }));
 };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAM9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA+C3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA2B3B,CAAC"}