flowbite-svelte 2.0.0-next.2 → 2.0.0-next.4

package/dist/typography/span/Span.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SpanProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1948)
+ * [SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1960)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/utils/Arrow.svelte

@@ -49,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1992)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2004)
 ## Props
 @prop placement = "top"
 @prop cords

package/dist/utils/Arrow.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ArrowProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1992)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2004)
  * ## Props
  * @prop placement = "top"
  * @prop cords

package/dist/utils/CloseButton.svelte

@@ -3,11 +3,15 @@
   import type { CloseButtonProps } from "../types";
   import { closeButton } from "./theme";
   import { useDismiss } from "./dismissable";
+  import { getTheme } from "../theme-provider/themeUtils";
 
-  let { children, color = "gray", onclick: onclickorg, name = "Close", ariaLabel, size = "md", class: className, svgClass, ...restProps }: CloseButtonProps = $props();
+  let { children, color = "gray", onclick: onclickorg, name = "Close", ariaLabel, size = "md", class: className, classes, ...restProps }: CloseButtonProps = $props();
 
   const { base, svg } = $derived(closeButton({ color, size }));
 
+  const theme = $derived(getTheme("closeButton"));
+  const styling = $derived(classes);
+
   const context = useDismiss();
 
   function onclick(event: MouseEvent) {
@@ -18,12 +22,12 @@
 </script>
 
 {#if restProps.href === undefined}
-  <button type="button" {...restProps} class={base({ class: clsx(className) })} {onclick} aria-label={ariaLabel ?? name}>
+  <button data-scope="close-button" data-part="base" type="button" {...restProps} class={base({ class: clsx(theme?.base, className) })} {onclick} aria-label={ariaLabel ?? name}>
     {#if name}<span class="sr-only">{name}</span>{/if}
     {#if children}
       {@render children()}
     {:else}
-      <svg class={svg({ class: svgClass })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <svg data-part="svg" class={svg({ class: clsx(theme?.svg, styling?.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path
           fill-rule="evenodd"
           d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
@@ -33,12 +37,12 @@
     {/if}
   </button>
 {:else}
-  <a {...restProps} {onclick} class={base({ class: clsx(className) })} aria-label={ariaLabel ?? name}>
+  <a data-part="base" {...restProps} {onclick} class={base({ class: clsx(theme?.base, className) })} aria-label={ariaLabel ?? name}>
     {#if name}<span class="sr-only">{name}</span>{/if}
     {#if children}
       {@render children()}
     {:else}
-      <svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <svg data-part="svg" class={svg({ class: clsx(theme?.svg, styling?.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path
           fill-rule="evenodd"
           d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
@@ -53,7 +57,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L146)
+[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L156)
 ## Props
 @prop children
 @prop color = "gray"
@@ -62,6 +66,6 @@
 @prop ariaLabel
 @prop size = "md"
 @prop class: className
-@prop svgClass
+@prop classes
 @prop ...restProps
 -->

package/dist/utils/CloseButton.svelte.d.ts

@@ -2,7 +2,7 @@ import type { CloseButtonProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L146)
+ * [CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L156)
  * ## Props
  * @prop children
  * @prop color = "gray"
@@ -11,7 +11,7 @@ import type { CloseButtonProps } from "../types";
  * @prop ariaLabel
  * @prop size = "md"
  * @prop class: className
- * @prop svgClass
+ * @prop classes
  * @prop ...restProps
  */
 declare const CloseButton: import("svelte").Component<CloseButtonProps, {}, "">;

package/dist/utils/Popper.svelte

@@ -5,6 +5,7 @@
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import Arrow from "./Arrow.svelte";
   import { createMutualDebounce } from "./debounce";
 
@@ -71,7 +72,12 @@
   });
 
   const paramsDefault = { duration: 100, easing: sineIn };
-  const paramsOptions = $derived(transitionParams ?? paramsDefault);
+
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
+  // Respect reduced motion preference by setting duration to 0
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...(transitionParams ?? paramsDefault), duration: 0 } : (transitionParams ?? paramsDefault));
 
   const px = (n: number | undefined) => (n ? `${n}px` : "");
 
@@ -275,7 +281,7 @@
     onmouseleave={hoverable ? close_popover : undefined}
     onmouseenter={hoverable ? open_popover : undefined}
     class={clsx(className)}
-    transition:transition={paramsOptions as ParamsType}
+    transition:transition={effectiveParams as ParamsType}
     onintrostart={() => popover?.showPopover()}
     onbeforetoggle={on_before_toggle}
     ontoggle={on_toggle}
@@ -292,7 +298,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1970)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1982)
 ## Props
 @prop triggeredBy
 @prop triggerDelay = DEFAULT_TRIGGER_DELAY

package/dist/utils/Popper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PopperProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1970)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1982)
  * ## Props
  * @prop triggeredBy
  * @prop triggerDelay = DEFAULT_TRIGGER_DELAY

package/dist/utils/theme.d.ts

@@ -1,34 +1,26 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 export type CloseButtonVariants = VariantProps<typeof closeButton> & Classes<typeof closeButton>;
 export declare const closeButton: import("tailwind-variants").TVReturnType<{
     color: {
-        brand: string;
-        danger: string;
-        success: string;
-        warning: string;
-        dark: string;
-        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;
+        brand: {
+            base: string;
+        };
+        alternative: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
     };
     size: {
         xs: string;
@@ -37,35 +29,28 @@ export declare const closeButton: import("tailwind-variants").TVReturnType<{
         lg: string;
     };
 }, {
+    base: string;
     svg: string;
-}, "focus:outline-hidden whitespace-normal disabled:cursor-not-allowed disabled:opacity-50 ms-auto rounded focus:ring-2 inline-flex items-center justify-center shrink-0", {
+}, undefined, {
     color: {
-        brand: string;
-        danger: string;
-        success: string;
-        warning: string;
-        dark: string;
-        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;
+        brand: {
+            base: string;
+        };
+        alternative: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
     };
     size: {
         xs: string;
@@ -74,35 +59,28 @@ export declare const closeButton: import("tailwind-variants").TVReturnType<{
         lg: string;
     };
 }, {
+    base: string;
     svg: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        brand: string;
-        danger: string;
-        success: string;
-        warning: string;
-        dark: string;
-        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;
+        brand: {
+            base: string;
+        };
+        alternative: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
     };
     size: {
         xs: string;
@@ -111,5 +89,6 @@ export declare const closeButton: import("tailwind-variants").TVReturnType<{
         lg: string;
     };
 }, {
+    base: string;
     svg: string;
-}, "focus:outline-hidden whitespace-normal disabled:cursor-not-allowed disabled:opacity-50 ms-auto rounded focus:ring-2 inline-flex items-center justify-center shrink-0", unknown, unknown, undefined>>;
+}, undefined, unknown, unknown, undefined>>;

package/dist/utils/theme.js

@@ -1,35 +1,17 @@
 import { tv } from "tailwind-variants";
 export const closeButton = tv({
-    base: "focus:outline-hidden whitespace-normal disabled:cursor-not-allowed disabled:opacity-50 ms-auto rounded focus:ring-2 inline-flex items-center justify-center shrink-0",
+    slots: {
+        base: "focus:outline-hidden whitespace-normal disabled:cursor-not-allowed disabled:opacity-50 ms-auto rounded focus:ring-2 inline-flex items-center justify-center shrink-0",
+        svg: ""
+    },
     variants: {
         color: {
-            brand: "bg-brand-softer text-fg-brand-strong focus:ring-brand-medium hover:bg-brand-medium",
-            danger: "bg-danger-soft text-fg-danger-strong focus:ring-danger-medium hover:bg-danger-medium",
-            success: "bg-success-soft text-fg-success-strong focus:ring-success-medium hover:bg-success-medium",
-            warning: "bg-warning-soft text-fg-warning focus:ring-warning-medium hover:bg-warning-medium",
-            dark: "bg-neutral-secondary-medium text-heading focus:ring-gray hover:bg-neutral-tertiary",
-            // Legacy colors for backward compatibility
-            primary: "text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300",
-            secondary: "text-secondary-500 focus:ring-secondary-400 hover:bg-secondary-200 dark:hover:bg-secondary-800 dark:hover:text-secondary-300",
-            gray: "text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300",
-            red: "text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300",
-            orange: "text-orange-500 focus:ring-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 dark:hover:text-orange-300",
-            amber: "text-amber-500 focus:ring-amber-400 hover:bg-amber-200 dark:hover:bg-amber-800 dark:hover:text-amber-300",
-            yellow: "text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300",
-            lime: "text-lime-500 focus:ring-lime-400 hover:bg-lime-200 dark:hover:bg-lime-800 dark:hover:text-lime-300",
-            green: "text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300",
-            emerald: "text-emerald-500 focus:ring-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 dark:hover:text-emerald-300",
-            teal: "text-teal-500 focus:ring-teal-400 hover:bg-teal-200 dark:hover:bg-teal-800 dark:hover:text-teal-300",
-            cyan: "text-cyan-500 focus:ring-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-800 dark:hover:text-cyan-300",
-            sky: "text-sky-500 focus:ring-sky-400 hover:bg-sky-200 dark:hover:bg-sky-800 dark:hover:text-sky-300",
-            blue: "text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300",
-            indigo: "text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300",
-            violet: "text-violet-500 focus:ring-violet-400 hover:bg-violet-200 dark:hover:bg-violet-800 dark:hover:text-violet-300",
-            purple: "text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300",
-            fuchsia: "text-fuchsia-500 focus:ring-fuchsia-400 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800 dark:hover:text-fuchsia-300",
-            pink: "text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300",
-            rose: "text-rose-500 focus:ring-rose-400 hover:bg-rose-200 dark:hover:bg-rose-800 dark:hover:text-rose-300",
-            none: ""
+            brand: { base: "bg-brand-softer text-fg-brand-strong focus:ring-brand-medium hover:bg-brand-medium" },
+            alternative: { base: "bg-neutral-primary-soft text-fg-brand focus:ring-brand-soft hover:bg-brand-soft" },
+            gray: { base: "bg-neutral-secondary-medium text-heading focus:ring-gray hover:bg-neutral-tertiary" },
+            danger: { base: "bg-danger-soft text-fg-danger-strong focus:ring-danger-medium hover:bg-danger-medium" },
+            success: { base: "bg-success-soft text-fg-success-strong focus:ring-success-medium hover:bg-success-medium" },
+            warning: { base: "bg-warning-soft text-fg-warning focus:ring-warning-medium hover:bg-warning-medium" }
         },
         size: {
             xs: "p-0 h-4 w-4",
@@ -42,9 +24,6 @@ export const closeButton = tv({
         color: "gray",
         size: "md"
     },
-    slots: {
-        svg: ""
-    },
     compoundVariants: [
         {
             size: "xs",
@@ -69,11 +48,6 @@ export const closeButton = tv({
             class: {
                 svg: "w-5 h-5"
             }
-        },
-        {
-            size: ["xs", "sm", "md", "lg"],
-            color: "none",
-            class: "focus:ring-0 rounded-none m-0"
         }
     ]
 });

package/dist/video/Video.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { VideoProps } from "../types";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, type = "video/mp4", trackSrc, src, srclang = "en", label = "english_captions", class: classname, ...restProps }: VideoProps = $props();
 
@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1957)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1969)
 ## Props
 @prop children
 @prop type = "video/mp4"

package/dist/video/Video.svelte.d.ts

@@ -2,7 +2,7 @@ import type { VideoProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1957)
+ * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1969)
  * ## Props
  * @prop children
  * @prop type = "video/mp4"