sv5ui 0.0.1

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>>;
+};

package/dist/Timeline/timeline.variants.js

@@ -0,0 +1,121 @@
+import { tv } from 'tailwind-variants';
+export const timelineVariants = tv({
+    slots: {
+        root: 'flex gap-1.5',
+        item: 'group relative flex flex-1 gap-3',
+        container: 'relative flex items-center gap-1.5',
+        indicator: 'inline-flex items-center justify-center shrink-0 rounded-full bg-surface-container-highest text-on-surface-variant',
+        separator: 'flex-1 rounded-full bg-surface-container-highest',
+        wrapper: 'w-full',
+        date: 'text-on-surface-variant text-xs',
+        title: 'font-medium text-on-surface text-sm',
+        description: 'text-on-surface-variant text-wrap text-sm'
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                root: 'flex-row w-full',
+                item: 'flex-col',
+                separator: 'h-0.5'
+            },
+            vertical: {
+                root: 'flex-col',
+                container: 'flex-col',
+                separator: 'w-0.5'
+            }
+        },
+        color: {
+            primary: {
+                indicator: 'group-data-[state=completed]:bg-primary group-data-[state=completed]:text-on-primary group-data-[state=active]:bg-primary group-data-[state=active]:text-on-primary'
+            },
+            secondary: {
+                indicator: 'group-data-[state=completed]:bg-secondary group-data-[state=completed]:text-on-secondary group-data-[state=active]:bg-secondary group-data-[state=active]:text-on-secondary'
+            },
+            tertiary: {
+                indicator: 'group-data-[state=completed]:bg-tertiary group-data-[state=completed]:text-on-tertiary group-data-[state=active]:bg-tertiary group-data-[state=active]:text-on-tertiary'
+            },
+            success: {
+                indicator: 'group-data-[state=completed]:bg-success group-data-[state=completed]:text-on-success group-data-[state=active]:bg-success group-data-[state=active]:text-on-success'
+            },
+            warning: {
+                indicator: 'group-data-[state=completed]:bg-warning group-data-[state=completed]:text-on-warning group-data-[state=active]:bg-warning group-data-[state=active]:text-on-warning'
+            },
+            error: {
+                indicator: 'group-data-[state=completed]:bg-error group-data-[state=completed]:text-on-error group-data-[state=active]:bg-error group-data-[state=active]:text-on-error'
+            },
+            info: {
+                indicator: 'group-data-[state=completed]:bg-info group-data-[state=completed]:text-on-info group-data-[state=active]:bg-info group-data-[state=active]:text-on-info'
+            },
+            surface: {
+                indicator: 'group-data-[state=completed]:bg-inverse-surface group-data-[state=completed]:text-inverse-on-surface group-data-[state=active]:bg-inverse-surface group-data-[state=active]:text-inverse-on-surface'
+            }
+        },
+        size: {
+            '3xs': { indicator: 'size-4 *:size-2.5' },
+            '2xs': { indicator: 'size-5 *:size-3' },
+            xs: { indicator: 'size-6 *:size-3.5' },
+            sm: { indicator: 'size-7 *:size-4' },
+            md: { indicator: 'size-8 *:size-5' },
+            lg: { indicator: 'size-9 *:size-5' },
+            xl: { indicator: 'size-10 *:size-6' },
+            '2xl': { indicator: 'size-11 *:size-6' },
+            '3xl': { indicator: 'size-12 *:size-7' }
+        },
+        reverse: {
+            true: ''
+        }
+    },
+    compoundVariants: [
+        // Orientation + reverse (visual direction)
+        { orientation: 'vertical', reverse: true, class: { root: 'flex-col-reverse' } },
+        { orientation: 'horizontal', reverse: true, class: { root: 'flex-row-reverse' } },
+        // Color + separator styling (reverse=false: completed gets color)
+        { color: 'primary', reverse: false, class: { separator: 'group-data-[state=completed]:bg-primary' } },
+        { color: 'secondary', reverse: false, class: { separator: 'group-data-[state=completed]:bg-secondary' } },
+        { color: 'tertiary', reverse: false, class: { separator: 'group-data-[state=completed]:bg-tertiary' } },
+        { color: 'success', reverse: false, class: { separator: 'group-data-[state=completed]:bg-success' } },
+        { color: 'warning', reverse: false, class: { separator: 'group-data-[state=completed]:bg-warning' } },
+        { color: 'error', reverse: false, class: { separator: 'group-data-[state=completed]:bg-error' } },
+        { color: 'info', reverse: false, class: { separator: 'group-data-[state=completed]:bg-info' } },
+        { color: 'surface', reverse: false, class: { separator: 'group-data-[state=completed]:bg-inverse-surface' } },
+        // Color + separator styling (reverse=true: active AND completed get color)
+        { color: 'primary', reverse: true, class: { separator: 'group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary' } },
+        { color: 'secondary', reverse: true, class: { separator: 'group-data-[state=active]:bg-secondary group-data-[state=completed]:bg-secondary' } },
+        { color: 'tertiary', reverse: true, class: { separator: 'group-data-[state=active]:bg-tertiary group-data-[state=completed]:bg-tertiary' } },
+        { color: 'success', reverse: true, class: { separator: 'group-data-[state=active]:bg-success group-data-[state=completed]:bg-success' } },
+        { color: 'warning', reverse: true, class: { separator: 'group-data-[state=active]:bg-warning group-data-[state=completed]:bg-warning' } },
+        { color: 'error', reverse: true, class: { separator: 'group-data-[state=active]:bg-error group-data-[state=completed]:bg-error' } },
+        { color: 'info', reverse: true, class: { separator: 'group-data-[state=active]:bg-info group-data-[state=completed]:bg-info' } },
+        { color: 'surface', reverse: true, class: { separator: 'group-data-[state=active]:bg-inverse-surface group-data-[state=completed]:bg-inverse-surface' } },
+        // Horizontal + size
+        { orientation: 'horizontal', size: '3xs', class: { wrapper: 'pe-4.5' } },
+        { orientation: 'horizontal', size: '2xs', class: { wrapper: 'pe-5' } },
+        { orientation: 'horizontal', size: 'xs', class: { wrapper: 'pe-5.5' } },
+        { orientation: 'horizontal', size: 'sm', class: { wrapper: 'pe-6' } },
+        { orientation: 'horizontal', size: 'md', class: { wrapper: 'pe-6.5' } },
+        { orientation: 'horizontal', size: 'lg', class: { wrapper: 'pe-7' } },
+        { orientation: 'horizontal', size: 'xl', class: { wrapper: 'pe-7.5' } },
+        { orientation: 'horizontal', size: '2xl', class: { wrapper: 'pe-8' } },
+        { orientation: 'horizontal', size: '3xl', class: { wrapper: 'pe-8.5' } },
+        // Vertical + size (mt aligns text with indicator center, pb adds spacing)
+        { orientation: 'vertical', size: '3xs', class: { wrapper: '-mt-0.5 pb-4.5' } },
+        { orientation: 'vertical', size: '2xs', class: { wrapper: 'pb-5' } },
+        { orientation: 'vertical', size: 'xs', class: { wrapper: 'mt-0.5 pb-5.5' } },
+        { orientation: 'vertical', size: 'sm', class: { wrapper: 'mt-1 pb-6' } },
+        { orientation: 'vertical', size: 'md', class: { wrapper: 'mt-1.5 pb-6.5' } },
+        { orientation: 'vertical', size: 'lg', class: { wrapper: 'mt-2 pb-7' } },
+        { orientation: 'vertical', size: 'xl', class: { wrapper: 'mt-2.5 pb-7.5' } },
+        { orientation: 'vertical', size: '2xl', class: { wrapper: 'mt-3 pb-8' } },
+        { orientation: 'vertical', size: '3xl', class: { wrapper: 'mt-3.5 pb-8.5' } }
+    ],
+    defaultVariants: {
+        orientation: 'vertical',
+        color: 'primary',
+        size: 'md',
+        reverse: false
+    }
+});
+export const timelineDefaults = {
+    defaultVariants: timelineVariants.defaultVariants,
+    slots: {}
+};

