flowbite-svelte 2.0.0-next.6 → 2.0.0-next.7

package/dist/accordion/Accordion.svelte

@@ -11,7 +11,7 @@
 
   const theme = $derived(getTheme("accordion"));
 
-  // Simple reactive state object
+  // Multiple reactive properties that need to be accessed independently
   const reactiveCtx: AccordionContextType = {
     get flush() {
       return flush;

package/dist/alert/theme.d.ts

@@ -8,6 +8,25 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
         danger: string;
         success: string;
         warning: string;
+        primary: string;
+        secondary: 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;
     };
     listContent: {
         true: string;
@@ -35,6 +54,25 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
         danger: string;
         success: string;
         warning: string;
+        primary: string;
+        secondary: 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;
     };
     listContent: {
         true: string;
@@ -62,6 +100,25 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
         danger: string;
         success: string;
         warning: string;
+        primary: string;
+        secondary: 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;
     };
     listContent: {
         true: string;

package/dist/alert/theme.js

@@ -8,7 +8,26 @@ export const alert = tv({
             gray: "text-heading bg-neutral-secondary-medium",
             danger: "text-fg-danger-strong bg-danger-soft",
             success: "text-fg-success-strong bg-success-soft",
-            warning: "text-fg-warning bg-warning-soft"
+            warning: "text-fg-warning bg-warning-soft",
+            primary: "bg-primary-50 dark:bg-primary-800 text-primary-800 dark:text-primary-400",
+            secondary: "bg-secondary-50 dark:bg-secondary-800 text-secondary-800 dark:text-secondary-400",
+            red: "bg-red-100 text-red-500 dark:bg-red-200 dark:text-red-600",
+            orange: "bg-orange-100 text-orange-500 dark:bg-orange-200 dark:text-orange-600",
+            amber: "bg-amber-100 text-amber-500 dark:bg-amber-200 dark:text-amber-600",
+            yellow: "bg-yellow-100 text-yellow-500 dark:bg-yellow-200 dark:text-yellow-600",
+            lime: "bg-lime-100 text-lime-500 dark:bg-lime-200 dark:text-lime-600",
+            green: "bg-green-100 text-green-500 dark:bg-green-200 dark:text-green-600",
+            emerald: "bg-emerald-100 text-emerald-500 dark:bg-emerald-200 dark:text-emerald-600",
+            teal: "bg-teal-100 text-teal-500 dark:bg-teal-200 dark:text-teal-600",
+            cyan: "bg-cyan-100 text-cyan-500 dark:bg-cyan-200 dark:text-cyan-600",
+            sky: "bg-sky-100 text-sky-500 dark:bg-sky-200 dark:text-sky-600",
+            blue: "bg-blue-100 text-blue-500 dark:bg-blue-200 dark:text-blue-600",
+            indigo: "bg-indigo-100 text-indigo-500 dark:bg-indigo-200 dark:text-indigo-600",
+            violet: "bg-violet-100 text-violet-500 dark:bg-violet-200 dark:text-violet-600",
+            purple: "bg-purple-100 text-purple-500 dark:bg-purple-200 dark:text-purple-600",
+            fuchsia: "bg-fuchsia-100 text-fuchsia-500 dark:bg-fuchsia-200 dark:text-fuchsia-600",
+            pink: "bg-pink-100 text-pink-500 dark:bg-pink-200 dark:text-pink-600",
+            rose: "bg-rose-100 text-rose-500 dark:bg-rose-200 dark:text-rose-600"
         },
         listContent: {
             true: ""
@@ -101,9 +120,104 @@ export const alert = tv({
             class: "border-warning-subtle"
         },
         {
-            borderAccent: true,
+            border: true,
+            color: "primary",
+            class: "border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200"
+        },
+        {
+            border: true,
+            color: "secondary",
+            class: "border-secondary-500 dark:border-secondary-200 divide-secondary-500 dark:divide-secondary-200"
+        },
+        {
+            border: true,
             color: "gray",
-            class: "border-dark-subtle"
+            class: "border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800"
+        },
+        {
+            border: true,
+            color: "red",
+            class: "border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800"
+        },
+        {
+            border: true,
+            color: "orange",
+            class: "border-orange-300 dark:border-orange-800 divide-orange-300 dark:divide-orange-800"
+        },
+        {
+            border: true,
+            color: "amber",
+            class: "border-amber-300 dark:border-amber-800 divide-amber-300 dark:divide-amber-800"
+        },
+        {
+            border: true,
+            color: "yellow",
+            class: "border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800"
+        },
+        {
+            border: true,
+            color: "lime",
+            class: "border-lime-300 dark:border-lime-800 divide-lime-300 dark:divide-lime-800"
+        },
+        {
+            border: true,
+            color: "green",
+            class: "border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800"
+        },
+        {
+            border: true,
+            color: "emerald",
+            class: "border-emerald-300 dark:border-emerald-800 divide-emerald-300 dark:divide-emerald-800"
+        },
+        {
+            border: true,
+            color: "teal",
+            class: "border-teal-300 dark:border-teal-800 divide-teal-300 dark:divide-teal-800"
+        },
+        {
+            border: true,
+            color: "cyan",
+            class: "border-cyan-300 dark:border-cyan-800 divide-cyan-300 dark:divide-cyan-800"
+        },
+        {
+            border: true,
+            color: "sky",
+            class: "border-sky-300 dark:border-sky-800 divide-sky-300 dark:divide-sky-800"
+        },
+        {
+            border: true,
+            color: "blue",
+            class: "border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800"
+        },
+        {
+            border: true,
+            color: "indigo",
+            class: "border-indigo-300 dark:border-indigo-800 divide-indigo-300 dark:divide-indigo-800"
+        },
+        {
+            border: true,
+            color: "violet",
+            class: "border-violet-300 dark:border-violet-800 divide-violet-300 dark:divide-violet-800"
+        },
+        {
+            border: true,
+            color: "purple",
+            class: "border-purple-300 dark:border-purple-800 divide-purple-300 dark:divide-purple-800"
+        },
+        {
+            border: true,
+            color: "fuchsia",
+            class: "border-fuchsia-300 dark:border-fuchsia-800 divide-fuchsia-300 dark:divide-fuchsia-800"
+        },
+        {
+            border: true,
+            color: "pink",
+            class: "border-pink-300 dark:border-pink-800 divide-pink-300 dark:divide-pink-800"
+        },
+        {
+            border: true,
+            color: "rose",
+            class: "border-rose-300 dark:border-rose-800 divide-rose-300 dark:divide-rose-800"
         }
     ],
     defaultVariants: {

package/dist/badge/theme.d.ts

@@ -21,6 +21,63 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
         warning: {
             base: string;
         };
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
     };
     size: {
         small: string;
@@ -63,6 +120,63 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
         warning: {
             base: string;
         };
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
     };
     size: {
         small: string;
@@ -105,6 +219,63 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
         warning: {
             base: string;
         };
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
     };
     size: {
         small: string;

package/dist/badge/theme.js

@@ -11,7 +11,26 @@ export const badge = tv({
             gray: { base: "bg-neutral-secondary-medium text-heading " },
             danger: { base: "bg-danger-soft text-fg-danger-strong" },
             success: { base: "bg-success-soft text-fg-success-strong" },
-            warning: { base: "bg-warning-soft text-fg-warning" }
+            warning: { base: "bg-warning-soft text-fg-warning" },
+            primary: { base: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300" },
+            secondary: { base: "bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-300" },
+            red: { base: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300" },
+            orange: { base: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300" },
+            amber: { base: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300" },
+            yellow: { base: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300" },
+            lime: { base: "bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-300" },
+            green: { base: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" },
+            emerald: { base: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300" },
+            teal: { base: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300" },
+            cyan: { base: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300" },
+            sky: { base: "bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-300" },
+            blue: { base: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300" },
+            indigo: { base: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300" },
+            violet: { base: "bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-300" },
+            fuchsia: { base: "bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900 dark:text-fuchsia-300" },
+            purple: { base: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300" },
+            pink: { base: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300" },
+            rose: { base: "bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300" }
         },
         size: {
             small: "text-xs px-1.5 py-0.5",
@@ -89,6 +108,196 @@ export const badge = tv({
             href: true,
             color: "warning",
             class: "hover:bg-warning-medium"
+        },
+        {
+            border: true,
+            color: "primary",
+            class: "dark:bg-transparent dark:text-primary-400 border-primary-400 dark:border-primary-400"
+        },
+        {
+            border: true,
+            color: "secondary",
+            class: "dark:bg-transparent dark:text-secondary-400 border-secondary-400 dark:border-secondary-400"
+        },
+        {
+            border: true,
+            color: "red",
+            class: "dark:bg-transparent dark:text-red-400 border-red-400 dark:border-red-400"
+        },
+        {
+            border: true,
+            color: "orange",
+            class: "dark:bg-transparent dark:text-orange-400 border-orange-400 dark:border-orange-400"
+        },
+        {
+            border: true,
+            color: "amber",
+            class: "dark:bg-transparent dark:text-amber-400 border-amber-400 dark:border-amber-400"
+        },
+        {
+            border: true,
+            color: "yellow",
+            class: "dark:bg-transparent dark:text-yellow-300 border-yellow-300 dark:border-yellow-300"
+        },
+        {
+            border: true,
+            color: "lime",
+            class: "dark:bg-transparent dark:text-lime-400 border-lime-400 dark:border-lime-400"
+        },
+        {
+            border: true,
+            color: "green",
+            class: "dark:bg-transparent dark:text-green-400 border-green-400 dark:border-green-400"
+        },
+        {
+            border: true,
+            color: "emerald",
+            class: "dark:bg-transparent dark:text-emerald-400 border-emerald-400 dark:border-emerald-400"
+        },
+        {
+            border: true,
+            color: "teal",
+            class: "dark:bg-transparent dark:text-teal-400 border-teal-400 dark:border-teal-400"
+        },
+        {
+            border: true,
+            color: "cyan",
+            class: "dark:bg-transparent dark:text-cyan-400 border-cyan-400 dark:border-cyan-400"
+        },
+        {
+            border: true,
+            color: "sky",
+            class: "dark:bg-transparent dark:text-sky-400 border-sky-400 dark:border-sky-400"
+        },
+        {
+            border: true,
+            color: "blue",
+            class: "dark:bg-transparent dark:text-blue-400 border-blue-400 dark:border-blue-400"
+        },
+        {
+            border: true,
+            color: "indigo",
+            class: "dark:bg-transparent dark:text-indigo-400 border-indigo-400 dark:border-indigo-400"
+        },
+        {
+            border: true,
+            color: "violet",
+            class: "dark:bg-transparent dark:text-violet-400 border-violet-400 dark:border-violet-400"
+        },
+        {
+            border: true,
+            color: "purple",
+            class: "dark:bg-transparent dark:text-purple-400 border-purple-400 dark:border-purple-400"
+        },
+        {
+            border: true,
+            color: "fuchsia",
+            class: "dark:bg-transparent dark:text-fuchsia-400 border-fuchsia-400 dark:border-fuchsia-400"
+        },
+        {
+            border: true,
+            color: "pink",
+            class: "dark:bg-transparent dark:text-pink-400 border-pink-400 dark:border-pink-400"
+        },
+        {
+            border: true,
+            color: "rose",
+            class: "dark:bg-transparent dark:text-rose-400 border-rose-400 dark:border-rose-400"
+        },
+        {
+            href: true,
+            color: "primary",
+            class: "hover:bg-primary-200 dark:hover:bg-primary-700"
+        },
+        {
+            href: true,
+            color: "secondary",
+            class: "hover:bg-secondary-200 dark:hover:bg-secondary-700"
+        },
+        {
+            href: true,
+            color: "red",
+            class: "hover:bg-red-200 dark:hover:bg-red-700"
+        },
+        {
+            href: true,
+            color: "orange",
+            class: "hover:bg-orange-200 dark:hover:bg-orange-700"
+        },
+        {
+            href: true,
+            color: "amber",
+            class: "hover:bg-amber-200 dark:hover:bg-amber-700"
+        },
+        {
+            href: true,
+            color: "yellow",
+            class: "hover:bg-yellow-200 dark:hover:bg-yellow-700"
+        },
+        {
+            href: true,
+            color: "lime",
+            class: "hover:bg-lime-200 dark:hover:bg-lime-700"
+        },
+        {
+            href: true,
+            color: "green",
+            class: "hover:bg-green-200 dark:hover:bg-green-700"
+        },
+        {
+            href: true,
+            color: "emerald",
+            class: "hover:bg-emerald-200 dark:hover:bg-emerald-700"
+        },
+        {
+            href: true,
+            color: "teal",
+            class: "hover:bg-teal-200 dark:hover:bg-teal-700"
+        },
+        {
+            href: true,
+            color: "cyan",
+            class: "hover:bg-cyan-200 dark:hover:bg-cyan-700"
+        },
+        {
+            href: true,
+            color: "sky",
+            class: "hover:bg-sky-200 dark:hover:bg-sky-700"
+        },
+        {
+            href: true,
+            color: "blue",
+            class: "hover:bg-blue-200 dark:hover:bg-blue-700"
+        },
+        {
+            href: true,
+            color: "indigo",
+            class: "hover:bg-indigo-200 dark:hover:bg-indigo-700"
+        },
+        {
+            href: true,
+            color: "violet",
+            class: "hover:bg-violet-200 dark:hover:bg-violet-700"
+        },
+        {
+            href: true,
+            color: "purple",
+            class: "hover:bg-purple-200 dark:hover:bg-purple-700"
+        },
+        {
+            href: true,
+            color: "fuchsia",
+            class: "hover:bg-fuchsia-200 dark:hover:bg-fuchsia-700"
+        },
+        {
+            href: true,
+            color: "pink",
+            class: "hover:bg-pink-200 dark:hover:bg-pink-700"
+        },
+        {
+            href: true,
+            color: "rose",
+            class: "hover:bg-rose-200 dark:hover:bg-rose-700"
         }
     ],
     defaultVariants: {

package/dist/carousel/Carousel.svelte

@@ -110,9 +110,10 @@
 
   const onDragStart = (evt: MouseEvent | TouchEvent) => {
     if (disableSwipe) return;
-    /* eslint-disable  @typescript-eslint/no-unused-expressions */
     touchEvent = evt;
-    evt.cancelable && evt.preventDefault();
+    if (evt.cancelable) {
+      evt.preventDefault();
+    }
     const start = getPositionFromEvent(evt);
     const width = carouselDiv?.getBoundingClientRect().width;
     if (start === undefined || width === undefined) return;

package/dist/context.d.ts

@@ -30,7 +30,7 @@ declare const getButtonGroupContext: () => ButtonGroupContextType | undefined, s
 export { getButtonGroupContext, setButtonGroupContext };
 declare const getNavbarStateContext: () => NavbarState | undefined, setNavbarStateContext: (context: NavbarState) => NavbarState;
 export { getNavbarStateContext, setNavbarStateContext };
-declare const getNavbarBreakpointContext: () => NavbarBreakpoint | undefined, setNavbarBreakpointContext: (context: NavbarBreakpoint) => NavbarBreakpoint;
+declare const getNavbarBreakpointContext: () => (() => NavbarBreakpoint) | undefined, setNavbarBreakpointContext: (context: () => NavbarBreakpoint) => () => NavbarBreakpoint;
 export { getNavbarBreakpointContext, setNavbarBreakpointContext };
 declare const getSidebarContext: () => SidebarContextType | undefined, setSidebarContext: (context: SidebarContextType) => SidebarContextType;
 export { getSidebarContext, setSidebarContext };
@@ -42,11 +42,11 @@ declare const getActiveUrlContext: () => {
     value: string;
 };
 export { getActiveUrlContext, setActiveUrlContext };
-declare const getTableContext: () => TableContextType | undefined, setTableContext: (context: TableContextType) => TableContextType;
+declare const getTableContext: () => (() => TableContextType) | undefined, setTableContext: (context: () => TableContextType) => () => TableContextType;
 export { getTableContext, setTableContext };
 declare const getSplitPaneContext: () => SplitPaneContext | undefined, setSplitPaneContext: (context: SplitPaneContext) => SplitPaneContext;
 export { getSplitPaneContext, setSplitPaneContext };
 declare const getTabsContext: () => TabsContextType | undefined, setTabsContext: (context: TabsContextType) => TabsContextType;
 export { getTabsContext, setTabsContext };
-declare const getSpeedDialContext: () => SpeedCtxType | undefined, setSpeedDialContext: (context: SpeedCtxType) => SpeedCtxType;
+declare const getSpeedDialContext: () => (() => SpeedCtxType) | undefined, setSpeedDialContext: (context: () => SpeedCtxType) => () => SpeedCtxType;
 export { getSpeedDialContext, setSpeedDialContext };