flowbite-svelte 1.9.0 → 1.10.0

package/dist/forms/search/theme.d.ts

@@ -21,7 +21,7 @@ export declare const search: import("tailwind-variants").TVReturnType<{
     icon: string;
     content: string;
     input: string;
-    clearbtn: string;
+    closebutton: string;
 }, undefined, {
     size: {
         sm: {
@@ -43,7 +43,7 @@ export declare const search: import("tailwind-variants").TVReturnType<{
     icon: string;
     content: string;
     input: string;
-    clearbtn: string;
+    closebutton: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -65,5 +65,7 @@ export declare const search: import("tailwind-variants").TVReturnType<{
     icon: string;
     content: string;
     input: string;
-    clearbtn: string;
+    closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
+export type SearchSlots = keyof typeof search.slots;
+export type SearchTheme = Partial<Record<SearchSlots, string>>;

package/dist/forms/search/theme.js

@@ -6,7 +6,7 @@ export const search = tv({
         icon: "text-gray-500 dark:text-gray-400",
         content: "absolute inset-y-0 end-0 flex items-center text-gray-500 dark:text-gray-400",
         input: "block w-full text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
-        clearbtn: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black"
+        closebutton: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black"
     },
     variants: {
         size: {

package/dist/forms/select/MultiSelect.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="T">
   import { Badge, CloseButton, type MultiSelectProps, type SelectOptionType, cn } from "../..";
-  import { multiselect } from "./theme";
+  import { multiselect, type MultiSelectTheme } from ".";
+  import { getTheme } from "../../theme/themeUtils";
 
   // Consider reusing that component - https://svelecte.vercel.app/
 
@@ -23,6 +24,8 @@
     ...restProps
   }: MultiSelectProps<T> = $props();
 
+  const theme = getTheme("multiSelect");
+
   let selectItems = $derived(items.filter((x) => value.includes(x.value)));
   let show: boolean = $state(false);
 
@@ -155,11 +158,11 @@
   {/each}
 </select>
 
-<div {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={cn(base({ size }), className)}>
+<div {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={cn(base({ size }), className, (theme as MultiSelectTheme)?.base)}>
   {#if !selectItems.length}
     <span class="text-gray-400">{placeholder}</span>
   {/if}
-  <span class={select()}>
+  <span class={cn(select(), (theme as MultiSelectTheme)?.select)}>
     {#if selectItems.length}
       {#each selectItems as item (item.name)}
         {#if children}
@@ -174,7 +177,7 @@
   </span>
   <div class="ms-auto flex items-center gap-2">
     {#if selectItems.length}
-      <CloseButton {size} onclick={clearAll} color="none" class={closebutton()} {disabled} />
+      <CloseButton {size} onclick={clearAll} color="none" class={cn(closebutton(), (theme as MultiSelectTheme)?.closebutton)} {disabled} />
     {/if}
 
     <svg class={cn("ms-1 h-3 w-3 cursor-pointer text-gray-800 dark:text-white", disabled && "cursor-not-allowed")} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">

package/dist/forms/select/Select.svelte

@@ -1,10 +1,13 @@
 <script lang="ts" generics="T">
-  import { select as selectCls } from ".";
+  import { select as selectCls, type SelectTheme } from ".";
   import { type SelectProps, CloseButton, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, items, value = $bindable(), elementRef = $bindable(), underline, size = "md", disabled, selectClass, class: className, placeholder = "Choose option ...", clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: SelectProps<T> = $props();
 
-  const { base, select, clearbtn } = $derived(selectCls({ underline, size, disabled }));
+  const theme = getTheme("select");
+
+  const { base, select, closebutton } = $derived(selectCls({ underline, size, disabled }));
 
   const clearAll = () => {
     if (elementRef) {
@@ -15,8 +18,8 @@
   };
 </script>
 
-<div class={cn(base(), className)}>
-  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={cn(select(), selectClass)}>
+<div class={cn(base(), className, (theme as SelectTheme)?.base)}>
+  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={cn(select(), selectClass, (theme as SelectTheme)?.select)}>
     {#if placeholder}
       <option disabled selected value="">{placeholder}</option>
     {/if}
@@ -32,7 +35,7 @@
     {/if}
   </select>
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(clearbtn(), clearableClass)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} {disabled} />
+    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as SelectTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} {disabled} />
   {/if}
 </div>
 <!--

package/dist/forms/select/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Select } from "./Select.svelte";
 export { default as MultiSelect } from "./MultiSelect.svelte";
-export { select } from "./theme";
+export { select, multiselect, type SelectTheme, type MultiSelectTheme } from "./theme";

package/dist/forms/select/index.js

@@ -1,3 +1,3 @@
 export { default as Select } from "./Select.svelte";
 export { default as MultiSelect } from "./MultiSelect.svelte";
-export { select } from "./theme";
+export { select, multiselect } from "./theme";

package/dist/forms/select/theme.d.ts

@@ -29,7 +29,7 @@ export declare const select: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     select: string;
-    clearbtn: string;
+    closebutton: string;
 }, undefined, {
     underline: {
         true: {
@@ -59,7 +59,7 @@ export declare const select: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     select: string;
-    clearbtn: string;
+    closebutton: string;
 }, import("tailwind-variants").TVReturnType<{
     underline: {
         true: {
@@ -89,8 +89,10 @@ export declare const select: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     select: string;
-    clearbtn: string;
+    closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
+export type SelectSlots = keyof typeof select.slots;
+export type SelectTheme = Partial<Record<SelectSlots, string>>;
 export type MultiSelectVariants = VariantProps<typeof multiselect>;
 export declare const multiselect: import("tailwind-variants").TVReturnType<{
     size: {
@@ -189,3 +191,5 @@ export declare const multiselect: import("tailwind-variants").TVReturnType<{
     dropdownitem: string;
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
+export type MultiSelectSlots = keyof typeof multiselect.slots;
+export type MultiSelectTheme = Partial<Record<MultiSelectSlots, string>>;

package/dist/forms/select/theme.js

@@ -3,7 +3,7 @@ export const select = tv({
     slots: {
         base: "relative",
         select: "block w-full rtl:text-right",
-        clearbtn: "absolute right-8 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black"
+        closebutton: "absolute right-8 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black"
     },
     variants: {
         underline: {

package/dist/forms/tags/Tags.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { type TagsProps, CloseButton, cn } from "../..";
-  import { tags } from "./theme";
+  import { tags, type TagsTheme } from "./theme";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { value = $bindable([]), itemClass, spanClass, placeholder = "Enter tags", class: className, closeClass, inputClass, closeBtnSize = "xs", ...restProps }: TagsProps = $props();
 
-  const { base, tag: tagCls, span: spanCls, close, input: inputCls } = $derived(tags());
+  const theme = getTheme("tags");
+
+  const { base, tag: tagCls, span: spanCls, closebutton, input: inputCls } = $derived(tags());
 
   let contents: string = $state("");
 
@@ -33,15 +36,15 @@
   };
 </script>
 
-<div {...restProps} class={cn(base(), className)}>
+<div {...restProps} class={cn(base(), className, (theme as TagsTheme)?.base)}>
   {#each value as tag, index}
-    <div class={cn(tagCls(), itemClass)}>
-      <span class={cn(spanCls(), spanClass)}>
+    <div class={cn(tagCls(), itemClass, (theme as TagsTheme)?.tag)}>
+      <span class={cn(spanCls(), spanClass, (theme as TagsTheme)?.span)}>
         {tag}
       </span>
       <CloseButton
         size={closeBtnSize}
-        class={cn(close(), closeClass)}
+        class={cn(closebutton(), closeClass, (theme as TagsTheme)?.closebutton)}
         onclick={() => {
           deleteField(index);
         }}
@@ -65,7 +68,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L906)
+[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L899)
 ## Props
 @prop value = $bindable([])
 @prop itemClass

package/dist/forms/tags/Tags.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TagsProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L906)
+ * [TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L899)
  * ## Props
  * @prop value = $bindable([])
  * @prop itemClass

package/dist/forms/tags/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Tags } from "./Tags.svelte";
-export { tags } from "./theme";
+export { tags, type TagsTheme } from "./theme";

package/dist/forms/tags/theme.d.ts

@@ -3,9 +3,9 @@ export declare const tags: import("tailwind-variants").TVReturnType<{
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
-            close?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             tag?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            closebutton?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
@@ -13,37 +13,39 @@ export declare const tags: import("tailwind-variants").TVReturnType<{
         [x: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
-            close?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             tag?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            closebutton?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     base: string;
     tag: string;
     span: string;
-    close: string;
+    closebutton: string;
     input: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
-            close?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             tag?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            closebutton?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     base: string;
     tag: string;
     span: string;
-    close: string;
+    closebutton: string;
     input: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     base: string;
     tag: string;
     span: string;
-    close: string;
+    closebutton: string;
     input: string;
 }, undefined, unknown, unknown, undefined>>;
+export type TagsSlots = keyof typeof tags.slots;
+export type TagsTheme = Partial<Record<TagsSlots, string>>;

package/dist/forms/tags/theme.js

@@ -4,7 +4,7 @@ export const tags = tv({
         base: "border bg-gray-50 border-gray-300 rounded-lg flex focus-within:ring-primary-500 focus-within:ring-1 focus-within:border-primary-500 overflow-x-auto scrollbar-hidden",
         tag: "flex items-center rounded-lg bg-gray-100 text-gray-900 border border-gray-300 my-1 ml-1 px-2 text-sm max-w-full min-w-fit",
         span: "items-center",
-        close: "my-auto ml-1",
+        closebutton: "my-auto ml-1",
         input: "block text-sm m-2.5 p-0 bg-transparent border-none outline-none text-gray-900 h-min w-full min-w-fit focus:ring-0 placeholder-gray-400"
     }
 });

package/dist/forms/textarea/Textarea.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
-  import { textarea } from ".";
+  import { textarea, type TextareaTheme } from ".";
   import { type TextareaProps, CloseButton, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { header, footer, addon, value = $bindable(), elementRef = $bindable(), divClass, innerClass, headerClass, footerClass, addonClass, disabled, class: className, cols, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, textareaClass, ...restProps }: TextareaProps = $props();
 
+  const theme = getTheme("textarea");
+
   let hasHeader = $derived(!!header);
   let hasFooter = $derived(!!footer);
   let hasAddon = $derived(!!addon);
   let wrapped: boolean = $derived(hasHeader || hasFooter || hasAddon);
 
-  const { divWrapper, base, wrapper, innerWrapper, headerCls, footerCls, addonCls, clearbtn } = $derived(textarea({ wrapped, hasHeader, hasFooter, cols: !!cols }));
+  const { divWrapper, base, wrapper, innerWrapper, headerCls, footerCls, addonCls, closebutton } = $derived(textarea({ wrapped, hasHeader, hasFooter, cols: !!cols }));
 
   const clearAll = () => {
     if (elementRef) {
@@ -20,33 +23,33 @@
   };
 </script>
 
-<div class={cn(divWrapper(), divClass)}>
+<div class={cn(divWrapper(), divClass, (theme as TextareaTheme)?.divWrapper)}>
   {#if !wrapped}
     <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={cn(wrapper(), className)}></textarea>
   {:else}
-    <div class={cn(wrapper(), className)}>
+    <div class={cn(wrapper(), className, (theme as TextareaTheme)?.wrapper)}>
       {#if header}
-        <div class={cn(headerCls(), headerClass)}>
+        <div class={cn(headerCls(), headerClass, (theme as TextareaTheme)?.headerCls)}>
           {@render header()}
         </div>
       {/if}
-      <div class={cn(innerWrapper(), innerClass)}>
+      <div class={cn(innerWrapper(), innerClass, (theme as TextareaTheme)?.innerWrapper)}>
         {#if addon}
-          <div class={cn(addonCls(), addonClass)}>
+          <div class={cn(addonCls(), addonClass, (theme as TextareaTheme)?.addonCls)}>
             {@render addon()}
           </div>
         {/if}
-        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={cn(base(), textareaClass)}></textarea>
+        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={cn(base(), textareaClass, (theme as TextareaTheme)?.base)}></textarea>
       </div>
       {#if footer}
-        <div class={cn(footerCls(), footerClass)}>
+        <div class={cn(footerCls(), footerClass, (theme as TextareaTheme)?.footerCls)}>
           {@render footer()}
         </div>
       {/if}
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(clearbtn(), clearableClass)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as TextareaTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
   {/if}
 </div>
 
@@ -54,7 +57,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L953)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L946)
 ## Props
 @prop header
 @prop footer

package/dist/forms/textarea/Textarea.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TextareaProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L953)
+ * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L946)
  * ## Props
  * @prop header
  * @prop footer

package/dist/forms/textarea/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Textarea } from "./Textarea.svelte";
-export { textarea } from "./theme";
+export { textarea, type TextareaTheme } from "./theme";

package/dist/forms/textarea/theme.d.ts

@@ -36,7 +36,7 @@ export declare const textarea: import("tailwind-variants").TVReturnType<{
     headerCls: string;
     footerCls: string;
     addonCls: string;
-    clearbtn: string;
+    closebutton: string;
 }, undefined, {
     cols: {
         false: {
@@ -73,7 +73,7 @@ export declare const textarea: import("tailwind-variants").TVReturnType<{
     headerCls: string;
     footerCls: string;
     addonCls: string;
-    clearbtn: string;
+    closebutton: string;
 }, import("tailwind-variants").TVReturnType<{
     cols: {
         false: {
@@ -110,5 +110,7 @@ export declare const textarea: import("tailwind-variants").TVReturnType<{
     headerCls: string;
     footerCls: string;
     addonCls: string;
-    clearbtn: string;
+    closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
+export type TextareaSlots = keyof typeof textarea.slots;
+export type TextareaTheme = Partial<Record<TextareaSlots, string>>;

package/dist/forms/textarea/theme.js

@@ -8,7 +8,7 @@ export const textarea = tv({
         headerCls: "py-2 px-3 border-gray-200 dark:border-gray-500",
         footerCls: "py-2 px-3 border-gray-200 dark:border-gray-500",
         addonCls: "absolute top-2 right-2 z-10",
-        clearbtn: "absolute right-2 top-5 -translate-y-1/2 text-gray-400 hover:text-black"
+        closebutton: "absolute right-2 top-5 -translate-y-1/2 text-gray-400 hover:text-black"
     },
     variants: {
         cols: {