sv5ui 0.0.1

package/dist/Separator/separator.variants.js

@@ -0,0 +1,104 @@
+import { tv } from 'tailwind-variants';
+export const separatorVariants = tv({
+    slots: {
+        root: 'flex items-center text-center',
+        border: '',
+        container: 'font-medium flex',
+        icon: 'shrink-0',
+        avatar: 'shrink-0',
+        avatarSize: '2xs',
+        label: ''
+    },
+    variants: {
+        color: {
+            primary: {
+                border: 'border-primary',
+                label: 'text-primary',
+                icon: 'text-primary'
+            },
+            secondary: {
+                border: 'border-secondary',
+                label: 'text-secondary',
+                icon: 'text-secondary'
+            },
+            tertiary: {
+                border: 'border-tertiary',
+                label: 'text-tertiary',
+                icon: 'text-tertiary'
+            },
+            success: {
+                border: 'border-success',
+                label: 'text-success',
+                icon: 'text-success'
+            },
+            warning: {
+                border: 'border-warning',
+                label: 'text-warning',
+                icon: 'text-warning'
+            },
+            error: {
+                border: 'border-error',
+                label: 'text-error',
+                icon: 'text-error'
+            },
+            info: {
+                border: 'border-info',
+                label: 'text-info',
+                icon: 'text-info'
+            },
+            surface: {
+                border: 'border-outline-variant',
+                label: 'text-on-surface-variant',
+                icon: 'text-on-surface-variant'
+            }
+        },
+        size: {
+            xs: { label: 'text-xs', icon: 'size-3' },
+            sm: { label: 'text-xs', icon: 'size-3.5' },
+            md: { label: 'text-sm', icon: 'size-4' },
+            lg: { label: 'text-sm', icon: 'size-5' },
+            xl: { label: 'text-base', icon: 'size-6' }
+        },
+        type: {
+            solid: { border: 'border-solid' },
+            dashed: { border: 'border-dashed' },
+            dotted: { border: 'border-dotted' }
+        },
+        orientation: {
+            horizontal: {
+                root: 'w-full flex-row',
+                border: 'w-full flex-1',
+                container: 'mx-3 whitespace-nowrap'
+            },
+            vertical: {
+                root: 'h-full flex-col',
+                border: 'h-full flex-1',
+                container: 'my-2'
+            }
+        }
+    },
+    compoundVariants: [
+        // Horizontal border sizes
+        { orientation: 'horizontal', size: 'xs', class: { border: 'border-t' } },
+        { orientation: 'horizontal', size: 'sm', class: { border: 'border-t-2' } },
+        { orientation: 'horizontal', size: 'md', class: { border: 'border-t-[3px]' } },
+        { orientation: 'horizontal', size: 'lg', class: { border: 'border-t-4' } },
+        { orientation: 'horizontal', size: 'xl', class: { border: 'border-t-[5px]' } },
+        // Vertical border sizes
+        { orientation: 'vertical', size: 'xs', class: { border: 'border-s' } },
+        { orientation: 'vertical', size: 'sm', class: { border: 'border-s-2' } },
+        { orientation: 'vertical', size: 'md', class: { border: 'border-s-[3px]' } },
+        { orientation: 'vertical', size: 'lg', class: { border: 'border-s-4' } },
+        { orientation: 'vertical', size: 'xl', class: { border: 'border-s-[5px]' } }
+    ],
+    defaultVariants: {
+        color: 'surface',
+        size: 'xs',
+        type: 'solid',
+        orientation: 'horizontal'
+    }
+});
+export const separatorDefaults = {
+    defaultVariants: separatorVariants.defaultVariants,
+    slots: {}
+};

package/dist/Skeleton/Skeleton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+    import type { SkeletonProps } from './skeleton.types.js'
+
+    export type Props = SkeletonProps
+</script>
+
+<script lang="ts">
+    import { skeletonVariants, skeletonDefaults } from './skeleton.variants.js'
+    import { getComponentConfig } from '../config.js'
+
+    const config = getComponentConfig('skeleton', skeletonDefaults)
+
+    let {
+        as = 'div',
+        ui,
+        class: className,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const classes = $derived.by(() => {
+        const slots = skeletonVariants()
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] })
+        }
+    })
+</script>
+
+<svelte:element this={as} class={classes.root} {...restProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Skeleton/Skeleton.svelte.d.ts

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

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton.svelte';
+export type { SkeletonProps } from './skeleton.types.js';

package/dist/Skeleton/index.js

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

package/dist/Skeleton/skeleton.types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { SkeletonSlots } from './skeleton.variants.js';
+export type SkeletonProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Renders the skeleton as a different HTML element.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific skeleton slots (root).
+     */
+    ui?: Partial<Record<SkeletonSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+};

