@pajohns/flowbite-svelte 0.1.0

package/dist/clipboard-manager/theme.js

@@ -0,0 +1,73 @@
+import { tv } from "tailwind-variants";
+export const clipboardManager = tv({
+    slots: {
+        base: "relative max-w-2xl mx-auto p-4 space-y-4",
+        // Input section
+        inputSection: "space-y-2",
+        inputWrapper: "flex gap-2",
+        input: "flex-1 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 dark:text-white",
+        // Search section
+        searchWrapper: "flex gap-2",
+        searchContainer: "relative flex-1",
+        searchInput: "w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 pl-9 pr-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 dark:text-white",
+        searchIcon: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400",
+        // Items list
+        itemsList: "space-y-2 max-h-[500px] overflow-y-auto",
+        // Empty state
+        emptyState: "text-center py-8",
+        emptyIcon: "w-12 h-12 mx-auto text-gray-300 dark:text-gray-600 mb-3",
+        emptyText: "text-sm text-gray-500 dark:text-gray-400",
+        emptySubtext: "text-xs text-gray-400 dark:text-gray-500 mt-1",
+        // Item
+        item: "group flex items-start gap-3 rounded-lg border border-gray-200 dark:border-gray-700 p-3 transition hover:bg-gray-50 dark:hover:bg-gray-800/50",
+        itemContent: "flex-1 min-w-0",
+        itemHeader: "flex items-center gap-2 mb-1",
+        itemTimestamp: "text-xs text-gray-500 dark:text-gray-400",
+        itemText: "text-sm text-gray-900 dark:text-gray-100 break-words line-clamp-2",
+        // Actions
+        itemActions: "flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
+        actionButton: "p-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition flex items-center justify-center",
+        actionIcon: "w-4 h-4 flex-shrink-0",
+        pinButton: "p-1.5 rounded transition",
+        deleteButton: "p-1.5 rounded text-red-500 hover:bg-red-100 dark:hover:bg-red-900/20 transition",
+        // Toast
+        toastContainer: "fixed top-4 left-1/2 -translate-x-1/2 z-50 animate-[slideIn_0.2s_ease-out]",
+        toast: "flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg",
+        toastIcon: "w-5 h-5",
+        toastText: "text-sm font-medium",
+        // buttons
+        addToClipboard: "whitespace-nowrap rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50",
+        clearAll: "rounded bg-red-600 px-4 py-2 text-white hover:bg-red-700",
+        // Selection bubble menu
+        selectionMenu: "selection-menu fixed z-50 -translate-x-1/2 -translate-y-full",
+        selectionBubble: "mb-2 flex items-center gap-2 rounded-lg bg-gray-900 px-3 py-2 text-white shadow-xl",
+        selectionText: "max-w-[200px] truncate text-xs",
+        selectionButton: "rounded bg-primary-700 px-2 py-1 text-xs font-medium whitespace-nowrap transition hover:bg-primary-500",
+        selectionArrow: "absolute bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-gray-900"
+    },
+    variants: {
+        pinned: {
+            true: {
+                pinButton: "text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/20"
+            },
+            false: {
+                pinButton: "hover:bg-gray-200 dark:hover:bg-gray-700"
+            }
+        },
+        type: {
+            success: {
+                toast: "bg-green-500 text-white"
+            },
+            error: {
+                toast: "bg-red-500 text-white"
+            },
+            info: {
+                toast: "bg-blue-500 text-white"
+            }
+        }
+    },
+    defaultVariants: {
+        pinned: false,
+        type: "success"
+    }
+});

