sv5ui 1.1.3 → 1.3.0

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'

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

@@ -52,6 +52,24 @@ export declare const radioGroupVariants: import("tailwind-variants").TVReturnTyp
             wrapper: string;
         };
     };
+    variant: {
+        list: string;
+        card: {
+            item: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            item: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
     orientation: {
         horizontal: {
             fieldset: string;
@@ -141,6 +159,24 @@ export declare const radioGroupVariants: import("tailwind-variants").TVReturnTyp
             wrapper: string;
         };
     };
+    variant: {
+        list: string;
+        card: {
+            item: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            item: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
     orientation: {
         horizontal: {
             fieldset: string;
@@ -230,6 +266,24 @@ export declare const radioGroupVariants: import("tailwind-variants").TVReturnTyp
             wrapper: string;
         };
     };
+    variant: {
+        list: string;
+        card: {
+            item: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            item: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
     orientation: {
         horizontal: {
             fieldset: string;
@@ -323,6 +377,24 @@ export declare const radioGroupDefaults: {
                 wrapper: string;
             };
         };
+        variant: {
+            list: string;
+            card: {
+                item: string;
+            };
+        };
+        indicator: {
+            start: {
+                wrapper: string;
+            };
+            end: {
+                item: string;
+                wrapper: string;
+            };
+            hidden: {
+                container: string;
+            };
+        };
         orientation: {
             horizontal: {
                 fieldset: string;
@@ -412,6 +484,24 @@ export declare const radioGroupDefaults: {
                 wrapper: string;
             };
         };
+        variant: {
+            list: string;
+            card: {
+                item: string;
+            };
+        };
+        indicator: {
+            start: {
+                wrapper: string;
+            };
+            end: {
+                item: string;
+                wrapper: string;
+            };
+            hidden: {
+                container: string;
+            };
+        };
         orientation: {
             horizontal: {
                 fieldset: string;

package/dist/RadioGroup/radio-group.variants.js

@@ -15,10 +15,10 @@ export const radioGroupVariants = tv({
         ],
         indicator: [
             'flex items-center justify-center rounded-full',
-            'after:content-[""] after:block after:rounded-full after:bg-white'
+            'after:content-[""] after:block after:rounded-full after:bg-surface'
         ],
-        loadingIcon: 'shrink-0 animate-spin text-white',
-        wrapper: 'ms-2',
+        loadingIcon: 'shrink-0 animate-spin text-surface',
+        wrapper: '',
         label: 'block font-medium text-on-surface',
         description: 'text-on-surface-variant'
     },
@@ -75,6 +75,24 @@ export const radioGroupVariants = tv({
                 wrapper: 'text-base'
             }
         },
+        variant: {
+            list: '',
+            card: {
+                item: 'border border-outline-variant rounded-lg cursor-pointer select-none'
+            }
+        },
+        indicator: {
+            start: {
+                wrapper: 'ms-2'
+            },
+            end: {
+                item: 'flex-row-reverse',
+                wrapper: 'me-2'
+            },
+            hidden: {
+                container: 'sr-only'
+            }
+        },
         orientation: {
             horizontal: {
                 fieldset: 'flex-row'
@@ -149,11 +167,62 @@ export const radioGroupVariants = tv({
             class: {
                 base: 'data-[state=checked]:bg-on-surface data-[state=checked]:border-on-surface focus-visible:outline-outline'
             }
-        }
+        },
+        // ========== CARD × SIZE (padding) ==========
+        { variant: 'card', size: 'xs', class: { item: 'p-2' } },
+        { variant: 'card', size: 'sm', class: { item: 'p-2.5' } },
+        { variant: 'card', size: 'md', class: { item: 'p-3' } },
+        { variant: 'card', size: 'lg', class: { item: 'p-3.5' } },
+        { variant: 'card', size: 'xl', class: { item: 'p-4' } },
+        // ========== CARD × COLOR (checked border) ==========
+        {
+            variant: 'card',
+            color: 'primary',
+            class: { item: 'has-[[data-state=checked]]:border-primary' }
+        },
+        {
+            variant: 'card',
+            color: 'secondary',
+            class: { item: 'has-[[data-state=checked]]:border-secondary' }
+        },
+        {
+            variant: 'card',
+            color: 'tertiary',
+            class: { item: 'has-[[data-state=checked]]:border-tertiary' }
+        },
+        {
+            variant: 'card',
+            color: 'success',
+            class: { item: 'has-[[data-state=checked]]:border-success' }
+        },
+        {
+            variant: 'card',
+            color: 'warning',
+            class: { item: 'has-[[data-state=checked]]:border-warning' }
+        },
+        {
+            variant: 'card',
+            color: 'error',
+            class: { item: 'has-[[data-state=checked]]:border-error' }
+        },
+        {
+            variant: 'card',
+            color: 'info',
+            class: { item: 'has-[[data-state=checked]]:border-info' }
+        },
+        {
+            variant: 'card',
+            color: 'surface',
+            class: { item: 'has-[[data-state=checked]]:border-on-surface' }
+        },
+        // ========== CARD × DISABLED ==========
+        { variant: 'card', disabled: true, class: { item: 'cursor-not-allowed' } }
     ],
     defaultVariants: {
         color: 'primary',
         size: 'md',
+        variant: 'list',
+        indicator: 'start',
         orientation: 'vertical'
     }
 });

package/dist/Select/Select.svelte

@@ -22,6 +22,7 @@
     const icons = getComponentConfig('icons', iconsDefaults)
 
     let {
+        ref = $bindable(null),
         value = $bindable(),
         open = $bindable(false),
         onOpenChange,
@@ -102,11 +103,13 @@
     const resolvedName = $derived(name ?? formFieldContext?.name)
 
     // ---- ARIA ----
-    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`
+    )
 
     // ---- Items lookup (O(1) via Map) ----
     const itemsMap = $derived(
@@ -329,7 +332,7 @@
     {value}
     onValueChange={(val) => (value = val)}
 >
-    <div class={rootClass}>
+    <div bind:this={ref} class={rootClass}>
         {#if leadingSlot}
             <span class={leadingClass}>
                 {@render leadingSlot()}

package/dist/Select/Select.svelte.d.ts

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

package/dist/Select/select.types.d.ts

@@ -86,6 +86,10 @@ type ContentProps = Pick<SelectContentPropsWithoutHTML, 'side' | 'sideOffset' |
  * @see https://bits-ui.com/docs/components/select
  */
 export interface SelectProps extends RootProps, ContentProps {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The currently selected value. Supports two-way binding with `bind:value`.
      */