package/dist/User/User.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+    import type { UserProps } from './user.types.js'
+
+    export type Props = UserProps
+</script>
+
+<script lang="ts">
+    import { userVariants, userDefaults } from './user.variants.js'
+    import { getComponentConfig } from '../config.js'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import Chip from '../Chip/Chip.svelte'
+    import Link from '../Link/Link.svelte'
+
+    const config = getComponentConfig('user', userDefaults)
+
+    let {
+        as = 'div',
+        ui,
+        name,
+        description,
+        avatar,
+        chip,
+        size = config.defaultVariants.size,
+        orientation = config.defaultVariants.orientation,
+        href,
+        class: className,
+        avatarSlot,
+        nameSlot,
+        descriptionSlot,
+        ...restProps
+    }: Props = $props()
+
+    const isClickable = $derived(!!href || !!restProps.onclick)
+
+    const classes = $derived.by(() => {
+        const slots = userVariants({ size, orientation, clickable: isClickable })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+            name: slots.name({ class: [config.slots.name, ui?.name] }),
+            description: slots.description({ class: [config.slots.description, ui?.description] }),
+            avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] })
+        }
+    })
+
+    const mergedAvatarProps = $derived(
+        avatar ? { size: size as typeof avatar.size, ...avatar } : undefined
+    )
+
+    const chipProps = $derived.by(() => {
+        if (!chip || !avatar) return null
+        return chip === true ? {} : chip
+    })
+</script>
+
+{#snippet userContent()}
+    {#if avatarSlot}
+        {@render avatarSlot()}
+    {:else if mergedAvatarProps}
+        {#if chipProps}
+            <Chip {size} inset {...chipProps}>
+                <Avatar {...mergedAvatarProps} class={classes.avatar} />
+            </Chip>
+        {:else}
+            <Avatar {...mergedAvatarProps} class={classes.avatar} />
+        {/if}
+    {/if}
+
+    {#if name || description || nameSlot || descriptionSlot}
+        <div class={classes.wrapper}>
+            {#if nameSlot}
+                {@render nameSlot()}
+            {:else if name}
+                <div class={classes.name}>{name}</div>
+            {/if}
+
+            {#if descriptionSlot}
+                {@render descriptionSlot()}
+            {:else if description}
+                <div class={classes.description}>{description}</div>
+            {/if}
+        </div>
+    {/if}
+{/snippet}
+
+{#if href}
+    <Link {href} raw class={classes.root}>
+        {@render userContent()}
+    </Link>
+{:else}
+    <svelte:element this={as} class={classes.root} {...restProps}>
+        {@render userContent()}
+    </svelte:element>
+{/if}

package/dist/User/User.svelte.d.ts

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

package/dist/User/index.d.ts

@@ -0,0 +1,2 @@
+export { default as User } from './User.svelte';
+export type { UserProps } from './user.types.js';

package/dist/User/index.js

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