svelora 3.0.0 → 3.0.2

package/dist/Pagination/Pagination.svelte

@@ -1,97 +1,53 @@
-<script lang="ts" module>
-    import type { PaginationProps } from './pagination.types.js'
-
-    export type Props = PaginationProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Pagination } from 'bits-ui'
-    import { untrack } from 'svelte'
-    import ButtonComponent from '../Button/Button.svelte'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import {
-        activeVariantColorClasses, 
-        paginationDefaults,
-        paginationVariants
-    } from './pagination.variants.js'
-
-    const config = getComponentConfig('pagination', paginationDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        page = $bindable(),
-        defaultPage = 1,
-        total = 0,
-        itemsPerPage = 10,
-        siblingCount = 1,
-        showEdges = false,
-        showControls = true,
-        disabled = false,
-        onPageChange,
-        size = config.defaultVariants.size ?? 'md',
-        variant = config.defaultVariants.variant ?? 'ghost',
-        color = config.defaultVariants.color ?? 'surface',
-        activeColor = config.defaultVariants.activeColor ?? 'primary',
-        activeVariant = config.defaultVariants.activeVariant ?? 'solid',
-        firstIcon = icons.chevronsLeft,
-        prevIcon = icons.chevronLeft,
-        nextIcon = icons.chevronRight,
-        lastIcon = icons.chevronsRight,
-        ellipsisIcon = icons.ellipsis,
-        ui,
-        class: className,
-        firstSlot,
-        prevSlot,
-        nextSlot,
-        lastSlot,
-        ellipsisSlot,
-        itemSlot,
-        ...restProps
-    }: Props = $props()
-
-    if (page === undefined) {
-        page = untrack(() => defaultPage)
-    }
-
-    const totalPages = $derived(Math.max(1, Math.ceil(total / itemsPerPage)))
-    const isFirstPage = $derived(page === 1)
-    const isLastPage = $derived(page === totalPages)
-    const prevDisabled = $derived(disabled || isFirstPage)
-    const nextDisabled = $derived(disabled || isLastPage)
-
-    const variantSlots = $derived(paginationVariants({ size, disabled }))
-    const activeCls = $derived(
-        activeVariantColorClasses[activeVariant]?.[activeColor] ??
-            activeVariantColorClasses.solid.primary
-    )
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className] }),
-        list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
-        item: variantSlots.item({ class: [config.slots.item, activeCls, ui?.item] }),
-        ellipsis: variantSlots.ellipsis({ class: [config.slots.ellipsis, ui?.ellipsis] }),
-        ellipsisIcon: variantSlots.ellipsisIcon({
-            class: [config.slots.ellipsisIcon, ui?.ellipsisIcon]
-        }),
-        first: variantSlots.first({ class: [config.slots.first, ui?.first] }),
-        prev: variantSlots.prev({ class: [config.slots.prev, ui?.prev] }),
-        next: variantSlots.next({ class: [config.slots.next, ui?.next] }),
-        last: variantSlots.last({ class: [config.slots.last, ui?.last] })
-    })
-
-    function handlePageChange(newPage: number) {
-        page = newPage
-        onPageChange?.(newPage)
-    }
-
-    function goToFirst() {
-        if (!isFirstPage) handlePageChange(1)
-    }
-
-    function goToLast() {
-        if (!isLastPage) handlePageChange(totalPages)
-    }
+<script lang="ts">import { Pagination } from "bits-ui";
+import { untrack } from "svelte";
+import ButtonComponent from "../Button/Button.svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { activeVariantColorClasses, paginationDefaults, paginationVariants } from "./pagination.variants.js";
+const config = getComponentConfig("pagination", paginationDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), page = $bindable(), defaultPage = 1, total = 0, itemsPerPage = 10, siblingCount = 1, showEdges = false, showControls = true, disabled = false, onPageChange, size = config.defaultVariants.size ?? "md", variant = config.defaultVariants.variant ?? "ghost", color = config.defaultVariants.color ?? "surface", activeColor = config.defaultVariants.activeColor ?? "primary", activeVariant = config.defaultVariants.activeVariant ?? "solid", firstIcon = icons.chevronsLeft, prevIcon = icons.chevronLeft, nextIcon = icons.chevronRight, lastIcon = icons.chevronsRight, ellipsisIcon = icons.ellipsis, ui, class: className, firstSlot, prevSlot, nextSlot, lastSlot, ellipsisSlot, itemSlot, ...restProps } = $props();
+if (page === undefined) {
+	page = untrack(() => defaultPage);
+}
+const totalPages = $derived(Math.max(1, Math.ceil(total / itemsPerPage)));
+const isFirstPage = $derived(page === 1);
+const isLastPage = $derived(page === totalPages);
+const prevDisabled = $derived(disabled || isFirstPage);
+const nextDisabled = $derived(disabled || isLastPage);
+const variantSlots = $derived(paginationVariants({
+	size,
+	disabled
+}));
+const activeCls = $derived(activeVariantColorClasses[activeVariant]?.[activeColor] ?? activeVariantColorClasses.solid.primary);
+const classes = $derived({
+	root: variantSlots.root({ class: [config.slots.root, className] }),
+	list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
+	item: variantSlots.item({ class: [
+		config.slots.item,
+		activeCls,
+		ui?.item
+	] }),
+	ellipsis: variantSlots.ellipsis({ class: [config.slots.ellipsis, ui?.ellipsis] }),
+	ellipsisIcon: variantSlots.ellipsisIcon({ class: [config.slots.ellipsisIcon, ui?.ellipsisIcon] }),
+	first: variantSlots.first({ class: [config.slots.first, ui?.first] }),
+	prev: variantSlots.prev({ class: [config.slots.prev, ui?.prev] }),
+	next: variantSlots.next({ class: [config.slots.next, ui?.next] }),
+	last: variantSlots.last({ class: [config.slots.last, ui?.last] })
+});
+function handlePageChange(newPage) {
+	page = newPage;
+	onPageChange?.(newPage);
+}
+function goToFirst() {
+	if (!isFirstPage) handlePageChange(1);
+}
+function goToLast() {
+	if (!isLastPage) handlePageChange(totalPages);
+}
 </script>
 
 <Pagination.Root

