flowbite-svelte 1.26.0 → 1.27.0

package/dist/clipboard-manager/ClipboardManager.svelte

@@ -0,0 +1,491 @@
+<script lang="ts">
+  import { Badge, Modal } from "..";
+  import { formatDistanceToNow } from "date-fns";
+  import { clipboardManager } from "./theme";
+  import type { ClipboardItem, ClipboardManagerProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+
+  let {
+    items: initialItems = [],
+    placeholder = "Type and save to clipboard",
+    saveLabel = "Save",
+    clearLabel = "Clear All",
+    limit = 20,
+    saveToStorage = true,
+    toastDuration = 2000,
+    filterSensitive = true,
+    maxLength = 10000,
+    enableSelectionMenu = false,
+    selectionTarget = "body",
+    showInput = true,
+    class: className = "",
+    classes,
+    storageKey,
+    children,
+    emptyState,
+    open = $bindable(), // If undefined, renders inline; if defined, renders as modal
+    badgeProps = { color: "blue", class: "text-xs" },
+    modalProps,
+    detectSensitiveData
+  }: ClipboardManagerProps = $props();
+
+  const theme = getTheme("clipboardManager");
+
+  const isModal = $derived(open !== undefined);
+
+  const styles = $derived(clipboardManager());
+
+  let items = $state<ClipboardItem[]>(initialItems);
+  let newText = $state("");
+  let searchQuery = $state("");
+  let toast = $state<{ message: string; type: "success" | "error" | "info" } | null>(null);
+
+  // Selection menu state
+  let selectionMenu = $state<{
+    show: boolean;
+    x: number;
+    y: number;
+    text: string;
+  }>({ show: false, x: 0, y: 0, text: "" });
+
+  const STORAGE_KEY = storageKey ?? "flowbite-clipboard-manager";
+
+  // Save to localStorage whenever items change (but skip the initial load)
+  let isFirstLoad = true;
+
+  $effect(() => {
+    if (saveToStorage && typeof window !== "undefined") {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        try {
+          const parsed = JSON.parse(saved);
+          if (initialItems.length === 0) {
+            items = parsed;
+          } else if (isFirstLoad) {
+            // First load: use initial items and save them
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
+          }
+        } catch (e) {
+          console.error("Failed to parse clipboard data:", e);
+        }
+      } else if (initialItems.length > 0) {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
+      }
+
+      isFirstLoad = false;
+    }
+  });
+  $effect(() => {
+    if (saveToStorage && typeof window !== "undefined") {
+      if (isFirstLoad) {
+        isFirstLoad = false;
+        return;
+      }
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
+    }
+  });
+
+  // --- Selection Menu Logic ---
+  $effect(() => {
+    if (!enableSelectionMenu || typeof window === "undefined") return;
+
+    const targetElements = document.querySelectorAll(selectionTarget);
+    const elements = targetElements.length > 0 ? Array.from(targetElements) : [document.body];
+
+    const handleMouseUp = () => {
+      setTimeout(() => {
+        const selection = window.getSelection();
+        const selectedText = selection?.toString().trim();
+
+        if (selectedText && selectedText.length > 0) {
+          const range = selection!.getRangeAt(0);
+          const rect = range.getBoundingClientRect();
+
+          selectionMenu = {
+            show: true,
+            x: rect.left + rect.width / 2,
+            y: rect.top - 10,
+            text: selectedText
+          };
+        } else {
+          selectionMenu = { show: false, x: 0, y: 0, text: "" };
+        }
+      }, 10);
+    };
+
+    const handleMouseDown = (e: MouseEvent) => {
+      // Close menu if clicking outside
+      if (selectionMenu.show && !(e.target as HTMLElement).closest(".selection-menu")) {
+        selectionMenu = { show: false, x: 0, y: 0, text: "" };
+      }
+    };
+
+    elements.forEach((el) => el.addEventListener("mouseup", handleMouseUp));
+    document.addEventListener("mousedown", handleMouseDown);
+
+    return () => {
+      elements.forEach((el) => el.removeEventListener("mouseup", handleMouseUp));
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  });
+
+  // --- Sensitive data detection ---
+  const defaultContainsSensitiveData = (text: string): boolean => {
+    if (!filterSensitive) return false;
+
+    const ccPattern = /\b\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}\b/;
+    const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d@$!%*?&]{12,}$/;
+    const apiKeyPattern = /\b[A-Za-z0-9_-]{32,}\b/;
+    const credentialPattern = /(password|passwd|pwd|token|secret|api[_-]?key)[\s:=]/i;
+
+    return ccPattern.test(text) || passwordPattern.test(text) || apiKeyPattern.test(text) || credentialPattern.test(text);
+  };
+
+  // Use user-provided function if available, otherwise fallback
+  const containsSensitiveData = (text: string) => {
+    if (typeof detectSensitiveData === "function") {
+      return detectSensitiveData(text);
+    }
+    return defaultContainsSensitiveData(text);
+  };
+
+  // --- Helpers ---
+  const showToast = (message: string, type: "success" | "error" | "info" = "success") => {
+    toast = { message, type };
+    setTimeout(() => (toast = null), toastDuration);
+  };
+
+  const sortItems = (itemsList: ClipboardItem[]): ClipboardItem[] => {
+    const pinned = itemsList.filter((i) => i.pinned).sort((a, b) => b.timestamp - a.timestamp);
+    const unpinned = itemsList.filter((i) => !i.pinned).sort((a, b) => b.timestamp - a.timestamp);
+    return [...pinned, ...unpinned];
+  };
+
+  const filteredItems = $derived(searchQuery.trim() ? items.filter((i) => i.text.toLowerCase().includes(searchQuery.toLowerCase())) : items);
+
+  // --- Save from selection menu ---
+  const saveSelection = async () => {
+    const text = selectionMenu.text;
+    if (!text) return;
+
+    if (text.length > maxLength) {
+      showToast(`Text too long (max ${maxLength} characters)`, "error");
+      selectionMenu = { show: false, x: 0, y: 0, text: "" };
+      return;
+    }
+
+    if (containsSensitiveData(text)) {
+      showToast("Sensitive data detected. Not saved for security.", "error");
+      selectionMenu = { show: false, x: 0, y: 0, text: "" };
+      return;
+    }
+
+    const duplicate = items.find((i) => i.text === text);
+    if (duplicate) {
+      showToast("Already saved", "info");
+      selectionMenu = { show: false, x: 0, y: 0, text: "" };
+      return;
+    }
+
+    const item: ClipboardItem = {
+      id: Date.now(),
+      text,
+      timestamp: Date.now()
+    };
+
+    items = sortItems([item, ...items]).slice(0, limit);
+    showToast("Saved to clipboard manager");
+    selectionMenu = { show: false, x: 0, y: 0, text: "" };
+  };
+
+  // --- Clipboard actions ---
+  const addToClipboard = async () => {
+    const trimmed = newText.trim();
+    if (!trimmed) return;
+
+    if (trimmed.length > maxLength) {
+      showToast(`Text too long (max ${maxLength} characters)`, "error");
+      return;
+    }
+
+    if (containsSensitiveData(trimmed)) {
+      showToast("Sensitive data detected. Not saved for security.", "error");
+      newText = "";
+      return;
+    }
+
+    const duplicate = items.find((i) => i.text === trimmed);
+    if (duplicate) {
+      showToast("This text is already in your clipboard", "info");
+      newText = "";
+      return;
+    }
+
+    const item: ClipboardItem = {
+      id: Date.now(),
+      text: trimmed,
+      timestamp: Date.now()
+    };
+
+    items = sortItems([item, ...items]).slice(0, limit);
+    newText = "";
+
+    try {
+      await navigator.clipboard.writeText(item.text);
+      showToast("Saved and copied to clipboard");
+    } catch (e) {
+      console.error("Clipboard write failed:", e);
+      showToast("Saved but clipboard access denied", "error");
+    }
+  };
+
+  const copyItem = async (item: ClipboardItem) => {
+    try {
+      await navigator.clipboard.writeText(item.text);
+      showToast("Copied to clipboard");
+    } catch (e) {
+      showToast("Clipboard access denied", "error");
+    }
+  };
+
+  const deleteItem = (id: number) => {
+    items = items.filter((i) => i.id !== id);
+    showToast("Deleted");
+  };
+
+  const togglePin = (id: number) => {
+    items = items.map((i) => (i.id === id ? { ...i, pinned: !i.pinned } : i));
+    items = sortItems(items);
+  };
+
+  const clearAll = () => {
+    if (confirm("Clear all clipboard items?")) {
+      items = [];
+      showToast("All items cleared");
+    }
+  };
+
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      addToClipboard();
+    }
+  };
+</script>
+
+{#snippet inputArea()}
+  <div class={styles.inputSection({ class: clsx(theme?.inputSection, classes?.inputSection) })}>
+    <div class={styles.inputWrapper({ class: clsx(theme?.inputWrapper, classes?.inputWrapper) })}>
+      <input type="text" bind:value={newText} onkeydown={handleKeydown} {placeholder} class={styles.input({ class: clsx(theme?.input, classes?.input) })} />
+      <button onclick={addToClipboard} disabled={!newText.trim()} class={styles.addToClipboard({ class: clsx(theme?.addToClipboard, classes?.addToClipboard) })}>
+        {saveLabel}
+      </button>
+    </div>
+
+    <!-- Search and Clear -->
+    {#if items.length > 0}
+      <div class={styles.searchWrapper({ class: clsx(theme?.searchWrapper, classes?.searchWrapper) })}>
+        <div class={styles.searchContainer({ class: clsx(theme?.searchContainer, classes?.searchContainer) })}>
+          <input type="text" bind:value={searchQuery} placeholder="Search clipboard..." class={styles.searchInput({ class: clsx(theme?.searchInput, classes?.searchInput) })} />
+          <svg class={styles.searchIcon({ class: clsx(theme?.searchIcon, classes?.searchIcon) })} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.35-4.35" />
+          </svg>
+        </div>
+        <button onclick={clearAll} class={styles.clearAll({ class: clsx(theme?.clearAll, classes?.clearAll) })}>
+          {clearLabel}
+        </button>
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet searchClear()}
+  <!-- Show only search and clear when input is hidden -->
+  <div class={styles.inputSection({ class: clsx(theme?.inputSection, classes?.inputSection) })}>
+    <div class={styles.searchWrapper({ class: clsx(theme?.searchWrapper, classes?.searchWrapper) })}>
+      <div class={styles.searchContainer({ class: clsx(theme?.searchContainer, classes?.searchContainer) })}>
+        <input type="text" bind:value={searchQuery} placeholder="Search clipboard..." class={styles.searchInput({ class: clsx(theme?.searchInput, classes?.searchInput) })} />
+        <svg class={styles.searchIcon({ class: clsx(theme?.searchIcon, classes?.searchIcon) })} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.35-4.35" />
+        </svg>
+      </div>
+      <button onclick={clearAll} class={styles.clearAll({ class: clsx(theme?.clearAll, classes?.clearAll) })}>
+        {clearLabel}
+      </button>
+    </div>
+  </div>
+{/snippet}
+
+{#snippet itemList()}
+  <!-- Items list -->
+  <div class={styles.itemsList({ class: clsx(theme?.itemsList, classes?.itemsList) })}>
+    {#if filteredItems.length === 0}
+      {#if emptyState}
+        {@render emptyState()}
+      {:else}
+        <div class={styles.emptyState({ class: clsx(theme?.emptyState, classes?.emptyState) })}>
+          {#if items.length === 0}
+            <svg class={styles.emptyIcon({ class: clsx(theme?.emptyIcon, classes?.emptyIcon) })} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+              />
+            </svg>
+            <p class={styles.emptyText({ class: clsx(theme?.emptyText, classes?.emptyText) })}>No clipboard items yet.</p>
+            <p class={styles.emptySubtext({ class: clsx(theme?.emptySubtext, classes?.emptySubtext) })}>
+              {#if enableSelectionMenu}
+                Select any text and click "Save" to add it here
+              {:else}
+                Start typing above to save text
+              {/if}
+            </p>
+          {:else}
+            <p class={styles.emptyText({ class: clsx(theme?.emptyText, classes?.emptyText) })}>No items match "{searchQuery}"</p>
+          {/if}
+        </div>
+      {/if}
+    {:else}
+      {#each filteredItems as item (item.id)}
+        {#if children}
+          {@render children({ item, copyItem, deleteItem, togglePin })}
+        {:else}
+          <div class={styles.item({ class: clsx(theme?.item, classes?.item) })}>
+            <!-- Content -->
+            <div class={styles.itemContent({ class: clsx(theme?.itemContent, classes?.itemContent) })}>
+              <div class={styles.itemHeader({ class: clsx(theme?.itemHeader, classes?.itemHeader) })}>
+                {#if item.pinned}
+                  <Badge {...badgeProps}>Pinned</Badge>
+                {/if}
+                <span class={styles.itemTimestamp({ class: clsx(theme?.itemTimestamp, classes?.itemTimestamp) })}>
+                  {formatDistanceToNow(item.timestamp, { addSuffix: true })}
+                </span>
+              </div>
+              <p class={styles.itemText({ class: clsx(theme?.itemText, classes?.itemText) })}>
+                {item.text}
+              </p>
+            </div>
+
+            <!-- Actions -->
+            <div class={styles.itemActions({ class: clsx(theme?.itemActions, classes?.itemActions) })}>
+              <!-- Copy -->
+              <button onclick={() => copyItem(item)} class={styles.actionButton({ class: clsx(theme?.actionButton, classes?.actionButton) })} aria-label="Copy">
+                <svg
+                  class={styles.actionIcon({ class: clsx(theme?.actionIcon, classes?.actionIcon) })}
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <rect width="8" height="8" x="8" y="8" rx="2" ry="2" />
+                  <path d="M4 12V4a2 2 0 0 1 2-2h8" />
+                </svg>
+              </button>
+
+              <!-- Pin / Unpin -->
+              <button
+                onclick={() => togglePin(item.id)}
+                class={styles.pinButton({ pinned: item.pinned, class: clsx(theme?.pinButton, classes?.pinButton) })}
+                aria-label={item.pinned ? "Unpin" : "Pin"}
+              >
+                <svg
+                  class={styles.actionIcon({ class: clsx(theme?.actionIcon, classes?.actionIcon) })}
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 17v5" />
+                  <path d="M8 13h8l1-5h-10z" />
+                  <path d="M10 3h4v5h-4z" />
+                </svg>
+              </button>
+
+              <!-- Delete -->
+              <button onclick={() => deleteItem(item.id)} class={styles.deleteButton({ class: clsx(theme?.deleteButton, classes?.deleteButton) })} aria-label="Delete">
+                <svg
+                  class={styles.actionIcon({ class: clsx(theme?.actionIcon, classes?.actionIcon) })}
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14Z" />
+                  <path d="M10 11v6M14 11v6" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        {/if}
+      {/each}
+    {/if}
+  </div>
+{/snippet}
+
+{#if isModal}
+  <Modal title="Clipboard Manager" bind:open {...modalProps}>
+    <div class={styles.base({ class: clsx(theme?.base, className) })}>
+      {#if showInput}
+        {@render inputArea()}
+      {:else if items.length > 0}
+        {@render searchClear()}
+      {/if}
+
+      {@render itemList()}
+    </div>
+  </Modal>
+{:else}
+  <div class={styles.base({ class: clsx(theme?.base, className) })}>
+    {#if showInput}
+      {@render inputArea()}
+    {:else if items.length > 0}
+      {@render searchClear()}
+    {/if}
+
+    {@render itemList()}
+  </div>
+{/if}
+
+<!-- Selection Bubble Menu -->
+{#if selectionMenu.show}
+  <div class={styles.selectionMenu({ class: clsx(theme?.selectionMenu, classes?.selectionMenu) })} style="left: {selectionMenu.x}px; top: {selectionMenu.y}px;">
+    <div class={styles.selectionBubble({ class: clsx(theme?.selectionBubble, classes?.selectionBubble) })}>
+      <span class={styles.selectionText({ class: clsx(theme?.selectionText, classes?.selectionText) })}>
+        {selectionMenu.text.slice(0, 50)}{selectionMenu.text.length > 50 ? "..." : ""}
+      </span>
+      <button onclick={saveSelection} class={styles.selectionButton()}>Save to Clipboard</button>
+    </div>
+    <!-- Arrow -->
+    <div class={styles.selectionArrow({ class: clsx(theme?.selectionArrow, classes?.selectionArrow) })}></div>
+  </div>
+{/if}
+
+<!-- Toast notification -->
+{#if toast}
+  <div class={styles.toastContainer({ class: clsx(theme?.toastContainer, classes?.toastContainer) })}>
+    <div class={styles.toast({ type: toast.type, class: clsx(theme?.toast, classes?.toast) })}>
+      <svg class={styles.toastIcon({ class: clsx(theme?.toastIcon, classes?.toastIcon) })} fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        {#if toast.type === "success"}
+          <path d="M5 13l4 4L19 7" />
+        {:else if toast.type === "error"}
+          <circle cx="12" cy="12" r="10" />
+          <path d="M15 9l-6 6M9 9l6 6" />
+        {:else}
+          <circle cx="12" cy="12" r="10" />
+          <path d="M12 16v-4M12 8h.01" />
+        {/if}
+      </svg>
+      <span class={styles.toastText({ class: clsx(theme?.toastText, classes?.toastText) })}>{toast.message}</span>
+    </div>
+  </div>
+{/if}

package/dist/clipboard-manager/ClipboardManager.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ClipboardManagerProps } from "../types";
+declare const ClipboardManager: import("svelte").Component<ClipboardManagerProps, {}, "open">;
+type ClipboardManager = ReturnType<typeof ClipboardManager>;
+export default ClipboardManager;

package/dist/clipboard-manager/index.d.ts

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

package/dist/clipboard-manager/index.js

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

package/dist/clipboard-manager/theme.d.ts

@@ -0,0 +1,169 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type ClipboardManagerVariants = VariantProps<typeof clipboardManager> & Classes<typeof clipboardManager>;
+export declare const clipboardManager: import("tailwind-variants").TVReturnType<{
+    pinned: {
+        true: {
+            pinButton: string;
+        };
+        false: {
+            pinButton: string;
+        };
+    };
+    type: {
+        success: {
+            toast: string;
+        };
+        error: {
+            toast: string;
+        };
+        info: {
+            toast: string;
+        };
+    };
+}, {
+    base: string;
+    inputSection: string;
+    inputWrapper: string;
+    input: string;
+    searchWrapper: string;
+    searchContainer: string;
+    searchInput: string;
+    searchIcon: string;
+    itemsList: string;
+    emptyState: string;
+    emptyIcon: string;
+    emptyText: string;
+    emptySubtext: string;
+    item: string;
+    itemContent: string;
+    itemHeader: string;
+    itemTimestamp: string;
+    itemText: string;
+    itemActions: string;
+    actionButton: string;
+    actionIcon: string;
+    pinButton: string;
+    deleteButton: string;
+    toastContainer: string;
+    toast: string;
+    toastIcon: string;
+    toastText: string;
+    addToClipboard: string;
+    clearAll: string;
+    selectionMenu: string;
+    selectionBubble: string;
+    selectionText: string;
+    selectionButton: string;
+    selectionArrow: string;
+}, undefined, {
+    pinned: {
+        true: {
+            pinButton: string;
+        };
+        false: {
+            pinButton: string;
+        };
+    };
+    type: {
+        success: {
+            toast: string;
+        };
+        error: {
+            toast: string;
+        };
+        info: {
+            toast: string;
+        };
+    };
+}, {
+    base: string;
+    inputSection: string;
+    inputWrapper: string;
+    input: string;
+    searchWrapper: string;
+    searchContainer: string;
+    searchInput: string;
+    searchIcon: string;
+    itemsList: string;
+    emptyState: string;
+    emptyIcon: string;
+    emptyText: string;
+    emptySubtext: string;
+    item: string;
+    itemContent: string;
+    itemHeader: string;
+    itemTimestamp: string;
+    itemText: string;
+    itemActions: string;
+    actionButton: string;
+    actionIcon: string;
+    pinButton: string;
+    deleteButton: string;
+    toastContainer: string;
+    toast: string;
+    toastIcon: string;
+    toastText: string;
+    addToClipboard: string;
+    clearAll: string;
+    selectionMenu: string;
+    selectionBubble: string;
+    selectionText: string;
+    selectionButton: string;
+    selectionArrow: string;
+}, import("tailwind-variants").TVReturnType<{
+    pinned: {
+        true: {
+            pinButton: string;
+        };
+        false: {
+            pinButton: string;
+        };
+    };
+    type: {
+        success: {
+            toast: string;
+        };
+        error: {
+            toast: string;
+        };
+        info: {
+            toast: string;
+        };
+    };
+}, {
+    base: string;
+    inputSection: string;
+    inputWrapper: string;
+    input: string;
+    searchWrapper: string;
+    searchContainer: string;
+    searchInput: string;
+    searchIcon: string;
+    itemsList: string;
+    emptyState: string;
+    emptyIcon: string;
+    emptyText: string;
+    emptySubtext: string;
+    item: string;
+    itemContent: string;
+    itemHeader: string;
+    itemTimestamp: string;
+    itemText: string;
+    itemActions: string;
+    actionButton: string;
+    actionIcon: string;
+    pinButton: string;
+    deleteButton: string;
+    toastContainer: string;
+    toast: string;
+    toastIcon: string;
+    toastText: string;
+    addToClipboard: string;
+    clearAll: string;
+    selectionMenu: string;
+    selectionBubble: string;
+    selectionText: string;
+    selectionButton: string;
+    selectionArrow: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -194,7 +194,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2191)
+[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2192)
 ## Props
 @prop open = $bindable(false)
 @prop items = []

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

@@ -2,7 +2,7 @@ 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#L2191)
+ * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2192)
  * ## Props
  * @prop open = $bindable(false)
  * @prop items = []

package/dist/index.d.ts

@@ -78,10 +78,11 @@ export * from "./typography/span";
 export * from "./video";
 export * from "./utils";
 export * from "./types";
+export * from "./clipboard-manager";
 export * from "./command-palette";
-export * from "./virtuallist";
 export * from "./kanban";
+export * from "./scroll-spy";
 export * from "./split-pane";
 export * from "./tour";
-export * from "./scroll-spy";
+export * from "./virtuallist";
 export * from "./virtual-masonry";

package/dist/index.js

@@ -84,10 +84,11 @@ export * from "./video";
 export * from "./utils";
 export * from "./types";
 // extend
+export * from "./clipboard-manager";
 export * from "./command-palette";
-export * from "./virtuallist";
 export * from "./kanban";
+export * from "./scroll-spy";
 export * from "./split-pane";
 export * from "./tour";
-export * from "./scroll-spy";
+export * from "./virtuallist";
 export * from "./virtual-masonry";

package/dist/kanban/KanbanBoard.svelte

@@ -9,6 +9,7 @@
     columns = $bindable([]),
     onMove = (_card: KanbanCardType, _from: KanbanColumnType, _to: KanbanColumnType) => {},
     onAddCard = (_col: KanbanColumnType) => {},
+    cardProps,
     class: className,
     classes,
     ...restProps
@@ -88,7 +89,7 @@
 
       <div class={styles.cardList({ class: clsx(theme?.cardList, classes?.cardList) })} role="list" aria-label={`${col.title} cards`}>
         {#each col.cards as card (card.id)}
-          <KanbanCard {card} {classes} isDragging={draggedCard?.id === card.id} onDragStart={() => handleDragStart(card, col.id)} onDragEnd={handleDragEnd} />
+          <KanbanCard {card} {classes} {...cardProps} isDragging={draggedCard?.id === card.id} onDragStart={() => handleDragStart(card, col.id)} onDragEnd={handleDragEnd} />
         {/each}
       </div>
 

package/dist/kanban/KanbanCard.svelte

@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2120)
+[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2121)
 ## Props
 @prop card
 @prop isDragging = false

package/dist/kanban/KanbanCard.svelte.d.ts

@@ -2,7 +2,7 @@ import type { KanbanCardProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2120)
+ * [KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2121)
  * ## Props
  * @prop card
  * @prop isDragging = false

package/dist/kanban/theme.js

@@ -3,14 +3,14 @@ export const kanbanBoard = tv({
     slots: {
         container: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4 p-2 md:p-4",
         column: "w-full rounded-xl shadow-sm p-3 md:p-4 flex flex-col bg-surface-elevated text-surface-foreground transition-colors",
-        columnTitle: "text-sm md:text-base font-semibold mb-2 md:mb-3",
+        columnTitle: "text-sm md:text-base font-semibold mb-2 md:mb-3 dark:text-white",
         cardList: "flex flex-col gap-2 flex-1 min-h-[60px]",
         card: "bg-surface text-surface-foreground rounded-lg p-2.5 md:p-3 shadow-sm cursor-grab active:cursor-grabbing transition-all hover:bg-surface-hover hover:shadow-md",
         cardTitle: "font-medium text-sm md:text-base",
         cardDescription: "text-xs md:text-sm text-muted mt-1",
         cardTags: "flex flex-wrap gap-1 mt-2",
         cardTag: "text-[10px] md:text-xs bg-primary/10 text-primary px-1.5 md:px-2 py-0.5 rounded-full",
-        addButton: "mt-2 md:mt-3 w-full bg-primary text-primary-foreground rounded-lg py-1.5 text-xs md:text-sm font-medium hover:bg-primary/90 transition-colors focus:ring-2 focus:ring-primary focus:ring-offset-2"
+        addButton: "mt-2 md:mt-3 w-full bg-primary text-primary-foreground rounded-lg py-1.5 text-xs md:text-sm dark:text-primary-500 font-medium hover:bg-primary/90 transition-colors focus:ring-2 focus:ring-primary focus:ring-offset-2"
     },
     variants: {
         isDragOver: {
@@ -27,11 +27,11 @@ export const kanbanBoard = tv({
 });
 export const kanbanCard = tv({
     slots: {
-        card: "bg-surface text-surface-foreground rounded-lg p-2.5 md:p-3 shadow-sm cursor-grab active:cursor-grabbing transition-all hover:bg-surface-hover hover:shadow-md",
-        cardTitle: "font-medium text-sm md:text-base",
-        cardDescription: "text-xs md:text-sm text-muted mt-1",
-        cardTags: "flex flex-wrap gap-1 mt-2",
-        cardTag: "text-[10px] md:text-xs bg-primary/10 text-primary px-1.5 md:px-2 py-0.5 rounded-full"
+        card: "bg-surface text-surface-foreground rounded-lg p-2.5 md:p-3 shadow-sm shadow-black/20 dark:shadow-white/10 cursor-grab active:cursor-grabbing transition-all hover:bg-surface-hover hover:shadow-md",
+        cardTitle: "font-medium text-sm md:text-base dark:text-white",
+        cardDescription: "text-xs md:text-sm text-muted mt-1 dark:text-white",
+        cardTags: "flex flex-wrap gap-1 mt-2 dark:text-white",
+        cardTag: "text-[10px] md:text-xs bg-primary/10 text-primary px-1.5 md:px-2 py-0.5 rounded-full dark:text-white"
     },
     variants: {
         isDragging: {

package/dist/scroll-spy/ScrollSpy.svelte

@@ -255,7 +255,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2206)
+[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2207)
 ## Props
 @prop items
 @prop position = "top"

package/dist/scroll-spy/ScrollSpy.svelte.d.ts

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

package/dist/split-pane/Divider.svelte

@@ -37,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2149)
+[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2150)
 ## Props
 @prop direction
 @prop index

package/dist/split-pane/Divider.svelte.d.ts

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

package/dist/split-pane/Pane.svelte

@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2143)
+[PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2144)
 ## Props
 @prop children
 @prop class: className = ""

package/dist/split-pane/Pane.svelte.d.ts

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

package/dist/split-pane/SplitPane.svelte

@@ -410,7 +410,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2129)
+[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2130)
 ## Props
 @prop direction = "horizontal"
 @prop minSize = 100

package/dist/split-pane/SplitPane.svelte.d.ts

@@ -15,7 +15,7 @@ import type { SplitPaneProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2129)
+ * [SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2130)
  * ## Props
  * @prop direction = "horizontal"
  * @prop minSize = 100

package/dist/theme/themes.d.ts

@@ -31,7 +31,6 @@ export { sidebar, sidebarBrand, sidebarButton, sidebarCta, sidebarDropdownWrappe
 export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "../skeleton";
 export { speedDial, speedDialButton } from "../speed-dial";
 export { spinner } from "../spinner";
-export { stepIndicator } from "../step-indicator";
 export { stepper, progressStepper, verticalStepper, detailedStepper, breadcrumbStepper, timelineStepper } from "../stepper";
 export { table, tableBodyCell, tableBodyRow, tableHead, tableHeadCell, tableSearch } from "../table";
 export { tabs, tabItem } from "../tabs";
@@ -39,7 +38,6 @@ export { timeline, activity, activityItem, group, groupItem, timelineItem } from
 export { toast } from "../toast";
 export { toolbar, toolbarButton, toolbarGroup } from "../toolbar";
 export { tooltip } from "../tooltip";
-export { buttonToggle, buttonToggleGroup } from "../forms/button-toggle";
 export { checkbox, checkboxButton } from "../forms/checkbox";
 export { dropzone } from "../forms/dropzone";
 export { fileupload } from "../forms/fileupload";
@@ -52,7 +50,6 @@ export { radio, radioButton } from "../forms/radio";
 export { range } from "../forms/range";
 export { search } from "../forms/search";
 export { select, multiSelect } from "../forms/select";
-export { tags } from "../forms/tags";
 export { textarea } from "../forms/textarea";
 export { timepicker } from "../forms/timepicker";
 export { toggle } from "../forms/toggle";
@@ -68,10 +65,14 @@ 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 { virtualList } from "../virtuallist";
 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 { scrollspy } from "../scroll-spy/theme";
+export { virtualList } from "../virtuallist";
 export { virtualMasonry } from "../virtual-masonry/theme";

package/dist/theme/themes.js

@@ -32,7 +32,6 @@ export { sidebar, sidebarBrand, sidebarButton, sidebarCta, sidebarDropdownWrappe
 export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "../skeleton";
 export { speedDial, speedDialButton } from "../speed-dial";
 export { spinner } from "../spinner";
-export { stepIndicator } from "../step-indicator";
 export { stepper, progressStepper, verticalStepper, detailedStepper, breadcrumbStepper, timelineStepper } from "../stepper";
 export { table, tableBodyCell, tableBodyRow, tableHead, tableHeadCell, tableSearch } from "../table";
 export { tabs, tabItem } from "../tabs";
@@ -43,8 +42,6 @@ export { tooltip } from "../tooltip";
 // export {utils} from "../utils";
 // export {} from "../video";
 // forms
-// export {addon} from "../forms/input-addon";
-export { buttonToggle, buttonToggleGroup } from "../forms/button-toggle";
 export { checkbox, checkboxButton } from "../forms/checkbox";
 export { dropzone } from "../forms/dropzone";
 export { fileupload } from "../forms/fileupload";
@@ -57,7 +54,6 @@ export { radio, radioButton } from "../forms/radio";
 export { range } from "../forms/range";
 export { search } from "../forms/search";
 export { select, multiSelect } from "../forms/select";
-export { tags } from "../forms/tags";
 export { textarea } from "../forms/textarea";
 export { timepicker } from "../forms/timepicker";
 export { toggle } from "../forms/toggle";
@@ -75,10 +71,14 @@ 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 { virtualList } from "../virtuallist";
 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 { scrollspy } from "../scroll-spy/theme";
+export { virtualList } from "../virtuallist";
 export { virtualMasonry } from "../virtual-masonry/theme";

package/dist/types.d.ts

@@ -1785,6 +1785,7 @@ export interface KanbanBoardProps extends KanbanBoardVariants, HTMLAttributes<HT
     columns?: KanbanColumnType[];
     onMove?: (card: KanbanCardType, from: KanbanColumnType, to: KanbanColumnType) => void;
     onAddCard?: (col: KanbanColumnType) => void;
+    cardProps?: Partial<Omit<KanbanCardProps, "card" | "isDragging" | "onDragStart" | "onDragEnd">>;
     class?: ClassValue | null;
 }
 export interface KanbanCardProps extends KanbanCardVariants, HTMLAttributes<HTMLElement> {
@@ -1805,11 +1806,11 @@ export interface SplitPaneProps {
     initialSizes?: number[];
     onResize?: (sizes: number[]) => void;
     children: Snippet;
-    class?: string;
+    class?: ClassValue | null;
 }
 export interface PaneProps {
     children?: Snippet;
-    class?: string;
+    class?: ClassValue | null;
     style?: string;
 }
 export interface DividerProps {
@@ -1819,7 +1820,7 @@ export interface DividerProps {
     onTouchStart: (e: TouchEvent, index: number) => void;
     onKeyDown: (e: KeyboardEvent, index: number) => void;
     isDragging: boolean;
-    class?: string;
+    class?: ClassValue | null;
     currentSize: number;
 }
 export type TourStep = {
@@ -1898,3 +1899,37 @@ export interface VirtualMasonryProps<T = unknown> extends VirtualMasonryVariants
     ariaLabel?: string;
     class?: ClassValue | null;
 }
+import type { ClipboardManagerVariants } from "./clipboard-manager/theme";
+export interface ClipboardItem {
+    id: number;
+    text: string;
+    pinned?: boolean;
+    timestamp: number;
+}
+export interface ClipboardManagerProps extends ClipboardManagerVariants {
+    children?: Snippet<[{
+        item: ClipboardItem;
+        copyItem: (item: ClipboardItem) => Promise<void>;
+        deleteItem: (id: number) => void;
+        togglePin: (id: number) => void;
+    }]>;
+    items?: ClipboardItem[];
+    placeholder?: string;
+    saveLabel?: string;
+    clearLabel?: string;
+    limit?: number;
+    saveToStorage?: boolean;
+    class?: ClassValue | null;
+    toastDuration?: number;
+    filterSensitive?: boolean;
+    maxLength?: number;
+    enableSelectionMenu?: boolean;
+    selectionTarget?: string;
+    showInput?: boolean;
+    emptyState?: Snippet;
+    storageKey?: string;
+    open?: boolean;
+    badgeProps?: Omit<BadgeProps, "children">;
+    modalProps?: ModalProps;
+    detectSensitiveData?: (text: string) => boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -249,6 +249,10 @@
       "types": "./dist/clipboard/Clipboard.svelte.d.ts",
       "svelte": "./dist/clipboard/Clipboard.svelte"
     },
+    "./ClipboardManager.svelte": {
+      "types": "./dist/clipboard-manager/ClipboardManager.svelte.d.ts",
+      "svelte": "./dist/clipboard-manager/ClipboardManager.svelte"
+    },
     "./CommandPalette.svelte": {
       "types": "./dist/command-palette/CommandPalette.svelte.d.ts",
       "svelte": "./dist/command-palette/CommandPalette.svelte"
@@ -878,6 +882,7 @@
     "package": "svelte-kit sync && svelte-package && publint",
     "test": "npm run test:e2e && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:ignore": "npx sv check --ignore 'src/routes/testdir,dist,build' --no-tsconfig",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",