flowbite-svelte 1.9.0 → 1.10.0

package/dist/theme/index.js

@@ -1,119 +1,2 @@
-import { accordion, accordionitem, activity, activityitem, advancedrating, alert, anchor, android, avatar, badge, banner, blockquote, bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem, breadcrumb, button, buttonGroup, card, cardPlaceholder, checkbox, clipboard, 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, navbar_li, navbar_ul, navbar, navbar_brand, navbar_hamburger, 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,
-    clipboard,
-    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,
-    navbar_ul,
-    navbar_brand,
-    navbar_li,
-    navbar_hamburger,
-    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
-};
-// export type BaseThemes = typeof baseThemes;
+"use strict";
+// export {getTheme} from './themeUtils'

package/dist/theme/themeUtils.d.ts

@@ -0,0 +1,2 @@
+import { type ThemeConfig } from "..";
+export declare function getTheme<K extends keyof ThemeConfig>(componentKey: K): ThemeConfig[K];

package/dist/theme/themeUtils.js

@@ -0,0 +1,6 @@
+import { getContext } from "svelte";
+import {} from "..";
+export function getTheme(componentKey) {
+    const theme = getContext("theme");
+    return theme?.[componentKey];
+}

package/dist/timeline/Activity.svelte

@@ -2,12 +2,15 @@
   import clsx from "clsx";
   import { activity } from ".";
   import type { ActivityProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: ActivityProps = $props();
-  const base = activity({ class: clsx(className) });
+
+  const theme = getTheme("activity");
 </script>
 
-<ol {...restProps} class={base}>
+<ol {...restProps} class={cn(activity({ class: clsx(className) }), theme)}>
   {@render children()}
 </ol>
 
@@ -15,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1776)
+[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1767)
 ## 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#L1776)
+ * [ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1767)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/timeline/ActivityItem.svelte

@@ -1,26 +1,30 @@
 <script lang="ts">
