@pajohns/flowbite-svelte 0.1.0

package/dist/table/theme.js

@@ -0,0 +1,440 @@
+import { tv } from "tailwind-variants";
+export const table = tv({
+    slots: {
+        div: "relative overflow-x-auto",
+        table: "w-full text-left text-sm"
+    },
+    variants: {
+        color: {
+            // default, primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            default: { table: "text-gray-500 dark:text-gray-400" },
+            primary: { table: "text-primary-100 dark:text-primary-100" },
+            secondary: { table: "text-secondary-100 dark:text-secondary-100" },
+            gray: { table: "text-gray-100 dark:text-gray-100" },
+            red: { table: "text-red-100 dark:text-red-100" },
+            orange: { table: "text-orange-100 dark:text-orange-100" },
+            amber: { table: "text-amber-100 dark:text-amber-100" },
+            yellow: { table: "text-yellow-100 dark:text-yellow-100" },
+            lime: { table: "text-lime-100 dark:text-lime-100" },
+            green: { table: "text-green-100 dark:text-green-100" },
+            emerald: { table: "text-emerald-100 dark:text-emerald-100" },
+            teal: { table: "text-teal-100 dark:text-teal-100" },
+            cyan: { table: "text-cyan-100 dark:text-cyan-100" },
+            sky: { table: "text-sky-100 dark:text-sky-100" },
+            blue: { table: "text-blue-100 dark:text-blue-100" },
+            indigo: { table: "text-indigo-100 dark:text-indigo-100" },
+            violet: { table: "text-violet-100 dark:text-violet-100" },
+            purple: { table: "text-purple-100 dark:text-purple-100" },
+            fuchsia: { table: "text-fuchsia-100 dark:text-fuchsia-100" },
+            pink: { table: "text-pink-100 dark:text-pink-100" },
+            rose: { table: "text-rose-100 dark:text-rose-100" }
+        },
+        shadow: {
+            true: { div: "shadow-md sm:rounded-lg" }
+        }
+    }
+});
+export const tableBodyRow = tv({
+    base: "",
+    variants: {
+        color: {
+            default: "bg-white dark:bg-gray-800 dark:border-gray-700",
+            primary: "bg-white bg-primary-500 border-primary-400",
+            secondary: "bg-white bg-secondary-500 border-secondary-400",
+            gray: "bg-gray-500 border-gray-400",
+            red: "bg-red-500 border-red-400",
+            orange: "bg-orange-500 border-orange-400",
+            amber: "bg-amber-500 border-amber-400",
+            yellow: "bg-yellow-500 border-yellow-400",
+            lime: "bg-lime-500 border-lime-400",
+            green: "bg-white bg-green-500 border-green-400",
+            emerald: "bg-emerald-500 border-emerald-400",
+            teal: "bg-teal-500 border-teal-400",
+            cyan: "bg-cyan-500 border-cyan-400",
+            sky: "bg-sky-500 border-sky-400",
+            blue: "bg-white bg-blue-500 border-blue-400",
+            indigo: "bg-indigo-500 border-indigo-400",
+            violet: "bg-violet-500 border-violet-400",
+            purple: "bg-purple-500 border-purple-400",
+            fuchsia: "bg-fuchsia-500 border-fuchsia-400",
+            pink: "bg-pink-500 border-pink-400",
+            rose: "bg-rose-500 border-rose-400"
+        },
+        hoverable: {
+            true: ""
+        },
+        striped: {
+            true: ""
+        },
+        border: {
+            true: "border-b last:border-b-0"
+        }
+    },
+    compoundVariants: [
+        {
+            hoverable: true,
+            color: "default",
+            class: "hover:bg-gray-50 dark:hover:bg-gray-600"
+        },
+        {
+            hoverable: true,
+            color: "primary",
+            class: "hover:bg-primary-400 dark:hover:bg-primary-400"
+        },
+        {
+            hoverable: true,
+            color: "secondary",
+            class: "hover:bg-secondary-400 dark:hover:bg-secondary-400"
+        },
+        {
+            hoverable: true,
+            color: "gray",
+            class: "hover:bg-gray-400 dark:hover:bg-gray-400"
+        },
+        {
+            hoverable: true,
+            color: "red",
+            class: "hover:bg-red-400 dark:hover:bg-red-400"
+        },
+        {
+            hoverable: true,
+            color: "orange",
+            class: "hover:bg-orange-400 dark:hover:bg-orange-400"
+        },
+        {
+            hoverable: true,
+            color: "amber",
+            class: "hover:bg-amber-400 dark:hover:bg-amber-400"
+        },
+        {
+            hoverable: true,
+            color: "yellow",
+            class: "hover:bg-yellow-400 dark:hover:bg-yellow-400"
+        },
+        {
+            hoverable: true,
+            color: "lime",
+            class: "hover:bg-lime-400 dark:hover:bg-lime-400"
+        },
+        {
+            hoverable: true,
+            color: "green",
+            class: "hover:bg-green-400 dark:hover:bg-green-400"
+        },
+        {
+            hoverable: true,
+            color: "emerald",
+            class: "hover:bg-emerald-400 dark:hover:bg-emerald-400"
+        },
+        {
+            hoverable: true,
+            color: "teal",
+            class: "hover:bg-teal-400 dark:hover:bg-teal-400"
+        },
+        {
+            hoverable: true,
+            color: "cyan",
+            class: "hover:bg-cyan-400 dark:hover:bg-cyan-400"
+        },
+        {
+            hoverable: true,
+            color: "sky",
+            class: "hover:bg-sky-400 dark:hover:bg-sky-400"
+        },
+        {
+            hoverable: true,
+            color: "blue",
+            class: "hover:bg-blue-400 dark:hover:bg-blue-400"
+        },
+        {
+            hoverable: true,
+            color: "indigo",
+            class: "hover:bg-indigo-400 dark:hover:bg-indigo-400"
+        },
+        {
+            hoverable: true,
+            color: "violet",
+            class: "hover:bg-violet-400 dark:hover:bg-violet-400"
+        },
+        {
+            hoverable: true,
+            color: "purple",
+            class: "hover:bg-purple-400 dark:hover:bg-purple-400"
+        },
+        {
+            hoverable: true,
+            color: "fuchsia",
+            class: "hover:bg-fuchsia-400 dark:hover:bg-fuchsia-400"
+        },
+        {
+            hoverable: true,
+            color: "pink",
+            class: "hover:bg-pink-400 dark:hover:bg-pink-400"
+        },
+        {
+            hoverable: true,
+            color: "rose",
+            class: "hover:bg-rose-400 dark:hover:bg-rose-400"
+        },
+        {
+            striped: true,
+            color: "default",
+            class: "odd:bg-white even:bg-gray-50 dark:odd:bg-gray-800 dark:even:bg-gray-700"
+        },
+        {
+            striped: true,
+            color: "primary",
+            class: "odd:bg-primary-500 even:bg-primary-600 dark:odd:bg-primary-500 dark:even:bg-primary-600"
+        },
+        {
+            striped: true,
+            color: "secondary",
+            class: "odd:bg-secondary-500 even:bg-secondary-600 dark:odd:bg-secondary-500 dark:even:bg-secondary-600"
+        },
+        {
+            striped: true,
+            color: "gray",
+            class: "odd:bg-gray-500 even:bg-gray-600 dark:odd:bg-gray-500 dark:even:bg-gray-600"
+        },
+        // default, primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+        {
+            striped: true,
+            color: "red",
+            class: "odd:bg-red-500 even:bg-red-600 dark:odd:bg-red-500 dark:even:bg-red-600"
+        },
+        {
+            striped: true,
+            color: "orange",
+            class: "odd:bg-orange-500 even:bg-orange-600 dark:odd:bg-orange-500 dark:even:bg-orange-600"
+        },
+        {
+            striped: true,
+            color: "amber",
+            class: "odd:bg-amber-500 even:bg-amber-600 dark:odd:bg-amber-500 dark:even:bg-amber-600"
+        },
+        {
+            striped: true,
+            color: "yellow",
+            class: "odd:bg-yellow-500 even:bg-yellow-600 dark:odd:bg-yellow-500 dark:even:bg-yellow-600"
+        },
+        {
+            striped: true,
+            color: "lime",
+            class: "odd:bg-lime-500 even:bg-lime-600 dark:odd:bg-lime-500 dark:even:bg-lime-600"
+        },
+        {
+            striped: true,
+            color: "green",
+            class: "odd:bg-green-500 even:bg-green-600 dark:odd:bg-green-500 dark:even:bg-green-600"
+        },
+        {
+            striped: true,
+            color: "emerald",
+            class: "odd:bg-emerald-500 even:bg-emerald-600 dark:odd:bg-emerald-500 dark:even:bg-emerald-600"
+        },
+        {
+            striped: true,
+            color: "teal",
+            class: "odd:bg-teal-500 even:bg-teal-600 dark:odd:bg-teal-500 dark:even:bg-teal-600"
+        },
+        {
+            striped: true,
+            color: "cyan",
+            class: "odd:bg-cyan-500 even:bg-cyan-600 dark:odd:bg-cyan-500 dark:even:bg-cyan-600"
+        },
+        {
+            striped: true,
+            color: "sky",
+            class: "odd:bg-sky-500 even:bg-sky-600 dark:odd:bg-sky-500 dark:even:bg-sky-600"
+        },
+        {
+            striped: true,
+            color: "blue",
+            class: "odd:bg-blue-500 even:bg-blue-600 dark:odd:bg-blue-500 dark:even:bg-blue-600"
+        },
+        {
+            striped: true,
+            color: "indigo",
+            class: "odd:bg-indigo-500 even:bg-indigo-600 dark:odd:bg-indigo-500 dark:even:bg-indigo-600"
+        },
+        {
+            striped: true,
+            color: "violet",
+            class: "odd:bg-violet-500 even:bg-violet-600 dark:odd:bg-violet-500 dark:even:bg-violet-600"
+        },
+        {
+            striped: true,
+            color: "purple",
+            class: "odd:bg-purple-500 even:bg-purple-600 dark:odd:bg-purple-500 dark:even:bg-purple-600"
+        },
+        {
+            striped: true,
+            color: "fuchsia",
+            class: "odd:bg-fuchsia-500 even:bg-fuchsia-600 dark:odd:bg-fuchsia-500 dark:even:bg-fuchsia-600"
+        },
+        {
+            striped: true,
+            color: "pink",
+            class: "odd:bg-pink-500 even:bg-pink-600 dark:odd:bg-pink-500 dark:even:bg-pink-600"
+        },
+        {
+            striped: true,
+            color: "rose",
+            class: "odd:bg-rose-500 even:bg-rose-600 dark:odd:bg-rose-500 dark:even:bg-rose-600"
+        }
+    ]
+});
+export const tableHead = tv({
+    base: "text-xs uppercase",
+    variants: {
+        color: {
+            // default, primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            default: "text-gray-700 dark:text-gray-400 bg-gray-50 dark:bg-gray-700",
+            primary: "text-white dark:text-white bg-primary-700 dark:bg-primary-700",
+            secondary: "text-white dark:text-white bg-secondary-700 dark:bg-secondary-700",
+            gray: "text-white dark:text-white bg-gray-700 dark:bg-gray-700",
+            red: "text-white dark:text-white bg-red-700 dark:bg-red-700",
+            orange: "text-white dark:text-white bg-orange-700 dark:bg-orange-700",
+            amber: "text-white dark:text-white bg-amber-700 dark:bg-amber-700",
+            yellow: "text-white dark:text-white bg-yellow-700 dark:bg-yellow-700",
+            lime: "text-white dark:text-white bg-lime-700 dark:bg-lime-700",
+            green: "text-white dark:text-white bg-green-700 dark:bg-green-700",
+            emerald: "text-white dark:text-white bg-emerald-700 dark:bg-emerald-700",
+            teal: "text-white dark:text-white bg-teal-700 dark:bg-teal-700",
+            cyan: "text-white dark:text-white bg-cyan-700 dark:bg-cyan-700",
+            sky: "text-white dark:text-white bg-sky-700 dark:bg-sky-700",
+            blue: "text-white dark:text-white bg-blue-700 dark:bg-blue-700",
+            indigo: "text-white dark:text-white bg-indigo-700 dark:bg-indigo-700",
+            violet: "text-white dark:text-white bg-violet-700 dark:bg-violet-700",
+            purple: "text-white dark:text-white bg-purple-700 dark:bg-purple-700",
+            fuchsia: "text-white dark:text-white bg-fuchsia-700 dark:bg-fuchsia-700",
+            pink: "text-white dark:text-white bg-pink-700 dark:bg-pink-700",
+            rose: "text-white dark:text-white bg-rose-700 dark:bg-rose-700"
+        },
+        border: {
+            true: "",
+            false: ""
+        },
+        striped: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            color: "default",
+            border: true,
+            class: "" //"bg-transparent dark:bg-transparent"
+        },
+        {
+            color: "default",
+            striped: true,
+            class: "" //"bg-transparent dark:bg-transparent border-gray-700"
+        },
+        {
+            striped: true,
+            color: "blue",
+            class: "border-blue-400"
+        },
+        {
+            striped: true,
+            color: "green",
+            class: "border-green-400"
+        },
+        {
+            striped: true,
+            color: "red",
+            class: "border-red-400"
+        },
+        {
+            striped: true,
+            color: "yellow",
+            class: "border-yellow-400"
+        },
+        {
+            striped: true,
+            color: "purple",
+            class: "border-purple-400"
+        },
+        {
+            striped: true,
+            color: "indigo",
+            class: "border-indigo-400"
+        },
+        {
+            striped: true,
+            color: "pink",
+            class: "border-pink-400"
+        }
+    ]
+});
+export const tableBodyCell = tv({
+    base: "px-6 py-4 whitespace-nowrap font-medium"
+});
+export const tableHeadCell = tv({
+    base: "px-6 py-3"
+});
+export const tableSearch = tv({
+    slots: {
+        root: "relative overflow-x-auto shadow-md sm:rounded-lg",
+        inner: "p-4",
+        search: "relative mt-1",
+        svgDiv: "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none",
+        svg: "w-5 h-5",
+        input: "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",
+        table: "w-full text-left text-sm"
+    },
+    variants: {
+        color: {
+            default: {
+                svg: "text-gray-500 dark:text-gray-400",
+                table: "text-gray-500 dark:text-gray-400"
+            },
+            blue: {
+                svg: "text-blue-500 dark:text-blue-400",
+                table: "text-blue-100 dark:text-blue-100"
+            },
+            green: {
+                svg: "text-green-500 dark:text-green-400",
+                table: "text-green-100 dark:text-green-100"
+            },
+            red: {
+                svg: "text-red-500 dark:text-red-400",
+                table: "text-red-100 dark:text-red-100"
+            },
+            yellow: {
+                svg: "text-yellow-500 dark:text-yellow-400",
+                table: "text-yellow-100 dark:text-yellow-100"
+            },
+            purple: {
+                svg: "text-purple-500 dark:text-purple-400",
+                table: "text-purple-100 dark:text-purple-100"
+            },
+            indigo: {
+                svg: "text-indigo-500 dark:text-indigo-400",
+                table: "text-indigo-100 dark:text-indigo-100"
+            },
+            pink: {
+                svg: "text-pink-500 dark:text-pink-400",
+                table: "text-pink-100 dark:text-pink-100"
+            }
+        },
+        striped: {
+            true: {
+                table: "[&_tbody_tr:nth-child(odd)]:bg-white [&_tbody_tr:nth-child(odd)]:dark:bg-gray-900 [&_tbody_tr:nth-child(even)]:bg-gray-50 [&_tbody_tr:nth-child(even)]:dark:bg-gray-800"
+            },
+            false: {}
+        },
+        hoverable: {
+            true: {
+                table: "[&_tbody_tr]:hover:bg-gray-50 [&_tbody_tr]:dark:hover:bg-gray-600"
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        color: "default",
+        striped: false,
+        hoverable: false
+    }
+});

package/dist/tabs/TabItem.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { SelectedTab, TabCtxType, TabitemProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+  import { useSingleSelection } from "../utils/singleselection.svelte";
+  import clsx from "clsx";
+  import { tabItem, tabs } from "./theme";
+  import { getTabsContext } from "../context";
+
+  let { children, titleSlot, open = $bindable(false), title = "Tab title", key, activeClass, inactiveClass, class: className, classes, disabled, tabStyle, ...restProps }: TabitemProps = $props();
+
+  const theme = $derived(getTheme("tabItem"));
+  const tabsCtx = getTabsContext();
+
+  if (!tabsCtx) {
+    throw new Error("TabItem must be used within a Tabs component");
+  }
+
+  const activeClasses = tabsCtx.activeClasses;
+  const ctx: TabCtxType = tabsCtx.ctx;
+
+  const compoTabStyle = $derived(tabStyle ?? ctx.tabStyle ?? "full");
+  const { active, inactive } = $derived(tabs({ tabStyle: compoTabStyle, hasDivider: true }));
+
+  const tabId = $props.id();
+  const tabIdentifier = $derived(key ?? tabId);
+  const self = $derived<SelectedTab>({ id: tabIdentifier, snippet: children });
+
+  const registerTab = tabsCtx.registerTab;
+  const unregisterTab = tabsCtx.unregisterTab;
+
+  const updateSingleSelection = useSingleSelection<SelectedTab>((value) => (open = value?.id === self.id));
+
+  $effect(() => {
+    updateSingleSelection(open, self);
+    registerTab?.(self);
+
+    return () => {
+      if (self.id) {
+        unregisterTab?.(self.id);
+      }
+    };
+  });
+
+  const { base, button } = $derived(tabItem({ open, disabled }));
+</script>
+
+<li {...restProps} class={base({ class: clsx(theme?.base, className) })} role="presentation">
+  <button
+    type="button"
+    onclick={() => (open = true)}
+    role="tab"
+    id={self.id}
+    aria-controls={ctx.panelId}
+    aria-selected={open}
+    {disabled}
+    class={button({
+      class: clsx(open ? (activeClass ?? active({ class: activeClasses })) : (inactiveClass ?? inactive()), theme?.button, classes?.button)
+    })}
+  >
+    {#if titleSlot}
+      {@render titleSlot()}
+    {:else}
+      {title}
+    {/if}
+  </button>
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1863)
+## Props
+@prop children
+@prop titleSlot
+@prop open = $bindable(false)
+@prop title = "Tab title"
+@prop key
+@prop activeClass
+@prop inactiveClass
+@prop class: className
+@prop classes
+@prop disabled
+@prop tabStyle
+@prop ...restProps
+-->

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

@@ -0,0 +1,22 @@
+import type { TabitemProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1863)
+ * ## Props
+ * @prop children
+ * @prop titleSlot
+ * @prop open = $bindable(false)
+ * @prop title = "Tab title"
+ * @prop key
+ * @prop activeClass
+ * @prop inactiveClass
+ * @prop class: className
+ * @prop classes
+ * @prop disabled
+ * @prop tabStyle
+ * @prop ...restProps
+ */
+declare const TabItem: import("svelte").Component<TabitemProps, {}, "open">;
+type TabItem = ReturnType<typeof TabItem>;
+export default TabItem;

package/dist/tabs/Tabs.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import type { SelectedTab, TabCtxType, TabsProps } from "../types";
+  import { createSingleSelectionContext, useSingleSelection } from "../utils/singleselection.svelte";
+  import clsx from "clsx";
+  import { tabs } from "./theme";
+  import { setTabsContext } from "../context";
+  import { untrack } from "svelte";
+
+  let { children, selected = $bindable(), tabStyle = "none", ulClass, contentClass, divider = true, class: className, classes, ...restProps }: TabsProps = $props();
+
+  const activeClasses = $derived(typeof classes?.active === "string" ? classes.active : undefined);
+
+  warnThemeDeprecation(
+    "Tabs",
+    untrack(() => ({ ulClass, contentClass })),
+    { ulClass: "class", contentClass: "content" }
+  );
+
+  const theme = $derived(getTheme("tabs"));
+  const styling = $derived(classes ?? { content: contentClass });
+  const { base, content, divider: dividerClass } = $derived(tabs({ tabStyle, hasDivider: divider }));
+
+  const uuid = $props.id();
+  const panelId = `tab-panel-${uuid}`;
+  const ctx = $derived<TabCtxType>({ tabStyle, panelId });
+  const dividerBool = $derived(["full", "pill"].includes(tabStyle) ? false : divider);
+
+  createSingleSelectionContext<SelectedTab>();
+
+  const tabRegistry = $state(new Map<string, SelectedTab>());
+  let selectedTab: SelectedTab = $state({});
+
+  const updateSelection = useSingleSelection<SelectedTab>((v) => {
+    selectedTab = v ?? {};
+    selected = v?.id;
+  });
+
+  // Handle external changes to selected
+  $effect(() => {
+    if (selected && selected !== selectedTab.id) {
+      const targetTab = tabRegistry.get(selected);
+      if (targetTab) {
+        updateSelection(true, targetTab);
+      }
+    }
+  });
+
+  // Auto-select logic
+  $effect(() => {
+    if (tabRegistry.size > 0 && !selectedTab.id) {
+      const targetTab = selected ? tabRegistry.get(selected) : tabRegistry.values().next().value;
+      if (targetTab) {
+        updateSelection(true, targetTab);
+      }
+    }
+  });
+
+  const registerFn = (tabData: SelectedTab) => {
+    if (tabData.id) {
+      tabRegistry.set(tabData.id, tabData);
+    }
+  };
+
+  const unregisterFn = (tabId: string) => {
+    tabRegistry.delete(tabId);
+  };
+
+  // Set context synchronously for SSR compatibility
+  // Use getters to make the context reactive
+  setTabsContext({
+    get activeClasses() {
+      return activeClasses;
+    },
+    get ctx() {
+      return ctx;
+    },
+    registerTab: registerFn,
+    unregisterTab: unregisterFn
+  });
+</script>
+
+<ul role="tablist" {...restProps} class={base({ class: clsx(theme?.base, className ?? ulClass) })}>
+  {@render children()}
+</ul>
+{#if dividerBool}
+  <div class={dividerClass({ class: clsx(theme?.divider, classes?.divider) })}></div>
+{/if}
+
+<div id={panelId} class={content({ class: clsx(theme?.content, styling.content) })} role="tabpanel" aria-labelledby={selectedTab.id}>
+  {@render selectedTab.snippet?.()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1854)
+## Props
+@prop children
+@prop selected = $bindable()
+@prop tabStyle = "none"
+@prop ulClass
+@prop contentClass
+@prop divider = true
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

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

@@ -0,0 +1,19 @@
+import type { TabsProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1854)
+ * ## Props
+ * @prop children
+ * @prop selected = $bindable()
+ * @prop tabStyle = "none"
+ * @prop ulClass
+ * @prop contentClass
+ * @prop divider = true
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const Tabs: import("svelte").Component<TabsProps, {}, "selected">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TabItem } from "./TabItem.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { tabs, tabItem } from "./theme";

package/dist/tabs/index.js

@@ -0,0 +1,3 @@
+export { default as TabItem } from "./TabItem.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { tabs, tabItem } from "./theme";