sv5ui 1.1.3 → 1.3.0

package/dist/Popover/popover.variants.js

@@ -10,28 +10,18 @@ export const popoverVariants = tv({
         arrow: ''
     },
     variants: {
-        side: {
-            top: {
-                content: 'data-[state=open]:animate-[slide-in-from-bottom_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-top_100ms_ease-in_reverse]'
-            },
-            right: {
-                content: 'data-[state=open]:animate-[slide-in-from-left_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-right_100ms_ease-in_reverse]'
-            },
-            bottom: {
-                content: 'data-[state=open]:animate-[slide-in-from-top_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-bottom_100ms_ease-in_reverse]'
-            },
-            left: {
-                content: 'data-[state=open]:animate-[slide-in-from-right_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-left_100ms_ease-in_reverse]'
-            }
-        },
         transition: {
             true: {
-                content: 'data-[state=open]:animate-[fade-in_150ms_ease-out,scale-in_150ms_ease-out] data-[state=closed]:animate-[fade-out_100ms_ease-in,scale-out_100ms_ease-in]'
+                content: [
+                    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+                    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+                    'data-[side=top]:slide-in-from-bottom-2 data-[side=right]:slide-in-from-left-2',
+                    'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2'
+                ]
             }
         }
     },
     defaultVariants: {
-        side: 'bottom',
         transition: true
     }
 });

package/dist/Progress/Progress.svelte

@@ -24,30 +24,51 @@
         ui,
         class: className,
         statusSlot,
+        stepSlot,
         ...restProps
     }: Props = $props()
 
-    const maxValue = $derived(Array.isArray(max) ? max.length - 1 : max)
-    const percent = $derived(
-        value !== null ? Math.round((Math.min(value, maxValue) / maxValue) * 100) : 0
-    )
     const isIndeterminate = $derived(value === null)
