svelora 2.1.0

package/dist/Timeline/Timeline.svelte

@@ -0,0 +1,116 @@
+<script lang="ts" module>import type { TimelineProps } from './timeline.types.js';
+export type Props = TimelineProps;
+</script>
+
+<script lang="ts">import type { ClassNameValue } from 'tailwind-merge';
+import Avatar from '../Avatar/Avatar.svelte';
+import { getComponentConfig } from '../config.js';
+import Icon from '../Icon/Icon.svelte';
+import type { TimelineItemState } from './timeline.types.js';
+import { timelineDefaults, timelineVariants } from './timeline.variants.js';
+
+const config = getComponentConfig('timeline', timelineDefaults);
+let { ref = $bindable(null), as = 'div', items = [], size = config.defaultVariants.size, color = config.defaultVariants.color, orientation = config.defaultVariants.orientation, reverse = config.defaultVariants.reverse, value, class: className, ui, indicator, dateSlot, titleSlot, descriptionSlot, content, ...restProps }: Props = $props();
+type ItemUi = Partial<Record<string, ClassNameValue>>;
+const classes = $derived.by(() => {
+    const slots = timelineVariants({ orientation, color, size, reverse });
+    const c = config.slots;
+    // Pre-compute defaults — reused for all items without per-item ui
+    const _item = slots.item({ class: [c.item, ui?.item] });
+    const _container = slots.container({ class: [c.container, ui?.container] });
+    const _indicator = slots.indicator({ class: [c.indicator, ui?.indicator] });
+    const _separator = slots.separator({ class: [c.separator, ui?.separator] });
+    const _wrapper = slots.wrapper({ class: [c.wrapper, ui?.wrapper] });
+    const _date = slots.date({ class: [c.date, ui?.date] });
+    const _title = slots.title({ class: [c.title, ui?.title] });
+    const _description = slots.description({ class: [c.description, ui?.description] });
+    return {
+        root: slots.root({ class: [c.root, className, ui?.root] }),
+        item: (itemClass: ClassNameValue | undefined, itemUi: ItemUi | undefined) => itemClass || itemUi
+            ? slots.item({ class: [c.item, ui?.item, itemUi?.item, itemClass] })
+            : _item,
+        container: (itemUi: ItemUi | undefined) => itemUi
+            ? slots.container({ class: [c.container, ui?.container, itemUi.container] })
+            : _container,
+        indicator: (itemUi: ItemUi | undefined) => itemUi
+            ? slots.indicator({ class: [c.indicator, ui?.indicator, itemUi.indicator] })
+            : _indicator,
+        separator: (itemUi: ItemUi | undefined) => itemUi
+            ? slots.separator({ class: [c.separator, ui?.separator, itemUi.separator] })
+            : _separator,
+        wrapper: (itemUi: ItemUi | undefined) => itemUi
+            ? slots.wrapper({ class: [c.wrapper, ui?.wrapper, itemUi.wrapper] })
+            : _wrapper,
+        date: (itemUi: ItemUi | undefined) => itemUi?.date ? slots.date({ class: [c.date, ui?.date, itemUi.date] }) : _date,
+        title: (itemUi: ItemUi | undefined) => itemUi?.title ? slots.title({ class: [c.title, ui?.title, itemUi.title] }) : _title,
+        description: (itemUi: ItemUi | undefined) => itemUi?.description
+            ? slots.description({
+                class: [c.description, ui?.description, itemUi.description]
+            })
+            : _description
+    };
+});
+const activeIndex = $derived(value !== undefined ? items.findIndex((item) => item.value === value) : -1);
+function getState(index: number): TimelineItemState {
+    if (activeIndex === -1)
+        return 'pending';
+    if (index === activeIndex)
+        return 'active';
+    return index < activeIndex ? 'completed' : 'pending';
+}
+</script>
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
+    {#each items as item, index (item.value ?? index)}
+        {@const state = getState(index)}
+        <div class={classes.item(item.class, item.ui)} data-state={state}>
+            <div class={classes.container(item.ui)}>
+                {#if indicator}
+                    {@render indicator({ item, index, state })}
+                {:else}
+                    <div class={classes.indicator(item.ui)}>
+                        {#if item.avatar}
+                            <Avatar {...item.avatar} {size} />
+                        {:else if item.icon}
+                            <Icon name={item.icon} />
+                        {/if}
+                    </div>
+                {/if}
+
+                {#if reverse ? index > 0 : index < items.length - 1}
+                    <div class={classes.separator(item.ui)}></div>
+                {/if}
+            </div>
+
+            <div class={classes.wrapper(item.ui)}>
+                {#if dateSlot}
+                    {@render dateSlot({ item, index, state })}
+                {:else if item.date}
+                    <div class={classes.date(item.ui)}>{item.date}</div>
+                {/if}
+
+                {#if titleSlot}
+                    {@render titleSlot({ item, index, state })}
+                {:else if item.title}
+                    <div class={classes.title(item.ui)}>{item.title}</div>
+                {/if}
+
+                {#if descriptionSlot}
+                    {@render descriptionSlot({ item, index, state })}
+                {:else if item.description}
+                    <div class={classes.description(item.ui)}>{item.description}</div>
+                {/if}
+
+                {#if content}
+                    {@render content({ item, index, state })}
+                {/if}
+            </div>
+        </div>
+    {/each}
+</svelte:element>

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

@@ -0,0 +1,5 @@
+import type { TimelineProps } from './timeline.types.js';
+export type Props = TimelineProps;
+declare const Timeline: import("svelte").Component<TimelineProps, {}, "ref">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Timeline } from './Timeline.svelte';
+export type { TimelineItem, TimelineItemState, TimelineProps } from './timeline.types.js';

package/dist/Timeline/index.js

@@ -0,0 +1 @@
+export { default as Timeline } from './Timeline.svelte';

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

@@ -0,0 +1,138 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+import type { TimelineSlots, TimelineVariantProps } from './timeline.variants.js';
+/** State of a timeline item */
+export type TimelineItemState = 'completed' | 'active' | 'pending';
+/** Timeline item configuration */
+export type TimelineItem = {
+    /**
+     * Unique identifier for the item.
+     * Used for tracking active state.
+     */
+    value?: string | number;
+    /**
+     * Date or time label for the event.
+     */
+    date?: string;
+    /**
+     * Title/heading of the event.
+     */
+    title?: string;
+    /**
+     * Description or details of the event.
+     */
+    description?: string;
+    /**
+     * Icon to display in the indicator.
+     * Accepts any Iconify icon name.
+     */
+    icon?: string;
+    /**
+     * Avatar configuration to display in the indicator.
+     * Takes precedence over icon.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Additional CSS classes for this item.
+     */
+    class?: ClassNameValue;
+    /**
+     * Per-item slot class overrides.
+     */
+    ui?: Partial<Record<'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description', ClassNameValue>>;
+};
+export type TimelineProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The HTML element to render as.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific timeline slots.
+     */
+    ui?: Partial<Record<TimelineSlots, ClassNameValue>>;
+    /**
+     * Array of timeline items to display.
+     */
+    items?: TimelineItem[];
+    /**
+     * Sets the color scheme for active/completed states.
+     * @default 'primary'
+     */
+    color?: NonNullable<TimelineVariantProps['color']>;
+    /**
+     * Controls the size of indicators and spacing.
+     * @default 'md'
+     */
+    size?: NonNullable<TimelineVariantProps['size']>;
+    /**
+     * Controls the layout direction.
+     * @default 'vertical'
+     */
+    orientation?: NonNullable<TimelineVariantProps['orientation']>;
+    /**
+     * Reverses the completion direction.
+     * When true, items after active are completed.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * The currently active item value.
+     * Items before this are marked as completed.
+     */
+    value?: string | number;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom indicator content for all items.
+     * Takes precedence over icon and avatar.
+     */
+    indicator?: Snippet<[{
+        item: TimelineItem;
+        index: number;
+        state: TimelineItemState;
+    }]>;
+    /**
+     * Custom date content for all items.
+     * Takes precedence over item.date.
+     */
+    dateSlot?: Snippet<[{
+        item: TimelineItem;
+        index: number;
+        state: TimelineItemState;
+    }]>;
+    /**
+     * Custom title content for all items.
+     * Takes precedence over item.title.
+     */
+    titleSlot?: Snippet<[{
+        item: TimelineItem;
+        index: number;
+        state: TimelineItemState;
+    }]>;
+    /**
+     * Custom description content for all items.
+     * Takes precedence over item.description.
+     */
+    descriptionSlot?: Snippet<[{
+        item: TimelineItem;
+        index: number;
+        state: TimelineItemState;
+    }]>;
+    /**
+     * Custom content rendered after each item.
+     */
+    content?: Snippet<[{
+        item: TimelineItem;
+        index: number;
+        state: TimelineItemState;
+    }]>;
+};

package/dist/Timeline/timeline.types.js

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

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

@@ -0,0 +1,413 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const timelineVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            item: string;
+            separator: string;
+        };
+        vertical: {
+            root: string;
+            container: string;
+            separator: string;
+        };
+    };
+    color: {
+        primary: {
+            indicator: string;
+        };
+        secondary: {
+            indicator: string;
+        };
+        tertiary: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+        info: {
+            indicator: string;
+        };
+        surface: {
+            indicator: string;
+        };
+    };
+    size: {
+        '3xs': {
+            indicator: string;
+        };
+        '2xs': {
+            indicator: string;
+        };
+        xs: {
+            indicator: string;
+        };
+        sm: {
+            indicator: string;
+        };
+        md: {
+            indicator: string;
+        };
+        lg: {
+            indicator: string;
+        };
+        xl: {
+            indicator: string;
+        };
+        '2xl': {
+            indicator: string;
+        };
+        '3xl': {
+            indicator: string;
+        };
+    };
+    reverse: {
+        true: string;
+    };
+}, {
+    root: string;
+    item: string;
+    container: string;
+    indicator: string;
+    separator: string;
+    wrapper: string;
+    date: string;
+    title: string;
+    description: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+            item: string;
+            separator: string;
+        };
+        vertical: {
+            root: string;
+            container: string;
+            separator: string;
+        };
+    };
+    color: {
+        primary: {
+            indicator: string;
+        };
+        secondary: {
+            indicator: string;
+        };
+        tertiary: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+        info: {
+            indicator: string;
+        };
+        surface: {
+            indicator: string;
+        };
+    };
+    size: {
+        '3xs': {
+            indicator: string;
+        };
+        '2xs': {
+            indicator: string;
+        };
+        xs: {
+            indicator: string;
+        };
+        sm: {
+            indicator: string;
+        };
+        md: {
+            indicator: string;
+        };
+        lg: {
+            indicator: string;
+        };
+        xl: {
+            indicator: string;
+        };
+        '2xl': {
+            indicator: string;
+        };
+        '3xl': {
+            indicator: string;
+        };
+    };
+    reverse: {
+        true: string;
+    };
+}, {
+    root: string;
+    item: string;
+    container: string;
+    indicator: string;
+    separator: string;
+    wrapper: string;
+    date: string;
+    title: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            item: string;
+            separator: string;
+        };
+        vertical: {
+            root: string;
+            container: string;
+            separator: string;
+        };
+    };
+    color: {
+        primary: {
+            indicator: string;
+        };
+        secondary: {
+            indicator: string;
+        };
+        tertiary: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+        info: {
+            indicator: string;
+        };
+        surface: {
+            indicator: string;
+        };
+    };
+    size: {
+        '3xs': {
+            indicator: string;
+        };
+        '2xs': {
+            indicator: string;
+        };
+        xs: {
+            indicator: string;
+        };
+        sm: {
+            indicator: string;
+        };
+        md: {
+            indicator: string;
+        };
+        lg: {
+            indicator: string;
+        };
+        xl: {
+            indicator: string;
+        };
+        '2xl': {
+            indicator: string;
+        };
+        '3xl': {
+            indicator: string;
+        };
+    };
+    reverse: {
+        true: string;
+    };
+}, {
+    root: string;
+    item: string;
+    container: string;
+    indicator: string;
+    separator: string;
+    wrapper: string;
+    date: string;
+    title: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TimelineVariantProps = VariantProps<typeof timelineVariants>;
+export type TimelineSlots = keyof ReturnType<typeof timelineVariants>;
+export declare const timelineDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        orientation: {
+            horizontal: {
+                root: string;
+                item: string;
+                separator: string;
+            };
+            vertical: {
+                root: string;
+                container: string;
+                separator: string;
+            };
+        };
+        color: {
+            primary: {
+                indicator: string;
+            };
+            secondary: {
+                indicator: string;
+            };
+            tertiary: {
+                indicator: string;
+            };
+            success: {
+                indicator: string;
+            };
+            warning: {
+                indicator: string;
+            };
+            error: {
+                indicator: string;
+            };
+            info: {
+                indicator: string;
+            };
+            surface: {
+                indicator: string;
+            };
+        };
+        size: {
+            '3xs': {
+                indicator: string;
+            };
+            '2xs': {
+                indicator: string;
+            };
+            xs: {
+                indicator: string;
+            };
+            sm: {
+                indicator: string;
+            };
+            md: {
+                indicator: string;
+            };
+            lg: {
+                indicator: string;
+            };
+            xl: {
+                indicator: string;
+            };
+            '2xl': {
+                indicator: string;
+            };
+            '3xl': {
+                indicator: string;
+            };
+        };
+        reverse: {
+            true: string;
+        };
+    }, {
+        root: string;
+        item: string;
+        container: string;
+        indicator: string;
+        separator: string;
+        wrapper: string;
+        date: string;
+        title: string;
+        description: string;
+    }, {
+        orientation: {
+            horizontal: {
+                root: string;
+                item: string;
+                separator: string;
+            };
+            vertical: {
+                root: string;
+                container: string;
+                separator: string;
+            };
+        };
+        color: {
+            primary: {
+                indicator: string;
+            };
+            secondary: {
+                indicator: string;
+            };
+            tertiary: {
+                indicator: string;
+            };
+            success: {
+                indicator: string;
+            };
+            warning: {
+                indicator: string;
+            };
+            error: {
+                indicator: string;
+            };
+            info: {
+                indicator: string;
+            };
+            surface: {
+                indicator: string;
+            };
+        };
+        size: {
+            '3xs': {
+                indicator: string;
+            };
+            '2xs': {
+                indicator: string;
+            };
+            xs: {
+                indicator: string;
+            };
+            sm: {
+                indicator: string;
+            };
+            md: {
+                indicator: string;
+            };
+            lg: {
+                indicator: string;
+            };
+            xl: {
+                indicator: string;
+            };
+            '2xl': {
+                indicator: string;
+            };
+            '3xl': {
+                indicator: string;
+            };
+        };
+        reverse: {
+            true: string;
+        };
+    }, {
+        root: string;
+        item: string;
+        container: string;
+        indicator: string;
+        separator: string;
+        wrapper: string;
+        date: string;
+        title: string;
+        description: string;
+    }>;
+    slots: Partial<Record<TimelineSlots, string>>;
+};