odj-svelte-ui 0.1.0

package/dist/theme/Theme.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte";
+  import { tv } from "tailwind-variants";
+  import deepmerge from "deepmerge";
+  import {
+    accordion,
+    accordionitem,
+    alert,
+    avatar,
+    badge,
+    banner,
+    bottomNav,
+    bottomNavItem,
+    bottomnavheader,
+    bottomnavheaderitem,
+    breadcrumb,
+    buttonGroup,
+    button,
+    gradientButton,
+    card,
+    darkmode,
+    android,
+    defaultMockup,
+    desktop,
+    ios,
+    laptop,
+    smartwatch,
+    tablet,
+    drawer,
+    drawerhead,
+    dropdown,
+    dropdowndivider,
+    dropdownli,
+    dropdownul,
+    dropdownHeader,
+    dropdownFooter,
+    footer,
+    footerBrand,
+    footerCopyright,
+    footerIcon,
+    footerUl,
+    footerLi,
+    gallery,
+    indicator,
+    kbd,
+    listGroup,
+    listGroupItem,
+    megamenu,
+    modal,
+    navbar,
+    navUl,
+    navbrand,
+    navLi,
+    navhamburger,
+    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
+  } from "..";
+
+  interface Props {
+    children: Snippet;
+    theme?: Record<string, any>;
+  }
+
+  let { children, theme }: Props = $props();
+
+  // Function to merge theme configurations
+  function mergeThemes(baseThemes: Record<string, any>, customTheme?: Record<string, any>) {
+    const mergedTheme: Record<string, any> = {};
+
+    // Merge each component's theme
+    for (const [componentName, baseTheme] of Object.entries(baseThemes)) {
+      const customComponentTheme = customTheme?.[componentName] || {};
+
+      // Deep merge base theme with custom theme
+      mergedTheme[componentName] = tv(
+        deepmerge(
+          {
+            slots: baseTheme.slots,
+            variants: baseTheme.variants,
+            compoundVariants: baseTheme.compoundVariants,
+            defaultVariants: baseTheme.defaultVariants
+          },
+          {
+            slots: customComponentTheme.slots || {},
+            variants: customComponentTheme.variants || {},
+            compoundVariants: customComponentTheme.compoundVariants || [],
+            defaultVariants: customComponentTheme.defaultVariants || {}
+          }
+        )
+      );
+    }
+
+    return mergedTheme;
+  }
+
+  const baseThemes = {
+    accordion,
+    accordionitem,
+    alert,
+    avatar,
+    badge,
+    banner,
+    bottomNav,
+    bottomNavItem,
+    bottomnavheader,
+    bottomnavheaderitem,
+    breadcrumb,
+    buttonGroup,
+    button,
+    gradientButton,
+    card,
+    darkmode,
+    android,
+    defaultMockup,
+    desktop,
+    ios,
+    laptop,
+    smartwatch,
+    tablet,
+    drawer,
+    drawerhead,
+    dropdown,
+    dropdowndivider,
+    dropdownli,
+    dropdownul,
+    dropdownHeader,
+    dropdownFooter,
+    footer,
+    footerBrand,
+    footerCopyright,
+    footerIcon,
+    footerUl,
+    footerLi,
+    gallery,
+    indicator,
+    kbd,
+    listGroup,
+    listGroupItem,
+    megamenu,
+    modal,
+    navbar,
+    navUl,
+    navbrand,
+    navLi,
+    navhamburger,
+    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
+  };
+
+  const mergedThemes = mergeThemes(baseThemes, theme);
+
+  setContext("themeConfig", mergedThemes);
+</script>
+
+{@render children()}

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

@@ -0,0 +1,7 @@
+import { type Snippet } from "svelte";
+declare const Theme: import("svelte").Component<{
+    children: Snippet;
+    theme?: Record<string, any>;
+}, {}, "">;
+type Theme = ReturnType<typeof Theme>;
+export default Theme;

package/dist/timeline/Activity.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { type ActivityProps as Props, activity } from "./index";
+
+  let { children, class: className, ...restProps }: Props = $props();
+  const base = activity({ class: className });
+</script>
+
+<ol {...restProps} class={base}>
+  {@render children()}
+</ol>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:class: string;
+-->

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

