@taiv/ui 1.3.2 → 1.4.0

package/dist/components/Inputs/Buttons/Button/variants.d.ts

@@ -0,0 +1,191 @@
+export declare const componentVariants: {
+    readonly primary: {
+        readonly background: "linear-gradient(to right, #0081CE, #00A6F4)";
+        readonly color: "white";
+        readonly '&:hover': {
+            readonly background: "linear-gradient(to right, #0081CE, #0081CE)";
+            readonly transition: "background 0.3s ease-in-out";
+        };
+        readonly '&:active': {
+            readonly background: "white";
+            readonly border: "1px solid #00A6F4";
+            readonly color: "#00A6F4";
+        };
+        readonly '&:toggled': {
+            readonly background: "linear-gradient(to right, #0081CE, #0081CE)";
+            readonly color: "white";
+        };
+        readonly '&:disabled': {
+            readonly background: "#EDEDED";
+            readonly color: "#D9D9D9";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "white";
+            };
+        };
+    };
+    readonly secondary: {
+        readonly background: "white";
+        readonly color: "#6D6D6D";
+        readonly border: "1px solid #6D6D6D";
+        readonly '&:hover': {
+            readonly background: "#D9D9D9";
+            readonly border: "1px solid #D9D9D9";
+            readonly color: "white";
+        };
+        readonly '&:active': {
+            readonly background: "#D9D9D9";
+            readonly border: "1px solid #6D6D6D";
+            readonly color: "#6D6D6D";
+        };
+        readonly '&:toggled': {
+            readonly background: "#D9D9D9";
+            readonly color: "neutral[200]";
+        };
+        readonly '&:disabled': {
+            readonly background: "#EDEDED";
+            readonly border: "1px solid #EDEDED";
+            readonly color: "#D9D9D9";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "#6D6D6D";
+            };
+        };
+    };
+    readonly cancel: {
+        readonly background: "#C10007";
+        readonly color: "white";
+        readonly '&:hover': {
+            readonly background: "#FB2C36";
+        };
+        readonly '&:active': {
+            readonly background: "white";
+            readonly border: "1px solid #C10007";
+            readonly color: "#C10007";
+        };
+        readonly '&:toggled': {
+            readonly background: "#FB2C36";
+            readonly color: "white";
+        };
+        readonly '&:disabled': {
+            readonly background: "#FFD7D9";
+            readonly border: "1px solid #FFD7D9";
+            readonly color: "white";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "white";
+            };
+        };
+    };
+    readonly success: {
+        readonly background: "#00A63E";
+        readonly color: "white";
+        readonly '&:hover': {
+            readonly background: "#00C951";
+        };
+        readonly '&:active': {
+            readonly background: "white";
+            readonly border: "1px solid #00A63E";
+            readonly color: "#00A63E";
+        };
+        readonly '&:toggled': {
+            readonly background: "#00C951";
+        };
+        readonly '&:disabled': {
+            readonly background: "#E6F4E7";
+            readonly border: "1px solid #E6F4E7";
+            readonly color: "white";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "white";
+            };
+        };
+    };
+    readonly warning: {
+        readonly background: "#E17100";
+        readonly color: "white";
+        readonly '&:hover': {
+            readonly background: "#FE9A00";
+        };
+        readonly '&:active': {
+            readonly background: "white";
+            readonly border: "1px solid #E17100";
+            readonly color: "#E17100";
+        };
+        readonly '&:toggled': {
+            readonly background: "#FE9A00";
+        };
+        readonly '&:disabled': {
+            readonly background: "#FFE5B4";
+            readonly border: "1px solid #FFE5B4";
+            readonly color: "white";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "white";
+            };
+        };
+    };
+    readonly text: {
+        readonly background: "transparent";
+        readonly color: "#6D6D6D";
+        readonly border: "none";
+        readonly padding: "0";
+        readonly height: "auto";
+        readonly minWidth: "unset";
+        readonly '&:hover': {
+            readonly background: "transparent";
+            readonly color: "#0081CE";
+        };
+        readonly '&:active': {
+            readonly background: "transparent";
+            readonly color: "#00A6F4";
+        };
+        readonly '&:toggled': {
+            readonly background: "transparent";
+            readonly color: "#0081CE";
+        };
+        readonly '&:disabled': {
+            readonly background: "transparent";
+            readonly color: "#D9D9D9";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "#6D6D6D";
+            };
+        };
+    };
+    readonly nav: {
+        readonly background: "white";
+        readonly paddingLeft: "0.8rem";
+        readonly color: "#6D6D6D";
+        readonly '& .mantine-Button-inner': {
+            readonly justifyContent: "flex-start";
+        };
+        readonly '&:hover': {
+            readonly background: "#EDEDED";
+        };
+        readonly '&:active': {
+            readonly background: "#D9D9D9";
+            readonly color: "#6D6D6D";
+        };
+        readonly '&:toggled': {
+            readonly background: "#EDEDED";
+            readonly color: "#6D6D6D";
+        };
+        readonly '&:disabled': {
+            readonly background: "#EDEDED";
+            readonly color: "#D9D9D9";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "#6D6D6D";
+            };
+        };
+    };
+};
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/Inputs/Buttons/Button/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LpB,CAAC"}

