@taiv/ui 1.15.0 → 2.0.0

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

@@ -1,270 +1,505 @@
+export declare const HOVER_MEDIA = "@media (hover: hover) and (pointer: fine)";
 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 '&:active': {
+    readonly cancel: {
+        readonly "&:active": {
             readonly background: "white";
-            readonly border: "1px solid #0081CE";
-            readonly color: "#0081CE";
+            readonly border: "1px solid #FF3B30";
+            readonly color: "#FF3B30";
         };
-        readonly '&:toggled': {
-            readonly background: "#0081CE";
-            readonly color: "white";
-        };
-        readonly '&:disabled': {
+        readonly "&:disabled": {
             readonly background: "#EDEDED";
             readonly border: "1px solid #EDEDED";
             readonly color: "#D9D9D9";
         };
-        readonly '&[data-loading]': {
-            readonly '& .mantine-Button-icon svg': {
+        readonly "&:toggled": {
+            readonly background: "#FF3B30";
+            readonly color: "white";
+        };
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
                 readonly stroke: "white";
             };
-            readonly '&:before': {
-                readonly top: "-1px";
+            readonly "&:before": {
+                readonly borderRadius: "8px";
+                readonly bottom: "-1px";
+                readonly left: "-1px";
                 readonly right: "-1px";
+                readonly top: "-1px";
+            };
+        };
+        readonly "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "white";
+                readonly border: "1px solid #FF3B30";
+                readonly color: "#FF3B30";
+            };
+            readonly "&:hover": {
+                readonly background: "#FF3B30";
+                readonly border: "1px solid #FF3B30";
+            };
+        };
+        readonly background: "#C10007";
+        readonly border: "1px solid #C10007";
+        readonly color: "white";
+    };
+    readonly ghost: {
+        readonly "&:active": {
+            readonly background: "rgba(255, 255, 255, 0.18)";
+            readonly border: "1px solid rgba(255, 255, 255, 0.32)";
+            readonly color: "white";
+        };
+        readonly "&:disabled": {
+            readonly background: "rgba(255, 255, 255, 0.04)";
+            readonly border: "1px solid rgba(255, 255, 255, 0.08)";
+            readonly color: "rgba(255, 255, 255, 0.4)";
+        };
+        readonly "&:toggled": {
+            readonly background: "rgba(255, 255, 255, 0.18)";
+            readonly border: "1px solid rgba(255, 255, 255, 0.32)";
+            readonly color: "white";
+        };
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
+                readonly stroke: "white";
+            };
+            readonly "&:before": {
+                readonly borderRadius: "8px";
+                readonly bottom: "-1px";
                 readonly left: "-1px";
+                readonly right: "-1px";
+                readonly top: "-1px";
+            };
+        };
+        readonly "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "rgba(255, 255, 255, 0.18)";
+                readonly border: "1px solid rgba(255, 255, 255, 0.32)";
+                readonly color: "white";
+            };
+            readonly "&:hover": {
+                readonly background: "rgba(255, 255, 255, 0.14)";
+                readonly border: "1px solid rgba(255, 255, 255, 0.24)";
+                readonly color: "white";
+            };
+        };
+        readonly background: "rgba(255, 255, 255, 0.08)";
+        readonly border: "1px solid rgba(255, 255, 255, 0.16)";
+        readonly color: "white";
+    };
+    readonly nav: {
+        readonly "& .mantine-Button-inner": {
+            readonly justifyContent: "flex-start";
+        };
+        readonly "&:active": {
+            readonly background: "#F8FAFC";
+            readonly color: "#6F3FEE";
+        };
+        readonly "&:disabled": {
+            readonly background: "transparent";
+            readonly color: "#D9D9D9";
+        };
+        readonly "&:toggled": {
+            readonly background: "#F8FAFC";
+            readonly color: "#6F3FEE";
+        };
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
+                readonly stroke: "#6D6D6D";
+            };
+            readonly "&:before": {
+                readonly borderRadius: "8px";
                 readonly bottom: "-1px";
+                readonly left: "-1px";
+                readonly right: "-1px";
+                readonly top: "-1px";
+            };
+        };
+        readonly "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "#F8FAFC";
+                readonly color: "#6F3FEE";
+            };
+            readonly "&:hover": {
+                readonly background: "transparent";
+                readonly color: "#6D6D6D";
+            };
+        };
+        readonly background: "transparent";
+        readonly border: "none";
+        readonly color: "#3F3F3F";
+        readonly paddingLeft: string;
+    };
+    readonly "nav-cancel": {
+        readonly "& .mantine-Button-inner": {
+            readonly justifyContent: "flex-start";
+        };
+        readonly "&:active": {
+            readonly background: "#FFEBEA";
+            readonly color: "#C10007";
+        };
+        readonly "&:disabled": {
+            readonly background: "transparent";
+            readonly color: "#D9D9D9";
+        };
+        readonly "&:toggled": {
+            readonly background: "#FFEBEA";
+            readonly color: "#C10007";
+        };
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
+                readonly stroke: "#C10007";
+            };
+            readonly "&:before": {
                 readonly borderRadius: "8px";
+                readonly bottom: "-1px";
+                readonly left: "-1px";
+                readonly right: "-1px";
+                readonly top: "-1px";
+            };
+        };
+        readonly "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "#FFEBEA";
+                readonly color: "#C10007";
+            };
+            readonly "&:hover": {
+                readonly background: "transparent";
+                readonly color: "#FF3B30";
             };
         };
