svelora 3.0.1 → 3.0.3

package/dist/Tabs/Tabs.svelte

@@ -1,134 +1,101 @@
-<script lang="ts" module>
-    import type { TabsItem, TabsProps } from './tabs.types.js'
-
-    export type Props = TabsProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Tabs } from 'bits-ui'
-    import { tick, untrack } from 'svelte'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { tabsDefaults, tabsVariants } from './tabs.variants.js'
-
-    const config = getComponentConfig('tabs', tabsDefaults)
-
-    let {
-        ref = $bindable(null),
-        items = [],
-        value = $bindable(),
-        defaultValue,
-        onValueChange,
-        variant = config.defaultVariants.variant ?? 'pill',
-        color = config.defaultVariants.color ?? 'primary',
-        size = config.defaultVariants.size ?? 'md',
-        orientation = config.defaultVariants.orientation ?? 'horizontal',
-        activationMode = 'automatic',
-        disabled = false,
-        loop = true,
-        content: showContent = true,
-        ui,
-        class: className,
-        leading,
-        label: labelSlot,
-        trailing,
-        body: bodySlot,
-        ...restProps
-    }: Props = $props()
-
-    // Initialize value if not provided (intentionally reads initial values only)
-    if (value === undefined) {
-        value = untrack(
-            () => defaultValue ?? (items.length > 0 ? (items[0].value ?? '0') : undefined)
-        )
-    }
-
-    let listEl: HTMLElement | null = $state(null)
-    let indicatorStyle = $state('')
-
-    const variantSlots = $derived(tabsVariants({ variant, color, size, orientation }))
-
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
-        list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
-        indicator: variantSlots.indicator({
-            class: [config.slots.indicator, ui?.indicator]
-        }),
-        trigger: variantSlots.trigger({ class: [config.slots.trigger, ui?.trigger] }),
-        leadingIcon: variantSlots.leadingIcon({
-            class: [config.slots.leadingIcon, ui?.leadingIcon]
-        }),
-        label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] })
-    })
-
-    let rafId = 0
-
-    function getItemValue(item: TabsItem, index: number): string {
-        return item.value ?? String(index)
-    }
-
-    function getTriggerClass(item: TabsItem) {
-        if (!item.ui?.trigger && !item.class) return classes.trigger
-        return variantSlots.trigger({
-            class: [config.slots.trigger, ui?.trigger, item.ui?.trigger, item.class]
-        })
-    }
-
-    function getIconClass(item: TabsItem) {
-        if (!item.ui?.leadingIcon) return classes.leadingIcon
-        return variantSlots.leadingIcon({
-            class: [config.slots.leadingIcon, ui?.leadingIcon, item.ui?.leadingIcon]
-        })
-    }
-
-    function getLabelClass(item: TabsItem) {
-        if (!item.ui?.label) return classes.label
-        return variantSlots.label({
-            class: [config.slots.label, ui?.label, item.ui?.label]
-        })
-    }
-
-    function updateIndicator() {
-        if (!listEl) return
-        const activeTrigger = listEl.querySelector('[data-state="active"]') as HTMLElement
-        if (!activeTrigger) {
-            indicatorStyle = 'opacity: 0;'
-            return
-        }
-
-        if (orientation === 'horizontal') {
-            indicatorStyle = `left: ${activeTrigger.offsetLeft}px; width: ${activeTrigger.offsetWidth}px;`
-        } else {
-            indicatorStyle = `top: ${activeTrigger.offsetTop}px; height: ${activeTrigger.offsetHeight}px;`
-        }
-    }
-
-    function scheduleIndicatorUpdate() {
-        cancelAnimationFrame(rafId)
-        rafId = requestAnimationFrame(updateIndicator)
-    }
-
-    // Update indicator on mount and when dependencies change
-    $effect(() => {
-        void value
-        void orientation
-        void items
-        tick().then(updateIndicator)
-    })
-
-    // Handle resize with rAF debouncing
-    $effect(() => {
-        if (!listEl) return
-
-        const observer = new ResizeObserver(scheduleIndicatorUpdate)
-        observer.observe(listEl)
-
-        return () => {
-            observer.disconnect()
-            cancelAnimationFrame(rafId)
-        }
-    })
+<script lang="ts">import { Tabs } from "bits-ui";
+import { tick, untrack } from "svelte";
+import { getComponentConfig } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { tabsDefaults, tabsVariants } from "./tabs.variants.js";
+const config = getComponentConfig("tabs", tabsDefaults);
+let { ref = $bindable(null), items = [], value = $bindable(), defaultValue, onValueChange, variant = config.defaultVariants.variant ?? "pill", color = config.defaultVariants.color ?? "primary", size = config.defaultVariants.size ?? "md", orientation = config.defaultVariants.orientation ?? "horizontal", activationMode = "automatic", disabled = false, loop = true, content: showContent = true, ui, class: className, leading, label: labelSlot, trailing, body: bodySlot, ...restProps } = $props();
+// Initialize value if not provided (intentionally reads initial values only)
+if (value === undefined) {
+	value = untrack(() => defaultValue ?? (items.length > 0 ? items[0].value ?? "0" : undefined));
+}
+let listEl = $state(null);
+let indicatorStyle = $state("");
+const variantSlots = $derived(tabsVariants({
+	variant,
+	color,
+	size,
+	orientation
+}));
+const classes = $derived({
+	root: variantSlots.root({ class: [
+		config.slots.root,
+		className,
+		ui?.root
+	] }),
+	list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
+	indicator: variantSlots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+	trigger: variantSlots.trigger({ class: [config.slots.trigger, ui?.trigger] }),
+	leadingIcon: variantSlots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }),
+	label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
+	content: variantSlots.content({ class: [config.slots.content, ui?.content] })
+});
+let rafId = 0;
+function getItemValue(item, index) {
+	return item.value ?? String(index);
+}
+function getTriggerClass(item) {
+	if (!item.ui?.trigger && !item.class) return classes.trigger;
+	return variantSlots.trigger({ class: [
+		config.slots.trigger,
+		ui?.trigger,
+		item.ui?.trigger,
+		item.class
+	] });
+}
+function getIconClass(item) {
+	if (!item.ui?.leadingIcon) return classes.leadingIcon;
+	return variantSlots.leadingIcon({ class: [
+		config.slots.leadingIcon,
+		ui?.leadingIcon,
+		item.ui?.leadingIcon
+	] });
+}
+function getLabelClass(item) {
+	if (!item.ui?.label) return classes.label;
+	return variantSlots.label({ class: [
+		config.slots.label,
+		ui?.label,
+		item.ui?.label
+	] });
+}
+function updateIndicator() {
+	if (!listEl) return;
+	const activeTrigger = listEl.querySelector("[data-state=\"active\"]");
+	if (!activeTrigger) {
+		indicatorStyle = "opacity: 0;";
+		return;
+	}
+	if (orientation === "horizontal") {
+		indicatorStyle = `left: ${activeTrigger.offsetLeft}px; width: ${activeTrigger.offsetWidth}px;`;
+	} else {
+		indicatorStyle = `top: ${activeTrigger.offsetTop}px; height: ${activeTrigger.offsetHeight}px;`;
+	}
+}
+function scheduleIndicatorUpdate() {
+	cancelAnimationFrame(rafId);
+	rafId = requestAnimationFrame(updateIndicator);
+}
+// Update indicator on mount and when dependencies change
+$effect(() => {
+	void value;
+	void orientation;
+	void items;
+	tick().then(updateIndicator);
+});
+// Handle resize with rAF debouncing
+$effect(() => {
+	if (!listEl) return;
+	const observer = new ResizeObserver(scheduleIndicatorUpdate);
+	observer.observe(listEl);
+	return () => {
+		observer.disconnect();
+		cancelAnimationFrame(rafId);
+	};
+});
 </script>
 
 <Tabs.Root