package/dist/Skeleton/skeleton.types.js

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

package/dist/Skeleton/skeleton.variants.d.ts

@@ -0,0 +1,18 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{}, {
+    root: string;
+}, undefined, {}, {
+    root: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;
+export type SkeletonSlots = keyof ReturnType<typeof skeletonVariants>;
+export declare const skeletonDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{}, {
+        root: string;
+    }, {}, {
+        root: string;
+    }>;
+    slots: Partial<Record<SkeletonSlots, string>>;
+};

package/dist/Skeleton/skeleton.variants.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+export const skeletonVariants = tv({
+    slots: {
+        root: 'animate-pulse rounded-md bg-surface-container-highest'
+    },
+    variants: {},
+    defaultVariants: {}
+});
+export const skeletonDefaults = {
+    defaultVariants: skeletonVariants.defaultVariants,
+    slots: {}
+};

package/dist/Timeline/Timeline.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" module>
+    import type { TimelineProps } from './timeline.types.js'
+
+    export type Props = TimelineProps
+</script>
+
+<script lang="ts">
+    import { timelineVariants, timelineDefaults } from './timeline.variants.js'
+    import type { TimelineItemState } from './timeline.types.js'
+    import { getComponentConfig } from '../config.js'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import Icon from '../Icon/Icon.svelte'
+
+    const config = getComponentConfig('timeline', timelineDefaults)
+
+    let {
+        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()
+
+    // Pre-compute shared slot classes outside the loop (these don't vary per item)
+    const classes = $derived.by(() => {
+        const slots = timelineVariants({ orientation, color, size, reverse })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            item: slots.item({ class: [config.slots.item, ui?.item] }),
+            container: slots.container({ class: [config.slots.container, ui?.container] }),
+            indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+            separator: slots.separator({ class: [config.slots.separator, ui?.separator] }),
+            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+            date: slots.date({ class: [config.slots.date, ui?.date] }),
+            title: slots.title({ class: [config.slots.title, ui?.title] }),
+            description: slots.description({ class: [config.slots.description, ui?.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} class={classes.root} {...restProps}>
+    {#each items as item, index (item.value ?? index)}
+        {@const state = getState(index)}
+        <div class={item.class ? `${classes.item} ${item.class}` : classes.item} data-state={state}>
+            <div class={classes.container}>
+                {#if indicator}
+                    {@render indicator({ item, index, state })}
+                {:else}
+                    <div class={classes.indicator}>
+                        {#if item.avatar}
+                            <Avatar {...item.avatar} size={size} />
+                        {:else if item.icon}
+                            <Icon name={item.icon} />
+                        {/if}
+                    </div>
+                {/if}
+
+                {#if reverse ? index > 0 : index < items.length - 1}
+                    <div class={classes.separator}></div>
+                {/if}
+            </div>
+
+            <div class={classes.wrapper}>
+                {#if dateSlot}
+                    {@render dateSlot({ item, index, state })}
+                {:else if item.date}
+                    <div class={classes.date}>{item.date}</div>
+                {/if}
+
+                {#if titleSlot}
+                    {@render titleSlot({ item, index, state })}
+                {:else if item.title}
+                    <div class={classes.title}>{item.title}</div>
+                {/if}
+
+                {#if descriptionSlot}
+                    {@render descriptionSlot({ item, index, state })}
+                {:else if item.description}
+                    <div class={classes.description}>{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, {}, "">;
+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 { TimelineProps, TimelineItem } 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,130 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TimelineVariantProps, TimelineSlots } from './timeline.variants.js';
+import type { AvatarProps } from '../Avatar/avatar.types.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;
+};
+export type TimelineProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * 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 {};