flowbite-svelte 1.10.19 → 1.10.21

package/dist/theme/themes.js

@@ -0,0 +1,75 @@
+export { accordion, accordionItem } from "../accordion";
+export { alert } from "../alert";
+export { avatar } from "../avatar";
+export { badge } from "../badge";
+export { banner } from "../banner";
+export { bottomNav, bottomNavHeader, bottomNavHeaderItem, bottomNavItem } from "../bottom-navigation";
+export { breadcrumb, breadcrumbItem } from "../breadcrumb";
+export { buttonGroup } from "../button-group";
+export { button, gradientButton } from "../buttons";
+export { card } from "../card";
+export { carousel, carouselIndicators, controlButton, slide, thumbnail, thumbnails } from "../carousel";
+export { clipboard } from "../clipboard";
+export { darkmode } from "../darkmode";
+export { datepicker } from "../datepicker";
+export { android, desktop, ios, tablet } from "../device-mockups";
+export { drawer } from "../drawer";
+export { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from "../dropdown";
+export { footer, footerBrand, footerCopyright, footerIcon, footerLink, footerLinkGroup } from "../footer";
+export { gallery } from "../gallery";
+export { indicator } from "../indicator";
+export { kbd } from "../kbd";
+export { listGroup, listGroupItem } from "../list-group";
+export { megamenu } from "../mega-menu";
+export { modal } from "../modal";
+export { navbar, navbarBrand, navbarHamburger, navbarLi, navbarUl, navbarContainer } from "../navbar";
+export { pagination, paginationButton, paginationItem, paginationNav } from "../pagination";
+export { popover } from "../popover";
+export { progressbar, progressradial } from "../progress";
+export { advancedRating, rating, review, scoreRating } from "../rating";
+export { sidebar, sidebarBrand, sidebarButton, sidebarCta, sidebarDropdownWrapper } from "../sidebar";
+export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "../skeleton";
+export { speedDial, speedDialButton } from "../speed-dial";
+export { spinner } from "../spinner";
+export { stepIndicator } from "../stepindicator";
+export { stepper, progressStepper, verticalStepper, detailedStepper, breadcrumbStepper, timelineStepper } from "../stepper";
+export { table, tableBodyCell, tableBodyRow, tableHead, tableHeadCell, tableSearch } from "../table";
+export { tabs, tabItem } from "../tabs";
+export { timeline, activity, activityItem, group, groupItem, timelineItem } from "../timeline";
+export { toast } from "../toast";
+export { toolbar, toolbarButton, toolbarGroup } from "../toolbar";
+export { tooltip } from "../tooltip";
+// export {utils} from "../utils";
+// export {} from "../video";
+// forms
+// export {addon} from "../forms/input-addon";
+export { buttonToggle, buttonToggleGroup } from "../forms/button-toggle";
+export { checkbox, checkboxButton } from "../forms/checkbox";
+export { dropzone } from "../forms/dropzone";
+export { fileupload } from "../forms/fileupload";
+export { floatingLabelInput } from "../forms/floating-label";
+export { helper } from "../forms/helper";
+export { input } from "../forms/input-field";
+export { label } from "../forms/label";
+export { phoneInput } from "../forms/phoneinput";
+export { radio, radioButton } from "../forms/radio";
+export { range } from "../forms/range";
+export { search } from "../forms/search";
+export { select, multiSelect } from "../forms/select";
+export { tags } from "../forms/tags";
+export { textarea } from "../forms/textarea";
+export { timepicker } from "../forms/timepicker";
+export { toggle } from "../forms/toggle";
+// typography
+export { anchor } from "../typography/anchor";
+export { blockquote } from "../typography/blockquote";
+export { descriptionList } from "../typography/descriptionlist";
+export { heading } from "../typography/heading";
+export { hr } from "../typography/hr";
+export { img } from "../typography/img";
+export { layout } from "../typography/layout";
+export { list } from "../typography/list";
+export { mark } from "../typography/mark";
+export { paragraph } from "../typography/paragraph";
+export { secondary } from "../typography/secondary";
+export { span } from "../typography/span";

package/dist/timeline/Activity.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1756)
+[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1758)
 ## Props
 @prop children
 @prop class: className

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

@@ -2,7 +2,7 @@ import type { ActivityProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1756)
+ * [ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1758)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/timeline/ActivityItem.svelte

@@ -1,30 +1,56 @@
 <script lang="ts">
-  import { activityItem, type ActivityItemTheme } from "./index";
+  import { activityItem } from "./index";
   import type { ActivityItemProps } from "../types";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
