@taiv/ui 1.12.0 → 1.14.0

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

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stepper as MantineStepper } from '@mantine/core';
+import { Step } from './Step';
+import { baseStyles, DEFAULT_ICON_SIZE_PX } from './variants';
+;
+export const Stepper = ({ activeStep, steps, variant = 'primary', size = 'md', iconSize = DEFAULT_ICON_SIZE_PX[size], orientation = 'horizontal', allowNextStepsSelect = false, styles, ...props }) => {
+    const resolvedBaseStyles = baseStyles(variant, props.color);
+    const stepItems = steps.filter((step) => !step.completed);
+    const completedStep = steps.find((step) => step.completed);
+    const style = orientation === 'horizontal'
+        ? {
+            ...resolvedBaseStyles,
+            root: {
+                boxSizing: 'border-box',
+                width: '100%',
+                maxWidth: '100%',
+            },
+            steps: {
+                alignItems: 'flex-start',
+                boxSizing: 'border-box',
+                width: '100%',
+                gap: '1.5rem',
+            },
+            step: {
+                ...resolvedBaseStyles.step,
+                flexDirection: 'column',
+                alignItems: 'center',
+                position: 'relative',
+                flex: '1 1 0',
+                minWidth: 0,
+                width: 'auto',
+                maxWidth: 'none',
+            },
+            stepBody: {
+                ...resolvedBaseStyles.stepBody,
+                marginLeft: 0,
+                marginRight: 0,
+                marginTop: '0.8rem',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'stretch',
+                boxSizing: 'border-box',
+            },
+            stepLabel: {
+                ...resolvedBaseStyles.stepLabel,
+                textAlign: 'center',
+                whiteSpace: 'nowrap',
+                alignSelf: 'stretch',
+            },
+            stepDescription: {
+                ...resolvedBaseStyles.stepDescription,
+                textAlign: 'center',
+                boxSizing: 'border-box',
+                overflowWrap: 'break-word',
+                minWidth: '8rem',
+            },
+            separator: {
+                flex: '1 1 0',
+                height: '2px',
+                marginTop: `calc(${(iconSize) / 32}rem - 0.0625rem)`,
+                marginLeft: '-2rem',
+                marginRight: '-2rem',
+            },
+            content: {
+                ...resolvedBaseStyles.content,
+                marginTop: '1rem',
+            },
+            ...styles
+        }
+        : { ...resolvedBaseStyles, ...styles };
+    return (_jsxs(MantineStepper, { ...props, active: activeStep, iconSize: iconSize, size: size, orientation: orientation, allowNextStepsSelect: allowNextStepsSelect, style: { zoom: 1.5 }, styles: style, children: [stepItems.map((step, index) => (_jsx(Step, { ...step, children: step.header }, index))), completedStep ? _jsx(MantineStepper.Completed, { children: completedStep.header }) : null] }));
+};

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Stepper } from './Stepper';
+declare const meta: Meta<typeof Stepper>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Color: Story;
+export declare const Size: Story;
+export declare const Orientation: Story;
+export declare const Icons: Story;
+export declare const Header: Story;
+export declare const AllowNextStepSelect: Story;
+//# sourceMappingURL=Stepper.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Stepper/Stepper.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAS5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAyBpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CA+D9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAiBnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAGlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAGjC,CAAC"}

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { IconCheck, IconCreditCard, IconFileText, IconPackage, IconSettings, } from '@tabler/icons-react';
+import { Stepper } from './Stepper';
+const checkoutSteps = [
+    { label: 'Choose Plan', description: 'Select your base package' },
+    { label: 'Add-Ons', description: 'Customize your setup' },
+    { label: 'Payment', description: 'Enter billing details' },
+    { label: 'Confirm', description: 'Review and submit' },
+];
+const iconSteps = [
+    { label: 'Plan', description: 'Choose plan', icon: _jsx(IconPackage, { size: 16 }), completedIcon: _jsx(IconCheck, { size: 16 }) },
+    { label: 'Config', description: 'Configure', icon: _jsx(IconSettings, { size: 16 }), completedIcon: _jsx(IconCheck, { size: 16 }) },
+    { label: 'Payment', description: 'Pay', icon: _jsx(IconCreditCard, { size: 16 }), completedIcon: _jsx(IconCheck, { size: 16 }) },
+    { label: 'Review', description: 'Review', icon: _jsx(IconFileText, { size: 16 }), completedIcon: _jsx(IconCheck, { size: 16 }) },
+];
+const completedSteps = [
+    { label: 'Choose Plan', description: 'Select your base package', header: 'Step 1 header' },
+    { label: 'Add-Ons', description: 'Customize your setup', header: 'Step 2 header' },
+    { label: 'Payment', description: 'Enter billing details', header: 'Step 3 header' },
+    { label: 'Confirm', description: 'Review and submit', header: 'Step 4 header' },
+    { label: 'Done', completed: true, header: 'All steps are completed.' },
+];
+const meta = {
+    title: 'Components/Misc/Stepper',
+    component: Stepper,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'The Stepper component is a reusable wrapper around Mantine Stepper for building linear, multi-step flows like onboarding, checkout, and setup forms.',
+            },
+        },
+    },
+    args: {
+        activeStep: 1,
+        steps: checkoutSteps,
+        variant: 'primary',
+        size: 'md',
+        orientation: 'horizontal',
+    },
+    argTypes: {
+        activeStep: {
+            control: { type: 'number', min: 0, max: checkoutSteps.length },
+            description: 'Index of the active step',
+            table: { type: { summary: 'number' } },
+        },
+        steps: {
+            control: false,
+            description: 'Array of step definitions (label, description, icon, etc.)',
+            table: { type: { summary: 'Step[]' } },
+        },
+        variant: {
+            control: { type: 'select' },
+            options: ['primary'],
+            description: 'Variant for Stepper color scheme',
+            table: { type: { summary: "'primary'" }, defaultValue: { summary: "'primary'" } },
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Stepper control size',
+            table: { type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, defaultValue: { summary: "'md'" } },
+        },
+        iconSize: {
+            control: { type: 'number', min: 12, max: 64, step: 2 },
+            description: 'Size of the step circles in pixels',
+            table: { type: { summary: 'number' }, defaultValue: { summary: '42' } },
+        },
+        orientation: {
+            control: { type: 'inline-radio' },
+            options: ['horizontal', 'vertical'],
+            description: 'Layout direction of the stepper',
+            table: { type: { summary: "'horizontal' | 'vertical'" }, defaultValue: { summary: "'horizontal'" } },
+        },
+        allowNextStepsSelect: {
+            control: { type: 'boolean' },
+            description: 'Allow clicking steps to set active step',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+        },
+        onStepClick: {
+            control: false,
+            description: 'Event handler for step click',
+            table: { category: 'Events', type: { summary: '(stepIndex: number) => void' }, }
+        }
+    },
+};
+export default meta;
+const interactiveRender = (args) => {
+    const [activeStep, setActiveStep] = useState(args.activeStep);
+    useEffect(() => {
+        setActiveStep(args.activeStep);
+    }, [args.activeStep]);
+    return (_jsx(Stepper, { ...args, activeStep: activeStep, onStepClick: (stepIndex) => setActiveStep(stepIndex) }));
+};
+export const Default = {
+    render: interactiveRender,
+};
+export const Color = {
+    render: interactiveRender,
+    args: { color: 'red' },
+};
+export const Size = {
+    render: interactiveRender,
+    args: { size: 'xl' },
+};
+export const Orientation = {
+    render: interactiveRender,
+    args: { orientation: 'vertical' },
+};
+export const Icons = {
+    render: interactiveRender,
+    args: { steps: iconSteps },
+};
+export const Header = {
+    render: interactiveRender,
+    args: {
+        steps: completedSteps,
+        activeStep: 4,
+        allowNextStepsSelect: true
+    },
+};
+export const AllowNextStepSelect = {
+    render: interactiveRender,
+    args: { allowNextStepsSelect: true },
+};

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