package/dist/command-palette/CommandPalette.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+  import Dialog from "../dialog/Dialog.svelte";
+  import Search from "../forms/search/Search.svelte";
+  import { getTheme } from "../theme/themeUtils";
+  import type { CommandItem, CommandPaletteProps } from "../types";
+  import clsx from "clsx";
+  import { commandPalette } from "./theme";
+
+  const styles = commandPalette();
+
+  let {
+    open = $bindable(false),
+    items = [],
+    placeholder = "Type a command or search keywords ...",
+    emptyMessage = "No results found.",
+    shortcutKey = "k",
+    vim = false,
+    "aria-labelledby": ariaLabelledby,
+    class: className,
+    classes,
+    ...restProps
+  }: CommandPaletteProps = $props();
+
+  const theme = $derived(getTheme("commandPalette"));
+
+  let search = $state("");
+  let selectedIndex = $state(0);
+  let containerElement = $state<HTMLDialogElement>();
+  let gid = $props.id();
+  let ulId = "command-palette-options-" + gid;
+
+  const filteredItems = $derived.by(() => {
+    const searchLower = search.trim().toLowerCase();
+    if (searchLower === "") return items;
+
+    const check = (x?: string) => x?.toLowerCase().includes(searchLower);
+    return items.filter((item) => check(item.label) || check(item.description) || item.keywords?.some(check));
+  });
+
+  $effect(() => {
+    if (filteredItems.length > 0 && selectedIndex >= filteredItems.length) {
+      selectedIndex = Math.max(filteredItems.length - 1, 0);
+    }
+  });
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!open) return;
+
+    if (handleGlobalKeydown(e)) return;
+
+    switch (e.key) {
+      case "j":
+        if (!vim || e.ctrlKey) break;
+      // falls through
+      case "ArrowDown":
+        e.preventDefault();
+        selectedIndex = Math.max(Math.min(selectedIndex + 1, filteredItems.length - 1), 0);
+        scrollToSelected();
+        break;
+      case "k":
+        if (!vim || e.ctrlKey) break;
+      // falls through
+      case "ArrowUp":
+        e.preventDefault();
+        selectedIndex = Math.max(selectedIndex - 1, 0);
+        scrollToSelected();
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (filteredItems[selectedIndex]) {
+          selectItem(filteredItems[selectedIndex]);
+        }
+        break;
+    }
+  }
+
+  function scrollToSelected() {
+    if (!containerElement) return;
+
+    const listElement = containerElement.querySelector("ul");
+    if (!listElement) return;
+
+    const selectedElement = listElement.querySelector(`#${CSS.escape(filteredItems[selectedIndex]?.id)}`) as HTMLElement;
+    if (!selectedElement) return;
+
+    const listRect = listElement.getBoundingClientRect();
+    const elementRect = selectedElement.getBoundingClientRect();
+
+    if (elementRect.bottom > listRect.bottom) {
+      selectedElement.scrollIntoView({ block: "end", behavior: "auto" });
+    } else if (elementRect.top < listRect.top) {
+      selectedElement.scrollIntoView({ block: "start", behavior: "auto" });
+    }
+  }
+
+  function selectItem(item: CommandItem) {
+    item.onselect();
+    open = false;
+    search = "";
+    selectedIndex = 0;
+  }
+
+  const handleGlobalKeydown = (e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === shortcutKey) {
+      e.preventDefault();
+      open = !open;
+      selectedIndex = 0;
+      return true;
+    }
+  };
+
+  function init(dlg: HTMLDialogElement) {
+    containerElement = dlg;
+  }
+</script>
+
+<svelte:window onkeydown={open ? handleKeydown : handleGlobalKeydown} />
+
+<Dialog bind:open dismissable={false} {@attach init} aria-modal="true" aria-labelledby={ariaLabelledby} tabindex={-1} class={styles.base({ class: clsx(theme?.base, className) })} {...restProps}>
+  <!-- Search Input -->
+  <Search
+    size="md"
+    {placeholder}
+    bind:value={search}
+    classes={{ input: styles.search({ class: clsx(theme?.search, classes?.search) }) }}
+    autofocus
+    role="combobox"
+    aria-expanded="true"
+    aria-controls={ulId}
+    aria-activedescendant={filteredItems[selectedIndex]?.id}
+  />
+
+  <!-- Results -->
+  {#if filteredItems.length > 0}
+    <ul id={ulId} class={styles.list({ class: clsx(theme?.list, classes?.list) })} role="listbox">
+      {#each filteredItems as item, index (item.id)}
+        <li
+          data-index={index}
+          id={item.id}
+          role="option"
+          aria-selected={index === selectedIndex}
+          class={styles.item({ selected: index === selectedIndex, class: clsx(theme?.item, classes?.item) })}
+          onclick={() => selectItem(item)}
+          onkeydown={(e) => e.key === "Enter" && selectItem(item)}
+          onmouseenter={() => (selectedIndex = index)}
+          tabindex="-1"
+        >
+          <div class="flex items-center gap-3">
+            {#if item.icon}
+              <span class="text-lg">{item.icon}</span>
+            {/if}
+            <div class="min-w-0 flex-1">
+              <div class="truncate text-sm font-medium">{item.label}</div>
+              {#if item.description}
+                <div class={styles.itemDescription({ class: clsx(theme?.itemDescription, classes?.itemDescription) })}>
+                  {item.description}
+                </div>
+              {/if}
+            </div>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {:else if search}
+    <div class={styles.empty({ class: clsx(theme?.empty, classes?.empty) })}>
+      <p>{emptyMessage}</p>
+    </div>
+  {/if}
+
+  <!-- Footer -->
+  <div class={styles.footer({ class: clsx(theme?.footer, classes?.footer) })}>
+    <div class="flex items-center gap-4">
+      <kbd class={styles.kbd({ class: clsx(theme?.kbd, classes?.kbd) })}>
+        {#if vim}
+          <span>j/k</span>
+        {:else}
+          <span>↑↓</span>
+        {/if}
+        <span>Navigate</span>
+      </kbd>
+      <kbd class={styles.kbd({ class: clsx(theme?.kbd, classes?.kbd) })}>
+        <span>↵</span>
+        <span>Select</span>
+      </kbd>
+    </div>
+    <kbd class={styles.kbd({ class: clsx(theme?.kbd, classes?.kbd) })}>
+      <span>ESC</span>
+      <span>Close</span>
+    </kbd>
+  </div>
+</Dialog>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2313)
+## Props
+@prop open = $bindable(false)
+@prop items = []
+@prop placeholder = "Type a command or search keywords ..."
+@prop emptyMessage = "No results found."
+@prop shortcutKey = "k"
+@prop vim = false
+@prop "aria-labelledby": ariaLabelledby
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/command-palette/CommandPalette.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { CommandPaletteProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2313)
+ * ## Props
+ * @prop open = $bindable(false)
+ * @prop items = []
+ * @prop placeholder = "Type a command or search keywords ..."
+ * @prop emptyMessage = "No results found."
+ * @prop shortcutKey = "k"
+ * @prop vim = false
+ * @prop "aria-labelledby": ariaLabelledby
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const CommandPalette: import("svelte").Component<CommandPaletteProps, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/command-palette/index.d.ts

@@ -0,0 +1 @@
+export { default as CommandPalette } from "./CommandPalette.svelte";

package/dist/command-palette/index.js

@@ -0,0 +1 @@
+export { default as CommandPalette } from "./CommandPalette.svelte";

package/dist/command-palette/theme.d.ts

@@ -0,0 +1,43 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type CommandPaletteVariants = VariantProps<typeof commandPalette> & Classes<typeof commandPalette>;
+export declare const commandPalette: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {};
+    };
+}, {
+    base: string;
+    search: string;
+    list: string;
+    item: string;
+    itemDescription: string;
+    empty: string;
+    footer: string;
+    kbd: string;
+}, undefined, {
+    selected: {
+        true: {};
+    };
+}, {
+    base: string;
+    search: string;
+    list: string;
+    item: string;
+    itemDescription: string;
+    empty: string;
+    footer: string;
+    kbd: string;
+}, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {};
+    };
+}, {
+    base: string;
+    search: string;
+    list: string;
+    item: string;
+    itemDescription: string;
+    empty: string;
+    footer: string;
+    kbd: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/command-palette/theme.js

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+export const commandPalette = tv({
+    slots: {
+        base: "w-full mx-auto mt-20 max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden transform transition-all",
+        search: "rounded-b-none border-0 py-3",
+        list: "max-h-80 scroll-py-2 overflow-y-auto border-t border-gray-200 dark:border-gray-700",
+        item: "cursor-pointer select-none px-4 py-2 text-sm text-gray-900 dark:text-gray-100 " + "aria-selected:bg-primary-600 aria-selected:text-white",
+        itemDescription: "text-xs truncate text-gray-500 dark:text-gray-400 aria-selected:text-primary-100",
+        empty: "px-4 py-14 text-center border-t border-gray-200 dark:border-gray-700 text-sm text-gray-500 dark:text-gray-400",
+        footer: "flex flex-wrap items-center justify-between gap-2 bg-gray-50 dark:bg-gray-900/50 " + "px-4 py-2.5 text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700",
+        kbd: "inline-flex items-center gap-1 rounded border border-gray-300 dark:border-gray-600 " + "bg-white dark:bg-gray-800 px-2 py-1 font-sans text-xs"
+    },
+    variants: {
+        selected: { true: {} }
+    },
+    defaultVariants: {}
+});

package/dist/context.d.ts

@@ -0,0 +1,50 @@
+import type { AccordionContextType, BottomNavContextType, CarouselContextType, DrawerContextType, DropdownContextType, PaginationContextType, ButtonToggleContextType, ListContextType, ToolbarContextType, ListGroupContextType, ButtonGroupContextType, NavbarState, NavbarBreakpoint, SidebarContextType, TableContextType, TabsContextType } from "./types";
+import type { SplitPaneContext } from "./types";
+import type { ThemeConfig } from "./theme";
+declare const getAccordionContext: () => AccordionContextType | undefined, setAccordionContext: (context: AccordionContextType) => AccordionContextType;
+export { getAccordionContext, setAccordionContext };
+declare const getBottomNavContext: () => BottomNavContextType | undefined, setBottomNavContext: (context: BottomNavContextType) => BottomNavContextType;
+export { getBottomNavContext, setBottomNavContext };
+declare const getCarouselContext: () => CarouselContextType | undefined, setCarouselContext: (context: CarouselContextType) => CarouselContextType;
+export { getCarouselContext, setCarouselContext };
+declare const getDrawerContext: () => DrawerContextType | undefined, setDrawerContext: (context: DrawerContextType) => DrawerContextType;
+export { getDrawerContext, setDrawerContext };
+declare const getDropdownContext: () => DropdownContextType | undefined, setDropdownContext: (context: DropdownContextType) => DropdownContextType;
+export { getDropdownContext, setDropdownContext };
+declare const getPaginationContext: () => PaginationContextType | undefined, setPaginationContext: (context: PaginationContextType) => PaginationContextType;
+export { getPaginationContext, setPaginationContext };
+declare const getButtonToggleContext: () => ButtonToggleContextType | undefined, setButtonToggleContext: (context: ButtonToggleContextType) => ButtonToggleContextType;
+export { getButtonToggleContext, setButtonToggleContext };
+declare const getListContext: () => ListContextType | undefined, setListContext: (context: ListContextType) => ListContextType;
+export { getListContext, setListContext };
+declare const getToolbarContext: () => ToolbarContextType | undefined, setToolbarContext: (context: ToolbarContextType) => ToolbarContextType;
+export { getToolbarContext, setToolbarContext };
+type ThemeContextValue = ThemeConfig | {
+    value?: ThemeConfig;
+};
+declare const getThemeContext: () => ThemeContextValue | undefined, setThemeContext: (context: ThemeContextValue) => ThemeContextValue;
+export { getThemeContext, setThemeContext };
+declare const getListGroupContext: () => ListGroupContextType | undefined, setListGroupContext: (context: ListGroupContextType) => ListGroupContextType;
+export { getListGroupContext, setListGroupContext };
+declare const getButtonGroupContext: () => ButtonGroupContextType | undefined, setButtonGroupContext: (context: ButtonGroupContextType) => ButtonGroupContextType;
+export { getButtonGroupContext, setButtonGroupContext };
+declare const getNavbarStateContext: () => NavbarState | undefined, setNavbarStateContext: (context: NavbarState) => NavbarState;
+export { getNavbarStateContext, setNavbarStateContext };
+declare const getNavbarBreakpointContext: () => NavbarBreakpoint | undefined, setNavbarBreakpointContext: (context: NavbarBreakpoint) => NavbarBreakpoint;
+export { getNavbarBreakpointContext, setNavbarBreakpointContext };
+declare const getSidebarContext: () => SidebarContextType | undefined, setSidebarContext: (context: SidebarContextType) => SidebarContextType;
+export { getSidebarContext, setSidebarContext };
+declare const getActiveUrlContext: () => {
+    value: string;
+} | undefined, setActiveUrlContext: (context: {
+    value: string;
+}) => {
+    value: string;
+};
+export { getActiveUrlContext, setActiveUrlContext };
+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 };