package/dist/components/Inputs/Buttons/Button/variants.js

@@ -0,0 +1,191 @@
+import { primary, neutral, error, success, warning } from '../../../../constants/colors';
+export const componentVariants = {
+    primary: {
+        background: `linear-gradient(to right, ${primary[300]}, ${primary[200]})`,
+        color: 'white',
+        '&:hover': {
+            background: `linear-gradient(to right, ${primary[300]}, ${primary[300]})`,
+            transition: 'background 0.3s ease-in-out',
+        },
+        '&:active': {
+            background: 'white',
+            border: `1px solid ${primary[200]}`,
+            color: primary[200],
+        },
+        '&:toggled': {
+            background: `linear-gradient(to right, ${primary[300]}, ${primary[300]})`,
+            color: 'white',
+        },
+        '&:disabled': {
+            background: neutral[50],
+            color: neutral[100],
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: 'white',
+            },
+        },
+    },
+    secondary: {
+        background: 'white',
+        color: neutral[200],
+        border: `1px solid ${neutral[200]}`,
+        '&:hover': {
+            background: neutral[100],
+            border: `1px solid ${neutral[100]}`,
+            color: 'white',
+        },
+        '&:active': {
+            background: neutral[100],
+            border: `1px solid ${neutral[200]}`,
+            color: neutral[200],
+        },
+        '&:toggled': {
+            background: neutral[100],
+            color: 'neutral[200]',
+        },
+        '&:disabled': {
+            background: neutral[50],
+            border: `1px solid ${neutral[50]}`,
+            color: neutral[100],
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: neutral[200],
+            },
+        },
+    },
+    cancel: {
+        background: error[200],
+        color: 'white',
+        '&:hover': {
+            background: error[100],
+        },
+        '&:active': {
+            background: 'white',
+            border: `1px solid ${error[200]}`,
+            color: error[200],
+        },
+        '&:toggled': {
+            background: error[100],
+            color: 'white',
+        },
+        '&:disabled': {
+            background: error[50],
+            border: `1px solid ${error[50]}`,
+            color: 'white',
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: 'white',
+            },
+        },
+    },
+    success: {
+        background: success[200],
+        color: 'white',
+        '&:hover': {
+            background: success[100],
+        },
+        '&:active': {
+            background: 'white',
+            border: `1px solid ${success[200]}`,
+            color: success[200],
+        },
+        '&:toggled': {
+            background: success[100],
+        },
+        '&:disabled': {
+            background: success[50],
+            border: `1px solid ${success[50]}`,
+            color: 'white',
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: 'white',
+            },
+        },
+    },
+    warning: {
+        background: warning[200],
+        color: 'white',
+        '&:hover': {
+            background: warning[100],
+        },
+        '&:active': {
+            background: 'white',
+            border: `1px solid ${warning[200]}`,
+            color: warning[200],
+        },
+        '&:toggled': {
+            background: warning[100],
+        },
+        '&:disabled': {
+            background: warning[50],
+            border: `1px solid ${warning[50]}`,
+            color: 'white',
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: 'white',
+            },
+        },
+    },
+    text: {
+        background: 'transparent',
+        color: neutral[200],
+        border: 'none',
+        padding: '0',
+        height: 'auto',
+        minWidth: 'unset',
+        '&:hover': {
+            background: 'transparent',
+            color: primary[300],
+        },
+        '&:active': {
+            background: 'transparent',
+            color: primary[200],
+        },
+        '&:toggled': {
+            background: 'transparent',
+            color: primary[300],
+        },
+        '&:disabled': {
+            background: 'transparent',
+            color: neutral[100],
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: neutral[200],
+            },
+        },
+    },
+    nav: {
+        background: 'white',
+        paddingLeft: '0.8rem',
+        color: neutral[200],
+        '& .mantine-Button-inner': {
+            justifyContent: 'flex-start',
+        },
+        '&:hover': {
+            background: neutral[50],
+        },
+        '&:active': {
+            background: neutral[100],
+            color: neutral[200],
+        },
+        '&:toggled': {
+            background: neutral[50],
+            color: neutral[200],
+        },
+        '&:disabled': {
+            background: neutral[50],
+            color: neutral[100],
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: neutral[200],
+            },
+        },
+    },
+};

