@taiv/ui 1.11.0 → 1.13.0

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

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

@@ -1,51 +1,65 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from './Stack';
-import { Box } from '../Box/Box';
+import { Text } from '../../Typography/Text/Text';
+import { Card } from '../Card/Card';
+import { Group } from '../Group/Group';
+import { neutral } from '../../../constants/colors';
 const meta = {
-    title: 'Layouts/Stack',
+    title: 'Components/Layout/Stack',
     component: Stack,
+    parameters: {
+        layout: 'centered',
+    },
     argTypes: {
-        align: {
-            control: { type: 'select' },
-            options: ['stretch', 'center', 'flex-start', 'flex-end', 'baseline'],
-            description: 'align-items CSS property',
+        children: {
+            control: false,
+            description: 'Content to arrange within the stack',
             table: {
-                type: { summary: 'AlignItems' },
+                type: { summary: 'ReactNode' },
             },
         },
         justify: {
             control: { type: 'select' },
             options: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
-            description: 'justify-content CSS property',
+            description: 'Vertical alignment',
             table: {
-                type: { summary: 'JustifyContent' },
+                type: { summary: "'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'" },
+                defaultValue: { summary: "'flex-start'" },
             },
         },
-        spacing: {
+        align: {
             control: { type: 'select' },
-            options: ['xs', 'sm', 'md', 'lg', 'xl'],
-            description: 'Gap between items',
+            options: ['stretch', 'center', 'flex-start', 'flex-end', 'baseline'],
+            description: 'Horizontal alignment',
             table: {
-                type: { summary: 'number | "xs" | "sm" | "md" | "lg" | "xl"' },
+                type: { summary: "'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline'" },
+                defaultValue: { summary: "'stretch'" },
+            },
+        },
+        gap: {
+            control: { type: 'text' },
+            description: 'Spacing between items',
+            table: {
+                type: { summary: 'string' },
             },
         },
         width: {
             control: { type: 'text' },
-            description: 'Custom width',
+            description: 'Custom width override',
             table: {
                 type: { summary: 'string | number' },
             },
         },
-        gap: {
+        h: {
             control: { type: 'text' },
-            description: 'Custom gap value',
+            description: 'Custom height override',
             table: {
-                type: { summary: 'string' },
+                type: { summary: 'string | number' },
             },
         },
         styles: {
             control: { type: 'object' },
-            description: 'Custom styles object',
+            description: 'Custom styles override - use this sparingly',
             table: {
                 type: { summary: 'Record<string, CSSObject>' },
             },
@@ -53,56 +67,22 @@ const meta = {
     },
 };
 export default meta;
-const SampleBox = ({ children, color = 'blue' }) => (_jsx(Box, { sx: (theme) => ({
-        backgroundColor: theme.colors[color][0],
-        color: theme.colors[color][9],
-        padding: theme.spacing.md,
-        borderRadius: theme.radius.md,
-        border: `1px solid ${theme.colors[color][3]}`,
-        textAlign: 'center',
-        minHeight: '60px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    }), children: children }));
+const SampleCard = ({ label }) => (_jsx(Card, { children: _jsx(Text, { weight: "bold", children: label }) }));
 export const Default = {
     args: {
-        align: 'stretch',
-        justify: 'flex-start',
-        spacing: 'md',
-    },
-    render: (args) => (_jsxs(Stack, { ...args, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" }), _jsx(SampleBox, { color: "orange", children: "Item 3" })] })),
-};
-export const JustifyAlignContent = {
-    render: () => (_jsxs("div", { style: { display: 'flex', gap: '2rem', flexWrap: 'wrap' }, children: [_jsxs("div", { children: [_jsx("h4", { children: "Justify Content" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: [_jsxs("div", { children: [_jsx("strong", { children: "flex-start" }), _jsxs(Stack, { justify: "flex-start", spacing: "sm", style: { height: '200px', border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" })] })] }), _jsxs("div", { children: [_jsx("strong", { children: "center" }), _jsxs(Stack, { justify: "center", spacing: "sm", style: { height: '200px', border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" })] })] }), _jsxs("div", { children: [_jsx("strong", { children: "space-between" }), _jsxs(Stack, { justify: "space-between", spacing: "sm", style: { height: '200px', border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" })] })] })] })] }), _jsxs("div", { children: [_jsx("h4", { children: "Align Items" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: [_jsxs("div", { children: [_jsx("strong", { children: "stretch" }), _jsxs(Stack, { align: "stretch", spacing: "sm", style: { height: '200px', border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" })] })] }), _jsxs("div", { children: [_jsx("strong", { children: "center" }), _jsxs(Stack, { align: "center", spacing: "sm", style: { height: '200px', border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" })] })] }), _jsxs("div", { children: [_jsx("strong", { children: "flex-end" }), _jsxs(Stack, { align: "flex-end", spacing: "sm", style: { height: '200px', border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" })] })] })] })] })] })),
-    parameters: {
-        docs: {
-            source: {
-                code: `<Stack justify="center" align="center" spacing="md">
-  <Box>Centered Item 1</Box>
-  <Box>Centered Item 2</Box>
-</Stack>`,
-            },
-        },
+        children: undefined,
+        justify: undefined,
+        align: undefined,
+        gap: undefined,
+        h: undefined,
+        width: undefined,
+        styles: undefined,
     },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '500px', backgroundColor: neutral[25], padding: '2rem' }, children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsxs(Stack, { ...args, children: [_jsx(SampleCard, { label: "Item 1" }), _jsx(SampleCard, { label: "Item 2" }), _jsx(SampleCard, { label: "Item 3" })] })),
 };
-export const SpacingGap = {
-    render: () => (_jsxs("div", { style: { display: 'flex', gap: '2rem', flexDirection: 'column' }, children: [_jsxs("div", { children: [_jsx("h4", { children: "Theme Spacing" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' }, children: [_jsxs("div", { children: [_jsx("strong", { children: "xs" }), _jsxs(Stack, { spacing: "xs", style: { border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" }), _jsx(SampleBox, { color: "orange", children: "Item 3" })] })] }), _jsxs("div", { children: [_jsx("strong", { children: "sm" }), _jsxs(Stack, { spacing: "sm", style: { border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" }), _jsx(SampleBox, { color: "orange", children: "Item 3" })] })] }), _jsxs("div", { children: [_jsx("strong", { children: "md" }), _jsxs(Stack, { spacing: "md", style: { border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" }), _jsx(SampleBox, { color: "orange", children: "Item 3" })] })] }), _jsxs("div", { children: [_jsx("strong", { children: "lg" }), _jsxs(Stack, { spacing: "lg", style: { border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" }), _jsx(SampleBox, { color: "orange", children: "Item 3" })] })] }), _jsxs("div", { children: [_jsx("strong", { children: "xl" }), _jsxs(Stack, { spacing: "xl", style: { border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" }), _jsx(SampleBox, { color: "orange", children: "Item 3" })] })] })] })] }), _jsxs("div", { children: [_jsx("h4", { children: "Custom Gap" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' }, children: [_jsxs("div", { children: [_jsx("strong", { children: "2rem" }), _jsxs(Stack, { gap: "2rem", style: { border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" }), _jsx(SampleBox, { color: "orange", children: "Item 3" })] })] }), _jsxs("div", { children: [_jsx("strong", { children: "20px" }), _jsxs(Stack, { gap: "20px", style: { border: '1px solid #ccc', padding: '1rem' }, children: [_jsx(SampleBox, { color: "blue", children: "Item 1" }), _jsx(SampleBox, { color: "green", children: "Item 2" }), _jsx(SampleBox, { color: "orange", children: "Item 3" })] })] })] })] })] })),
-    parameters: {
-        docs: {
-            source: {
-                code: `<Stack spacing="lg">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Stack>
-
-<Stack gap="2rem">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Stack>`,
-            },
-        },
-    },
+export const PositionContent = {
+    render: () => (_jsx(Stack, { gap: "xl", justify: "flex-start", children: _jsx(Group, { children: ['flex-start', 'center', 'space-between'].map((val) => (_jsxs("div", { children: [_jsx(Text, { variant: "label", mb: "sm", children: _jsxs("code", { children: ["justify=", '"' + val + '"'] }) }), _jsxs(Stack, { justify: val, spacing: "sm", sx: { height: '200px', width: '200px', border: `1px dashed ${neutral[50]}`, padding: '0.5rem' }, children: [_jsx(SampleCard, { label: "A" }), _jsx(SampleCard, { label: "B" })] })] }, val))) }) })),
 };

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

@@ -1,15 +1,13 @@
 import React from 'react';
 import { TabsProps as MantineTabsProps } from '@mantine/core';
-export interface TabsProps extends Omit<MantineTabsProps, 'children' | 'onChange' | 'placement'> {
+export interface TabsProps extends Omit<MantineTabsProps, 'children' | 'onChange'> {
     children: React.ReactNode;
     defaultValue?: string;
     value?: string;
     onChange?: (value: string | null) => void;
-    orientation?: 'horizontal' | 'vertical';
-    placement?: 'left' | 'right' | 'top' | 'bottom';
     variant?: 'default' | 'outline' | 'pills';
 }
-export declare const Tabs: (({ children, defaultValue, value, onChange, orientation, placement, variant, styles, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const Tabs: (({ children, defaultValue, value, onChange, variant, styles, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element) & {
     List: React.ForwardRefExoticComponent<import("@mantine/core").TabsListProps & React.RefAttributes<HTMLDivElement>>;
     Tab: React.ForwardRefExoticComponent<import("@mantine/core").TabProps & React.RefAttributes<HTMLButtonElement>>;
     Panel: React.ForwardRefExoticComponent<import("@mantine/core").TabsPanelProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInF,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;IAC9F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAChD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAC3C;AA+CD,eAAO,MAAM,IAAI,oGA7CyI,SAAS;;;;CAiDjK,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInF,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,CAAC;IAChF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAC3C;AA+CD,eAAO,MAAM,IAAI,4EA7C0F,SAAS;;;;CAiDlH,CAAC"}

package/dist/components/Layout/Tabs/Tabs.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Tabs as MantineTabs } from '@mantine/core';
 import { fontBase } from '../../../constants/font';
 import { colors } from '../../../constants/colors';
-const TabsComponent = ({ children, defaultValue, value, onChange, orientation = 'horizontal', placement = 'top', variant = 'default', styles, ...props }) => {
+const TabsComponent = ({ children, defaultValue, value, onChange, variant = 'default', styles, ...props }) => {
     const style = {
         root: {
             width: '100%',
@@ -39,7 +39,7 @@ const TabsComponent = ({ children, defaultValue, value, onChange, orientation =
         },
         ...styles,
     };
-    return (_jsx(MantineTabs, { styles: style, radius: "lg", defaultValue: defaultValue, value: value, orientation: orientation, variant: variant, ...props, children: children }));
+    return (_jsx(MantineTabs, { styles: style, radius: "lg", defaultValue: defaultValue, value: value, variant: variant, ...props, children: children }));
 };
 export const Tabs = Object.assign(TabsComponent, {
     List: MantineTabs.List,

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAK9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA2D3B,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,KA4BtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAyE3B,CAAC"}

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

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs } from './Tabs';
+import { Stack } from '../Stack/Stack';
+import { primary } from '../../../constants/colors';
+import { Text } from '../../Typography/Text/Text';
+const meta = {
+    title: 'Components/Layout/Tabs',
+    component: Tabs,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/tabs/)\n\nThe Tabs component organizes content into sections that users can switch between. It extends Mantine v6's Tabs component with custom styling and variant options.",
+            },
+        },
+    },
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Tab content — composed of Tabs.List, Tabs.Tab, and Tabs.Panel',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        variant: {
+            control: { type: 'select' },
+            options: ['default', 'outline', 'pills'],
+            description: 'The preset variant to use for styling',
+            table: {
+                type: { summary: "'default' | 'outline' | 'pills'" },
+                defaultValue: { summary: "'default'" },
+            },
+        },
+        defaultValue: {
+            control: { type: 'select' },
+            options: ['overview', 'details', 'settings'],
+            description: 'The default tab when the component is mounted',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        value: {
+            control: { type: 'text' },
+            description: 'The currently active tab value',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Called when the active tab changes',
+            table: {
+                type: { summary: '(value: string | null) => void' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Override for styling',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: undefined,
+        variant: 'default',
+        defaultValue: 'overview',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px' }, children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Overview" }), _jsx(Tabs.Tab, { value: "details", children: "Details" }), _jsx(Tabs.Tab, { value: "settings", children: "Settings" })] }), _jsx(Tabs.Panel, { mt: "1.6rem", value: "overview", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Overview" }) }), _jsx(Tabs.Panel, { mt: "1.6rem", value: "details", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Details" }) }), _jsx(Tabs.Panel, { mt: "1.6rem", value: "settings", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Settings" }) })] })),
+};
+export const Variants = {
+    render: () => (_jsxs(Stack, { spacing: "4.8rem", py: "2.4rem", sx: { width: '600px' }, children: [_jsx(Tabs, { defaultValue: "overview", variant: "default", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Default" }), _jsx(Tabs.Tab, { value: "details", children: "Tab 2" }), _jsx(Tabs.Tab, { value: "settings", children: "Tab 3" })] }) }), _jsx(Tabs, { defaultValue: "overview", variant: "outline", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Outline" }), _jsx(Tabs.Tab, { value: "details", children: "Tab 2" }), _jsx(Tabs.Tab, { value: "settings", children: "Tab 3" })] }) }), _jsx(Tabs, { defaultValue: "overview", variant: "pills", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Pills" }), _jsx(Tabs.Tab, { value: "details", children: "Tab 2" }), _jsx(Tabs.Tab, { value: "settings", children: "Tab 3" })] }) })] })),
+};
+export const CustomStyling = {
+    args: {
+        defaultValue: 'overview',
+        styles: {
+            root: {
+                background: primary[200],
+                padding: '2rem',
+                borderRadius: '12px',
+            },
+            tab: {
+                color: 'white',
+                '&:hover': {
+                    color: 'white',
+                    backgroundColor: primary[300],
+                },
+                '&[data-active]': {
+                    color: 'white',
+                    backgroundColor: primary[100],
+                },
+            },
+            panel: {
+                color: 'white',
+            },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px' }, children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsxs(Tabs, { variant: "pills", ...args, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Overview" }), _jsx(Tabs.Tab, { value: "details", children: "Details" })] }), _jsx(Tabs.Panel, { mt: "1.6rem", value: "overview", children: "Overview" }), _jsx(Tabs.Panel, { mt: "1.6rem", value: "details", children: "Details" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<Tabs
+  defaultValue="overview"
+  styles={{
+    root: {
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      padding: '2rem',
+      borderRadius: '12px',
+    },
+    tab: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      '&[data-active]': {
+        color: 'white',
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+      },
+    },
+    panel: { color: 'white' },
+  }}
+>
+  <Tabs.List>
+    <Tabs.Tab value="overview">Overview</Tabs.Tab>
+    <Tabs.Tab value="details">Details</Tabs.Tab>
+  </Tabs.List>
+  <Tabs.Panel value="overview">Overview content</Tabs.Panel>
+  <Tabs.Panel value="details">Details content</Tabs.Panel>
+</Tabs>`,
+            },
+        },
+    },
+};

package/dist/components/Misc/IconBadge/IconBadge.stories.d.ts

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

package/dist/components/Misc/IconBadge/IconBadge.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconBadge.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/IconBadge/IconBadge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAsChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}