package/dist/context.js

@@ -0,0 +1,71 @@
+import { createContext } from "svelte";
+/**
+ * Helper function to create a context with safe getter that returns undefined instead of throwing
+ * when accessed outside of the context provider.
+ */
+function createSafeContext() {
+    const [getRaw, set] = createContext();
+    function get() {
+        try {
+            return getRaw();
+        }
+        catch {
+            return undefined;
+        }
+    }
+    return [get, set];
+}
+// Accordion
+const [getAccordionContext, setAccordionContext] = createSafeContext();
+export { getAccordionContext, setAccordionContext };
+// BottomNav
+const [getBottomNavContext, setBottomNavContext] = createSafeContext();
+export { getBottomNavContext, setBottomNavContext };
+// Carousel
+const [getCarouselContext, setCarouselContext] = createSafeContext();
+export { getCarouselContext, setCarouselContext };
+// Drawer
+const [getDrawerContext, setDrawerContext] = createSafeContext();
+export { getDrawerContext, setDrawerContext };
+// Dropdown
+const [getDropdownContext, setDropdownContext] = createSafeContext();
+export { getDropdownContext, setDropdownContext };
+// Pagination
+const [getPaginationContext, setPaginationContext] = createSafeContext();
+export { getPaginationContext, setPaginationContext };
+// ButtonToggle
+const [getButtonToggleContext, setButtonToggleContext] = createSafeContext();
+export { getButtonToggleContext, setButtonToggleContext };
+// List
+const [getListContext, setListContext] = createSafeContext();
+export { getListContext, setListContext };
+// Toolbar
+const [getToolbarContext, setToolbarContext] = createSafeContext();
+export { getToolbarContext, setToolbarContext };
+const [getThemeContext, setThemeContext] = createSafeContext();
+export { getThemeContext, setThemeContext };
+// ListGroup
+const [getListGroupContext, setListGroupContext] = createSafeContext();
+export { getListGroupContext, setListGroupContext };
+// ButtonGroup
+const [getButtonGroupContext, setButtonGroupContext] = createSafeContext();
+export { getButtonGroupContext, setButtonGroupContext };
+// Navbar
+const [getNavbarStateContext, setNavbarStateContext] = createSafeContext();
+export { getNavbarStateContext, setNavbarStateContext };
+const [getNavbarBreakpointContext, setNavbarBreakpointContext] = createSafeContext();
+export { getNavbarBreakpointContext, setNavbarBreakpointContext };
+// Sidebar
+const [getSidebarContext, setSidebarContext] = createSafeContext();
+export { getSidebarContext, setSidebarContext };
+const [getActiveUrlContext, setActiveUrlContext] = createSafeContext();
+export { getActiveUrlContext, setActiveUrlContext };
+// Table
+const [getTableContext, setTableContext] = createSafeContext();
+export { getTableContext, setTableContext };
+// SplitPane
+const [getSplitPaneContext, setSplitPaneContext] = createSafeContext();
+export { getSplitPaneContext, setSplitPaneContext };
+// Tabs
+const [getTabsContext, setTabsContext] = createSafeContext();
+export { getTabsContext, setTabsContext };

