flowbite-svelte 0.27.15 → 0.27.16

package/spinners/Spinner.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: Colors | undefined;
+        bg?: string | undefined;
+        size?: string | undefined;
+        currentFill?: string | undefined;
+        currentColor?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SpinnerProps = typeof __propDef.props;
+export declare type SpinnerEvents = typeof __propDef.events;
+export declare type SpinnerSlots = typeof __propDef.slots;
+export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+}
+export {};

package/tables/Table.svelte

@@ -0,0 +1,31 @@
+<script>import classNames from 'classnames';
+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';
+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',
+    custom: ''
+};
+$: setContext('striped', striped);
+$: setContext('hoverable', hoverable);
+$: setContext('noborder', noborder);
+$: setContext('color', color);
+</script>
+
+<div class={classNames(divClass, shadow && 'shadow-md sm:rounded-lg')}>
+	<table
+		{...$$restProps}
+		class={classNames('w-full text-left text-sm', colors[color], $$props.class)}
+	>
+		<slot />
+	</table>
+</div>

package/tables/Table.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string | undefined;
+        striped?: boolean | undefined;
+        hoverable?: boolean | undefined;
+        noborder?: boolean | undefined;
+        shadow?: boolean | undefined;
+        color?: "red" | "yellow" | "green" | "default" | "purple" | "blue" | "custom" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TableProps = typeof __propDef.props;
+export declare type TableEvents = typeof __propDef.events;
+export declare type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/tables/TableBody.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TableBodyProps */
+/** @typedef {typeof __propDef.events}  TableBodyEvents */
+/** @typedef {typeof __propDef.slots}  TableBodySlots */
+export default class TableBody extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableBodyProps = typeof __propDef.props;
+export type TableBodyEvents = typeof __propDef.events;
+export type TableBodySlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/tables/TableBodyCell.svelte

@@ -0,0 +1,14 @@
+<script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+export let tdClass = 'px-6 py-4 whitespace-nowrap font-medium ';
+let color = 'default';
+color = getContext('color');
+let tdClassfinal;
+$: tdClassfinal = classNames(tdClass, color === 'default'
+    ? 'text-gray-900 dark:text-white'
+    : 'text-blue-50 whitespace-nowrap dark:text-blue-100', $$props.class);
+</script>
+
+<td {...$$restProps} class={tdClassfinal}>
+	<slot />
+</td>

package/tables/TableBodyCell.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tdClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TableBodyCellProps = typeof __propDef.props;
+export declare type TableBodyCellEvents = typeof __propDef.events;
+export declare type TableBodyCellSlots = typeof __propDef.slots;
+export default class TableBodyCell extends SvelteComponentTyped<TableBodyCellProps, TableBodyCellEvents, TableBodyCellSlots> {
+}
+export {};

package/tables/TableBodyRow.svelte

