flowbite-svelte 1.10.11 → 1.10.13

package/dist/forms/button-toggle/theme.d.ts

@@ -1,5 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
 import type { ClassValue } from "svelte/elements";
+import type { Classes } from "../../theme/themeUtils";
 export declare const buttonToggleGroup: import("tailwind-variants").TVReturnType<{
     roundedSize: {
         sm: string;
@@ -26,154 +27,325 @@ export declare const buttonToggleGroup: import("tailwind-variants").TVReturnType
     };
 }, undefined, "inline-flex border border-gray-300 overflow-hidden", unknown, unknown, undefined>>;
 export type ButtonToggleGroupTheme = ClassValue;
-export declare const buttonToggle: {
-    button: import("tailwind-variants").TVReturnType<{
-        selected: {
-            true: string;
-            false: string;
-        };
-        size: {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        roundedSize: {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            full: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            gray: string;
-            red: string;
-            orange: string;
-            amber: string;
-            yellow: string;
-            lime: string;
-            green: string;
-            emerald: string;
-            teal: string;
-            cyan: string;
-            sky: string;
-            blue: string;
-            indigo: string;
-            violet: string;
-            purple: string;
-            fuchsia: string;
-            pink: string;
-            rose: string;
-            none: string;
-        };
-    }, undefined, "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800", {
-        selected: {
-            true: string;
-            false: string;
-        };
-        size: {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        roundedSize: {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            full: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            gray: string;
-            red: string;
-            orange: string;
-            amber: string;
-            yellow: string;
-            lime: string;
-            green: string;
-            emerald: string;
-            teal: string;
-            cyan: string;
-            sky: string;
-            blue: string;
-            indigo: string;
-            violet: string;
-            purple: string;
-            fuchsia: string;
-            pink: string;
-            rose: string;
-            none: string;
-        };
-    }, undefined, import("tailwind-variants").TVReturnType<{
-        selected: {
-            true: string;
-            false: string;
-        };
-        size: {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        roundedSize: {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            full: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            gray: string;
-            red: string;
-            orange: string;
-            amber: string;
-            yellow: string;
-            lime: string;
-            green: string;
-            emerald: string;
-            teal: string;
-            cyan: string;
-            sky: string;
-            blue: string;
-            indigo: string;
-            violet: string;
-            purple: string;
-            fuchsia: string;
-            pink: string;
-            rose: string;
-            none: string;
-        };
-    }, undefined, "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800", unknown, unknown, undefined>>;
-    content: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex items-center w-full overflow-hidden relative", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex items-center w-full overflow-hidden relative", unknown, unknown, undefined>>;
-    text: import("tailwind-variants").TVReturnType<{
-        selected: {
-            true: string;
-            false: string;
-        };
-    }, undefined, "transition-all duration-200 ml-0", {
-        selected: {
-            true: string;
-            false: string;
-        };
-    }, undefined, import("tailwind-variants").TVReturnType<{
-        selected: {
-            true: string;
-            false: string;
-        };
-    }, undefined, "transition-all duration-200 ml-0", unknown, unknown, undefined>>;
-};
-export type ButtonToggleTheme = {
-    button?: ClassValue;
-    content?: ClassValue;
-    text?: ClassValue;
-};
-export type ButtonToggleVariants = VariantProps<typeof buttonToggle.button>;
-export type ButtonToggleContentVariants = VariantProps<typeof buttonToggle.content>;
-export type ButtonToggleTextVariants = VariantProps<typeof buttonToggle.text>;
+export type ButtonToggleVariants = VariantProps<typeof buttonToggle> & Classes<typeof buttonToggle>;
+export declare const buttonToggle: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            text: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+    };
+    roundedSize: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+        full: {
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            button: string;
+        };
+        secondary: {
+            button: string;
+        };
+        gray: {
+            button: string;
+        };
+        red: {
+            button: string;
+        };
+        orange: {
+            button: string;
+        };
+        amber: {
+            button: string;
+        };
+        yellow: {
+            button: string;
+        };
+        lime: {
+            button: string;
+        };
+        green: {
+            button: string;
+        };
+        emerald: {
+            button: string;
+        };
+        teal: {
+            button: string;
+        };
+        cyan: {
+            button: string;
+        };
+        sky: {
+            button: string;
+        };
+        blue: {
+            button: string;
+        };
+        indigo: {
+            button: string;
+        };
+        violet: {
+            button: string;
+        };
+        purple: {
+            button: string;
+        };
+        fuchsia: {
+            button: string;
+        };
+        pink: {
+            button: string;
+        };
+        rose: {
+            button: string;
+        };
+        none: {};
+    };
+}, {
+    button: string;
+    content: string;
+    text: string;
+    icon: string;
+}, undefined, {
+    selected: {
+        true: {
+            text: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+    };
+    roundedSize: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+        full: {
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            button: string;
+        };
+        secondary: {
+            button: string;
+        };
+        gray: {
+            button: string;
+        };
+        red: {
+            button: string;
+        };
+        orange: {
+            button: string;
+        };
+        amber: {
+            button: string;
+        };
+        yellow: {
+            button: string;
+        };
+        lime: {
+            button: string;
+        };
+        green: {
+            button: string;
+        };
+        emerald: {
+            button: string;
+        };
+        teal: {
+            button: string;
+        };
+        cyan: {
+            button: string;
+        };
+        sky: {
+            button: string;
+        };
+        blue: {
+            button: string;
+        };
+        indigo: {
+            button: string;
+        };
+        violet: {
+            button: string;
+        };
+        purple: {
+            button: string;
+        };
+        fuchsia: {
+            button: string;
+        };
+        pink: {
+            button: string;
+        };
+        rose: {
+            button: string;
+        };
+        none: {};
+    };
+}, {
+    button: string;
+    content: string;
+    text: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            text: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+    };
+    roundedSize: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+        full: {
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            button: string;
+        };
+        secondary: {
+            button: string;
+        };
+        gray: {
+            button: string;
+        };
+        red: {
+            button: string;
+        };
+        orange: {
+            button: string;
+        };
+        amber: {
+            button: string;
+        };
+        yellow: {
+            button: string;
+        };
+        lime: {
+            button: string;
+        };
+        green: {
+            button: string;
+        };
+        emerald: {
+            button: string;
+        };
+        teal: {
+            button: string;
+        };
+        cyan: {
+            button: string;
+        };
+        sky: {
+            button: string;
+        };
+        blue: {
+            button: string;
+        };
+        indigo: {
+            button: string;
+        };
+        violet: {
+            button: string;
+        };
+        purple: {
+            button: string;
+        };
+        fuchsia: {
+            button: string;
+        };
+        pink: {
+            button: string;
+        };
+        rose: {
+            button: string;
+        };
+        none: {};
+    };
+}, {
+    button: string;
+    content: string;
+    text: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ButtonToggleSlots = keyof typeof buttonToggle.slots;
+export type ButtonToggleTheme = Partial<Record<ButtonToggleSlots, ClassValue>>;

package/dist/forms/button-toggle/theme.js

@@ -11,71 +11,119 @@ export const buttonToggleGroup = tv({
         }
     }
 });
