sv5ui 1.1.3 → 1.3.0

package/dist/SelectMenu/select-menu.variants.js

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants';
+import { selectVariants } from '../Select/select.variants.js';
+export const selectMenuVariants = tv({
+    extend: selectVariants,
+    slots: {
+        content: [
+            'z-50 max-h-60 w-(--bits-floating-anchor-width)',
+            'bg-surface-container-low text-on-surface',
+            'rounded-md',
+            'ring ring-outline-variant/50',
+            'shadow-lg',
+            'focus:outline-none',
+            'overflow-hidden',
+            'flex flex-col'
+        ],
+        input: 'border-b border-outline-variant',
+        viewport: 'p-1 flex-1 overflow-y-auto',
+        empty: 'text-center text-on-surface-variant'
+    },
+    variants: {
+        size: {
+            xs: { empty: 'p-2 text-xs' },
+            sm: { empty: 'p-2.5 text-xs' },
+            md: { empty: 'p-2.5 text-sm' },
+            lg: { empty: 'p-3 text-sm' },
+            xl: { empty: 'p-3 text-base' }
+        }
+    }
+});
+export const selectMenuDefaults = {
+    defaultVariants: selectMenuVariants.defaultVariants,
+    slots: {}
+};

package/dist/Separator/Separator.svelte

@@ -40,7 +40,6 @@
             container: slots.container({ class: [config.slots.container, ui?.container] }),
             icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
             avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
-            avatarSize: slots.avatarSize() as AvatarSize,
             label: slots.label({ class: [config.slots.label, ui?.label] })
         }
     })
@@ -56,7 +55,7 @@
             {:else if avatar}
                 <Avatar
                     {...avatar}
-                    size={avatar.size ?? classes.avatarSize}
+                    size={avatar.size ?? (config.avatarSize as AvatarSize)}
                     class={classes.avatar}
                 />
             {:else if icon}

package/dist/Separator/separator.variants.d.ts

@@ -93,7 +93,6 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
     container: string;
     icon: string;
     avatar: string;
