flowbite-svelte 0.36.4 → 0.37.1

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         noborder?: boolean | undefined;
         shadow?: boolean | undefined;
         color?: TableColorType | undefined;
+        customeColor?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,6 +21,68 @@ declare const __propDef: {
 export type TableProps = typeof __propDef.props;
 export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Table](https://flowbite-svelte.com/docs/components/table)
+ * - Setup
+ * - Default table
+ * - Striped rows
+ * - Hover state
+ * - Checkbox
+ * - Search input
+ * - Sorting by column
+ * - Table head
+ * - Table foot
+ * - Table caption
+ * - Without border
+ * - Table with shadow
+ * - Overflow scrolling
+ * - Table colors
+ * - Striped rows color
+ * ## Props
+ * @prop divClass: string = 'relative overflow-x-auto';
+ * @prop striped: boolean = false;
+ * @prop hoverable: boolean = false;
+ * @prop noborder: boolean = false;
+ * @prop shadow: boolean = false;
+ * @prop color: TableColorType = 'default';
+ * @prop customeColor: string = '';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Table>
+ *   <TableHead>
+ *     <TableHeadCell>Product name</TableHeadCell>
+ *     <TableHeadCell>Color</TableHeadCell>
+ *     <TableHeadCell>Category</TableHeadCell>
+ *     <TableHeadCell>Price</TableHeadCell>
+ *   </TableHead>
+ *   <TableBody class="divide-y">
+ *     <TableBodyRow>
+ *       <TableBodyCell>Apple MacBook Pro 17"</TableBodyCell>
+ *       <TableBodyCell>Sliver</TableBodyCell>
+ *       <TableBodyCell>Laptop</TableBodyCell>
+ *       <TableBodyCell>$2999</TableBodyCell>
+ *     </TableBodyRow>
+ *     <TableBodyRow>
+ *       <TableBodyCell>Microsoft Surface Pro</TableBodyCell>
+ *       <TableBodyCell>White</TableBodyCell>
+ *       <TableBodyCell>Laptop PC</TableBodyCell>
+ *       <TableBodyCell>$1999</TableBodyCell>
+ *     </TableBodyRow>
+ *     <TableBodyRow>
+ *       <TableBodyCell>Magic Mouse 2</TableBodyCell>
+ *       <TableBodyCell>Black</TableBodyCell>
+ *       <TableBodyCell>Accessories</TableBodyCell>
+ *       <TableBodyCell>$99</TableBodyCell>
+ *     </TableBodyRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
 export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
 }
 export {};

package/dist/tables/Table.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/Table.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAwC/C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/Table.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AA2C/C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/tables/TableBody.svelte

@@ -4,3 +4,11 @@
 <tbody class={tableBodyClass}>
   <slot />
 </tbody>
