flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/table/Table.svelte

@@ -1,96 +1,65 @@
-<script generics="T">import { writable } from "svelte/store";
-import { twMerge, twJoin } from "tailwind-merge";
-import { setContext } from "svelte";
-export let divClass = "relative overflow-x-auto";
-export let striped = false;
-export let hoverable = false;
-export let noborder = false;
-export let shadow = false;
-export let color = "default";
-export let customeColor = "";
-export let items = [];
-export let filter = null;
-export let placeholder = "Search";
-export let innerDivClass = "p-4";
-export let searchClass = "relative mt-1";
-export let svgDivClass = "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none";
-export let svgClass = "w-5 h-5 text-gray-500 dark:text-gray-400";
-export let inputClass = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500";
-export let classInput = "";
-export let classSvgDiv = "";
-let searchTerm = "";
-let inputCls = twMerge(inputClass, classInput);
-let svgDivCls = twMerge(svgDivClass, classSvgDiv);
-const colors = {
-  default: "text-gray-500 dark:text-gray-400",
-  blue: "text-blue-100 dark:text-blue-100",
-  green: "text-green-100 dark:text-green-100",
-  red: "text-red-100 dark:text-red-100",
-  yellow: "text-yellow-100 dark:text-yellow-100",
-  purple: "text-purple-100 dark:text-purple-100",
-  indigo: "text-indigo-100 dark:text-indigo-100",
-  pink: "text-pink-100 dark:text-pink-100",
-  custom: customeColor
-};
-$: setContext("striped", striped);
-$: setContext("hoverable", hoverable);
-$: setContext("noborder", noborder);
-$: setContext("color", color);
-$: setContext("items", items);
-const searchTermStore = writable(searchTerm);
-const filterStore = writable(filter);
-setContext("searchTerm", searchTermStore);
-setContext("filter", filterStore);
-$: searchTermStore.set(searchTerm);
-$: {
-  if (filter) filterStore.set(filter);
-}
-setContext("sorter", writable(null));
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { type TableProps as Props, table as tableCls, type TableCtxType, TableHead, TableBody, type HeadItemType } from ".";
+
+  let { children, footerSlot, captionSlot, tableItems, divClass = "relative overflow-x-auto", striped, hoverable, noborder, shadow, color = "default", class: className, ...restProps }: Props = $props();
+
+  const { base, table } = $derived(tableCls({ color, shadow }));
+
+  let tableCtx: TableCtxType = {
+    get striped() {
+      return striped;
+    },
+    get hoverable() {
+      return hoverable;
+    },
+    get noborder() {
+      return noborder;
+    },
+    get color() {
+      return color;
+    }
+  };
+
+  setContext("tableCtx", tableCtx);
+  let headItems: (string | HeadItemType)[] = $state([]);
+  let bodyItems: (string | number | boolean)[][] = $state([]);
+  if (tableItems) {
+    headItems = Object.keys(tableItems[0]).map((key) => ({ text: key.charAt(0).toUpperCase() + key.slice(1) }));
+    bodyItems = tableItems.map((item) => Object.values(item));
+  }
 </script>
 
