svelora 3.0.1 → 3.0.2

package/dist/SelectMenu/SelectMenuFormFieldTestWrapper.svelte

@@ -1,9 +1,6 @@
-<script lang="ts">import FormField from '../FormField/FormField.svelte';
-import SelectMenu from './SelectMenu.svelte';
-import type { SelectMenuItemType } from './select-menu.types.js';
-let { items = [] }: {
-    items?: SelectMenuItemType[];
-} = $props();
+<script lang="ts">import FormField from "../FormField/FormField.svelte";
+import SelectMenu from "./SelectMenu.svelte";
+let { items = [] } = $props();
 </script>
 
 <FormField name="fruit" label="Fruit">

package/dist/Separator/Separator.svelte

@@ -1,49 +1,34 @@
-<script lang="ts" module>
-    import type { SeparatorProps } from './separator.types.js'
-
-    export type Props = SeparatorProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Separator } from 'bits-ui'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { separatorDefaults, separatorVariants } from './separator.variants.js'
-
-    const config = getComponentConfig('separator', separatorDefaults)
-
-    let {
-        ref = $bindable(null),
-        ui,
-        label,
-        icon,
-        avatar,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        type = config.defaultVariants.type,
-        orientation = config.defaultVariants.orientation,
-        position = config.defaultVariants.position,
-        decorative = false,
-        class: className,
-        content,
-        ...restProps
-    }: Props = $props()
-
-    const hasContent = $derived(!!label || !!icon || !!avatar || !!content)
-
-    const classes = $derived.by(() => {
-        const slots = separatorVariants({ color, size, type, orientation })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            border: slots.border({ class: [config.slots.border, ui?.border] }),
-            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] }),
-            label: slots.label({ class: [config.slots.label, ui?.label] })
-        }
-    })
+<script lang="ts">import { Separator } from "bits-ui";
+import Avatar from "../Avatar/Avatar.svelte";
+import { getComponentConfig } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { separatorDefaults, separatorVariants } from "./separator.variants.js";
+const config = getComponentConfig("separator", separatorDefaults);
+let { ref = $bindable(null), ui, label, icon, avatar, color = config.defaultVariants.color, size = config.defaultVariants.size, type = config.defaultVariants.type, orientation = config.defaultVariants.orientation, position = config.defaultVariants.position, decorative = false, class: className, content, ...restProps } = $props();
+const hasContent = $derived(!!label || !!icon || !!avatar || !!content);
+const classes = $derived.by(() => {
+	const slots = separatorVariants({
+		color,
+		size,
+		type,
+		orientation
+	});
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			ui?.root
+		] }),
+		border: slots.border({ class: [config.slots.border, ui?.border] }),
+		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] }),
+		label: slots.label({ class: [config.slots.label, ui?.label] })
+	};
+});
 </script>
 
 <Separator.Root bind:ref class={classes.root} {orientation} {decorative} {...restProps}>

package/dist/Skeleton/Skeleton.svelte

@@ -1,28 +1,16 @@
-<script lang="ts" module>
-    import type { SkeletonProps } from './skeleton.types.js'
-
-    export type Props = SkeletonProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { getComponentConfig } from '../config.js'
-    import { skeletonDefaults, skeletonVariants } from './skeleton.variants.js'
-
-    const config = getComponentConfig('skeleton', skeletonDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        class: className,
-        children,
-        ...restProps
-    }: Props = $props()
-
-    const slots = skeletonVariants()
-    const classes = $derived({
-        root: slots.root({ class: [config.slots.root, className, ui?.root] })
-    })
+<script lang="ts">import { getComponentConfig } from "../config.js";
+import { skeletonDefaults, skeletonVariants } from "./skeleton.variants.js";
+const config = getComponentConfig("skeleton", skeletonDefaults);
+let { ref = $bindable(null), as = "div", ui, class: className, children, ...restProps } = $props();
+const slots = skeletonVariants();
+const classes = $derived({ root: slots.root({ class: [
+	config.slots.root,
+	className,
+	ui?.root
+] }) });
 </script>
 
 <svelte:element

package/dist/Slideover/Slideover.svelte

