flowbite-svelte 1.20.1 → 1.21.1

package/dist/index.d.ts

@@ -80,3 +80,4 @@ export * from "./utils";
 export * from "./types";
 export * from "./virtuallist";
 export * from "./kanban";
+export * from "./split-pane";

package/dist/index.js

@@ -86,3 +86,4 @@ export * from "./types";
 // extend
 export * from "./virtuallist";
 export * from "./kanban";
+export * from "./split-pane";

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#L2119)
+[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2116)
 ## 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#L2119)
+ * [KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2116)
  * ## Props
  * @prop card
  * @prop isDragging = false

package/dist/mega-menu/MegaMenu.svelte

@@ -14,7 +14,7 @@
   const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, hasExtra: !!extra }));
 </script>
 
-<Popper color={full ? "default" : "dropdown"} arrow={false} bind:isOpen trigger="click" placement="bottom" yOnly={full} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+<Popper arrow={false} bind:isOpen trigger="click" placement="bottom" yOnly={full} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
   <div class={div({ class: clsx(theme?.div, classes?.div) })}>
     <ul class={ul({ class: clsx(theme?.ul, styling.ul) })}>
       {#each items as item, index}

package/dist/mega-menu/theme.js

@@ -1,14 +1,14 @@
 import { tv } from "tailwind-variants";
 export const megamenu = tv({
     slots: {
-        base: "w-fit bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg border border-gray-100 dark:border-gray-600 divide-gray-100 dark:divide-gray-600",
+        base: "w-fit bg-white shadow-md dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg border border-gray-100 dark:border-gray-600 divide-gray-100 dark:divide-gray-600",
         div: "flex flex-col md:flex-row p-4 max-w-(--breakpoint-md) justify-center mx-auto mt-2",
         ul: "grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max grid-cols-2 md:grid-cols-3 text-sm font-medium",
         extra: "md:w-1/3 mt-4 md:mt-0"
     },
     variants: {
         full: {
-            true: { base: "border-y w-full ml-0 rounded-none" }
+            true: { base: "border-y shadow-xs w-full ml-0 rounded-none" }
         },
         hasExtra: {
             true: {}

package/dist/split-pane/Divider.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { DividerProps } from "../types";
+  import { divider, dividerHitArea } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+
+  let { direction, index, onMouseDown, onKeyDown, isDragging, currentSize, class: className = "" }: DividerProps = $props();
+
+  const themePane = getTheme("divider");
+  const themeDividerHitArea = getTheme("dividerHitArea");
+
+  const isHorizontal = $derived(direction === "horizontal");
+  const roundedSize = $derived(Math.round(currentSize));
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  role="separator"
+  tabindex="0"
+  aria-orientation={isHorizontal ? "vertical" : "horizontal"}
+  aria-label={`Resize ${isHorizontal ? "horizontal" : "vertical"} panes`}
+  aria-valuenow={roundedSize}
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-valuetext={`${roundedSize} percent`}
+  class={divider({ direction, isDragging, class: clsx(themePane, className) })}
+  onmousedown={(e) => onMouseDown(e, index)}
+  onkeydown={(e) => onKeyDown(e, index)}
+>
+  <div class={dividerHitArea({ direction, class: clsx(themeDividerHitArea, className) })}></div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2145)
+## Props
+@prop direction
+@prop index
+@prop onMouseDown
+@prop onKeyDown
+@prop isDragging
+@prop currentSize
+@prop class: className = ""
+-->

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

@@ -0,0 +1,17 @@
+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#L2145)
+ * ## Props
+ * @prop direction
+ * @prop index
+ * @prop onMouseDown
+ * @prop onKeyDown
+ * @prop isDragging
+ * @prop currentSize
+ * @prop class: className = ""
+ */
+declare const Divider: import("svelte").Component<DividerProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/split-pane/Pane.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { PaneProps } from "../types";
+  import { getSplitPaneContext } from "./SplitPane.svelte";
+  import Divider from "./Divider.svelte";
+  import { pane } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+
+  let { children, class: className = "", style = "" }: PaneProps = $props();
+
+  const theme = getTheme("pane");
+
+  const context = getSplitPaneContext();
+  const paneIndex = context ? context.registerPane() : 0;
+
+  const paneStyle = $derived.by(() => {
+    const styles = [style];
+    if (context) {
+      const contextStyle = context.getPaneStyle(paneIndex);
+      styles.push(contextStyle);
+    }
+    return styles.filter(Boolean).join("; ");
+  });
+
+  const showDivider = $derived(context?.shouldRenderDivider(paneIndex) ?? false);
+  const direction = $derived(context?.getDirection() ?? "horizontal");
+  const isDragging = $derived(context?.getIsDragging() ?? false);
+</script>
+
+<div class={pane({ class: clsx(theme, className) })} style={paneStyle}>
+  {@render children?.()}
+</div>
+
+{#if showDivider && context}
+  <Divider {direction} index={paneIndex} {isDragging} currentSize={context.getPaneSize(paneIndex)} onMouseDown={context.onMouseDown} onKeyDown={context.onKeyDown} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2139)
+## Props
+@prop children
+@prop class: className = ""
+@prop style = ""
+-->

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

@@ -0,0 +1,13 @@
+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#L2139)
+ * ## Props
+ * @prop children
+ * @prop class: className = ""
+ * @prop style = ""
+ */
+declare const Pane: import("svelte").Component<PaneProps, {}, "">;
+type Pane = ReturnType<typeof Pane>;
+export default Pane;

package/dist/split-pane/SplitPane.svelte

@@ -0,0 +1,403 @@
+<script lang="ts" module>
+  import { setContext, getContext } from "svelte";
+
+  const SPLIT_PANE_KEY = Symbol("SPLIT_PANE");
+
+  interface SplitPaneContext {
+    registerPane: () => number;
+    getPaneStyle: (index: number) => string;
+    getPaneSize: (index: number) => number;
+    shouldRenderDivider: (index: number) => boolean;
+    getDirection: () => "horizontal" | "vertical";
+    getIsDragging: () => boolean;
+    onMouseDown: (e: MouseEvent, index: number) => void;
+    onKeyDown: (e: KeyboardEvent, index: number) => void;
+  }
+
+  export function setSplitPaneContext(ctx: SplitPaneContext) {
+    setContext(SPLIT_PANE_KEY, ctx);
+  }
+
+  export function getSplitPaneContext(): SplitPaneContext | undefined {
+    return getContext(SPLIT_PANE_KEY);
+  }
+</script>
+
+<script lang="ts">
+  import type { SplitPaneProps } from "../types";
+  import { splitpane } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+
+  let {
+    direction = "horizontal",
+    minSize = 100,
+    responsive = true,
+    breakpoint = 768,
+    transition: transitionProp = true,
+    transitionDuration = 150,
+    keyboardStep = 2,
+    initialSizes,
+    onResize,
+    children,
+    class: className = ""
+  }: SplitPaneProps = $props();
+
+  const TOLERANCE = 0.5; // For pixel comparisons (minSize - TOLERANCE)
+  const MIN_CHANGE_THRESHOLD = 0.01; // For percentage changes (size deltas)
+  const MIN_DELTA = 1; // For mouse movement (Math.abs(delta) < MIN_DELTA)
+
+  // Validate numeric props
+  if (minSize <= 0) {
+    console.warn(`minSize must be positive, got ${minSize}. Using default 100.`);
+    minSize = 100;
+  }
+  if (keyboardStep <= 0) {
+    console.warn(`keyboardStep must be positive, got ${keyboardStep}. Using default 2.`);
+    keyboardStep = 2;
+  }
+
+  let transition = $state(transitionProp);
+  $effect(() => {
+    // syncing local transition state with prop changes
+    if (!isDragging) {
+      transition = transitionProp;
+    }
+  });
+  const theme = getTheme("splitpane");
+
+  let isDragging = $state(false);
+  let startPos = $state(0);
+  let sizes = $state<number[]>([]);
+  let container: HTMLDivElement;
+  let currentDirection = $state(direction);
+  let registeredPanes = $state(0);
+
+  // Register panes as they mount
+  function registerPane(): number {
+    const index = registeredPanes;
+    registeredPanes++;
+    return index;
+  }
+
+  function getPaneStyle(index: number): string {
+    if (sizes[index] === undefined) return "";
+
+    const size = `${sizes[index]}%`;
+    const transitionStyle = transition ? `${currentDirection === "horizontal" ? "width" : "height"} ${transitionDuration}ms ease` : "none";
+
+    if (currentDirection === "horizontal") {
+      return `width: ${size}; height: 100%; transition: ${transitionStyle};`;
+    } else {
+      return `height: ${size}; width: 100%; transition: ${transitionStyle};`;
+    }
+  }
+
+  function shouldRenderDivider(paneIndex: number): boolean {
+    return paneIndex < registeredPanes - 1;
+  }
+
+  // Set context for child Pane components
+  setSplitPaneContext({
+    registerPane,
+    getPaneStyle,
+    getPaneSize: (index: number) => sizes[index] ?? (registeredPanes > 0 ? 100 / registeredPanes : 0),
+    shouldRenderDivider,
+    getDirection: () => currentDirection,
+    getIsDragging: () => isDragging,
+    onMouseDown: startResize,
+    onKeyDown: handleKeyResize
+  });
+
+  let containerSize = $state(0);
+
+  // Track container size changes
+  $effect(() => {
+    if (!container) return;
+
+    const updateSize = () => {
+      containerSize = currentDirection === "horizontal" ? container.offsetWidth : container.offsetHeight;
+    };
+
+    updateSize();
+
+    const resizeObserver = new ResizeObserver(updateSize);
+    resizeObserver.observe(container);
+
+    return () => resizeObserver.disconnect();
+  });
+
+  // Initialize and maintain sizes
+  $effect(() => {
+    if (registeredPanes === 0) {
+      sizes = [];
+      return;
+    }
+
+    // If container not ready yet, use equal distribution
+    if (containerSize < 1) {
+      if (sizes.length !== registeredPanes) {
+        const equal = 100 / registeredPanes;
+        sizes = Array.from({ length: registeredPanes }, () => equal);
+      }
+      return;
+    }
+
+    const minPercent = (minSize / containerSize) * 100;
+
+    // Check if minSize is achievable for all panes
+    const totalMinRequired = minPercent * registeredPanes;
+    if (totalMinRequired > 100) {
+      console.error(
+        `Cannot satisfy minSize=${minSize}px for ${registeredPanes} panes in ${containerSize}px container. ` + `Required: ${(minSize * registeredPanes).toFixed(0)}px. Using equal distribution.`
+      );
+      const equal = 100 / registeredPanes;
+      sizes = Array.from({ length: registeredPanes }, () => equal);
+      return;
+    }
+
+    // Check if current sizes violate minSize constraints
+    const currentPixelSizes = sizes.map((s) => (s / 100) * containerSize);
+    const violatesMinSize = currentPixelSizes.some((pixelSize) => pixelSize < minSize - TOLERANCE); // small tolerance
+
+    if (violatesMinSize) {
+      // Recalculate sizes to respect minSize
+      let newSizes = sizes.map((s) => Math.max((s / 100) * containerSize, minSize));
+      const totalPixels = newSizes.reduce((a, b) => a + b, 0);
+
+      // Convert back to percentages
+      if (totalPixels > containerSize) {
+        // If we can't fit all panes at minSize, distribute proportionally
+        newSizes = newSizes.map((s) => (s / totalPixels) * containerSize);
+      }
+
+      sizes = newSizes.map((pixelSize) => (pixelSize / containerSize) * 100);
+    }
+
+    // Handle initialSizes (only on first initialization)
+    if (initialSizes && initialSizes.length === registeredPanes && sizes.length !== registeredPanes) {
+      const hasInvalidValues = initialSizes.some((s) => s < 0 || !isFinite(s));
+
+      if (hasInvalidValues) {
+        console.warn("initialSizes contains invalid values. Using equal distribution.");
+        const equal = Math.max(100 / registeredPanes, minPercent);
+        sizes = Array.from({ length: registeredPanes }, () => equal);
+        return;
+      }
+
+      const sum = initialSizes.reduce((a, b) => a + b, 0);
+
+      if (sum <= 0 || sum < 0.01) {
+        console.warn("initialSizes sum to zero. Using equal distribution.");
+        const equal = Math.max(100 / registeredPanes, minPercent);
+        sizes = Array.from({ length: registeredPanes }, () => equal);
+        return;
+      }
+
+      let normalizedSizes = initialSizes.map((s) => (s / sum) * 100);
+
+      const violatesConstraints = normalizedSizes.some((size) => size < minPercent);
+
+      if (violatesConstraints) {
+        console.warn(
+          `initialSizes [${normalizedSizes.map((s) => s.toFixed(1)).join("%, ")}%] ` +
+            `violate minSize constraint (${minSize}px = ${minPercent.toFixed(1)}%). ` +
+            `Adjusting to respect minimum constraints.`
+        );
+
+        normalizedSizes = normalizedSizes.map((size) => Math.max(size, minPercent));
+        const newSum = normalizedSizes.reduce((a, b) => a + b, 0);
+        normalizedSizes = normalizedSizes.map((size) => (size / newSum) * 100);
+      }
+
+      sizes = normalizedSizes;
+      return;
+    }
+
+    // Default: equal distribution respecting minSize
+    if (sizes.length !== registeredPanes) {
+      const equal = Math.max(100 / registeredPanes, minPercent);
+      sizes = Array.from({ length: registeredPanes }, () => equal);
+    }
+  });
+
+  // Responsive direction handling
+  $effect(() => {
+    if (!responsive) {
+      currentDirection = direction;
+      return;
+    }
+
+    if (typeof window === "undefined") {
+      currentDirection = direction;
+      return;
+    }
+
+    const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
+
+    const handleResize = () => {
+      // deferring the direction switch until the drag completes
+      if (!isDragging) {
+        currentDirection = mq.matches ? "vertical" : "horizontal";
+      }
+    };
+
+    handleResize();
+    mq.addEventListener("change", handleResize);
+
+    return () => mq.removeEventListener("change", handleResize);
+  });
+
+  // Notify parent of size changes
+  $effect(() => {
+    if (sizes.length > 0 && onResize) {
+      onResize(sizes);
+    }
+  });
+
+  function startResize(e: MouseEvent, index: number) {
+    e.preventDefault();
+    isDragging = true;
+    transition = false;
+    startPos = currentDirection === "horizontal" ? e.clientX : e.clientY;
+
+    const moveHandler = (ev: MouseEvent) => resize(ev, index);
+    const upHandler = () => stopResize(moveHandler, upHandler);
+
+    window.addEventListener("mousemove", moveHandler);
+    window.addEventListener("mouseup", upHandler);
+
+    document.body.style.cursor = currentDirection === "horizontal" ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+  }
+
+  function stopResize(moveHandler: (e: MouseEvent) => void, upHandler: () => void) {
+    isDragging = false;
+    transition = transitionProp;
+    window.removeEventListener("mousemove", moveHandler);
+    window.removeEventListener("mouseup", upHandler);
+
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }
+
+  function resize(e: MouseEvent, index: number) {
+    if (!isDragging || !container) return;
+    if (index < 0 || index + 1 >= sizes.length) return;
+
+    const currentPos = currentDirection === "horizontal" ? e.clientX : e.clientY;
+    const delta = currentPos - startPos;
+
+    if (Math.abs(delta) < MIN_DELTA) return; // Ignore very small movements
+
+    const containerSize = currentDirection === "horizontal" ? container.offsetWidth : container.offsetHeight;
+
+    // Bail out if container has zero or near-zero dimensions
+    if (containerSize < 1) return;
+
+    const deltaPercent = (delta / containerSize) * 100;
+
+    // Calculate min as percentage based on current container size
+    const minPercent = (minSize / containerSize) * 100;
+
+    // Store original sizes
+    const oldSize1 = sizes[index];
+    const oldSize2 = sizes[index + 1];
+    const totalSize = oldSize1 + oldSize2;
+
+    // Calculate desired new sizes
+    let newSize1 = oldSize1 + deltaPercent;
+    let newSize2 = oldSize2 - deltaPercent;
+
+    // Apply minimum constraints - clamp to valid range
+    newSize1 = Math.max(minPercent, newSize1);
+    newSize2 = totalSize - newSize1;
+
+    // Check if second pane violates minimum constraint after first pane clamping
+    if (newSize2 < minPercent) {
+      newSize2 = minPercent;
+      newSize1 = totalSize - newSize2;
+    }
+
+    // Only update if changed significantly
+    if (Math.abs(newSize1 - oldSize1) > MIN_CHANGE_THRESHOLD) {
+      sizes[index] = newSize1;
+      sizes[index + 1] = newSize2;
+      startPos = currentPos;
+    }
+  }
+
+  function handleKeyResize(e: KeyboardEvent, index: number) {
+    if (!container) return;
+    if (index < 0 || index + 1 >= sizes.length) return;
+
+    const step = keyboardStep;
+    let handled = false;
+
+    const isHorizontal = currentDirection === "horizontal";
+    const increaseKeys = isHorizontal ? ["ArrowRight"] : ["ArrowDown"];
+    const decreaseKeys = isHorizontal ? ["ArrowLeft"] : ["ArrowUp"];
+
+    const containerSize = isHorizontal ? container.offsetWidth : container.offsetHeight;
+    // Bail out if container has zero or near-zero dimensions
+    if (containerSize < 1) return;
+
+    const minPercent = (minSize / containerSize) * 100;
+
+    const total = sizes[index] + sizes[index + 1];
+
+    const applyClamp = (target: number) => {
+      let newSize1 = Math.min(total - minPercent, Math.max(minPercent, target));
+      let newSize2 = total - newSize1;
+
+      if (newSize2 < minPercent) {
+        newSize2 = minPercent;
+        newSize1 = total - newSize2;
+      }
+
+      if (Math.abs(newSize1 - sizes[index]) > MIN_CHANGE_THRESHOLD) {
+        sizes[index] = newSize1;
+        sizes[index + 1] = newSize2;
+        handled = true;
+      }
+    };
+
+    if (increaseKeys.includes(e.key)) {
+      applyClamp(sizes[index] + step);
+    } else if (decreaseKeys.includes(e.key)) {
+      applyClamp(sizes[index] - step);
+    } else if (e.key === "Enter" || e.key === " ") {
+      // Reset to equal sizes
+      const equal = 100 / registeredPanes;
+      sizes = sizes.map(() => equal);
+      handled = true;
+    }
+
+    if (handled) {
+      e.preventDefault();
+    }
+  }
+</script>
+
+<div bind:this={container} class={splitpane({ direction: currentDirection, class: clsx(theme, className) })}>
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2125)
+## Props
+@prop direction = "horizontal"
+@prop minSize = 100
+@prop responsive = true
+@prop breakpoint = 768
+@prop transition: transitionProp = true
+@prop transitionDuration = 150
+@prop keyboardStep = 2
+@prop initialSizes
+@prop onResize
+@prop children
+@prop class: className = ""
+-->

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

@@ -0,0 +1,33 @@
+interface SplitPaneContext {
+    registerPane: () => number;
+    getPaneStyle: (index: number) => string;
+    getPaneSize: (index: number) => number;
+    shouldRenderDivider: (index: number) => boolean;
+    getDirection: () => "horizontal" | "vertical";
+    getIsDragging: () => boolean;
+    onMouseDown: (e: MouseEvent, index: number) => void;
+    onKeyDown: (e: KeyboardEvent, index: number) => void;
+}
+export declare function setSplitPaneContext(ctx: SplitPaneContext): void;
+export declare function getSplitPaneContext(): SplitPaneContext | undefined;
+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#L2125)
+ * ## Props
+ * @prop direction = "horizontal"
+ * @prop minSize = 100
+ * @prop responsive = true
+ * @prop breakpoint = 768
+ * @prop transition: transitionProp = true
+ * @prop transitionDuration = 150
+ * @prop keyboardStep = 2
+ * @prop initialSizes
+ * @prop onResize
+ * @prop children
+ * @prop class: className = ""
+ */
+declare const SplitPane: import("svelte").Component<SplitPaneProps, {}, "">;
+type SplitPane = ReturnType<typeof SplitPane>;
+export default SplitPane;

package/dist/split-pane/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SplitPane } from "./SplitPane.svelte";
+export { default as Pane } from "./Pane.svelte";
+export { default as Divider } from "./Divider.svelte";
+export { splitpane, pane, divider, dividerHitArea } from "./theme";

package/dist/split-pane/index.js

@@ -0,0 +1,4 @@
+export { default as SplitPane } from "./SplitPane.svelte";
+export { default as Pane } from "./Pane.svelte";
+export { default as Divider } from "./Divider.svelte";
+export { splitpane, pane, divider, dividerHitArea } from "./theme";