sv5ui 1.6.0 → 1.8.0

package/dist/Slideover/slideover.variants.d.ts

@@ -1,8 +1,17 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const slideoverVariants: import("tailwind-variants").TVReturnType<{
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+        };
+        scale: {
             overlay: string;
+            content: string;
         };
     };
     side: {
@@ -19,6 +28,13 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
             content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
     inset: {
         true: {};
         false: {
@@ -43,9 +59,18 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     close: string;
 }, undefined, {
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
             overlay: string;
         };
+        scale: {
+            overlay: string;
+            content: string;
+        };
     };
     side: {
         top: {
@@ -61,6 +86,13 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
             content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
     inset: {
         true: {};
         false: {
@@ -85,9 +117,18 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
             overlay: string;
         };
+        scale: {
+            overlay: string;
+            content: string;
+        };
     };
     side: {
         top: {
@@ -103,6 +144,13 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
             content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
     inset: {
         true: {};
         false: {
@@ -131,8 +179,17 @@ export type SlideoverSlots = keyof ReturnType<typeof slideoverVariants>;
 export declare const slideoverDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
         transition: {
-            true: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
+                overlay: string;
+            };
+            scale: {
                 overlay: string;
+                content: string;
             };
         };
         side: {
@@ -149,6 +206,13 @@ export declare const slideoverDefaults: {
                 content: string;
             };
         };
+        size: {
+            sm: {};
+            md: {};
+            lg: {};
+            xl: {};
+            full: {};
+        };
         inset: {
             true: {};
             false: {
@@ -173,9 +237,18 @@ export declare const slideoverDefaults: {
         close: string;
     }, {
         transition: {
-            true: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
                 overlay: string;
             };
+            scale: {
+                overlay: string;
+                content: string;
+            };
         };
         side: {
             top: {
@@ -191,6 +264,13 @@ export declare const slideoverDefaults: {
                 content: string;
             };
         };
+        size: {
+            sm: {};
+            md: {};
+            lg: {};
+            xl: {};
+            full: {};
+        };
         inset: {
             true: {};
             false: {

package/dist/Slideover/slideover.variants.js

@@ -14,24 +14,40 @@ export const slideoverVariants = tv({
     },
     variants: {
         transition: {
-            true: {
+            none: {},
+            fade: {
+                overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]',
+                content: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]'
+            },
+            slide: {
                 overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]'
+            },
+            scale: {
+                overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]',
+                content: 'data-[state=open]:animate-[scale-in_200ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[scale-out_150ms_cubic-bezier(0.32,0.72,0,1)]'
             }
         },
         side: {
             top: {
-                content: 'fixed top-0 inset-x-0 max-h-[90dvh]'
+                content: 'fixed top-0 inset-x-0'
             },
             right: {
-                content: 'fixed right-0 inset-y-0 w-full max-w-md'
+                content: 'fixed right-0 inset-y-0 w-full'
             },
             bottom: {
-                content: 'fixed bottom-0 inset-x-0 max-h-[90dvh]'
+                content: 'fixed bottom-0 inset-x-0'
             },
             left: {
-                content: 'fixed left-0 inset-y-0 w-full max-w-md'
+                content: 'fixed left-0 inset-y-0 w-full'
             }
         },
+        size: {
+            sm: {},
+            md: {},
+            lg: {},
+            xl: {},
+            full: {}
+        },
         inset: {
             true: {},
             false: {
@@ -45,39 +61,52 @@ export const slideoverVariants = tv({
         }
     },
     compoundVariants: [
+        // Side-specific slide animations
         {
-            transition: true,
+            transition: 'slide',
             side: 'top',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-top_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-top_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
         {
-            transition: true,
+            transition: 'slide',
             side: 'right',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-right_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-right_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
         {
-            transition: true,
+            transition: 'slide',
             side: 'bottom',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-bottom_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-bottom_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
         {
-            transition: true,
+            transition: 'slide',
             side: 'left',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-left_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-left_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
+        // Sizes — left/right control width, top/bottom control height
+        { side: ['left', 'right'], size: 'sm', class: { content: 'max-w-sm' } },
+        { side: ['left', 'right'], size: 'md', class: { content: 'max-w-md' } },
+        { side: ['left', 'right'], size: 'lg', class: { content: 'max-w-lg' } },
+        { side: ['left', 'right'], size: 'xl', class: { content: 'max-w-xl' } },
+        { side: ['left', 'right'], size: 'full', class: { content: 'max-w-full' } },
+        { side: ['top', 'bottom'], size: 'sm', class: { content: 'max-h-[40dvh]' } },
+        { side: ['top', 'bottom'], size: 'md', class: { content: 'max-h-[60dvh]' } },
+        { side: ['top', 'bottom'], size: 'lg', class: { content: 'max-h-[75dvh]' } },
+        { side: ['top', 'bottom'], size: 'xl', class: { content: 'max-h-[90dvh]' } },
+        { side: ['top', 'bottom'], size: 'full', class: { content: 'max-h-full' } },
+        // Inset positioning + rounded corners + shadow ring per side
         {
             inset: true,
             side: 'top',
             class: {
-                content: 'top-4 inset-x-4 max-h-[calc(90dvh-2rem)] rounded-xl shadow-lg ring ring-outline-variant'
+                content: 'top-4 inset-x-4 rounded-xl shadow-lg ring ring-outline-variant'
             }
         },
         {
@@ -91,7 +120,7 @@ export const slideoverVariants = tv({
             inset: true,
             side: 'bottom',
             class: {
-                content: 'bottom-4 inset-x-4 max-h-[calc(90dvh-2rem)] rounded-xl shadow-lg ring ring-outline-variant'
+                content: 'bottom-4 inset-x-4 rounded-xl shadow-lg ring ring-outline-variant'
             }
         },
         {
@@ -103,8 +132,9 @@ export const slideoverVariants = tv({
         }
     ],
     defaultVariants: {
-        transition: true,
+        transition: 'slide',
         side: 'right',
+        size: 'md',
         inset: false,
         overlay: true
     }

package/dist/Stepper/Stepper.svelte

@@ -0,0 +1,292 @@
+<script lang="ts" module>
+    import type { StepperProps } from './stepper.types.js'
+
+    export type Props = StepperProps
+</script>
+
+<script lang="ts">
+    import type { ClassNameValue } from 'tailwind-merge'
+    import { untrack } from 'svelte'
+    import { stepperVariants, stepperDefaults } from './stepper.variants.js'
+    import type { StepperItem, StepperItemState, StepperApi } from './stepper.types.js'
+    import { getComponentConfig } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+
+    const config = getComponentConfig('stepper', stepperDefaults)
+
+    let {
+        ref = $bindable(null),
+        as = 'div',
+        items = [],
+        value = $bindable(),
+        defaultValue,
+        onValueChange,
+        api = $bindable(),
+        linear = true,
+        disabled = false,
+        orientation = config.defaultVariants.orientation ?? 'horizontal',
+        size = config.defaultVariants.size ?? 'md',
+        color = config.defaultVariants.color ?? 'primary',
+        content: showContent = true,
+        class: className,
+        ui,
+        indicator: indicatorSlot,
+        titleSlot,
+        descriptionSlot,
+        body,
+        ...restProps
+    }: Props = $props()
+
+    if (value === undefined) {
+        value = untrack(() => defaultValue ?? items[0]?.value ?? 0)
+    }
+
+    let triggers: (HTMLButtonElement | null)[] = $state([])
+
+    function getItemValue(item: StepperItem, index: number): string | number {
+        return item.value ?? index
+    }
+
+    const activeIndex = $derived(items.findIndex((item, i) => getItemValue(item, i) === value))
+
+    function getState(index: number): StepperItemState {
+        if (activeIndex === -1) return 'pending'
+        if (index === activeIndex) return 'active'
+        return index < activeIndex ? 'completed' : 'pending'
+    }
+
+    function canActivate(index: number): boolean {
+        if (disabled || items[index]?.disabled) return false
+        if (!linear) return true
+        return index <= activeIndex + 1
+    }
+
+    function setValue(next: string | number) {
+        if (next === value) return
+        value = next
+        onValueChange?.(next)
+    }
+
+    function handleClick(item: StepperItem, index: number) {
+        if (!canActivate(index)) return
+        setValue(getItemValue(item, index))
+    }
+
+    function findEnabled(start: number, dir: 1 | -1): number {
+        for (let i = start; i >= 0 && i < items.length; i += dir) {
+            if (!items[i]?.disabled) return i
+        }
+        return -1
+    }
+
+    function handleKeydown(e: KeyboardEvent, index: number) {
+        const horizontal = orientation === 'horizontal'
+        const nextKey = horizontal ? 'ArrowRight' : 'ArrowDown'
+        const prevKey = horizontal ? 'ArrowLeft' : 'ArrowUp'
+
+        let target = -1
+        if (e.key === nextKey) target = findEnabled(index + 1, 1)
+        else if (e.key === prevKey) target = findEnabled(index - 1, -1)
+        else if (e.key === 'Home') target = findEnabled(0, 1)
+        else if (e.key === 'End') target = findEnabled(items.length - 1, -1)
+        else return
+
+        e.preventDefault()
+        if (target >= 0) triggers[target]?.focus()
+    }
+
+    const apiInstance: StepperApi = {
+        next() {
+            if (activeIndex >= items.length - 1) return
+            const target = items[activeIndex + 1]
+            if (!target) return
+            setValue(getItemValue(target, activeIndex + 1))
+        },
+        prev() {
+            if (activeIndex <= 0) return
+            const target = items[activeIndex - 1]
+            if (!target) return
+            setValue(getItemValue(target, activeIndex - 1))
+        },
+        goTo(next) {
+            setValue(next)
+        },
+        get hasNext() {
+            return activeIndex >= 0 && activeIndex < items.length - 1
+        },
+        get hasPrev() {
+            return activeIndex > 0
+        },
+        get activeIndex() {
+            return activeIndex
+        }
+    }
+
+    $effect.pre(() => {
+        api = apiInstance
+    })
+
+    const variantSlots = $derived(stepperVariants({ orientation, size, color }))
+
+    type ItemUi = StepperItem['ui']
+
+    const classes = $derived.by(() => {
+        const c = config.slots
+        const slots = variantSlots
+        const u = ui ?? {}
+
+        const _item = slots.item({ class: [c.item, u.item] })
+        const _trigger = slots.trigger({ class: [c.trigger, u.trigger] })
+        const _container = slots.container({ class: [c.container, u.container] })
+        const _indicator = slots.indicator({ class: [c.indicator, u.indicator] })
+        const _separator = slots.separator({ class: [c.separator, u.separator] })
+        const _wrapper = slots.wrapper({ class: [c.wrapper, u.wrapper] })
+        const _title = slots.title({ class: [c.title, u.title] })
+        const _description = slots.description({ class: [c.description, u.description] })
+        const _content = slots.content({ class: [c.content, u.content] })
+
+        return {
+            root: slots.root({ class: [c.root, className, u.root] }),
+            list: slots.list({ class: [c.list, u.list] }),
+            item: (itemClass?: ClassNameValue, itemUi?: ItemUi) =>
+                itemClass || itemUi
+                    ? slots.item({ class: [c.item, u.item, itemUi?.item, itemClass] })
+                    : _item,
+            trigger: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.trigger({ class: [c.trigger, u.trigger, itemUi.trigger] })
+                    : _trigger,
+            container: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.container({ class: [c.container, u.container, itemUi.container] })
+                    : _container,
+            indicator: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.indicator({ class: [c.indicator, u.indicator, itemUi.indicator] })
+                    : _indicator,
+            separator: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.separator({ class: [c.separator, u.separator, itemUi.separator] })
+                    : _separator,
+            wrapper: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.wrapper({ class: [c.wrapper, u.wrapper, itemUi.wrapper] })
+                    : _wrapper,
+            title: (itemUi?: ItemUi) =>
+                itemUi ? slots.title({ class: [c.title, u.title, itemUi.title] }) : _title,
+            description: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.description({
+                          class: [c.description, u.description, itemUi.description]
+                      })
+                    : _description,
+            content: (itemUi?: ItemUi) =>
+                itemUi ? slots.content({ class: [c.content, u.content, itemUi.content] }) : _content
+        }
+    })
+</script>
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
+    <ol class={classes.list}>
+        {#each items as item, index (item.value ?? index)}
+            {@const state = getState(index)}
+            {@const number = index + 1}
+            {@const active = state === 'active'}
+            {@const itemDisabled = disabled || item.disabled || !canActivate(index)}
+            {@const slotProps = { item, index, number, state, active }}
+            {@const hasVisibleText = !!(
+                titleSlot ||
+                descriptionSlot ||
+                item.title ||
+                item.description
+            )}
+            <li
+                class={classes.item(item.class, item.ui)}
+                data-state={state}
+                data-orientation={orientation}
+                data-stepper-item=""
+            >
+                <button
+                    type="button"
+                    bind:this={triggers[index]}
+                    class={classes.trigger(item.ui)}
+                    disabled={itemDisabled}
+                    aria-current={active ? 'step' : undefined}
+                    aria-label={hasVisibleText ? undefined : `Step ${number}`}
+                    tabindex={active ? 0 : -1}
+                    onclick={() => handleClick(item, index)}
+                    onkeydown={(e) => handleKeydown(e, index)}
+                >
+                    <span class={classes.container(item.ui)}>
+                        {#if indicatorSlot}
+                            {@render indicatorSlot(slotProps)}
+                        {:else}
+                            <span
+                                class={classes.indicator(item.ui)}
+                                data-stepper-indicator=""
+                                aria-hidden="true"
+                            >
+                                {#if item.icon}
+                                    <Icon name={item.icon} />
+                                {:else if state === 'completed'}
+                                    <Icon name="lucide:check" />
+                                {:else}
+                                    {number}
+                                {/if}
+                            </span>
+                        {/if}
+
+                        {#if index < items.length - 1}
+                            <span
+                                class={classes.separator(item.ui)}
+                                data-stepper-separator=""
+                                aria-hidden="true"
+                            ></span>
+                        {/if}
+                    </span>
+
+                    {#if hasVisibleText}
+                        <span class={classes.wrapper(item.ui)}>
+                            {#if titleSlot}
+                                {@render titleSlot(slotProps)}
+                            {:else if item.title}
+                                <span class={classes.title(item.ui)}>{item.title}</span>
+                            {/if}
+
+                            {#if descriptionSlot}
+                                {@render descriptionSlot(slotProps)}
+                            {:else if item.description}
+                                <span class={classes.description(item.ui)}>
+                                    {item.description}
+                                </span>
+                            {/if}
+                        </span>
+                    {/if}
+                </button>
+            </li>
+        {/each}
+    </ol>
+
+    {#if showContent}
+        {#each items as item, index (item.value ?? index)}
+            {@const state = getState(index)}
+            {#if state === 'active' && (body || item.content !== undefined)}
+                {@const number = index + 1}
+                {@const slotProps = { item, index, number, state, active: true }}
+                <div class={classes.content(item.ui)} role="region" data-stepper-content="">
+                    {#if body}
+                        {@render body(slotProps)}
+                    {:else}
+                        {item.content}
+                    {/if}
+                </div>
+            {/if}
+        {/each}
+    {/if}
+</svelte:element>

package/dist/Stepper/Stepper.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { StepperProps } from './stepper.types.js';
+export type Props = StepperProps;
+declare const Stepper: import("svelte").Component<StepperProps, {}, "ref" | "value" | "api">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;

package/dist/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Stepper } from './Stepper.svelte';
+export type { StepperProps, StepperItem, StepperItemState, StepperApi } from './stepper.types.js';

package/dist/Stepper/index.js

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