sv5ui 1.1.2 → 1.2.0

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: {

package/dist/RadioGroup/RadioGroup.svelte

@@ -11,11 +11,13 @@
     import { getContext } from 'svelte'
     import Icon from '../Icon/Icon.svelte'
     import type { FormFieldProps } from '../FormField/form-field.types.js'
+    import type { RadioGroupItem } from './radio-group.types.js'
 
     const config = getComponentConfig('radioGroup', radioGroupDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
 
     let {
+        ref = $bindable(null),
         value = $bindable(''),
         onValueChange,
         items = [],
@@ -24,9 +26,12 @@
         name,
         color = config.defaultVariants.color,
         size,
+        variant = config.defaultVariants.variant,
+        indicator = config.defaultVariants.indicator,
         orientation = config.defaultVariants.orientation,
         disabled = false,
         required = false,
+        readonly = false,
         loop = true,
         loading = false,
         loadingIcon = icons.loading,
@@ -34,7 +39,8 @@
         legendSlot,
         labelSlot,
         descriptionSlot,
-        class: className
+        class: className,
+        ...restProps
     }: Props = $props()
 
     const formFieldContext = getContext<
@@ -57,16 +63,20 @@
     const resolvedName = $derived(name ?? formFieldContext?.name)
     const isDisabled = $derived(disabled || loading)
 
-    const ariaDescribedBy = $derived.by(() => {
-        if (!formFieldContext) return undefined
-        const fid = formFieldContext.ariaId
-        return hasError ? `${fid}-error` : `${fid}-description ${fid}-help`
-    })
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
 
     const slots = $derived(
         radioGroupVariants({
             color: resolvedColor,
             size: resolvedSize,
+            variant,
+            indicator,
             orientation,
             loading,
             required,
@@ -90,9 +100,75 @@
         label: slots.label({ class: [config.slots.label, ui?.label] }),
         description: slots.description({ class: [config.slots.description, ui?.description] })
     }))
+
+    function handleCardItemClick(e: MouseEvent, btnId: string, itemDisabled: boolean) {
+        if (itemDisabled) return
+        if ((e.target as Element).closest('button')) return
+        document.getElementById(btnId)?.click()
+    }
 </script>
 
-<div class={layoutClasses.root}>
+{#snippet itemContent(radioItem: RadioGroupItem)}
+    {@const itemId = `${resolvedId}-${radioItem.value}`}
+    {@const itemDisabled = isDisabled || !!radioItem.disabled}
+    <div class={layoutClasses.container}>
+        <RadioGroup.Item
+            value={radioItem.value}
+            disabled={itemDisabled}
+            id={itemId}
+            class={elementClasses.base}
+        >
+            {#snippet children({ checked })}
+                {#if checked}
+                    <span class={elementClasses.indicator}>
+                        {#if loading}
+                            <Icon name={loadingIcon} class={elementClasses.loadingIcon} />
+                        {/if}
+                    </span>
+                {/if}
+            {/snippet}
+        </RadioGroup.Item>
+    </div>
+
+    {#if radioItem.label || radioItem.description || labelSlot || descriptionSlot}
+        <div class={layoutClasses.wrapper}>
+            {#if labelSlot}
+                {@render labelSlot({ item: radioItem })}
+            {:else if radioItem.label}
+                {#if variant === 'card'}
+                    <span
+                        class={[elementClasses.label, itemDisabled && 'cursor-not-allowed']
+                            .filter(Boolean)
+                            .join(' ')}>{radioItem.label}</span
+                    >
+                {:else}
+                    <Label.Root
+                        for={itemId}
+                        class={[elementClasses.label, itemDisabled && 'cursor-not-allowed']
+                            .filter(Boolean)
+                            .join(' ')}
+                    >
+                        {radioItem.label}
+                    </Label.Root>
+                {/if}
+            {/if}
+
+            {#if descriptionSlot}
+                {@render descriptionSlot({ item: radioItem })}
+            {:else if radioItem.description}
+                <p
+                    class={[elementClasses.description, itemDisabled && 'cursor-not-allowed']
+                        .filter(Boolean)
+                        .join(' ')}
+                >
+                    {radioItem.description}
+                </p>
+            {/if}
+        </div>
+    {/if}
+{/snippet}
+
+<div {...restProps} bind:this={ref} class={layoutClasses.root}>
     <RadioGroup.Root
         bind:value
         {onValueChange}
@@ -100,6 +176,7 @@
         name={resolvedName}
         disabled={isDisabled}
         {required}
+        {readonly}
         {loop}
         {orientation}
         aria-describedby={ariaDescribedBy}
@@ -115,61 +192,28 @@
         {/if}
 
         {#each items as radioItem (radioItem.value)}
-            {@const itemId = `${resolvedId}-${radioItem.value}`}
-            {@const itemDisabled = isDisabled || radioItem.disabled}
-
-            <div class="{layoutClasses.item}{itemDisabled && !isDisabled ? ' opacity-75' : ''}">
-                <div class={layoutClasses.container}>
-                    <RadioGroup.Item
-                        value={radioItem.value}
-                        disabled={itemDisabled}
-                        id={itemId}
-                        class={elementClasses.base}
-                    >
-                        {#snippet children({ checked })}
-                            {#if checked}
-                                <span class={elementClasses.indicator}>
-                                    {#if loading}
-                                        <Icon
-                                            name={loadingIcon}
-                                            class={elementClasses.loadingIcon}
-                                        />
-                                    {/if}
-                                </span>
-                            {/if}
-                        {/snippet}
-                    </RadioGroup.Item>
+            {#if variant === 'card'}
+                <div
+                    role="none"
+                    class={layoutClasses.item}
+                    class:opacity-75={radioItem.disabled && !isDisabled}
+                    onclick={(e) =>
+                        handleCardItemClick(
+                            e,
+                            `${resolvedId}-${radioItem.value}`,
+                            isDisabled || !!radioItem.disabled
+                        )}
+                >
+                    {@render itemContent(radioItem)}
                 </div>
-
-                {#if radioItem.label || radioItem.description || labelSlot || descriptionSlot}
-                    <div class={layoutClasses.wrapper}>
-                        {#if labelSlot}
-                            {@render labelSlot({ item: radioItem })}
-                        {:else if radioItem.label}
-                            <Label.Root
-                                for={itemId}
-                                class="{elementClasses.label}{itemDisabled
-                                    ? ' cursor-not-allowed'
-                                    : ''}"
-                            >
-                                {radioItem.label}
-                            </Label.Root>
-                        {/if}
-
-                        {#if descriptionSlot}
-                            {@render descriptionSlot({ item: radioItem })}
-                        {:else if radioItem.description}
-                            <p
-                                class="{elementClasses.description}{itemDisabled
-                                    ? ' cursor-not-allowed'
-                                    : ''}"
-                            >
-                                {radioItem.description}
-                            </p>
-                        {/if}
-                    </div>
-                {/if}
-            </div>
+            {:else}
+                <div
+                    class={layoutClasses.item}
+                    class:opacity-75={radioItem.disabled && !isDisabled}
+                >
+                    {@render itemContent(radioItem)}
+                </div>
+            {/if}
         {/each}
     </RadioGroup.Root>
 </div>

package/dist/RadioGroup/RadioGroup.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { RadioGroupProps } from './radio-group.types.js';
 export type Props = RadioGroupProps;
 import { RadioGroup } from 'bits-ui';
-declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "value">;
+declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "ref" | "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;

package/dist/RadioGroup/radio-group.types.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
 import type { ClassNameValue } from 'tailwind-merge';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { RadioGroupVariantProps, RadioGroupSlots } from './radio-group.variants.js';
 export type RadioGroupItem = {
     /**
@@ -21,7 +22,11 @@ export type RadioGroupItem = {
      */
     disabled?: boolean;
 };
-export type RadioGroupProps = Pick<RadioGroupPrimitive.RootProps, 'disabled' | 'name' | 'required' | 'loop'> & {
+export type RadioGroupProps = Pick<RadioGroupPrimitive.RootProps, 'disabled' | 'name' | 'required' | 'loop' | 'readonly'> & Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The selected value. Supports two-way binding with `bind:value`.
      */
@@ -44,6 +49,16 @@ export type RadioGroupProps = Pick<RadioGroupPrimitive.RootProps, 'disabled' | '
      * @default 'md'
      */
     size?: NonNullable<RadioGroupVariantProps['size']>;
+    /**
+     * Controls the visual style of each radio item.
+     * @default 'list'
+     */
+    variant?: NonNullable<RadioGroupVariantProps['variant']>;
+    /**
+     * Controls the position of the radio indicator.
+     * @default 'start'
+     */
+    indicator?: NonNullable<RadioGroupVariantProps['indicator']>;
     /**
      * Controls the layout direction.
      * @default 'vertical'