-<div class={twJoin(divClass, shadow && 'shadow-md sm:rounded-lg')}>
-  {#if filter}
-    <slot name="search">
-      <div class={innerDivClass}>
-        <label for="table-search" class="sr-only">Search</label>
-        <div class={searchClass}>
-          <div class={svgDivCls}>
-            <slot name="svgSearch">
-              <svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-              </svg>
-            </slot>
-          </div>
-          <input bind:value={searchTerm} type="text" id="table-search" class={inputCls} {placeholder} />
-        </div>
-        <slot name="header" />
-      </div>
-    </slot>
-  {/if}
-  <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
-    <slot />
+<div class={base({ class: divClass })}>
+  <table {...restProps} class={table({ className })}>
+    {#if captionSlot}
+      {@render captionSlot()}
+    {/if}
+    {#if tableItems}
+      <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/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'relative overflow-x-auto';
-@prop export let striped: $$Props['striped'] = false;
-@prop export let hoverable: $$Props['hoverable'] = false;
-@prop export let noborder: $$Props['noborder'] = false;
-@prop export let shadow: $$Props['shadow'] = false;
-@prop export let color: NonNullable<$$Props['color']> = 'default';
-@prop export let customeColor: $$Props['customeColor'] = '';
-@prop export let items: $$Props['items'] = [];
-@prop export let filter: $$Props['filter'] = null;
-@prop export let placeholder: $$Props['placeholder'] = 'Search';
-@prop export let innerDivClass: $$Props['innerDivClass'] = 'p-4';
-@prop export let searchClass: $$Props['searchClass'] = 'relative mt-1';
-@prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
-@prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-@prop export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
-@prop export let classInput: $$Props['classInput'] = '';
-@prop export let classSvgDiv: $$Props['classSvgDiv'] = '';
+@props: children: any;
+@props:footerSlot: any;
+@props:captionSlot: any;
+@props:tableItems: any;
+@props:divClass: any = "relative overflow-x-auto";
+@props:striped: any;
+@props:hoverable: any;
+@props:noborder: any;
+@props:shadow: any;
+@props:color: any = "default";
+@props:class: string;
 -->

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

@@ -1,60 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLTableAttributes } from 'svelte/elements';
-import type { TableColorType } from '../types';
-declare class __sveltets_Render<T> {
-    props(): HTMLTableAttributes & {
-        divClass?: string;
-        striped?: boolean;
-        hoverable?: boolean;
-        noborder?: boolean;
-        shadow?: boolean;
-        color?: TableColorType;
-        customeColor?: string;
-        items?: T[] | undefined;
-        filter?: ((t: T, term: string) => boolean) | null | undefined;
-        placeholder?: string;
-        innerDivClass?: string;
-        searchClass?: string;
-        svgDivClass?: string;
-        svgClass?: string;
-        inputClass?: string;
-        classInput?: string;
-        classSvgDiv?: string;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        search: {};
-        svgSearch: {};
-        header: {};
-        default: {};
-    };
-}
-export type TableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+import { type TableProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'relative overflow-x-auto';
- * @prop export let striped: $$Props['striped'] = false;
- * @prop export let hoverable: $$Props['hoverable'] = false;
- * @prop export let noborder: $$Props['noborder'] = false;
- * @prop export let shadow: $$Props['shadow'] = false;
- * @prop export let color: NonNullable<$$Props['color']> = 'default';
- * @prop export let customeColor: $$Props['customeColor'] = '';
- * @prop export let items: $$Props['items'] = [];
- * @prop export let filter: $$Props['filter'] = null;
- * @prop export let placeholder: $$Props['placeholder'] = 'Search';
- * @prop export let innerDivClass: $$Props['innerDivClass'] = 'p-4';
- * @prop export let searchClass: $$Props['searchClass'] = 'relative mt-1';
- * @prop export let svgDivClass: $$Props['svgDivClass'] = 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none';
- * @prop export let svgClass: $$Props['svgClass'] = 'w-5 h-5 text-gray-500 dark:text-gray-400';
- * @prop export let inputClass: $$Props['inputClass'] = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
- * @prop export let classInput: $$Props['classInput'] = '';
- * @prop export let classSvgDiv: $$Props['classSvgDiv'] = '';
+ * @props: children: any;
+ * @props:footerSlot: any;
+ * @props:captionSlot: any;
+ * @props:tableItems: any;
+ * @props:divClass: any = "relative overflow-x-auto";
+ * @props:striped: any;
+ * @props:hoverable: any;
+ * @props:noborder: any;
+ * @props:shadow: any;
+ * @props:color: any = "default";
+ * @props:class: string;
  */
-export default class Table<T> extends SvelteComponentTyped<TableProps<T>, TableEvents<T>, TableSlots<T>> {
-}
-export {};
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/table/TableBody.svelte

@@ -1,23 +1,36 @@
-<script generics="T">import { getContext } from "svelte";
-export let tableBodyClass = void 0;
-$: items = getContext("items") || [];
-let filter = getContext("filter");
-let searchTerm = getContext("searchTerm");
-$: filtered = $filter ? items.filter((item) => $filter(item, $searchTerm)) : items;
-let sorter = getContext("sorter");
-$: sorted = $sorter ? filtered.toSorted((a, b) => $sorter.sortDirection * $sorter.sort(a, b)) : filtered;
+<script lang="ts">
+  import { TableBodyRow, TableBodyCell, type TableBodyProps as Props, type CellValue, type BodyRow } from ".";
+
+  let { children, bodyItems, class: className, ...restProps }: Props = $props();
+
+  function getCellValues(row: BodyRow): CellValue[] {
+    if (Array.isArray(row)) {
+      return row;
+    } else {
+      return Object.values(row);
+    }
+  }
 </script>
 
-<tbody {...$$restProps} class={tableBodyClass}>
-  <slot />
-  {#each sorted as item}
-    <slot name="row" {item} />
-  {/each}
+<tbody {...restProps} class={className}>
+  {#if bodyItems}
+    {#each bodyItems as row}
+      <TableBodyRow>
+        {#each getCellValues(row) as cellValue}
+          <TableBodyCell>{cellValue ?? ""}</TableBodyCell>
+        {/each}
+      </TableBodyRow>
+    {/each}
+  {:else if children}
+    {@render children()}
+  {/if}
 </tbody>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let tableBodyClass: $$Props['tableBodyClass'] = undefined;
+@props: children: any;
+@props:bodyItems: any;
+@props:class: string;
 -->

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

@@ -1,27 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-declare class __sveltets_Render<T> {
-    props(): HTMLAttributes<HTMLTableSectionElement> & {
-        tableBodyClass?: string;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        default: {};
-        row: {
-            item: T;
-        };
-    };
-}
-export type TableBodyProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TableBodyEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TableBodySlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+import { type TableBodyProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let tableBodyClass: $$Props['tableBodyClass'] = undefined;
+ * @props: children: any;
+ * @props:bodyItems: any;
+ * @props:class: string;
  */
-export default class TableBody<T> extends SvelteComponentTyped<TableBodyProps<T>, TableBodyEvents<T>, TableBodySlots<T>> {
-}
-export {};
+declare const TableBody: import("svelte").Component<Props, {}, "">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/table/TableBodyCell.svelte

@@ -1,25 +1,29 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let tdClass = "px-6 py-4 whitespace-nowrap font-medium ";
-let color = "default";
-color = getContext("color");
-let tdClassfinal;
-$: tdClassfinal = twMerge(tdClass, color === "default" ? "text-gray-900 dark:text-white" : "text-blue-50 whitespace-nowrap dark:text-blue-100", $$props.class);
+<script lang="ts">
+  import { type TableBodyCellProps as Props, tablebodycell } from "./";
+
+  let { children, class: className, colspan, onclick, ...restProps }: Props = $props();
+
+  const base = $derived(tablebodycell({ className }));
 </script>
 
-<td {...$$restProps} class={tdClassfinal}>
-  {#if $$props.onclick}
-  <button on:click={$$props.onclick}>
-    <slot />
-  </button>
-  {:else}
-    <slot />
+<td {...restProps} class={base} 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/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let tdClass: $$Props['tdClass'] = 'px-6 py-4 whitespace-nowrap font-medium ';
+@props: children: any;
+@props:class: string;
+@props:colspan: any;
+@props:onclick: any;
 -->

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

@@ -1,24 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLTdAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLTdAttributes & {
-        tdClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TableBodyCellProps = typeof __propDef.props;
-export type TableBodyCellEvents = typeof __propDef.events;
-export type TableBodyCellSlots = typeof __propDef.slots;
+import { type TableBodyCellProps as Props } from "./";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let tdClass: $$Props['tdClass'] = 'px-6 py-4 whitespace-nowrap font-medium ';
+ * @props: children: any;
+ * @props:class: string;
+ * @props:colspan: any;
+ * @props:onclick: any;
  */
-export default class TableBodyCell extends SvelteComponentTyped<TableBodyCellProps, TableBodyCellEvents, TableBodyCellSlots> {
-}
-export {};
+declare const TableBodyCell: import("svelte").Component<Props, {}, "">;
+type TableBodyCell = ReturnType<typeof TableBodyCell>;
+export default TableBodyCell;

package/dist/table/TableBodyRow.svelte

@@ -1,44 +1,33 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let color = getContext("color");
-const colors = {
-  default: "bg-white dark:bg-gray-800 dark:border-gray-700",
-  blue: "bg-blue-500 border-blue-400",
-  green: "bg-green-500 border-green-400",
-  red: "bg-red-500 border-red-400",
-  yellow: "bg-yellow-500 border-yellow-400",
-  purple: "bg-purple-500 border-purple-400",
-  custom: ""
-};
-const hoverColors = {
-  default: "hover:bg-gray-50 dark:hover:bg-gray-600",
-  blue: "hover:bg-blue-400",
-  green: "hover:bg-green-400",
-  red: "hover:bg-red-400",
-  yellow: "hover:bg-yellow-400",
-  purple: "hover:bg-purple-400",
-  custom: ""
-};
-const stripColors = {
-  default: "odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700",
-  blue: "odd:bg-blue-800 even:bg-blue-700 odd:dark:bg-blue-800 even:dark:bg-blue-700",
-  green: "odd:bg-green-800 even:bg-green-700 odd:dark:bg-green-800 even:dark:bg-green-700",
-  red: "odd:bg-red-800 even:bg-red-700 odd:dark:bg-red-800 even:dark:bg-red-700",
-  yellow: "odd:bg-yellow-800 even:bg-yellow-700 odd:dark:bg-yellow-800 even:dark:bg-yellow-700",
-  purple: "odd:bg-purple-800 even:bg-purple-700 odd:dark:bg-purple-800 even:dark:bg-purple-700",
-  custom: ""
-};
-let trClass;
-$: trClass = twMerge([!getContext("noborder") && "border-b last:border-b-0", colors[color], getContext("hoverable") && hoverColors[color], getContext("striped") && stripColors[color], $$props.class]);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { type TableBodyRowProps as Props, tablebodyrow, type TableCtxType, type TableColrType } from "./";
+
+  let { children, class: className, color, striped, hoverable, noborder, ...restProps }: Props = $props();
+
+  const tableCtx = getContext<TableCtxType>("tableCtx");
+  // for reactivity with svelte context
+  let compoColor = $derived(color ? color : tableCtx.color || "default");
+  let compoHoverable = $derived(hoverable ? hoverable : tableCtx.hoverable || false);
+  let compoStriped = $derived(striped ? striped : tableCtx.striped || false);
+  let compoNoborder = $derived(noborder ? noborder : tableCtx.noborder || false);
+
+  const base = $derived(tablebodyrow({ color: compoColor as TableColrType, hoverable: compoHoverable, striped: compoStriped, border: compoNoborder, className }));
 </script>
 
-<tr {...$$restProps} class={trClass} on:click on:contextmenu on:dblclick>
-  <slot />
+<tr {...restProps} class={base}>
+  {#if children}
+    {@render children()}
+  {/if}
 </tr>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let color: NonNullable<$$Props['color']> = getContext('color');
+@props: children: any;
+@props:class: string;
+@props:color: any;
+@props:striped: any;
+@props:hoverable: any;
+@props:noborder: any;
 -->

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

@@ -1,28 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLTableRowElement> & {
-        color?: "blue" | "green" | "red" | "yellow" | "purple" | "default" | "custom";
-    };
-    events: {
-        click: MouseEvent;
-        contextmenu: MouseEvent;
-        dblclick: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TableBodyRowProps = typeof __propDef.props;
-export type TableBodyRowEvents = typeof __propDef.events;
-export type TableBodyRowSlots = typeof __propDef.slots;
+import { type TableBodyRowProps as Props } from "./";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let color: NonNullable<$$Props['color']> = getContext('color');
+ * @props: children: any;
+ * @props:class: string;
+ * @props:color: any;
+ * @props:striped: any;
+ * @props:hoverable: any;
+ * @props:noborder: any;
  */
-export default class TableBodyRow extends SvelteComponentTyped<TableBodyRowProps, TableBodyRowEvents, TableBodyRowSlots> {
-}
-export {};
+declare const TableBodyRow: import("svelte").Component<Props, {}, "">;
+type TableBodyRow = ReturnType<typeof TableBodyRow>;
+export default TableBodyRow;

package/dist/table/TableHead.svelte

@@ -1,40 +1,58 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let theadClass = "text-xs uppercase";
-export let defaultRow = true;
-let color;
-color = getContext("color");
-let noborder = getContext("noborder");
-let striped = getContext("striped");
-let defaultBgColor = noborder || striped ? "" : "bg-gray-50 dark:bg-gray-700";
-const bgColors = {
-  default: defaultBgColor,
-  blue: "bg-blue-600",
-  green: "bg-green-600",
-  red: "bg-red-600",
-  yellow: "bg-yellow-600",
-  purple: "bg-purple-600",
-  custom: ""
-};
-let textColor = color === "default" ? "text-gray-700 dark:text-gray-400" : color === "custom" ? "" : "text-white  dark:text-white";
-let borderColors = striped ? "" : color === "default" ? "border-gray-700" : color === "custom" ? "" : `border-${color}-400`;
-$: theadClassfinal = twMerge(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { TableHeadCell, type TableHeadProps as Props, tablehead, type TableCtxType, type HeadItemType } from ".";
+
+  let { children, headerSlot, color, striped, noborder, class: className, headItems, defaultRow = true, ...restProps }: Props = $props();
+
+  const tableCtx = getContext<TableCtxType>("tableCtx");
+  // for reactivity with svelte context
+  let compoColor = $derived(color ? color : tableCtx.color || "default");
+  let compoStriped = $derived(striped ? striped : tableCtx.striped || false);
+  let compoNoborder = $derived(noborder ? noborder : tableCtx.noborder || false);
+
+  const base = $derived(tablehead({ color: compoColor, noborder: compoNoborder, striped: compoStriped, className }));
+
+  function getItemText(item: HeadItemType): string {
+    if (typeof item === "object" && "text" in item) {
+      return item.text;
+    }
+    return String(item);
+  }
 </script>
 
-<thead {...$$restProps} class={theadClassfinal}>
-  {#if defaultRow}
+<thead {...restProps} class={base}>
+  {#if headItems}
+    {#if headerSlot}
+      {@render headerSlot()}
+    {/if}
     <tr>
-      <slot />
+      {#each headItems as item}
+        <TableHeadCell>
+          {getItemText(item)}
+        </TableHeadCell>
+      {/each}
     </tr>
-  {:else}
-    <slot />
+  {:else if children}
+    {#if defaultRow}
+      <tr>
+        {@render children()}
+      </tr>
+    {:else}
+      {@render children()}
+    {/if}
   {/if}
 </thead>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let theadClass: $$Props['theadClass'] = 'text-xs uppercase';
-@prop export let defaultRow: $$Props['defaultRow'] = true;
+@props: children: any;
+@props:headerSlot: any;
+@props:color: any;
+@props:striped: any;
+@props:noborder: any;
+@props:class: string;
+@props:headItems: any;
+@props:defaultRow: any = true;
 -->

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

@@ -1,26 +1,16 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLTableSectionElement> & {
-        theadClass?: string;
-        defaultRow?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TableHeadProps = typeof __propDef.props;
-export type TableHeadEvents = typeof __propDef.events;
-export type TableHeadSlots = typeof __propDef.slots;
+import { type TableHeadProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let theadClass: $$Props['theadClass'] = 'text-xs uppercase';
- * @prop export let defaultRow: $$Props['defaultRow'] = true;
+ * @props: children: any;
+ * @props:headerSlot: any;
+ * @props:color: any;
+ * @props:striped: any;
+ * @props:noborder: any;
+ * @props:class: string;
+ * @props:headItems: any;
+ * @props:defaultRow: any = true;
  */
-export default class TableHead extends SvelteComponentTyped<TableHeadProps, TableHeadEvents, TableHeadSlots> {
-}
-export {};
+declare const TableHead: import("svelte").Component<Props, {}, "">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;