flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/theme/Theme.svelte

@@ -0,0 +1,292 @@
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte";
+  import { tv } from "tailwind-variants";
+  import deepmerge from "deepmerge";
+  import {
+    accordion,
+    accordionitem,
+    alert,
+    avatar,
+    badge,
+    banner,
+    bottomNav,
+    bottomNavItem,
+    bottomnavheader,
+    bottomnavheaderitem,
+    breadcrumb,
+    buttonGroup,
+    button,
+    gradientButton,
+    card,
+    darkmode,
+    android,
+    defaultMockup,
+    desktop,
+    ios,
+    laptop,
+    smartwatch,
+    tablet,
+    drawer,
+    drawerhead,
+    dropdown,
+    dropdowndivider,
+    dropdownli,
+    dropdownul,
+    dropdownHeader,
+    dropdownFooter,
+    footer,
+    footerBrand,
+    footerCopyright,
+    footerIcon,
+    footerUl,
+    footerLi,
+    gallery,
+    indicator,
+    kbd,
+    listGroup,
+    listGroupItem,
+    megamenu,
+    modal,
+    navbar,
+    navUl,
+    navbrand,
+    navLi,
+    navhamburger,
+    paginationItem,
+    pagination,
+    popover,
+    progressbar,
+    advancedrating,
+    rating,
+    review,
+    scorerating,
+    sidebar,
+    sidebarbutton,
+    sidebarcta,
+    sitebarbrand,
+    sidebardropdownwrapper,
+    cardPlaceholder,
+    imagePlaceholder,
+    listPlaceholder,
+    skeleton,
+    testimonialPlaceholder,
+    textPlaceholder,
+    videoPlaceholder,
+    widgetPlaceholder,
+    spinner,
+    table,
+    tablebodyrow,
+    tablehead,
+    tablebodycell,
+    tableheadcell,
+    tabs,
+    tabItem,
+    activity,
+    activityitem,
+    group,
+    groupitem,
+    timeline,
+    timelineitem,
+    toast,
+    toolbar,
+    toolbarGroup,
+    toolbarButton,
+    tooltip,
+    checkbox,
+    dropzone,
+    fileupload,
+    floatingLabelInput,
+    helper,
+    input,
+    label,
+    radio,
+    radioButton,
+    range,
+    search,
+    select,
+    textarea,
+    toggle,
+    anchor,
+    blockquote,
+    descriptionList,
+    heading,
+    hr,
+    img,
+    layout,
+    list,
+    mark,
+    paragraph,
+    secondary,
+    span
+  } from "..";
+  import type { ThemeType } from "../types";
+
+  interface Props {
+    children: Snippet;
+    theme?: Record<string, any>;
+  }
+
+  let { children, theme }: Props = $props();
+
+  // Function to merge theme configurations
+  function mergeThemes(baseThemes: ThemeType, customTheme?: ThemeType) {
+    const mergedTheme: ThemeType = {};
+
+    // Merge each component's theme
+    for (const [componentName, baseTheme] of Object.entries(baseThemes)) {
+      const customComponentTheme = customTheme?.[componentName] || {};
+
+      // Deep merge base theme with custom theme
+      mergedTheme[componentName] = tv(
+        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 || {}
+          }
+        )
+      );
+    }
+
+    return mergedTheme;
+  }
+
+  const baseThemes = {
+    accordion,
+    accordionitem,
+    alert,
+    avatar,
+    badge,
+    banner,
+    bottomNav,
+    bottomNavItem,
+    bottomnavheader,
+    bottomnavheaderitem,
+    breadcrumb,
+    buttonGroup,
+    button,
+    gradientButton,
+    card,
+    darkmode,
+    android,
+    defaultMockup,
+    desktop,
+    ios,
+    laptop,
+    smartwatch,
+    tablet,
+    drawer,
+    drawerhead,
+    dropdown,
+    dropdowndivider,
+    dropdownli,
+    dropdownul,
+    dropdownHeader,
+    dropdownFooter,
+    footer,
+    footerBrand,
+    footerCopyright,
+    footerIcon,
+    footerUl,
+    footerLi,
+    gallery,
+    indicator,
+    kbd,
+    listGroup,
+    listGroupItem,
+    megamenu,
+    modal,
+    navbar,
+    navUl,
+    navbrand,
+    navLi,
+    navhamburger,
+    paginationItem,
+    pagination,
+    popover,
+    progressbar,
+    advancedrating,
+    rating,
+    review,
+    scorerating,
+    sidebar,
+    sidebarbutton,
+    sidebarcta,
+    sitebarbrand,
+    sidebardropdownwrapper,
+    cardPlaceholder,
+    imagePlaceholder,
+    listPlaceholder,
+    skeleton,
+    testimonialPlaceholder,
+    textPlaceholder,
+    videoPlaceholder,
+    widgetPlaceholder,
+    spinner,
+    table,
+    tablebodyrow,
+    tablehead,
+    tablebodycell,
+    tableheadcell,
+    tabs,
+    tabItem,
+    activity,
+    activityitem,
+    group,
+    groupitem,
+    timeline,
+    timelineitem,
+    toast,
+    toolbar,
+    toolbarGroup,
+    toolbarButton,
+    tooltip,
+    checkbox,
+    dropzone,
+    fileupload,
+    floatingLabelInput,
+    helper,
+    input,
+    label,
+    radio,
+    radioButton,
+    range,
+    search,
+    select,
+    textarea,
+    toggle,
+    anchor,
+    blockquote,
+    descriptionList,
+    heading,
+    hr,
+    img,
+    layout,
+    list,
+    mark,
+    paragraph,
+    secondary,
+    span
+  };
+
+  const mergedThemes = mergeThemes(baseThemes, theme);
+
+  setContext("themeConfig", mergedThemes);
+</script>
+
+{@render children()}
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:theme: any;
+-->

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