-    const state = $derived(isIndeterminate ? 'indeterminate' : 'determinate')
+    const hasSteps = $derived(Array.isArray(max))
+
+    const realMax = $derived.by(() => {
+        if (isIndeterminate || !max) return undefined
+        if (Array.isArray(max)) return max.length - 1
+        return Number(max)
+    })
+
+    const percent = $derived.by(() => {
+        if (isIndeterminate) return undefined
+        if (value! < 0) return 0
+        if (value! > (realMax ?? 100)) return 100
+        return Math.round((value! / (realMax ?? 100)) * 100)
+    })
 
     const indicatorStyle = $derived.by(() => {
-        if (isIndeterminate) return ''
+        if (percent === undefined) return ''
         const offset = 100 - percent
-        if (orientation === 'horizontal') {
-            return inverted
-                ? `transform: translateX(${offset}%);`
-                : `transform: translateX(-${offset}%);`
+        if (orientation === 'vertical') {
+            return `transform: translateY(${inverted ? '' : '-'}${offset}%);`
         }
-        // Vertical: fill from bottom to top (positive Y = down)
-        return inverted
-            ? `transform: translateY(-${offset}%);`
-            : `transform: translateY(${offset}%);`
+        return `transform: translateX(${inverted ? '' : '-'}${offset}%);`
     })
 
+    const statusStyle = $derived.by(() => {
+        const val = `${Math.max(percent ?? 0, 0)}%`
+        return orientation === 'vertical' ? `height: ${val};` : `width: ${val};`
+    })
+
+    function stepVariant(index: number): 'active' | 'first' | 'last' | 'other' {
+        const isActive = index === Number(value)
+        const isFirst = index === 0
+        const isLast = index === realMax
+
+        if (isActive && !isFirst) return 'active'
+        if (isFirst && isActive) return 'first'
+        if (isLast && isActive) return 'last'
+        return 'other'
+    }
+
     const classes = $derived.by(() => {
         const slots = progressVariants({ animation, color, size, orientation, inverted })
         return {
@@ -55,24 +76,25 @@
             base: slots.base({ class: [config.slots.base, ui?.base] }),
             indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
             status: slots.status({ class: [config.slots.status, ui?.status] }),
-            stepsBase: slots.steps({ class: [config.slots.steps, ui?.steps] }),
-            stepActive: progressVariants({ size, step: 'active' }).steps(),
-            stepOther: progressVariants({ size, step: 'other' }).steps()
+            steps: slots.steps({ class: [config.slots.steps, ui?.steps] })
         }
     })
+
+    const state = $derived(isIndeterminate ? 'indeterminate' : 'determinate')
 </script>
 
 <Progress.Root
     bind:ref
     value={value ?? undefined}
-    max={maxValue}
+    max={realMax}
     class={classes.root}
+    data-orientation={orientation}
     {...restProps}
 >
-    {#if status && !Array.isArray(max)}
-        <div class={classes.status} style={isIndeterminate ? '' : `width: ${percent}%;`}>
+    {#if !isIndeterminate && status}
+        <div class={classes.status} style={statusStyle}>
             {#if statusSlot}
-                {@render statusSlot({ percent })}
+                {@render statusSlot({ percent: percent ?? 0 })}
             {:else}
                 {percent}%
             {/if}
@@ -83,16 +105,22 @@
         <div class={classes.indicator} data-state={state} style={indicatorStyle}></div>
     </div>
 
-    {#if Array.isArray(max)}
-        <div class={classes.stepsBase}>
+    {#if hasSteps && Array.isArray(max)}
+        <div class={classes.steps}>
             {#each max as step, index (index)}
-                <span
-                    class={value !== null && index <= value
-                        ? classes.stepActive
-                        : classes.stepOther}
-                >
-                    {step}
-                </span>
+                {@const stepClass = progressVariants({
+                    size,
+                    orientation,
+                    inverted,
+                    step: stepVariant(index)
+                }).step({ class: [config.slots.step, ui?.step] })}
+                <div class={stepClass}>
+                    {#if stepSlot}
+                        {@render stepSlot({ step, index })}
+                    {:else}
+                        {step}
+                    {/if}
+                </div>
             {/each}
         </div>
     {/if}

package/dist/Progress/progress.types.d.ts

@@ -46,7 +46,7 @@ export type ProgressProps = Omit<Progress.RootProps, 'max'> & {
     animation?: NonNullable<ProgressVariantProps['animation']>;
     /**
      * Override styles for specific progress slots.
-     * Available slots: root, base, indicator, status, steps.
+     * Available slots: root, base, indicator, status, steps, step.
      */
     ui?: Partial<Record<ProgressSlots, ClassNameValue>>;
     /**
@@ -60,4 +60,12 @@ export type ProgressProps = Omit<Progress.RootProps, 'max'> & {
     statusSlot?: Snippet<[{
         percent: number;
     }]>;
+    /**
+     * Custom content rendered for each step label.
+     * Takes precedence over the default step text.
+     */
+    stepSlot?: Snippet<[{
+        step: string;
+        index: number;
+    }]>;
 };

package/dist/Progress/progress.variants.d.ts

@@ -64,27 +64,32 @@ export declare const progressVariants: import("tailwind-variants").TVReturnType<
     };
     step: {
         active: {
-            steps: string;
+            step: string;
+        };
+        first: {
+            step: string;
         };
-        first: string;
         other: {
-            steps: string;
+            step: string;
+        };
+        last: {
+            step: string;
         };
-        last: string;
     };
     orientation: {
         horizontal: {
             root: string;
             base: string;
+            status: string;
         };
         vertical: {
             root: string;
             base: string;
+            status: string;
         };
     };
     inverted: {
         true: {
-            root: string;
             status: string;
         };
     };
@@ -94,6 +99,7 @@ export declare const progressVariants: import("tailwind-variants").TVReturnType<
     indicator: string;
     status: string;
     steps: string;
+    step: string;
 }, undefined, {
     animation: {
         carousel: string;
@@ -159,27 +165,32 @@ export declare const progressVariants: import("tailwind-variants").TVReturnType<
     };
     step: {
         active: {
-            steps: string;
+            step: string;
+        };
+        first: {
+            step: string;
         };
-        first: string;
         other: {
-            steps: string;
+            step: string;
+        };
+        last: {
+            step: string;
         };
-        last: string;
     };
     orientation: {
         horizontal: {
             root: string;
             base: string;
+            status: string;
         };
         vertical: {
             root: string;
             base: string;
+            status: string;
         };
     };
     inverted: {
         true: {
-            root: string;
             status: string;
         };
     };
@@ -189,6 +200,7 @@ export declare const progressVariants: import("tailwind-variants").TVReturnType<
     indicator: string;
     status: string;
     steps: string;
+    step: string;
 }, import("tailwind-variants").TVReturnType<{
     animation: {
         carousel: string;
@@ -254,27 +266,32 @@ export declare const progressVariants: import("tailwind-variants").TVReturnType<
     };
     step: {
         active: {
-            steps: string;
+            step: string;
+        };
+        first: {
+            step: string;
         };
-        first: string;
         other: {
-            steps: string;
+            step: string;
+        };
+        last: {
+            step: string;
         };
-        last: string;
     };
     orientation: {
         horizontal: {
             root: string;
             base: string;
+            status: string;
         };
         vertical: {
             root: string;
             base: string;
+            status: string;
         };
     };
     inverted: {
         true: {
-            root: string;
             status: string;
         };
     };
@@ -284,6 +301,7 @@ export declare const progressVariants: import("tailwind-variants").TVReturnType<
     indicator: string;
     status: string;
     steps: string;
+    step: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ProgressVariantProps = VariantProps<typeof progressVariants>;
 export type ProgressSlots = keyof ReturnType<typeof progressVariants>;
@@ -353,27 +371,32 @@ export declare const progressDefaults: {
         };
         step: {
             active: {
-                steps: string;
+                step: string;
+            };
+            first: {
+                step: string;
             };
-            first: string;
             other: {
-                steps: string;
+                step: string;
+            };
+            last: {
+                step: string;
             };
-            last: string;
         };
         orientation: {
             horizontal: {
                 root: string;
                 base: string;
+                status: string;
             };
             vertical: {
                 root: string;
                 base: string;
+                status: string;
             };
         };
         inverted: {
             true: {
-                root: string;
                 status: string;
             };
         };
@@ -383,6 +406,7 @@ export declare const progressDefaults: {
         indicator: string;
         status: string;
         steps: string;
+        step: string;
     }, {
         animation: {
             carousel: string;
@@ -448,27 +472,32 @@ export declare const progressDefaults: {
         };
         step: {
             active: {
-                steps: string;
+                step: string;
+            };
+            first: {
+                step: string;
             };
-            first: string;
             other: {
-                steps: string;
+                step: string;
+            };
+            last: {
+                step: string;
             };
-            last: string;
         };
         orientation: {
             horizontal: {
                 root: string;
                 base: string;
+                status: string;
             };
             vertical: {
                 root: string;
                 base: string;
+                status: string;
             };
         };
         inverted: {
             true: {
-                root: string;
                 status: string;
             };
         };
@@ -478,6 +507,7 @@ export declare const progressDefaults: {
         indicator: string;
         status: string;
         steps: string;
+        step: string;
     }>;
     slots: Partial<Record<ProgressSlots, string>>;
 };

package/dist/Progress/progress.variants.js

@@ -4,8 +4,9 @@ export const progressVariants = tv({
         root: 'gap-2',
         base: 'relative overflow-hidden rounded-full bg-surface-container-highest',
         indicator: 'rounded-full size-full transition-transform duration-200 ease-out',
-        status: 'text-end transition-[width] duration-200 text-on-surface-variant',
-        steps: 'flex justify-between'
+        status: 'flex text-on-surface-variant transition-[width] duration-200',
+        steps: 'grid items-end',
+        step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
     },
     variants: {
         animation: {
@@ -72,32 +73,53 @@ export const progressVariants = tv({
         },
         step: {
             active: {
-                steps: 'text-on-surface'
+                step: 'opacity-100'
+            },
+            first: {
+                step: 'opacity-100 text-on-surface-variant'
             },
-            first: '',
             other: {
-                steps: 'text-on-surface-variant'
+                step: 'opacity-0'
             },
-            last: ''
+            last: {
+                step: ''
+            }
         },
         orientation: {
             horizontal: {
-                root: 'flex flex-col',
-                base: 'w-full'
+                root: 'w-full flex flex-col',
+                base: 'w-full',
+                status: 'flex-row items-center justify-end min-w-fit'
             },
             vertical: {
-                root: 'flex flex-row-reverse h-full',
-                base: 'h-full'
+                root: 'h-full flex flex-row-reverse',
+                base: 'h-full',
+                status: 'flex-col justify-end min-h-fit'
             }
         },
         inverted: {
             true: {
-                root: 'flex-col-reverse',
-                status: 'text-start'
+                status: 'self-end'
             }
         }
     },
     compoundVariants: [
+        {
+            inverted: true,
+            orientation: 'horizontal',
+            class: {
+                step: 'text-start',
+                status: 'flex-row-reverse'
+            }
+        },
+        {
+            inverted: true,
+            orientation: 'vertical',
+            class: {
+                steps: 'items-start',
+                status: 'flex-col-reverse'
+            }
+        },
         { orientation: 'horizontal', size: '2xs', class: { base: 'h-px' } },
         { orientation: 'horizontal', size: 'xs', class: { base: 'h-0.5' } },
         { orientation: 'horizontal', size: 'sm', class: { base: 'h-1' } },
@@ -167,22 +189,6 @@ export const progressVariants = tv({
             class: {
                 indicator: 'data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]'
             }
-        },
-        {
-            inverted: true,
-            orientation: 'horizontal',
-            class: {
-                step: 'text-start',
-                status: 'flex-row-reverse'
-            }
-        },
-        {
-            inverted: true,
-            orientation: 'vertical',
-            class: {
-                steps: 'items-start',
-                status: 'flex-col-reverse'
-            }
         }
     ],
     defaultVariants: {