sv5ui 1.6.0 → 1.7.0

package/dist/Slideover/slideover.variants.d.ts

@@ -1,8 +1,17 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const slideoverVariants: import("tailwind-variants").TVReturnType<{
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+        };
+        scale: {
             overlay: string;
+            content: string;
         };
     };
     side: {
@@ -19,6 +28,13 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
             content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
     inset: {
         true: {};
         false: {
@@ -43,9 +59,18 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     close: string;
 }, undefined, {
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
             overlay: string;
         };
+        scale: {
+            overlay: string;
+            content: string;
+        };
     };
     side: {
         top: {
@@ -61,6 +86,13 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
             content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
     inset: {
         true: {};
         false: {
@@ -85,9 +117,18 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
             overlay: string;
         };
+        scale: {
+            overlay: string;
+            content: string;
+        };
     };
     side: {
         top: {
@@ -103,6 +144,13 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
             content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
     inset: {
         true: {};
         false: {
@@ -131,8 +179,17 @@ export type SlideoverSlots = keyof ReturnType<typeof slideoverVariants>;
 export declare const slideoverDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
         transition: {
-            true: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
+                overlay: string;
+            };
+            scale: {
                 overlay: string;
+                content: string;
             };
         };
         side: {
@@ -149,6 +206,13 @@ export declare const slideoverDefaults: {
                 content: string;
             };
         };
+        size: {
+            sm: {};
+            md: {};
+            lg: {};
+            xl: {};
+            full: {};
+        };
         inset: {
             true: {};
             false: {
@@ -173,9 +237,18 @@ export declare const slideoverDefaults: {
         close: string;
     }, {
         transition: {
-            true: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
                 overlay: string;
             };
+            scale: {
+                overlay: string;
+                content: string;
+            };
         };
         side: {
             top: {
@@ -191,6 +264,13 @@ export declare const slideoverDefaults: {
                 content: string;
             };
         };
+        size: {
+            sm: {};
+            md: {};
+            lg: {};
+            xl: {};
+            full: {};
+        };
         inset: {
             true: {};
             false: {

package/dist/Slideover/slideover.variants.js

@@ -14,24 +14,40 @@ export const slideoverVariants = tv({
     },
     variants: {
         transition: {
-            true: {
+            none: {},
+            fade: {
+                overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]',
+                content: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]'
+            },
+            slide: {
                 overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]'
+            },
+            scale: {
+                overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]',
+                content: 'data-[state=open]:animate-[scale-in_200ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[scale-out_150ms_cubic-bezier(0.32,0.72,0,1)]'
             }
         },
         side: {
             top: {
-                content: 'fixed top-0 inset-x-0 max-h-[90dvh]'
+                content: 'fixed top-0 inset-x-0'
             },
             right: {
-                content: 'fixed right-0 inset-y-0 w-full max-w-md'
+                content: 'fixed right-0 inset-y-0 w-full'
             },
             bottom: {
-                content: 'fixed bottom-0 inset-x-0 max-h-[90dvh]'
+                content: 'fixed bottom-0 inset-x-0'
             },
             left: {
-                content: 'fixed left-0 inset-y-0 w-full max-w-md'
+                content: 'fixed left-0 inset-y-0 w-full'
             }
         },
+        size: {
+            sm: {},
+            md: {},
+            lg: {},
+            xl: {},
+            full: {}
+        },
         inset: {
             true: {},
             false: {
@@ -45,39 +61,52 @@ export const slideoverVariants = tv({
         }
     },
     compoundVariants: [
+        // Side-specific slide animations
         {
-            transition: true,
+            transition: 'slide',
             side: 'top',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-top_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-top_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
         {
-            transition: true,
+            transition: 'slide',
             side: 'right',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-right_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-right_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
         {
-            transition: true,
+            transition: 'slide',
             side: 'bottom',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-bottom_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-bottom_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
         {
-            transition: true,
+            transition: 'slide',
             side: 'left',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-left_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-left_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
+        // Sizes — left/right control width, top/bottom control height
+        { side: ['left', 'right'], size: 'sm', class: { content: 'max-w-sm' } },
+        { side: ['left', 'right'], size: 'md', class: { content: 'max-w-md' } },
+        { side: ['left', 'right'], size: 'lg', class: { content: 'max-w-lg' } },
+        { side: ['left', 'right'], size: 'xl', class: { content: 'max-w-xl' } },
+        { side: ['left', 'right'], size: 'full', class: { content: 'max-w-full' } },
+        { side: ['top', 'bottom'], size: 'sm', class: { content: 'max-h-[40dvh]' } },
+        { side: ['top', 'bottom'], size: 'md', class: { content: 'max-h-[60dvh]' } },
+        { side: ['top', 'bottom'], size: 'lg', class: { content: 'max-h-[75dvh]' } },
+        { side: ['top', 'bottom'], size: 'xl', class: { content: 'max-h-[90dvh]' } },
+        { side: ['top', 'bottom'], size: 'full', class: { content: 'max-h-full' } },
+        // Inset positioning + rounded corners + shadow ring per side
         {
             inset: true,
             side: 'top',
             class: {
-                content: 'top-4 inset-x-4 max-h-[calc(90dvh-2rem)] rounded-xl shadow-lg ring ring-outline-variant'
+                content: 'top-4 inset-x-4 rounded-xl shadow-lg ring ring-outline-variant'
             }
         },
         {
@@ -91,7 +120,7 @@ export const slideoverVariants = tv({
             inset: true,
             side: 'bottom',
             class: {
-                content: 'bottom-4 inset-x-4 max-h-[calc(90dvh-2rem)] rounded-xl shadow-lg ring ring-outline-variant'
+                content: 'bottom-4 inset-x-4 rounded-xl shadow-lg ring ring-outline-variant'
             }
         },
         {
@@ -103,8 +132,9 @@ export const slideoverVariants = tv({
         }
     ],
     defaultVariants: {
-        transition: true,
+        transition: 'slide',
         side: 'right',
+        size: 'md',
         inset: false,
         overlay: true
     }

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export * from './PinInput/index.js';
 export * from './ThemeModeButton/index.js';
 export * from './Table/index.js';
 export * from './Toast/index.js';
+export * from './Carousel/index.js';
 export * from './hooks/index.js';
 export { defineConfig } from './config.js';
 export type { UIConfig } from './config.js';

package/dist/index.js

@@ -47,6 +47,7 @@ export * from './PinInput/index.js';
 export * from './ThemeModeButton/index.js';
 export * from './Table/index.js';
 export * from './Toast/index.js';
+export * from './Carousel/index.js';
 // Composables
 export * from './hooks/index.js';
 // Configuration

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "description": "A modern Svelte 5 UI component library with Tailwind CSS",
     "author": "ndlabdev",
     "license": "MIT",
@@ -122,6 +122,11 @@
         "@internationalized/date": "^3.11.0",
         "@standard-schema/spec": "^1.1.0",
         "bits-ui": "^2.15.4",
+        "embla-carousel": "^8.6.0",
+        "embla-carousel-autoplay": "^8.6.0",
+        "embla-carousel-class-names": "^8.6.0",
+        "embla-carousel-fade": "^8.6.0",
+        "embla-carousel-svelte": "^8.6.0",
         "svelte-sonner": "^1.1.0",
         "tailwind-merge": "^3.4.0",
         "tailwind-variants": "^3.2.2",