-  import { activityitem } from "./index";
+  import { activityItem, type ActivityItemTheme } from "./index";
   import type { ActivityItemProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { activities, liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass, ...restProps }: ActivityItemProps = $props();
 
-  const { li, span, img, outerDiv, innerDiv, time, title, text } = $derived(activityitem());
+  const theme = getTheme("activityItem");
+
+  const { li, span, img, outerDiv, innerDiv, time, title, text } = $derived(activityItem());
 </script>
 
 {#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} />
+  <li {...restProps} class={cn(li({ class: liClass }), (theme as ActivityItemTheme)?.li)}>
+    <span class={cn(span({ class: spanClass }), (theme as ActivityItemTheme)?.span)}>
+      <img class={cn(img({ class: imgClass }), (theme as ActivityItemTheme)?.img)} {src} {alt} />
     </span>
-    <div class={outerDiv({ class: outerDivClass })}>
-      <div class={innerDiv({ class: innerDivClass })}>
-        <time class={time({ class: timeClass })}>{date}</time>
-        <div class={title({ class: titleClass })}>
+    <div class={cn(outerDiv({ class: outerDivClass }), (theme as ActivityItemTheme)?.outerDiv)}>
+      <div class={cn(innerDiv({ class: innerDivClass }), (theme as ActivityItemTheme)?.innerDiv)}>
+        <time class={cn(time({ class: timeClass }), (theme as ActivityItemTheme)?.time)}>{date}</time>
+        <div class={cn(title({ class: titleClass }), (theme as ActivityItemTheme)?.title)}>
           {@html name}
         </div>
       </div>
       {#if activity}
-        <div class={text({ class: textClass })}>
+        <div class={cn(text({ class: textClass }), (theme as ActivityItemTheme)?.text)}>
           {@html activity}
         </div>
       {/if}
@@ -32,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1780)
+[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1771)
 ## Props
 @prop activities
 @prop liClass

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#L1780)
+ * [ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1771)
  * ## Props
  * @prop activities
  * @prop liClass

package/dist/timeline/Group.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-  import { group } from ".";
+  import { group, type GroupTheme } from ".";
   import type { GroupProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
+
   let { children, divClass, timeClass, date, olClass, ...restProps }: GroupProps = $props();
+
+  const theme = getTheme("group");
+
   const { div, time, ol } = $derived(group());
 </script>
 
-<div class={div({ class: divClass })}>
-  <time class={time({ class: timeClass })}>{date}</time>
-  <ol {...restProps} class={ol({ class: olClass })}>
+<div class={cn(div({ class: divClass }), (theme as GroupTheme)?.div)}>
+  <time class={cn(time({ class: timeClass }), (theme as GroupTheme)?.time)}>{date}</time>
+  <ol {...restProps} class={cn(ol({ class: olClass }), (theme as GroupTheme)?.ol)}>
     {@render children()}
   </ol>
 </div>
@@ -16,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1792)
+[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1783)
 ## Props
 @prop children
 @prop divClass

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

@@ -2,7 +2,7 @@ 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#L1792)
+ * [GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1783)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/timeline/GroupItem.svelte

@@ -1,24 +1,29 @@
 <script lang="ts">
-  import { groupitem } from ".";
+  import { groupItem, type GroupItemTheme } from ".";
   import type { GroupItemProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
+
   let { timelines, aClass, imgClass, divClass, titleClass, spanClass, ...restProps }: GroupItemProps = $props();
 
-  const { a, img, div, title, span } = $derived(groupitem());
+  const theme = getTheme("groupItem");
+
+  const { a, img, div, title, span } = $derived(groupItem());
 </script>
 
 {#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 })}>
+    <a {href} class={cn(a({ class: aClass }), (theme as GroupItemTheme)?.a)}>
+      <img class={cn(img({ class: imgClass }), (theme as GroupItemTheme)?.img)} {src} {alt} />
+      <div class={cn(div({ class: divClass }), (theme as GroupItemTheme)?.div)}>
+        <div class={cn(title({ class: titleClass }), (theme as GroupItemTheme)?.title)}>
           {@html name}
         </div>
         {#if comment}
           <div class="text-sm font-normal">{comment}</div>
         {/if}
 
-        <span class={span({ class: spanClass })}>
+        <span class={cn(span({ class: spanClass }), (theme as GroupItemTheme)?.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">
               <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" />
@@ -41,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1800)
+[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1791)
 ## Props
 @prop timelines
 @prop aClass

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#L1800)
+ * [GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1791)
  * ## Props
  * @prop timelines
  * @prop aClass

package/dist/timeline/Timeline.svelte

@@ -3,14 +3,18 @@
   import { timeline } from ".";
   import clsx from "clsx";
   import type { TimelineProps, TimelineVariants } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, order = "default", class: className, ...restProps }: TimelineProps = $props();
 
+  const theme = getTheme("timeline");
+
   setContext<TimelineVariants["order"]>("order", order);
   const olCls = $derived(timeline({ order, class: clsx(className) }));
 </script>
 
-<ol {...restProps} class={olCls}>
+<ol {...restProps} class={cn(olCls, theme)}>
   {@render children()}
 </ol>
 
@@ -18,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1811)
+[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#L1811)
+ * [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,13 +1,17 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { timelineitem } from ".";
+  import { timelineItem, type TimelineItemTheme } from ".";
   import type { TimelineItemProps, TimelineVariants, DateFormat } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, orientationSlot, title, date, dateFormat = "month-year", svgClass, liClass, divClass, timeClass, h3Class, ...restProps }: TimelineItemProps = $props();
 
+  const theme = getTheme("timelineItem");
+
   let order = getContext<TimelineVariants["order"]>("order");
 
-  const { li, div, time, h3, svg } = $derived(timelineitem({ order }));
+  const { li, div, time, h3, svg } = $derived(timelineItem({ order }));
 
   function formatDisplayDate(dateStr: string, format: DateFormat) {
     const date = new Date(dateStr);
@@ -38,31 +42,31 @@
   }
 </script>
 
-<li {...restProps} class={li({ class: liClass })}>
+<li {...restProps} class={cn(li({ class: liClass }), (theme as TimelineItemTheme)?.li)}>
   {#if order !== "default"}
     {#if orientationSlot && (order === "vertical" || order === "horizontal")}
       {@render orientationSlot()}
     {:else}
-      <div class={div({ class: divClass })}>
-        <svg aria-hidden="true" class={svg({ class: svgClass })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <div class={cn(div({ class: divClass }), (theme as TimelineItemTheme)?.div)}>
+        <svg aria-hidden="true" class={cn(svg({ class: svgClass }), (theme as TimelineItemTheme)?.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: timeClass })}>
+    <time datetime={date} class={cn(time({ class: timeClass }), (theme as TimelineItemTheme)?.time)}>
       {formatDisplayDate(date, dateFormat)}
     </time>
   {/if}
   {#if title}
-    <h3 class={h3({ class: h3Class })}>
+    <h3 class={cn(h3({ class: h3Class }), (theme as TimelineItemTheme)?.h3)}>
       {title}
     </h3>
   {/if}
 
   {#if order !== "default"}
     {#if date}
-      <time datetime={date} class={time({ class: timeClass })}>
+      <time datetime={date} class={cn(time({ class: timeClass }), (theme as TimelineItemTheme)?.time)}>
         {formatDisplayDate(date, dateFormat)}
       </time>
     {/if}
@@ -75,7 +79,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1816)
+[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1807)
 ## Props
 @prop children
 @prop orientationSlot

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#L1816)
+ * [TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1807)
  * ## Props
  * @prop children
  * @prop orientationSlot

package/dist/timeline/index.d.ts

@@ -1,8 +1,7 @@
-import Activity from "./Activity.svelte";
-import ActivityItem from "./ActivityItem.svelte";
-import Group from "./Group.svelte";
-import GroupItem from "./GroupItem.svelte";
-import Timeline from "./Timeline.svelte";
-import TimelineItem from "./TimelineItem.svelte";
-import { activity, activityitem, group, groupitem, timeline, timelineitem } from "./theme";
-export { Activity, ActivityItem, Group, GroupItem, Timeline, TimelineItem, activity, activityitem, group, groupitem, timeline, timelineitem };
+export { default as Activity } from "./Activity.svelte";
+export { default as ActivityItem } from "./ActivityItem.svelte";
+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";

package/dist/timeline/index.js

@@ -1,8 +1,7 @@
-import Activity from "./Activity.svelte";
-import ActivityItem from "./ActivityItem.svelte";
-import Group from "./Group.svelte";
-import GroupItem from "./GroupItem.svelte";
-import Timeline from "./Timeline.svelte";
-import TimelineItem from "./TimelineItem.svelte";
-import { activity, activityitem, group, groupitem, timeline, timelineitem } from "./theme";
-export { Activity, ActivityItem, Group, GroupItem, Timeline, TimelineItem, activity, activityitem, group, groupitem, timeline, timelineitem };
+export { default as Activity } from "./Activity.svelte";
+export { default as ActivityItem } from "./ActivityItem.svelte";
+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 } from "./theme";

package/dist/timeline/theme.d.ts

@@ -1,29 +1,30 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const activity: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative border-s border-gray-200 dark:border-gray-700", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative border-s border-gray-200 dark:border-gray-700", unknown, unknown, undefined>>;
-export declare const activityitem: import("tailwind-variants").TVReturnType<{
+export type ActivityTheme = string;
+export declare const activityItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             title?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
             innerDiv?: import("tailwind-variants").ClassValue;
             outerDiv?: import("tailwind-variants").ClassValue;
-            img?: import("tailwind-variants").ClassValue;
             li?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
             text?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             title?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
             innerDiv?: import("tailwind-variants").ClassValue;
             outerDiv?: import("tailwind-variants").ClassValue;
-            img?: import("tailwind-variants").ClassValue;
             li?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
             text?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -39,13 +40,13 @@ export declare const activityitem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             title?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
             innerDiv?: import("tailwind-variants").ClassValue;
             outerDiv?: import("tailwind-variants").ClassValue;
-            img?: import("tailwind-variants").ClassValue;
             li?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
             text?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -67,20 +68,22 @@ export declare const activityitem: import("tailwind-variants").TVReturnType<{
     title: string;
     text: string;
 }, undefined, unknown, unknown, undefined>>;
+export type ActivityItemSlots = keyof typeof activityItem.slots;
+export type ActivityItemTheme = Partial<Record<ActivityItemSlots, string>>;
 export declare const group: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             div?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
             ol?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             div?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
             ol?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -91,8 +94,8 @@ export declare const group: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             div?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
             ol?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -104,24 +107,26 @@ export declare const group: import("tailwind-variants").TVReturnType<{
     time: string;
     ol: string;
 }, undefined, unknown, unknown, undefined>>;
-export declare const groupitem: import("tailwind-variants").TVReturnType<{
+export type GroupSlots = keyof typeof group.slots;
+export type GroupTheme = Partial<Record<GroupSlots, string>>;
+export declare const groupItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             title?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
             div?: import("tailwind-variants").ClassValue;
             img?: import("tailwind-variants").ClassValue;
             a?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             title?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
             div?: import("tailwind-variants").ClassValue;
             img?: import("tailwind-variants").ClassValue;
             a?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -134,10 +139,10 @@ export declare const groupitem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             title?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
             div?: import("tailwind-variants").ClassValue;
             img?: import("tailwind-variants").ClassValue;
             a?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -153,6 +158,8 @@ export declare const groupitem: import("tailwind-variants").TVReturnType<{
     title: string;
     span: string;
 }, undefined, unknown, unknown, undefined>>;
+export type GroupItemSlots = keyof typeof groupItem.slots;
+export type GroupItemTheme = Partial<Record<GroupItemSlots, string>>;
 export type TimelineVariants = VariantProps<typeof timeline>;
 export declare const timeline: import("tailwind-variants").TVReturnType<{
     order: {
@@ -179,7 +186,8 @@ export declare const timeline: import("tailwind-variants").TVReturnType<{
         default: string;
     };
 }, undefined, undefined, unknown, unknown, undefined>>;
-export declare const timelineitem: import("tailwind-variants").TVReturnType<{
+export type TimelineTheme = string;
+export declare const timelineItem: import("tailwind-variants").TVReturnType<{
     order: {
         default: {
             li: string;
@@ -297,3 +305,5 @@ export declare const timelineitem: import("tailwind-variants").TVReturnType<{
     h3: string;
     svg: string;
 }, undefined, unknown, unknown, undefined>>;
+export type TimelineItemSlots = keyof typeof timelineItem.slots;
+export type TimelineItemTheme = Partial<Record<TimelineItemSlots, string>>;