package/dist/components/Inputs/Buttons/UnstyledButton/UnstyledButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { UnstyledButtonProps as MantineUnstyledButtonProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+interface UnstyledButtonProps extends MantineUnstyledButtonProps {
+    styles?: Record<string, CSSObject>;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const UnstyledButton: ({ styles, onClick, ...props }: UnstyledButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { UnstyledButton };
+//# sourceMappingURL=UnstyledButton.d.ts.map

package/dist/components/Inputs/Buttons/UnstyledButton/UnstyledButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnstyledButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/UnstyledButton/UnstyledButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,mBAAmB,IAAI,0BAA0B,EAClD,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,mBAAoB,SAAQ,0BAA0B;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,QAAA,MAAM,cAAc,GAAI,+BAA+B,mBAAmB,4CAEzE,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Inputs/Buttons/UnstyledButton/UnstyledButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UnstyledButton as MantineUnstyledButton, } from '@mantine/core';
+const UnstyledButton = ({ styles, onClick, ...props }) => {
+    return _jsx(MantineUnstyledButton, { styles: styles, onClick: onClick, ...props });
+};
+export { UnstyledButton };

package/dist/components/Inputs/Buttons/UnstyledButton/UnstyledButton.stories.d.ts

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

package/dist/components/Inputs/Buttons/UnstyledButton/UnstyledButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnstyledButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/UnstyledButton/UnstyledButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAmCrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2D1B,CAAC"}

package/dist/components/Inputs/Buttons/UnstyledButton/UnstyledButton.stories.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UnstyledButton } from './UnstyledButton';
+const meta = {
+    title: 'Components/Inputs/Buttons/UnstyledButton',
+    component: UnstyledButton,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/unstyled-button/)\n\nThe UnstyledButton component is a minimal wrapper around Mantine's UnstyledButton component that provides a clean slate for custom button implementations.",
+            },
+        },
+    },
+    argTypes: {
+        children: {
+            control: { type: 'text' },
+            description: 'Button content',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Click handler function',
+            table: {
+                type: { summary: '(event: React.MouseEvent<HTMLButtonElement>) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'Unstyled Button',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<UnstyledButton>Unstyled Button</UnstyledButton>`,
+            },
+        },
+    },
+};
+export const CustomStyles = {
+    render: () => (_jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' }, children: [_jsx(UnstyledButton, { styles: {
+                    root: {
+                        padding: '12px 24px',
+                        borderRadius: '8px',
+                        background: 'linear-gradient(45deg, #667eea, #764ba2)',
+                        color: 'white',
+                        border: 'none',
+                        cursor: 'pointer',
+                        fontSize: '16px',
+                        transition: 'all 0.2s ease',
+                        '&:hover': {
+                            transform: 'translateY(-2px)',
+                            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
+                        },
+                        '&:active': {
+                            transform: 'translateY(0)',
+                        },
+                    },
+                }, children: "Gradient Button" }), _jsx(UnstyledButton, { styles: {
+                    root: {
+                        padding: '8px 16px',
+                        borderRadius: '20px',
+                        background: 'transparent',
+                        color: '#667eea',
+                        border: '2px solid #667eea',
+                        cursor: 'pointer',
+                        fontSize: '14px',
+                        transition: 'all 0.2s ease',
+                        '&:hover': {
+                            background: '#667eea',
+                            color: 'white',
+                        },
+                        '&:disabled': {
+                            opacity: 0.5,
+                            cursor: 'not-allowed',
+                        },
+                    },
+                }, children: "Outlined Button" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

package/dist/components/Inputs/Controls/Checkbox/Checkbox.d.ts

@@ -0,0 +1,27 @@
+import { CheckboxProps as MantineCheckboxProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+declare const componentSizes: {
+    readonly sm: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly mantineSize: "md";
+    };
+    readonly md: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly mantineSize: "lg";
+    };
+    readonly lg: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly mantineSize: "xl";
+    };
+};
+interface CheckboxProps extends MantineCheckboxProps {
+    checked: boolean;
+    styles?: Record<string, CSSObject>;
+    size?: keyof typeof componentSizes;
+}
+declare const Checkbox: ({ checked, styles, size, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export { Checkbox };
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Inputs/Controls/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;CAIV,CAAC;AAEX,UAAU,aAAc,SAAQ,oBAAoB;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;CACpC;AAED,QAAA,MAAM,QAAQ,GAAI,qCAA4C,aAAa,4CA4C1E,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Inputs/Controls/Checkbox/Checkbox.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as MantineCheckbox } from '@mantine/core';
+import { primary, neutral } from '../../../../constants/colors';
+import { fontBase, fontSize } from '../../../../constants/font';
+// Size Presets - Maps to next larger Mantine size, workaround since we dont have a Provider setup
+const componentSizes = {
+    sm: { mantineSize: 'md', ...fontSize['xs'] },
+    md: { mantineSize: 'lg', ...fontSize['sm'] },
+    lg: { mantineSize: 'xl', ...fontSize['md'] },
+};
+const Checkbox = ({ checked, styles, size = 'md', ...props }) => {
+    const selectedSize = componentSizes[size];
+    const style = {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            '& input[type="checkbox"]': {
+                margin: 0,
+                marginTop: 0,
+                lineHeight: 'normal',
+            },
+        },
+        input: {
+            cursor: props.disabled ? 'default' : 'pointer',
+            margin: 0,
+            marginTop: 0,
+            lineHeight: 'normal',
+            '&[type="checkbox"]': {
+                margin: 0,
+                marginTop: 0,
+                lineHeight: 'normal',
+            },
+            '&:checked': {
+                backgroundColor: primary[200],
+                borderColor: primary[200],
+            },
+            '&:hover': {
+                backgroundColor: checked ? primary[200] : neutral[50],
+            },
+        },
+        icon: {
+            color: 'white',
+            transform: 'translateY(0)',
+        },
+        label: {
+            cursor: props.disabled ? 'default' : 'pointer',
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return _jsx(MantineCheckbox, { checked: checked, size: selectedSize.mantineSize, styles: style, ...props });
+};
+export { Checkbox };

package/dist/components/Inputs/Controls/Checkbox/Checkbox.stories.d.ts

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

package/dist/components/Inputs/Controls/Checkbox/Checkbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA4E/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA6C1B,CAAC"}