@taiv/ui 1.12.0 → 1.14.0

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

@@ -1,51 +1,66 @@
 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';
+import { spacing } from '../../../constants/spacing';
 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 +68,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: '20px' }, 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: spacing.lg, justify: "flex-start", children: _jsx(Group, { children: ['flex-start', 'center', 'space-between'].map((val) => (_jsxs("div", { children: [_jsx(Text, { variant: "label", mb: spacing.sm, children: _jsxs("code", { children: ["justify=", '"' + val + '"'] }) }), _jsxs(Stack, { justify: val, spacing: spacing.sm, sx: { height: '200px', width: '200px', border: `1px dashed ${neutral[50]}`, padding: spacing.xs }, children: [_jsx(SampleCard, { label: "A" }), _jsx(SampleCard, { label: "B" })] })] }, val))) }) })),
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.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,CA6B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAuQnC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqBvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}
+{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAWhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAuQnC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqBvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}

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

@@ -6,6 +6,7 @@ import { Text } from '../../Typography/Text/Text';
 import { Center } from '../Center/Center';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 import { Group } from '../Group/Group';
 const meta = {
     title: 'Components/Layout/Table',
@@ -173,7 +174,7 @@ const ProductListItem = ({ data }) => {
                 return status;
         }
     };
-    return (_jsxs("tr", { children: [_jsx("td", { children: data.name }), _jsx("td", { children: data.category }), _jsxs("td", { children: ["$", data.price.toFixed(2)] }), _jsx("td", { children: data.stock }), _jsx("td", { children: _jsx(Badge, { color: getStatusColor(data.status), variant: "filled", size: "sm", children: getStatusLabel(data.status) }) }), _jsx("td", { children: _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx(Button, { size: "sm", variant: "primary", children: "Edit" }), _jsx(Button, { size: "sm", variant: "secondary", children: "View" })] }) })] }));
+    return (_jsxs("tr", { children: [_jsx("td", { children: data.name }), _jsx("td", { children: data.category }), _jsxs("td", { children: ["$", data.price.toFixed(2)] }), _jsx("td", { children: data.stock }), _jsx("td", { children: _jsx(Badge, { color: getStatusColor(data.status), variant: "filled", size: "sm", children: getStatusLabel(data.status) }) }), _jsx("td", { children: _jsxs("div", { style: { display: 'flex', gap: spacing.sm }, children: [_jsx(Button, { size: "sm", variant: "primary", children: "Edit" }), _jsx(Button, { size: "sm", variant: "secondary", children: "View" })] }) })] }));
 };
 const ProjectListItem = ({ data }) => {
     const getPriorityColor = (priority) => {
@@ -188,7 +189,7 @@ const ProjectListItem = ({ data }) => {
                 return 'neutral';
         }
     };
-    return (_jsxs("tr", { children: [_jsx("td", { children: data.title }), _jsx("td", { children: data.team.join(', ') }), _jsx("td", { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("div", { style: {
+    return (_jsxs("tr", { children: [_jsx("td", { children: data.title }), _jsx("td", { children: data.team.join(', ') }), _jsx("td", { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: spacing.sm }, children: [_jsx("div", { style: {
                                 flex: 1,
                                 height: '8px',
                                 backgroundColor: '#e0e0e0',
@@ -289,7 +290,7 @@ export const TableWithPlaceholder = {
             { heading: 'Name', style: { width: '50%' } },
             { heading: 'Email', style: { width: '50%' } },
         ],
-        placeholder: (_jsx(Center, { py: '5rem', children: _jsxs(Group, { gap: '0.5rem', align: 'center', children: [_jsx(IconInfoCircle, { color: neutral[200], size: '2rem' }), _jsx(Text, { children: "No data available at this time" })] }) })),
+        placeholder: (_jsx(Center, { py: '50px', children: _jsxs(Group, { gap: spacing.xs, align: 'center', children: [_jsx(IconInfoCircle, { color: neutral[200], size: '20px' }), _jsx(Text, { children: "No data available at this time" })] }) })),
     },
     parameters: {
         docs: {

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;AAKnF,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,8 @@ 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 }) => {
+import { spacing } from '../../../constants/spacing';
+const TabsComponent = ({ children, defaultValue, value, onChange, variant = 'default', styles, ...props }) => {
     const style = {
         root: {
             width: '100%',
@@ -12,7 +13,7 @@ const TabsComponent = ({ children, defaultValue, value, onChange, orientation =
             gap: '0',
         },
         tab: {
-            padding: '0.8rem 2.8rem',
+            padding: `${spacing.sm} 28px`,
             backgroundColor: 'transparent',
             color: colors.neutral[300],
             '&:hover': {
@@ -31,15 +32,15 @@ const TabsComponent = ({ children, defaultValue, value, onChange, orientation =
         },
         tabLabel: {
             ...fontBase,
-            fontSize: '1.6rem',
-            lineHeight: '2.4rem',
+            fontSize: '16px',
+            lineHeight: '24px',
         },
         panel: {
-            padding: '1.6rem 0.8rem',
+            padding: `${spacing.lg} ${spacing.sm}`,
         },
         ...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;AAM9B,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,141 @@
+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 { spacing } from '../../../constants/spacing';
+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: spacing.lg, value: "overview", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Overview" }) }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "details", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Details" }) }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "settings", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Settings" }) })] })),
+};
+export const Variants = {
+    render: () => (_jsxs(Stack, { spacing: "48px", py: spacing.xl, 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: '20px',
+                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: spacing.lg, value: "overview", children: "Overview" }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "details", children: "Details" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<Tabs
+  defaultValue="overview"
+  styles={{
+    root: {
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      padding: '20px',
+      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.js

@@ -12,7 +12,7 @@ export const IconBadge = ({ icon, color }) => {
         if (React.isValidElement(icon) && icon.props && typeof icon.props.size === 'number') {
             const iconSize = icon.props.size;
             const badgeSize = iconSize + 12;
-            return `${badgeSize / 10}rem`;
+            return `${badgeSize}px`;
         }
     };
     return (_jsx("div", { style: {

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

package/dist/components/Misc/IconBadge/IconBadge.stories.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconBadge } from './IconBadge';
+import { IconHeart, IconBell, IconStar, IconCheck, IconSettings, IconShield } from '@tabler/icons-react';
+const meta = {
+    title: 'Components/Misc/IconBadge',
+    component: IconBadge,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'The IconBadge component is just a colored icon wrapped in a circular background.',
+            },
+        },
+    },
+    argTypes: {
+        icon: {
+            control: { type: 'select' },
+            options: ['Heart', 'Bell', 'Star', 'Check', 'Settings', 'Shield'],
+            mapping: {
+                Heart: _jsx(IconHeart, { size: 20 }),
+                Bell: _jsx(IconBell, { size: 20 }),
+                Star: _jsx(IconStar, { size: 20 }),
+                Check: _jsx(IconCheck, { size: 20 }),
+                Settings: _jsx(IconSettings, { size: 20 }),
+                Shield: _jsx(IconShield, { size: 20 }),
+            },
+            description: 'The icon element to display inside the badge',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        color: {
+            control: { type: 'select' },
+            options: ['blue', 'green', 'yellow', 'red', 'purple', 'salmon', 'gray'],
+            description: 'Primitive color for the badge background and icon',
+            table: {
+                type: { summary: "'blue' | 'green' | 'yellow' | 'red' | 'purple' | 'salmon' | 'gray'" },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        icon: _jsx(IconHeart, { size: 20 }),
+        color: 'blue',
+    },
+};

package/dist/components/Misc/Stepper/Step.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Stepper as MantineStepper } from '@mantine/core';
+export interface StepProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    completedIcon?: React.ReactNode;
+    header?: React.ReactNode;
+    loading?: boolean;
+    allowStepSelect?: boolean;
+    completed?: boolean;
+}
+type MantineStepProps = React.ComponentProps<typeof MantineStepper.Step>;
+export declare const Step: ({ label, description, icon, completedIcon, header, loading, allowStepSelect, ...props }: StepProps & Omit<MantineStepProps, keyof StepProps>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Step.d.ts.map

package/dist/components/Misc/Stepper/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Stepper/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAE1D,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAEzE,eAAO,MAAM,IAAI,GAAI,yFASlB,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC,4CAcrD,CAAC"}

package/dist/components/Misc/Stepper/Step.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stepper as MantineStepper } from '@mantine/core';
+;
+export const Step = ({ label, description, icon, completedIcon, header, loading, allowStepSelect, ...props }) => {
+    const resolvedStepIndex = typeof props.step === 'number' ? props.step + 1 : null;
+    return (_jsx(MantineStepper.Step, { ...props, label: label, description: description, icon: icon !== null && icon !== void 0 ? icon : resolvedStepIndex, completedIcon: completedIcon !== null && completedIcon !== void 0 ? completedIcon : resolvedStepIndex, loading: loading !== null && loading !== void 0 ? loading : false, allowStepSelect: allowStepSelect !== null && allowStepSelect !== void 0 ? allowStepSelect : false }));
+};