@pajohns/flowbite-svelte 0.1.0

package/dist/tabs/theme.d.ts

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

package/dist/tabs/theme.js

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

package/dist/theme/ThemeProvider.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { setThemeContext } from "../context";
+  import type { ThemeConfig } from "../types";
+
+  interface ThemeProviderProps {
+    children: Snippet;
+    theme?: ThemeConfig;
+  }
+
+  let { children, theme }: ThemeProviderProps = $props();
+
+  // Create a stable object with a reactive getter that will be tracked
+  // when accessed inside $derived expressions in child components
+  const themeContext: { value?: ThemeConfig } = {
+    get value() {
+      // This getter makes the theme reactive - when accessed in a $derived,
+      // it will track the theme prop and update when it changes
+      return theme;
+    }
+  };
+
+  // Set the context once with the stable object
+  setThemeContext(themeContext);
+</script>
+
+{@render children()}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+ThemeProviderProps
+## Props
+@prop children
+@prop theme
+-->

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { ThemeConfig } from "../types";
+interface ThemeProviderProps {
+    children: Snippet;
+    theme?: ThemeConfig;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * ThemeProviderProps
+ * ## Props
+ * @prop children
+ * @prop theme
+ */
+declare const ThemeProvider: import("svelte").Component<ThemeProviderProps, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;

package/dist/theme/index.d.ts

@@ -0,0 +1,8 @@
+import type { ClassValue } from "clsx";
+import * as themes from "./themes";
+export { default as ThemeProvider } from "./ThemeProvider.svelte";
+export type ThemeConfig = {
+    [K in keyof typeof themes]?: (typeof themes)[K]["slots"] extends undefined ? ClassValue : Partial<{
+        [L in keyof (typeof themes)[K]["slots"]]: ClassValue;
+    }>;
+};

package/dist/theme/index.js

@@ -0,0 +1,2 @@
+import * as themes from "./themes";
+export { default as ThemeProvider } from "./ThemeProvider.svelte";

package/dist/theme/themeUtils.d.ts

@@ -0,0 +1,24 @@
+import type { ThemeConfig } from "..";
+import type { ClassValue } from "clsx";
+export declare function getTheme<K extends keyof ThemeConfig>(componentKey: K): ThemeConfig[K] | undefined;
+type Slots<T extends {
+    slots: Record<string, unknown>;
+}> = Omit<T["slots"], "base">;
+export type Classes<T extends {
+    slots: Record<string, unknown>;
+}> = {
+    classes?: Partial<{
+        [K in keyof Slots<T>]: ClassValue;
+    }>;
+};
+/**
+ * Warns about deprecated theme-related props and suggests modern alternatives.
+ *
+ * Shows the component name, deprecated props, migration hints, and usage location (in dev mode).
+ *
+ * @param component - Name of the component using deprecated props.
+ * @param names - Record of deprecated prop names and their values.
+ * @param replacements - Optional map of deprecated keys to their replacements (e.g., "divClass" → "div").
+ */
+export declare function warnThemeDeprecation(component: string, names: Record<string, unknown>, replacements?: Record<string, unknown>): void;
+export {};

package/dist/theme/themeUtils.js

@@ -0,0 +1,74 @@
+import { getThemeContext } from "../context";
+import { DEV } from "esm-env";
+export function getTheme(componentKey) {
+    const themeState = getThemeContext();
+    const theme = themeState && "value" in themeState ? themeState.value : themeState;
+    const finalTheme = theme;
+    return finalTheme?.[componentKey];
+}
+/**
+ * Warns about deprecated theme-related props and suggests modern alternatives.
+ *
+ * Shows the component name, deprecated props, migration hints, and usage location (in dev mode).
+ *
+ * @param component - Name of the component using deprecated props.
+ * @param names - Record of deprecated prop names and their values.
+ * @param replacements - Optional map of deprecated keys to their replacements (e.g., "divClass" → "div").
+ */
+export function warnThemeDeprecation(component, names, replacements) {
+    if (!DEV)
+        return;
+    const nonEmptyNames = Object.keys(names).filter((name) => names[name]);
+    if (nonEmptyNames.length === 0)
+        return;
+    let migrationHint = "";
+    const usesClass = nonEmptyNames.some((name) => replacements?.[name] === "class");
+    const propText = usesClass ? `"classes" or "class"` : `"classes"`;
+    if (replacements) {
+        const classProps = [];
+        const classesObjectEntries = [];
+        for (const name of nonEmptyNames) {
+            const newKey = replacements[name];
+            const value = names[name];
+            if (!newKey || !value)
+                continue;
+            if (newKey === "class") {
+                classProps.push(`class="${value}"`);
+            }
+            else {
+                classesObjectEntries.push(`${newKey}: "${value}"`);
+            }
+        }
+        const hintLines = [];
+        if (classProps.length > 0)
+            hintLines.push(...classProps);
+        if (classesObjectEntries.length > 0) {
+            hintLines.push(`classes={{ ${classesObjectEntries.join(", ")} }}`);
+        }
+        if (hintLines.length > 0) {
+            migrationHint = `\nMigration example: ${hintLines.join(" ")}`;
+        }
+    }
+    // Stack trace parsing to find external caller
+    const stack = new Error().stack;
+    const externalCaller = getExternalCaller(stack);
+    console.warn(`⚠️ The following "${component}" props are deprecated: ${nonEmptyNames.map((n) => `"${n}"`).join(", ")}.\n` +
+        `💡 Please use the ${propText} prop instead.${migrationHint}\n` +
+        (externalCaller ? `🔍 Used at: ${externalCaller}` : ""));
+}
+// Extracts the first file in the stack trace that is NOT the current component file
+function getExternalCaller(stack) {
+    if (!stack)
+        return null;
+    const lines = stack.split("\n").slice(2); // skip "Error" and self-call
+    const currentFileMatch = lines[0]?.match(/(?:\()?(.*?\.svelte):\d+:\d+\)?$/);
+    const currentFile = currentFileMatch?.[1];
+    for (const line of lines) {
+        const match = line.match(/(?:\()?(.*?\.svelte):\d+:\d+\)?$/);
+        const file = match?.[1];
+        if (file && file !== currentFile) {
+            return line.trim().replace(/^at /, ""); // Clean format
+        }
+    }
+    return null;
+}

package/dist/theme/themes.d.ts

@@ -0,0 +1,78 @@
+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, drawerhandle } 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 { 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, toastContainer } from "../toast";
+export { toolbar, toolbarButton, toolbarGroup } from "../toolbar";
+export { tooltip } from "../tooltip";
+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 { textarea } from "../forms/textarea";
+export { timepicker } from "../forms/timepicker";
+export { toggle } from "../forms/toggle";
+export { anchor } from "../typography/a";
+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";
+export { buttonToggle, buttonToggleGroup } from "../forms/button-toggle";
+export { clipboardManager } from "../clipboard-manager/theme";
+export { commandPalette } from "../command-palette/theme";
+export { kanbanBoard, kanbanCard } from "../kanban/theme";
+export { scrollspy } from "../scroll-spy/theme";
+export { splitpane, pane, divider, dividerHitArea } from "../split-pane/theme";
+export { stepIndicator } from "../step-indicator";
+export { tags } from "../forms/tags";
+export { tour } from "../tour/theme";
+export { virtualList } from "../virtuallist";
+export { virtualMasonry } from "../virtual-masonry/theme";

