@pajohns/flowbite-svelte 0.1.0

package/dist/stepper/theme.js

@@ -0,0 +1,175 @@
+import { tv } from "tailwind-variants";
+export const stepper = tv({
+    slots: {
+        base: "flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400 sm:text-base",
+        item: "flex items-center",
+        content: "flex items-center"
+    },
+    variants: {
+        status: {
+            completed: {
+                item: "text-primary-600 dark:text-primary-500 md:w-full sm:after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700",
+                content: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500"
+            },
+            current: {
+                item: "text-primary-600 dark:text-primary-500 md:w-full sm:after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700",
+                content: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500"
+            },
+            pending: {
+                item: "md:w-full sm:after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700",
+                content: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500"
+            }
+        },
+        isLast: {
+            true: {
+                item: "after:!hidden",
+                content: "after:!hidden"
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        status: "pending",
+        isLast: false
+    }
+});
+// ProgressStepper
+export const progressStepper = tv({
+    slots: {
+        base: "flex items-center w-full relative",
+        item: "flex items-center justify-center z-10",
+        circle: "flex items-center justify-center w-10 h-10 rounded-full lg:h-12 lg:w-12 shrink-0",
+        line: "absolute h-1 top-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-700",
+        progressLine: "absolute h-1 top-1/2 -translate-y-1/2 bg-primary-600 dark:bg-primary-500 transition-all duration-300 ease-in-out"
+    },
+    variants: {
+        status: {
+            completed: {
+                item: "text-primary-600 dark:text-primary-400 flex-1",
+                circle: "bg-primary-600 dark:bg-primary-500 text-white"
+            },
+            current: {
+                item: "flex-1",
+                circle: "bg-primary-600 dark:bg-primary-500 text-white"
+            },
+            pending: {
+                item: "flex-1",
+                circle: "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
+            }
+        }
+    },
+    defaultVariants: {
+        status: "pending"
+    }
+});
+// DetailedStepper
+export const detailedStepper = tv({
+    slots: {
+        base: "items-center w-full space-y-4 sm:flex sm:space-x-8 sm:space-y-0 rtl:space-x-reverse",
+        item: "flex items-center space-x-2.5 rtl:space-x-reverse",
+        indicator: "flex items-center justify-center w-8 h-8 rounded-full shrink-0"
+    },
+    variants: {
+        status: {
+            completed: {
+                item: "text-primary-600 dark:text-primary-500",
+                indicator: "border border-primary-600 dark:border-primary-500 bg-primary-600 dark:bg-primary-500 text-white"
+            },
+            current: {
+                item: "text-gray-500 dark:text-gray-400",
+                indicator: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400"
+            },
+            pending: {
+                item: "text-gray-500 dark:text-gray-400",
+                indicator: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400"
+            }
+        }
+    },
+    defaultVariants: {
+        status: "pending"
+    }
+});
+export const verticalStepper = tv({
+    slots: {
+        base: "space-y-4 w-72",
+        card: "w-full p-4 border rounded-lg",
+        content: "flex items-center justify-between"
+    },
+    variants: {
+        status: {
+            completed: {
+                card: "text-green-700 border-green-300 bg-green-50 dark:bg-gray-800 dark:border-green-800 dark:text-green-400"
+            },
+            current: {
+                card: "text-primary-700 bg-primary-100 border-primary-300 dark:bg-gray-800 dark:border-primary-800 dark:text-primary-400"
+            },
+            pending: {
+                card: "text-gray-900 bg-gray-100 border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
+            }
+        }
+    },
+    defaultVariants: {
+        status: "pending"
+    }
+});
+export const breadcrumbStepper = tv({
+    slots: {
+        base: "flex items-center w-full p-3 space-x-2 text-sm font-medium text-center text-gray-500 bg-white border border-gray-200 rounded-lg shadow-xs dark:text-gray-400 sm:text-base dark:bg-gray-800 dark:border-gray-700 sm:p-4 sm:space-x-4 rtl:space-x-reverse",
+        item: "flex items-center",
+        indicator: "flex items-center justify-center w-5 h-5 me-2 text-xs rounded-full shrink-0"
+    },
+    variants: {
+        status: {
+            completed: {
+                item: "text-primary-600 dark:text-primary-500",
+                indicator: "border border-primary-600 dark:border-primary-500 bg-primary-600 dark:bg-primary-500 text-white"
+            },
+            current: {
+                item: "text-primary-600 dark:text-primary-500",
+                indicator: "border border-primary-600 dark:border-primary-500 bg-primary-600 dark:bg-primary-500 text-white"
+            },
+            pending: {
+                item: "text-gray-500 dark:text-gray-400",
+                indicator: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400"
+            }
+        },
+        hasChevron: {
+            true: {},
+            false: {}
+        }
+    },
+    defaultVariants: {
+        status: "pending",
+        hasChevron: false
+    }
+});
+export const timelineStepper = tv({
+    slots: {
+        base: "relative text-gray-500 border-s border-gray-200 dark:border-gray-700 dark:text-gray-400",
+        item: "ms-6",
+        circle: "absolute flex items-center justify-center w-8 h-8 rounded-full -start-4 ring-4 ring-white dark:ring-gray-900"
+    },
+    variants: {
+        status: {
+            completed: {
+                circle: "bg-green-200 dark:bg-green-900"
+            },
+            current: {
+                circle: "bg-primary-200 dark:bg-primary-900"
+            },
+            pending: {
+                circle: "bg-gray-100 dark:bg-gray-700"
+            }
+        },
+        isLast: {
+            true: {},
+            false: {
+                item: "mb-10"
+            }
+        }
+    },
+    defaultVariants: {
+        status: "pending",
+        isLast: false
+    }
+});

package/dist/table/Table.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { setTableContext } from "../context";
+  import { table as tableCls } from "./theme";
+  import TableHead from "./TableHead.svelte";
+  import TableBody from "./TableBody.svelte";
+  import clsx from "clsx";
+  import type { TableProps, TableContextType } from "../types";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, footerSlot, captionSlot, items, divClass, striped, hoverable, border = true, shadow, color = "default", class: className, classes, ...restProps }: TableProps = $props();
+
+  warnThemeDeprecation(
+    "Table",
+    untrack(() => ({ divClass })),
+    { divClass: "div" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      div: divClass
+    }
+  );
+  const theme = $derived(getTheme("table"));
+
+  const { div, table } = $derived(tableCls({ color, shadow }));
+
+  let tableCtx: TableContextType = {
+    get striped() {
+      return striped;
+    },
+    get hoverable() {
+      return hoverable;
+    },
+    get border() {
+      return border;
+    },
+    get color() {
+      return color;
+    }
+  };
+
+  setTableContext(tableCtx);
+  let headItems = $derived(items && items.length > 0 ? Object.keys(items[0]).map((key) => ({ text: key.charAt(0).toUpperCase() + key.slice(1) })) : []);
+
+  let bodyItems = $derived(items && items.length > 0 ? items.map((item) => Object.values(item)) : []);
+</script>
+
+<div class={div({ class: clsx(theme?.div, styling.div) })}>
+  <table {...restProps} class={table({ class: clsx(theme?.table, className) })}>
+    {#if captionSlot}
+      {@render captionSlot()}
+    {/if}
+    {#if items && items.length > 0}
+      <TableHead {headItems} />
+      <TableBody {bodyItems} />
+    {:else if children}
+      {@render children()}
+    {/if}
+    {#if footerSlot}
+      {@render footerSlot()}
+    {/if}
+  </table>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1782)
+## Props
+@prop children
+@prop footerSlot
+@prop captionSlot
+@prop items
+@prop divClass
+@prop striped
+@prop hoverable
+@prop border = true
+@prop shadow
+@prop color = "default"
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/table/Table.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { TableProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1782)
+ * ## Props
+ * @prop children
+ * @prop footerSlot
+ * @prop captionSlot
+ * @prop items
+ * @prop divClass
+ * @prop striped
+ * @prop hoverable
+ * @prop border = true
+ * @prop shadow
+ * @prop color = "default"
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const Table: import("svelte").Component<TableProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/table/TableBody.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import TableBodyRow from "./TableBodyRow.svelte";
+  import TableBodyCell from "./TableBodyCell.svelte";
+  import type { TableBodyProps, CellValue, BodyRow } from "../types";
+
+  let { children, bodyItems, class: className, ...restProps }: TableBodyProps = $props();
+
+  function getCellValues(row: BodyRow): CellValue[] {
+    if (Array.isArray(row)) {
+      return row;
+    } else {
+      return Object.values(row);
+    }
+  }
+</script>
+
+<tbody {...restProps} class={clsx(className)}>
+  {#if bodyItems}
+    {#each bodyItems as row, i ("id" in row ? row.id : i)}
+      <TableBodyRow>
+        {#each getCellValues(row) as cellValue, j (j)}
+          <TableBodyCell>{cellValue ?? ""}</TableBodyCell>
+        {/each}
+      </TableBodyRow>
+    {/each}
+  {:else if children}
+    {@render children()}
+  {/if}
+</tbody>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1814)
+## Props
+@prop children
+@prop bodyItems
+@prop class: className
+@prop ...restProps
+-->

package/dist/table/TableBody.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { TableBodyProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1814)
+ * ## Props
+ * @prop children
+ * @prop bodyItems
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const TableBody: import("svelte").Component<TableBodyProps, {}, "">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/table/TableBodyCell.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { tableBodyCell } from "./theme";
+  import type { TableBodyCellProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, class: className, colspan, onclick, ...restProps }: TableBodyCellProps = $props();
+
+  const theme = $derived(getTheme("tableBodyCell"));
+</script>
+
+<td {...restProps} class={tableBodyCell({ class: clsx(theme, className) })} colspan={colspan ?? 1}>
+  {#if onclick}
+    <button {onclick}>
+      {#if children}
+        {@render children()}
+      {/if}
+    </button>
+  {:else if children}
+    {@render children()}
+  {/if}
+</td>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
+## Props
+@prop children
+@prop class: className
+@prop colspan
+@prop onclick
+@prop ...restProps
+-->

package/dist/table/TableBodyCell.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { TableBodyCellProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop colspan
+ * @prop onclick
+ * @prop ...restProps
+ */
+declare const TableBodyCell: import("svelte").Component<TableBodyCellProps, {}, "">;
+type TableBodyCell = ReturnType<typeof TableBodyCell>;
+export default TableBodyCell;

package/dist/table/TableBodyRow.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { getTableContext } from "../context";
+  import { tableBodyRow } from "./theme";
+  import type { TableBodyRowProps } from "../types";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, class: className, color, striped, hoverable, border, ...restProps }: TableBodyRowProps = $props();
+
+  const theme = $derived(getTheme("tableBodyRow"));
+
+  const tableCtx = getTableContext();
+  // for reactivity with svelte context
+  let compoColor = $derived(color || tableCtx?.color || "default");
+  let compoHoverable = $derived(hoverable || tableCtx?.hoverable || false);
+  let compoStriped = $derived(striped || tableCtx?.striped || false);
+  let compoBorder = $derived(border || tableCtx?.border || false);
+
+  const base = $derived(tableBodyRow({ color: compoColor, hoverable: compoHoverable, striped: compoStriped, border: compoBorder, class: clsx(theme, className) }));
+</script>
+
+<tr {...restProps} class={base}>
+  {#if children}
+    {@render children()}
+  {/if}
+</tr>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1795)
+## Props
+@prop children
+@prop class: className
+@prop color
+@prop striped
+@prop hoverable
+@prop border
+@prop ...restProps
+-->

package/dist/table/TableBodyRow.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { TableBodyRowProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1795)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop color
+ * @prop striped
+ * @prop hoverable
+ * @prop border
+ * @prop ...restProps
+ */
+declare const TableBodyRow: import("svelte").Component<TableBodyRowProps, {}, "">;
+type TableBodyRow = ReturnType<typeof TableBodyRow>;
+export default TableBodyRow;

package/dist/table/TableHead.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { getTableContext } from "../context";
+  import TableHeadCell from "./TableHeadCell.svelte";
+  import { tableHead } from "./theme";
+  import type { TableHeadProps, HeadItemType } from "../types";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, headerSlot, color, striped, border, class: className, headItems, defaultRow = true, ...restProps }: TableHeadProps = $props();
+
+  const theme = $derived(getTheme("tableHead"));
+
+  const tableCtx = getTableContext();
+  // for reactivity with svelte context
+  let compoColor = $derived(color ? color : tableCtx?.color || "default");
+  let compoStriped = $derived(striped ? striped : tableCtx?.striped || false);
+  let compoBorder = $derived(border ? border : tableCtx?.border || false);
+
+  const base = $derived(tableHead({ color: compoColor, border: compoBorder, striped: compoStriped, class: clsx(theme, className) }));
+
+  function getItemText(item: HeadItemType): string {
+    if (typeof item === "object" && "text" in item) {
+      return item.text;
+    }
+    return String(item);
+  }
+</script>
+
+<thead {...restProps} class={base}>
+  {#if headItems}
+    {#if headerSlot}
+      {@render headerSlot()}
+    {/if}
+    <tr>
+      {#each headItems as item, i (i)}
+        <TableHeadCell>
+          {getItemText(item)}
+        </TableHeadCell>
+      {/each}
+    </tr>
+  {:else if children}
+    {#if defaultRow}
+      <tr>
+        {@render children()}
+      </tr>
+    {:else}
+      {@render children()}
+    {/if}
+  {/if}
+</thead>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1770)
+## Props
+@prop children
+@prop headerSlot
+@prop color
+@prop striped
+@prop border
+@prop class: className
+@prop headItems
+@prop defaultRow = true
+@prop ...restProps
+-->

package/dist/table/TableHead.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { TableHeadProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1770)
+ * ## Props
+ * @prop children
+ * @prop headerSlot
+ * @prop color
+ * @prop striped
+ * @prop border
+ * @prop class: className
+ * @prop headItems
+ * @prop defaultRow = true
+ * @prop ...restProps
+ */
+declare const TableHead: import("svelte").Component<TableHeadProps, {}, "">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;

package/dist/table/TableHeadCell.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { tableHeadCell } from "./theme";
+  import type { TableHeadCellProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, class: className, ...restProps }: TableHeadCellProps = $props();
+
+  const theme = $derived(getTheme("tableHeadCell"));
+</script>
+
+<th {...restProps} class={tableHeadCell({ class: clsx(theme, className) })}>
+  {#if children}
+    {@render children()}
+  {/if}
+</th>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1819)
+## Props
+@prop children
+@prop class: className
+@prop ...restProps
+-->

package/dist/table/TableHeadCell.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { TableHeadCellProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1819)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const TableHeadCell: import("svelte").Component<TableHeadCellProps<any>, {}, "">;
+type TableHeadCell = ReturnType<typeof TableHeadCell>;
+export default TableHeadCell;