@taiv/ui 1.7.0 → 1.9.0

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

@@ -0,0 +1,382 @@
+export declare const buttonVariants: {
+    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";
+            };
+        };
+    };
+};
+export declare const subtleVariants: {
+    readonly primary: {
+        readonly background: "white";
+        readonly color: "#00A6F4";
+        readonly '&:hover': {
+            readonly background: "#74D4FF";
+            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: "#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 #EDEDED";
+        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: "white";
+        readonly color: "#C10007";
+        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: "white";
+        readonly color: "#00A63E";
+        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: "white";
+        readonly color: "#E17100";
+        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 border: "none";
+        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/shared/variants.d.ts.map

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

package/dist/components/Inputs/Buttons/{Button → shared}/variants.js

@@ -1,5 +1,5 @@
 import { primary, neutral, error, success, warning } from '../../../../constants/colors';
-export const componentVariants = {
+export const buttonVariants = {
     primary: {
         background: `linear-gradient(to right, ${primary[300]}, ${primary[200]})`,
         color: 'white',
@@ -189,3 +189,60 @@ export const componentVariants = {
         },
     },
 };
+export const subtleVariants = {
+    primary: {
+        ...buttonVariants.primary,
+        background: 'white',
+        color: primary[200],
+        '&:hover': {
+            background: primary[100],
+            transition: 'background 0.3s ease-in-out',
+        },
+        '&:active': {
+            background: 'white',
+            border: `1px solid ${primary[200]}`,
+            color: primary[200],
+        },
+        '&:toggled': {
+            background: primary[300],
+            color: 'white',
+        },
+    },
+    secondary: {
+        ...buttonVariants.secondary,
+        background: 'white',
+        color: neutral[200],
+        border: `1px solid ${neutral[50]}`,
+    },
+    cancel: {
+        ...buttonVariants.cancel,
+        background: 'white',
+        color: error[200],
+    },
+    success: {
+        ...buttonVariants.success,
+        background: 'white',
+        color: success[200],
+    },
+    warning: {
+        ...buttonVariants.warning,
+        background: 'white',
+        color: warning[200],
+    },
+    text: {
+        ...buttonVariants.text,
+        background: 'transparent',
+        color: neutral[200],
+        border: 'none',
+        padding: '0',
+        height: 'auto',
+        minWidth: 'unset',
+    },
+    nav: {
+        ...buttonVariants.nav,
+        background: 'white',
+        paddingLeft: '0.8rem',
+        color: neutral[200],
+        border: 'none',
+    },
+};

package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,iBAAiB,IAAI,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,GAAI,2DAA+F,iBAAiB,4CAqD5I,CAAC"}
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,iBAAiB,IAAI,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,GAAI,2DAA+F,iBAAiB,4CA4D5I,CAAC"}

package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Autocomplete as MantineAutocomplete } from '@mantine/core';
-import { neutral } from '../../../../constants/colors';
+import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../../Dropdowns/shared/sizes';
 export const AutoComplete = ({ size = 'md', width, fullWidth = false, placeholder = 'Select an option', styles, ...props }) => {
@@ -15,6 +15,13 @@ export const AutoComplete = ({ size = 'md', width, fullWidth = false, placeholde
             color: neutral[300],
             transition: 'all 200ms ease-in-out',
             borderRadius: '8px',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         label: {
             ...fontBase,

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.d.ts

@@ -0,0 +1,12 @@
+import { NumberInputProps as MantineNumberInputProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+import { componentSizes } from '../shared/sizes';
+interface NumberInputProps extends MantineNumberInputProps {
+    size?: keyof typeof componentSizes;
+    width?: string | number;
+    fullWidth?: boolean;
+    styles?: Record<string, CSSObject>;
+}
+declare const NumberInput: ({ size, width, fullWidth, styles, step, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export { NumberInput };
+//# sourceMappingURL=NumberInput.d.ts.map

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,gBAAgB,IAAI,uBAAuB,EAC5C,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,gBAAiB,SAAQ,uBAAuB;IACxD,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,GAAI,oDAOlB,gBAAgB,4CAoElB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NumberInput as MantineNumberInput, } from '@mantine/core';
+import { neutral, red } from '../../../../constants/colors';
+import { fontBase } from '../../../../constants/font';
+import { componentSizes } from '../shared/sizes';
+const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const hasError = !!props.error;
+    const style = {
+        input: {
+            height: `${selectedSize.height}rem`,
+            fontSize: selectedSize.fontSize,
+            padding: '0 1rem',
+            ...fontBase,
+            color: neutral[200],
+            transition: 'all 200ms ease-in-out',
+            borderRadius: '8px',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
+        },
+        rightSection: {
+            height: 'auto',
+            margin: 'auto 0',
+            gap: 0,
+            width: '4.8rem',
+            alignItems: 'center',
+        },
+        control: {
+            color: hasError ? red[200] : neutral[200],
+            border: 'none',
+            background: 'transparent',
+            width: '2rem',
+            height: '1.2rem',
+            flex: '0 0 auto',
+            '& svg': {
+                width: '2rem',
+                height: '1.2rem',
+            },
+            '&:hover': {
+                cursor: 'pointer',
+            },
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: neutral[200],
+        },
+        error: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: red[200],
+        },
+        ...styles,
+    };
+    return (_jsx(MantineNumberInput, { w: computedWidth, size: size, step: step, hideControls: false, styles: style, type: "number", ...props }));
+};
+export { NumberInput };

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.stories.d.ts

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

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/NumberInput/NumberInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAuHlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA2BrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAiCrC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6C3B,CAAC"}