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

package/dist/stepper/VerticalStepper.svelte

@@ -4,7 +4,7 @@
   import { verticalStepper } from "./theme";
   import type { VerticalStepperProps } from "../types";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { steps = [], liClass, class: className, classes, current = $bindable(1), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: VerticalStepperProps = $props();
 
@@ -108,7 +108,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1557)
+[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1568)
 ## Props
 @prop steps = []
 @prop liClass

package/dist/stepper/VerticalStepper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { VerticalStepperProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1557)
+ * [VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1568)
  * ## Props
  * @prop steps = []
  * @prop liClass

package/dist/stepper/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 export type StepperVariants = VariantProps<typeof stepper> & Classes<typeof stepper>;
 export type ProgressStepperVariants = VariantProps<typeof progressStepper> & Classes<typeof progressStepper>;
 export type DetailedStepperVariants = VariantProps<typeof detailedStepper> & Classes<typeof detailedStepper>;

package/dist/table/Table.svelte

@@ -5,7 +5,7 @@
   import TableBody from "./TableBody.svelte";
   import clsx from "clsx";
   import type { TableProps, TableContextType } from "../types";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, footerSlot, captionSlot, items, striped, hoverable, border = true, shadow, color = "default", class: className, classes, ...restProps }: TableProps = $props();
 
@@ -57,7 +57,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1629)
+[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1640)
 ## Props
 @prop children
 @prop footerSlot

package/dist/table/Table.svelte.d.ts

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

package/dist/table/TableBody.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1660)
+[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1671)
 ## Props
 @prop children
 @prop bodyItems

package/dist/table/TableBody.svelte.d.ts

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

package/dist/table/TableBodyCell.svelte

@@ -2,7 +2,7 @@
   import clsx from "clsx";
   import { tableBodyCell } from "./theme";
   import type { TableBodyCellProps } from "../types";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, class: className, colspan, onclick, ...restProps }: TableBodyCellProps = $props();
 
@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1649)
+[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1660)
 ## Props
 @prop children
 @prop class: className

package/dist/table/TableBodyCell.svelte.d.ts

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

package/dist/table/TableBodyRow.svelte

@@ -3,7 +3,7 @@
   import { tableBodyRow } from "./theme";
   import type { TableBodyRowProps } from "../types";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, class: className, color, striped, hoverable, border, ...restProps }: TableBodyRowProps = $props();
 
@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1641)
+[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1652)
 ## Props
 @prop children
 @prop class: className

package/dist/table/TableBodyRow.svelte.d.ts

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

package/dist/table/TableHead.svelte

@@ -4,7 +4,7 @@
   import { tableHead } from "./theme";
   import type { TableHeadProps, HeadItemType } from "../types";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, headerSlot, color, striped, border, class: className, headItems, defaultRow = true, ...restProps }: TableHeadProps = $props();
 
@@ -53,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1617)
+[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1628)
 ## Props
 @prop children
 @prop headerSlot

package/dist/table/TableHead.svelte.d.ts

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

package/dist/table/TableHeadCell.svelte

@@ -2,7 +2,7 @@
   import clsx from "clsx";
   import { tableHeadCell } from "./theme";
   import type { TableHeadCellProps } from "../types";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, class: className, ...restProps }: TableHeadCellProps = $props();
 
@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1665)
+[TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1676)
 ## Props
 @prop children
 @prop class: className

package/dist/table/TableHeadCell.svelte.d.ts

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

package/dist/table/TableSearch.svelte

@@ -3,7 +3,7 @@
   import type { TableSearchProps, TableContextType } from "../types";
   import clsx from "clsx";
   import { tableSearch } from "./theme";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let {
     children,
@@ -73,7 +73,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1680)
+[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1691)
 ## Props
 @prop children
 @prop header

package/dist/table/TableSearch.svelte.d.ts

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

package/dist/table/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 export type TableVariants = VariantProps<typeof table> & Classes<typeof table>;
 export type TableSearchVariants = Omit<VariantProps<typeof tableSearch>, "color"> & Classes<typeof tableSearch>;
 export type TableSearchColor = "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink" | "custom" | undefined;

package/dist/tabs/TabItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { SelectedTab, TabCtxType, TabitemProps } from "../types";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
   import { tabItem, tabs } from "./theme";
@@ -69,7 +69,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1700)
+[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1711)
 ## Props
 @prop children
 @prop titleSlot

package/dist/tabs/TabItem.svelte.d.ts

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

package/dist/tabs/Tabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import type { SelectedTab, TabCtxType, TabsProps } from "../types";
   import { createSingleSelectionContext, useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
@@ -90,7 +90,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1693)
+[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1704)
 ## Props
 @prop children
 @prop selected = $bindable()

package/dist/tabs/Tabs.svelte.d.ts

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