-  let { activities, liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass, ...restProps }: ActivityItemProps = $props();
+  let { activities, liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass, class: className, classes, ...restProps }: ActivityItemProps = $props();
+
+  warnThemeDeprecation(
+    "ActivityItem",
+    { liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass },
+    {
+      liClass: "class",
+      spanClass: "span",
+      imgClass: "img",
+      outerDivClass: "outer",
+      innerDivClass: "inner",
+      timeClass: "time",
+      titleClass: "title",
+      textClass: "text"
+    }
+  );
+  const styling = $derived(
+    classes ?? {
+      span: spanClass,
+      img: imgClass,
+      outer: outerDivClass,
+      inner: innerDivClass,
+      time: timeClass,
+      title: titleClass,
+      text: textClass
+    }
+  );
 
   const theme = getTheme("activityItem");
 
-  const { li, span, img, outerDiv, innerDiv, time, title, text } = $derived(activityItem());
+  const { li, span, img, outer, inner, time, title, text } = $derived(activityItem());
 </script>
 
 {#each activities as { title: name, date, src, alt, text: activity }}
-  <li {...restProps} class={li({ class: clsx((theme as ActivityItemTheme)?.li, liClass) })}>
-    <span class={span({ class: clsx((theme as ActivityItemTheme)?.span, spanClass) })}>
-      <img class={img({ class: clsx((theme as ActivityItemTheme)?.img, imgClass) })} {src} {alt} />
+  <li {...restProps} class={li({ class: clsx(theme?.li, className ?? liClass) })}>
+    <span class={span({ class: clsx(theme?.span, styling.span) })}>
+      <img class={img({ class: clsx(theme?.img, styling.img) })} {src} {alt} />
     </span>
-    <div class={outerDiv({ class: clsx((theme as ActivityItemTheme)?.outerDiv, outerDivClass) })}>
-      <div class={innerDiv({ class: clsx((theme as ActivityItemTheme)?.innerDiv, innerDivClass) })}>
-        <time class={time({ class: clsx((theme as ActivityItemTheme)?.time, timeClass) })}>{date}</time>
-        <div class={title({ class: clsx((theme as ActivityItemTheme)?.title, titleClass) })}>
+    <div class={outer({ class: clsx(theme?.outer, styling.outer) })}>
+      <div class={inner({ class: clsx(theme?.inner, styling.inner) })}>
+        <time class={time({ class: clsx(theme?.time, styling.time) })}>{date}</time>
+        <div class={title({ class: clsx(theme?.title, styling.title) })}>
           {@html name}
         </div>
       </div>
       {#if activity}
-        <div class={text({ class: clsx((theme as ActivityItemTheme)?.text, textClass) })}>
+        <div class={text({ class: clsx(theme?.text, styling.text) })}>
           {@html activity}
         </div>
       {/if}
@@ -36,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1760)
+[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1762)
 ## Props
 @prop activities
 @prop liClass
@@ -47,5 +73,7 @@
 @prop timeClass
 @prop titleClass
 @prop textClass
+@prop class: className
+@prop classes
 @prop ...restProps
 -->

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

@@ -2,7 +2,7 @@ import type { ActivityItemProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1760)
+ * [ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1762)
  * ## Props
  * @prop activities
  * @prop liClass
@@ -13,6 +13,8 @@ import type { ActivityItemProps } from "../types";
  * @prop timeClass
  * @prop titleClass
  * @prop textClass
+ * @prop class: className
+ * @prop classes
  * @prop ...restProps
  */
 declare const ActivityItem: import("svelte").Component<ActivityItemProps, {}, "">;

package/dist/timeline/Group.svelte

@@ -1,19 +1,33 @@
 <script lang="ts">
-  import { group, type GroupTheme } from ".";
+  import { group } from ".";
   import type { GroupProps } from "../types";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
-  let { children, divClass, timeClass, date, olClass, ...restProps }: GroupProps = $props();
+  let { children, divClass, timeClass, date, olClass, class: className, classes, ...restProps }: GroupProps = $props();
+
+  warnThemeDeprecation(
+    "Group",
+    { divClass, timeClass, olClass },
+    {
+      divClass: "class",
+      timeClass: "time",
+      olClass: "ol"
+    }
+  );
+  const styling = $derived({
+    time: timeClass,
+    ol: olClass
+  });
 
   const theme = getTheme("group");
 
   const { div, time, ol } = $derived(group());
 </script>
 
-<div class={div({ class: clsx((theme as GroupTheme)?.div, divClass) })}>
-  <time class={time({ class: clsx((theme as GroupTheme)?.time, timeClass) })}>{date}</time>
-  <ol {...restProps} class={ol({ class: clsx((theme as GroupTheme)?.ol, olClass) })}>
+<div class={div({ class: clsx(theme?.div, className ?? divClass) })}>
+  <time class={time({ class: clsx(theme?.time, styling.time) })}>{date}</time>
+  <ol {...restProps} class={ol({ class: clsx(theme?.ol, styling.ol) })}>
     {@render children()}
   </ol>
 </div>
@@ -22,12 +36,14 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1772)
+[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1774)
 ## Props
 @prop children
 @prop divClass
 @prop timeClass
 @prop date
 @prop olClass