+        readonly background: "transparent";
+        readonly border: "none";
+        readonly color: "#C10007";
+        readonly paddingLeft: string;
     };
-    readonly secondary: {
-        readonly background: "white";
-        readonly color: "#6D6D6D";
-        readonly border: "1px solid #6D6D6D";
-        readonly '&:hover': {
-            readonly background: "#D9D9D9";
-            readonly border: "1px solid #D9D9D9";
+    readonly primary: {
+        readonly "&:active": {
+            readonly background: "white";
+            readonly border: "1px solid #6F3FEE";
+            readonly color: "#6F3FEE";
+        };
+        readonly "&:disabled": {
+            readonly background: "#EDEDED";
+            readonly border: "1px solid #EDEDED";
+            readonly color: "#D9D9D9";
+        };
+        readonly "&:toggled": {
+            readonly background: "#6F3FEE";
             readonly color: "white";
         };
-        readonly '&:active': {
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
+                readonly stroke: "white";
+            };
+            readonly "&:before": {
+                readonly borderRadius: "8px";
+                readonly bottom: "-1px";
+                readonly left: "-1px";
+                readonly right: "-1px";
+                readonly top: "-1px";
+            };
+        };
+        readonly "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "white";
+                readonly border: "1px solid #6F3FEE";
+                readonly color: "#6F3FEE";
+            };
+            readonly "&:hover": {
+                readonly background: "linear-gradient(to right, #3F2488, #3F2488)";
+            };
+        };
+        readonly background: "linear-gradient(to right, #6F3FEE, #6F3FEE)";
+        readonly border: "1px solid #6F3FEE";
+        readonly color: "white";
+    };
+    readonly secondary: {
+        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 "&:disabled": {
             readonly background: "#EDEDED";
             readonly border: "1px solid #EDEDED";
             readonly color: "#D9D9D9";
         };
-        readonly '&[data-loading]': {
-            readonly '& .mantine-Button-icon svg': {
+        readonly "&:toggled": {
+            readonly background: "#D9D9D9";
+            readonly color: "neutral[200]";
+        };
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
                 readonly stroke: "#6D6D6D";
             };
-            readonly '&:before': {
-                readonly top: "-1px";
-                readonly right: "-1px";
-                readonly left: "-1px";
-                readonly bottom: "-1px";
+            readonly "&:before": {
                 readonly borderRadius: "8px";
+                readonly bottom: "-1px";
+                readonly left: "-1px";
+                readonly right: "-1px";
+                readonly top: "-1px";
             };
         };
-    };
-    readonly cancel: {
-        readonly background: "#C10007";
-        readonly color: "white";
-        readonly border: "1px solid #C10007";
-        readonly '&:hover': {
-            readonly background: "#FB2C36";
-            readonly border: "1px solid #FB2C36";
+        readonly "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "#D9D9D9";
+                readonly border: "1px solid #6D6D6D";
+                readonly color: "#6D6D6D";
+            };
+            readonly "&:hover": {
+                readonly background: "#D9D9D9";
+                readonly border: "1px solid #D9D9D9";
+                readonly color: "white";
+            };
         };
-        readonly '&:active': {
+        readonly background: "white";
+        readonly border: "1px solid #6D6D6D";
+        readonly color: "#6D6D6D";
+    };
+    readonly "secondary-cancel": {
+        readonly "&:active": {
             readonly background: "white";
-            readonly border: "1px solid #FB2C36";
-            readonly color: "#FB2C36";
-        };
-        readonly '&:toggled': {
-            readonly background: "#FB2C36";
-            readonly color: "white";
+            readonly border: "1px solid #C10007";
+            readonly color: "#C10007";
         };
-        readonly '&:disabled': {
+        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 "&:toggled": {
+            readonly background: "#FF3B30";
+            readonly color: "white";
+        };
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
+                readonly stroke: "#C10007";
             };
-            readonly '&:before': {
-                readonly top: "-1px";
-                readonly right: "-1px";
-                readonly left: "-1px";
-                readonly bottom: "-1px";
+            readonly "&:before": {
                 readonly borderRadius: "8px";
+                readonly bottom: "-1px";
+                readonly left: "-1px";
+                readonly right: "-1px";
+                readonly top: "-1px";
             };
         };
+        readonly "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "white";
+                readonly border: "1px solid #C10007";
+                readonly color: "#C10007";
+            };
+            readonly "&:hover": {
+                readonly background: "#FFEBEA";
+                readonly border: "1px solid #FF3B30";
+                readonly color: "#C10007";
+            };
+        };
+        readonly background: "white";
+        readonly border: "1px solid #C10007";
+        readonly color: "#C10007";
     };
     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 "&:active": {
             readonly background: "white";
-            readonly border: "1px solid #00C951";
-            readonly color: "#00C951";
+            readonly border: "1px solid #00DE6F";
+            readonly color: "#00DE6F";
         };