@@ -0,0 +1,54 @@
+export declare const componentVariants: {
+    primary: {
+        color: "#00A6F4";
+    };
+};
+export type StepperVariant = keyof typeof componentVariants;
+export declare const baseStyles: (variant: StepperVariant, color?: any) => {
+    step: {
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+        fontWeight: number;
+    };
+    stepBody: {
+        color: any;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+        fontWeight: number;
+    };
+    stepIcon: {
+        '&:not([data-progress]):not([data-completed])': {
+            backgroundColor: string;
+            color: "#D9D9D9";
+            borderColor: "#D9D9D9";
+        };
+        '&[data-progress]': {
+            backgroundColor: string;
+            color: any;
+        };
+    };
+    stepLabel: {
+        color: any;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+        fontWeight: number;
+    };
+    stepDescription: {
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+        fontWeight: number;
+    };
+    content: {
+        textAlign: "center";
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+        fontWeight: number;
+    };
+};
+export declare const DEFAULT_ICON_SIZE_PX: Record<string, number>;
+//# sourceMappingURL=variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Stepper/variants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB;;;;CAI7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE5D,eAAO,MAAM,UAAU,GAAI,SAAS,cAAc,EAAE,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMvD,CAAC"}

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

@@ -0,0 +1,48 @@
+import { fontBase } from '../../../constants/font';
+import { primary, neutral, white } from '../../../constants/colors';
+export const componentVariants = {
+    primary: {
+        color: primary[200],
+    },
+};
+export const baseStyles = (variant, color) => {
+    const variantColor = color !== null && color !== void 0 ? color : componentVariants[variant].color;
+    return {
+        step: {
+            ...fontBase,
+        },
+        stepBody: {
+            ...fontBase,
+            color: variantColor,
+        },
+        stepIcon: {
+            '&:not([data-progress]):not([data-completed])': {
+                backgroundColor: white,
+                color: neutral[100],
+                borderColor: neutral[100],
+            },
+            '&[data-progress]': {
+                backgroundColor: white,
+                color: variantColor,
+            },
+        },
+        stepLabel: {
+            ...fontBase,
+            color: variantColor
+        },
+        stepDescription: {
+            ...fontBase,
+        },
+        content: {
+            ...fontBase,
+            textAlign: 'center',
+        },
+    };
+};
+export const DEFAULT_ICON_SIZE_PX = {
+    xs: 34,
+    sm: 36,
+    md: 42,
+    lg: 48,
+    xl: 52,
+};

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleText.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/CollapsibleText/CollapsibleText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,UAAU,oBAAoB;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe,GAAI,2DAAoE,oBAAoB,4CAuBhH,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"CollapsibleText.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/CollapsibleText/CollapsibleText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,UAAU,oBAAoB;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe,GAAI,2DAAoE,oBAAoB,4CAuBhH,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/Typography/CollapsibleText/CollapsibleText.js