+@prop class: className
+@prop classes
 @prop ...restProps
 -->

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

@@ -2,13 +2,15 @@ import type { GroupProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1772)
+ * [GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1774)
  * ## Props
  * @prop children
  * @prop divClass
  * @prop timeClass
  * @prop date
  * @prop olClass
+ * @prop class: className
+ * @prop classes
  * @prop ...restProps
  */
 declare const Group: import("svelte").Component<GroupProps, {}, "">;

package/dist/timeline/GroupItem.svelte

@@ -1,37 +1,57 @@
 <script lang="ts">
-  import { groupItem, type GroupItemTheme } from ".";
+  import { groupItem } from ".";
   import type { GroupItemProps } from "../types";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
-  let { timelines, aClass, imgClass, divClass, titleClass, spanClass, ...restProps }: GroupItemProps = $props();
+  let { timelines, aClass, imgClass, divClass, titleClass, spanClass, class: className, classes, ...restProps }: GroupItemProps = $props();
 
+  warnThemeDeprecation(
+    "GroupItem",
+    { aClass, imgClass, divClass, titleClass, spanClass },
+    {
+      aClass: "class",
+      imgClass: "img",
+      divClass: "div",
+      titleClass: "title",
+      spanClass: "span"
+    }
+  );
+  const styling = $derived(
+    classes ?? {
+      img: imgClass,
+      div: divClass,
+      title: titleClass,
+      span: spanClass,
+      a: aClass
+    }
+  );
   const theme = getTheme("groupItem");
 
-  const { a, img, div, title, span } = $derived(groupItem());
+  const { base, a, img, div, title, span, svg } = $derived(groupItem());
 </script>
 
 {#each timelines as { name, src, alt, isPrivate, href, comment }}
-  <li {...restProps}>
-    <a {href} class={a({ class: clsx((theme as GroupItemTheme)?.a, aClass) })}>
-      <img class={img({ class: clsx((theme as GroupItemTheme)?.img, imgClass) })} {src} {alt} />
-      <div class={div({ class: clsx((theme as GroupItemTheme)?.div, divClass) })}>
-        <div class={title({ class: clsx((theme as GroupItemTheme)?.title, titleClass) })}>
+  <li class={base({ class: clsx(theme?.base, className) })} {...restProps}>
+    <a {href} class={a({ class: clsx(theme?.a, styling.a) })}>
+      <img class={img({ class: clsx(theme?.img, styling.img) })} {src} {alt} />
+      <div class={div({ class: clsx(theme?.div, styling.div) })}>
+        <div class={title({ class: clsx(theme?.title, styling.title) })}>
           {@html name}
         </div>
         {#if comment}
           <div class="text-sm font-normal">{comment}</div>
         {/if}
 
-        <span class={span({ class: clsx((theme as GroupItemTheme)?.span, spanClass) })}>
+        <span class={span({ class: clsx(theme?.span, styling.span) })}>
           {#if isPrivate}
-            <svg class="me-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <svg class={svg({ class: clsx(theme?.svg, classes?.svg) })} 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">
+            <svg class={svg({ class: clsx(theme?.svg, classes?.svg) })} 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
@@ -46,7 +66,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1780)
+[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1782)
 ## Props
 @prop timelines
 @prop aClass
@@ -54,5 +74,7 @@
 @prop divClass
 @prop titleClass
 @prop spanClass
+@prop class: className
+@prop classes
 @prop ...restProps
 -->

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

@@ -2,7 +2,7 @@ import type { GroupItemProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1780)
+ * [GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1782)
  * ## Props
  * @prop timelines
  * @prop aClass
@@ -10,6 +10,8 @@ import type { GroupItemProps } from "../types";
  * @prop divClass
  * @prop titleClass
  * @prop spanClass
+ * @prop class: className
+ * @prop classes
  * @prop ...restProps
  */
 declare const GroupItem: import("svelte").Component<GroupItemProps, {}, "">;

package/dist/timeline/Timeline.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { timeline } from ".";
+  import { timeline, type TimelineVariants } from ".";
   import clsx from "clsx";
-  import type { TimelineProps, TimelineVariants } from "../types";
+  import type { TimelineProps } from "../types";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, order = "default", class: className, ...restProps }: TimelineProps = $props();
@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1791)
+[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1802)
 ## Props
 @prop children
 @prop order = "default"

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

@@ -2,7 +2,7 @@ import type { TimelineProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1791)
+ * [TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1802)
  * ## Props
  * @prop children
  * @prop order = "default"

package/dist/timeline/TimelineItem.svelte

