@taiv/ui 1.12.0 → 1.13.0

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

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Loader } from './Loader';
+import { Stack } from '../Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { Group } from '../Group/Group';
+import { useNotifications } from '../../../hooks/useNotifications';
+const meta = {
+    title: 'Components/Misc/Loader',
+    component: Loader,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Size of the loader',
+            table: {
+                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        size: 'md',
+    },
+};
+const LoadingNotificationDemo = () => {
+    const { show, showLoading, hide } = useNotifications();
+    const [isLoading, setIsLoading] = useState(false);
+    const handleSuccess = () => {
+        setIsLoading(true);
+        const id = showLoading({ message: 'Saving your changes...' });
+        setTimeout(() => {
+            hide(id);
+            show({ variant: 'success', message: 'Your changes have been saved.' });
+            setIsLoading(false);
+        }, 3000);
+    };
+    return (_jsx(Group, { gap: "0.5rem", children: _jsx(Button, { onClick: handleSuccess, loading: isLoading, children: "Save" }) }));
+};
+export const LoadingNotification = {
+    render: () => _jsx(LoadingNotificationDemo, {}),
+    parameters: {
+        docs: { source: { code: false } },
+    },
+};
+export const ButtonLoading = {
+    render: () => _jsx(Button, { loading: true, children: "Save" }),
+    parameters: {
+        docs: { source: { code: false } },
+    },
+};
+export const CenteredLoader = {
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '300px', padding: '3.2rem' }, children: _jsx(Story, {}) })),
+    ],
+    render: () => (_jsxs(Stack, { align: "center", children: [_jsx(Loader, {}), _jsx(Text, { variant: "subtle", children: " Loading data..." })] })),
+    parameters: {
+        docs: { source: { code: false } },
+    },
+};

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

@@ -1,11 +1,9 @@
 import React from 'react';
-import { CardProps as MantineCardProps } from '@mantine/core';
-import { colors } from '../../../constants/colors';
-export interface SectionCardProps extends Omit<MantineCardProps, 'children'> {
+import { CardProps } from '../Card/Card';
+export interface SectionCardProps extends Omit<CardProps, 'children'> {
     title: string;
     subtitle?: string;
     children: React.ReactNode;
-    color?: keyof typeof colors;
 }
-export declare const SectionCard: ({ title, subtitle, children, color, ...props }: SectionCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionCard: ({ title, subtitle, children, ...props }: SectionCardProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SectionCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/SectionCard/SectionCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAInD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,GAAI,gDAA4D,gBAAgB,4CAsBvG,CAAC"}
+{"version":3,"file":"SectionCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/SectionCard/SectionCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAE3B;AAED,eAAO,MAAM,WAAW,GAAI,yCAAyC,gBAAgB,4CAcpF,CAAC"}

package/dist/components/Layout/SectionCard/SectionCard.js

@@ -1,13 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card as MantineCard } from '@mantine/core';
+import { Card } from '../Card/Card';
 import { Stack } from '../Stack/Stack';
 import { Title } from '../../Typography/Title/Title';
 import { Box } from '../Box/Box';
-export const SectionCard = ({ title, subtitle, children, color = 'primary', ...props }) => {
-    return (_jsxs(MantineCard, { radius: "20px", shadow: "lg", withBorder: true, padding: 0, ...props, children: [_jsx(Box, { sx: {
-                    // background: `linear-gradient(to right, ${colors[color][300]}, ${colors[color][200]})`,
-                    backgroundColor: 'white',
-                    padding: '1.6rem 2rem 0 2rem',
-                    borderRadius: '20px 20px 0 0',
-                }, children: _jsxs(Stack, { gap: "0.25rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Title, { variant: "cardSubheader", children: subtitle })] }) }), _jsx(Box, { sx: { padding: '2rem 3.2rem 3.2rem 3.2rem' }, children: children })] }));
+export const SectionCard = ({ title, subtitle, children, ...props }) => {
+    return (_jsx(Card, { p: "2.4rem", ...props, children: _jsxs(Stack, { gap: "2rem", children: [_jsxs(Stack, { gap: "0", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Title, { variant: "cardSubheader", children: subtitle })] }), _jsx(Box, { children: children })] }) }));
 };

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

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

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

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

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SectionCard } from './SectionCard';
+import { AutoGrid } from '../AutoGrid/AutoGrid';
+import { Text } from '../../Typography/Text/Text';
+import { IconBadge } from '../../Misc/IconBadge/IconBadge';
+import { IconEye } from '@tabler/icons-react';
+import { Group } from '../Group/Group';
+import { Title } from '../../Typography/Title/Title';
+import { neutral } from '../../../constants/colors';
+const meta = {
+    title: 'Components/Layout/SectionCard',
+    component: SectionCard,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        title: {
+            control: { type: 'text' },
+            description: 'Main title displayed in the card header',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        subtitle: {
+            control: { type: 'text' },
+            description: 'Optional subtitle displayed below the main title',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        animate: {
+            control: { type: 'boolean' },
+            description: 'Enable a lifting hover animation',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        children: {
+            control: false,
+            description: 'Content displayed in the card body',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        radius: {
+            control: { type: 'text' },
+            description: 'Border radius of the card',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: "'20px'" },
+            },
+        },
+        shadow: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Shadow depth of the card',
+            table: {
+                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl'" },
+                defaultValue: { summary: "'lg'" },
+            },
+        },
+        p: {
+            control: { type: 'text' },
+            description: 'Padding of the card',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: "'0.8rem'" },
+            },
+        },
+        withBorder: {
+            control: { type: 'boolean' },
+            description: 'Whether to show card border',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: undefined,
+        title: 'Impressions This Week',
+        subtitle: 'Total impressions at all locations',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '400px' }, children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsx(SectionCard, { ...args, children: _jsxs(Group, { gap: "1rem", children: [_jsx(IconBadge, { icon: _jsx(IconEye, { size: 30 }), color: "salmon" }), _jsx(Title, { weight: "semibold", size: "2xl", color: neutral[200], children: "55,000" })] }) })),
+};
+export const Animation = {
+    render: () => (_jsx("div", { style: { width: '400px' }, children: _jsx(SectionCard, { title: "Example Card", subtitle: "With an example subtitle", animate: true, children: _jsx(Text, { variant: "subtle", children: "This card lifts on hover" }) }) })),
+};
+export const WithAutoGrid = {
+    render: () => (_jsx("div", { style: { width: '800px' }, children: _jsx(AutoGrid, { cols: 2, children: ['Example Card 1', 'Example Card 2', 'Example Card 3', 'Example Card 4'].map((label, i) => (_jsx(SectionCard, { title: label, subtitle: "With an example subtitle", animate: true, children: _jsx("div", {}) }, label))) }) })),
+};

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

@@ -4,6 +4,5 @@ declare const meta: Meta<typeof Stack>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const JustifyAlignContent: Story;
-export declare const SpacingGap: Story;
+export declare const PositionContent: Story;
 //# sourceMappingURL=Stack.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Stack/Stack.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAkD5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqBnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAmEjC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAwFxB,CAAC"}
+{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Stack/Stack.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,CA6D5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC"}