@@ -6,8 +6,9 @@ import { Group } from '../../Layout/Group/Group';
 import { Text } from '../Text/Text';
 import { Transition } from '../../Misc/Transition/Transition';
 import { UnstyledButton } from '../../Inputs/Buttons/UnstyledButton/UnstyledButton';
+import { spacing } from '../../../constants/spacing';
 const CollapsibleText = ({ text, variant = 'body', className, opened, setOpened, children }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(UnstyledButton, { className: className, onClick: () => setOpened(!opened), children: _jsxs(Group, { gap: "0.4rem", align: "center", children: [_jsx(Text, { variant: variant, color: primary[200], children: text }), _jsx(IconCaretDownFilled, { size: 18, style: {
+    return (_jsxs(_Fragment, { children: [_jsx(UnstyledButton, { className: className, onClick: () => setOpened(!opened), children: _jsxs(Group, { gap: spacing.xs, align: "center", children: [_jsx(Text, { variant: variant, color: primary[200], children: text }), _jsx(IconCaretDownFilled, { size: 18, style: {
                                 color: primary[200],
                                 transform: opened ? 'rotate(180deg)' : 'none',
                                 transition: 'transform 200ms ease',

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleText.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/CollapsibleText/CollapsibleText.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAuCtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgBnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAC"}
+{"version":3,"file":"CollapsibleText.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/CollapsibleText/CollapsibleText.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAuCtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgBnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAC"}

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { CollapsibleText } from './CollapsibleText';
 import { Stack } from '../../Layout/Stack/Stack';
 import { Text } from '../Text/Text';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Typography/CollapsibleText',
     component: CollapsibleText,
@@ -51,7 +52,7 @@ const CollapsibleTextWithState = (props) => {
 export const Default = {
     render: (args) => {
         const [opened, setOpened] = useState(false);
-        return (_jsx(CollapsibleText, { text: args.text, variant: args.variant, opened: opened, setOpened: setOpened, children: _jsx(Stack, { gap: "0.8rem", style: { paddingTop: '0.4rem' }, children: _jsx(Text, { variant: "body", children: "Expanded content goes here. You can put forms, lists, or any other content." }) }) }));
+        return (_jsx(CollapsibleText, { text: args.text, variant: args.variant, opened: opened, setOpened: setOpened, children: _jsx(Stack, { gap: spacing.sm, style: { paddingTop: spacing.xs }, children: _jsx(Text, { variant: "body", children: "Expanded content goes here. You can put forms, lists, or any other content." }) }) }));
     },
     args: {
         text: 'Show more',
@@ -59,10 +60,10 @@ export const Default = {
     },
 };
 export const WithContent = {
-    render: () => (_jsx(CollapsibleTextWithState, { text: "Section with content", children: _jsxs(Stack, { gap: "0.4rem", style: { paddingTop: '0.4rem' }, children: [_jsx(Text, { variant: "body", children: "First paragraph of expanded content." }), _jsx(Text, { variant: "body", children: "Second paragraph. Use CollapsibleText for a single-line label that expands." })] }) })),
+    render: () => (_jsx(CollapsibleTextWithState, { text: "Section with content", children: _jsxs(Stack, { gap: spacing.xs, style: { paddingTop: spacing.xs }, children: [_jsx(Text, { variant: "body", children: "First paragraph of expanded content." }), _jsx(Text, { variant: "body", children: "Second paragraph. Use CollapsibleText for a single-line label that expands." })] }) })),
 };
 export const OpenAndClosed = {
-    render: () => (_jsxs(Stack, { gap: "2rem", children: [_jsxs("div", { children: [_jsx(Text, { variant: "label", style: { marginBottom: '0.4rem', display: 'block' }, children: "Closed" }), _jsx(CollapsibleTextWithState, { text: "Closed state (click to expand)" })] }), _jsxs("div", { children: [_jsx(Text, { variant: "label", style: { marginBottom: '0.4rem', display: 'block' }, children: "Open" }), _jsx(CollapsibleTextWithState, { text: "Open state (click to collapse)", initialOpened: true, children: _jsx(Stack, { gap: "0.4rem", style: { paddingTop: '0.4rem' }, children: _jsx(Text, { variant: "body", children: "Content is visible when opened." }) }) })] })] })),
+    render: () => (_jsxs(Stack, { gap: "20px", children: [_jsxs("div", { children: [_jsx(Text, { variant: "label", style: { marginBottom: spacing.xs, display: 'block' }, children: "Closed" }), _jsx(CollapsibleTextWithState, { text: "Closed state (click to expand)" })] }), _jsxs("div", { children: [_jsx(Text, { variant: "label", style: { marginBottom: spacing.xs, display: 'block' }, children: "Open" }), _jsx(CollapsibleTextWithState, { text: "Open state (click to collapse)", initialOpened: true, children: _jsx(Stack, { gap: spacing.xs, style: { paddingTop: spacing.xs }, children: _jsx(Text, { variant: "body", children: "Content is visible when opened." }) }) })] })] })),
     parameters: {
         docs: {
             description: {

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/CollapsibleTitle/CollapsibleTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,GAAI,4DAA4D,qBAAqB,4CA4B1G,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"CollapsibleTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/CollapsibleTitle/CollapsibleTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,GAAI,4DAA4D,qBAAqB,4CA4B1G,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/Typography/CollapsibleTitle/CollapsibleTitle.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IconCaretDownFilled } from '@tabler/icons-react';
 import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 import { Box } from '../../Layout/Box/Box';
 import { Group } from '../../Layout/Group/Group';
 import { Stack } from '../../Layout/Stack/Stack';
@@ -9,7 +10,7 @@ import { Title } from '../Title/Title';
 import { Transition } from '../../Misc/Transition/Transition';
 import { UnstyledButton } from '../../Inputs/Buttons/UnstyledButton/UnstyledButton';
 const CollapsibleTitle = ({ title, subText, className, opened, setOpened, children }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(UnstyledButton, { className: className, onClick: () => setOpened(!opened), children: _jsxs(Stack, { gap: "0.2rem", children: [_jsxs(Group, { gap: "0.4rem", align: "center", children: [_jsx(Title, { variant: "sectionSubheader", size: "md", weight: "medium", children: title }), _jsx(IconCaretDownFilled, { size: 18, style: {
+    return (_jsxs(_Fragment, { children: [_jsx(UnstyledButton, { className: className, onClick: () => setOpened(!opened), children: _jsxs(Stack, { gap: spacing.xxs, children: [_jsxs(Group, { gap: spacing.xs, align: "center", children: [_jsx(Title, { variant: "sectionSubheader", size: "md", weight: "medium", children: title }), _jsx(IconCaretDownFilled, { size: 18, style: {
                                         color: neutral[200],
                                         transform: opened ? 'rotate(180deg)' : 'none',
                                         transition: 'transform 200ms ease',

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTitle.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/CollapsibleTitle/CollapsibleTitle.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAsCvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgBnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAC"}
+{"version":3,"file":"CollapsibleTitle.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/CollapsibleTitle/CollapsibleTitle.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAKtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAsCvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgBnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAC"}

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { CollapsibleTitle } from './CollapsibleTitle';
 import { Stack } from '../../Layout/Stack/Stack';
 import { Text } from '../Text/Text';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Typography/CollapsibleTitle',
     component: CollapsibleTitle,
@@ -50,7 +51,7 @@ const CollapsibleTitleWithState = (props) => {
 export const Default = {
     render: (args) => {
         const [opened, setOpened] = useState(false);
-        return (_jsx(CollapsibleTitle, { title: args.title, subText: args.subText, opened: opened, setOpened: setOpened, children: _jsx(Stack, { gap: "0.8rem", style: { paddingTop: '0.4rem' }, children: _jsx(Text, { variant: "body", children: "Expanded content goes here. You can put forms, lists, or any other content." }) }) }));
+        return (_jsx(CollapsibleTitle, { title: args.title, subText: args.subText, opened: opened, setOpened: setOpened, children: _jsx(Stack, { gap: spacing.sm, style: { paddingTop: spacing.xs }, children: _jsx(Text, { variant: "body", children: "Expanded content goes here. You can put forms, lists, or any other content." }) }) }));
     },
     args: {
         title: 'Title',
@@ -58,10 +59,10 @@ export const Default = {
     },
 };
 export const WithContent = {
-    render: () => (_jsx(CollapsibleTitleWithState, { title: "Section with content", subText: "Click to expand", children: _jsxs(Stack, { gap: "0.4rem", style: { paddingTop: '0.4rem' }, children: [_jsx(Text, { variant: "body", children: "First paragraph of expanded content." }), _jsx(Text, { variant: "body", children: "Second paragraph. The header uses a medium-weight title and caption subtext by default." })] }) })),
+    render: () => (_jsx(CollapsibleTitleWithState, { title: "Section with content", subText: "Click to expand", children: _jsxs(Stack, { gap: spacing.xs, style: { paddingTop: spacing.xs }, children: [_jsx(Text, { variant: "body", children: "First paragraph of expanded content." }), _jsx(Text, { variant: "body", children: "Second paragraph. The header uses a medium-weight title and caption subtext by default." })] }) })),
 };
 export const OpenAndClosed = {
-    render: () => (_jsxs(Stack, { gap: "2rem", children: [_jsxs("div", { children: [_jsx(Text, { variant: "label", style: { marginBottom: '0.4rem', display: 'block' }, children: "Closed" }), _jsx(CollapsibleTitleWithState, { title: "Closed state", subText: "(click to expand)" })] }), _jsxs("div", { children: [_jsx(Text, { variant: "label", style: { marginBottom: '0.4rem', display: 'block' }, children: "Open" }), _jsx(CollapsibleTitleWithState, { title: "Open state", subText: "(click to collapse)", initialOpened: true, children: _jsx(Stack, { gap: "0.4rem", style: { paddingTop: '0.4rem' }, children: _jsx(Text, { variant: "body", children: "Content is visible when opened." }) }) })] })] })),
+    render: () => (_jsxs(Stack, { gap: "20px", children: [_jsxs("div", { children: [_jsx(Text, { variant: "label", style: { marginBottom: spacing.xs, display: 'block' }, children: "Closed" }), _jsx(CollapsibleTitleWithState, { title: "Closed state", subText: "(click to expand)" })] }), _jsxs("div", { children: [_jsx(Text, { variant: "label", style: { marginBottom: spacing.xs, display: 'block' }, children: "Open" }), _jsx(CollapsibleTitleWithState, { title: "Open state", subText: "(click to collapse)", initialOpened: true, children: _jsx(Stack, { gap: spacing.xs, style: { paddingTop: spacing.xs }, children: _jsx(Text, { variant: "body", children: "Content is visible when opened." }) }) })] })] })),
     parameters: {
         docs: {
             description: {

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

@@ -1 +1 @@
-{"version":3,"file":"Formula.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Formula/Formula.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAK/D,UAAU,YAAY;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqMD,QAAA,MAAM,OAAO,GAAI,qCAAqC,YAAY,4CAKjE,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Formula.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Formula/Formula.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAM/D,UAAU,YAAY;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqMD,QAAA,MAAM,OAAO,GAAI,qCAAqC,YAAY,4CAKjE,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { spacing } from '../../../constants/spacing';
 import { Text } from '../Text/Text';
 import { Fraction } from '../Fraction/Fraction';
 import { Group } from '../../Layout/Group/Group';
@@ -8,7 +9,7 @@ class FormulaParser {
         this.current = 0;
     }
     parse(expression) {
-        const hasMathOperators = /[*\/+\-()=]/.test(expression);
+        const hasMathOperators = /[*\/+\-()=_]/.test(expression);
         if (!hasMathOperators) {
             return [{ type: 'default', value: expression }];
         }
@@ -114,14 +115,14 @@ class FormulaParser {
 }
 // Update the renderer to handle subscript
 const FormulaRenderer = ({ nodes, weight, size, color }) => {
-    return (_jsx(Group, { gap: "0.5rem", children: nodes.map((node, index) => {
+    return (_jsx(Group, { gap: spacing.xs, children: nodes.map((node, index) => {
             switch (node.type) {
                 case 'default':
                     return (_jsx(Text, { weight: weight, size: size, color: color, children: node.value }, index));
                 case 'operator':
-                    return (_jsx(Text, { weight: weight, size: size, color: color, mx: "0.25rem", children: node.value === '*' ? '×' : node.value }, index));
+                    return (_jsx(Text, { weight: weight, size: size, color: color, mx: spacing.xxs, 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: "10px", 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: "10px", 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;AAI/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.js

@@ -3,8 +3,9 @@ import { Divider } from '../../Layout/Divider/Divider';
 import { textStyle } from '../../../constants';
 import { Text } from '../Text/Text';
 import { Stack } from '../../Layout/Stack/Stack';
+import { spacing } from '../../../constants/spacing';
 const Fraction = ({ numerator, denominator, variant = 'body', color, weight, size }) => {
     const selectedVariant = textStyle[variant];
-    return (_jsxs(Stack, { sx: { display: 'inline-flex', alignItems: 'center', lineHeight: 1 }, gap: "0.25rem", children: [_jsx(Text, { variant: variant, color: color, weight: weight, size: size, sx: { display: 'block', textAlign: 'center' }, children: numerator }), _jsx(Divider, { color: color || selectedVariant.color, width: "100%" }), _jsx(Text, { variant: variant, color: color, weight: weight, size: size, sx: { display: 'block', textAlign: 'center' }, children: denominator })] }));
+    return (_jsxs(Stack, { sx: { display: 'inline-flex', alignItems: 'center', lineHeight: 1 }, gap: spacing.xxs, children: [_jsx(Text, { variant: variant, color: color, weight: weight, size: size, sx: { display: 'block', textAlign: 'center' }, children: numerator }), _jsx(Divider, { color: color || selectedVariant.color, width: "100%" }), _jsx(Text, { variant: variant, color: color, weight: weight, size: size, sx: { display: 'block', textAlign: 'center' }, children: denominator })] }));
 };
 export { Fraction };

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;AAKtC,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"}