@taiv/ui 1.9.0 → 1.10.0

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

@@ -2,11 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as MantineButton } from '@mantine/core';
 import { fontBase, fontWeight } from '../../../../constants/font';
 import { componentSizes } from './sizes';
-import { buttonVariants } from '../shared/variants';
+import { componentVariants } from '../shared/variants';
 export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth = false, toggled = false, shadow = false, styles, ...props }) => {
-    const selectedVariant = buttonVariants[variant];
+    const selectedVariant = componentVariants[variant];
     const selectedSize = componentSizes[size];
-    // Apply active styles for nav variant when isActive is true
     const getVariantStyles = () => {
         if (toggled) {
             return {
@@ -19,13 +18,13 @@ export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth =
     const style = {
         root: {
             borderRadius: '8px',
-            border: '1px solid white',
             width: fullWidth ? '100%' : 'fit-content',
             height: `${selectedSize.height}rem`,
             padding: selectedSize.padding,
             minWidth: `${selectedSize.minWidth}rem`,
             fontSize: selectedSize.fontSize,
             boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
+            transition: 'background 0.1s ease-in-out',
             ...getVariantStyles(),
         },
         label: {

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

@@ -1,11 +1,11 @@
 import { ReactElement } from 'react';
 import { ButtonProps as MantineButtonProps } from '@mantine/core';
 import { componentSizes } from './sizes';
-import { buttonVariants, subtleVariants } from '../shared/variants';
+import { componentVariants as baseVariants } from '../shared/variants';
 export interface IconButtonProps extends Omit<MantineButtonProps, 'leftIcon' | 'rightIcon'> {
     onClick?: () => void;
     size?: keyof typeof componentSizes;
-    variant?: keyof typeof buttonVariants | keyof typeof subtleVariants;
+    variant?: keyof typeof baseVariants;
     toggled?: boolean;
     shadow?: boolean;
     subtle?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIpE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,CAAC;IACzF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,UAAU,GAAI,0FAA0I,eAAe,4CA0CnL,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,iBAAiB,IAAI,YAAY,EAAkB,MAAM,oBAAoB,CAAC;AAIvF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,CAAC;IACzF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,UAAU,GAAI,0FAA0I,eAAe,4CA8DnL,CAAC"}

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

@@ -1,13 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Button as MantineButton } from '@mantine/core';
 import { componentSizes } from './sizes';
-import { buttonVariants, subtleVariants } from '../shared/variants';
+import { componentVariants as baseVariants, subtleVariants } from '../shared/variants';
 import { neutral } from '../../../../constants/colors';
 import { Tooltip } from '../../../Info/Tooltips/Tooltip/Tooltip';
 export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled = false, shadow = false, subtle = false, tooltip = '', styles, children, ...props }) => {
-    const selectedVariant = subtle && !props.loading ? subtleVariants[variant] : buttonVariants[variant];
+    const selectedVariant = baseVariants[variant];
     const selectedSize = componentSizes[size];
-    // Apply active styles for nav variant when isActive is true
     const getVariantStyles = () => {
         if (toggled) {
             return {
@@ -17,15 +16,35 @@ export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled
         }
         return selectedVariant;
     };
+    const getSubtleStyles = () => {
+        if (subtle) {
+            return {
+                ...subtleVariants[variant],
+                border: `1px solid ${neutral[50]}`,
+                background: 'white',
+                '&:hover': {
+                    background: neutral[50],
+                    border: `1px solid ${neutral[50]}`,
+                },
+                '&:active': {
+                    background: 'white',
+                },
+                '&:toggled': {
+                    background: neutral[50],
+                    border: `1px solid ${neutral[100]}`,
+                },
+            };
+        }
+    };
     const style = {
         root: {
             borderRadius: '8px',
-            border: subtle ? `1px solid ${neutral[50]}` : '1px solid white',
             height: `${selectedSize.borderLength}rem`,
             padding: selectedSize.padding,
             width: `${selectedSize.borderLength}rem`,
             boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
             ...getVariantStyles(),
+            ...getSubtleStyles(),
         },
         ...styles,
     };

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

@@ -1,28 +1,36 @@
-export declare const buttonVariants: {
+export declare const componentVariants: {
     readonly primary: {
         readonly background: "linear-gradient(to right, #0081CE, #00A6F4)";
+        readonly border: "1px solid #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 border: "1px solid #0081CE";
+            readonly color: "#0081CE";
         };
         readonly '&:toggled': {
-            readonly background: "linear-gradient(to right, #0081CE, #0081CE)";
+            readonly background: "#0081CE";
             readonly color: "white";
         };
         readonly '&:disabled': {
             readonly background: "#EDEDED";
+            readonly border: "1px solid #EDEDED";
             readonly color: "#D9D9D9";
         };
         readonly '&[data-loading]': {
             readonly '& .mantine-Button-icon svg': {
                 readonly stroke: "white";
             };
+            readonly '&:before': {
+                readonly top: "-0.1rem";
+                readonly right: "-0.1rem";
+                readonly left: "-0.1rem";
+                readonly bottom: "-0.1rem";
+                readonly borderRadius: "8px";
+            };
         };
     };
     readonly secondary: {
@@ -52,82 +60,116 @@ export declare const buttonVariants: {
             readonly '& .mantine-Button-icon svg': {
                 readonly stroke: "#6D6D6D";
             };
+            readonly '&:before': {
+                readonly top: "-0.1rem";
+                readonly right: "-0.1rem";
+                readonly left: "-0.1rem";
+                readonly bottom: "-0.1rem";
+                readonly borderRadius: "8px";
+            };
         };
     };
     readonly cancel: {
         readonly background: "#C10007";
         readonly color: "white";
+        readonly border: "1px solid #C10007";
         readonly '&:hover': {
             readonly background: "#FB2C36";
+            readonly border: "1px solid #FB2C36";
         };
         readonly '&:active': {
             readonly background: "white";
-            readonly border: "1px solid #C10007";
-            readonly color: "#C10007";
+            readonly border: "1px solid #FB2C36";
+            readonly color: "#FB2C36";
         };
         readonly '&:toggled': {
             readonly background: "#FB2C36";
             readonly color: "white";
         };
         readonly '&:disabled': {
-            readonly background: "#FFD7D9";
-            readonly border: "1px solid #FFD7D9";
-            readonly color: "white";
+            readonly background: "#EDEDED";
+            readonly border: "1px solid #EDEDED";
+            readonly color: "#D9D9D9";
         };
         readonly '&[data-loading]': {
             readonly '& .mantine-Button-icon svg': {
                 readonly stroke: "white";
             };
+            readonly '&:before': {
+                readonly top: "-0.1rem";
+                readonly right: "-0.1rem";
+                readonly left: "-0.1rem";
+                readonly bottom: "-0.1rem";
+                readonly borderRadius: "8px";
+            };
         };
     };
     readonly success: {
         readonly background: "#00A63E";
         readonly color: "white";
+        readonly border: "1px solid #00A63E";
         readonly '&:hover': {
             readonly background: "#00C951";
+            readonly border: "1px solid #00C951";
         };
         readonly '&:active': {
             readonly background: "white";
-            readonly border: "1px solid #00A63E";
-            readonly color: "#00A63E";
+            readonly border: "1px solid #00C951";
+            readonly color: "#00C951";
         };
         readonly '&:toggled': {
             readonly background: "#00C951";
         };
         readonly '&:disabled': {
-            readonly background: "#E6F4E7";
-            readonly border: "1px solid #E6F4E7";
-            readonly color: "white";
+            readonly background: "#EDEDED";
+            readonly border: "1px solid #EDEDED";
+            readonly color: "#D9D9D9";
         };
         readonly '&[data-loading]': {
             readonly '& .mantine-Button-icon svg': {
                 readonly stroke: "white";
             };
+            readonly '&:before': {
+                readonly top: "-0.1rem";
+                readonly right: "-0.1rem";
+                readonly left: "-0.1rem";
+                readonly bottom: "-0.1rem";
+                readonly borderRadius: "8px";
+            };
         };
     };
     readonly warning: {
         readonly background: "#E17100";
         readonly color: "white";
+        readonly border: "1px solid #E17100";
         readonly '&:hover': {
             readonly background: "#FE9A00";
+            readonly border: "1px solid #FE9A00";
         };
         readonly '&:active': {
             readonly background: "white";
-            readonly border: "1px solid #E17100";
-            readonly color: "#E17100";
+            readonly border: "1px solid #FE9A00";
+            readonly color: "#FE9A00";
         };
         readonly '&:toggled': {
             readonly background: "#FE9A00";
         };
         readonly '&:disabled': {
-            readonly background: "#FFE5B4";
-            readonly border: "1px solid #FFE5B4";
-            readonly color: "white";
+            readonly background: "#EDEDED";
+            readonly border: "1px solid #EDEDED";
+            readonly color: "#D9D9D9";
         };
         readonly '&[data-loading]': {
             readonly '& .mantine-Button-icon svg': {
                 readonly stroke: "white";
             };
+            readonly '&:before': {
+                readonly top: "-0.1rem";
+                readonly right: "-0.1rem";
+                readonly left: "-0.1rem";
+                readonly bottom: "-0.1rem";
+                readonly borderRadius: "8px";
+            };
         };
     };
     readonly text: {
@@ -157,6 +199,13 @@ export declare const buttonVariants: {
             readonly '& .mantine-Button-icon svg': {
                 readonly stroke: "#6D6D6D";
             };
+            readonly '&:before': {
+                readonly top: "-0.1rem";
+                readonly right: "-0.1rem";
+                readonly left: "-0.1rem";
+                readonly bottom: "-0.1rem";
+                readonly borderRadius: "8px";
+            };
         };
     };
     readonly nav: {
@@ -185,198 +234,37 @@ export declare const buttonVariants: {
             readonly '& .mantine-Button-icon svg': {
                 readonly stroke: "#6D6D6D";
             };
+            readonly '&:before': {
+                readonly top: "-0.1rem";
+                readonly right: "-0.1rem";
+                readonly left: "-0.1rem";
+                readonly bottom: "-0.1rem";
+                readonly borderRadius: "8px";
+            };
         };
     };
 };
 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

@@ -1 +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"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/shared/variants.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLpB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;CAQjB,CAAC"}