flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/tabs/Tabs.svelte

@@ -1,60 +1,50 @@
-<script context="module">import { writable } from "svelte/store";
-</script>
+<script lang="ts">
+  import { writable } from "svelte/store";
+  import { setContext } from "svelte";
+  import { type TabsProps as Props, type TabCtxType, tabs } from ".";
+
+  let { children, tabStyle = "none", ulClass, contentClass, divider = true, ...restProps }: Props = $props();
+
+  const { base, content, divider: dividerClass } = $derived(tabs({ tabStyle, hasDivider: divider }));
+
+  // Generate a unique ID for the tab panel
+  const panelId = `tab-panel-${Math.random().toString(36).substring(2)}`;
+
+  const ctx: TabCtxType = {
+    get tabStyle() {
+      return tabStyle;
+    },
+    selected: writable<HTMLElement>(),
+    panelId // Add panelId to the context
+  };
+
+  let dividerBool = $derived(["full", "pill"].includes(tabStyle) ? false : divider);
+
+  setContext("ctx", ctx);
 
-<script>import { twMerge } from "tailwind-merge";
-import { setContext } from "svelte";
-export let tabStyle = "none";
-export let defaultClass = "flex flex-wrap space-x-2 rtl:space-x-reverse";
-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-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-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 styledActiveClasses = {
-  full: "p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:bg-gray-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-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-hidden 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: ""
-};
-const ctx = {
-  activeClasses: styledActiveClasses[tabStyle] || activeClasses,
-  inactiveClasses: styledInactiveClasses[tabStyle] || inactiveClasses,
-  selected: writable()
-};
-$: divider = ["full", "pill"].includes(tabStyle) ? false : divider;
-setContext("ctx", ctx);
-function init(node) {
-  const destroy = ctx.selected.subscribe((x) => {
-    if (x) node.replaceChildren(x);
-  });
-  return { destroy };
-}
-$: ulClass = twMerge(defaultClass, tabStyle === "underline" && "-mb-px", $$props.class);
+  function init(node: HTMLElement) {
+    const destroy = ctx.selected.subscribe((x: HTMLElement) => {
+      if (x) node.replaceChildren(x);
+    });
+    return { destroy };
+  }
 </script>
 
-<ul {...$$restProps} class={ulClass}>
-  <slot {tabStyle}></slot>
+<ul {...restProps} class={base({ class: ulClass })}>
+  {@render children()}
 </ul>
-{#if divider}
-  <slot name="divider">
-    <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-  </slot>
+{#if dividerBool}
+  <div class={dividerClass()}></div>
 {/if}
-<div class={contentClass} role="tabpanel" aria-labelledby="id-tab" use:init></div>
+<div id={panelId} class={content({ class: contentClass })} role="tabpanel" aria-labelledby={panelId} use:init></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let tabStyle: NonNullable<$$Props['tabStyle']> = 'none';
-@prop export let defaultClass: $$Props['defaultClass'] = 'flex flex-wrap space-x-2 rtl:space-x-reverse';
-@prop export let contentClass: $$Props['contentClass'] = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
-@prop export let divider: $$Props['divider'] = true;
-@prop export let activeClasses: NonNullable<$$Props['activeClasses']> = 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';
-@prop export let inactiveClasses: NonNullable<$$Props['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';
+@props: children: any;
+@props:tabStyle: any = "none";
+@props:ulClass: any;
+@props:contentClass: any;
+@props:divider: any = true;
 -->

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

@@ -1,43 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Writable } from 'svelte/store';
-export interface TabCtxType {
-    activeClasses: string;
-    inactiveClasses: string;
-    selected: Writable<HTMLElement>;
-}
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLUListElement> & {
-        tabStyle?: "full" | "pill" | "underline" | "none";
-        defaultClass?: string;
-        contentClass?: string;
-        divider?: boolean;
-        activeClasses?: string;
-        inactiveClasses?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            tabStyle: NonNullable<"none" | "pill" | "underline" | "full" | undefined>;
-        };
-        divider: {};
-    };
+    slots: {};
 };
-export type TabsProps = typeof __propDef.props;
+type TabsProps_ = typeof __propDef.props;
+export { TabsProps_ as TabsProps };
 export type TabsEvents = typeof __propDef.events;
 export type TabsSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let tabStyle: NonNullable<$$Props['tabStyle']> = 'none';
