@nkey-ui/theme - npm Package Compare versions

Comparing version 1.0.39 to 1.0.42

dist/animations/index.d.ts

@@ -6,2 +6,6 @@ declare const animations: {
         strokedrift: string;
+        slideInFromTop: string;
+        slideInFromRight: string;
+        slideInFromBottom: string;
+        slideInFromLeft: string;
     };
@@ -44,2 +48,42 @@ keyframes: {
         };
+        slideInFromTop: {
+            '0%': {
+                transform: string;
+                opacity: string;
+            };
+            '100%': {
+                transform: string;
+                opacity: string;
+            };
+        };
+        slideInFromRight: {
+            '0%': {
+                transform: string;
+                opacity: string;
+            };
+            '100%': {
+                transform: string;
+                opacity: string;
+            };
+        };
+        slideInFromBottom: {
+            '0%': {
+                transform: string;
+                opacity: string;
+            };
+            '100%': {
+                transform: string;
+                opacity: string;
+            };
+        };
+        slideInFromLeft: {
+            '0%': {
+                transform: string;
+                opacity: string;
+            };
+            '100%': {
+                transform: string;
+                opacity: string;
+            };
+        };
     };
@@ -46,0 +90,0 @@ };

dist/animations/index.js

@@ -30,3 +30,7 @@ "use strict";
     ripple: "ripple 550ms ease-out",
-    strokedrift: "strokedrift 1.4s ease-in-out infinite"
+    strokedrift: "strokedrift 1.4s ease-in-out infinite",
+    slideInFromTop: "slideInFromTop 500ms ease-in-out",
+    slideInFromRight: "slideInFromRight 500ms ease-in-out",
+    slideInFromBottom: "slideInFromBottom 500ms ease-in-out",
+    slideInFromLeft: "slideInFromLeft 500ms ease-in-out"
   },
@@ -47,2 +51,18 @@ keyframes: {
       "100%": { strokeDasharray: "100px, 200px", strokeDashoffset: "-125px" }
+    },
+    slideInFromTop: {
+      "0%": { transform: "translateY(-100vh)", opacity: "0" },
+      "100%": { transform: "translateY(1rem)", opacity: "1" }
+    },
+    slideInFromRight: {
+      "0%": { transform: "translateX(100vw)", opacity: "0" },
+      "100%": { transform: "translateX(-1rem)", opacity: "1" }
+    },
+    slideInFromBottom: {
+      "0%": { transform: "translateY(100vh)", opacity: "0" },
+      "100%": { transform: "translateY(-1rem)", opacity: "1" }
+    },
+    slideInFromLeft: {
+      "0%": { transform: "translateX(-100vw)", opacity: "0" },
+      "100%": { transform: "translateX(1rem)", opacity: "1" }
     }
@@ -49,0 +69,0 @@ }

dist/components/alert.js

@@ -614,3 +614,7 @@ "use strict";
     }
-  ]
+  ],
+  defaultVariants: {
+    variant: "pastel",
+    color: "primary"
+  }
 });
@@ -617,0 +621,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/components/badge.d.ts

@@ -35,3 +35,3 @@ import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
     };
