@magiclabs/ui-components 1.52.1 → 2.1.0

package/dist/types/styles/keyframes.d.ts

@@ -1,2 +1,126 @@
-export declare const keyframes: import("@pandacss/dev").CssKeyframes;
+export declare const keyframes: {
+    readonly fadeIn: {
+        readonly '0%': {
+            readonly opacity: "0";
+        };
+    };
+    readonly fadeOut: {
+        readonly '100%': {
+            readonly opacity: "0";
+        };
+    };
+    readonly scaleIn: {
+        readonly '0%': {
+            readonly opacity: "0";
+        };
+        readonly '100%': {
+            readonly opacity: "1";
+            readonly scale: "1";
+        };
+    };
+    readonly scaleOut: {
+        readonly '0%': {
+            readonly opacity: "1";
+            readonly scale: "1";
+        };
+        readonly '100%': {
+            readonly opacity: "0";
+            readonly scale: "0.9";
+        };
+    };
+    readonly slideIn: {
+        readonly '0%': {
+            readonly opacity: "0";
+            readonly transform: "translateY(1.25rem)";
+        };
+        readonly '100%': {
+            readonly opacity: "1";
+            readonly transform: "translateY(0)";
+        };
+    };
+    readonly slideOut: {
+        readonly '0%': {
+            readonly opacity: "1";
+            readonly transform: "translateY(0)";
+        };
+        readonly '100%': {
+            readonly opacity: "0";
+            readonly transform: "translateY(1.25rem)";
+        };
+    };
+    readonly slideRight: {
+        readonly '0% ': {
+            readonly left: "-150%";
+        };
+        readonly '100%': {
+            readonly left: "175%";
+        };
+    };
+    readonly moveRight: {
+        readonly '0%': {
+            readonly transform: "translateX(0rem)";
+        };
+        readonly '80%': {
+            readonly transform: "translateX(1.25rem)";
+        };
+        readonly '100%': {
+            readonly transform: "translateX(1.2rem)";
+        };
+    };
+    readonly moveLeft: {
+        readonly '0%': {
+            readonly transform: "translateX(0rem)";
+        };
+        readonly '80%': {
+            readonly transform: "translateX(-1.25rem)";
+        };
+        readonly '100%': {
+            readonly transform: "translateX(-1.2rem)";
+        };
+    };
+    readonly animateSpinnerSmall: {
+        readonly '0%': {
+            readonly strokeDasharray: "0.4, 60";
+            readonly strokeDashoffset: "0";
+        };
+        readonly '50%': {
+            readonly strokeDasharray: "36, 60";
+            readonly strokeDashoffset: "-14";
+        };
+        readonly '100%': {
+            readonly strokeDasharray: "36, 60";
+            readonly strokeDashoffset: "-52";
+        };
+    };
+    readonly animateSpinnerLarge: {
+        readonly '0%': {
+            readonly strokeDasharray: "0.875, 175";
+            readonly strokeDashoffset: "0";
+        };
+        readonly '50%': {
+            readonly strokeDasharray: "78.75, 131.25";
+            readonly strokeDashoffset: "-31";
+        };
+        readonly '100%': {
+            readonly strokeDasharray: "0.875, 175";
+            readonly strokeDashoffset: "-158";
+        };
+    };
+    readonly popIn: {
+        readonly '0%': {
+            readonly scale: 0;
+        };
+        readonly '100%': {
+            readonly scale: 1;
+        };
+    };
+    readonly popOut: {
+        readonly '0%': {
+            readonly scale: 1;
+        };
+        readonly '100%': {
+            readonly scale: 0;
+        };
+    };
+};
 //# sourceMappingURL=keyframes.d.ts.map

