svelora 2.1.0

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

@@ -0,0 +1,298 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const slideoverVariants: import("tailwind-variants").TVReturnType<{
+    transition: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+        };
+        scale: {
+            overlay: string;
+            content: string;
+        };
+    };
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
+    inset: {
+        true: {};
+        false: {
+            content: string;
+        };
+    };
+    overlay: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    wrapper: string;
+    body: string;
+    footer: string;
+    title: string;
+    description: string;
+    actions: string;
+    close: string;
+}, undefined, {
+    transition: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+        };
+        scale: {
+            overlay: string;
+            content: string;
+        };
+    };
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
+    inset: {
+        true: {};
+        false: {
+            content: string;
+        };
+    };
+    overlay: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    wrapper: string;
+    body: string;
+    footer: string;
+    title: string;
+    description: string;
+    actions: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    transition: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+        };
+        scale: {
+            overlay: string;
+            content: string;
+        };
+    };
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
+    inset: {
+        true: {};
+        false: {
+            content: string;
+        };
+    };
+    overlay: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    wrapper: string;
+    body: string;
+    footer: string;
+    title: string;
+    description: string;
+    actions: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SlideoverVariantProps = VariantProps<typeof slideoverVariants>;
+export type SlideoverSlots = keyof ReturnType<typeof slideoverVariants>;
+export declare const slideoverDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        transition: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
+                overlay: string;
+            };
+            scale: {
+                overlay: string;
+                content: string;
+            };
+        };
+        side: {
+            top: {
+                content: string;
+            };
+            right: {
+                content: string;
+            };
+            bottom: {
+                content: string;
+            };
+            left: {
+                content: string;
+            };
+        };
+        size: {
+            sm: {};
+            md: {};
+            lg: {};
+            xl: {};
+            full: {};
+        };
+        inset: {
+            true: {};
+            false: {
+                content: string;
+            };
+        };
+        overlay: {
+            true: {
+                overlay: string;
+            };
+        };
+    }, {
+        overlay: string;
+        content: string;
+        header: string;
+        wrapper: string;
+        body: string;
+        footer: string;
+        title: string;
+        description: string;
+        actions: string;
+        close: string;
+    }, {
+        transition: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
+                overlay: string;
+            };
+            scale: {
+                overlay: string;
+                content: string;
+            };
+        };
+        side: {
+            top: {
+                content: string;
+            };
+            right: {
+                content: string;
+            };
+            bottom: {
+                content: string;
+            };
+            left: {
+                content: string;
+            };
+        };
+        size: {
+            sm: {};
+            md: {};
+            lg: {};
+            xl: {};
+            full: {};
+        };
+        inset: {
+            true: {};
+            false: {
+                content: string;
+            };
+        };
+        overlay: {
+            true: {
+                overlay: string;
+            };
+        };
+    }, {
+        overlay: string;
+        content: string;
+        header: string;
+        wrapper: string;
+        body: string;
+        footer: string;
+        title: string;
+        description: string;
+        actions: string;
+        close: string;
+    }>;
+    slots: Partial<Record<SlideoverSlots, string>>;
+};

package/dist/Slideover/slideover.variants.js

@@ -0,0 +1,145 @@
+import { tv } from 'tailwind-variants';
+export const slideoverVariants = tv({
+    slots: {
+        overlay: 'fixed inset-0 z-50',
+        content: 'z-50 bg-surface-container-low divide-y divide-outline-variant flex flex-col focus:outline-none',
+        header: 'flex items-center gap-1.5 p-4 sm:px-6 min-h-16',
+        wrapper: '',
+        body: 'flex-1 overflow-y-auto p-4 sm:p-6',
+        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: {
+        transition: {
+            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'
+            },
+            right: {
+                content: 'fixed right-0 inset-y-0 w-full'
+            },
+            bottom: {
+                content: 'fixed bottom-0 inset-x-0'
+            },
+            left: {
+                content: 'fixed left-0 inset-y-0 w-full'
+            }
+        },
+        size: {
+            sm: {},
+            md: {},
+            lg: {},
+            xl: {},
+            full: {}
+        },
+        inset: {
+            true: {},
+            false: {
+                content: 'shadow-lg'
+            }
+        },
+        overlay: {
+            true: {
+                overlay: 'bg-[var(--scrim-bg)] backdrop-blur-sm'
+            }
+        }
+    },
+    compoundVariants: [
+        // Side-specific slide animations
+        {
+            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: '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: '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: '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 rounded-xl shadow-lg ring ring-outline-variant'
+            }
+        },
+        {
+            inset: true,
+            side: 'right',
+            class: {
+                content: 'right-4 inset-y-4 rounded-xl shadow-lg ring ring-outline-variant'
+            }
+        },
+        {
+            inset: true,
+            side: 'bottom',
+            class: {
+                content: 'bottom-4 inset-x-4 rounded-xl shadow-lg ring ring-outline-variant'
+            }
+        },
+        {
+            inset: true,
+            side: 'left',
+            class: {
+                content: 'left-4 inset-y-4 rounded-xl shadow-lg ring ring-outline-variant'
+            }
+        }
+    ],
+    defaultVariants: {
+        transition: 'slide',
+        side: 'right',
+        size: 'md',
+        inset: false,
+        overlay: true
+    }
+});
+export const slideoverDefaults = {
+    defaultVariants: slideoverVariants.defaultVariants,
+    slots: {}
+};

package/dist/Slider/Slider.svelte

@@ -0,0 +1,129 @@
+<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 { getComponentConfig } from '../config.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
+    import { sliderDefaults, sliderVariants } from './slider.variants.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 = useFormField()
+    const emit = useFormFieldEmit()
+
+    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)
+        emit.onInput()
+        onValueChange?.(value)
+    }
+
+    function handleValueCommit(v: number[]) {
+        emit.onChange()
+        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, {}, "value" | "ref">;
+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 { SliderSlots, SliderVariantProps } 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 {};