@taiv/ui 1.12.0 → 1.13.0

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

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/Typography/Formula/Formula.js

@@ -8,7 +8,7 @@ class FormulaParser {
         this.current = 0;
     }
     parse(expression) {
-        const hasMathOperators = /[*\/+\-()=]/.test(expression);
+        const hasMathOperators = /[*\/+\-()=_]/.test(expression);
         if (!hasMathOperators) {
             return [{ type: 'default', value: expression }];
         }
@@ -121,7 +121,7 @@ const FormulaRenderer = ({ nodes, weight, size, color }) => {
                 case 'operator':
                     return (_jsx(Text, { weight: weight, size: size, color: color, mx: "0.25rem", children: node.value === '*' ? '×' : node.value }, index));
                 case 'subscript':
-                    return (_jsxs(Text, { weight: weight, size: size, color: color, children: [node.value, _jsx("sub", { children: `(${node.subscript})` })] }, index));
+                    return (_jsxs(Text, { weight: weight, size: size, color: color, children: [node.value, _jsx("sub", { children: node.subscript })] }, index));
                 case 'fraction':
                     return (_jsx(Fraction, { color: color, weight: weight, size: size, numerator: _jsx(FormulaRenderer, { nodes: node.numerator || [], weight: weight, size: size, color: color }), denominator: _jsx(FormulaRenderer, { nodes: node.denominator || [], weight: weight, size: size, color: color }) }, index));
                 default:

package/dist/components/Typography/Formula/Formula.stories.d.ts

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

package/dist/components/Typography/Formula/Formula.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formula.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Formula/Formula.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAyC9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC"}

package/dist/components/Typography/Formula/Formula.stories.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Formula } from './Formula';
+import { Stack } from '../../Layout/Stack/Stack';
+import { primary } from '../../../constants/colors';
+const meta = {
+    title: 'Components/Typography/Formula',
+    component: Formula,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        expression: {
+            control: { type: 'text' },
+            description: 'The mathematical expression string to parse and render',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+            description: 'Override for the font size',
+            table: {
+                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'" },
+                defaultValue: { summary: 'From "body" text variant' },
+            },
+        },
+        weight: {
+            control: { type: 'select' },
+            options: ['light', 'regular', 'medium', 'semibold', 'bold'],
+            description: 'Override for the font weight',
+            table: {
+                type: { summary: "'light' | 'regular' | 'medium' | 'semibold' | 'bold'" },
+                defaultValue: { summary: 'From "body" text variant' },
+            },
+        },
+        color: {
+            control: { type: 'color' },
+            description: 'Override for the text color',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'From "body" text variant' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        expression: 'x + y = z',
+        size: undefined,
+        weight: undefined,
+        color: undefined,
+    },
+};
+export const Operations = {
+    render: () => (_jsxs(Stack, { gap: "1rem", children: [_jsx(Formula, { expression: "a + b" }), _jsx(Formula, { expression: "a - b" }), _jsx(Formula, { expression: "a * b" }), _jsx(Formula, { expression: "a / b" }), _jsx(Formula, { expression: "Revenue_a * Revenue_b" })] })),
+};
+export const StructuringEquations = {
+    parameters: {
+        docs: {
+            source: {
+                code: `{/* b/c as fraction, then add a */}
+<Formula expression="a + b / c" />
+
+{/* (a + b) as the numerator */}
+<Formula expression="(a + b) / c" />
+
+{/* complex numerator and denominator */}
+<Formula expression="(a + b) / (c + d)" />`,
+            },
+        },
+    },
+    render: () => (_jsxs(Stack, { gap: "1rem", children: [_jsx(Formula, { expression: "a + b / c" }), _jsx(Formula, { expression: "(a + b) / c" }), _jsx(Formula, { expression: "(a + b) / (c + d)" })] })),
+};
+export const CustomOverrides = {
+    parameters: {
+        docs: {
+            source: {
+                code: `<Formula expression="(a + b) / c" size="xl" weight="semibold" color={primary[200]} />`,
+            },
+        },
+    },
+    render: () => (_jsx(Formula, { expression: "(a + b) / c", size: "xl", weight: "semibold", color: primary[200] })),
+};

package/dist/components/Typography/Fraction/Fraction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fraction.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Fraction/Fraction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,UAAU,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,QAAQ,CAAC;IACpE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,GAAI,0DAAmE,aAAa,4CAajG,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Fraction.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Fraction/Fraction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/C,UAAU,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,QAAQ,CAAC;IACpE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,GAAI,0DAAmE,aAAa,4CAajG,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Typography/Fraction/Fraction.stories.d.ts

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

package/dist/components/Typography/Fraction/Fraction.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fraction.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Fraction/Fraction.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAyD/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC"}