package/dist/types/styles/keyframes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["../../../src/styles/keyframes.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,sCAiGpB,CAAC"}
+{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["../../../src/styles/keyframes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGZ,CAAC"}

package/dist/types/styles/semantic-tokens.d.ts

@@ -1,277 +1,166 @@
 export declare const semanticColors: {
-    surface: {
-        primary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        secondary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        tertiary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        quaternary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
+    readonly surface: {
+        readonly primary: {
+            readonly light: "var(--surface-primary, #FFFFFF)";
+            readonly dark: "var(--surface-primary-dark, #19191A)";
+        };
+        readonly secondary: {
+            readonly light: "var(--surface-secondary, #F8F8FA)";
+            readonly dark: "var(--surface-secondary-dark, #252525)";
+        };
+        readonly tertiary: {
+            readonly light: "var(--surface-tertiary, #EDEDF3)";
+            readonly dark: "var(--surface-tertiary-dark, #303030)";
+        };
+        readonly quaternary: {
+            readonly light: "var(--surface-quaternary, #E2E0E5)";
+            readonly dark: "var(--surface-quaternary-dark, #383838)";
         };
     };
-    text: {
-        primary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        secondary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        tertiary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        quaternary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
+    readonly text: {
+        readonly primary: {
+            readonly light: "var(--text-primary, #18171A)";
+            readonly dark: "var(--text-primary-dark, #FFFFFF)";
+        };
+        readonly secondary: {
+            readonly light: "var(--text-secondary, #4E4D52)";
+            readonly dark: "var(--text-secondary-dark, rgba(255,255,255,0.72))";
+        };
+        readonly tertiary: {
+            readonly light: "var(--text-tertiary, #77767A)";
+            readonly dark: "var(--text-tertiary-dark, rgba(255,255,255,0.44))";
+        };
+        readonly quaternary: {
+            readonly light: "var(--text-quaternary, #FFFFFF)";
+            readonly dark: "var(--text-quaternary-dark, #18171A)";
         };
     };
-    neutral: {
-        primary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        secondary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        tertiary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        quaternary: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
+    readonly neutral: {
+        readonly primary: {
+            readonly light: "var(--neutral-primary, #B6B4BA)";
+            readonly dark: "var(--neutral-primary-dark, rgba(255,255,255,0.16))";
+        };
+        readonly secondary: {
+            readonly light: "var(--neutral-secondary, #E2E0E5)";
+            readonly dark: "var(--neutral-secondary-dark, rgba(255,255,255,0.12))";
+        };
+        readonly tertiary: {
+            readonly light: "var(--neutral-tertiary, #EDEDF3)";
+            readonly dark: "var(--neutral-tertiary-dark, rgba(255,255,255,0.08))";
+        };
+        readonly quaternary: {
+            readonly light: "var(--neutral-quaternary, #F8F8FA)";
+            readonly dark: "var(--neutral-quaternary-dark, rgba(255,255,255,0.05))";
         };
     };
-    brand: {
-        lightest: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        lighter: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        base: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        darker: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        darkest: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
+    readonly brand: {
+        readonly lightest: {
+            readonly light: "var(--brand-lightest, #EDEBFF)";
+            readonly dark: "var(--brand-lightest-dark, rgba(167,153,255,0.25))";
+        };
+        readonly lighter: {
+            readonly light: "var(--brand-lighter, #A799FF)";
+            readonly dark: "var(--brand-lighter-dark, rgba(167,153,255,0.66))";
+        };
+        readonly base: {
+            readonly light: "var(--brand-base, #6851FF)";
+            readonly dark: "var(--brand-base-dark, #A799FF)";
+        };
+        readonly darker: {
+            readonly light: "var(--brand-darker, #522FD4)";
+            readonly dark: "var(--brand-darker-dark, #EDEBFF)";
+        };
+        readonly darkest: {
+            readonly light: "var(--brand-darkest, #3512B2)";
+            readonly dark: "var(--brand-darkest-dark, #EDEBFF)";
         };
     };
-    positive: {
-        lightest: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        lighter: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        base: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        darker: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        darkest: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
+    readonly positive: {
+        readonly lightest: {
+            readonly light: "#E3FAF3";
+            readonly dark: "rgba(144,240,211,0.08)";
+        };
+        readonly lighter: {
+            readonly light: "#90F0D3";
+            readonly dark: "rgba(144,240,211,0.72)";
+        };
+        readonly base: {
+            readonly light: "#00CC8F";
+            readonly dark: "#90F0D3";
+        };
+        readonly darker: {
+            readonly light: "#00875F";
+            readonly dark: "#00CC8F";
+        };
+        readonly darkest: {
+            readonly light: "#006647";
+            readonly dark: "#00CC8F";
         };
     };
-    negative: {
-        lightest: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        lighter: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        base: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        darker: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        darkest: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
+    readonly negative: {
+        readonly lightest: {
+            readonly light: "#FFEAE5";
+            readonly dark: "rgba(255,155,128,0.08)";
+        };
+        readonly lighter: {
+            readonly light: "#FF9B80";
+            readonly dark: "rgba(255,155,128,0.72)";
+        };
+        readonly base: {
+            readonly light: "#FC5C30";
+            readonly dark: "#FF9B80";
+        };
+        readonly darker: {
+            readonly light: "#D43100";
+            readonly dark: "#FC5C30";
+        };
+        readonly darkest: {
+            readonly light: "#AD2B03";
+            readonly dark: "#FC5C30";
         };
     };
-    warning: {
-        lightest: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        lighter: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        base: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        darker: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        darkest: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
+    readonly warning: {
+        readonly lightest: {
+            readonly light: "#FCF4E5";
+            readonly dark: "rgba(255,213,148,0.08)";
+        };
+        readonly lighter: {
+            readonly light: "#FFD594";
+            readonly dark: "rgba(255,213,148,0.72)";
+        };
+        readonly base: {
+            readonly light: "#DBA550";
+            readonly dark: "#FFD594";
+        };
+        readonly darker: {
+            readonly light: "#A36B14";
+            readonly dark: "#DBA550";
+        };
+        readonly darkest: {
+            readonly light: "#8A5A03";
+            readonly dark: "#DBA550";
         };
     };
-    dedicated: {
-        lightest: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        lighter: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        base: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        darker: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
-        };
-        darkest: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-            };
+    readonly dedicated: {
+        readonly lightest: {
+            readonly light: "#EBF0FE";
+            readonly dark: "rgba(115,152,255,0.08)";
+        };
+        readonly lighter: {
+            readonly light: "#7398FF";
+            readonly dark: "rgba(115,152,255,0.72)";
+        };
+        readonly base: {
+            readonly light: "#346BF7";
+            readonly dark: "#7398FF";
+        };
+        readonly darker: {
+            readonly light: "#1E50D6";
+            readonly dark: "#346BF7";
+        };
+        readonly darkest: {
+            readonly light: "#0737B8";
+            readonly dark: "#346BF7";
         };
     };
 };

package/dist/types/styles/semantic-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../../../src/styles/semantic-tokens.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4JzB,CAAC"}
+{"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../../../src/styles/semantic-tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DjB,CAAC"}