@taiv/ui 1.12.0 → 1.13.0

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fraction } from './Fraction';
+import { Stack } from '../../Layout/Stack/Stack';
+import { primary } from '../../../constants/colors';
+const meta = {
+    title: 'Components/Typography/Fraction',
+    component: Fraction,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        numerator: {
+            control: { type: 'text' },
+            description: 'The content to display in the numerator',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        denominator: {
+            control: { type: 'text' },
+            description: 'The content to display in the denominator',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        variant: {
+            control: { type: 'select' },
+            options: ['body', 'subtle', 'label', 'caption'],
+            description: 'The preset variant to use for styling',
+            table: {
+                type: { summary: "'body' | 'subtle' | 'label' | 'caption'" },
+                defaultValue: { summary: "'body'" },
+            },
+        },
+        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: 'Set by 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: 'Set by variant' },
+            },
+        },
+        color: {
+            control: { type: 'color' },
+            description: 'Override for the text color',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Set by variant' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        numerator: '1',
+        denominator: '2',
+        variant: undefined,
+        size: undefined,
+        weight: undefined,
+        color: undefined,
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Stack, { gap: "1.5rem", children: [_jsx(Fraction, { numerator: "1", denominator: "2", variant: "body" }), _jsx(Fraction, { numerator: "1", denominator: "2", variant: "subtle" }), _jsx(Fraction, { numerator: "1", denominator: "2", variant: "label" }), _jsx(Fraction, { numerator: "1", denominator: "2", variant: "caption" })] })),
+};
+export const CustomOverrides = {
+    parameters: {
+        docs: {
+            source: {
+                code: `<Fraction numerator="x + 1" denominator="y - 2" size="xl" weight="semibold" color={primary[200]} />`,
+            },
+        },
+    },
+    render: () => (_jsx(Fraction, { numerator: "x + 1", denominator: "y - 2", size: "xl", weight: "semibold", color: primary[200] })),
+};

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1E,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,QAAA,MAAM,IAAI,GAAI,8DAAuE,SAAS,4CAsC7F,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG1E,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,QAAA,MAAM,IAAI,GAAI,8DAAuE,SAAS,4CA2C7F,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Typography/Text/Text.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text as MantineText } from '@mantine/core';
 import { textStyle, fontSize, fontWeight } from '../../../constants/font';
+import { error, neutral } from '../../../constants/colors';
 const Text = ({ variant = 'body', size, children, weight, color, styles, ...props }) => {
     const selectedVariant = textStyle[variant];
     const customSize = size ? fontSize[size] : {};
@@ -28,6 +29,11 @@ const Text = ({ variant = 'body', size, children, weight, color, styles, ...prop
                 fontSize: '0.8em',
                 marginLeft: '0.2em',
             },
+            '& code': {
+                color: error[200],
+                backgroundColor: neutral[50],
+                padding: '0.25em 0.5em',
+            },
         }, ...props, children: children }));
 };
 export { Text };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Text/Text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAI9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA+D3B,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,KAoB7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC"}

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

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from './Text';
+import { Stack } from '../../Layout/Stack/Stack';
+import { primary } from '../../../constants/colors';
+const meta = {
+    title: 'Components/Typography/Text',
+    component: Text,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/text/)\n\nThe Text component is a customizable wrapper around Mantine's Text component that provides consistent typography styling across your application. It extends Mantine v6's TextProps while adding custom variants, sizes, and weights.",
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['body', 'subtle', 'label', 'caption'],
+            description: 'The preset variant to use for styling',
+            table: {
+                type: { summary: "'body' | 'subtle' | 'label' | 'caption'" },
+                defaultValue: { summary: "'body'" },
+            },
+        },
+        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: 'Set by 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: 'Set by variant' },
+            },
+        },
+        color: {
+            control: { type: 'color' },
+            description: 'Override for the text color',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Set by variant' },
+            },
+        },
+        children: {
+            control: { type: 'text' },
+            description: 'The text content to render',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Override for other styling - use this sparingly',
+            table: {
+                type: { summary: 'CSSProperties' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'This is a sample text',
+        variant: undefined,
+        size: undefined,
+        weight: undefined,
+        color: undefined,
+        styles: undefined,
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Stack, { gap: "1rem", children: [_jsx(Text, { variant: "body", children: "This is body text" }), _jsx(Text, { variant: "subtle", children: "This is subtle text" }), _jsx(Text, { variant: "label", children: "This is label text" }), _jsx(Text, { variant: "caption", children: "This is caption text" })] })),
+};
+export const CustomOverrides = {
+    parameters: {
+        docs: {
+            source: {
+                code: `<Text size="xl" weight="semibold" color={primary[200]}>
+  Custom size, weight, and color
+</Text>`,
+            },
+        },
+    },
+    args: {
+        size: 'xl',
+        weight: 'semibold',
+        color: primary[200],
+    },
+    render: (args) => (_jsx(Text, { ...args, children: "Custom size, weight, and color" })),
+};
+export const WithFormatting = {
+    render: () => (_jsxs(Text, { children: ["This sentence has ", _jsx("b", { children: "bold text" }), ", ", _jsx("i", { children: "italic text" }), ", ", _jsx("code", { children: "inline code" }), ", and text with a subscript like ", _jsx("sub", { children: "this" }), "."] })),
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Title.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Title/Title.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA+D5B,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,KAWtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAoB7B,CAAC"}

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Title } from './Title';
+import { Stack } from '../../Layout/Stack/Stack';
+import { primary } from '../../../constants/colors';
+const meta = {
+    title: 'Components/Typography/Title',
+    component: Title,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/title/)\n\nThe Title component utilizes our heading variants to render semantic HTML heading elements with consistent styling. For body text, see the Text component instead.",
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['header', 'sectionHeader', 'subheader', 'sectionSubheader', 'cardHeader', 'cardSubheader'],
+            description: 'The preset variant to use for styling',
+            table: {
+                type: { summary: "'header' | 'sectionHeader' | 'subheader' | 'sectionSubheader' | 'cardHeader' | 'cardSubheader'" },
+                defaultValue: { summary: "'sectionHeader'" },
+            },
+        },
+        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: 'Set by 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: 'Set by variant' },
+            },
+        },
+        color: {
+            control: { type: 'color' },
+            description: 'Override for the text color',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Set by variant' },
+            },
+        },
+        children: {
+            control: { type: 'text' },
+            description: 'The title content to render',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Override for other styling - use this sparingly',
+            table: {
+                type: { summary: 'CSSProperties' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'Sample Title',
+        variant: undefined,
+        size: undefined,
+        weight: undefined,
+        color: undefined,
+        styles: undefined,
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Stack, { gap: "1rem", children: [_jsx(Title, { variant: "header", children: "Header" }), _jsx(Title, { variant: "sectionHeader", children: "Section Header" }), _jsx(Title, { variant: "subheader", children: "Subheader" }), _jsx(Title, { variant: "sectionSubheader", children: "Section Subheader" }), _jsx(Title, { variant: "cardHeader", children: "Card Header" }), _jsx(Title, { variant: "cardSubheader", children: "Card Subheader" })] })),
+};
+export const CustomOverrides = {
+    parameters: {
+        docs: {
+            source: {
+                code: `<Title size="xl" weight="semibold" color={primary[200]}>
+  Custom size, weight, and color
+</Title>`,
+            },
+        },
+    },
+    args: {
+        size: 'xl',
+        weight: 'semibold',
+        color: primary[200],
+    },
+    render: (args) => (_jsx(Title, { ...args, children: "Custom size, weight, and color" })),
+};