-        readonly '&:toggled': {
-            readonly background: "#00C951";
-        };
-        readonly '&:disabled': {
+        readonly "&:disabled": {
             readonly background: "#EDEDED";
             readonly border: "1px solid #EDEDED";
             readonly color: "#D9D9D9";
         };
-        readonly '&[data-loading]': {
-            readonly '& .mantine-Button-icon svg': {
+        readonly "&:toggled": {
+            readonly background: "#00DE6F";
+        };
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
                 readonly stroke: "white";
             };
-            readonly '&:before': {
-                readonly top: "-1px";
-                readonly right: "-1px";
-                readonly left: "-1px";
-                readonly bottom: "-1px";
+            readonly "&:before": {
                 readonly borderRadius: "8px";
+                readonly bottom: "-1px";
+                readonly left: "-1px";
+                readonly right: "-1px";
+                readonly top: "-1px";
             };
         };
-    };
-    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 #FE9A00";
-            readonly color: "#FE9A00";
+        readonly "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "white";
+                readonly border: "1px solid #00DE6F";
+                readonly color: "#00DE6F";
+            };
+            readonly "&:hover": {
+                readonly background: "#00DE6F";
+                readonly border: "1px solid #00DE6F";
+            };
         };
-        readonly '&:toggled': {
-            readonly background: "#FE9A00";
+        readonly background: "#00A84F";
+        readonly border: "1px solid #00A84F";
+        readonly color: "white";
+    };
+    readonly tertiary: {
+        readonly "&:active": {
+            readonly background: "#9B6EFF";
+            readonly border: "1px solid #6F3FEE";
+            readonly color: "#6F3FEE";
         };
-        readonly '&:disabled': {
+        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 "&:toggled": {
+            readonly background: "#9B6EFF";
+            readonly color: "#6F3FEE";
+        };
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
+                readonly stroke: "#6F3FEE";
             };
-            readonly '&:before': {
-                readonly top: "-1px";
-                readonly right: "-1px";
-                readonly left: "-1px";
-                readonly bottom: "-1px";
+            readonly "&:before": {
                 readonly borderRadius: "8px";
+                readonly bottom: "-1px";
+                readonly left: "-1px";
+                readonly right: "-1px";
+                readonly top: "-1px";
+            };
+        };
+        readonly "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "#9B6EFF";
+                readonly border: "1px solid #6F3FEE";
+                readonly color: "#6F3FEE";
+            };
+            readonly "&:hover": {
+                readonly background: "#9B6EFF";
+                readonly border: "1px solid #9B6EFF";
+                readonly color: "white";
             };
         };