-    avatarSize: string;
     label: string;
 }, undefined, {
     color: {
@@ -189,7 +188,6 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
     container: string;
     icon: string;
     avatar: string;
-    avatarSize: string;
     label: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
@@ -285,7 +283,6 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
     container: string;
     icon: string;
     avatar: string;
-    avatarSize: string;
     label: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SeparatorVariantProps = VariantProps<typeof separatorVariants>;
@@ -385,7 +382,6 @@ export declare const separatorDefaults: {
         container: string;
         icon: string;
         avatar: string;
-        avatarSize: string;
         label: string;
     }, {
         color: {
@@ -481,8 +477,8 @@ export declare const separatorDefaults: {
         container: string;
         icon: string;
         avatar: string;
-        avatarSize: string;
         label: string;
     }>;
     slots: Partial<Record<SeparatorSlots, string>>;
+    avatarSize: string;
 };

package/dist/Separator/separator.variants.js

@@ -6,7 +6,6 @@ export const separatorVariants = tv({
         container: 'font-medium flex',
         icon: 'shrink-0',
         avatar: 'shrink-0',
-        avatarSize: '2xs',
         label: ''
     },
     variants: {
@@ -100,5 +99,6 @@ export const separatorVariants = tv({
 });
 export const separatorDefaults = {
     defaultVariants: separatorVariants.defaultVariants,
-    slots: {}
+    slots: {},
+    avatarSize: '2xs'
 };

package/dist/Skeleton/Skeleton.svelte

@@ -10,7 +10,14 @@
 
     const config = getComponentConfig('skeleton', skeletonDefaults)
 
-    let { as = 'div', ui, class: className, children, ...restProps }: Props = $props()
+    let {
+        ref = $bindable(null),
+        as = 'div',
+        ui,
+        class: className,
+        children,
+        ...restProps
+    }: Props = $props()
 
     const classes = $derived.by(() => {
         const slots = skeletonVariants()
@@ -20,6 +27,15 @@
     })
 </script>
 
-<svelte:element this={as} class={classes.root} {...restProps}>
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    role="alert"
+    aria-busy="true"
+    aria-label="loading"
+    aria-live="polite"
+    {...restProps}
+>
     {@render children?.()}
 </svelte:element>

package/dist/Skeleton/Skeleton.svelte.d.ts

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

package/dist/Skeleton/skeleton.types.d.ts

@@ -1,18 +1,27 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { SkeletonSlots } from './skeleton.variants.js';
 export type SkeletonProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Renders the skeleton as a different HTML element.
      * @default 'div'
      */
     as?: keyof HTMLElementTagNameMap;
     /**
-     * Override styles for specific skeleton slots (root).
+     * Override styles for specific skeleton slots.
      */
     ui?: Partial<Record<SkeletonSlots, ClassNameValue>>;
     /**
      * Additional CSS classes for the root element.
      */
     class?: ClassNameValue;
+    /**
+     * Default slot content.
+     */
+    children?: Snippet;
 };

package/dist/Slideover/Slideover.svelte

@@ -40,6 +40,7 @@
         header: headerSlot,
         titleSlot,
         descriptionSlot,
+        actions: actionsSlot,
         body: bodySlot,
         footer: footerSlot,
         closeSlot
@@ -51,7 +52,9 @@
     const hasTitle = $derived(!!title || !!titleSlot)
     const hasDescription = $derived(!!description || !!descriptionSlot)
     const hasHeading = $derived(hasTitle || hasDescription)
-    const hasHeader = $derived(!!headerSlot || hasHeading || showClose || !!closeSlot)
+    const hasHeader = $derived(
+        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
+    )
 
     const variantSlots = $derived(
         slideoverVariants({ transition, side, inset, overlay: showOverlay })
@@ -66,6 +69,7 @@
         description: variantSlots.description({
             class: [config.slots.description, ui?.description]
         }),
+        actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
         body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
         footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
         close: variantSlots.close({ class: [config.slots.close, ui?.close] })
@@ -132,6 +136,10 @@
                             {/if}
                         </div>
 
+                        {#if actionsSlot}
+                            <div class={classes.actions}>{@render actionsSlot()}</div>
+                        {/if}
+
                         {#if showClose || closeSlot}
                             <Dialog.Close>
                                 {#snippet child({ props })}

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

@@ -112,6 +112,11 @@ export interface SlideoverProps extends RootProps, ContentProps {
      * Custom description slot. Overrides the `description` prop when provided.
      */
     descriptionSlot?: Snippet;
+    /**
+     * Actions slot rendered between the title/description wrapper
+     * and the close button inside the header.
+     */
+    actions?: Snippet;
     /**
      * Body content rendered between the header and footer.
      */

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

@@ -21,7 +21,9 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     };
     inset: {
         true: {};
-        false: {};
+        false: {
+            content: string;
+        };
     };
     overlay: {
         true: {
@@ -37,6 +39,7 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     footer: string;
     title: string;
     description: string;
+    actions: string;
     close: string;
 }, undefined, {
     transition: {
@@ -60,7 +63,9 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     };
     inset: {
         true: {};
-        false: {};
+        false: {
+            content: string;
+        };
     };
     overlay: {
         true: {
@@ -76,6 +81,7 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     footer: string;
     title: string;
     description: string;
+    actions: string;
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     transition: {
@@ -99,7 +105,9 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     };
     inset: {
         true: {};
-        false: {};
+        false: {
+            content: string;
+        };
     };
     overlay: {
         true: {
@@ -115,6 +123,7 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     footer: string;
     title: string;
     description: string;
+    actions: string;
     close: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SlideoverVariantProps = VariantProps<typeof slideoverVariants>;
@@ -142,7 +151,9 @@ export declare const slideoverDefaults: {
         };
         inset: {
             true: {};
-            false: {};
+            false: {
+                content: string;
+            };
         };
         overlay: {
             true: {
@@ -158,6 +169,7 @@ export declare const slideoverDefaults: {
         footer: string;
         title: string;
         description: string;
+        actions: string;
         close: string;
     }, {
         transition: {
@@ -181,7 +193,9 @@ export declare const slideoverDefaults: {
         };
         inset: {
             true: {};
-            false: {};
+            false: {
+                content: string;
+            };
         };
         overlay: {
             true: {
@@ -197,6 +211,7 @@ export declare const slideoverDefaults: {
         footer: string;
         title: string;
         description: string;
+        actions: string;
         close: string;
     }>;
     slots: Partial<Record<SlideoverSlots, string>>;

package/dist/Slideover/slideover.variants.js

@@ -9,6 +9,7 @@ export const slideoverVariants = tv({
         footer: 'flex items-center gap-1.5 p-4 sm:px-6',
         title: 'text-on-surface font-semibold',
         description: 'mt-1 text-on-surface-variant text-sm',
+        actions: 'flex items-center gap-1.5 shrink-0',
         close: 'absolute top-4 end-4'
     },
     variants: {
@@ -33,7 +34,9 @@ export const slideoverVariants = tv({
         },
         inset: {
             true: {},
-            false: {}
+            false: {
+                content: 'shadow-lg'
+            }
         },
         overlay: {
             true: {
@@ -97,34 +100,6 @@ export const slideoverVariants = tv({
             class: {
                 content: 'left-4 inset-y-4 rounded-xl shadow-lg ring ring-outline-variant'
             }
-        },
-        {
-            inset: false,
-            side: 'top',
-            class: {
-                content: 'shadow-lg'
-            }
-        },
-        {
-            inset: false,
-            side: 'right',
-            class: {
-                content: 'shadow-lg'
-            }
-        },
-        {
-            inset: false,
-            side: 'bottom',
-            class: {
-                content: 'shadow-lg'
-            }
-        },
-        {
-            inset: false,
-            side: 'left',
-            class: {
-                content: 'shadow-lg'
-            }
         }
     ],
     defaultVariants: {

package/dist/Slider/Slider.svelte

@@ -0,0 +1,135 @@
+<script lang="ts" module>
+    import type { SliderProps } from './slider.types.js'
+
+    export type Props = SliderProps
+</script>
+
+<script lang="ts">
+    import { Slider, useId } from 'bits-ui'
+    import { getContext } from 'svelte'
+    import { sliderVariants, sliderDefaults } from './slider.variants.js'
+    import { getComponentConfig } from '../config.js'
+    import type { FormFieldProps } from '../FormField/form-field.types.js'
+
+    const config = getComponentConfig('slider', sliderDefaults)
+
+    let {
+        ref = $bindable(null),
+        id,
+        value = $bindable(0),
+        onValueChange,
+        onValueCommit,
+        min = 0,
+        max = 100,
+        step = 1,
+        orientation = config.defaultVariants.orientation,
+        disabled = false,
+        autoSort = true,
+        dir,
+        thumbPositioning,
+        trackPadding,
+        color = config.defaultVariants.color,
+        size,
+        tooltip = false,
+        name,
+        class: className,
+        ui,
+        ...restProps
+    }: Props = $props()
+
+    const formFieldContext = getContext<
+        | {
+              name?: string
+              size: NonNullable<FormFieldProps['size']>
+              error?: string | boolean
+              ariaId: string
+          }
+        | undefined
+    >('formField')
+
+    const autoId = useId()
+    const hasError = $derived(
+        formFieldContext?.error !== undefined && formFieldContext?.error !== false
+    )
+    const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
+    const resolvedName = $derived(name ?? formFieldContext?.name)
+    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
+    const resolvedColor = $derived(hasError ? 'error' : color)
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
+
+    const asArray = $derived(Array.isArray(value) ? value : [value ?? min])
+    const isMultiple = $derived(Array.isArray(value))
+
+    function handleValueChange(v: number[]) {
+        value = isMultiple ? v : (v[0] ?? min)
+        onValueChange?.(value)
+    }
+
+    function handleValueCommit(v: number[]) {
+        onValueCommit?.(isMultiple ? v : (v[0] ?? min))
+    }
+
+    const slots = $derived(
+        sliderVariants({ color: resolvedColor, size: resolvedSize, orientation, disabled })
+    )
+
+    const classes = $derived.by(() => {
+        const u = ui ?? {}
+        return {
+            root: slots.root({ class: [config.slots.root, className, u.root] }),
+            base: slots.base({ class: [config.slots.base, u.base] }),
+            track: slots.track({ class: [config.slots.track, u.track] }),
+            range: slots.range({ class: [config.slots.range, u.range] }),
+            thumb: slots.thumb({ class: [config.slots.thumb, u.thumb] }),
+            tooltip: slots.tooltip({ class: [config.slots.tooltip, u.tooltip] })
+        }
+    })
+</script>
+
+<div bind:this={ref} class={classes.root} {...restProps}>
+    {#if resolvedName}
+        {#each asArray as v, i (i)}
+            <input type="hidden" name={resolvedName} value={v} />
+        {/each}
+    {/if}
+
+    <Slider.Root
+        type="multiple"
+        id={resolvedId}
+        value={asArray}
+        {min}
+        {max}
+        {step}
+        {disabled}
+        {orientation}
+        {autoSort}
+        {dir}
+        {thumbPositioning}
+        {trackPadding}
+        aria-describedby={ariaDescribedBy}
+        onValueChange={handleValueChange}
+        onValueCommit={handleValueCommit}
+        class={classes.base}
+    >
+        {#snippet children({ thumbItems })}
+            <span data-slider-track class={classes.track}>
+                <Slider.Range class={classes.range} />
+            </span>
+
+            {#each thumbItems as item (item.index)}
+                <Slider.Thumb index={item.index} class={classes.thumb} />
+                {#if tooltip}
+                    <Slider.ThumbLabel index={item.index} class={classes.tooltip}>
+                        {item.value}
+                    </Slider.ThumbLabel>
+                {/if}
+            {/each}
+        {/snippet}
+    </Slider.Root>
+</div>

package/dist/Slider/Slider.svelte.d.ts

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

package/dist/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Slider } from './Slider.svelte';
+export type { SliderProps } from './slider.types.js';

package/dist/Slider/index.js

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

package/dist/Slider/slider.types.d.ts

@@ -0,0 +1,55 @@
+import type { Slider as SliderPrimitive } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { SliderVariantProps, SliderSlots } from './slider.variants.js';
+export type SliderProps = Pick<SliderPrimitive.RootProps, 'dir' | 'orientation' | 'disabled' | 'min' | 'max' | 'step' | 'autoSort' | 'thumbPositioning' | 'trackPadding'> & Omit<HTMLAttributes<HTMLElement>, 'class' | 'children' | 'dir'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The HTML id attribute forwarded to the slider root element.
+     */
+    id?: string;
+    /**
+     * The current value. Use `number` for a single thumb, `number[]` for a range slider.
+     * Supports two-way binding with `bind:value`.
+     * @default 0
+     */
+    value?: number | number[];
+    /**
+     * Callback fired continuously while the user drags a thumb.
+     */
+    onValueChange?: (value: number | number[]) => void;
+    /**
+     * Callback fired once when the user releases the thumb.
+     */
+    onValueCommit?: (value: number | number[]) => void;
+    /**
+     * Color scheme of the slider.
+     * @default 'primary'
+     */
+    color?: NonNullable<SliderVariantProps['color']>;
+    /**
+     * Size of the slider track and thumbs.
+     * @default 'md'
+     */
+    size?: NonNullable<SliderVariantProps['size']>;
+    /**
+     * Show a floating value label above each thumb.
+     * @default false
+     */
+    tooltip?: boolean;
+    /**
+     * The name attribute for hidden inputs used in form submission.
+     */
+    name?: string;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific slider slots.
+     */
+    ui?: Partial<Record<SliderSlots, ClassNameValue>>;
+};

package/dist/Slider/slider.types.js

@@ -0,0 +1 @@
+export {};