package/dist/Pagination/pagination.variants.d.ts

@@ -153,8 +153,8 @@ export declare const paginationDefaults: {
         color: "surface";
         activeColor: "primary";
         activeVariant: "solid";
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         disabled?: boolean | undefined;
-        size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
     };
     slots: Partial<Record<PaginationSlots, string>>;
 };

package/dist/PinInput/PinInput.svelte

@@ -1,116 +1,62 @@
-<script lang="ts" module>
-    import type { PinInputProps } from './pin-input.types.js'
-
-    export type Props = PinInputProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { PinInput, 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 { pinInputDefaults, pinInputVariants } from './pin-input.variants.js'
-
-    const config = getComponentConfig('pinInput', pinInputDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        defaultValue = '',
-        value = $bindable(defaultValue),
-        onValueChange,
-        onComplete,
-        length = 5,
-        type = 'text',
-        mask = false,
-        otp = false,
-        disabled = false,
-        required,
-        textalign,
-        pasteTransformer,
-        pushPasswordManagerStrategy,
-        inputId,
-        name,
-        placeholder = '○',
-        autofocus = false,
-        autofocusDelay = 0,
-        highlight = false,
-        loading = false,
-        loadingIcon = icons.loading,
-        fixed = false,
-        color = config.defaultVariants.color,
-        size,
-        variant = config.defaultVariants.variant,
-        class: className,
-        ui,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const isDisabled = $derived(disabled || loading)
-
-    const autoInputId = useId()
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedInputId = $derived(inputId ?? formFieldContext?.ariaId ?? autoInputId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const resolvedHighlight = $derived(hasError || highlight)
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const resolvedPasteTransformer = $derived(
-        pasteTransformer ??
-            (type === 'number' ? (text: string) => text.replace(/\D/g, '') : undefined)
-    )
-
-    function handleValueChange(v: string) {
-        const filtered = type === 'number' ? v.replace(/\D/g, '') : v
-        value = filtered
-        emit.onInput()
-        onValueChange?.(filtered)
-    }
-
-    function handleComplete(v: string) {
-        emit.onChange()
-        onComplete?.(v)
-    }
-
-    const slots = $derived(
-        pinInputVariants({
-            variant,
-            color: resolvedColor,
-            size: resolvedSize,
-            highlight: resolvedHighlight,
-            fixed,
-            disabled: isDisabled
-        })
-    )
-
-    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] })
-        }
-    })
-
-    $effect(() => {
-        if (!autofocus) return
-        const input = ref?.querySelector('[data-pin-input-input]') as HTMLInputElement | null
-        if (!input) return
-        const timer = setTimeout(() => input.focus(), autofocusDelay)
-        return () => clearTimeout(timer)
-    })
+<script lang="ts">import { PinInput, 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 { pinInputDefaults, pinInputVariants } from "./pin-input.variants.js";
+const config = getComponentConfig("pinInput", pinInputDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), defaultValue = "", value = $bindable(defaultValue), onValueChange, onComplete, length = 5, type = "text", mask = false, otp = false, disabled = false, required, textalign, pasteTransformer, pushPasswordManagerStrategy, inputId, name, placeholder = "○", autofocus = false, autofocusDelay = 0, highlight = false, loading = false, loadingIcon = icons.loading, fixed = false, color = config.defaultVariants.color, size, variant = config.defaultVariants.variant, class: className, ui, ...restProps } = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const isDisabled = $derived(disabled || loading);
+const autoInputId = useId();
+const hasError = $derived(formFieldContext?.error !== undefined && formFieldContext?.error !== false);
+const resolvedInputId = $derived(inputId ?? formFieldContext?.ariaId ?? autoInputId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const resolvedHighlight = $derived(hasError || highlight);
+const ariaDescribedBy = $derived(!formFieldContext ? undefined : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`);
+const resolvedPasteTransformer = $derived(pasteTransformer ?? (type === "number" ? (text) => text.replace(/\D/g, "") : undefined));
+function handleValueChange(v) {
+	const filtered = type === "number" ? v.replace(/\D/g, "") : v;
+	value = filtered;
+	emit.onInput();
+	onValueChange?.(filtered);
+}
+function handleComplete(v) {
+	emit.onChange();
+	onComplete?.(v);
+}
+const slots = $derived(pinInputVariants({
+	variant,
+	color: resolvedColor,
+	size: resolvedSize,
+	highlight: resolvedHighlight,
+	fixed,
+	disabled: isDisabled
+}));
+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] })
+	};
+});
+$effect(() => {
+	if (!autofocus) return;
+	const input = ref?.querySelector("[data-pin-input-input]");
+	if (!input) return;
+	const timer = setTimeout(() => input.focus(), autofocusDelay);
+	return () => clearTimeout(timer);
+});
 </script>
 
 <div class="relative inline-flex" {...restProps}>

package/dist/PinInput/PinInput.svelte.d.ts

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

package/dist/Popover/Popover.svelte

@@ -1,66 +1,33 @@
-<script lang="ts" module>
-    import type { PopoverProps } from './popover.types.js'
-
-    export type Props = PopoverProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Popover } from 'bits-ui'
-    import { getComponentConfig } from '../config.js'
-    import { popoverDefaults, popoverVariants } from './popover.variants.js'
-
-    const config = getComponentConfig('popover', popoverDefaults)
-
-    let {
-        ref = $bindable(null),
-        open = $bindable(false),
-        onOpenChange,
-        onOpenChangeComplete,
-        side = 'bottom',
-        sideOffset = 8,
-        align = 'center',
-        alignOffset = 0,
-        avoidCollisions = true,
-        collisionBoundary,
-        collisionPadding = 8,
-        sticky = 'partial',
-        hideWhenDetached = false,
-        trapFocus = true,
-        preventScroll = false,
-        onOpenAutoFocus,
-        onCloseAutoFocus,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        arrow = false,
-        transition = config.defaultVariants.transition ?? true,
-        portal = true,
-        dismissible = true,
-        ui,
-        class: className,
-        children,
-        content: contentSlot,
-        ...restProps
-    }: Props = $props()
-
-    const variantSlots = $derived(popoverVariants({ transition }))
-    const classes = $derived({
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
-        arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] })
-    })
-
-    const arrowProps = $derived.by(() => {
-        if (typeof arrow === 'object') {
-            return { width: 12, height: 6, ...arrow }
-        }
-        return { width: 12, height: 6 }
-    })
-
-    const dismissBehavior = $derived(dismissible ? ('close' as const) : ('ignore' as const))
-
-    function close() {
-        open = false
-    }
+<script lang="ts">import { Popover } from "bits-ui";
+import { getComponentConfig } from "../config.js";
+import { popoverDefaults, popoverVariants } from "./popover.variants.js";
+const config = getComponentConfig("popover", popoverDefaults);
+let { ref = $bindable(null), open = $bindable(false), onOpenChange, onOpenChangeComplete, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, avoidCollisions = true, collisionBoundary, collisionPadding = 8, sticky = "partial", hideWhenDetached = false, trapFocus = true, preventScroll = false, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeydown, onInteractOutside, forceMount, arrow = false, transition = config.defaultVariants.transition ?? true, portal = true, dismissible = true, ui, class: className, children, content: contentSlot, ...restProps } = $props();
+const variantSlots = $derived(popoverVariants({ transition }));
+const classes = $derived({
+	content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+	arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] })
+});
+const arrowProps = $derived.by(() => {
+	if (typeof arrow === "object") {
+		return {
+			width: 12,
+			height: 6,
+			...arrow
+		};
+	}
+	return {
+		width: 12,
+		height: 6
+	};
+});
+const dismissBehavior = $derived(dismissible ? "close" : "ignore");
+function close() {
+	open = false;
+}
 </script>
 
 {#snippet popoverContentEl()}

package/dist/Popover/Popover.svelte.d.ts

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

package/dist/Progress/Progress.svelte

@@ -1,99 +1,80 @@
-<script lang="ts" module>
-    import type { ProgressProps } from './progress.types.js'
-
-    export type Props = ProgressProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Progress } from 'bits-ui'
-    import { getComponentConfig } from '../config.js'
-    import { progressDefaults, progressVariants } from './progress.variants.js'
-
-    const config = getComponentConfig('progress', progressDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = null,
-        max = 100,
-        status = false,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        orientation = config.defaultVariants.orientation,
-        inverted = false,
-        animation = config.defaultVariants.animation,
-        ui,
-        class: className,
-        statusSlot,
-        stepSlot,
-        ...restProps
-    }: Props = $props()
-
-    const isIndeterminate = $derived(value === null)
-    const hasSteps = $derived(Array.isArray(max))
-
-    const realMax = $derived.by(() => {
-        if (isIndeterminate || !max) return undefined
-        if (Array.isArray(max)) return max.length - 1
-        return Number(max)
-    })
-
-    const percent = $derived.by(() => {
-        if (isIndeterminate) return undefined
-        if (value! < 0) return 0
-        if (value! > (realMax ?? 100)) return 100
-        return Math.round((value! / (realMax ?? 100)) * 100)
-    })
-
-    const indicatorStyle = $derived.by(() => {
-        if (percent === undefined) return ''
-        const offset = 100 - percent
-        if (orientation === 'vertical') {
-            return `transform: translateY(${inverted ? '' : '-'}${offset}%);`
-        }
-        return `transform: translateX(${inverted ? '' : '-'}${offset}%);`
-    })
-
-    const statusStyle = $derived.by(() => {
-        const val = `${Math.max(percent ?? 0, 0)}%`
-        return orientation === 'vertical' ? `height: ${val};` : `width: ${val};`
-    })
-
-    function stepVariant(index: number): 'active' | 'first' | 'last' | 'other' {
-        const isActive = index === Number(value)
-        const isFirst = index === 0
-        const isLast = index === realMax
-
-        if (isActive && !isFirst) return 'active'
-        if (isFirst && isActive) return 'first'
-        if (isLast && isActive) return 'last'
-        return 'other'
-    }
-
-    const classes = $derived.by(() => {
-        const slots = progressVariants({ animation, color, size, orientation, inverted })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            base: slots.base({ class: [config.slots.base, ui?.base] }),
-            indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
-            status: slots.status({ class: [config.slots.status, ui?.status] }),
-            steps: slots.steps({ class: [config.slots.steps, ui?.steps] })
-        }
-    })
-
-    const stepClasses = $derived.by(() => {
-        const make = (step: 'active' | 'first' | 'last' | 'other') =>
-            progressVariants({ size, orientation, inverted, step }).step({
-                class: [config.slots.step, ui?.step]
-            })
-        return {
-            active: make('active'),
-            first: make('first'),
-            last: make('last'),
-            other: make('other')
-        }
-    })
-
-    const state = $derived(isIndeterminate ? 'indeterminate' : 'determinate')
+<script lang="ts">import { Progress } from "bits-ui";
+import { getComponentConfig } from "../config.js";
+import { progressDefaults, progressVariants } from "./progress.variants.js";
+const config = getComponentConfig("progress", progressDefaults);
+let { ref = $bindable(null), value = null, max = 100, status = false, color = config.defaultVariants.color, size = config.defaultVariants.size, orientation = config.defaultVariants.orientation, inverted = false, animation = config.defaultVariants.animation, ui, class: className, statusSlot, stepSlot, ...restProps } = $props();
+const isIndeterminate = $derived(value === null);
+const hasSteps = $derived(Array.isArray(max));
+const realMax = $derived.by(() => {
+	if (isIndeterminate || !max) return undefined;
+	if (Array.isArray(max)) return max.length - 1;
+	return Number(max);
+});
+const percent = $derived.by(() => {
+	if (isIndeterminate) return undefined;
+	if (value < 0) return 0;
+	if (value > (realMax ?? 100)) return 100;
+	return Math.round(value / (realMax ?? 100) * 100);
+});
+const indicatorStyle = $derived.by(() => {
+	if (percent === undefined) return "";
+	const offset = 100 - percent;
+	if (orientation === "vertical") {
+		return `transform: translateY(${inverted ? "" : "-"}${offset}%);`;
+	}
+	return `transform: translateX(${inverted ? "" : "-"}${offset}%);`;
+});
+const statusStyle = $derived.by(() => {
+	const val = `${Math.max(percent ?? 0, 0)}%`;
+	return orientation === "vertical" ? `height: ${val};` : `width: ${val};`;
+});
+function stepVariant(index) {
+	const isActive = index === Number(value);
+	const isFirst = index === 0;
+	const isLast = index === realMax;
+	if (isActive && !isFirst) return "active";
+	if (isFirst && isActive) return "first";
+	if (isLast && isActive) return "last";
+	return "other";
+}
+const classes = $derived.by(() => {
+	const slots = progressVariants({
+		animation,
+		color,
+		size,
+		orientation,
+		inverted
+	});
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			ui?.root
+		] }),
+		base: slots.base({ class: [config.slots.base, ui?.base] }),
+		indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+		status: slots.status({ class: [config.slots.status, ui?.status] }),
+		steps: slots.steps({ class: [config.slots.steps, ui?.steps] })
+	};
+});
+const stepClasses = $derived.by(() => {
+	const make = (step) => progressVariants({
+		size,
+		orientation,
+		inverted,
+		step
+	}).step({ class: [config.slots.step, ui?.step] });
+	return {
+		active: make("active"),
+		first: make("first"),
+		last: make("last"),
+		other: make("other")
+	};
+});
+const state = $derived(isIndeterminate ? "indeterminate" : "determinate");
 </script>
 
 <Progress.Root