svelora 3.0.1 → 3.0.2

package/dist/Stepper/Stepper.svelte

@@ -1,150 +1,157 @@
-<script lang="ts" module>import type { StepperProps } from './stepper.types.js';
-export type Props = StepperProps;
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import { untrack } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-import { getComponentConfig } from '../config.js';
-import Icon from '../Icon/Icon.svelte';
-import type { StepperApi, StepperItem, StepperItemState } from './stepper.types.js';
-import { stepperDefaults, stepperVariants } from './stepper.variants.js';
-
-const config = getComponentConfig('stepper', stepperDefaults);
-let { ref = $bindable(null), as = 'div', items = [], value = $bindable(), defaultValue, onValueChange, api = $bindable(), linear = true, disabled = false, orientation = config.defaultVariants.orientation ?? 'horizontal', size = config.defaultVariants.size ?? 'md', color = config.defaultVariants.color ?? 'primary', content: showContent = true, class: className, ui, indicator: indicatorSlot, titleSlot, descriptionSlot, body, ...restProps }: Props = $props();
+<script lang="ts">import { untrack } from "svelte";
+import { getComponentConfig } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { stepperDefaults, stepperVariants } from "./stepper.variants.js";
+const config = getComponentConfig("stepper", stepperDefaults);
+let { ref = $bindable(null), as = "div", items = [], value = $bindable(), defaultValue, onValueChange, api = $bindable(), linear = true, disabled = false, orientation = config.defaultVariants.orientation ?? "horizontal", size = config.defaultVariants.size ?? "md", color = config.defaultVariants.color ?? "primary", content: showContent = true, class: className, ui, indicator: indicatorSlot, titleSlot, descriptionSlot, body, ...restProps } = $props();
 if (value === undefined) {
-    value = untrack(() => defaultValue ?? items[0]?.value ?? 0);
+	value = untrack(() => defaultValue ?? items[0]?.value ?? 0);
 }