package/dist/Tabs/Tabs.svelte.d.ts

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

package/dist/Textarea/Textarea.svelte

@@ -1,178 +1,95 @@
-<script lang="ts" module>
-    import type { TextareaProps } from './textarea.types.js'
-
-    export type Props = TextareaProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { getContext } from 'svelte'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import {
-        type FieldGroupVariantProps, 
-        fieldGroupVariantWithRoot
-    } from '../FieldGroup/field-group.variants.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { textareaDefaults, textareaVariants } from './textarea.variants.js'
-
-    const config = getComponentConfig('textarea', textareaDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(),
-        ui,
-        id,
-        name,
-        color = config.defaultVariants.color,
-        variant = config.defaultVariants.variant,
-        size,
-        highlight,
-        loading = false,
-        loadingIcon = icons.loading,
-        disabled = false,
-        icon,
-        leadingIcon,
-        trailingIcon,
-        trailing = false,
-        leadingSlot,
-        trailingSlot,
-        autoresize = false,
-        rows = 3,
-        maxrows = 0,
-        class: className,
-        onblur,
-        oninput,
-        onchange,
-        onfocus,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    function handleBlur(event: FocusEvent & { currentTarget: HTMLTextAreaElement }) {
-        emit.onBlur()
-        onblur?.(event)
-    }
-    function handleInput(event: Event & { currentTarget: HTMLTextAreaElement }) {
-        emit.onInput()
-        oninput?.(event)
-    }
-    function handleChange(event: Event & { currentTarget: HTMLTextAreaElement }) {
-        emit.onChange()
-        onchange?.(event)
-    }
-    function handleFocus(event: FocusEvent & { currentTarget: HTMLTextAreaElement }) {
-        emit.onFocus()
-        onfocus?.(event)
-    }
-
-    const fieldGroupContext = getContext<
-        | {
-              orientation: NonNullable<FieldGroupVariantProps['orientation']>
-              size: NonNullable<FieldGroupVariantProps['size']>
-          }
-        | undefined
-    >('fieldGroup')
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedSize = $derived(
-        size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size
-    )
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const resolvedHighlight = $derived(highlight ?? hasError)
-    const fieldGroupClass = $derived(
-        fieldGroupContext
-            ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? 'horizontal']
-            : undefined
-    )
-
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-
-    const isLeading = $derived((!!icon && !trailing) || (loading && !trailing) || !!leadingIcon)
-    const isTrailing = $derived((!!icon && trailing) || (loading && trailing) || !!trailingIcon)
-
-    const leadingIconName = $derived(
-        loading && isLeading
-            ? loadingIcon
-            : leadingIcon || (isLeading && !trailing ? icon : undefined)
-    )
-    const trailingIconName = $derived(
-        loading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
-    )
-
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const variantSlots = $derived(
-        textareaVariants({
-            variant,
-            color: resolvedColor,
-            size: resolvedSize,
-            leading: isLeading,
-            trailing: isTrailing,
-            loading,
-            highlight: resolvedHighlight,
-            autoresize
-        })
-    )
-    const classes = $derived({
-        root: variantSlots.root({
-            class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
-        }),
-        base: variantSlots.base({
-            class: [config.slots.base, fieldGroupClass?.base, ui?.base]
-        }),
-        leading: variantSlots.leading({ class: [config.slots.leading, ui?.leading] }),
-        leadingIcon: variantSlots.leadingIcon({
-            class: [config.slots.leadingIcon, ui?.leadingIcon]
-        }),
-        trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
-        trailingIcon: variantSlots.trailingIcon({
-            class: [config.slots.trailingIcon, ui?.trailingIcon]
-        })
-    })
-
-    let cachedMaxHeight = $state(0)
-
-    $effect(() => {
-        if (!autoresize || !ref || maxrows <= 0) {
-            cachedMaxHeight = 0
-            return
-        }
-
-        const style = window.getComputedStyle(ref)
-        cachedMaxHeight =
-            parseFloat(style.lineHeight) * maxrows +
-            parseFloat(style.paddingTop) +
-            parseFloat(style.paddingBottom)
-    })
-
-    $effect(() => {
-        if (!autoresize || !ref) return
-
-        void value
-
-        ref.style.height = 'auto'
-        const scrollHeight = ref.scrollHeight
-
-        if (cachedMaxHeight > 0 && scrollHeight > cachedMaxHeight) {
-            ref.style.height = `${cachedMaxHeight}px`
-            ref.style.overflowY = 'auto'
-        } else {
-            ref.style.height = `${scrollHeight}px`
-            ref.style.overflowY = 'hidden'
-        }
-    })
+<script lang="ts">import { getContext } from "svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import { fieldGroupVariantWithRoot } from "../FieldGroup/field-group.variants.js";
+import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import Icon from "../Icon/Icon.svelte";
+import { textareaDefaults, textareaVariants } from "./textarea.variants.js";
+const config = getComponentConfig("textarea", textareaDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), value = $bindable(), ui, id, name, color = config.defaultVariants.color, variant = config.defaultVariants.variant, size, highlight, loading = false, loadingIcon = icons.loading, disabled = false, icon, leadingIcon, trailingIcon, trailing = false, leadingSlot, trailingSlot, autoresize = false, rows = 3, maxrows = 0, class: className, onblur, oninput, onchange, onfocus, ...restProps } = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+function handleBlur(event) {
+	emit.onBlur();
+	onblur?.(event);
+}
+function handleInput(event) {
+	emit.onInput();
+	oninput?.(event);
+}
+function handleChange(event) {
+	emit.onChange();
+	onchange?.(event);
+}
+function handleFocus(event) {
+	emit.onFocus();
+	onfocus?.(event);
+}
+const fieldGroupContext = getContext("fieldGroup");
+const hasError = $derived(formFieldContext?.error !== undefined && formFieldContext?.error !== false);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const resolvedHighlight = $derived(highlight ?? hasError);
+const fieldGroupClass = $derived(fieldGroupContext ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? "horizontal"] : undefined);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const isLeading = $derived(!!icon && !trailing || loading && !trailing || !!leadingIcon);
+const isTrailing = $derived(!!icon && trailing || loading && trailing || !!trailingIcon);
+const leadingIconName = $derived(loading && isLeading ? loadingIcon : leadingIcon || (isLeading && !trailing ? icon : undefined));
+const trailingIconName = $derived(loading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined));
+const ariaDescribedBy = $derived(!formFieldContext ? undefined : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`);
+const variantSlots = $derived(textareaVariants({
+	variant,
+	color: resolvedColor,
+	size: resolvedSize,
+	leading: isLeading,
+	trailing: isTrailing,
+	loading,
+	highlight: resolvedHighlight,
+	autoresize
+}));
+const classes = $derived({
+	root: variantSlots.root({ class: [
+		config.slots.root,
+		fieldGroupClass?.root,
+		className,
+		ui?.root
+	] }),
+	base: variantSlots.base({ class: [
+		config.slots.base,
+		fieldGroupClass?.base,
+		ui?.base
+	] }),
+	leading: variantSlots.leading({ class: [config.slots.leading, ui?.leading] }),
+	leadingIcon: variantSlots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }),
+	trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
+	trailingIcon: variantSlots.trailingIcon({ class: [config.slots.trailingIcon, ui?.trailingIcon] })
+});
+let cachedMaxHeight = $state(0);
+$effect(() => {
+	if (!autoresize || !ref || maxrows <= 0) {
+		cachedMaxHeight = 0;
+		return;
+	}
+	const style = window.getComputedStyle(ref);
+	cachedMaxHeight = parseFloat(style.lineHeight) * maxrows + parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+});
+$effect(() => {
+	if (!autoresize || !ref) return;
+	void value;
+	ref.style.height = "auto";
+	const scrollHeight = ref.scrollHeight;
+	if (cachedMaxHeight > 0 && scrollHeight > cachedMaxHeight) {
+		ref.style.height = `${cachedMaxHeight}px`;
+		ref.style.overflowY = "auto";
+	} else {
+		ref.style.height = `${scrollHeight}px`;
+		ref.style.overflowY = "hidden";
+	}
+});
 </script>
 
 <div class={classes.root}>

package/dist/Textarea/Textarea.svelte.d.ts

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

package/dist/ThemeModeButton/ThemeModeButton.svelte

@@ -1,43 +1,21 @@
-<script lang="ts" module>
-    import type { ThemeModeButtonProps } from './theme-mode-button.types.js'
-
-    export type Props = ThemeModeButtonProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { mode, toggleMode } from 'mode-watcher'
-    import Button from '../Button/Button.svelte'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import {
-        themeModeButtonDefaults, 
-        themeModeButtonVariants
-    } from './theme-mode-button.variants.js'
-
-    const config = getComponentConfig('themeModeButton', themeModeButtonDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ui,
-        color = config.defaultVariants.color ?? 'surface',
-        variant = config.defaultVariants.variant ?? 'ghost',
-        size,
-        lightIcon = icons.light,
-        darkIcon = icons.dark,
-        loading = false,
-        disabled = false,
-        square = true,
-        block = false,
-        children,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const isDark = $derived(mode.current === 'dark')
-
-    const slots = themeModeButtonVariants()
-    const baseClass = $derived(slots.base({ class: [config.slots.base, className, ui?.base] }))
-
-    const iconName = $derived(isDark ? lightIcon : darkIcon)
+<script lang="ts">import { mode, toggleMode } from "mode-watcher";
+import Button from "../Button/Button.svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import { themeModeButtonDefaults, themeModeButtonVariants } from "./theme-mode-button.variants.js";
+const config = getComponentConfig("themeModeButton", themeModeButtonDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ui, color = config.defaultVariants.color ?? "surface", variant = config.defaultVariants.variant ?? "ghost", size, lightIcon = icons.light, darkIcon = icons.dark, loading = false, disabled = false, square = true, block = false, children, class: className, ...restProps } = $props();
+const isDark = $derived(mode.current === "dark");
+const slots = themeModeButtonVariants();
+const baseClass = $derived(slots.base({ class: [
+	config.slots.base,
+	className,
+	ui?.base
+] }));
+const iconName = $derived(isDark ? lightIcon : darkIcon);
 </script>
 
 {#if children}