@@ -1,17 +1,35 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { timelineItem, type TimelineItemTheme } from ".";
-  import type { TimelineItemProps, TimelineVariants, DateFormat } from "../types";
+  import { timelineItem, type TimelineVariants } from ".";
+  import type { TimelineItemProps, DateFormat } from "../types";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
-  let { children, orientationSlot, title, date, dateFormat = "month-year", svgClass, liClass, divClass, timeClass, h3Class, ...restProps }: TimelineItemProps = $props();
+  let { children, orientationSlot, title, date, dateFormat = "month-year", svgClass, liClass, divClass, timeClass, h3Class, class: className, classes, ...restProps }: TimelineItemProps = $props();
+
+  warnThemeDeprecation(
+    "TimelineItem",
+    { svgClass, liClass, divClass, timeClass, h3Class },
+    {
+      liClass: "class",
+      svgClass: "svg",
+      divClass: "div",
+      timeClass: "time",
+      h3Class: "h3"
+    }
+  );
+  const styling = $derived({
+    svg: svgClass,
+    div: divClass,
+    time: timeClass,
+    h3: h3Class
+  });
 
   const theme = getTheme("timelineItem");
 
   let order = getContext<TimelineVariants["order"]>("order");
 
-  const { li, div, time, h3, svg } = $derived(timelineItem({ order }));
+  const { base, div, time, h3, svg } = $derived(timelineItem({ order }));
 
   function formatDisplayDate(dateStr: string, format: DateFormat) {
     const date = new Date(dateStr);
@@ -42,31 +60,31 @@
   }
 </script>
 
-<li {...restProps} class={li({ class: clsx((theme as TimelineItemTheme)?.li, liClass) })}>
+<li {...restProps} class={base({ class: clsx(theme?.base, className ?? liClass) })}>
   {#if order !== "default"}
     {#if orientationSlot && (order === "vertical" || order === "horizontal")}
       {@render orientationSlot()}
     {:else}
-      <div class={div({ class: clsx((theme as TimelineItemTheme)?.div, divClass) })}>
-        <svg aria-hidden="true" class={svg({ class: clsx((theme as TimelineItemTheme)?.svg, svgClass) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <div class={div({ class: clsx(theme?.div, styling.div) })}>
+        <svg aria-hidden="true" class={svg({ class: clsx(theme?.svg, styling.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
         </svg>
       </div>
     {/if}
   {:else if date}
-    <time datetime={date} class={time({ class: clsx((theme as TimelineItemTheme)?.time, timeClass) })}>
+    <time datetime={date} class={time({ class: clsx(theme?.time, styling.time) })}>
       {formatDisplayDate(date, dateFormat)}
     </time>
   {/if}
   {#if title}
-    <h3 class={h3({ class: clsx((theme as TimelineItemTheme)?.h3, h3Class) })}>
+    <h3 class={h3({ class: clsx(theme?.h3, styling.h3) })}>
       {title}
     </h3>
   {/if}
 
   {#if order !== "default"}
     {#if date}
-      <time datetime={date} class={time({ class: clsx((theme as TimelineItemTheme)?.time, timeClass) })}>
+      <time datetime={date} class={time({ class: clsx(theme?.time, timeClass) })}>
         {formatDisplayDate(date, dateFormat)}
       </time>
     {/if}
@@ -79,7 +97,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1796)
+[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1807)
 ## Props
 @prop children
 @prop orientationSlot
@@ -91,5 +109,7 @@
 @prop divClass
 @prop timeClass
 @prop h3Class
+@prop class: className
+@prop classes
 @prop ...restProps
 -->

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

@@ -2,7 +2,7 @@ import type { TimelineItemProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1796)
+ * [TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1807)
  * ## Props
  * @prop children
  * @prop orientationSlot
@@ -14,6 +14,8 @@ import type { TimelineItemProps } from "../types";
  * @prop divClass
  * @prop timeClass
  * @prop h3Class
+ * @prop class: className
+ * @prop classes
  * @prop ...restProps
  */
 declare const TimelineItem: import("svelte").Component<TimelineItemProps, {}, "">;

package/dist/timeline/index.d.ts

@@ -4,4 +4,4 @@ export { default as Group } from "./Group.svelte";
 export { default as GroupItem } from "./GroupItem.svelte";
 export { default as Timeline } from "./Timeline.svelte";
 export { default as TimelineItem } from "./TimelineItem.svelte";
-export { activity, activityItem, group, groupItem, timeline, timelineItem, type ActivityTheme, type ActivityItemTheme, type GroupTheme, type GroupItemTheme, type TimelineTheme, type TimelineItemTheme } from "./theme";
+export { activity, activityItem, group, groupItem, timeline, timelineItem, type TimelineVariants } from "./theme";