odj-svelte-ui 0.1.0

package/dist/elements/table/TableBodyRow.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+
+  export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = getContext('color');
+
+  const colors = {
+    default: 'bg-white dark:bg-neutral-800 dark:border-neutral-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-neutral-50 dark:hover:bg-neutral-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-neutral-50 odd:dark:bg-neutral-800 even:dark:bg-neutral-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: string;
+  $: trClass = twMerge([!getContext('noborder') && 'border-b last:border-b-0', colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class]);
+</script>
+
+<tr {...$$restProps} class={trClass} on:click on:contextmenu on:dblclick>
+  <slot />
+</tr>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = getContext('color');
+-->

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

@@ -0,0 +1,39 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = getContext('color');
+ */
+declare const TableBodyRow: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    color?: "blue" | "green" | "red" | "yellow" | "purple" | "default" | "custom" | undefined;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+    contextmenu: MouseEvent;
+    dblclick: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type TableBodyRow = InstanceType<typeof TableBodyRow>;
+export default TableBodyRow;

package/dist/elements/table/TableHead.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+
+  export let theadClass: string = 'text-xs uppercase';
+  export let defaultRow: boolean = true;
+
+  let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom';
+  color = getContext('color');
+  let noborder: boolean = getContext('noborder');
+  let striped: boolean = getContext('striped');
+  let defaultBgColor = noborder || striped ? '' : 'bg-neutral-50 dark:bg-neutral-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-neutral-700 dark:text-neutral-400' : color === 'custom' ? '' : 'text-white  dark:text-white';
+  let borderColors = striped ? '' : color === 'default' ? 'border-neutral-700' : color === 'custom' ? '' : `border-${color}-400`;
+
+  $: theadClassfinal = twMerge(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
+</script>
+
+<thead {...$$restProps} class={theadClassfinal}>
+  {#if defaultRow}
+    <tr>
+      <slot />
+    </tr>
+  {:else}
+    <slot />
+  {/if}
+</thead>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let theadClass: string = 'text-xs uppercase';
+@prop export let defaultRow: boolean = true;
+-->

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

@@ -0,0 +1,37 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let theadClass: string = 'text-xs uppercase';
+ * @prop export let defaultRow: boolean = true;
+ */
+declare const TableHead: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    theadClass?: string | undefined;
+    defaultRow?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type TableHead = InstanceType<typeof TableHead>;
+export default TableHead;

package/dist/elements/table/TableHeadCell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let padding: string = 'px-6 py-3';
+</script>
+
+<th {...$$restProps} class={twMerge(padding, $$props.class)} on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
+  <slot />
+</th>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let padding: string = 'px-6 py-3';
+-->

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

@@ -0,0 +1,44 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let padding: string = 'px-6 py-3';
+ */
+declare const TableHeadCell: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    padding?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mouseover: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type TableHeadCell = InstanceType<typeof TableHeadCell>;
+export default TableHeadCell;

package/dist/elements/table/TableSearch.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { setContext } from 'svelte';
+
+  export let divClass: string = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+  export let inputValue: string = '';
+  export let striped: boolean = false;
+  export let hoverable: boolean = false;
+  export let placeholder: string = 'Search';
+  export let customColor: string = '';
+  export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
+  export let innerDivClass: string = 'p-4';
+  export let searchClass: string = 'relative mt-1';
+  export let svgDivClass: string = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
+  export let svgClass: string = 'w-5 h-5 text-neutral-500 dark:text-neutral-400';
+  export let inputClass: string = 'bg-neutral-50 border border-neutral-300 text-neutral-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 pl-10 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+
+  let inputCls = twMerge(inputClass, $$props.classInput);
+  let svgDivCls = twMerge(svgDivClass, $$props.classSvgDiv);
+
+  const colors = {
+    default: 'text-neutral-500 dark:text-neutral-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: customColor
+  };
+
+  $: setContext('striped', striped);
+  $: setContext('hoverable', hoverable);
+  $: setContext('color', color);
+</script>
+
+<div class={divClass}>
+  <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={inputValue} type="text" id="table-search" class={inputCls} {placeholder} />
+    </div>
+    <slot name="header" />
+  </div>
+  <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
+    <slot />
+  </table>
+  <slot name="footer" />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+@prop export let inputValue: string = '';
+@prop export let striped: boolean = false;
+@prop export let hoverable: boolean = false;
+@prop export let placeholder: string = 'Search';
+@prop export let customColor: string = '';
+@prop export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
+@prop export let innerDivClass: string = 'p-4';
+@prop export let searchClass: string = 'relative mt-1';
+@prop export let svgDivClass: string = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
+@prop export let svgClass: string = 'w-5 h-5 text-neutral-500 dark:text-neutral-400';
+@prop export let inputClass: string = 'bg-neutral-50 border border-neutral-300 text-neutral-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 pl-10 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+-->

package/dist/elements/table/TableSearch.svelte.d.ts

@@ -0,0 +1,63 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let divClass: string = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+ * @prop export let inputValue: string = '';
+ * @prop export let striped: boolean = false;
+ * @prop export let hoverable: boolean = false;
+ * @prop export let placeholder: string = 'Search';
+ * @prop export let customColor: string = '';
+ * @prop export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
+ * @prop export let innerDivClass: string = 'p-4';
+ * @prop export let searchClass: string = 'relative mt-1';
+ * @prop export let svgDivClass: string = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
+ * @prop export let svgClass: string = 'w-5 h-5 text-neutral-500 dark:text-neutral-400';
+ * @prop export let inputClass: string = 'bg-neutral-50 border border-neutral-300 text-neutral-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 pl-10 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+ */
+declare const TableSearch: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    divClass?: string | undefined;
+    inputValue?: string | undefined;
+    striped?: boolean | undefined;
+    hoverable?: boolean | undefined;
+    placeholder?: string | undefined;
+    customColor?: string | undefined;
+    color?: "blue" | "green" | "red" | "yellow" | "purple" | "default" | "custom" | undefined;
+    innerDivClass?: string | undefined;
+    searchClass?: string | undefined;
+    svgDivClass?: string | undefined;
+    svgClass?: string | undefined;
+    inputClass?: string | undefined;
+}, {
+    svgSearch: {};
+    header: {};
+    default: {};
+    footer: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    svgSearch: {};
+    header: {};
+    default: {};
+    footer: {};
+}, {}, string>;
+type TableSearch = InstanceType<typeof TableSearch>;
+export default TableSearch;

package/dist/elements/tabs/TabItem.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { TabCtxType } from './Tabs.svelte';
+  import { writable } from 'svelte/store';
+  import { twMerge } from 'tailwind-merge';
+
+  export let open: boolean = false;
+  export let title: string = 'Tab title';
+  export let activeClasses: string | undefined = undefined;
+  export let inactiveClasses: string | undefined = undefined;
+  export let defaultClass: string = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+
+  const ctx = getContext<TabCtxType>('ctx') ?? {};
+  // single selection
+  const selected = ctx.selected ?? writable<HTMLElement>();
+
+  function init(node: HTMLElement) {
+    selected.set(node);
+
+    const destroy = selected.subscribe((x) => {
+      if (x !== node) {
+        open = false;
+      }
+    });
+
+    return { destroy };
+  }
+
+  let buttonClass: string;
+  $: buttonClass = twMerge(
+    defaultClass,
+    open ? activeClasses ?? ctx.activeClasses : inactiveClasses ?? ctx.inactiveClasses,
+    open && 'active'
+    // $$restProps.disabled && 'cursor-not-allowed pointer-events-none'
+  );
+</script>
+
+<li class={twMerge('group', $$props.class)} role="presentation">
+  <button type="button" on:click={() => (open = true)} on:blur on:click on:contextmenu 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>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let open: boolean = false;
+@prop export let title: string = 'Tab title';
+@prop export let activeClasses: string | undefined = undefined;
+@prop export let inactiveClasses: string | undefined = undefined;
+@prop export let defaultClass: string = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+-->

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

@@ -0,0 +1,56 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let open: boolean = false;
+ * @prop export let title: string = 'Tab title';
+ * @prop export let activeClasses: string | undefined = undefined;
+ * @prop export let inactiveClasses: string | undefined = undefined;
+ * @prop export let defaultClass: string = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+ */
+declare const TabItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    open?: boolean | undefined;
+    title?: string | undefined;
+    activeClasses?: string | undefined | undefined;
+    inactiveClasses?: string | undefined | undefined;
+    defaultClass?: string | undefined;
+}, {
+    title: {};
+    default: {};
+}>, {
+    blur: FocusEvent;
+    click: MouseEvent;
+    contextmenu: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mouseover: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    title: {};
+    default: {};
+}, {}, string>;
+type TabItem = InstanceType<typeof TabItem>;
+export default TabItem;

package/dist/elements/tabs/Tabs.svelte

@@ -0,0 +1,78 @@
+<script context="module" lang="ts">
+  import { writable, type Writable } from 'svelte/store';
+
+  export interface TabCtxType {
+    activeClasses: string;
+    inactiveClasses: string;
+    selected: Writable<HTMLElement>;
+  }
+</script>
+
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { setContext } from 'svelte';
+
+  export let style: 'full' | 'pill' | 'underline' | 'none' = 'none';
+  export let defaultClass: string = 'flex flex-wrap space-x-2';
+  export let contentClass: string = 'p-2 bg-neutral-50 rounded-lg dark:bg-neutral-800 mt-2';
+  export let divider: boolean = true;
+  export let activeClasses: string = 'p-2 text-primary-600 bg-neutral-100 rounded-t-lg dark:bg-neutral-800 dark:text-primary-500';
+  export let inactiveClasses: string = 'p-2 text-neutral-500 rounded-t-lg hover:text-neutral-600 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300';
+
+  // styles
+  const styledActiveClasses = {
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-neutral-900 bg-neutral-100 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:bg-neutral-700 dark:text-white',
+    pill: 'py-3 px-4 text-white bg-primary-600 rounded-lg',
+    underline: 'p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500',
+    none: ''
+  };
+
+  const styledInactiveClasses = {
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-neutral-500 dark:text-neutral-400 bg-white hover:text-neutral-700 hover:bg-neutral-50 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:hover:text-white dark:bg-neutral-800 dark:hover:bg-neutral-700',
+    pill: 'py-3 px-4 text-neutral-500 rounded-lg hover:text-neutral-900 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white',
+    underline: 'p-4 border-b-2 border-transparent hover:text-neutral-600 hover:border-neutral-300 dark:hover:text-neutral-300 text-neutral-500 dark:text-neutral-400',
+    none: ''
+  };
+
+  const ctx: TabCtxType = {
+    activeClasses: styledActiveClasses[style] || activeClasses,
+    inactiveClasses: styledInactiveClasses[style] || inactiveClasses,
+    selected: writable<HTMLElement>()
+  };
+
+  $: divider = ['full', 'pill'].includes(style) ? false : divider;
+
+  setContext('ctx', ctx);
+
+  function init(node: HTMLElement) {
+    const destroy = ctx.selected.subscribe((x: HTMLElement) => {
+      if (x) node.replaceChildren(x);
+    });
+
+    return { destroy };
+  }
+
+  $: ulClass = twMerge(defaultClass, style === 'underline' && '-mb-px', $$props.class);
+</script>
+
+<ul class={ulClass}>
+  <slot {style} />
+</ul>
+{#if divider}
+  <slot name="divider">
+    <div class="h-px bg-neutral-200 dark:bg-neutral-700" />
+  </slot>
+{/if}
+<div class={contentClass} role="tabpanel" aria-labelledby="id-tab" use:init />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let style: 'full' | 'pill' | 'underline' | 'none' = 'none';
+@prop export let defaultClass: string = 'flex flex-wrap space-x-2';
+@prop export let contentClass: string = 'p-4 bg-neutral-50 rounded-lg dark:bg-neutral-800 mt-4';
+@prop export let divider: boolean = true;
+@prop export let activeClasses: string = 'p-4 text-primary-600 bg-neutral-100 rounded-t-lg dark:bg-neutral-800 dark:text-primary-500';
+@prop export let inactiveClasses: string = 'p-4 text-neutral-500 rounded-t-lg hover:text-neutral-600 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300';
+-->

package/dist/elements/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,57 @@
+import { type Writable } from 'svelte/store';
+export interface TabCtxType {
+    activeClasses: string;
+    inactiveClasses: string;
+    selected: Writable<HTMLElement>;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let style: 'full' | 'pill' | 'underline' | 'none' = 'none';
+ * @prop export let defaultClass: string = 'flex flex-wrap space-x-2';
+ * @prop export let contentClass: string = 'p-4 bg-neutral-50 rounded-lg dark:bg-neutral-800 mt-4';
+ * @prop export let divider: boolean = true;
+ * @prop export let activeClasses: string = 'p-4 text-primary-600 bg-neutral-100 rounded-t-lg dark:bg-neutral-800 dark:text-primary-500';
+ * @prop export let inactiveClasses: string = 'p-4 text-neutral-500 rounded-t-lg hover:text-neutral-600 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300';
+ */
+declare const Tabs: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    style?: "full" | "pill" | "underline" | "none" | undefined;
+    defaultClass?: string | undefined;
+    contentClass?: string | undefined;
+    divider?: boolean | undefined;
+    activeClasses?: string | undefined;
+    inactiveClasses?: string | undefined;
+}, {
+    default: {
+        style: "none" | "pill" | "full" | "underline";
+    };
+    divider: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        style: "none" | "pill" | "full" | "underline";
+    };
+    divider: {};
+}, {}, string>;
+type Tabs = InstanceType<typeof Tabs>;
+export default Tabs;

package/dist/elements/timeline/Activity.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let olClass: string = 'relative border-l border-neutral-200 dark:border-neutral-700';
+  let olCls: string = twMerge(olClass, $$props.class);
+</script>
+
+<ol class={olCls}>
+  <slot />
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let olClass: string = 'relative border-l border-neutral-200 dark:border-neutral-700';
+-->