@@ -1,111 +1,57 @@
-<script lang="ts" module>
-    import type { SlideoverProps } from './slideover.types.js'
-
-    export type Props = SlideoverProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Dialog } from 'bits-ui'
-    import Button from '../Button/Button.svelte'
-    import { getComponentConfig } from '../config.js'
-    import { slideoverDefaults, slideoverVariants } from './slideover.variants.js'
-
-    const config = getComponentConfig('slideover', slideoverDefaults)
-
-    let {
-        open = $bindable(false),
-        onOpenChange,
-        onOpenChangeComplete,
-        trapFocus = true,
-        preventScroll = true,
-        onOpenAutoFocus,
-        onCloseAutoFocus,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        restoreScrollDelay,
-        title,
-        description,
-        side = config.defaultVariants.side ?? 'right',
-        overlay: showOverlay = config.defaultVariants.overlay ?? true,
-        transition = config.defaultVariants.transition ?? 'slide',
-        size = config.defaultVariants.size ?? 'md',
-        inset = config.defaultVariants.inset ?? false,
-        portal = true,
-        close: closeProp = true,
-        dismissible = true,
-        ui,
-        class: className,
-        children,
-        content: contentSlot,
-        header: headerSlot,
-        titleSlot,
-        descriptionSlot,
-        actions: actionsSlot,
-        body: bodySlot,
-        footer: footerSlot,
-        closeSlot
-    }: Props = $props()
-
-    const showClose = $derived(!!closeProp)
-    const closeProps = $derived(typeof closeProp === 'object' ? closeProp : {})
-
-    const hasTitle = $derived(!!title || !!titleSlot)
-    const hasDescription = $derived(!!description || !!descriptionSlot)
-    const hasHeading = $derived(hasTitle || hasDescription)
-    const hasHeader = $derived(
-        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
-    )
-
-    const resolvedTransition = $derived(
-        transition === false ? 'none' : transition === true ? 'slide' : transition
-    )
-
-    const variantSlots = $derived(
-        slideoverVariants({
-            transition: resolvedTransition,
-            side,
-            size,
-            inset,
-            overlay: showOverlay
-        })
-    )
-
-    const classes = $derived({
-        overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
-        header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
-        wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-        title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
-        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] })
-    })
-
-    const contentProps = $derived.by(() => {
-        const behavior = dismissible ? ('close' as const) : ('ignore' as const)
-        return {
-            trapFocus,
-            preventScroll,
-            escapeKeydownBehavior: behavior,
-            interactOutsideBehavior: behavior,
-            onOpenAutoFocus,
-            onCloseAutoFocus,
-            onEscapeKeydown,
-            onInteractOutside,
-            forceMount,
-            restoreScrollDelay
-        }
-    })
-
-    function handleOpenChange(value: boolean) {
-        open = value
-        onOpenChange?.(value)
-    }
+<script lang="ts">import { Dialog } from "bits-ui";
+import Button from "../Button/Button.svelte";
+import { getComponentConfig } from "../config.js";
+import { slideoverDefaults, slideoverVariants } from "./slideover.variants.js";
+const config = getComponentConfig("slideover", slideoverDefaults);
+let { open = $bindable(false), onOpenChange, onOpenChangeComplete, trapFocus = true, preventScroll = true, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeydown, onInteractOutside, forceMount, restoreScrollDelay, title, description, side = config.defaultVariants.side ?? "right", overlay: showOverlay = config.defaultVariants.overlay ?? true, transition = config.defaultVariants.transition ?? "slide", size = config.defaultVariants.size ?? "md", inset = config.defaultVariants.inset ?? false, portal = true, close: closeProp = true, dismissible = true, ui, class: className, children, content: contentSlot, header: headerSlot, titleSlot, descriptionSlot, actions: actionsSlot, body: bodySlot, footer: footerSlot, closeSlot } = $props();
+const showClose = $derived(!!closeProp);
+const closeProps = $derived(typeof closeProp === "object" ? closeProp : {});
+const hasTitle = $derived(!!title || !!titleSlot);
+const hasDescription = $derived(!!description || !!descriptionSlot);
+const hasHeading = $derived(hasTitle || hasDescription);
+const hasHeader = $derived(!!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot);
+const resolvedTransition = $derived(transition === false ? "none" : transition === true ? "slide" : transition);
+const variantSlots = $derived(slideoverVariants({
+	transition: resolvedTransition,
+	side,
+	size,
+	inset,
+	overlay: showOverlay
+}));
+const classes = $derived({
+	overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
+	content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+	header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
+	wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+	title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
+	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] })
+});
+const contentProps = $derived.by(() => {
+	const behavior = dismissible ? "close" : "ignore";
+	return {
+		trapFocus,
+		preventScroll,
+		escapeKeydownBehavior: behavior,
+		interactOutsideBehavior: behavior,
+		onOpenAutoFocus,
+		onCloseAutoFocus,
+		onEscapeKeydown,
+		onInteractOutside,
+		forceMount,
+		restoreScrollDelay
+	};
+});
+function handleOpenChange(value) {
+	open = value;
+	onOpenChange?.(value);
+}
 </script>
 
 {#snippet titleEl()}

package/dist/Slideover/SlideoverTriggerTestWrapper.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">
-    import Slideover from './Slideover.svelte'
+<script lang="ts">import Slideover from "./Slideover.svelte";
 </script>
 
 <Slideover title="Trigger test" description="D">

package/dist/Slider/Slider.svelte

@@ -1,89 +1,53 @@
-<script lang="ts" module>
-    import type { SliderProps } from './slider.types.js'
-
-    export type Props = SliderProps
+<script lang="ts" module>export {};
 </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 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();
+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) {
+	value = isMultiple ? v : v[0] ?? min;
+	emit.onInput();
+	onValueChange?.(value);
+}
+function handleValueCommit(v) {
+	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}>

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

@@ -1,6 +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">;
+declare const Slider: import("svelte").Component<SliderProps, {}, "ref" | "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;