package/dist/tabs/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 export type TabsVaraints = VariantProps<typeof tabs> & Classes<typeof tabs>;
 export type TabItemVariants = VariantProps<typeof tabItem> & Classes<typeof tabItem>;
 export declare const tabs: import("tailwind-variants").TVReturnType<{

package/dist/{theme → theme-provider}/themes.d.ts

@@ -66,14 +66,15 @@ export { mark } from "../typography/mark";
 export { paragraph } from "../typography/paragraph";
 export { secondary } from "../typography/secondary";
 export { span } from "../typography/span";
-export { buttonToggle, buttonToggleGroup } from "../forms/button-toggle";
-export { clipboardManager } from "../clipboard-manager/theme";
-export { commandPalette } from "../command-palette/theme";
-export { kanbanBoard, kanbanCard } from "../kanban/theme";
-export { scrollspy } from "../scroll-spy/theme";
-export { splitpane, pane, divider, dividerHitArea } from "../split-pane/theme";
-export { stepIndicator } from "../step-indicator";
-export { tags } from "../forms/tags";
-export { tour } from "../tour/theme";
-export { virtualList } from "../virtuallist";
-export { virtualMasonry } from "../virtual-masonry/theme";
+export { buttonToggle, buttonToggleGroup } from "../extend/button-toggle";
+export { clipboardManager } from "../extend/clipboard-manager/theme";
+export { commandPalette } from "../extend/command-palette/theme";
+export { kanbanBoard, kanbanCard } from "../extend/kanban/theme";
+export { scrollspy } from "../extend/scroll-spy/theme";
+export { splitpane, pane, divider, dividerHitArea } from "../extend/split-pane/theme";
+export { stepIndicator } from "../extend/step-indicator";
+export { tags } from "../extend/tags";
+export { tour } from "../extend/tour/theme";
+export { virtualList } from "../extend/virtuallist";
+export { virtualMasonry } from "../extend/virtual-masonry/theme";
+export { closeButton } from "../utils/theme";

package/dist/{theme → theme-provider}/themes.js

@@ -72,14 +72,16 @@ export { paragraph } from "../typography/paragraph";
 export { secondary } from "../typography/secondary";
 export { span } from "../typography/span";
 // extend
-export { buttonToggle, buttonToggleGroup } from "../forms/button-toggle";
-export { clipboardManager } from "../clipboard-manager/theme";
-export { commandPalette } from "../command-palette/theme";
-export { kanbanBoard, kanbanCard } from "../kanban/theme";
-export { scrollspy } from "../scroll-spy/theme";
-export { splitpane, pane, divider, dividerHitArea } from "../split-pane/theme";
-export { stepIndicator } from "../step-indicator";
-export { tags } from "../forms/tags";
-export { tour } from "../tour/theme";
-export { virtualList } from "../virtuallist";
-export { virtualMasonry } from "../virtual-masonry/theme";
+export { buttonToggle, buttonToggleGroup } from "../extend/button-toggle";
+export { clipboardManager } from "../extend/clipboard-manager/theme";
+export { commandPalette } from "../extend/command-palette/theme";
+export { kanbanBoard, kanbanCard } from "../extend/kanban/theme";
+export { scrollspy } from "../extend/scroll-spy/theme";
+export { splitpane, pane, divider, dividerHitArea } from "../extend/split-pane/theme";
+export { stepIndicator } from "../extend/step-indicator";
+export { tags } from "../extend/tags";
+export { tour } from "../extend/tour/theme";
+export { virtualList } from "../extend/virtuallist";
+export { virtualMasonry } from "../extend/virtual-masonry/theme";
+// utils
+export { closeButton } from "../utils/theme";

package/dist/theme-selector/ThemeIcon.svelte

@@ -0,0 +1,9 @@
+<svg class="h-4.5 w-4.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M12 7h.01m3.486 1.513h.01m-6.978 0h.01M6.99 12H7m9 4h2.706a1.957 1.957 0 0 0 1.883-1.325A9 9 0 1 0 3.043 12.89 9.1 9.1 0 0 0 8.2 20.1a8.62 8.62 0 0 0 3.769.9 2.013 2.013 0 0 0 2.03-2v-.857A2.036 2.036 0 0 1 16 16Z"
+  />
+</svg>

package/dist/theme-selector/ThemeIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ThemeIcon;
+type ThemeIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ThemeIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/theme-selector/ThemeSelector.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { getCurrentTheme, getSelectedTheme, themeConfigs, loadTheme } from "./themeStore.svelte";
+  import type { ThemeId } from "./themes";
+  import { onMount } from "svelte";
+  import { Button, Dropdown, DropdownItem } from "..";
+  import ThemeIcon from "./ThemeIcon.svelte";
+
+  let { ...restProps } = $props();
+
+  // Access the reactive state
+  let currentTheme = $derived(getCurrentTheme());
+  let selectedTheme = $derived(getSelectedTheme());
+
+  function handleThemeChange(themeId: ThemeId) {
+    return (e: MouseEvent) => {
+      e.preventDefault();
+      loadTheme(themeId);
+      // Close the dropdown after selecting a theme
+      isOpen = false;
+    };
+  }
+
+  onMount(() => {
+    loadTheme(currentTheme);
+  });
+  let isOpen = $state(false);
+</script>
+
+<Button
+  color="gray"
+  class="gap-2 rounded-sm border-0 px-1 py-1 shadow-none focus:ring-gray-100 dark:focus:ring-gray-700"
+  aria-haspopup="true"
+  aria-expanded={isOpen}
+  aria-label="Select Theme"
+  {...restProps}
+>
+  <ThemeIcon />
+  <span>{selectedTheme?.name ?? "Theme"}</span>
+</Button>
+<Dropdown class="w-52 px-2" bind:isOpen simple>
+  {#each themeConfigs as theme (theme.id)}
+    <DropdownItem
+      onclick={handleThemeChange(theme.id)}
+      class="mb-1 inline-flex w-full items-center justify-between rounded-xl {theme.id === currentTheme ? 'bg-brand-50 dark:bg-brand-900/20' : ''}"
+      role="option"
+      aria-selected={theme.id === currentTheme}
+    >
+      <span class="theme-select-button inline-flex w-full items-center justify-between rounded">{theme.name}</span>
+      <div class="flex items-center rounded-xs">
+        {#each theme.colors as color, index (`${theme.id}-${index}`)}
+          <div class="h-3.5 w-[1.125rem] {color} {index === 0 ? 'rounded-s-xs' : ''} {index === theme.colors.length - 1 ? 'rounded-e-xs' : ''}"></div>
+        {/each}
+      </div>
+    </DropdownItem>
+  {/each}
+</Dropdown>

package/dist/theme-selector/ThemeSelector.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ThemeSelector: import("svelte").Component<Record<string, any>, {}, "">;
+type ThemeSelector = ReturnType<typeof ThemeSelector>;
+export default ThemeSelector;

package/dist/theme-selector/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ThemeSelector } from "./ThemeSelector.svelte";
+export { loadTheme, getCurrentTheme, getSelectedTheme, themeConfigs } from "./themeStore.svelte";
+export type { FlowbiteTheme, ThemeId } from "./themes";
+export * from "./theme";

package/dist/theme-selector/index.js

@@ -0,0 +1,3 @@
+export { default as ThemeSelector } from "./ThemeSelector.svelte";
+export { loadTheme, getCurrentTheme, getSelectedTheme, themeConfigs } from "./themeStore.svelte";
+export * from "./theme";

package/dist/theme-selector/theme.d.ts

@@ -0,0 +1,85 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme-provider/themeUtils";
+export type ThemeSelectorVariants = VariantProps<typeof themeSelector> & Classes<typeof themeSelector>;
+export declare const themeSelector: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+    swatchPosition: {
+        first: {
+            colorSwatch: string;
+        };
+        middle: {
+            colorSwatch: string;
+        };
+        last: {
+            colorSwatch: string;
+        };
+    };
+}, {
+    button: string;
+    dropdown: string;
+    item: string;
+    itemLabel: string;
+    colorSwatchContainer: string;
+    colorSwatch: string;
+}, undefined, {
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+    swatchPosition: {
+        first: {
+            colorSwatch: string;
+        };
+        middle: {
+            colorSwatch: string;
+        };
+        last: {
+            colorSwatch: string;
+        };
+    };
+}, {
+    button: string;
+    dropdown: string;
+    item: string;
+    itemLabel: string;
+    colorSwatchContainer: string;
+    colorSwatch: string;
+}, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+    swatchPosition: {
+        first: {
+            colorSwatch: string;
+        };
+        middle: {
+            colorSwatch: string;
+        };
+        last: {
+            colorSwatch: string;
+        };
+    };
+}, {
+    button: string;
+    dropdown: string;
+    item: string;
+    itemLabel: string;
+    colorSwatchContainer: string;
+    colorSwatch: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/theme-selector/theme.js

@@ -0,0 +1,35 @@
+import { tv } from "tailwind-variants";
+export const themeSelector = tv({
+    slots: {
+        button: "gap-2 rounded-sm border-0 px-1 py-1 shadow-none focus:ring-gray-100 dark:focus:ring-gray-700",
+        dropdown: "w-52 px-2",
+        item: "mb-1 inline-flex w-full items-center justify-between rounded-xl",
+        itemLabel: "theme-select-button inline-flex w-full items-center justify-between rounded",
+        colorSwatchContainer: "flex items-center rounded-xs",
+        colorSwatch: "h-3.5 w-[1.125rem]"
+    },
+    variants: {
+        active: {
+            true: {
+                item: "bg-brand-50 dark:bg-brand-900/20"
+            },
+            false: {
+                item: ""
+            }
+        },
+        swatchPosition: {
+            first: {
+                colorSwatch: "rounded-s-xs"
+            },
+            middle: {
+                colorSwatch: ""
+            },
+            last: {
+                colorSwatch: "rounded-e-xs"
+            }
+        }
+    },
+    defaultVariants: {
+        active: false
+    }
+});

package/dist/theme-selector/themeStore.svelte.d.ts

@@ -0,0 +1,6 @@
+import { themeConfigs, type FlowbiteTheme, type ThemeId } from "./themes";
+export declare function loadTheme(themeId: ThemeId): void;
+export declare function getCurrentTheme(): ThemeId;
+export declare function getSelectedTheme(): FlowbiteTheme | undefined;
+export { themeConfigs };
+export type { FlowbiteTheme, ThemeId };