-}, undefined, "absolute z-[2] flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]", tailwind_variants_dist_config.TVConfig<{
+}, undefined, "absolute flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]", tailwind_variants_dist_config.TVConfig<{
     color: {
@@ -136,3 +136,3 @@ default: string;
     };
-}, undefined, "absolute z-[2] flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]", tailwind_variants_dist_config.TVConfig<{
+}, undefined, "absolute flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]", tailwind_variants_dist_config.TVConfig<{
     color: {
@@ -139,0 +139,0 @@ default: string;

dist/components/badge.js

@@ -161,3 +161,3 @@ "use strict";
 var badge = tv({
-  base: "absolute z-[2] flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]",
+  base: "absolute flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]",
   variants: {
@@ -164,0 +164,0 @@ color: colorVariants.solid,

dist/components/collapse.d.ts

@@ -1,12 +0,43 @@
-import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
 
-declare const collapse: tailwind_variants.TVReturnType<tailwind_variants.TVVariantsDefault<undefined, "overflow-hidden transition-[height] duration-300 ease-in-out"> | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | tailwind_variants.SlotsClassValue<undefined, "overflow-hidden transition-[height] duration-300 ease-in-out">;
-    } | undefined;
-} | {}, undefined, "overflow-hidden transition-[height] duration-300 ease-in-out", tailwind_variants_dist_config.TVConfig<unknown, tailwind_variants.TVVariantsDefault<undefined, "overflow-hidden transition-[height] duration-300 ease-in-out"> | {}>, tailwind_variants.TVVariantsDefault<undefined, "overflow-hidden transition-[height] duration-300 ease-in-out"> | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "overflow-hidden transition-[height] duration-300 ease-in-out", tailwind_variants_dist_config.TVConfig<unknown, tailwind_variants.TVVariantsDefault<undefined, "overflow-hidden transition-[height] duration-300 ease-in-out"> | {}>, unknown, unknown, undefined>>;
+declare const collapse: tailwind_variants.TVReturnType<{
+    animation: {
+        true: "transition-[height] duration-300 ease-in-out";
+        false: "animate-none";
+    };
+}, undefined, "overflow-hidden", tailwind_variants_dist_config.TVConfig<{
+    animation: {
+        true: "transition-[height] duration-300 ease-in-out";
+        false: "animate-none";
+    };
+}, {
+    animation: {
+        true: "transition-[height] duration-300 ease-in-out";
+        false: "animate-none";
+    };
+}>, {
+    animation: {
+        true: "transition-[height] duration-300 ease-in-out";
+        false: "animate-none";
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    animation: {
+        true: "transition-[height] duration-300 ease-in-out";
+        false: "animate-none";
+    };
+}, undefined, "overflow-hidden", tailwind_variants_dist_config.TVConfig<{
+    animation: {
+        true: "transition-[height] duration-300 ease-in-out";
+        false: "animate-none";
+    };
+}, {
+    animation: {
+        true: "transition-[height] duration-300 ease-in-out";
+        false: "animate-none";
+    };
+}>, unknown, unknown, undefined>>;
 type CollapseVariantProps = VariantProps<typeof collapse>;
 
 export { CollapseVariantProps, collapse };

dist/components/collapse.js

@@ -54,3 +54,12 @@ "use strict";
 var collapse = tv({
-  base: "overflow-hidden transition-[height] duration-300 ease-in-out"
+  base: "overflow-hidden",
+  variants: {
+    animation: {
+      true: "transition-[height] duration-300 ease-in-out",
+      false: "animate-none"
+    }
+  },
+  defaultVariants: {
+    animation: true
+  }
 });
@@ -57,0 +66,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/components/index.d.ts

@@ -12,4 +12,5 @@ export { AccordionVariantProps, accordion } from './accordion.js';
 export { SkeletonVariantProps, skeleton } from './skeleton.js';
+export { SnackbarVariantProps, snackbar } from './snackbar.js';
 export { SpinnerVariantProps, spinner } from './spinner.js';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config';

dist/components/index.js

@@ -52,2 +52,3 @@ "use strict";
   skeleton: () => skeleton,
+  snackbar: () => snackbar,
   spinner: () => spinner
@@ -670,3 +671,7 @@ });
     }
-  ]
+  ],
+  defaultVariants: {
+    variant: "pastel",
+    color: "primary"
+  }
 });
@@ -679,3 +684,3 @@
 var badge = tv({
-  base: "absolute z-[2] flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]",
+  base: "absolute flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]",
   variants: {
@@ -864,3 +869,12 @@ color: colorVariants.solid,
 var collapse = tv({
-  base: "overflow-hidden transition-[height] duration-300 ease-in-out"
+  base: "overflow-hidden",
+  variants: {
+    animation: {
+      true: "transition-[height] duration-300 ease-in-out",
+      false: "animate-none"
+    }
+  },
+  defaultVariants: {
+    animation: true
+  }
 });
@@ -1063,2 +1077,23 @@
 
+// src/components/snackbar.ts
+var snackbar = tv({
+  slots: {
+    wrapper: "fixed z-50 flex flex-col gap-2 transition-[inset] duration-500 ease-in-out",
+    base: "shadow-medium max-w-2xl"
+  },
+  variants: {
+    position: {
+      top: { wrapper: "left-1/2 top-4 -translate-x-1/2 items-center", base: "animate-slideInFromTop" },
+      "top-right": { wrapper: "right-4 top-4 items-end", base: "animate-slideInFromRight" },
+      "top-left": { wrapper: "left-4 top-4", base: "animate-slideInFromLeft" },
+      bottom: { wrapper: "bottom-4 left-1/2 -translate-x-1/2 items-center", base: "animate-slideInFromBottom" },
+      "bottom-right": { wrapper: "bottom-4 right-4 items-end", base: "animate-slideInFromRight" },
+      "bottom-left": { wrapper: "bottom-4 left-4", base: "animate-slideInFromLeft" }
+    }
+  },
+  defaultVariants: {
+    position: "bottom-left"
+  }
+});
+
 // src/components/spinner.ts
@@ -1102,3 +1137,4 @@ var spinner = tv({
   skeleton,
+  snackbar,
   spinner
 });

dist/index.d.ts

@@ -12,2 +12,3 @@ export { AccordionVariantProps, accordion } from './components/accordion.js';
 export { SkeletonVariantProps, skeleton } from './components/skeleton.js';
+export { SnackbarVariantProps, snackbar } from './components/snackbar.js';
 export { SpinnerVariantProps, spinner } from './components/spinner.js';
@@ -14,0 +15,0 @@ export { baseStyles } from './utils/classes.js';

dist/index.js

@@ -128,2 +128,3 @@ "use strict";
   skeleton: () => skeleton,
+  snackbar: () => snackbar,
   spinner: () => spinner,
@@ -764,3 +765,7 @@ tv: () => tv
     }
-  ]
+  ],
+  defaultVariants: {
+    variant: "pastel",
+    color: "primary"
+  }
 });