+        readonly background: "white";
+        readonly border: "1px solid #6F3FEE";
+        readonly color: "#6F3FEE";
     };
     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 "&:active": {
             readonly background: "transparent";
-            readonly color: "#00A6F4";
+            readonly color: "#6F3FEE";
         };
-        readonly '&:toggled': {
+        readonly "&:disabled": {
             readonly background: "transparent";
-            readonly color: "#0081CE";
+            readonly color: "#D9D9D9";
         };
-        readonly '&:disabled': {
+        readonly "&:toggled": {
             readonly background: "transparent";
-            readonly color: "#D9D9D9";
+            readonly color: "#6F3FEE";
         };
-        readonly '&[data-loading]': {
-            readonly '& .mantine-Button-icon svg': {
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
                 readonly stroke: "#6D6D6D";
             };
-            readonly '&:before': {
-                readonly top: "-1px";
-                readonly right: "-1px";
-                readonly left: "-1px";
-                readonly bottom: "-1px";
+            readonly "&:before": {
                 readonly borderRadius: "8px";
+                readonly bottom: "-1px";
+                readonly left: "-1px";
+                readonly right: "-1px";
+                readonly top: "-1px";
             };
         };
-    };
-    readonly nav: {
-        readonly background: "white";
-        readonly paddingLeft: string;
-        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 "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "transparent";
+                readonly color: "#6F3FEE";
+            };
+            readonly "&:hover": {
+                readonly background: "transparent";
+                readonly color: "#6F3FEE";
+            };
         };
-        readonly '&:toggled': {
-            readonly background: "#EDEDED";
-            readonly color: "#6D6D6D";
+        readonly background: "transparent";
+        readonly border: "none";
+        readonly color: "#6D6D6D";
+        readonly height: "auto";
+        readonly minWidth: "unset";
+        readonly padding: "0";
+    };
+    readonly warning: {
+        readonly "&:active": {
+            readonly background: "white";
+            readonly border: "1px solid #FE9A00";
+            readonly color: "#FE9A00";
         };
-        readonly '&:disabled': {
+        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 "&:toggled": {
+            readonly background: "#FE9A00";
+        };
+        readonly "&[data-loading]": {
+            readonly "& .mantine-Button-icon svg": {
+                readonly stroke: "white";
             };
-            readonly '&:before': {
-                readonly top: "-1px";
-                readonly right: "-1px";
-                readonly left: "-1px";
-                readonly bottom: "-1px";
+            readonly "&:before": {
                 readonly borderRadius: "8px";
+                readonly bottom: "-1px";
+                readonly left: "-1px";
+                readonly right: "-1px";
+                readonly top: "-1px";
+            };
+        };
+        readonly "@media (hover: hover) and (pointer: fine)": {
+            readonly "&:active:hover": {
+                readonly background: "white";
+                readonly border: "1px solid #FE9A00";
+                readonly color: "#FE9A00";
+            };
+            readonly "&:hover": {
+                readonly background: "#FE9A00";
+                readonly border: "1px solid #FE9A00";
             };
         };
+        readonly background: "#E17100";
+        readonly border: "1px solid #E17100";
+        readonly color: "white";
     };
 };
 export declare const subtleVariants: {
+    readonly cancel: {
+        readonly color: "#C10007";
+    };
+    readonly ghost: {
+        readonly color: "white";
+    };
+    readonly nav: {
+        readonly color: "#3F3F3F";
+    };
+    readonly "nav-cancel": {
+        readonly color: "#C10007";
+    };
     readonly primary: {
-        readonly color: "#00A6F4";
+        readonly color: "#6F3FEE";
     };
     readonly secondary: {
         readonly color: "#6D6D6D";
     };
-    readonly cancel: {
+    readonly "secondary-cancel": {
         readonly color: "#C10007";
     };
     readonly success: {
-        readonly color: "#00A63E";
+        readonly color: "#00DE6F";
     };
-    readonly warning: {
-        readonly color: "#E17100";
+    readonly tertiary: {
+        readonly color: "#6F3FEE";
     };
     readonly text: {
         readonly color: "#6D6D6D";
     };
-    readonly nav: {
-        readonly color: "#6D6D6D";
+    readonly warning: {
+        readonly color: "#E17100";
     };
 };
 //# 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":"AAkBA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLpB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;CAQjB,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/shared/variants.ts"],"names":[],"mappings":"AA0CA,eAAO,MAAM,WAAW,8CAA8C,CAAC;AAEvE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmXpB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcjB,CAAC"}