@taiv/ui 1.12.0 → 1.13.0

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

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from './Card';
+import { AutoGrid } from '../AutoGrid/AutoGrid';
+import { Title } from '../../Typography/Title/Title';
+import { primary } from '../../../constants/colors';
+const meta = {
+    title: 'Components/Layout/Card',
+    component: Card,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        children: {
+            control: false,
+            description: 'The content to display inside the card',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        radius: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Border radius of the card',
+            table: {
+                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | string | number" },
+                defaultValue: { summary: "'20px'" },
+            },
+        },
+        withBorder: {
+            control: { type: 'boolean' },
+            description: 'Show/hide card border',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        animate: {
+            control: { type: 'boolean' },
+            description: 'Enable a lifting hover animation',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        sx: {
+            control: { type: 'object' },
+            description: 'Custom styles to override with if necessary. Targets the root card element.',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: undefined,
+        animate: false,
+        radius: '20px',
+        withBorder: true,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '400px' }, children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsxs(Card, { ...args, children: [_jsx(Title, { variant: "cardHeader", children: "Card Title" }), _jsx(Title, { variant: "cardSubheader", children: "This is a basic card component that provides a clean container for grouping related content." })] })),
+};
+export const Animation = {
+    render: () => (_jsx("div", { style: { width: '400px' }, children: _jsxs(Card, { animate: true, children: [_jsx(Title, { variant: "cardHeader", children: "Hover over me" }), _jsx(Title, { variant: "cardSubheader", children: "This card lifts and enhances on hover." })] }) })),
+};
+export const WithAutoGrid = {
+    render: () => (_jsx("div", { style: { width: '700px' }, children: _jsx(AutoGrid, { cols: 3, spacing: "md", children: [1, 2, 3, 4, 5, 6].map((item) => (_jsxs(Card, { animate: true, children: [_jsxs(Title, { variant: "cardHeader", children: ["Card ", item] }), _jsx(Title, { variant: "cardSubheader", children: "Card content" })] }, item))) }) })),
+};
+export const CustomStyling = {
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '400px' }, children: _jsx(Story, {}) })),
+    ],
+    render: () => (_jsxs(Card, { withBorder: false, sx: { background: primary[25], border: `1px solid ${primary[50]}` }, children: [_jsx(Title, { variant: "cardHeader", children: "Custom Card" }), _jsx(Title, { variant: "cardSubheader", children: "Styled with a custom background color and border." })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<Card
+  withBorder={false}
+  sx={{ background: primary[25], border: '1px solid ${primary[50]}' }}
+>
+  <Title variant="cardHeader">Custom Card</Title>
+  <Text>Styled with a custom background color and border.</Text>
+</Card>`,
+            },
+        },
+    },
+};

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Center/Center.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,6BAA6B,WAAW,4CAEvD,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Center/Center.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,MAAM,GAAI,6BAA6B,WAAW,4CAEvD,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Layout/Center/Center.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Center.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Center/Center.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAsC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AASF,eAAO,MAAM,gBAAgB,EAAE,KAkB9B,CAAC"}

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Center } from './Center';
+import { Text } from '../../Typography/Text/Text';
+import { neutral } from '../../../constants/colors';
+import { Title } from '../../Typography/Title/Title';
+import { Card, Stack } from '../../..';
+const meta = {
+    title: 'Components/Layout/Center',
+    component: Center,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Content within the container to center',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Width of the center container',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: 'auto' },
+            },
+        },
+        height: {
+            control: { type: 'text' },
+            description: 'Height of the center container',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: 'auto' },
+            },
+        },
+        sx: {
+            control: { type: 'object' },
+            description: 'Custom styles applied to the root element',
+            table: {
+                type: { summary: 'CSSObject' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: undefined,
+        width: '400px',
+        height: '400px',
+        sx: {
+            backgroundColor: neutral[25],
+        },
+    },
+    render: (args) => (_jsx(Center, { ...args, children: _jsx(Text, { children: "Centered Content" }) })),
+};
+const SampleCard = ({ title, description }) => (_jsxs(Card, { animate: true, children: [_jsx(Title, { variant: "cardHeader", children: title }), _jsx(Title, { variant: "cardSubheader", children: description })] }));
+export const CenteringLayouts = {
+    args: {
+        height: '500px',
+        width: '700px',
+        sx: {
+            backgroundColor: neutral[25],
+            border: `1px dashed ${neutral[50]}`,
+        },
+    },
+    render: (args) => (_jsx(Center, { ...args, children: _jsxs(Stack, { spacing: "md", sx: { width: '300px' }, children: [_jsx(SampleCard, { title: "Card 1", description: "Centered layout" }), _jsx(SampleCard, { title: "Card 2", description: "Centered layout" }), _jsx(SampleCard, { title: "Card 3", description: "Centered layout" })] }) })),
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Divider/Divider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAiD9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC"}

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider } from './Divider';
+import { Text } from '../../Typography/Text/Text';
+import { Stack } from '../Stack/Stack';
+const meta = {
+    title: 'Components/Layout/Divider',
+    component: Divider,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        orientation: {
+            control: { type: 'select' },
+            options: ['horizontal', 'vertical'],
+            description: 'Orientation of the divider (WIP)',
+            table: {
+                type: { summary: "'horizontal' | 'vertical'" },
+                defaultValue: { summary: "'horizontal'" },
+            },
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Thickness of the divider',
+            table: {
+                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | string | number" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        color: {
+            control: { type: 'color' },
+            description: 'Color of the divider',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'neutral[50]' },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Custom width override',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: "'100%'" },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles override - use this sparingly',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        size: undefined,
+        color: undefined,
+        width: undefined,
+        orientation: undefined,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '400px' }, children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsxs(Stack, { children: [_jsx(Text, { children: "Content above" }), _jsx(Divider, { ...args }), _jsx(Text, { children: "Content below" })] })),
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Frame/Frame.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA4C5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAqDtB,CAAC"}