flowbite-svelte 0.47.2 → 1.0.0-next.1

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}>
+
+        <span class={span({ class: spanClass })}>
           {#if isPrivate}
-            <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <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 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <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>
-        {/if}
       </div>
     </a>
   </li>
@@ -52,18 +39,12 @@ let spanCls = twMerge(spanClass, classSpan);
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.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,44 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
-import type { GroupTimelineType } from '../types';
-declare const __propDef: {
-    props: {
-        timelines: GroupTimelineType[];
-        aClass?: string;
-        imgClass?: string;
-        divClass?: string;
-        titleClass?: string;
-        spanClass?: string;
-        isPrivacy?: boolean;
-        classA?: string;
-        classImg?: string;
-        classDiv?: string;
-        classTitle?: string;
-        classSpan?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type GroupItemProps = typeof __propDef.props;
-export type GroupItemEvents = typeof __propDef.events;
-export type GroupItemSlots = typeof __propDef.slots;
+import { type GroupItemProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.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 {};
+declare const GroupItem: import("svelte").Component<Props, {}, "">;
+type GroupItem = ReturnType<typeof GroupItem>;
+export default GroupItem;

package/dist/timeline/Timeline.svelte

@@ -1,23 +1,22 @@
-<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 ".";
+
+  let { children, order = "default", class: className, ...restProps }: Props = $props();
+
+  setContext("order", order);
+  const olCls = $derived(timeline({ order, 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/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let order: NonNullable<$$Props['order']> = 'default';
+@props: children: any;
+@props:order: any = "default";
+@props:class: string;
 -->

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

@@ -1,24 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLOlAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLOlAttributes & {
-        order?: "default" | "vertical" | "horizontal" | "activity" | "group";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TimelineProps = typeof __propDef.props;
-export type TimelineEvents = typeof __propDef.events;
-export type TimelineSlots = typeof __propDef.slots;
+import { type TimelineProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let order: NonNullable<$$Props['order']> = 'default';
+ * @props: children: any;
+ * @props:order: any = "default";
+ * @props:class: string;
  */
-export default class Timeline extends SvelteComponentTyped<TimelineProps, TimelineEvents, TimelineSlots> {
-}
-export {};
+declare const Timeline: import("svelte").Component<Props, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/timeline/TimelineItem.svelte

@@ -1,77 +1,86 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let title = "";
-export let date = "";
-export let svgClass = "w-3 h-3 text-primary-600 dark:text-primary-400";
-export let classDiv = "";
-export let classLi = "";
-export let classTime = "";
-export let classH3 = "";
-let order = "default";
-order = getContext("order");
-const liClasses = {
-  default: "mb-10 ms-4",
-  vertical: "mb-10 ms-6",
-  horizontal: "relative mb-6 sm:mb-0",
-  activity: "mb-10 ms-6",
-  group: ""
-};
-const divClasses = {
-  default: "absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",
-  vertical: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
-  horizontal: "flex items-center",
-  activity: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
-  group: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700"
-};
-const timeClasses = {
-  default: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
-  vertical: "block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
-  horizontal: "block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
-  activity: "mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0",
-  group: "text-lg font-semibold text-gray-900 dark:text-white"
-};
-let liCls = twMerge(liClasses[order], classLi);
-let divCls = twMerge(divClasses[order], classDiv);
-let timeCls = twMerge(timeClasses[order], classTime);
-const h3Cls = twMerge(order === "vertical" ? "flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white" : "text-lg font-semibold text-gray-900 dark:text-white", classH3);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { type TimelineItemProps as Props, timelineitem, type DateFormat } from ".";
+
+  let { children, orientationSlot, title, date, dateFormat = "month-year", svgClass, liClass, divClass, timeClass, h3Class, ...restProps }: Props = $props();
+
+  let order: "default" | "vertical" | "horizontal" | "activity" | "group" = getContext("order");
+
+  const { li, div, time, h3, svg } = $derived(timelineitem({ order }));
+
+  function formatDisplayDate(dateStr: string, format: DateFormat) {
+    const date = new Date(dateStr);
+
+    switch (format) {
+      case "year":
+        return date.toLocaleDateString(undefined, {
+          year: "numeric"
+        });
+      case "month-year":
+        return date.toLocaleDateString(undefined, {
+          month: "long",
+          year: "numeric"
+        });
+      case "full-date":
+        return date.toLocaleDateString(undefined, {
+          day: "numeric",
+          month: "long",
+          year: "numeric"
+        });
+      default:
+        return date.toLocaleDateString(undefined, {
+          month: "long",
+          year: "numeric"
+        });
+    }
+  }
 </script>
 
-<li class={liCls}>
-  <div class={divCls}></div>
-  {#if order !== 'default'}
-    <slot name="icon">
-      <svg aria-hidden="true" class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<li {...restProps} class={li({ class: liClass })}>
+  <div class={div({ class: divClass })}></div>
+  {#if order !== "default"}
+    {#if orientationSlot && (order === "vertical" || order === "horizontal")}
+      {@render orientationSlot()}
+    {:else}
+      <svg aria-hidden="true" class={svg({ class: svgClass })} 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>
-    </slot>
+    {/if}
   {:else if date}
-    <time class={timeCls}>{date}</time>
+    <time datetime={date} class={time({ class: timeClass })}>
+      {formatDisplayDate(date, dateFormat)}
+    </time>
   {/if}
 
   {#if title}
-    <h3 class={h3Cls}>
+    <h3 class={h3({ class: h3Class })}>
       {title}
     </h3>
   {/if}
 
-  {#if order !== 'default'}
+  {#if order !== "default"}
     {#if date}
-      <time class={timeCls}>{date}</time>
+      <time datetime={date} class={time({ class: timeClass })}>
+        {formatDisplayDate(date, dateFormat)}
+      </time>
     {/if}
   {/if}
 
-  <slot></slot>
+  {@render children()}
 </li>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let title: $$Props['title'] = '';
-@prop export let date: $$Props['date'] = '';
-@prop export let svgClass: $$Props['svgClass'] = 'w-3 h-3 text-primary-600 dark:text-primary-400';
-@prop export let classDiv: $$Props['classDiv'] = '';
-@prop export let classLi: $$Props['classLi'] = '';
-@prop export let classTime: $$Props['classTime'] = '';
-@prop export let classH3: $$Props['classH3'] = '';
+@props: children: any;
+@props:orientationSlot: any;
+@props:title: any;
+@props:date: any;
+@props:dateFormat: any = "month-year";
+@props:svgClass: any;
+@props:liClass: any;
+@props:divClass: any;
+@props:timeClass: any;
+@props:h3Class: any;
 -->

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

@@ -1,36 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        title?: string;
-        date?: string;
-        svgClass?: string;
-        classLi?: string;
-        classDiv?: string;
-        classTime?: string;
-        classH3?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        default: {};
-    };
-};
-export type TimelineItemProps = typeof __propDef.props;
-export type TimelineItemEvents = typeof __propDef.events;
-export type TimelineItemSlots = typeof __propDef.slots;
+import { type TimelineItemProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let title: $$Props['title'] = '';
- * @prop export let date: $$Props['date'] = '';
- * @prop export let svgClass: $$Props['svgClass'] = 'w-3 h-3 text-primary-600 dark:text-primary-400';
- * @prop export let classDiv: $$Props['classDiv'] = '';
- * @prop export let classLi: $$Props['classLi'] = '';
- * @prop export let classTime: $$Props['classTime'] = '';
- * @prop export let classH3: $$Props['classH3'] = '';
+ * @props: children: any;
+ * @props:orientationSlot: any;
+ * @props:title: any;
+ * @props:date: any;
+ * @props:dateFormat: any = "month-year";
+ * @props:svgClass: any;
+ * @props:liClass: any;
+ * @props:divClass: any;
+ * @props:timeClass: any;
+ * @props:h3Class: any;
  */
-export default class TimelineItem extends SvelteComponentTyped<TimelineItemProps, TimelineItemEvents, TimelineItemSlots> {
-}
-export {};
+declare const TimelineItem: import("svelte").Component<Props, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;

package/dist/timeline/index.d.ts

@@ -0,0 +1,9 @@
+import type { ActivityType, ActivityProps, ActivityItemProps, GroupTimelineType, GroupProps, GroupItemProps, TimelineProps, TimelineItemProps, DateFormat } from "./type";
+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, type ActivityType, type ActivityProps, type ActivityItemProps, type GroupTimelineType, type GroupProps, type GroupItemProps, type TimelineProps, type TimelineItemProps, type DateFormat };

package/dist/timeline/index.js

@@ -0,0 +1,8 @@
+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 };