- * @prop export let defaultClass: $$Props['defaultClass'] = 'flex flex-wrap space-x-2 rtl:space-x-reverse';
- * @prop export let contentClass: $$Props['contentClass'] = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
- * @prop export let divider: $$Props['divider'] = true;
- * @prop export let activeClasses: NonNullable<$$Props['activeClasses']> = 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500';
- * @prop export let inactiveClasses: NonNullable<$$Props['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';
+ * @props: children: any;
+ * @props:tabStyle: any = "none";
+ * @props:ulClass: any;
+ * @props:contentClass: any;
+ * @props:divider: any = true;
  */
-export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
+export default class Tabs extends SvelteComponentTyped<TabsProps_, TabsEvents, TabsSlots> {
 }
-export {};

package/dist/tabs/index.d.ts

@@ -0,0 +1,5 @@
+import type { TabsProps, TabitemProps, TabCtxType } from "./type";
+import TabItem from "./TabItem.svelte";
+import Tabs from "./Tabs.svelte";
+import { tabs, tabItem } from "./theme";
+export { TabItem, tabItem, Tabs, tabs, type TabsProps, type TabitemProps, type TabCtxType };

package/dist/tabs/index.js

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

package/dist/tabs/theme.d.ts

@@ -0,0 +1,136 @@
+import { type VariantProps } from "tailwind-variants";
+export type TabsVaraints = VariantProps<typeof tabs>;
+export declare const tabs: import("tailwind-variants").TVReturnType<{
+    tabStyle: {
+        full: {
+            active: string;
+            inactive: string;
+        };
+        pill: {
+            active: string;
+            inactive: string;
+        };
+        underline: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        none: {
+            active: string;
+            inactive: string;
+        };
+    };
+    hasDivider: {
+        true: {};
+    };
+}, {
+    base: string;
+    content: string;
+    divider: string;
+    active: string;
+    inactive: string;
+}, undefined, {
+    tabStyle: {
+        full: {
+            active: string;
+            inactive: string;
+        };
+        pill: {
+            active: string;
+            inactive: string;
+        };
+        underline: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        none: {
+            active: string;
+            inactive: string;
+        };
+    };
+    hasDivider: {
+        true: {};
+    };
+}, {
+    base: string;
+    content: string;
+    divider: string;
+    active: string;
+    inactive: string;
+}, import("tailwind-variants").TVReturnType<{
+    tabStyle: {
+        full: {
+            active: string;
+            inactive: string;
+        };
+        pill: {
+            active: string;
+            inactive: string;
+        };
+        underline: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        none: {
+            active: string;
+            inactive: string;
+        };
+    };
+    hasDivider: {
+        true: {};
+    };
+}, {
+    base: string;
+    content: string;
+    divider: string;
+    active: string;
+    inactive: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const tabItem: import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            button: string;
+        };
+    };
+    disabled: {
+        true: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+}, undefined, {
+    open: {
+        true: {
+            button: string;
+        };
+    };
+    disabled: {
+        true: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            button: string;
+        };
+    };
+    disabled: {
+        true: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/tabs/theme.js

@@ -0,0 +1,84 @@
+import { tv } from "tailwind-variants";
+export const tabs = tv({
+    slots: {
+        base: "flex space-x-2 rtl:space-x-reverse",
+        content: "p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4",
+        divider: "h-px bg-gray-200 dark:bg-gray-700",
+        active: "p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500",
+        inactive: "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"
+    },
+    variants: {
+        tabStyle: {
+            full: {
+                active: "p-4 w-full rounded-none group-first:rounded-s-lg group-last:rounded-e-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:bg-gray-700 dark:text-white",
+                inactive: "p-4 w-full rounded-none group-first:rounded-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+            },
+            pill: {
+                active: "py-3 px-4 text-white bg-primary-600 rounded-lg",
+                inactive: "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: {
+                base: "-mb-px",
+                active: "p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500 bg-transparent",
+                inactive: "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 bg-transparent"
+            },
+            none: {
+                active: "",
+                inactive: ""
+            }
+        },
+        hasDivider: {
+            true: {}
+        }
+    },
+    compoundVariants: [
+        {
+            tabStyle: ["full", "pill"],
+            hasDivider: true,
+            class: {
+                divider: "hidden"
+            }
+        }
+    ],
+    defaultVariants: {
+        tabStyle: "none",
+        hasDivider: true
+    }
+});
+export const tabItem = tv({
+    slots: {
+        base: "group focus-within:z-10",
+        button: "inline-block text-sm font-medium text-center disabled:cursor-not-allowed",
+        content: "hidden"
+    },
+    variants: {
+        open: {
+            true: {
+                button: "active"
+            }
+        },
+        disabled: {
+            true: {
+                button: "cursor-not-allowed"
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            open: true,
+            class: {
+                button: "" // We'll merge this with activeClasses from context
+            }
+        },
+        {
+            open: false,
+            class: {
+                button: "" // We'll merge this with inactiveClasses from context
+            }
+        }
+    ],
+    defaultVariants: {
+        open: false,
+        disabled: false
+    }
+});

package/dist/tabs/type.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLLiAttributes } from "svelte/elements";
+import { type Writable } from "svelte/store";
+import type { TabsVaraints } from "./theme";
+interface TabsProps extends HTMLAttributes<HTMLUListElement> {
+    children: Snippet;
+    tabStyle?: TabsVaraints["tabStyle"];
+    ulClass?: string;
+    contentClass?: string;
+    divider?: boolean;
+}
+interface TabitemProps extends HTMLLiAttributes {
+    children?: Snippet;
+    titleSlot?: Snippet;
+    open?: boolean;
+    title?: string;
+    activeClass?: string;
+    inactiveClass?: string;
+    disabled?: boolean;
+    tabStyle?: TabsVaraints["tabStyle"];
+}
+interface TabCtxType {
+    activeClass?: string;
+    inactiveClass?: string;
+    tabStyle?: TabsVaraints["tabStyle"];
+    selected: Writable<HTMLElement>;
+    panelId: string;
+}
+export { type TabsProps, type TabitemProps, type TabCtxType };

package/dist/tabs/type.js

@@ -0,0 +1,2 @@
+import {} from "svelte/store";
+export {};

package/dist/theme/Theme.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import deepmerge from "deepmerge";
+  import { setContext, type Snippet } from "svelte";
+  import { tv } from "tailwind-variants";
+  import { baseThemes, type BaseThemes } from "./index";
+
+  interface Props {
+    children: Snippet;
+    theme?: BaseThemes;
+  }
+
+  let { children, theme }: Props = $props();
+
+  type K = keyof BaseThemes;
+
+  // Function to merge theme configurations
+  function mergeThemes(baseThemes: BaseThemes, customTheme?: BaseThemes) {
+    const mergedTheme: BaseThemes = deepmerge(baseThemes, {});
+    // Merge each component's theme
+    for (const [name, baseTheme] of Object.entries(baseThemes)) {
+      const componentName: K = name as K;
+      if (customTheme && componentName in customTheme) {
+        const customComponentTheme = customTheme[componentName as keyof typeof customTheme];
+
+        // Deep merge base theme with custom theme
+        // const result = deepmerge(baseTheme, customComponentTheme);
+        const result = deepmerge(
+          {
+            slots: baseTheme.slots,
+            variants: baseTheme.variants,
+            compoundVariants: baseTheme.compoundVariants,
+            defaultVariants: baseTheme.defaultVariants
+          },
+          {
+            slots: customComponentTheme.slots || {},
+            variants: customComponentTheme.variants || {},
+            compoundVariants: customComponentTheme.compoundVariants || [],
+            defaultVariants: customComponentTheme.defaultVariants || {}
+          }
+        );
+        // @ts-ignore
+        mergedTheme[componentName] = tv(result);
+      }
+    }
+
+    return mergedTheme as BaseThemes;
+  }
+
+  const mergedThemes = mergeThemes(baseThemes, theme);
+
+  setContext<BaseThemes>("themeConfig", mergedThemes);
+</script>
+
+{@render children()}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:theme: any;
+-->

package/dist/theme/Theme.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeProps = typeof __propDef.props;
+export type ThemeEvents = typeof __propDef.events;
+export type ThemeSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:theme: any;
+ */
+export default class Theme extends SvelteComponentTyped<ThemeProps, ThemeEvents, ThemeSlots> {
+}
+export {};