-export const buttonToggle = {
-    button: tv({
-        base: "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800",
-        variants: {
-            selected: {
-                true: "",
-                false: ""
-            },
-            size: {
-                sm: "p-1 px-2 text-sm",
-                md: "p-2 px-4 text-base",
-                lg: "p-3 px-5 text-lg",
-                xl: "p-4 px-6 text-xl"
-            },
-            roundedSize: {
-                sm: "first:rounded-s-sm last:rounded-e-sm",
-                md: "first:rounded-s-md last:rounded-e-md",
-                lg: "first:rounded-s-lg last:rounded-e-lg",
-                xl: "first:rounded-s-xl last:rounded-e-xl",
-                full: "first:rounded-s-full last:rounded-e-full"
-            },
-            color: {
-                primary: "data-[selected=true]:bg-primary-200 data-[selected=false]:hover:bg-gray-100",
-                secondary: "data-[selected=true]:bg-secondary-200 data-[selected=false]:hover:bg-gray-100",
-                gray: "data-[selected=true]:bg-gray-200 data-[selected=false]:hover:bg-gray-100",
-                red: "data-[selected=true]:bg-red-200 data-[selected=false]:hover:bg-red-50",
-                orange: "data-[selected=true]:bg-orange-200 data-[selected=false]:hover:bg-orange-50",
-                amber: "data-[selected=true]:bg-amber-200 data-[selected=false]:hover:bg-amber-50",
-                yellow: "data-[selected=true]:bg-yellow-200 data-[selected=false]:hover:bg-yellow-50",
-                lime: "data-[selected=true]:bg-lime-200 data-[selected=false]:hover:bg-lime-50",
-                green: "data-[selected=true]:bg-green-200 data-[selected=false]:hover:bg-green-50",
-                emerald: "data-[selected=true]:bg-emerald-200 data-[selected=false]:hover:bg-emerald-50",
-                teal: "data-[selected=true]:bg-teal-200 data-[selected=false]:hover:bg-teal-50",
-                cyan: "data-[selected=true]:bg-cyan-200 data-[selected=false]:hover:bg-cyan-50",
-                sky: "data-[selected=true]:bg-sky-200 data-[selected=false]:hover:bg-sky-50",
-                blue: "data-[selected=true]:bg-blue-200 data-[selected=false]:hover:bg-blue-50",
-                indigo: "data-[selected=true]:bg-indigo-200 data-[selected=false]:hover:bg-indigo-50",
-                violet: "data-[selected=true]:bg-violet-200 data-[selected=false]:hover:bg-violet-50",
-                purple: "data-[selected=true]:bg-purple-200 data-[selected=false]:hover:bg-purple-50",
-                fuchsia: "data-[selected=true]:bg-fuchsia-200 data-[selected=false]:hover:bg-fuchsia-50",
-                pink: "data-[selected=true]:bg-pink-200 data-[selected=false]:hover:bg-pink-50",
-                rose: "data-[selected=true]:bg-rose-200 data-[selected=false]:hover:bg-rose-50",
-                none: ""
+export const buttonToggle = tv({
+    slots: {
+        button: "relative flex items-center transition-all duration-200 focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800",
+        content: "flex items-center w-full overflow-hidden relative",
+        text: "transition-all duration-200 ml-0",
+        icon: "absolute left-0 flex-shrink-0 text-green-600"
+    },
+    variants: {
+        selected: {
+            true: {
+                text: "ml-5"
+            },
+            false: {}
+        },
+        size: {
+            sm: {
+                button: "p-1 px-2 text-sm"
+            },
+            md: {
+                button: "p-2 px-4 text-base"
+            },
+            lg: {
+                button: "p-3 px-5 text-lg"
+            },
+            xl: {
+                button: "p-4 px-6 text-xl"
             }
         },
-        defaultVariants: {
-            selected: false,
-            color: "primary",
-            size: "md",
-            roundedSize: "md"
-        }
-    }),
-    content: tv({
-        base: "flex items-center w-full overflow-hidden relative"
-    }),
-    text: tv({
-        base: "transition-all duration-200 ml-0",
-        variants: {
-            selected: {
-                true: "ml-5",
-                false: ""
+        roundedSize: {
+            sm: {
+                button: "first:rounded-s-sm last:rounded-e-sm"
+            },
+            md: {
+                button: "first:rounded-s-md last:rounded-e-md"
+            },
+            lg: {
+                button: "first:rounded-s-lg last:rounded-e-lg"
+            },
+            xl: {
+                button: "first:rounded-s-xl last:rounded-e-xl"
+            },
+            full: {
+                button: "first:rounded-s-full last:rounded-e-full"
             }
         },
-        defaultVariants: {
-            selected: false
+        color: {
+            primary: {
+                button: "data-[selected=true]:bg-primary-200 data-[selected=false]:hover:bg-gray-100"
+            },
+            secondary: {
+                button: "data-[selected=true]:bg-secondary-200 data-[selected=false]:hover:bg-gray-100"
+            },
+            gray: {
+                button: "data-[selected=true]:bg-gray-200 data-[selected=false]:hover:bg-gray-100"
+            },
+            red: {
+                button: "data-[selected=true]:bg-red-200 data-[selected=false]:hover:bg-red-50"
+            },
+            orange: {
+                button: "data-[selected=true]:bg-orange-200 data-[selected=false]:hover:bg-orange-50"
+            },
+            amber: {
+                button: "data-[selected=true]:bg-amber-200 data-[selected=false]:hover:bg-amber-50"
+            },
+            yellow: {
+                button: "data-[selected=true]:bg-yellow-200 data-[selected=false]:hover:bg-yellow-50"
+            },
+            lime: {
+                button: "data-[selected=true]:bg-lime-200 data-[selected=false]:hover:bg-lime-50"
+            },
+            green: {
+                button: "data-[selected=true]:bg-green-200 data-[selected=false]:hover:bg-green-50"
+            },
+            emerald: {
+                button: "data-[selected=true]:bg-emerald-200 data-[selected=false]:hover:bg-emerald-50"
+            },
+            teal: {
+                button: "data-[selected=true]:bg-teal-200 data-[selected=false]:hover:bg-teal-50"
+            },
+            cyan: {
+                button: "data-[selected=true]:bg-cyan-200 data-[selected=false]:hover:bg-cyan-50"
+            },
+            sky: {
+                button: "data-[selected=true]:bg-sky-200 data-[selected=false]:hover:bg-sky-50"
+            },
+            blue: {
+                button: "data-[selected=true]:bg-blue-200 data-[selected=false]:hover:bg-blue-50"
+            },
+            indigo: {
+                button: "data-[selected=true]:bg-indigo-200 data-[selected=false]:hover:bg-indigo-50"
+            },
+            violet: {
+                button: "data-[selected=true]:bg-violet-200 data-[selected=false]:hover:bg-violet-50"
+            },
+            purple: {
+                button: "data-[selected=true]:bg-purple-200 data-[selected=false]:hover:bg-purple-50"
+            },
+            fuchsia: {
+                button: "data-[selected=true]:bg-fuchsia-200 data-[selected=false]:hover:bg-fuchsia-50"
+            },
+            pink: {
+                button: "data-[selected=true]:bg-pink-200 data-[selected=false]:hover:bg-pink-50"
+            },
+            rose: {
+                button: "data-[selected=true]:bg-rose-200 data-[selected=false]:hover:bg-rose-50"
+            },
+            none: {}
         }
-    })
-};
+    },
+    defaultVariants: {
+        selected: false,
+        color: "primary",
+        size: "md",
+        roundedSize: "md"
+    }
+});