+
+<!--
+  @component
+  ## Features
+  [Go to Table](https://flowbite-svelte.com/docs/components/table)
+  ## Props
+  @prop tableBodyClass: string | undefined = undefined;
+-->

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

@@ -13,6 +13,12 @@ declare const __propDef: {
 export type TableBodyProps = typeof __propDef.props;
 export type TableBodyEvents = typeof __propDef.events;
 export type TableBodySlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Table](https://flowbite-svelte.com/docs/components/table)
+ * ## Props
+ * @prop tableBodyClass: string | undefined = undefined;
+ */
 export default class TableBody extends SvelteComponentTyped<TableBodyProps, TableBodyEvents, TableBodySlots> {
 }
 export {};

package/dist/tables/TableBody.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableBody.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAWD,QAAA,MAAM,SAAS;;yBADuD,MAAM,GAAG,SAAS;;;;;;;;CACjC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"TableBody.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableBody.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;yBADuD,MAAM,GAAG,SAAS;;;;;;;;CACjC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/tables/TableBodyCell.svelte

@@ -9,15 +9,33 @@ $: tdClassfinal = classNames(tdClass, color === 'default'
     : 'text-blue-50 whitespace-nowrap dark:text-blue-100', $$props.class);
 </script>
 
-<td {...$$restProps} class={tdClassfinal} 
-on:click
-on:focus
-on:keydown
-on:keypress
-on:keyup
-on:mouseenter
-on:mouseleave
-on:mouseover
->
+<td
+  {...$$restProps}
+  class={tdClassfinal}
+  on:click
+  on:focus
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseenter
+  on:mouseleave
+  on:mouseover>
   <slot />
 </td>
+
+<!--
+  @component
+  ## Features
+  [Go to Table](https://flowbite-svelte.com/docs/components/table)
+  ## Props
+  @prop tdClass: string = 'px-6 py-4 whitespace-nowrap font-medium ';
+  ## Event
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+-->

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

@@ -23,6 +23,21 @@ declare const __propDef: {
 export type TableBodyCellProps = typeof __propDef.props;
 export type TableBodyCellEvents = typeof __propDef.events;
 export type TableBodyCellSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Table](https://flowbite-svelte.com/docs/components/table)
+ * ## Props
+ * @prop tdClass: string = 'px-6 py-4 whitespace-nowrap font-medium ';
+ * ## Event
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ */
 export default class TableBodyCell extends SvelteComponentTyped<TableBodyCellProps, TableBodyCellEvents, TableBodyCellSlots> {
 }
 export {};

package/dist/tables/TableBodyCell.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableBodyCell.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableBodyCell.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"TableBodyCell.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableBodyCell.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/tables/TableBodyRow.svelte

@@ -35,3 +35,11 @@ $: trClass = classNames(!getContext('noborder') && 'border-b last:border-b-0', c
 <tr {...$$restProps} class={trClass} on:click on:contextmenu>
   <slot />
 </tr>
+
+<!--
+  @component
+  ## Features
+  [Go to Table](https://flowbite-svelte.com/docs/components/table)
+  ## Props
+  @prop color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = getContext('color');
+-->

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

@@ -17,6 +17,12 @@ declare const __propDef: {
 export type TableBodyRowProps = typeof __propDef.props;
 export type TableBodyRowEvents = typeof __propDef.events;
 export type TableBodyRowSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Table](https://flowbite-svelte.com/docs/components/table)
+ * ## Props
+ * @prop color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = getContext('color');
+ */
 export default class TableBodyRow extends SvelteComponentTyped<TableBodyRowProps, TableBodyRowEvents, TableBodyRowSlots> {
 }
 export {};

package/dist/tables/TableBodyRow.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableBodyRow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableBodyRow.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"TableBodyRow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableBodyRow.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/tables/TableHead.svelte

@@ -40,3 +40,12 @@ $: theadClassfinal = classNames(theadClass, textColor, striped && borderColors,
     <slot />
   {/if}
 </thead>
+
+<!--
+  @component
+  ## Features
+  [Go to Table](https://flowbite-svelte.com/docs/components/table)
+  ## Props
+  @prop theadClass: string = 'text-xs uppercase';
+  @prop defaultRow: boolean = true;
+-->

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

@@ -15,6 +15,13 @@ declare const __propDef: {
 export type TableHeadProps = typeof __propDef.props;
 export type TableHeadEvents = typeof __propDef.events;
 export type TableHeadSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Table](https://flowbite-svelte.com/docs/components/table)
+ * ## Props
+ * @prop theadClass: string = 'text-xs uppercase';
+ * @prop defaultRow: boolean = true;
+ */
 export default class TableHead extends SvelteComponentTyped<TableHeadProps, TableHeadEvents, TableHeadSlots> {
 }
 export {};

package/dist/tables/TableHead.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableHead.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6DD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"TableHead.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableHead.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+DD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/tables/TableHeadCell.svelte

@@ -2,15 +2,33 @@
 export let padding = 'px-6 py-3';
 </script>
 
-<th {...$$restProps} class={classNames(padding, $$props.class)}
-on:click
-on:focus
-on:keydown
-on:keypress
-on:keyup
-on:mouseenter
-on:mouseleave
-on:mouseover
->
-	<slot />
+<th
+  {...$$restProps}
+  class={classNames(padding, $$props.class)}
+  on:click
+  on:focus
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseenter
+  on:mouseleave
+  on:mouseover>
+  <slot />
 </th>
+
+<!--
+  @component
+  ## Features
+  [Go to Table](https://flowbite-svelte.com/docs/components/table)
+  ## Props
+  @prop padding: string = 'px-6 py-3';
+  ## Event
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+-->

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

@@ -23,6 +23,21 @@ declare const __propDef: {
 export type TableHeadCellProps = typeof __propDef.props;
 export type TableHeadCellEvents = typeof __propDef.events;
 export type TableHeadCellSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Table](https://flowbite-svelte.com/docs/components/table)
+ * ## Props
+ * @prop padding: string = 'px-6 py-3';
+ * ## Event
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ */
 export default class TableHeadCell extends SvelteComponentTyped<TableHeadCellProps, TableHeadCellEvents, TableHeadCellSlots> {
 }
 export {};

package/dist/tables/TableHeadCell.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableHeadCell.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"TableHeadCell.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableHeadCell.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/tables/TableSearch.svelte

@@ -5,6 +5,7 @@ export let inputValue = '';
 export let striped = false;
 export let hoverable = false;
 export let placeholder = 'Search';
+export let customColor = '';
 export let color = 'default';
 const colors = {
     default: 'text-gray-500 dark:text-gray-400',
@@ -13,7 +14,7 @@ const colors = {
     red: 'text-red-100 dark:text-red-100',
     yellow: 'text-yellow-100 dark:text-yellow-100',
     purple: 'text-purple-100 dark:text-purple-100',
-    custom: ''
+    custom: customColor
 };
 $: setContext('striped', striped);
 $: setContext('hoverable', hoverable);
@@ -21,35 +22,43 @@ $: setContext('color', color);
 </script>
 
 <div class={divClass}>
-	<div class="p-4">
-		<label for="table-search" class="sr-only">Search</label>
-		<div class="relative mt-1">
-			<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-				<svg
-					class="w-5 h-5 text-gray-500 dark:text-gray-400"
-					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
-				>
-			</div>
-			<input
-				bind:value={inputValue}
-				type="text"
-				id="table-search"
-				class="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 pl-10 p-2.5  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"
-				{placeholder}
-			/>
-		</div>
-	</div>
-	<table
-		{...$$restProps}
-		class={classNames('w-full text-left text-sm', colors[color], $$props.class)}
-	>
-		<slot />
-	</table>
+  <div class="p-4">
+    <label for="table-search" class="sr-only">Search</label>
+    <div class="relative mt-1">
+      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+        <svg
+          class="w-5 h-5 text-gray-500 dark:text-gray-400"
+          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>
+      </div>
+      <input
+        bind:value={inputValue}
+        type="text"
+        id="table-search"
+        class="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 pl-10 p-2.5 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"
+        {placeholder} />
+    </div>
+  </div>
+  <table {...$$restProps} class={classNames('w-full text-left text-sm', colors[color], $$props.class)}>
+    <slot />
+  </table>
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Table](https://flowbite-svelte.com/docs/components/table)
+  ## Props
+  @prop divClass: string = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+  @prop inputValue: string = '';
+  @prop striped: boolean = false;
+  @prop hoverable: boolean = false;
+  @prop placeholder: string = 'Search';
+  @prop customColor: string = '';
+  @prop color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
+-->

package/dist/tables/TableSearch.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         striped?: boolean | undefined;
         hoverable?: boolean | undefined;
         placeholder?: string | undefined;
+        customColor?: string | undefined;
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "default" | "custom" | undefined;
     };
     events: {
@@ -19,6 +20,18 @@ declare const __propDef: {
 export type TableSearchProps = typeof __propDef.props;
 export type TableSearchEvents = typeof __propDef.events;
 export type TableSearchSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Table](https://flowbite-svelte.com/docs/components/table)
+ * ## Props
+ * @prop divClass: string = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+ * @prop inputValue: string = '';
+ * @prop striped: boolean = false;
+ * @prop hoverable: boolean = false;
+ * @prop placeholder: string = 'Search';
+ * @prop customColor: string = '';
+ * @prop color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
+ */
 export default class TableSearch extends SvelteComponentTyped<TableSearchProps, TableSearchEvents, TableSearchSlots> {
 }
 export {};

package/dist/tables/TableSearch.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableSearch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableSearch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"TableSearch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tables/TableSearch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/tabs/TabItem.svelte

@@ -52,3 +52,53 @@ $: buttonClass = classNames(defaultClass, open ? activeClasses ?? ctx.activeClas
     </div>
   {/if}
 </li>
+
+<!--
+  @component
+  ## Features
+  [Go to Tab](https://flowbite-svelte.com/docs/components/tab)
+  ## Props
+  @prop open: boolean = false;
+  @prop title: string = 'Tab title';
+  @prop activeClasses: string | undefined = undefined;
+  @prop inactiveClasses: string | undefined = undefined;
+  @prop defaultClass: string =
+    'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+  ## Event
+  - on:blur
+  - on:click
+  - on:contextmenu
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  ## Example
+  ```
+  <script>
+    import { Tabs, TabItem } from 'flowbite-svelte';
+  </script>
+  
+  <Tabs>
+    <TabItem open title="Profile">
+      <p class="text-sm text-gray-500 dark:text-gray-400"><b>Profile:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </TabItem>
+    <TabItem title="Settings">
+      <p class="text-sm text-gray-500 dark:text-gray-400"><b>Settings:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </TabItem>
+    <TabItem title="Users">
+      <p class="text-sm text-gray-500 dark:text-gray-400"><b>Users:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </TabItem>
+    <TabItem title="Dashboard">
+      <p class="text-sm text-gray-500 dark:text-gray-400"><b>Dashboard:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </TabItem>
+    <TabItem disabled>
+      <span slot="title" class="text-gray-400 dark:text-gray-500">Disabled</span>
+      <p class="text-sm text-gray-500 dark:text-gray-400"><b>Disabled:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </TabItem>
+  </Tabs>
+  ```
+  
+-->

package/dist/tabs/TabItem.svelte.d.ts

@@ -30,6 +30,53 @@ declare const __propDef: {
 export type TabItemProps = typeof __propDef.props;
 export type TabItemEvents = typeof __propDef.events;
 export type TabItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Tab](https://flowbite-svelte.com/docs/components/tab)
+ * ## Props
+ * @prop open: boolean = false;
+ * @prop title: string = 'Tab title';
+ * @prop activeClasses: string | undefined = undefined;
+ * @prop inactiveClasses: string | undefined = undefined;
+ * @prop defaultClass: string =
+ *   'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+ * ## Event
+ * - on:blur
+ * - on:click
+ * - on:contextmenu
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * ## Example
+ * ```
+ * <script>
+ *   import { Tabs, TabItem } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Tabs>
+ *   <TabItem open title="Profile">
+ *     <p class="text-sm text-gray-500 dark:text-gray-400"><b>Profile:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *   </TabItem>
+ *   <TabItem title="Settings">
+ *     <p class="text-sm text-gray-500 dark:text-gray-400"><b>Settings:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *   </TabItem>
+ *   <TabItem title="Users">
+ *     <p class="text-sm text-gray-500 dark:text-gray-400"><b>Users:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *   </TabItem>
+ *   <TabItem title="Dashboard">
+ *     <p class="text-sm text-gray-500 dark:text-gray-400"><b>Dashboard:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *   </TabItem>
+ *   <TabItem disabled>
+ *     <span slot="title" class="text-gray-400 dark:text-gray-500">Disabled</span>
+ *     <p class="text-sm text-gray-500 dark:text-gray-400"><b>Disabled:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *   </TabItem>
+ * </Tabs>
+ * ```
+ */
 export default class TabItem extends SvelteComponentTyped<TabItemProps, TabItemEvents, TabItemSlots> {
 }
 export {};

package/dist/tabs/TabItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tabs/TabItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;wBADgL,MAAM,GAAG,SAAS;0BAAoB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzK,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"TabItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tabs/TabItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8DD,QAAA,MAAM,SAAS;;;;;wBADgL,MAAM,GAAG,SAAS;0BAAoB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzK,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/tabs/Tabs.svelte

@@ -48,3 +48,51 @@ $: ulClass = classNames(defaultClass, style === 'underline' && '-mb-px', $$props
   </slot>
 {/if}
 <div class={contentClass} role="tabpanel" aria-labelledby="id-tab" use:init />
+
+<!--
+  @component
+  ## Features
+  [Go to Tab](https://flowbite-svelte.com/docs/components/tab)
+  - Setup
+  - Default tabs
+  - Tabs with underline
+  - Tabs with icons
+  - Pills tabs
+  - Full width tabs
+  - Components in tab contents
+  - Custom style
+  ## Props
+  @prop style: 'full' | 'pill' | 'underline' | 'none' = 'none';
+  @prop defaultClass: string = 'flex flex-wrap space-x-2';
+  @prop contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
+  @prop divider: boolean = true;
+  @prop activeClasses: string =
+    'p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500';
+  @prop inactiveClasses: string =
+    'p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300';  
+  ## Example
+  ```
+  <script>
+    import { Tabs, TabItem } from 'flowbite-svelte';
+  </script>
+  
+  <Tabs>
+    <TabItem open title="Profile">
+      <p class="text-sm text-gray-500 dark:text-gray-400"><b>Profile:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </TabItem>
+    <TabItem title="Settings">
+      <p class="text-sm text-gray-500 dark:text-gray-400"><b>Settings:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </TabItem>
+    <TabItem title="Users">
+      <p class="text-sm text-gray-500 dark:text-gray-400"><b>Users:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </TabItem>
+    <TabItem title="Dashboard">
+      <p class="text-sm text-gray-500 dark:text-gray-400"><b>Dashboard:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </TabItem>
+    <TabItem disabled>
+      <span slot="title" class="text-gray-400 dark:text-gray-500">Disabled</span>
+      <p class="text-sm text-gray-500 dark:text-gray-400"><b>Disabled:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </TabItem>
+  </Tabs>
+  ```
+-->