@pajohns/flowbite-svelte 0.1.0

package/dist/navbar/theme.js

@@ -0,0 +1,160 @@
+import { tv } from "tailwind-variants";
+export const navbar = tv({
+    base: "relative w-full px-2 py-2.5 sm:px-4"
+});
+export const navbarBrand = tv({
+    base: "flex items-center"
+});
+export const navbarContainer = tv({
+    base: "mx-auto flex flex-wrap items-center justify-between ",
+    variants: {
+        fluid: { true: "w-full", false: "container" }
+    }
+});
+export const navbarUl = tv({
+    slots: {
+        base: "",
+        ul: "flex flex-col p-4 mt-0 rtl:space-x-reverse",
+        active: "text-white bg-primary-700 dark:bg-primary-600",
+        nonActive: "hover:text-primary-500 text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+    },
+    variants: {
+        breakpoint: {
+            sm: {
+                base: "w-full sm:block sm:w-auto",
+                ul: "sm:flex-row sm:text-sm sm:font-medium",
+                active: "sm:bg-transparent sm:text-primary-700 sm:dark:text-white sm:dark:bg-transparent",
+                nonActive: "sm:hover:bg-transparent sm:border-0 sm:hover:text-primary-700 dark:sm:text-gray-400 sm:dark:hover:text-white sm:dark:hover:bg-transparent"
+            },
+            md: {
+                base: "w-full md:block md:w-auto",
+                ul: "md:flex-row md:text-sm md:font-medium",
+                active: "md:bg-transparent md:text-primary-700 md:dark:text-white md:dark:bg-transparent",
+                nonActive: "md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:md:text-gray-400 md:dark:hover:text-white md:dark:hover:bg-transparent"
+            },
+            lg: {
+                base: "w-full lg:block lg:w-auto",
+                ul: "lg:flex-row lg:text-sm lg:font-medium",
+                active: "lg:bg-transparent lg:text-primary-700 lg:dark:text-white lg:dark:bg-transparent",
+                nonActive: "lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 dark:lg:text-gray-400 lg:dark:hover:text-white lg:dark:hover:bg-transparent"
+            },
+            xl: {
+                base: "w-full xl:block xl:w-auto",
+                ul: "xl:flex-row xl:text-sm xl:font-medium",
+                active: "xl:bg-transparent xl:text-primary-700 xl:dark:text-white xl:dark:bg-transparent",
+                nonActive: "xl:hover:bg-transparent xl:border-0 xl:hover:text-primary-700 dark:xl:text-gray-400 xl:dark:hover:text-white xl:dark:hover:bg-transparent"
+            }
+        },
+        hidden: {
+            false: {
+                base: "absolute top-full left-0 right-0 z-50 w-full",
+                ul: "border rounded-lg bg-white shadow-lg dark:bg-gray-800 dark:border-gray-700 text-gray-700 dark:text-gray-400 border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700"
+            },
+            true: {
+                base: "hidden"
+            }
+        }
+    },
+    compoundVariants: [
+        // Compound variants for breakpoint + hidden combinations
+        {
+            breakpoint: "sm",
+            hidden: false,
+            class: {
+                base: "sm:static sm:z-auto",
+                ul: "sm:border-none sm:rounded-none sm:bg-inherit dark:sm:bg-inherit sm:shadow-none"
+            }
+        },
+        {
+            breakpoint: "md",
+            hidden: false,
+            class: {
+                base: "md:static md:z-auto",
+                ul: "md:border-none md:rounded-none md:bg-inherit dark:md:bg-inherit md:shadow-none"
+            }
+        },
+        {
+            breakpoint: "lg",
+            hidden: false,
+            class: {
+                base: "lg:static lg:z-auto",
+                ul: "lg:border-none lg:rounded-none lg:bg-inherit dark:lg:bg-inherit lg:shadow-none"
+            }
+        },
+        {
+            breakpoint: "xl",
+            hidden: false,
+            class: {
+                base: "xl:static xl:z-auto",
+                ul: "xl:border-none xl:rounded-none xl:bg-inherit dark:xl:bg-inherit xl:shadow-none"
+            }
+        }
+    ],
+    defaultVariants: {
+        breakpoint: "md"
+    }
+});
+export const navbarLi = tv({
+    base: "block py-2 pe-4 ps-3 rounded-sm",
+    variants: {
+        breakpoint: {
+            sm: "sm:p-2 sm:border-0",
+            md: "md:p-2 md:border-0",
+            lg: "lg:p-2 lg:border-0",
+            xl: "xl:p-2 xl:border-0"
+        },
+        hidden: {
+            false: "text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        }
+    },
+    compoundVariants: [
+        {
+            breakpoint: "sm",
+            hidden: false,
+            class: "sm:hover:bg-transparent sm:hover:text-primary-700 sm:dark:hover:text-white sm:dark:hover:bg-transparent"
+        },
+        {
+            breakpoint: "md",
+            hidden: false,
+            class: "md:hover:bg-transparent md:hover:text-primary-700 md:dark:hover:text-white md:dark:hover:bg-transparent"
+        },
+        {
+            breakpoint: "lg",
+            hidden: false,
+            class: "lg:hover:bg-transparent lg:hover:text-primary-700 lg:dark:hover:text-white lg:dark:hover:bg-transparent"
+        },
+        {
+            breakpoint: "xl",
+            hidden: false,
+            class: "xl:hover:bg-transparent xl:hover:text-primary-700 xl:dark:hover:text-white xl:dark:hover:bg-transparent"
+        }
+    ],
+    defaultVariants: {
+        breakpoint: "md"
+    }
+});
+export const navbarHamburger = tv({
+    slots: {
+        base: "ms-3",
+        menu: "h-6 w-6 shrink-0"
+    },
+    variants: {
+        breakpoint: {
+            sm: {
+                base: "sm:hidden"
+            },
+            md: {
+                base: "md:hidden"
+            },
+            lg: {
+                base: "lg:hidden"
+            },
+            xl: {
+                base: "xl:hidden"
+            }
+        }
+    },
+    defaultVariants: {
+        breakpoint: "md"
+    }
+});

package/dist/pagination/Pagination.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { pagination } from "./theme";
+  import PaginationItem from "./PaginationItem.svelte";
+  import type { PaginationProps, PaginationContextType } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+  import { setPaginationContext } from "../context";
+  import clsx from "clsx";
+
+  let { pages = [], previous, next, prevContent, nextContent, table, size, ariaLabel, ...restProps }: PaginationProps = $props();
+
+  const theme = $derived(getTheme("pagination"));
+
+  // Create context object
+  const ctx: PaginationContextType = {
+    get group() {
+      return true;
+    },
+    get table() {
+      return table;
+    },
+    get size() {
+      return size;
+    }
+  };
+
+  // Set context during initialization
+  setPaginationContext(ctx);
+
+  const paginationCls = $derived(pagination({ table, size, class: clsx(theme) }));
+</script>
+
+<nav aria-label={ariaLabel}>
+  <ul class={paginationCls}>
+    {#if typeof previous === "function"}
+      <li {...restProps}>
+        <PaginationItem {size} onclick={() => previous()} class={table ? "rounded-none rounded-l" : "rounded-none  rounded-s-lg"}>
+          {#if prevContent}
+            {@render prevContent()}
+          {:else}
+            Previous
+          {/if}
+        </PaginationItem>
+      </li>
+    {/if}
+    {#each pages as { name, href, active, size }, index (href ?? index)}
+      <li {...restProps}>
+        <PaginationItem {size} {active} {href}>
+          {name}
+        </PaginationItem>
+      </li>
+    {/each}
+    {#if typeof next === "function"}
+      <li {...restProps}>
+        <PaginationItem {size} onclick={() => next()} class={table ? "rounded-none rounded-r" : "rounded-none rounded-e-lg"}>
+          {#if nextContent}
+            {@render nextContent()}
+          {:else}
+            Next
+          {/if}
+        </PaginationItem>
+      </li>
+    {/if}
+  </ul>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1296)
+## Props
+@prop pages = []
+@prop previous
+@prop next
+@prop prevContent
+@prop nextContent
+@prop table
+@prop size
+@prop ariaLabel
+@prop ...restProps
+-->

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

@@ -0,0 +1,19 @@
+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#L1296)
+ * ## Props
+ * @prop pages = []
+ * @prop previous
+ * @prop next
+ * @prop prevContent
+ * @prop nextContent
+ * @prop table
+ * @prop size
+ * @prop ariaLabel
+ * @prop ...restProps
+ */
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/pagination/PaginationButton.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { paginationButton } from "./theme";
+  import type { PaginationButtonProps } from "../types";
+  import { getPaginationContext } from "../context";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, size, onclick, disabled = false, class: className, href, active = false, ...restProps }: PaginationButtonProps = $props();
+
+  const theme = $derived(getTheme("paginationButton"));
+
+  // Get context - it will be undefined if used outside Pagination
+  const ctx = getPaginationContext();
+
+  const paginationCls = $derived.by(() => {
+    if (active && ctx?.activeClasses) {
+      return paginationButton({
+        size: ctx?.size ?? size,
+        active: false, // Set to false to avoid theme's active styles
+        group: ctx?.group ?? false,
+        table: ctx?.table ?? false,
+        disabled,
+        class: clsx(theme, ctx.activeClasses, className)
+      });
+    }
+
+    // Use default theme styles
+    return paginationButton({
+      size: ctx?.size ?? size,
+      active: active,
+      group: ctx?.group ?? false,
+      table: ctx?.table ?? false,
+      disabled,
+      class: clsx(theme, className)
+    });
+  });
+
+  function handleClick(e: MouseEvent) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (onclick) onclick();
+  }
+</script>
+
+{#if href}
+  <a {href} {...restProps} class={paginationCls} onclick={handleClick}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </a>
+{:else}
+  <button {...restProps} {disabled} class={paginationCls} 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#L1260)
+## 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#L1260)
+ * ## 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

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { paginationItem } from "./theme";
+  import type { PaginationItemProps } from "../types";
+  import { getPaginationContext } from "../context";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, size, class: className, href, active, ...restProps }: PaginationItemProps = $props();
+
+  const theme = $derived(getTheme("paginationItem"));
+
+  // Get context - it will be undefined if used outside Pagination
+  const ctx = getPaginationContext();
+
+  const paginationCls = $derived(
+    paginationItem({
+      size: ctx?.size ?? size,
+      active,
+      group: ctx?.group ?? false,
+      table: ctx?.table ?? false,
+      class: clsx(theme, className)
+    })
+  );
+</script>
+
+{#if href}
+  <a {href} {...restProps} class={paginationCls}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </a>
+{:else}
+  <button {...restProps} class={paginationCls}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1292)
+## Props
+@prop children
+@prop size
+@prop class: className
+@prop href
+@prop active
+@prop ...restProps
+-->

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

@@ -0,0 +1,16 @@
+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#L1292)
+ * ## Props
+ * @prop children
+ * @prop size
+ * @prop class: className
+ * @prop href
+ * @prop active
+ * @prop ...restProps
+ */
+declare const PaginationItem: import("svelte").Component<PaginationItemProps, {}, "">;
+type PaginationItem = ReturnType<typeof PaginationItem>;
+export default PaginationItem;

package/dist/pagination/PaginationNav.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { paginationNav } from "./theme";
+  import type { PaginationNavProps, PaginationContextType } from "..";
+  import PaginationButton from "./PaginationButton.svelte";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { setPaginationContext } from "../context";
+  import { untrack } from "svelte";
+
+  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,
+    classes,
+    spanClass,
+    tableDivClass,
+    ...restProps
+  }: PaginationNavProps = $props();
+
+  warnThemeDeprecation(
+    "PaginationNav",
+    untrack(() => ({ prevClass, nextClass, spanClass, tableDivClass })),
+    { prevClass: "prev", nextClass: "next", spanClass: "span", tableDivClass: "tableDiv" }
+  );
+
+  const styling = $derived(classes ?? { prev: prevClass, next: nextClass, span: spanClass, tableDiv: tableDivClass });
+
+  const theme = $derived(getTheme("paginationNav"));
+
+  // Create context object
+  const ctx: PaginationContextType = {
+    get group() {
+      return true;
+    },
+    get size() {
+      return size;
+    },
+    get table() {
+      return layout === "table";
+    },
+    get activeClasses() {
+      return classes?.active;
+    }
+  };
+
+  // Set context during initialization
+  setPaginationContext(ctx);
+
+  // 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, span, prev, next } = $derived(paginationNav({ layout }));
+</script>
+
+<nav aria-label={ariaLabel} {...restProps}>
+  {#if layout === "table"}
+    <div class={tableDiv({ class: clsx(theme?.tableDiv, styling.tableDiv) })}>
+      Showing <span class={span({ class: clsx(theme?.span, styling.span) })}>{currentPage}</span>
+      of
+      <span class={span({ class: clsx(theme?.span, styling.span) })}>{totalPages}</span>
+      Entries
+    </div>
+  {/if}
+
+  <ul class={base({ class: clsx(theme?.base, className) })}>
+    <li {...restProps}>
+      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={prev({ class: clsx(theme?.prev, styling.prev) })}>
+        {#if prevContent}
+          {@render prevContent()}
+        {:else}
+          {previousLabel}
+        {/if}
+      </PaginationButton>
+    </li>
+    {#if layout === "pagination" && pageNumbers.length > 0}
+      {#each pageNumbers as page (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={next({ class: clsx(theme?.next, styling.next) })}>
+        {#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#L1266)
+## 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 classes
+@prop spanClass
+@prop tableDivClass
+@prop ...restProps
+-->

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

@@ -0,0 +1,28 @@
+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#L1266)
+ * ## 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 classes
+ * @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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,5 @@
+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";