flowbite-svelte 1.2.6 → 1.3.0

package/dist/buttons/Button.svelte

@@ -8,11 +8,13 @@
   const group: SizeType = getContext("group");
   const ctxDisabled: boolean | undefined = getContext("disabled");
 
-  let { children, onclick, pill, outline = false, size = group ? "sm" : "md", color = group ? (outline ? "dark" : "alternative") : "primary", shadow = false, tag = "button", disabled, class: className, ...restProps }: ButtonProps = $props();
+  let { children, onclick, pill, outline = false, size = "md", color = "primary", shadow = false, tag = "button", disabled, class: className, ...restProps }: ButtonProps = $props();
 
+  let actualSize = $derived(group ? "sm" : size);
+  let actualColor = $derived(group ? (outline ? "dark" : "alternative") : color);
   let isDisabled = $derived(Boolean(ctxDisabled) || Boolean(disabled));
 
-  const { base, outline: outline_, shadow: shadow_ } = $derived(button({ color, size, disabled: isDisabled, pill, group: !!group }));
+  const { base, outline: outline_, shadow: shadow_ } = $derived(button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group }));
   let btnCls = $derived(twMerge(base(), outline && outline_(), shadow && shadow_(), clsx(className)));
 </script>
 
@@ -40,8 +42,8 @@
 @prop onclick
 @prop pill
 @prop outline = false
-@prop size = group ? "sm" : "md"
-@prop color = group ? (outline ? "dark" : "alternative") : "primary"
+@prop size = "md"
+@prop color = "primary"
 @prop shadow = false
 @prop tag = "button"
 @prop disabled

package/dist/buttons/Button.svelte.d.ts

@@ -8,8 +8,8 @@ import type { ButtonProps } from "..";
  * @prop onclick
  * @prop pill
  * @prop outline = false
- * @prop size = group ? "sm" : "md"
- * @prop color = group ? (outline ? "dark" : "alternative") : "primary"
+ * @prop size = "md"
+ * @prop color = "primary"
  * @prop shadow = false
  * @prop tag = "button"
  * @prop disabled

package/dist/forms/dropzone/Dropzone.svelte

@@ -6,16 +6,7 @@
 
   type HTMLInputElementWithFiles = HTMLInputElement & { files: FileList | null };
 
-  let {
-    children,
-    files = $bindable<FileList | null>(),
-    class: className,
-    ...restProps
-  }: DropzoneProps & {
-    ondrop?: DragEventHandler<HTMLButtonElement>;
-    ondragover?: DragEventHandler<HTMLButtonElement>;
-    onchange?: ChangeEventHandler<HTMLInputElementWithFiles>;
-  } = $props();
+  let { children, files = $bindable<FileList | null>(), class: className, ...restProps }: DropzoneProps = $props();
 
   const base = $derived(dropzone({ class: clsx(className) }));
   let input: HTMLInputElement;
@@ -66,3 +57,15 @@
 <label class="hidden">
   <input {...restProps} bind:files bind:this={input} onchange={onChange} type="file" />
 </label>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L691)
+## Props
+@prop children
+@prop files = $bindable<FileList | null>()
+@prop class: className
+@prop ...restProps
+-->

package/dist/forms/dropzone/Dropzone.svelte.d.ts

@@ -1,13 +1,14 @@
-import type { DragEventHandler, ChangeEventHandler } from "svelte/elements";
 import type { DropzoneProps } from "../../types";
-type HTMLInputElementWithFiles = HTMLInputElement & {
-    files: FileList | null;
-};
-type $$ComponentProps = DropzoneProps & {
-    ondrop?: DragEventHandler<HTMLButtonElement>;
-    ondragover?: DragEventHandler<HTMLButtonElement>;
-    onchange?: ChangeEventHandler<HTMLInputElementWithFiles>;
-};
-declare const Dropzone: import("svelte").Component<$$ComponentProps, {}, "files">;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L691)
+ * ## Props
+ * @prop children
+ * @prop files = $bindable<FileList | null>()
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Dropzone: import("svelte").Component<DropzoneProps, {}, "files">;
 type Dropzone = ReturnType<typeof Dropzone>;
 export default Dropzone;

package/dist/forms/select/Select.svelte

