@taiv/ui 1.11.0 → 1.13.0

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

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

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Frame } from './Frame';
+import { Text } from '../../Typography/Text/Text';
+import { Stack } from '../Stack/Stack';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { neutral } from '../../../constants/colors';
+import { Card } from '../Card/Card';
+import { Title } from '../../Typography/Title/Title';
+import { TextInput } from '../../Inputs/TextInputs/TextInput/TextInput';
+import { Group } from '../Group/Group';
+const meta = {
+    title: 'Components/Layout/Frame',
+    component: Frame,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        title: {
+            control: { type: 'text' },
+            description: 'Section header title',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        subtitle: {
+            control: { type: 'text' },
+            description: 'Optional subtitle below the title',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        children: {
+            control: false,
+            description: 'Content displayed below the header',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Width of the frame',
+            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: {
+        children: undefined,
+        title: 'Frame Title',
+        subtitle: 'Optional subtitle text',
+        width: '500px',
+    },
+    render: (args) => (_jsx(Frame, { ...args, children: _jsx("div", { style: {
+                backgroundColor: neutral[25],
+                border: `1px dashed ${neutral[50]}`,
+                borderRadius: '8px',
+                padding: '2rem',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minHeight: '150px',
+            }, children: _jsx(Text, { children: "Frame Content" }) }) })),
+};
+export const UseCases = {
+    render: () => (_jsxs(Stack, { gap: "3rem", sx: { width: '500px' }, children: [_jsx(Frame, { title: "User Details", subtitle: "Enter your user details", children: _jsxs(Stack, { gap: "1.6rem", children: [_jsx(TextInput, { label: "Name", placeholder: "Enter your name", type: "text", fullWidth: true }), _jsx(TextInput, { label: "Email", placeholder: "Enter your email", type: "email", fullWidth: true }), _jsxs(Group, { children: [_jsx(Button, { variant: "primary", children: "Save" }), _jsx(Button, { variant: "secondary", children: "Cancel" })] })] }) }), _jsx(Frame, { title: "Your Items", subtitle: "View your recent items", children: _jsx(Stack, { gap: "sm", children: [1, 2, 3].map((item) => (_jsxs(Card, { children: [_jsxs(Title, { variant: "cardHeader", children: ["Item ", item] }), _jsxs(Title, { variant: "cardSubheader", children: ["Description for item ", item] })] }, item))) }) }), _jsx(Frame, { title: "Stats This Week", children: _jsxs("div", { style: { display: 'flex', gap: '1rem', alignItems: 'stretch' }, children: [_jsxs("div", { style: { textAlign: 'center', padding: '1rem', backgroundColor: neutral[25], borderRadius: '8px', flex: 1 }, children: [_jsx(Text, { size: "xl", weight: "bold", children: "42" }), _jsx(Text, { size: "sm", color: neutral[100], children: "Ads Played" })] }), _jsxs("div", { style: { textAlign: 'center', padding: '1rem', backgroundColor: neutral[25], borderRadius: '8px', flex: 1 }, children: [_jsx(Text, { size: "xl", weight: "bold", children: "1.2K" }), _jsx(Text, { size: "sm", color: neutral[100], children: "Impressions" })] }), _jsxs("div", { style: { textAlign: 'center', padding: '1rem', backgroundColor: neutral[25], borderRadius: '8px', flex: 1 }, children: [_jsx(Text, { size: "xl", weight: "bold", children: "89%" }), _jsx(Text, { size: "sm", color: neutral[100], children: "Revenue Growth" })] })] }) })] })),
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAO9B,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;AASnC,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAC"}

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid } from './Grid';
+import { Card } from '../Card/Card';
+import { Title } from '../../Typography/Title/Title';
+import { Stack } from '../Stack/Stack';
+const meta = {
+    title: 'Components/Layout/Grid',
+    component: Grid,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Content for the Grid - each child node should also be within a <Grid.Col> element',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        gutter: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Spacing between columns',
+            table: {
+                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        align: {
+            control: { type: 'select' },
+            options: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
+            description: 'Vertical alignment of grid items',
+            table: {
+                type: { summary: "'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'" },
+            },
+        },
+        justify: {
+            control: { type: 'select' },
+            options: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
+            description: 'Horizontal alignment of grid items',
+            table: {
+                type: { summary: "'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'" },
+            },
+        },
+        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, children: [_jsx(Title, { variant: "cardHeader", children: title }), _jsx(Title, { variant: "cardSubheader", children: description })] }));
+export const Default = {
+    args: {
+        children: undefined,
+        gutter: undefined,
+        align: undefined,
+        justify: undefined,
+        styles: undefined,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '700px' }, children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsxs(Grid, { ...args, children: [_jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 1", description: "span={4}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 2", description: "span={4}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 3", description: "span={4}" }) })] })),
+};
+export const ColumnSpans = {
+    render: () => (_jsxs(Stack, { spacing: "md", sx: { width: '700px' }, children: [_jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 6, children: _jsx(SampleCard, { title: "Column 1", description: "span={6}" }) }), _jsx(Grid.Col, { span: 6, children: _jsx(SampleCard, { title: "Column 2", description: "span={6}" }) })] }), _jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 8, children: _jsx(SampleCard, { title: "Main Content", description: "span={8}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Sidebar", description: "span={4}" }) })] }), _jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 1", description: "span={4}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 2", description: "span={4}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 3", description: "span={4}" }) })] }), _jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 3, children: _jsx(SampleCard, { title: "Left", description: "span={3}" }) }), _jsx(Grid.Col, { span: 6, children: _jsx(SampleCard, { title: "Center", description: "span={6}" }) }), _jsx(Grid.Col, { span: 3, children: _jsx(SampleCard, { title: "Right", description: "span={3}" }) })] })] })),
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Group.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Group/Group.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAMhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA8E5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC"}

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group } from './Group';
+import { Text } from '../../Typography/Text/Text';
+import { Card } from '../Card/Card';
+import { Stack } from '../Stack/Stack';
+import { neutral } from '../../../constants/colors';
+const meta = {
+    title: 'Components/Layout/Group',
+    component: Group,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Content to arrange horizontally',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        position: {
+            control: { type: 'select' },
+            options: ['left', 'center', 'right', 'apart'],
+            description: 'Horizontal alignment of children',
+            table: {
+                type: { summary: "'left' | 'center' | 'right' | 'apart'" },
+                defaultValue: { summary: "'left'" },
+            },
+        },
+        align: {
+            control: { type: 'select' },
+            options: ['stretch', 'center', 'flex-start', 'flex-end'],
+            description: 'Vertical alignment of children',
+            table: {
+                type: { summary: "'stretch' | 'center' | 'flex-start' | 'flex-end'" },
+                defaultValue: { summary: "'stretch'" },
+            },
+        },
+        gap: {
+            control: { type: 'text' },
+            description: 'Spacing between items',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '16px' },
+            },
+        },
+        noWrap: {
+            control: { type: 'boolean' },
+            description: 'Prevent items from wrapping to new lines',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        grow: {
+            control: { type: 'boolean' },
+            description: 'Whether children grow to fill available space',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Custom width override',
+            table: {
+                type: { summary: 'string | number' },
+            },
+        },
+        h: {
+            control: { type: 'text' },
+            description: 'Custom height override - use this sparingly',
+            table: {
+                type: { summary: 'string | number' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles override - use this sparingly',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+    },
+};
+export default meta;
+const SampleCard = ({ label }) => (_jsx(Card, { styles: { root: { overflow: 'hidden' } }, children: _jsx(Text, { truncate: "end", weight: "bold", children: label }) }));
+export const Default = {
+    args: {
+        children: undefined,
+        gap: undefined,
+        position: undefined,
+        align: undefined,
+        grow: false,
+        noWrap: false,
+        width: undefined,
+        h: undefined,
+        styles: undefined,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '500px', backgroundColor: neutral[25], padding: '2rem' }, children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsxs(Group, { ...args, children: [_jsx(SampleCard, { label: "Item 1" }), _jsx(SampleCard, { label: "Item 2" }), _jsx(SampleCard, { label: "Item 3" })] })),
+};
+export const PositionAlign = {
+    render: () => (_jsx(Stack, { spacing: "md", sx: { width: '500px' }, children: ['left', 'center', 'right', 'apart'].map((pos) => (_jsxs("div", { children: [_jsx(Text, { variant: "label", mb: "sm", children: _jsxs("code", { children: ["position=", '"' + pos + '"'] }) }), _jsxs(Group, { position: pos, spacing: "sm", sx: { backgroundColor: neutral[25], padding: '0.5rem' }, children: [_jsx(SampleCard, { label: "A" }), _jsx(SampleCard, { label: "B" })] })] }, pos))) })),
+};
+export const WrapItems = {
+    render: () => (_jsxs(Stack, { gap: "4rem", children: [_jsxs("div", { children: [_jsxs(Text, { variant: "label", mb: "sm", children: [_jsxs("code", { children: ["noWrap=", '{false}'] }), " (default, will continue to grow vertically)"] }), _jsxs(Group, { sx: { backgroundColor: neutral[25], padding: '0.5rem', width: '250px' }, children: [_jsx(SampleCard, { label: "First" }), _jsx(SampleCard, { label: "Second" }), _jsx(SampleCard, { label: "Third" }), _jsx(SampleCard, { label: "Fourth" })] })] }), _jsxs("div", { children: [_jsxs(Text, { variant: "label", mb: "sm", children: [_jsxs("code", { children: ["noWrap=", '{true}'] }), ", combined with ", _jsx("code", { children: "overflow='hidden'" }), " on the card and ", _jsx("code", { children: "truncate='end'" }), " on the text"] }), _jsxs(Group, { noWrap: true, spacing: "sm", sx: { backgroundColor: neutral[25], padding: '0.5rem', width: '250px' }, children: [_jsx(SampleCard, { label: "First" }), _jsx(SampleCard, { label: "Second" }), _jsx(SampleCard, { label: "Third" }), _jsx(SampleCard, { label: "Fourth" })] })] })] })),
+};
+export const GrowItems = {
+    render: () => (_jsxs("div", { children: [_jsx(Text, { variant: "label", mb: "sm", children: _jsxs("code", { children: ["grow=", '{true}'] }) }), _jsxs(Group, { grow: true, spacing: "sm", sx: { backgroundColor: neutral[25], padding: '0.5rem', width: '400px' }, children: [_jsx(SampleCard, { label: "A" }), _jsx(SampleCard, { label: "B" })] })] })),
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAiB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAyBF,eAAO,MAAM,mBAAmB,EAAE,KAKjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAiB5B,CAAC"}