sv5ui-plus 4.0.0

package/dist/components/Marquee/marquee.variants.d.ts

@@ -0,0 +1,78 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const marqueeVariants: import("tailwind-variants").TVReturnType<{
+    direction: {
+        left: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        up: {
+            root: string;
+            content: string;
+        };
+        down: {
+            root: string;
+            content: string;
+        };
+    };
+    pauseOnHover: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, undefined, {
+    direction: {
+        left: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        up: {
+            root: string;
+            content: string;
+        };
+        down: {
+            root: string;
+            content: string;
+        };
+    };
+    pauseOnHover: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    direction: {
+        left: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        up: {
+            root: string;
+            content: string;
+        };
+        down: {
+            root: string;
+            content: string;
+        };
+    };
+    pauseOnHover: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}>>;
+export type MarqueeVariantProps = VariantProps<typeof marqueeVariants>;

package/dist/components/Marquee/marquee.variants.js

@@ -0,0 +1,28 @@
+import { tv } from 'tailwind-variants';
+export const marqueeVariants = tv({
+    slots: {
+        root: 'group flex overflow-hidden p-2 [--gap:1rem] [gap:var(--gap)]',
+        content: 'flex shrink-0 justify-around [gap:var(--gap)] animate-marquee'
+    },
+    variants: {
+        direction: {
+            left: { content: '[animation-direction:normal]' },
+            right: { content: '[animation-direction:reverse]' },
+            up: {
+                root: 'flex-col',
+                content: 'flex-col animate-marquee-vertical [animation-direction:normal]'
+            },
+            down: {
+                root: 'flex-col',
+                content: 'flex-col animate-marquee-vertical [animation-direction:reverse]'
+            }
+        },
+        pauseOnHover: {
+            true: { content: 'group-hover:[animation-play-state:paused]' }
+        }
+    },
+    defaultVariants: {
+        direction: 'left',
+        pauseOnHover: false
+    }
+});