flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/theme/index.js

@@ -0,0 +1,117 @@
+import { accordion, accordionitem, activity, activityitem, advancedrating, alert, anchor, android, avatar, badge, banner, blockquote, bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem, breadcrumb, button, buttonGroup, card, cardPlaceholder, checkbox, darkmode, defaultMockup, descriptionList, desktop, drawer, drawerhead, dropdown, dropdownHeader, dropdownDivider, dropdownItem, dropdownGroup, dropzone, fileupload, floatingLabelInput, footer, footerBrand, footerCopyright, footerIcon, footerLink, footerLinkGroup, gallery, gradientButton, group, groupitem, heading, helper, hr, imagePlaceholder, img, indicator, input, ios, kbd, label, laptop, layout, list, listGroup, listGroupItem, listPlaceholder, mark, megamenu, modal, navLi, navUl, navbar, navbrand, navhamburger, pagination, paginationItem, paragraph, popover, progressbar, radio, radioButton, range, rating, review, scorerating, search, secondary, select, sidebar, sidebarbutton, sidebarcta, sidebardropdownwrapper, sitebarbrand, skeleton, smartwatch, span, spinner, tabItem, table, tablebodycell, tablebodyrow, tablehead, tableheadcell, tablet, tabs, testimonialPlaceholder, textPlaceholder, textarea, timeline, timelineitem, toast, toggle, toolbar, toolbarButton, toolbarGroup, tooltip, videoPlaceholder, widgetPlaceholder } from "..";
+export 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,
+    dropdownItem,
+    dropdownGroup,
+    dropdownHeader,
+    footer,
+    footerBrand,
+    footerCopyright,
+    footerIcon,
+    footerLinkGroup,
+    footerLink,
+    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
+};

package/dist/timeline/Activity.svelte

@@ -1,15 +1,19 @@
-<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 clsx from "clsx";
+  import { type ActivityProps as Props, activity } from "./index";
+
+  let { children, class: className, ...restProps }: Props = $props();
+  const base = activity({ class: clsx(className) });
 </script>
 
-<ol class={olCls}>
-  <slot />
+<ol {...restProps} class={base}>
+  {@render children()}
 </ol>
 
 <!--
 @component
 [Go to docs](https://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,20 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLOlAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLOlAttributes & {
-        olClass?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type ActivityProps = typeof __propDef.props;
+type ActivityProps_ = typeof __propDef.props;
+export { ActivityProps_ as ActivityProps };
 export type ActivityEvents = typeof __propDef.events;
 export type ActivitySlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://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 default class Activity extends SvelteComponentTyped<ActivityProps_, ActivityEvents, ActivitySlots> {
 }