@@ -0,0 +1,39 @@
+<script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+export let trClass = 'bg-white';
+const colors = {
+    default: 'dark:border-gray-700 dark:bg-gray-800',
+    blue: 'bg-blue-500 border-b border-blue-400',
+    green: 'bg-green-500 border-b border-green-400',
+    red: 'bg-red-500 border-b border-red-400',
+    yellow: 'bg-yellow-500 border-b border-yellow-400',
+    purple: 'bg-purple-500 border-b 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 color = 'default';
+color = getContext('color');
+let trClassfinal;
+$: trClassfinal = classNames(getContext('noborder') ? 'bg-white dark:bg-gray-800' : trClass, colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class);
+</script>
+
+<tr {...$$restProps} class={trClassfinal}>
+	<slot />
+</tr>

package/tables/TableBodyRow.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        trClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TableBodyRowProps = typeof __propDef.props;
+export declare type TableBodyRowEvents = typeof __propDef.events;
+export declare type TableBodyRowSlots = typeof __propDef.slots;
+export default class TableBodyRow extends SvelteComponentTyped<TableBodyRowProps, TableBodyRowEvents, TableBodyRowSlots> {
+}
+export {};

package/tables/TableHead.svelte

@@ -0,0 +1,37 @@
+<script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+export let theadClass = 'text-xs uppercase';
+let color;
+color = getContext('color');
+let noborder = getContext('noborder');
+let striped = getContext('striped');
+let defatultBgColor = noborder || striped ? '' : 'bg-gray-50 dark:bg-gray-700';
+const bgColors = {
+    default: defatultBgColor,
+    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 = classNames(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
+</script>
+
+<thead {...$$restProps} class={theadClassfinal}>
+	<tr>
+		<slot />
+	</tr>
+</thead>

package/tables/TableHead.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        theadClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TableHeadProps = typeof __propDef.props;
+export declare type TableHeadEvents = typeof __propDef.events;
+export declare type TableHeadSlots = typeof __propDef.slots;
+export default class TableHead extends SvelteComponentTyped<TableHeadProps, TableHeadEvents, TableHeadSlots> {
+}
+export {};

package/tables/TableHeadCell.svelte

@@ -0,0 +1,6 @@
+<script>import classNames from 'classnames';
+</script>
+
+<th {...$$restProps} class={classNames('px-6 py-3', $$props.class)}>
+	<slot />
+</th>

package/tables/TableHeadCell.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TableHeadCellProps = typeof __propDef.props;
+export declare type TableHeadCellEvents = typeof __propDef.events;
+export declare type TableHeadCellSlots = typeof __propDef.slots;
+export default class TableHeadCell extends SvelteComponentTyped<TableHeadCellProps, TableHeadCellEvents, TableHeadCellSlots> {
+}
+export {};

package/tables/TableSearch.svelte

@@ -0,0 +1,55 @@
+<script>import classNames from 'classnames';
+import { setContext } from 'svelte';
+export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+export let inputValue = '';
+export let striped = false;
+export let hoverable = false;
+export let placeholder = 'Search';
+export let color = 'default';
+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',
+    custom: ''
+};
+$: setContext('striped', striped);
+$: setContext('hoverable', hoverable);
+$: 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>

package/tables/TableSearch.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string | undefined;
+        inputValue?: string | undefined;
+        striped?: boolean | undefined;
+        hoverable?: boolean | undefined;
+        placeholder?: string | undefined;
+        color?: "red" | "yellow" | "green" | "default" | "purple" | "blue" | "custom" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TableSearchProps = typeof __propDef.props;
+export declare type TableSearchEvents = typeof __propDef.events;
+export declare type TableSearchSlots = typeof __propDef.slots;
+export default class TableSearch extends SvelteComponentTyped<TableSearchProps, TableSearchEvents, TableSearchSlots> {
+}
+export {};

package/tabs/TabHead.svelte

@@ -0,0 +1,27 @@
+<script>export let tabStyle = 'default';
+export let customDivClass = '';
+export let customUlClass = '';
+const border = 'border-b border-gray-200 dark:border-gray-700';
+const divClasses = {
+    default: 'mb-4 ' + border,
+    full: 'mb-4',
+    icon: 'mb-4 ' + border,
+    pill: 'mb-4 ',
+    underline: 'mb-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 ' + border,
+    custom: customDivClass
+};
+const ulClasses = {
+    default: 'flex flex-wrap -mb-px',
+    full: 'hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400 mb-1',
+    icon: 'flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400',
+    pill: 'flex flex-wrap',
+    underline: 'flex flex-wrap -mb-px',
+    custom: customUlClass
+};
+</script>
+
+<div class={divClasses[tabStyle]}>
+  <ul class={ulClasses[tabStyle]} role="tablist">
+    <slot />
+  </ul>
+</div>

package/tabs/TabHead.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tabStyle?: "default" | "custom" | "icon" | "pill" | "underline" | "full" | undefined;
+        customDivClass?: string | undefined;
+        customUlClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabHeadProps = typeof __propDef.props;
+export declare type TabHeadEvents = typeof __propDef.events;
+export declare type TabHeadSlots = typeof __propDef.slots;
+export default class TabHead extends SvelteComponentTyped<TabHeadProps, TabHeadEvents, TabHeadSlots> {
+}
+export {};

package/tabs/TabHeadItem.svelte

@@ -0,0 +1,56 @@
+<script>import classNames from 'classnames';
+export let id;
+export let tabStyle = 'default';
+export let activeTabValue;
+export let customActiveClass = '';
+export let customInActiveClass = '';
+export let customLiClass = '';
+import { getContext } from 'svelte';
+const ctx = getContext('ctx') ?? {};
+tabStyle = ctx.style;
+const activeClasses = {
+    default: 'inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500',
+    full: 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white',
+    icon: 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group',
+    pill: 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg',
+    underline: 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500',
+    custom: customActiveClass
+};
+const inactiveClasses = {
+    default: 'inline-block py-4 px-4 text-sm font-medium text-center 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',
+    full: 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
+    icon: 'inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group ',
+    pill: 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
+    underline: 'inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300',
+    custom: customInActiveClass
+};
+const liClasses = {
+    default: 'mr-2',
+    full: 'w-full',
+    icon: 'mr-2',
+    pill: 'mr-2',
+    underline: 'mr-2',
+    custom: customLiClass
+};
+</script>
+
+<li class={liClasses[tabStyle]} role="presentation">
+  <button
+    {...$$restProps}
+    on:click
+    on:blur
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    class={classNames(activeTabValue === id ? activeClasses[tabStyle] : inactiveClasses[tabStyle])}
+    id="{id}-tabhead"
+    type="button"
+    role="tab">
+    <slot />
+  </button>
+</li>

package/tabs/TabHeadItem.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: number;
+        tabStyle?: "default" | "custom" | "icon" | "pill" | "underline" | "full" | undefined;
+        activeTabValue: number;
+        customActiveClass?: string | undefined;
+        customInActiveClass?: string | undefined;
+        customLiClass?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        blur: FocusEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabHeadItemProps = typeof __propDef.props;
+export declare type TabHeadItemEvents = typeof __propDef.events;
+export declare type TabHeadItemSlots = typeof __propDef.slots;
+export default class TabHeadItem extends SvelteComponentTyped<TabHeadItemProps, TabHeadItemEvents, TabHeadItemSlots> {
+}
+export {};

package/tabs/TabItem.svelte

@@ -0,0 +1,53 @@
+<script>import { getContext } from 'svelte';
+import { writable } from 'svelte/store';
+import classNames from 'classnames';
+export let open = false;
+export let title = 'Tab title';
+export let activeClasses = undefined;
+export let inactiveClasses = undefined;
+export let defaultClass = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+const ctx = getContext('ctx') ?? {};
+// single selection
+const selected = ctx.selected ?? writable();
+function init(node) {
+    selected.set(node);
+    const destroy = selected.subscribe((x) => {
+        if (x !== node) {
+            open = false;
+        }
+    });
+    return { destroy };
+}
+let buttonClass;
+$: buttonClass = classNames(defaultClass, open ? activeClasses ?? ctx.activeClasses : inactiveClasses ?? ctx.inactiveClasses, open && 'active'
+// $$restProps.disabled && 'cursor-not-allowed pointer-events-none'
+);
+</script>
+
+<li class={classNames('group', $$props.class)} role="presentation">
+  <button
+    type="button"
+    on:click={() => (open = true)}
+    on:blur
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    role="tab"
+    {...$$restProps}
+    class={buttonClass}>
+    <slot name="title">{title}</slot>
+  </button>
+
+  {#if open}
+    <div class="hidden tab_content_placeholder">
+      <div use:init>
+        <slot />
+      </div>
+    </div>
+  {/if}
+</li>

package/tabs/TabItem.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        open?: boolean | undefined;
+        title?: string | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+        defaultClass?: string | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        default: {};
+    };
+};
+export declare type TabItemProps = typeof __propDef.props;
+export declare type TabItemEvents = typeof __propDef.events;
+export declare type TabItemSlots = typeof __propDef.slots;
+export default class TabItem extends SvelteComponentTyped<TabItemProps, TabItemEvents, TabItemSlots> {
+}
+export {};

package/tabs/Tabs.svelte

@@ -0,0 +1,50 @@
+<script context="module">import { writable } from 'svelte/store';
+// styles
+const styledActiveClasses = {
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:bg-gray-700 dark:text-white',
+    pill: 'py-3 px-4 text-white bg-blue-600 rounded-lg',
+    underline: 'p-4 text-blue-600 border-b-2 border-blue-600 dark:text-blue-500 dark:border-blue-500',
+    none: ''
+};
+const styledInactiveClasses = {
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
+    pill: 'py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
+    underline: 'p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400',
+    none: ''
+};
+</script>
+
+<script>import classNames from 'classnames';
+import { setContext } from 'svelte';
+export let style = 'none';
+export let defaultClass = 'flex flex-wrap space-x-2';
+export let contentClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
+export let divider = true;
+export let activeClasses = 'p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500';
+export let inactiveClasses = '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';
+const ctx = {
+    activeClasses: styledActiveClasses[style] || activeClasses,
+    inactiveClasses: styledInactiveClasses[style] || inactiveClasses,
+    selected: writable()
+};
+$: divider = ['full', 'pill'].includes(style) ? false : divider;
+setContext('ctx', ctx);
+function init(node) {
+    const destroy = ctx.selected.subscribe((x) => {
+        if (x)
+            node.replaceChildren(x);
+    });
+    return { destroy };
+}
+$: ulClass = classNames(defaultClass, style === 'underline' && '-mb-px', $$props.class);
+</script>
+
+<ul class={ulClass}>
+  <slot {style} />
+</ul>
+{#if divider}
+  <slot name="divider">
+    <div class="h-px bg-gray-200 dark:bg-gray-700" />
+  </slot>
+{/if}
+<div class={contentClass} role="tabpanel" aria-labelledby="id-tab" use:init />