@@ -0,0 +1,13 @@
+import { type Snippet } from "svelte";
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:theme: any;
+ */
+declare const Theme: import("svelte").Component<{
+    children: Snippet;
+    theme?: Record<string, any>;
+}, {}, "">;
+type Theme = ReturnType<typeof Theme>;
+export default Theme;

package/dist/timeline/Activity.svelte

@@ -1,15 +1,18 @@
-<script>import { twMerge } from "tailwind-merge";
-export let olClass = "relative border-s border-gray-200 dark:border-gray-700";
-let olCls = twMerge(olClass, $$props.class);
+<script lang="ts">
+  import { type ActivityProps as Props, activity } from "./index";
+
+  let { children, class: className, ...restProps }: Props = $props();
+  const base = activity({ class: className });
 </script>
 
-<ol class={olCls}>
-  <slot />
+<ol {...restProps} class={base}>
+  {@render children()}
 </ol>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let olClass: $$Props['olClass'] = 'relative border-s border-gray-200 dark:border-gray-700';
+@props: children: any;
+@props:class: string;
 -->

package/dist/timeline/Activity.svelte.d.ts

@@ -1,24 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLOlAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLOlAttributes & {
-        olClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ActivityProps = typeof __propDef.props;
-export type ActivityEvents = typeof __propDef.events;
-export type ActivitySlots = typeof __propDef.slots;
+import { type ActivityProps as Props } from "./index";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let olClass: $$Props['olClass'] = 'relative border-s border-gray-200 dark:border-gray-700';
+ * @props: children: any;
+ * @props:class: string;
  */
-export default class Activity extends SvelteComponentTyped<ActivityProps, ActivityEvents, ActivitySlots> {
-}
-export {};
+declare const Activity: import("svelte").Component<Props, {}, "">;
+type Activity = ReturnType<typeof Activity>;
+export default Activity;

package/dist/timeline/ActivityItem.svelte

@@ -1,46 +1,26 @@
-<script>import { twMerge } from "tailwind-merge";
-export let activities = [];
-export let liClass = "mb-10 ms-6";
-export let spanClass = "flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900";
-export let imgClass = "rounded-full shadow-lg";
-export let outerDivClass = "p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600";
-export let innerDivClass = "justify-between items-center mb-3 sm:flex";
-export let timeClass = "mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0";
-export let titleClass = "text-sm font-normal text-gray-500 lex dark:text-gray-300";
-export let textClass = "p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300";
-export let classLi = "";
-export let classSpan = "";
-export let classImg = "";
-export let classOuterDiv = "";
-export let classInnerDiv = "";
-export let classTime = "";
-export let classTitle = "";
-export let classText = "";
-let liCls = twMerge(liClass, classLi);
-let spanCls = twMerge(spanClass, classSpan);
-let imgCls = twMerge(imgClass, classImg);
-let outerDivCls = twMerge(outerDivClass, classOuterDiv);
-let innerDivCls = twMerge(innerDivClass, classInnerDiv);
-let timeCls = twMerge(timeClass, classTime);
-let titleCls = twMerge(titleClass, classTitle);
-let textCls = twMerge(textClass, classText);
+<script lang="ts">
+  import { type ActivityItemProps as Props, activityitem } from "./index";
+
+  let { activities, liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass, ...restProps }: Props = $props();
+
+  const { li, span, img, outerDiv, innerDiv, time, title, text } = $derived(activityitem());
 </script>
 
-{#each activities as { title, date, src, alt, text }}
-  <li class={liCls}>
-    <span class={spanCls}>
-      <img class={imgCls} {src} {alt} />
+{#each activities as { name, date, src, alt, activity }}
+  <li {...restProps} class={li({ class: liClass })}>
+    <span class={span({ class: spanClass })}>
+      <img class={img({ class: imgClass })} {src} {alt} />
     </span>
-    <div class={outerDivCls}>
-      <div class={innerDivCls}>
-        <time class={timeCls}>{date}</time>
-        <div class={titleCls}>
-          {@html title}
+    <div class={outerDiv({ class: outerDivClass })}>
+      <div class={innerDiv({ class: innerDivClass })}>
+        <time class={time({ class: timeClass })}>{date}</time>
+        <div class={title({ class: titleClass })}>
+          {@html name}
         </div>
       </div>
-      {#if text}
-        <div class={textCls}>
-          {@html text}
+      {#if activity}
+        <div class={text({ class: textClass })}>
+          {@html activity}
         </div>
       {/if}
     </div>
@@ -49,23 +29,15 @@ let textCls = twMerge(textClass, classText);
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let activities: $$Props['activities'] = [];
-@prop export let liClass: $$Props['liClass'] = 'mb-10 ms-6';
-@prop export let spanClass: $$Props['spanClass'] = 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
-@prop export let imgClass: $$Props['imgClass'] = 'rounded-full shadow-lg';
-@prop export let outerDivClass: $$Props['outerDivClass'] = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
-@prop export let innerDivClass: $$Props['innerDivClass'] = 'justify-between items-center mb-3 sm:flex';
-@prop export let timeClass: $$Props['timeClass'] = 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0';
-@prop export let titleClass: $$Props['titleClass'] = 'text-sm font-normal text-gray-500 lex dark:text-gray-300';
-@prop export let textClass: $$Props['textClass'] = 'p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300';
-@prop export let classLi: $$Props['classLi'] = '';
-@prop export let classSpan: $$Props['classSpan'] = '';
-@prop export let classImg: $$Props['classImg'] = '';
-@prop export let classOuterDiv: $$Props['classOuterDiv'] = '';
-@prop export let classInnerDiv: $$Props['classInnerDiv'] = '';
-@prop export let classTime: $$Props['classTime'] = '';
-@prop export let classTitle: $$Props['classTitle'] = '';
-@prop export let classText: $$Props['classText'] = '';
+@props: activities: any;
+@props:liClass: any;
+@props:spanClass: any;
+@props:imgClass: any;
+@props:outerDivClass: any;
+@props:innerDivClass: any;
+@props:timeClass: any;
+@props:titleClass: any;
+@props:textClass: any;
 -->

package/dist/timeline/ActivityItem.svelte.d.ts

@@ -1,54 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ActivityType } from '../types';
-declare const __propDef: {
-    props: {
-        activities: ActivityType[];
-        liClass?: string;
-        spanClass?: string;
-        imgClass?: string;
-        outerDivClass?: string;
-        innerDivClass?: string;
-        timeClass?: string;
-        titleClass?: string;
-        textClass?: string;
-        classLi?: string;
-        classSpan?: string;
-        classImg?: string;
-        classOuterDiv?: string;
-        classInnerDiv?: string;
-        classTime?: string;
-        classTitle?: string;
-        classText?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ActivityItemProps = typeof __propDef.props;
-export type ActivityItemEvents = typeof __propDef.events;
-export type ActivityItemSlots = typeof __propDef.slots;
+import { type ActivityItemProps as Props } from "./index";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let activities: $$Props['activities'] = [];
- * @prop export let liClass: $$Props['liClass'] = 'mb-10 ms-6';
- * @prop export let spanClass: $$Props['spanClass'] = 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
- * @prop export let imgClass: $$Props['imgClass'] = 'rounded-full shadow-lg';
- * @prop export let outerDivClass: $$Props['outerDivClass'] = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
- * @prop export let innerDivClass: $$Props['innerDivClass'] = 'justify-between items-center mb-3 sm:flex';
- * @prop export let timeClass: $$Props['timeClass'] = 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0';
- * @prop export let titleClass: $$Props['titleClass'] = 'text-sm font-normal text-gray-500 lex dark:text-gray-300';
- * @prop export let textClass: $$Props['textClass'] = 'p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300';
- * @prop export let classLi: $$Props['classLi'] = '';
- * @prop export let classSpan: $$Props['classSpan'] = '';
- * @prop export let classImg: $$Props['classImg'] = '';
- * @prop export let classOuterDiv: $$Props['classOuterDiv'] = '';
- * @prop export let classInnerDiv: $$Props['classInnerDiv'] = '';
- * @prop export let classTime: $$Props['classTime'] = '';
- * @prop export let classTitle: $$Props['classTitle'] = '';
- * @prop export let classText: $$Props['classText'] = '';
+ * @props: activities: any;
+ * @props:liClass: any;
+ * @props:spanClass: any;
+ * @props:imgClass: any;
+ * @props:outerDivClass: any;
+ * @props:innerDivClass: any;
+ * @props:timeClass: any;
+ * @props:titleClass: any;
+ * @props:textClass: any;
  */
-export default class ActivityItem extends SvelteComponentTyped<ActivityItemProps, ActivityItemEvents, ActivityItemSlots> {
-}
-export {};
+declare const ActivityItem: import("svelte").Component<Props, {}, "">;
+type ActivityItem = ReturnType<typeof ActivityItem>;
+export default ActivityItem;

package/dist/timeline/Group.svelte

@@ -1,32 +1,24 @@
-<script>import { twMerge } from "tailwind-merge";
-export let divClass = "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700";
-export let timeClass = "text-lg font-semibold text-gray-900 dark:text-white";
-export let date = "";
-export let olClass = "mt-3 divide-y divider-gray-200 dark:divide-gray-700";
-export let classDiv = "";
-export let classTime = "";
-export let classOl = "";
-let divCls = twMerge(divClass, classDiv);
-let timeCls = twMerge(timeClass, classTime);
-let olCls = twMerge(olClass, classOl);
+<script lang="ts">
+  import { type GroupProps as Props, group } from ".";
+
+  let { children, divClass, timeClass, date, olClass, ...restProps }: Props = $props();
+  const { div, time, ol } = $derived(group());
 </script>
 
-<div class={divCls}>
-  <time class={timeCls}>{date}</time>
-  <ol {...$$restProps} class={olCls}>
-    <slot />
+<div class={div({ class: divClass })}>
+  <time class={time({ class: timeClass })}>{date}</time>
+  <ol {...restProps} class={ol({ class: olClass })}>
+    {@render children()}
   </ol>
 </div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
-@prop export let timeClass: $$Props['timeClass'] = 'text-lg font-semibold text-gray-900 dark:text-white';
-@prop export let date: $$Props['date'] = '';
-@prop export let olClass: $$Props['olClass'] = 'mt-3 divide-y divider-gray-200 dark:divide-gray-700';
-@prop export let classDiv: $$Props['classDiv'] = '';
-@prop export let classTime: $$Props['classTime'] = '';
-@prop export let classOl: $$Props['classOl'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:timeClass: any;
+@props:date: any;
+@props:olClass: any;
 -->

package/dist/timeline/Group.svelte.d.ts

@@ -1,36 +1,13 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLOlAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLOlAttributes & {
-        divClass?: string;
-        timeClass?: string;
-        date?: Date | string;
-        olClass?: string;
-        classDiv?: string;
-        classTime?: string;
-        classOl?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type GroupProps = typeof __propDef.props;
-export type GroupEvents = typeof __propDef.events;
-export type GroupSlots = typeof __propDef.slots;
+import { type GroupProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
- * @prop export let timeClass: $$Props['timeClass'] = 'text-lg font-semibold text-gray-900 dark:text-white';
- * @prop export let date: $$Props['date'] = '';
- * @prop export let olClass: $$Props['olClass'] = 'mt-3 divide-y divider-gray-200 dark:divide-gray-700';
- * @prop export let classDiv: $$Props['classDiv'] = '';
- * @prop export let classTime: $$Props['classTime'] = '';
- * @prop export let classOl: $$Props['classOl'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:timeClass: any;
+ * @props:date: any;
+ * @props:olClass: any;
  */
-export default class Group extends SvelteComponentTyped<GroupProps, GroupEvents, GroupSlots> {
-}
-export {};
+declare const Group: import("svelte").Component<Props, {}, "">;
+type Group = ReturnType<typeof Group>;
+export default Group;