odj-svelte-ui 0.1.0

package/dist/timeline/theme.d.ts

@@ -0,0 +1,523 @@
+export declare const activity: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative border-s border-gray-200 dark:border-gray-700", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative border-s border-gray-200 dark:border-gray-700", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const activityitem: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    li: string;
+    span: string;
+    img: string;
+    outerDiv: string;
+    innerDiv: string;
+    time: string;
+    title: string;
+    text: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    li: string;
+    span: string;
+    img: string;
+    outerDiv: string;
+    innerDiv: string;
+    time: string;
+    title: string;
+    text: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    li: string;
+    span: string;
+    img: string;
+    outerDiv: string;
+    innerDiv: string;
+    time: string;
+    title: string;
+    text: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const group: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    time: string;
+    ol: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    time: string;
+    ol: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    time: string;
+    ol: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const groupitem: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            a?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            a?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    a: string;
+    img: string;
+    div: string;
+    title: string;
+    span: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            a?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            a?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    a: string;
+    img: string;
+    div: string;
+    title: string;
+    span: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    a: string;
+    img: string;
+    div: string;
+    title: string;
+    span: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            title?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            a?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const timeline: import("tailwind-variants").TVReturnType<{
+    order: {
+        group: string;
+        horizontal: string;
+        activity: string;
+        vertical: string;
+        default: string;
+    };
+}, undefined, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    order: {
+        group: string;
+        horizontal: string;
+        activity: string;
+        vertical: string;
+        default: string;
+    };
+}, {
+    order: {
+        group: string;
+        horizontal: string;
+        activity: string;
+        vertical: string;
+        default: string;
+    };
+}>, {
+    order: {
+        group: string;
+        horizontal: string;
+        activity: string;
+        vertical: string;
+        default: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    order: {
+        group: string;
+        horizontal: string;
+        activity: string;
+        vertical: string;
+        default: string;
+    };
+}, undefined, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    order: {
+        group: string;
+        horizontal: string;
+        activity: string;
+        vertical: string;
+        default: string;
+    };
+}, {
+    order: {
+        group: string;
+        horizontal: string;
+        activity: string;
+        vertical: string;
+        default: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const timelineitem: import("tailwind-variants").TVReturnType<{
+    order: {
+        default: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        vertical: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        horizontal: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        activity: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        group: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+    };
+}, {
+    li: string;
+    div: string;
+    time: string;
+    h3: string;
+    svg: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    order: {
+        default: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        vertical: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        horizontal: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        activity: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        group: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+    };
+}, {
+    order: {
+        default: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        vertical: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        horizontal: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        activity: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        group: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+    };
+}>, {
+    order: {
+        default: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        vertical: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        horizontal: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        activity: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        group: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+    };
+}, {
+    li: string;
+    div: string;
+    time: string;
+    h3: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    order: {
+        default: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        vertical: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        horizontal: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        activity: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        group: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+    };
+}, {
+    li: string;
+    div: string;
+    time: string;
+    h3: string;
+    svg: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    order: {
+        default: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        vertical: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        horizontal: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        activity: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        group: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+    };
+}, {
+    order: {
+        default: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        vertical: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        horizontal: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        activity: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        group: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/timeline/theme.js

@@ -0,0 +1,92 @@
+import { tv } from "tailwind-variants";
+export const activity = tv({
+    base: "relative border-s border-gray-200 dark:border-gray-700"
+});
+export const activityitem = tv({
+    slots: {
+        li: "mb-10 ms-6",
+        span: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900",
+        img: "rounded-full shadow-lg",
+        outerDiv: "p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600",
+        innerDiv: "justify-between items-center mb-3 sm:flex",
+        time: "mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0",
+        title: "text-sm font-normal text-gray-500 lex dark:text-gray-300",
+        text: "p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300"
+    }
+});
+export const group = tv({
+    slots: {
+        div: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700",
+        time: "text-lg font-semibold text-gray-900 dark:text-white",
+        ol: "mt-3 divide-y divider-gray-200 dark:divide-gray-700"
+    }
+});
+export const groupitem = tv({
+    slots: {
+        a: "block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700",
+        img: "me-3 mb-3 w-12 h-12 rounded-full sm:mb-0",
+        div: "text-gray-600 dark:text-gray-400",
+        title: "text-base font-normal",
+        span: "inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400"
+    }
+});
+export const timeline = tv({
+    variants: {
+        order: {
+            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"
+        }
+    },
+    defaultVariants: {
+        order: "default"
+    }
+});
+export const timelineitem = tv({
+    slots: {
+        li: "",
+        div: "",
+        time: "",
+        h3: "",
+        svg: "w-3 h-3 text-primary-600 dark:text-primary-400"
+    },
+    variants: {
+        order: {
+            default: {
+                li: "mb-10 ms-4",
+                div: "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",
+                time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+                h3: "text-lg font-semibold text-gray-900 dark:text-white"
+            },
+            vertical: {
+                li: "mb-10 ms-6",
+                div: "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",
+                time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+                h3: "flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white"
+            },
+            horizontal: {
+                li: "relative mb-6 sm:mb-0",
+                div: "flex items-center",
+                time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+                h3: "text-lg font-semibold text-gray-900 dark:text-white"
+            },
+            activity: {
+                li: "mb-10 ms-6",
+                div: "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",
+                time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+                h3: "text-lg font-semibold text-gray-900 dark:text-white"
+            },
+            group: {
+                li: "",
+                div: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700",
+                time: "text-lg font-semibold text-gray-900 dark:text-white",
+                h3: "text-lg font-semibold text-gray-900 dark:text-white"
+            }
+        }
+    },
+    defaultVariants: {
+        order: "default"
+    }
+});

package/dist/timeline/type.d.ts

@@ -0,0 +1,64 @@
+import type { HTMLOlAttributes, HTMLLiAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+interface ActivityType {
+    name: HTMLElement | string;
+    date: Date | string;
+    src: string;
+    alt: string;
+    activity?: HTMLElement | string;
+}
+interface GroupTimelineType {
+    name: string | HTMLElement;
+    src: string;
+    alt: string;
+    href?: string;
+    isPrivate?: boolean;
+    comment?: string | HTMLElement;
+}
+interface ActivityProps extends HTMLOlAttributes {
+    children: Snippet;
+}
+interface ActivityItemProps extends HTMLLiAttributes {
+    activities: ActivityType[];
+    liClass?: string;
+    spanClass?: string;
+    imgClass?: string;
+    outerDivClass?: string;
+    innerDivClass?: string;
+    timeClass?: string;
+    titleClass?: string;
+    textClass?: string;
+}
+interface GroupProps extends HTMLOlAttributes {
+    children: Snippet;
+    divClass?: string;
+    timeClass?: string;
+    date?: Date | string;
+    olClass?: string;
+}
+interface GroupItemProps extends HTMLLiAttributes {
+    timelines: GroupTimelineType[];
+    aClass?: string;
+    imgClass?: string;
+    divClass?: string;
+    titleClass?: string;
+    spanClass?: string;
+}
+type DateFormat = "year" | "month-year" | "full-date";
+interface TimelineProps extends HTMLOlAttributes {
+    children: Snippet;
+    order?: "default" | "vertical" | "horizontal" | "activity" | "group";
+}
+interface TimelineItemProps extends HTMLLiAttributes {
+    children: Snippet;
+    orientationSlot?: Snippet;
+    title: string;
+    date: string;
+    svgClass?: string;
+    liClass?: string;
+    divClass?: string;
+    timeClass?: string;
+    h3Class?: string;
+    dateFormat?: DateFormat;
+}
+export type { ActivityType, ActivityProps, ActivityItemProps, GroupTimelineType, GroupProps, GroupItemProps, TimelineProps, TimelineItemProps, DateFormat };

package/dist/timeline/type.js

@@ -0,0 +1 @@
+export {};