@@ -0,0 +1,10 @@
+import { type ActivityProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:class: string;
+ */
+declare const Activity: import("svelte").Component<Props, {}, "">;
+type Activity = ReturnType<typeof Activity>;
+export default Activity;

package/dist/timeline/ActivityItem.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { type ActivityItemProps as Props, activityitem } from "./index";
+
+  let { activities, liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass, ...restProps }: Props = $props();
+
+  const { li, span, img, outerDiv, innerDiv, time, title, text } = $derived(activityitem());
+</script>
+
+{#each activities as { name, date, src, alt, activity }}
+  <li {...restProps} class={li({ class: liClass })}>
+    <span class={span({ class: spanClass })}>
+      <img class={img({ class: imgClass })} {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 })}>
+          {@html name}
+        </div>
+      </div>
+      {#if activity}
+        <div class={text({ class: textClass })}>
+          {@html activity}
+        </div>
+      {/if}
+    </div>
+  </li>
+{/each}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: activities: any;
+@props:liClass: any;
+@props:spanClass: any;
+@props:imgClass: any;
+@props:outerDivClass: any;
+@props:innerDivClass: any;
+@props:timeClass: any;
+@props:titleClass: any;
+@props:textClass: any;
+-->

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

@@ -0,0 +1,17 @@
+import { type ActivityItemProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: activities: any;
+ * @props:liClass: any;
+ * @props:spanClass: any;
+ * @props:imgClass: any;
+ * @props:outerDivClass: any;
+ * @props:innerDivClass: any;
+ * @props:timeClass: any;
+ * @props:titleClass: any;
+ * @props:textClass: any;
+ */
+declare const ActivityItem: import("svelte").Component<Props, {}, "">;
+type ActivityItem = ReturnType<typeof ActivityItem>;
+export default ActivityItem;

package/dist/timeline/Group.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { type GroupProps as Props, group } from ".";
+
+  let { children, divClass, timeClass, date, olClass, ...restProps }: Props = $props();
+  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 })}>
+    {@render children()}
+  </ol>
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:divClass: any;
+@props:timeClass: any;
+@props:date: any;
+@props:olClass: any;
+-->

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

@@ -0,0 +1,13 @@
+import { type GroupProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:timeClass: any;
+ * @props:date: any;
+ * @props:olClass: any;
+ */
+declare const Group: import("svelte").Component<Props, {}, "">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/dist/timeline/GroupItem.svelte

@@ -0,0 +1,50 @@
+<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 { 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}
+
+        <span class={span({ class: spanClass })}>
+          {#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" />
+              <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">
+              <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://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@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

@@ -0,0 +1,14 @@
+import { type GroupItemProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: timelines: any;
+ * @props:aClass: any;
+ * @props:imgClass: any;
+ * @props:divClass: any;
+ * @props:titleClass: any;
+ * @props:spanClass: any;
+ */
+declare const GroupItem: import("svelte").Component<Props, {}, "">;
+type GroupItem = ReturnType<typeof GroupItem>;
+export default GroupItem;

package/dist/timeline/Timeline.svelte

@@ -0,0 +1,22 @@
+<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={olCls}>
+  {@render children()}
+</ol>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:order: any = "default";
+@props:class: string;
+-->

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

@@ -0,0 +1,11 @@
+import { type TimelineProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:order: any = "default";
+ * @props:class: string;
+ */
+declare const Timeline: import("svelte").Component<Props, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/timeline/TimelineItem.svelte

@@ -0,0 +1,86 @@
+<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 {...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>
+    {/if}
+  {:else if date}
+    <time datetime={date} class={time({ class: timeClass })}>
+      {formatDisplayDate(date, dateFormat)}
+    </time>
+  {/if}
+
+  {#if title}
+    <h3 class={h3({ class: h3Class })}>
+      {title}
+    </h3>
+  {/if}
+
+  {#if order !== "default"}
+    {#if date}
+      <time datetime={date} class={time({ class: timeClass })}>
+        {formatDisplayDate(date, dateFormat)}
+      </time>
+    {/if}
+  {/if}
+
+  {@render children()}
+</li>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@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

@@ -0,0 +1,18 @@
+import { type TimelineItemProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @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;
+ */
+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 };