package/dist/darkmode/DarkMode.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { darkmode } from "./theme";
+  import clsx from "clsx";
+  import type { DarkmodeProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+
+  // const THEME_PREFERENCE_KEY = 'color-theme';
+  let { class: className, lightIcon, darkIcon, size = "md", ariaLabel = "Dark mode", ...restProps }: DarkmodeProps = $props();
+
+  const theme = $derived(getTheme("darkmode"));
+
+  const sizes = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6"
+  };
+
+  const toggleTheme = (ev: MouseEvent) => {
+    const target = ev.target as HTMLElement;
+    const isDark = target.ownerDocument.documentElement.classList.toggle("dark");
+    if (target.ownerDocument === document)
+      // we are NOT in the iFrame
+      localStorage.setItem("THEME_PREFERENCE_KEY", isDark ? "dark" : "light");
+  };
+</script>
+
+<svelte:head>
+  <script lang="ts">
+    if ("THEME_PREFERENCE_KEY" in localStorage) {
+      localStorage.getItem("THEME_PREFERENCE_KEY") === "dark" ? window.document.documentElement.classList.add("dark") : window.document.documentElement.classList.remove("dark");
+    } else {
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) window.document.documentElement.classList.add("dark");
+    }
+  </script>
+</svelte:head>
+
+<button onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={darkmode({ class: clsx(theme, className) })} tabindex={0}>
+  <span class="hidden dark:block">
+    {#if lightIcon}
+      {@render lightIcon()}
+    {:else}
+      <svg role="img" aria-label="Light mode" class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
+    0 100-2H3a1 1 0 000 2h1z"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {/if}
+  </span>
+  <span class="block dark:hidden">
+    {#if darkIcon}
+      {@render darkIcon()}
+    {:else}
+      <svg role="img" aria-label="Dark mode" class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+      </svg>
+    {/if}
+  </span>
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L536)
+## Props
+@prop class: className
+@prop lightIcon
+@prop darkIcon
+@prop size = "md"
+@prop ariaLabel = "Dark mode"
+@prop ...restProps
+-->

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { DarkmodeProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L536)
+ * ## Props
+ * @prop class: className
+ * @prop lightIcon
+ * @prop darkIcon
+ * @prop size = "md"
+ * @prop ariaLabel = "Dark mode"
+ * @prop ...restProps
+ */
+declare const DarkMode: import("svelte").Component<DarkmodeProps, {}, "">;
+type DarkMode = ReturnType<typeof DarkMode>;
+export default DarkMode;

package/dist/darkmode/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DarkMode } from "./DarkMode.svelte";
+export { darkmode } from "./theme";

package/dist/darkmode/index.js

@@ -0,0 +1,2 @@
+export { default as DarkMode } from "./DarkMode.svelte";
+export { darkmode } from "./theme";

package/dist/darkmode/theme.d.ts

@@ -0,0 +1 @@
+export declare const darkmode: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5", unknown, unknown, undefined>>;

package/dist/darkmode/theme.js

@@ -0,0 +1,4 @@
+import { tv } from "tailwind-variants";
+export const darkmode = tv({
+    base: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5"
+});