package/dist/theme/themes.js

@@ -0,0 +1,84 @@
+// components
+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, drawerhandle } 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 { 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, toastContainer } from "../toast";
+export { toolbar, toolbarButton, toolbarGroup } from "../toolbar";
+export { tooltip } from "../tooltip";
+// export {utils} from "../utils";
+// export {} from "../video";
+// forms
+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 { textarea } from "../forms/textarea";
+export { timepicker } from "../forms/timepicker";
+export { toggle } from "../forms/toggle";
+// typography
+export { anchor } from "../typography/a";
+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";
+// extend
+export { buttonToggle, buttonToggleGroup } from "../forms/button-toggle";
+export { clipboardManager } from "../clipboard-manager/theme";
+export { commandPalette } from "../command-palette/theme";
+export { kanbanBoard, kanbanCard } from "../kanban/theme";
+export { scrollspy } from "../scroll-spy/theme";
+export { splitpane, pane, divider, dividerHitArea } from "../split-pane/theme";
+export { stepIndicator } from "../step-indicator";
+export { tags } from "../forms/tags";
+export { tour } from "../tour/theme";
+export { virtualList } from "../virtuallist";
+export { virtualMasonry } from "../virtual-masonry/theme";

package/dist/timeline/Activity.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { activity } from "./theme";
+  import type { ActivityProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, class: className, ...restProps }: ActivityProps = $props();
+
+  const theme = $derived(getTheme("activity"));
+</script>
+
+<ol {...restProps} class={activity({ class: clsx(theme, className) })}>
+  {@render children()}
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1908)
+## Props
+@prop children
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,13 @@
+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#L1908)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Activity: import("svelte").Component<ActivityProps, {}, "">;
+type Activity = ReturnType<typeof Activity>;
+export default Activity;

package/dist/timeline/ActivityItem.svelte

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