@@ -23,8 +23,8 @@
     {/if}
 
     {#if items}
-      {#each items as { value, name }}
-        <option {value}>{name}</option>
+      {#each items as item}
+        <option value={item.value} disabled={item.disabled}>{item.name}</option>
       {/each}
     {/if}
 

package/dist/index.d.ts

@@ -32,7 +32,7 @@ export * from "./sidebar";
 export * from "./skeleton";
 export * from "./speed-dial";
 export * from "./spinner";
-export * from "./steps";
+export * from "./stepindicator";
 export * from "./tabs";
 export * from "./table";
 export * from "./timeline";

package/dist/index.js

@@ -32,7 +32,7 @@ export * from "./sidebar";
 export * from "./skeleton";
 export * from "./speed-dial";
 export * from "./spinner";
-export * from "./steps";
+export * from "./stepindicator";
 export * from "./tabs";
 export * from "./table";
 export * from "./timeline";

package/dist/pagination/Pagination.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1099)
+[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1124)
 ## Props
 @prop pages = []
 @prop previous

package/dist/pagination/Pagination.svelte.d.ts

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

package/dist/pagination/PaginationButton.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { paginationbutton } from ".";
+  import type { PaginationButtonProps } from "../types";
+  import { getContext } from "svelte";
+
+  let { children, size, onclick, disabled = false, class: className, href, active = false, ...restProps }: PaginationButtonProps = $props();
+
+  const group = getContext<boolean>("group");
+  const table = getContext<boolean>("table");
+
+  const paginationClass = $derived(
+    paginationbutton({
+      size: getContext("size") ?? size,
+      active,
+      group,
+      table,
+      disabled,
+      class: clsx(className)
+    })
+  );
+
+  function handleClick(e: MouseEvent) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (onclick) onclick();
+  }
+</script>
+
+{#if href}
+  <a {href} {...restProps} class={paginationClass} onclick={handleClick}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </a>
+{:else}
+  <button {...restProps} {disabled} class={paginationClass} onclick={handleClick}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1095)
+## Props
+@prop children
+@prop size
+@prop onclick
+@prop disabled = false
+@prop class: className
+@prop href
+@prop active = false
+@prop ...restProps
+-->

package/dist/pagination/PaginationButton.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { PaginationButtonProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1095)
+ * ## Props
+ * @prop children
+ * @prop size
+ * @prop onclick
+ * @prop disabled = false
+ * @prop class: className
+ * @prop href
+ * @prop active = false
+ * @prop ...restProps
+ */
+declare const PaginationButton: import("svelte").Component<PaginationButtonProps, {}, "">;
+type PaginationButton = ReturnType<typeof PaginationButton>;
+export default PaginationButton;

package/dist/pagination/PaginationItem.svelte

@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1095)
+[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1120)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationItem.svelte.d.ts

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