package/dist/constants/colors.d.ts

@@ -1,3 +1,4 @@
+export declare const black = "#000000";
 export declare const white = "#FFFFFF";
 export declare const gray: {
     readonly 25: "#F8FAFC";

package/dist/constants/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/constants/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAQ,CAAC;AAE7B,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAS,CAAC;AAE9B,eAAO,MAAM,GAAG;;;;;;CAMN,CAAC;AACX,eAAO,MAAM,KAAK;;;;;;CAAM,CAAC;AAGzB,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOT,CAAC;AAGX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQb,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/constants/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAE/B,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAQ,CAAC;AAE7B,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAS,CAAC;AAE9B,eAAO,MAAM,GAAG;;;;;;CAMN,CAAC;AACX,eAAO,MAAM,KAAK;;;;;;CAAM,CAAC;AAGzB,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOT,CAAC;AAGX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQb,CAAC"}

package/dist/constants/colors.js

@@ -1,3 +1,4 @@
+export const black = '#000000';
 export const white = '#FFFFFF';
 export const gray = {
     25: '#F8FAFC',

package/dist/docs/AIGeneratedBanner.d.ts

@@ -0,0 +1,2 @@
+export declare function AIGeneratedBanner(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AIGeneratedBanner.d.ts.map

package/dist/docs/AIGeneratedBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIGeneratedBanner.d.ts","sourceRoot":"","sources":["../../src/docs/AIGeneratedBanner.tsx"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,4CAMhC"}

package/dist/docs/AIGeneratedBanner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "../components";
+export function AIGeneratedBanner() {
+    return (_jsx("blockquote", { style: { marginBottom: '1rem' }, children: _jsxs(Text, { children: ["\uD83E\uDD16 ", _jsx("b", { children: "AI-generated:" }), " This doc was generated by AI and hasn't been human-edited yet."] }) }));
+}

package/dist/docs/design/Colors.stories.d.ts

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

package/dist/docs/design/Colors.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.stories.d.ts","sourceRoot":"","sources":["../../../src/docs/design/Colors.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAmDtB,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC"}

package/dist/docs/design/Colors.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group } from '../../components/Layout/Group/Group';
+import { Stack } from '../../components/Layout/Stack/Stack';
+import { Text } from '../../components/Typography/Text/Text';
+import { colors, primitives } from '../../constants/colors';
+const meta = {
+    title: 'Design/Colors',
+    tags: ['!dev'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+const Swatch = ({ color, label }) => (_jsxs(Stack, { gap: "0.4rem", align: "center", children: [_jsx("div", { style: {
+                width: '64px',
+                height: '64px',
+                borderRadius: '8px',
+                backgroundColor: color,
+                border: '1px solid rgba(0,0,0,0.1)',
+            } }), _jsx(Text, { size: "xs", color: "dimmed", children: label }), _jsx(Text, { size: "xs", color: "dimmed", children: color })] }));
+const ThemeRow = ({ semantic, primitive, shades, }) => (_jsxs(Stack, { gap: "0.8rem", children: [_jsxs(Group, { gap: "0.4rem", children: [_jsx(Text, { weight: "bold", children: semantic }), _jsxs(Text, { children: ["(", primitive, ")"] })] }), _jsx(Group, { gap: "1.6rem", children: Object.entries(shades).map(([shade, hex]) => (_jsx(Swatch, { color: hex, label: shade }, shade))) })] }));
+const ColorRow = ({ name, shades }) => (_jsxs(Stack, { gap: "0.8rem", children: [_jsx(Text, { weight: "bold", transform: "capitalize", children: name }), _jsx(Group, { gap: "1.6rem", children: Object.entries(shades).map(([shade, hex]) => (_jsx(Swatch, { color: hex, label: shade }, shade))) })] }));
+export const TaivLight = {
+    render: () => (_jsxs(Stack, { gap: "2.4rem", align: "flex-start", children: [_jsxs(Group, { gap: "1.6rem", children: [_jsx(Swatch, { color: "#000000", label: "black" }), _jsx(Swatch, { color: "#FFFFFF", label: "white" })] }), _jsx(ThemeRow, { semantic: "primary", primitive: "blue", shades: colors.primary }), _jsx(ThemeRow, { semantic: "neutral", primitive: "gray", shades: colors.neutral }), _jsx(ThemeRow, { semantic: "success", primitive: "green", shades: colors.success }), _jsx(ThemeRow, { semantic: "warning", primitive: "yellow", shades: colors.warning }), _jsx(ThemeRow, { semantic: "error", primitive: "red", shades: colors.error })] })),
+};
+export const AdditionalPrimitives = {
+    render: () => (_jsxs(Stack, { gap: "2.4rem", children: [_jsx(ColorRow, { name: "purple", shades: primitives.purple }), _jsx(ColorRow, { name: "salmon", shades: primitives.salmon })] })),
+};

package/dist/docs/hooks/Copy.stories.d.ts

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

package/dist/docs/hooks/Copy.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Copy.stories.d.ts","sourceRoot":"","sources":["../../../src/docs/hooks/Copy.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,QAAA,MAAM,IAAI,EAAE,IAqCX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAuBtB,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}

package/dist/docs/hooks/Copy.stories.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCopy } from '../../hooks/useCopy';
+import { Button } from '../../components/Inputs/Buttons/Button/Button';
+import { IconCopy } from '@tabler/icons-react';
+const meta = {
+    title: 'Hooks/Copy',
+    tags: ['!dev'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        value: {
+            control: { type: 'text' },
+            description: 'The value to copy',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Optional label for what the value is',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        showNotification: {
+            control: { type: 'boolean' },
+            description: 'Show notification after copy',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        notificationMessage: {
+            control: { type: 'text' },
+            description: 'Custom notification message override - use this sparingly',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+const DefaultDemo = (args) => {
+    const { copy } = useCopy();
+    return (_jsxs(Button, { variant: "secondary", leftIcon: _jsx(IconCopy, {}), onClick: () => copy({
+            value: args.value,
+            label: args.label || undefined,
+            showNotification: args.showNotification,
+            notificationMessage: args.notificationMessage || undefined,
+        }), children: ["Copy ", args.label] }));
+};
+export const Default = {
+    args: {
+        value: '12345',
+        label: undefined,
+        showNotification: true,
+        notificationMessage: undefined,
+    },
+    render: (args) => _jsx(DefaultDemo, { ...args }),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiv/ui",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "author": "Taiv",
   "description": "Taiv's web UI Toolkit built on Mantine v6",
   "main": "dist/index.js",
@@ -26,7 +26,7 @@
     "@mantine/hooks": "^6.0.0",
     "@mantine/modals": "^6.0.0",
     "@mantine/notifications": "^6.0.0",
-    "@tabler/icons-react": "^2.47.0",
+    "@tabler/icons-react": "^3.41.1",
     "dayjs": "^1.11.18",
     "recharts": "^2.8.0"
   },
@@ -35,13 +35,13 @@
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-onboarding": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-onboarding": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
     "@types/react": "^17.0.87",
     "@types/react-dom": "^17.0.26",
     "chromatic": "^13.3.0",
-    "storybook": "^9.1.10",
+    "storybook": "^10.3.3",
     "typescript": "^5.0.2"
   },
   "exports": {