-export {};

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-xs 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 { title: name, date, src, alt, text: 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>
@@ -51,21 +31,13 @@ let textCls = twMerge(textClass, classText);
 @component
 [Go to docs](https://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-xs 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,55 +1,27 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ActivityType } from '../types';
-import type { HTMLLiAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLLiAttributes & {
-        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;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type ActivityItemProps = typeof __propDef.props;
+type ActivityItemProps_ = typeof __propDef.props;
+export { ActivityItemProps_ as ActivityItemProps };
 export type ActivityItemEvents = typeof __propDef.events;
 export type ActivityItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://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-xs 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 default class ActivityItem extends SvelteComponentTyped<ActivityItemProps_, ActivityItemEvents, ActivityItemSlots> {
 }
-export {};

package/dist/timeline/Group.svelte

@@ -1,20 +1,14 @@
-<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>
 
@@ -22,11 +16,9 @@ let olCls = twMerge(olClass, classOl);
 @component
 [Go to docs](https://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,23 @@
 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;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type GroupProps = typeof __propDef.props;
+type GroupProps_ = typeof __propDef.props;
+export { GroupProps_ as GroupProps };
 export type GroupEvents = typeof __propDef.events;
 export type GroupSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://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 default class Group extends SvelteComponentTyped<GroupProps_, GroupEvents, GroupSlots> {
 }
-export {};

package/dist/timeline/GroupItem.svelte

@@ -1,50 +1,37 @@
-<script>import { twMerge } from "tailwind-merge";
-export let timelines;
-export let aClass = "block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700";
-export let imgClass = "me-3 mb-3 w-12 h-12 rounded-full sm:mb-0";
-export let divClass = "text-gray-600 dark:text-gray-400";
-export let titleClass = "text-base font-normal";
-export let spanClass = "inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400";
-export let isPrivacy = true;
-export let classA = "";
-export let classImg = "";
-export let classDiv = "";
-export let classTitle = "";
-export let classSpan = "";
-let aCls = twMerge(aClass, classA);
-let imgCls = twMerge(imgClass, classImg);
-let divCls = twMerge(divClass, classDiv);
-let titleCls = twMerge(titleClass, classTitle);
-let spanCls = twMerge(spanClass, classSpan);
+<script lang="ts">
+  import { type GroupItemProps as Props, groupitem } from ".";
+
+  let { timelines, aClass, imgClass, divClass, titleClass, spanClass, ...restProps }: Props = $props();
+
+  const { a, img, div, title, span } = $derived(groupitem());
 </script>
 
-{#each timelines as { title, src, alt, isPrivate, href, comment }}
-  <li>
-    <a {href} class={aCls}>
-      <img class={imgCls} {src} {alt} />
-      <div class={divCls}>
-        <div class={titleCls}>
-          {@html title}
+{#each timelines as { name, src, alt, isPrivate, href, comment }}
+  <li {...restProps}>
+    <a {href} class={a({ class: aClass })}>
+      <img class={img({ class: imgClass })} {src} {alt} />
+      <div class={div({ class: divClass })}>
+        <div class={title({ class: titleClass })}>
+          {@html name}
         </div>
         {#if comment}
           <div class="text-sm font-normal">{comment}</div>
         {/if}
-        {#if isPrivacy}
-          <span class={spanCls}>
-            {#if isPrivate}
-              <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
-                <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
-              </svg>
-              Private
-            {:else}
-              <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd" />
-              </svg>
-              Public
-            {/if}
-          </span>
-        {/if}
+
+        <span class={span({ class: spanClass })}>
+          {#if isPrivate}
+            <svg class="me-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
+              <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
+            </svg>
+            Private
+          {:else}
+            <svg class="me-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd" />
+            </svg>
+            Public
+          {/if}
+        </span>
       </div>
     </a>
   </li>
@@ -54,16 +41,10 @@ let spanCls = twMerge(spanClass, classSpan);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let timelines: $$Props['timelines'];
-@prop export let aClass: $$Props['aClass'] = 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700';
-@prop export let imgClass: $$Props['imgClass'] = 'me-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
-@prop export let divClass: $$Props['divClass'] = 'text-gray-600 dark:text-gray-400';
-@prop export let titleClass: $$Props['titleClass'] = 'text-base font-normal';
-@prop export let spanClass: $$Props['spanClass'] = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
-@prop export let isPrivacy: $$Props['isPrivacy'] = true;
-@prop export let classA: $$Props['classA'] = '';
-@prop export let classImg: $$Props['classImg'] = '';
-@prop export let classDiv: $$Props['classDiv'] = '';
-@prop export let classTitle: $$Props['classTitle'] = '';
-@prop export let classSpan: $$Props['classSpan'] = '';
+@props: timelines: any;
+@props:aClass: any;
+@props:imgClass: any;
+@props:divClass: any;
+@props:titleClass: any;
+@props:spanClass: any;
 -->

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

@@ -1,45 +1,24 @@
 import { SvelteComponentTyped } from "svelte";
-import type { GroupTimelineType } from '../types';
-import type { HTMLLiAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLLiAttributes & {
-        timelines: GroupTimelineType[];
-        aClass?: string;
-        imgClass?: string;
-        divClass?: string;
-        titleClass?: string;
-        spanClass?: string;
-        isPrivacy?: boolean;
-        classA?: string;
-        classImg?: string;
-        classDiv?: string;
-        classTitle?: string;
-        classSpan?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type GroupItemProps = typeof __propDef.props;
+type GroupItemProps_ = typeof __propDef.props;
+export { GroupItemProps_ as GroupItemProps };
 export type GroupItemEvents = typeof __propDef.events;
 export type GroupItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let timelines: $$Props['timelines'];
- * @prop export let aClass: $$Props['aClass'] = 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700';
- * @prop export let imgClass: $$Props['imgClass'] = 'me-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
- * @prop export let divClass: $$Props['divClass'] = 'text-gray-600 dark:text-gray-400';
- * @prop export let titleClass: $$Props['titleClass'] = 'text-base font-normal';
- * @prop export let spanClass: $$Props['spanClass'] = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
- * @prop export let isPrivacy: $$Props['isPrivacy'] = true;
- * @prop export let classA: $$Props['classA'] = '';
- * @prop export let classImg: $$Props['classImg'] = '';
- * @prop export let classDiv: $$Props['classDiv'] = '';
- * @prop export let classTitle: $$Props['classTitle'] = '';
- * @prop export let classSpan: $$Props['classSpan'] = '';
+ * @props: timelines: any;
+ * @props:aClass: any;
+ * @props:imgClass: any;
+ * @props:divClass: any;
+ * @props:titleClass: any;
+ * @props:spanClass: any;
  */
-export default class GroupItem extends SvelteComponentTyped<GroupItemProps, GroupItemEvents, GroupItemSlots> {
+export default class GroupItem extends SvelteComponentTyped<GroupItemProps_, GroupItemEvents, GroupItemSlots> {
 }
-export {};

package/dist/timeline/Timeline.svelte

@@ -1,23 +1,24 @@
-<script>import { twMerge } from "tailwind-merge";
-import { setContext } from "svelte";
-export let order = "default";
-setContext("order", order);
-let olClasses = {
-  group: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700",
-  horizontal: "sm:flex",
-  activity: "relative border-s border-gray-200 dark:border-gray-700",
-  vertical: "relative border-s border-gray-200 dark:border-gray-700",
-  default: "relative border-s border-gray-200 dark:border-gray-700"
-};
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { type TimelineProps as Props, timeline } from ".";
+  import clsx from "clsx";
+  import type { TimelineVariants } from "./theme";
+
+  let { children, order = "default", class: className, ...restProps }: Props = $props();
+
+  setContext<TimelineVariants["order"]>("order", order);
+  const olCls = $derived(timeline({ order, class: clsx(className) }));
 </script>
 
-<ol {...$$restProps} class={twMerge(olClasses[order], $$props.class)} >
-  <slot />
+<ol {...restProps} class={olCls}>
+  {@render children()}
 </ol>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let order: NonNullable<$$Props['order']> = 'default';
+@props: children: any;
+@props:order: any = "default";
+@props:class: string;
 -->