package/dist/pagination/PaginationNav.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { paginationnav } from "./theme";
+  import { type PaginationNavProps, PaginationButton } from "..";
+
+  function paginationRange(start: number, end: number): number[] {
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  }
+
+  let { currentPage = 1, totalPages = 1, onPageChange, prevContent, nextContent, prevClass, nextClass, layout = "pagination", nextLabel = "Next", previousLabel = "Previous", ariaLabel = "Page navigation", size = "default", class: className, spanClass, tableDivClass, ...restProps }: PaginationNavProps = $props();
+
+  // Set context values for child components
+  setContext("group", true);
+  setContext("size", size);
+  setContext("table", layout === "table");
+
+  // Calculate visible pages range
+  const lastPage = $derived(Math.min(Math.max(layout === "pagination" ? currentPage + 2 : currentPage + 4, 5), totalPages));
+  const firstPage = $derived(Math.max(1, lastPage - 4));
+
+  // Generate array of page numbers to display
+  const pageNumbers = $derived(paginationRange(firstPage, lastPage));
+
+  // Navigation helper functions
+  function goToNextPage() {
+    onPageChange(Math.min(currentPage + 1, totalPages));
+  }
+
+  function goToPreviousPage() {
+    onPageChange(Math.max(currentPage - 1, 1));
+  }
+
+  const { base, tableDiv, tableSpan, prevItem, nextItem } = $derived(paginationnav({ layout }));
+</script>
+
+<nav aria-label={ariaLabel} {...restProps}>
+  {#if layout === "table"}
+    <div class={tableDiv({ class: tableDivClass })}>
+      Showing <span class={tableSpan({ class: spanClass })}>{currentPage}</span>
+      of
+      <span class={tableSpan({ class: spanClass })}>{totalPages}</span>
+      Entries
+    </div>
+  {/if}
+
+  <ul class={base({ class: className })}>
+    <li {...restProps}>
+      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={prevItem({ class: prevClass })}>
+        {#if prevContent}
+          {@render prevContent()}
+        {:else}
+          {previousLabel}
+        {/if}
+      </PaginationButton>
+    </li>
+    {#if layout === "pagination" && pageNumbers.length > 0}
+      {#each pageNumbers as page}
+        <li aria-current={page === currentPage ? "page" : undefined}>
+          <PaginationButton active={page === currentPage} onclick={() => onPageChange(page)}>
+            {page}
+          </PaginationButton>
+        </li>
+      {/each}
+    {/if}
+    <li {...restProps}>
+      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={nextItem({ class: nextClass })}>
+        {#if nextContent}
+          {@render nextContent()}
+        {:else}
+          {nextLabel}
+        {/if}
+      </PaginationButton>
+    </li>
+  </ul>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1101)
+## Props
+@prop currentPage = 1
+@prop totalPages = 1
+@prop onPageChange
+@prop prevContent
+@prop nextContent
+@prop prevClass
+@prop nextClass
+@prop layout = "pagination"
+@prop nextLabel = "Next"
+@prop previousLabel = "Previous"
+@prop ariaLabel = "Page navigation"
+@prop size = "default"
+@prop class: className
+@prop spanClass
+@prop tableDivClass
+@prop ...restProps
+-->

package/dist/pagination/PaginationNav.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type PaginationNavProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1101)
+ * ## Props
+ * @prop currentPage = 1
+ * @prop totalPages = 1
+ * @prop onPageChange
+ * @prop prevContent
+ * @prop nextContent
+ * @prop prevClass
+ * @prop nextClass
+ * @prop layout = "pagination"
+ * @prop nextLabel = "Next"
+ * @prop previousLabel = "Previous"
+ * @prop ariaLabel = "Page navigation"
+ * @prop size = "default"
+ * @prop class: className
+ * @prop spanClass
+ * @prop tableDivClass
+ * @prop ...restProps
+ */
+declare const PaginationNav: import("svelte").Component<PaginationNavProps, {}, "">;
+type PaginationNav = ReturnType<typeof PaginationNav>;
+export default PaginationNav;

package/dist/pagination/index.d.ts

@@ -1,4 +1,5 @@
-import { paginationItem, pagination } from "./theme";
-import Pagination from "./Pagination.svelte";
-import PaginationItem from "./PaginationItem.svelte";
-export { Pagination, PaginationItem, paginationItem, pagination };
+export { paginationItem, pagination, paginationbutton, paginationnav } from "./theme";
+export { default as PaginationNav } from "./PaginationNav.svelte";
+export { default as PaginationButton } from "./PaginationButton.svelte";
+export { default as Pagination } from "./Pagination.svelte";
+export { default as PaginationItem } from "./PaginationItem.svelte";

package/dist/pagination/index.js

@@ -1,4 +1,5 @@
-import { paginationItem, pagination } from "./theme";
-import Pagination from "./Pagination.svelte";
-import PaginationItem from "./PaginationItem.svelte";
-export { Pagination, PaginationItem, paginationItem, pagination };
+export { paginationItem, pagination, paginationbutton, paginationnav } from "./theme";
+export { default as PaginationNav } from "./PaginationNav.svelte";
+export { default as PaginationButton } from "./PaginationButton.svelte";
+export { default as Pagination } from "./Pagination.svelte";
+export { default as PaginationItem } from "./PaginationItem.svelte";

package/dist/pagination/theme.d.ts

@@ -1,5 +1,146 @@
 import { type VariantProps } from "tailwind-variants";
+export type PaginationVariants = VariantProps<typeof pagination>;
+export declare const paginationnav: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    layout: {
+        table: {
+            prevItem: string;
+            nextItem: string;
+        };
+        navigation: {
+            prevItem: string;
+            nextItem: string;
+        };
+        pagination: {
+            prevItem: string;
+            nextItem: string;
+        };
+    };
+}, {
+    base: string;
+    tableDiv: string;
+    tableSpan: string;
+    prevItem: string;
+    nextItem: string;
+}, undefined, {
+    size: {
+        default: string;
+        large: string;
+    };
+    layout: {
+        table: {
+            prevItem: string;
+            nextItem: string;
+        };
+        navigation: {
+            prevItem: string;
+            nextItem: string;
+        };
+        pagination: {
+            prevItem: string;
+            nextItem: string;
+        };
+    };
+}, {
+    base: string;
+    tableDiv: string;
+    tableSpan: string;
+    prevItem: string;
+    nextItem: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    layout: {
+        table: {
+            prevItem: string;
+            nextItem: string;
+        };
+        navigation: {
+            prevItem: string;
+            nextItem: string;
+        };
+        pagination: {
+            prevItem: string;
+            nextItem: string;
+        };
+    };
+}, {
+    base: string;
+    tableDiv: string;
+    tableSpan: string;
+    prevItem: string;
+    nextItem: string;
+}, undefined, unknown, unknown, undefined>>;
 export type PaginationItemVariants = VariantProps<typeof paginationItem>;
+export declare const paginationbutton: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-center font-medium", {
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
 export declare const paginationItem: import("tailwind-variants").TVReturnType<{
     size: {
         default: string;
@@ -52,7 +193,6 @@ export declare const paginationItem: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
-export type PaginationVariants = VariantProps<typeof pagination>;
 export declare const pagination: import("tailwind-variants").TVReturnType<{
     table: {
         true: string;

package/dist/pagination/theme.js

@@ -1,4 +1,66 @@
 import { tv } from "tailwind-variants";
+export const paginationnav = tv({
+    slots: {
+        base: "inline-flex -space-x-px rtl:space-x-reverse items-center",
+        tableDiv: "flex items-center text-sm mb-4",
+        tableSpan: "font-semibold mx-1",
+        prevItem: "rounded-none",
+        nextItem: "rounded-none"
+    },
+    variants: {
+        size: {
+            default: "",
+            large: ""
+        },
+        layout: {
+            table: { prevItem: "rounded-s bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white text-white  hover:text-gray-200", nextItem: "text-white bg-gray-800 border-0 border-s border-gray-700 rounded-e hover:bg-gray-900 hover:text-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" },
+            navigation: { prevItem: "rounded-s-lg", nextItem: "rounded-e-lg" },
+            pagination: { prevItem: "rounded-s-lg", nextItem: "rounded-e-lg" }
+        }
+    },
+    defaultVariants: {
+        table: false,
+        size: "default"
+    }
+});
+export const paginationbutton = tv({
+    base: "flex items-center font-medium",
+    variants: {
+        size: {
+            default: "h-8 px-3 text-sm",
+            large: "h-10 px-4 text-base"
+        },
+        active: {
+            true: "text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white",
+            false: "text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        },
+        group: {
+            true: "",
+            false: "rounded-lg"
+        },
+        table: {
+            true: "rounded-sm",
+            false: "border"
+        },
+        disabled: {
+            true: "cursor-not-allowed opacity-50",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            group: false,
+            table: false,
+            class: "rounded-lg"
+        }
+    ],
+    defaultVariants: {
+        size: "default",
+        active: false,
+        group: false,
+        table: false
+    }
+});
 export const paginationItem = tv({
     base: "flex items-center font-medium",
     variants: {

package/dist/popover/Popover.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1109)
+[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1134)
 ## Props
 @prop title: titleSlot
 @prop color = "default"

package/dist/popover/Popover.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PopoverProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1109)
+ * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1134)
  * ## Props
  * @prop title: titleSlot
  * @prop color = "default"

package/dist/progress/Progressbar.svelte

@@ -43,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1119)
+[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1144)
 ## Props
 @prop progress = "45"
 @prop precision = 0

package/dist/progress/Progressbar.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1119)
+ * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1144)
  * ## Props
  * @prop progress = "45"
  * @prop precision = 0

package/dist/progress/Progressradial.svelte

@@ -62,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1136)
+[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1161)
 ## Props
 @prop progress = 45
 @prop radius = 42