flowbite-svelte 1.2.7 → 1.3.1

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#L1125)
 ## 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#L1125)
  * ## 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#L1121)
 ## 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#L1121)
  * ## Props
  * @prop children
  * @prop size

package/dist/pagination/PaginationNav.svelte

@@ -0,0 +1,119 @@
+<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,
+    visiblePages = 5, // New prop to control visible pages
+    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 using Svelte 5 derived values
+  const halfVisiblePages = $derived(Math.floor(visiblePages / 2));
+  const lastPage = $derived(Math.min(Math.max(layout === "pagination" ? currentPage + halfVisiblePages : currentPage + halfVisiblePages * 2, visiblePages), totalPages));
+  const firstPage = $derived(Math.max(1, lastPage - visiblePages + 1));
+
+  // 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 visiblePages = 5
+@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,27 @@
+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 visiblePages = 5
+ * @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#L1135)
 ## 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#L1135)
  * ## 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#L1145)
 ## 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#L1145)
  * ## 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#L1162)
 ## Props
 @prop progress = 45
 @prop radius = 42

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

@@ -2,7 +2,7 @@ import type { ProgressradialProps } from "../types";
 /**
  * [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#L1162)
  * ## Props
  * @prop progress = 45
  * @prop radius = 42

package/dist/rating/AdvancedRating.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1160)
+[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1186)
 ## Props
 @prop rating
 @prop globalText

package/dist/rating/AdvancedRating.svelte.d.ts

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

package/dist/rating/CustomIcon.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1246)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1272)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00ff00"

package/dist/rating/CustomIcon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1246)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1272)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00ff00"

package/dist/rating/Heart.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1246)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1272)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#ff0000"

package/dist/rating/Heart.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1246)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1272)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#ff0000"

package/dist/rating/Rating.svelte

@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1172)
+[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1198)
 ## Props
 @prop children
 @prop text

package/dist/rating/Rating.svelte.d.ts

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

package/dist/rating/RatingComment.svelte

@@ -63,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1183)
+[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1209)
 ## Props
 @prop children
 @prop evaluation