-let triggers: (HTMLButtonElement | null)[] = $state([]);
-function getItemValue(item: StepperItem, index: number): string | number {
-    return item.value ?? index;
+let triggers = $state([]);
+function getItemValue(item, index) {
+	return item.value ?? index;
 }
 const activeIndex = $derived(items.findIndex((item, i) => getItemValue(item, i) === value));
-function getState(index: number): StepperItemState {
-    if (activeIndex === -1)
-        return 'pending';
-    if (index === activeIndex)
-        return 'active';
-    return index < activeIndex ? 'completed' : 'pending';
+function getState(index) {
+	if (activeIndex === -1) return "pending";
+	if (index === activeIndex) return "active";
+	return index < activeIndex ? "completed" : "pending";
 }
-function canActivate(index: number): boolean {
-    if (disabled || items[index]?.disabled)
-        return false;
-    if (!linear)
-        return true;
-    return index <= activeIndex + 1;
+function canActivate(index) {
+	if (disabled || items[index]?.disabled) return false;
+	if (!linear) return true;
+	return index <= activeIndex + 1;
 }
-function setValue(next: string | number) {
-    if (next === value)
-        return;
-    value = next;
-    onValueChange?.(next);
+function setValue(next) {
+	if (next === value) return;
+	value = next;
+	onValueChange?.(next);
 }
-function handleClick(item: StepperItem, index: number) {
-    if (!canActivate(index))
-        return;
-    setValue(getItemValue(item, index));
+function handleClick(item, index) {
+	if (!canActivate(index)) return;
+	setValue(getItemValue(item, index));
 }
-function findEnabled(start: number, dir: 1 | -1): number {
-    for (let i = start; i >= 0 && i < items.length; i += dir) {
-        if (!items[i]?.disabled)
-            return i;
-    }
-    return -1;
+function findEnabled(start, dir) {
+	for (let i = start; i >= 0 && i < items.length; i += dir) {
+		if (!items[i]?.disabled) return i;
+	}
+	return -1;
 }
-function handleKeydown(e: KeyboardEvent, index: number) {
-    const horizontal = orientation === 'horizontal';
-    const nextKey = horizontal ? 'ArrowRight' : 'ArrowDown';
-    const prevKey = horizontal ? 'ArrowLeft' : 'ArrowUp';
-    let target = -1;
-    if (e.key === nextKey)
-        target = findEnabled(index + 1, 1);
-    else if (e.key === prevKey)
-        target = findEnabled(index - 1, -1);
-    else if (e.key === 'Home')
-        target = findEnabled(0, 1);
-    else if (e.key === 'End')
-        target = findEnabled(items.length - 1, -1);
-    else
-        return;
-    e.preventDefault();
-    if (target >= 0)
-        triggers[target]?.focus();
+function handleKeydown(e, index) {
+	const horizontal = orientation === "horizontal";
+	const nextKey = horizontal ? "ArrowRight" : "ArrowDown";
+	const prevKey = horizontal ? "ArrowLeft" : "ArrowUp";
+	let target = -1;
+	if (e.key === nextKey) target = findEnabled(index + 1, 1);
+	else if (e.key === prevKey) target = findEnabled(index - 1, -1);
+	else if (e.key === "Home") target = findEnabled(0, 1);
+	else if (e.key === "End") target = findEnabled(items.length - 1, -1);
+	else return;
+	e.preventDefault();
+	if (target >= 0) triggers[target]?.focus();
 }
-const apiInstance: StepperApi = {
-    next() {
-        if (activeIndex >= items.length - 1)
-            return;
-        const target = items[activeIndex + 1];
-        if (!target)
-            return;
-        setValue(getItemValue(target, activeIndex + 1));
-    },
-    prev() {
-        if (activeIndex <= 0)
-            return;
-        const target = items[activeIndex - 1];
-        if (!target)
-            return;
-        setValue(getItemValue(target, activeIndex - 1));
-    },
-    goTo(next) {
-        setValue(next);
-    },
-    get hasNext() {
-        return activeIndex >= 0 && activeIndex < items.length - 1;
-    },
-    get hasPrev() {
-        return activeIndex > 0;
-    },
-    get activeIndex() {
-        return activeIndex;
-    }
+const apiInstance = {
+	next() {
+		if (activeIndex >= items.length - 1) return;
+		const target = items[activeIndex + 1];
+		if (!target) return;
+		setValue(getItemValue(target, activeIndex + 1));
+	},
+	prev() {
+		if (activeIndex <= 0) return;
+		const target = items[activeIndex - 1];
+		if (!target) return;
+		setValue(getItemValue(target, activeIndex - 1));
+	},
+	goTo(next) {
+		setValue(next);
+	},
+	get hasNext() {
+		return activeIndex >= 0 && activeIndex < items.length - 1;
+	},
+	get hasPrev() {
+		return activeIndex > 0;
+	},
+	get activeIndex() {
+		return activeIndex;
+	}
 };
 api = apiInstance;
-const variantSlots = $derived(stepperVariants({ orientation, size, color }));
-type ItemUi = StepperItem['ui'];
+const variantSlots = $derived(stepperVariants({
+	orientation,
+	size,
+	color
+}));
 const classes = $derived.by(() => {
-    const c = config.slots;
-    const slots = variantSlots;
-    const u = ui ?? {};
-    const _item = slots.item({ class: [c.item, u.item] });
-    const _trigger = slots.trigger({ class: [c.trigger, u.trigger] });
-    const _container = slots.container({ class: [c.container, u.container] });
-    const _indicator = slots.indicator({ class: [c.indicator, u.indicator] });
-    const _separator = slots.separator({ class: [c.separator, u.separator] });
-    const _wrapper = slots.wrapper({ class: [c.wrapper, u.wrapper] });
-    const _title = slots.title({ class: [c.title, u.title] });
-    const _description = slots.description({ class: [c.description, u.description] });
-    const _content = slots.content({ class: [c.content, u.content] });
-    return {
-        root: slots.root({ class: [c.root, className, u.root] }),
-        list: slots.list({ class: [c.list, u.list] }),
-        item: (itemClass: ClassNameValue | undefined, itemUi: ItemUi | undefined) => itemClass || itemUi
-            ? slots.item({ class: [c.item, u.item, itemUi?.item, itemClass] })
-            : _item,
-        trigger: (itemUi: ItemUi | undefined) => itemUi
-            ? slots.trigger({ class: [c.trigger, u.trigger, itemUi.trigger] })
-            : _trigger,
-        container: (itemUi: ItemUi | undefined) => itemUi
-            ? slots.container({ class: [c.container, u.container, itemUi.container] })
-            : _container,
-        indicator: (itemUi: ItemUi | undefined) => itemUi
-            ? slots.indicator({ class: [c.indicator, u.indicator, itemUi.indicator] })
-            : _indicator,
-        separator: (itemUi: ItemUi | undefined) => itemUi
-            ? slots.separator({ class: [c.separator, u.separator, itemUi.separator] })
-            : _separator,
-        wrapper: (itemUi: ItemUi | undefined) => itemUi
-            ? slots.wrapper({ class: [c.wrapper, u.wrapper, itemUi.wrapper] })
-            : _wrapper,
-        title: (itemUi: ItemUi | undefined) => itemUi ? slots.title({ class: [c.title, u.title, itemUi.title] }) : _title,
-        description: (itemUi: ItemUi | undefined) => itemUi
-            ? slots.description({
-                class: [c.description, u.description, itemUi.description]
-            })
-            : _description,
-        content: (itemUi: ItemUi | undefined) => itemUi ? slots.content({ class: [c.content, u.content, itemUi.content] }) : _content
-    };
+	const c = config.slots;
+	const slots = variantSlots;
+	const u = ui ?? {};
+	const _item = slots.item({ class: [c.item, u.item] });
+	const _trigger = slots.trigger({ class: [c.trigger, u.trigger] });
+	const _container = slots.container({ class: [c.container, u.container] });
+	const _indicator = slots.indicator({ class: [c.indicator, u.indicator] });
+	const _separator = slots.separator({ class: [c.separator, u.separator] });
+	const _wrapper = slots.wrapper({ class: [c.wrapper, u.wrapper] });
+	const _title = slots.title({ class: [c.title, u.title] });
+	const _description = slots.description({ class: [c.description, u.description] });
+	const _content = slots.content({ class: [c.content, u.content] });
+	return {
+		root: slots.root({ class: [
+			c.root,
+			className,
+			u.root
+		] }),
+		list: slots.list({ class: [c.list, u.list] }),
+		item: (itemClass, itemUi) => itemClass || itemUi ? slots.item({ class: [
+			c.item,
+			u.item,
+			itemUi?.item,
+			itemClass
+		] }) : _item,
+		trigger: (itemUi) => itemUi ? slots.trigger({ class: [
+			c.trigger,
+			u.trigger,
+			itemUi.trigger
+		] }) : _trigger,
+		container: (itemUi) => itemUi ? slots.container({ class: [
+			c.container,
+			u.container,
+			itemUi.container
+		] }) : _container,
+		indicator: (itemUi) => itemUi ? slots.indicator({ class: [
+			c.indicator,
+			u.indicator,
+			itemUi.indicator
+		] }) : _indicator,
+		separator: (itemUi) => itemUi ? slots.separator({ class: [
+			c.separator,
+			u.separator,
+			itemUi.separator
+		] }) : _separator,
+		wrapper: (itemUi) => itemUi ? slots.wrapper({ class: [
+			c.wrapper,
+			u.wrapper,
+			itemUi.wrapper
+		] }) : _wrapper,
+		title: (itemUi) => itemUi ? slots.title({ class: [
+			c.title,
+			u.title,
+			itemUi.title
+		] }) : _title,
+		description: (itemUi) => itemUi ? slots.description({ class: [
+			c.description,
+			u.description,
+			itemUi.description
+		] }) : _description,
+		content: (itemUi) => itemUi ? slots.content({ class: [
+			c.content,
+			u.content,
+			itemUi.content
+		] }) : _content
+	};
 });
 </script>
 

package/dist/Stepper/Stepper.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { StepperProps } from './stepper.types.js';
 export type Props = StepperProps;
-declare const Stepper: import("svelte").Component<StepperProps, {}, "value" | "ref" | "api">;
+declare const Stepper: import("svelte").Component<StepperProps, {}, "ref" | "value" | "api">;
 type Stepper = ReturnType<typeof Stepper>;
 export default Stepper;

package/dist/Switch/Switch.svelte

@@ -1,103 +1,67 @@
-<script lang="ts" module>
-    import type { SwitchProps } from './switch.types.js'
-
-    export type Props = SwitchProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Label, Switch, useId } from 'bits-ui'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { switchDefaults, switchVariants } from './switch.variants.js'
-
-    const config = getComponentConfig('switch', switchDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        checked = $bindable(false),
-        onCheckedChange,
-        ui,
-        id,
-        name,
-        value,
-        color = config.defaultVariants.color,
-        size,
-        disabled = false,
-        required = false,
-        loading = false,
-        loadingIcon = icons.loading,
-        checkedIcon,
-        uncheckedIcon,
-        label,
-        description,
-        labelSlot,
-        descriptionSlot,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const autoId = useId()
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const isDisabled = $derived(disabled || loading)
-
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const hasCheckedIcon = $derived(loading || !!checkedIcon)
-    const hasUncheckedIcon = $derived(loading || !!uncheckedIcon)
-    const checkedIconName = $derived(loading ? loadingIcon : checkedIcon)
-    const uncheckedIconName = $derived(loading ? loadingIcon : uncheckedIcon)
-
-    const variantOpts = $derived({
-        color: resolvedColor,
-        size: resolvedSize,
-        loading,
-        required,
-        disabled: isDisabled ? true : undefined
-    })
-
-    const slots = $derived(switchVariants(variantOpts))
-
-    const classes = $derived({
-        root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-        base: slots.base({ class: [config.slots.base, ui?.base] }),
-        container: slots.container({ class: [config.slots.container, ui?.container] }),
-        thumb: slots.thumb({ class: [config.slots.thumb, ui?.thumb] }),
-        wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-        label: slots.label({ class: [config.slots.label, ui?.label] }),
-        description: slots.description({ class: [config.slots.description, ui?.description] })
-    })
-
-    const iconClasses = $derived.by(() => {
-        if (!hasCheckedIcon && !hasUncheckedIcon)
-            return { checked: undefined, unchecked: undefined }
-        const iconUiClass = [config.slots.icon, ui?.icon]
-        return {
-            checked: hasCheckedIcon
-                ? slots.icon({ class: iconUiClass, checked: true, unchecked: loading })
-                : undefined,
-            unchecked:
-                hasUncheckedIcon && !loading
-                    ? slots.icon({ class: iconUiClass, unchecked: true })
-                    : undefined
-        }
-    })
+<script lang="ts">import { Label, Switch, useId } from "bits-ui";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import Icon from "../Icon/Icon.svelte";
+import { switchDefaults, switchVariants } from "./switch.variants.js";
+const config = getComponentConfig("switch", switchDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), checked = $bindable(false), onCheckedChange, ui, id, name, value, color = config.defaultVariants.color, size, disabled = false, required = false, loading = false, loadingIcon = icons.loading, checkedIcon, uncheckedIcon, label, description, labelSlot, descriptionSlot, class: className, ...restProps } = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const hasError = $derived(formFieldContext?.error !== undefined && formFieldContext?.error !== false);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const autoId = useId();
+const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const isDisabled = $derived(disabled || loading);
+const ariaDescribedBy = $derived(!formFieldContext ? undefined : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`);
+const hasCheckedIcon = $derived(loading || !!checkedIcon);
+const hasUncheckedIcon = $derived(loading || !!uncheckedIcon);
+const checkedIconName = $derived(loading ? loadingIcon : checkedIcon);
+const uncheckedIconName = $derived(loading ? loadingIcon : uncheckedIcon);
+const variantOpts = $derived({
+	color: resolvedColor,
+	size: resolvedSize,
+	loading,
+	required,
+	disabled: isDisabled ? true : undefined
+});
+const slots = $derived(switchVariants(variantOpts));
+const classes = $derived({
+	root: slots.root({ class: [
+		config.slots.root,
+		className,
+		ui?.root
+	] }),
+	base: slots.base({ class: [config.slots.base, ui?.base] }),
+	container: slots.container({ class: [config.slots.container, ui?.container] }),
+	thumb: slots.thumb({ class: [config.slots.thumb, ui?.thumb] }),
+	wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+	label: slots.label({ class: [config.slots.label, ui?.label] }),
+	description: slots.description({ class: [config.slots.description, ui?.description] })
+});
+const iconClasses = $derived.by(() => {
+	if (!hasCheckedIcon && !hasUncheckedIcon) return {
+		checked: undefined,
+		unchecked: undefined
+	};
+	const iconUiClass = [config.slots.icon, ui?.icon];
+	return {
+		checked: hasCheckedIcon ? slots.icon({
+			class: iconUiClass,
+			checked: true,
+			unchecked: loading
+		}) : undefined,
+		unchecked: hasUncheckedIcon && !loading ? slots.icon({
+			class: iconUiClass,
+			unchecked: true
+		}) : undefined
+	};
+});
 </script>
 
 <div {...restProps} bind:this={ref} class={classes.root}>