@@ -773,3 +778,3 @@
 var badge = tv({
-  base: "absolute z-[2] flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]",
+  base: "absolute flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]",
   variants: {
@@ -958,3 +963,12 @@ color: colorVariants.solid,
 var collapse = tv({
-  base: "overflow-hidden transition-[height] duration-300 ease-in-out"
+  base: "overflow-hidden",
+  variants: {
+    animation: {
+      true: "transition-[height] duration-300 ease-in-out",
+      false: "animate-none"
+    }
+  },
+  defaultVariants: {
+    animation: true
+  }
 });
@@ -1157,2 +1171,23 @@
 
+// src/components/snackbar.ts
+var snackbar = tv({
+  slots: {
+    wrapper: "fixed z-50 flex flex-col gap-2 transition-[inset] duration-500 ease-in-out",
+    base: "shadow-medium max-w-2xl"
+  },
+  variants: {
+    position: {
+      top: { wrapper: "left-1/2 top-4 -translate-x-1/2 items-center", base: "animate-slideInFromTop" },
+      "top-right": { wrapper: "right-4 top-4 items-end", base: "animate-slideInFromRight" },
+      "top-left": { wrapper: "left-4 top-4", base: "animate-slideInFromLeft" },
+      bottom: { wrapper: "bottom-4 left-1/2 -translate-x-1/2 items-center", base: "animate-slideInFromBottom" },
+      "bottom-right": { wrapper: "bottom-4 right-4 items-end", base: "animate-slideInFromRight" },
+      "bottom-left": { wrapper: "bottom-4 left-4", base: "animate-slideInFromLeft" }
+    }
+  },
+  defaultVariants: {
+    position: "bottom-left"
+  }
+});
+
 // src/components/spinner.ts
@@ -1193,3 +1228,7 @@ var spinner = tv({
     ripple: "ripple 550ms ease-out",
-    strokedrift: "strokedrift 1.4s ease-in-out infinite"
+    strokedrift: "strokedrift 1.4s ease-in-out infinite",
+    slideInFromTop: "slideInFromTop 500ms ease-in-out",
+    slideInFromRight: "slideInFromRight 500ms ease-in-out",
+    slideInFromBottom: "slideInFromBottom 500ms ease-in-out",
+    slideInFromLeft: "slideInFromLeft 500ms ease-in-out"
   },
@@ -1210,2 +1249,18 @@ keyframes: {
       "100%": { strokeDasharray: "100px, 200px", strokeDashoffset: "-125px" }
+    },
+    slideInFromTop: {
+      "0%": { transform: "translateY(-100vh)", opacity: "0" },
+      "100%": { transform: "translateY(1rem)", opacity: "1" }
+    },
+    slideInFromRight: {
+      "0%": { transform: "translateX(100vw)", opacity: "0" },
+      "100%": { transform: "translateX(-1rem)", opacity: "1" }
+    },
+    slideInFromBottom: {
+      "0%": { transform: "translateY(100vh)", opacity: "0" },
+      "100%": { transform: "translateY(-1rem)", opacity: "1" }
+    },
+    slideInFromLeft: {
+      "0%": { transform: "translateX(-100vw)", opacity: "0" },
+      "100%": { transform: "translateX(1rem)", opacity: "1" }
     }
@@ -1466,4 +1521,5 @@ }
   skeleton,
+  snackbar,
   spinner,
   tv
 });

dist/plugin.js

@@ -116,3 +116,7 @@ "use strict";
     ripple: "ripple 550ms ease-out",
-    strokedrift: "strokedrift 1.4s ease-in-out infinite"
+    strokedrift: "strokedrift 1.4s ease-in-out infinite",
+    slideInFromTop: "slideInFromTop 500ms ease-in-out",
+    slideInFromRight: "slideInFromRight 500ms ease-in-out",
+    slideInFromBottom: "slideInFromBottom 500ms ease-in-out",
+    slideInFromLeft: "slideInFromLeft 500ms ease-in-out"
   },
@@ -133,2 +137,18 @@ keyframes: {
       "100%": { strokeDasharray: "100px, 200px", strokeDashoffset: "-125px" }
+    },
+    slideInFromTop: {
+      "0%": { transform: "translateY(-100vh)", opacity: "0" },
+      "100%": { transform: "translateY(1rem)", opacity: "1" }
+    },
+    slideInFromRight: {
+      "0%": { transform: "translateX(100vw)", opacity: "0" },
+      "100%": { transform: "translateX(-1rem)", opacity: "1" }
+    },
+    slideInFromBottom: {
+      "0%": { transform: "translateY(100vh)", opacity: "0" },
+      "100%": { transform: "translateY(-1rem)", opacity: "1" }
+    },
+    slideInFromLeft: {
+      "0%": { transform: "translateX(-100vw)", opacity: "0" },
+      "100%": { transform: "translateX(1rem)", opacity: "1" }
     }
@@ -135,0 +155,0 @@ }

package.json

 {
   "name": "@nkey-ui/theme",
-  "version": "1.0.39",
+  "version": "1.0.42",
   "description": "The default theme for NkeyUI components",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

455870

increased by3.61%

Number of package files

164

increased by2.5%

Lines of code

16287

increased by3.63%

No dependency changes