@pajohns/flowbite-svelte 0.1.0

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

@@ -0,0 +1,22 @@
+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#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
+ */
+declare const ActivityItem: import("svelte").Component<ActivityItemProps, {}, "">;
+type ActivityItem = ReturnType<typeof ActivityItem>;
+export default ActivityItem;

package/dist/timeline/Group.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { group } from "./theme";
+  import type { GroupProps } from "../types";
+  import clsx from "clsx";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, divClass, timeClass, date, olClass, class: className, classes, ...restProps }: GroupProps = $props();
+
+  warnThemeDeprecation(
+    "Group",
+    untrack(() => ({ divClass, timeClass, olClass })),
+    {
+      divClass: "class",
+      timeClass: "time",
+      olClass: "ol"
+    }
+  );
+
+  const styling = $derived({
+    time: timeClass,
+    ol: olClass
+  });
+
+  const theme = $derived(getTheme("group"));
+
+  const { div, time, ol } = $derived(group());
+</script>
+
+<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>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1924)
+## 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

@@ -0,0 +1,18 @@
+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#L1924)
+ * ## 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, {}, "">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/dist/timeline/GroupItem.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { groupItem } from "./theme";
+  import type { GroupItemProps } from "../types";
+  import clsx from "clsx";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { timelines, aClass, imgClass, divClass, titleClass, spanClass, class: className, classes, ...restProps }: GroupItemProps = $props();
+
+  warnThemeDeprecation(
+    "GroupItem",
+    untrack(() => ({ 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 = $derived(getTheme("groupItem"));
+
+  const { base, a, img, div, title, span, svg } = $derived(groupItem());
+</script>
+
+{#each timelines as { name, src, alt, isPrivate, href, comment, id }, index (id ?? href ?? name ?? index)}
+  <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?.span, styling.span) })}>
+          {#if isPrivate}
+            <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={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
+          {/if}
+        </span>
+      </div>
+    </a>
+  </li>
+{/each}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1932)
+## Props
+@prop timelines
+@prop aClass
+@prop imgClass
+@prop divClass
+@prop titleClass
+@prop spanClass
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

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

@@ -0,0 +1,19 @@
+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#L1932)
+ * ## Props
+ * @prop timelines
+ * @prop aClass
+ * @prop imgClass
+ * @prop divClass
+ * @prop titleClass
+ * @prop spanClass
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const GroupItem: import("svelte").Component<GroupItemProps, {}, "">;
+type GroupItem = ReturnType<typeof GroupItem>;
+export default GroupItem;

package/dist/timeline/Timeline.svelte

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

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

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

package/dist/timeline/TimelineItem.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { getContext, untrack } from "svelte";
+  import { timelineItem, type TimelineVariants } from "./theme";
+  import type { TimelineItemProps, DateFormat } from "../types";
+  import clsx from "clsx";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+
+  let {
+    children,
+    orientationSlot,
+    title,
+    date,
+    dateFormat = "month-year",
+    color = "primary",
+    isLast = false,
+    svgClass,
+    liClass,
+    defaultDivClass,
+    divClass,
+    timeClass,
+    h3Class,
+    connectorClass,
+    datePrefix,
+    class: className,
+    classes,
+    ...restProps
+  }: TimelineItemProps = $props();
+
+  warnThemeDeprecation(
+    "TimelineItem",
+    untrack(() => ({ svgClass, liClass, divClass, timeClass, h3Class, connectorClass })),
+    {
+      liClass: "class",
+      svgClass: "svg",
+      divClass: "div",
+      timeClass: "time",
+      h3Class: "h3",
+      connectorClass: "connector"
+    }
+  );
+
+  const styling = $derived({
+    svg: svgClass,
+    div: divClass,
+    time: timeClass,
+    h3: h3Class,
+    connector: connectorClass
+  });
+
+  const theme = $derived(getTheme("timelineItem"));
+  let order = getContext<TimelineVariants["order"]>("order");
+
+  const { base, div, defaultDiv, time, h3, svg, connector } = $derived(timelineItem({ order, color, isLast }));
+
+  const defaultDivCls = $derived(defaultDivClass ? defaultDivClass : defaultDiv());
+
+  function formatDisplayDate(dateStr: string, format: DateFormat) {
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return 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 {...restProps} class={base({ class: clsx(theme?.base, className ?? liClass) })}>
+  <!-- Individual connector line for vertical/activity layouts -->
+  {#if !isLast && (order === "vertical" || order === "activity")}
+    <div class={connector({ class: clsx(theme?.connector, styling.connector) })} aria-hidden="true"></div>
+  {/if}
+
+  {#if order !== "default"}
+    {#if orientationSlot && (order === "vertical" || order === "horizontal")}
+      {@render orientationSlot()}
+    {:else}
+      <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}
+    <div class={defaultDivCls} aria-hidden="true"></div>
+    <time datetime={date} class={time({ class: clsx(theme?.time, styling.time) })}>
+      {datePrefix}
+      {formatDisplayDate(date, dateFormat)}
+    </time>
+  {/if}
+
+  {#if title}
+    <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?.time, styling.time) })}>
+        {datePrefix}
+        {formatDisplayDate(date, dateFormat)}
+      </time>
+    {/if}
+  {/if}
+
+  {@render children()}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1960)
+## Props
+@prop children
+@prop orientationSlot
+@prop title
+@prop date
+@prop dateFormat = "month-year"
+@prop color = "primary"
+@prop isLast = false
+@prop svgClass
+@prop liClass
+@prop defaultDivClass
+@prop divClass
+@prop timeClass
+@prop h3Class
+@prop connectorClass
+@prop datePrefix
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

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

@@ -0,0 +1,28 @@
+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#L1960)
+ * ## Props
+ * @prop children
+ * @prop orientationSlot
+ * @prop title
+ * @prop date
+ * @prop dateFormat = "month-year"
+ * @prop color = "primary"
+ * @prop isLast = false
+ * @prop svgClass
+ * @prop liClass
+ * @prop defaultDivClass
+ * @prop divClass
+ * @prop timeClass
+ * @prop h3Class
+ * @prop connectorClass
+ * @prop datePrefix
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const TimelineItem: import("svelte").Component<TimelineItemProps, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;

package/dist/timeline/index.d.ts

@@ -0,0 +1,7 @@
+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 TimelineVariants } from "./theme";

package/dist/timeline/index.js

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