svelora 3.0.1 → 3.0.2

package/dist/Checkbox/Checkbox.svelte

@@ -1,102 +1,57 @@
-<script lang="ts" module>
-    import type { CheckboxProps } from './checkbox.types.js'
-
-    export type Props = CheckboxProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Checkbox, Label, 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 { checkboxDefaults, checkboxVariants } from './checkbox.variants.js'
-
-    const config = getComponentConfig('checkbox', checkboxDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        checked = $bindable(false),
-        onCheckedChange,
-        indeterminate = $bindable(false),
-        onIndeterminateChange,
-        ui,
-        id,
-        name,
-        value,
-        color = config.defaultVariants.color,
-        size,
-        variant = config.defaultVariants.variant,
-        indicator = config.defaultVariants.indicator,
-        disabled = false,
-        required = false,
-        loading = false,
-        loadingIcon = icons.loading,
-        icon = icons.check,
-        indeterminateIcon = 'lucide:minus',
-        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 resolvedIcon = $derived(loading ? loadingIcon : indeterminate ? indeterminateIcon : icon)
-
-    let containerRef: HTMLElement | null = null
-
-    function handleCardClick(e: MouseEvent) {
-        if (isDisabled) return
-        // Don't re-click when the event originated from the checkbox button itself
-        if ((e.target as Element).closest('button')) return
-        containerRef?.querySelector('button')?.click()
-    }
-
-    const classes = $derived.by(() => {
-        const slots = checkboxVariants({
-            color: resolvedColor,
-            size: resolvedSize,
-            variant,
-            indicator,
-            loading,
-            required,
-            disabled: isDisabled ? true : undefined
-        })
-        return {
-            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] }),
-            indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
-            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
-            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]
-            })
-        }
-    })
+<script lang="ts">import { Checkbox, Label, 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 { checkboxDefaults, checkboxVariants } from "./checkbox.variants.js";
+const config = getComponentConfig("checkbox", checkboxDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), checked = $bindable(false), onCheckedChange, indeterminate = $bindable(false), onIndeterminateChange, ui, id, name, value, color = config.defaultVariants.color, size, variant = config.defaultVariants.variant, indicator = config.defaultVariants.indicator, disabled = false, required = false, loading = false, loadingIcon = icons.loading, icon = icons.check, indeterminateIcon = "lucide:minus", 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 resolvedIcon = $derived(loading ? loadingIcon : indeterminate ? indeterminateIcon : icon);
+let containerRef = null;
+function handleCardClick(e) {
+	if (isDisabled) return;
+	// Don't re-click when the event originated from the checkbox button itself
+	if (e.target.closest("button")) return;
+	containerRef?.querySelector("button")?.click();
+}
+const classes = $derived.by(() => {
+	const slots = checkboxVariants({
+		color: resolvedColor,
+		size: resolvedSize,
+		variant,
+		indicator,
+		loading,
+		required,
+		disabled: isDisabled ? true : undefined
+	});
+	return {
+		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] }),
+		indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+		icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+		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] })
+	};
+});
 </script>
 
 <div

package/dist/CheckboxGroup/CheckboxGroup.svelte

@@ -1,112 +1,67 @@
-<script lang="ts" module>
-    import type { CheckboxGroupProps } from './checkbox-group.types.js'
-
-    export type Props = CheckboxGroupProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Checkbox, Label, 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 type { CheckboxGroupItem } from './checkbox-group.types.js'
-    import { checkboxGroupDefaults, checkboxGroupVariants } from './checkbox-group.variants.js'
-
-    const config = getComponentConfig('checkboxGroup', checkboxGroupDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable([]),
-        onValueChange,
-        items = [],
-        ui,
-        id,
-        name,
-        color = config.defaultVariants.color,
-        size,
-        variant = config.defaultVariants.variant,
-        indicator = config.defaultVariants.indicator,
-        orientation = config.defaultVariants.orientation,
-        disabled = false,
-        required = false,
-        loading = false,
-        loadingIcon = icons.loading,
-        icon = icons.check,
-        legend,
-        legendSlot,
-        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 slots = $derived(
-        checkboxGroupVariants({
-            color: resolvedColor,
-            size: resolvedSize,
-            variant,
-            indicator,
-            orientation,
-            loading,
-            required,
-            disabled: isDisabled ? true : undefined
-        })
-    )
-
-    const layoutClasses = $derived.by(() => ({
-        root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-        fieldset: slots.fieldset({ class: [config.slots.fieldset, ui?.fieldset] }),
-        legend: slots.legend({ class: [config.slots.legend, ui?.legend] }),
-        item: slots.item({ class: [config.slots.item, ui?.item] }),
-        container: slots.container({ class: [config.slots.container, ui?.container] }),
-        wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] })
-    }))
-
-    const elementClasses = $derived.by(() => ({
-        base: slots.base({ class: [config.slots.base, ui?.base] }),
-        indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
-        icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
-        label: slots.label({ class: [config.slots.label, ui?.label] }),
-        description: slots.description({ class: [config.slots.description, ui?.description] })
-    }))
-
-    function toggleItem(itemValue: string, checked: boolean) {
-        if (checked) {
-            value = [...value, itemValue]
-        } else {
-            value = value.filter((v) => v !== itemValue)
-        }
-        emit.onChange()
-        onValueChange?.(value)
-    }
-
-    function handleCardItemClick(e: MouseEvent, btnId: string, itemDisabled: boolean) {
-        if (itemDisabled) return
-        if ((e.target as Element).closest('button')) return
-        document.getElementById(btnId)?.click()
-    }
+<script lang="ts">import { Checkbox, Label, 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 { checkboxGroupDefaults, checkboxGroupVariants } from "./checkbox-group.variants.js";
+const config = getComponentConfig("checkboxGroup", checkboxGroupDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), value = $bindable([]), onValueChange, items = [], ui, id, name, color = config.defaultVariants.color, size, variant = config.defaultVariants.variant, indicator = config.defaultVariants.indicator, orientation = config.defaultVariants.orientation, disabled = false, required = false, loading = false, loadingIcon = icons.loading, icon = icons.check, legend, legendSlot, 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 slots = $derived(checkboxGroupVariants({
+	color: resolvedColor,
+	size: resolvedSize,
+	variant,
+	indicator,
+	orientation,
+	loading,
+	required,
+	disabled: isDisabled ? true : undefined
+}));
+const layoutClasses = $derived.by(() => ({
+	root: slots.root({ class: [
+		config.slots.root,
+		className,
+		ui?.root
+	] }),
+	fieldset: slots.fieldset({ class: [config.slots.fieldset, ui?.fieldset] }),
+	legend: slots.legend({ class: [config.slots.legend, ui?.legend] }),
+	item: slots.item({ class: [config.slots.item, ui?.item] }),
+	container: slots.container({ class: [config.slots.container, ui?.container] }),
+	wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] })
+}));
+const elementClasses = $derived.by(() => ({
+	base: slots.base({ class: [config.slots.base, ui?.base] }),
+	indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+	icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+	label: slots.label({ class: [config.slots.label, ui?.label] }),
+	description: slots.description({ class: [config.slots.description, ui?.description] })
+}));
+function toggleItem(itemValue, checked) {
+	if (checked) {
+		value = [...value, itemValue];
+	} else {
+		value = value.filter((v) => v !== itemValue);
+	}
+	emit.onChange();
+	onValueChange?.(value);
+}
+function handleCardItemClick(e, btnId, itemDisabled) {
+	if (itemDisabled) return;
+	if (e.target.closest("button")) return;
+	document.getElementById(btnId)?.click();
+}
 </script>
 
 {#snippet itemContent(checkboxItem: CheckboxGroupItem)}

package/dist/CheckboxGroup/CheckboxGroup.svelte.d.ts

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

package/dist/Chip/Chip.svelte

@@ -1,39 +1,27 @@
-<script lang="ts" module>
-    import type { ChipProps } from './chip.types.js'
-
-    export type Props = ChipProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { getComponentConfig } from '../config.js'
-    import { chipDefaults, chipVariants } from './chip.variants.js'
-
-    const config = getComponentConfig('chip', chipDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        text,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        position = config.defaultVariants.position,
-        inset = false,
-        standalone = false,
-        show = $bindable(true),
-        class: className,
-        children,
-        content,
-        ...restProps
-    }: Props = $props()
-
-    const classes = $derived.by(() => {
-        const slots = chipVariants({ color, size, position, inset, standalone })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            base: slots.base({ class: [config.slots.base, ui?.base] })
-        }
-    })
+<script lang="ts">import { getComponentConfig } from "../config.js";
+import { chipDefaults, chipVariants } from "./chip.variants.js";
+const config = getComponentConfig("chip", chipDefaults);
+let { ref = $bindable(null), as = "div", ui, text, color = config.defaultVariants.color, size = config.defaultVariants.size, position = config.defaultVariants.position, inset = false, standalone = false, show = $bindable(true), class: className, children, content, ...restProps } = $props();
+const classes = $derived.by(() => {
+	const slots = chipVariants({
+		color,
+		size,
+		position,
+		inset,
+		standalone
+	});
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			ui?.root
+		] }),
+		base: slots.base({ class: [config.slots.base, ui?.base] })
+	};
+});
 </script>
 
 <svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>

package/dist/CodeBlock/CodeBlock.svelte

@@ -1,64 +1,47 @@
-<script lang="ts" module>
-    import type { CodeBlockProps } from './code-block.types.js'
-
-    export type Props = CodeBlockProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { getComponentConfig } from '../config.js'
-    import { codeBlockDefaults, codeBlockVariants } from './code-block.variants.js'
-
-    const config = getComponentConfig('codeBlock', codeBlockDefaults)
-
-    let {
-        title = 'Code',
-        code = '',
-        copyText,
-        copyable = true,
-        html,
-        variant = config.defaultVariants.variant,
-        size = config.defaultVariants.size,
-        class: className,
-        ui,
-        children
-    }: Props = $props()
-
-    let copyLabel = $state('Copy')
-
-    const resolvedCopyText = $derived((copyText ?? code).trim())
-    const canCopy = $derived(copyable && resolvedCopyText.length > 0)
-
-    const classes = $derived.by(() => {
-        const slots = codeBlockVariants({ variant, size })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            header: slots.header({ class: [config.slots.header, ui?.header] }),
-            title: slots.title({ class: [config.slots.title, ui?.title] }),
-            button: slots.button({ class: [config.slots.button, ui?.button] }),
-            body: slots.body({ class: [config.slots.body, ui?.body] })
-        }
-    })
-
-    function scheduleLabelReset(resetLabel: string): void {
-        window.setTimeout(() => {
-            copyLabel = resetLabel
-        }, 1200)
-    }
-
-    async function handleCopy(): Promise<void> {
-        if (!canCopy) return
-        if (typeof navigator === 'undefined' || !navigator.clipboard) return
-
-        const resetLabel = copyLabel
-        try {
-            await navigator.clipboard.writeText(resolvedCopyText)
-            copyLabel = 'Copied'
-        } catch {
-            copyLabel = 'Failed'
-        }
-
-        scheduleLabelReset(resetLabel)
-    }
+<script lang="ts">import { getComponentConfig } from "../config.js";
+import { codeBlockDefaults, codeBlockVariants } from "./code-block.variants.js";
+const config = getComponentConfig("codeBlock", codeBlockDefaults);
+let { title = "Code", code = "", copyText, copyable = true, html, variant = config.defaultVariants.variant, size = config.defaultVariants.size, class: className, ui, children } = $props();
+let copyLabel = $state("Copy");
+const resolvedCopyText = $derived((copyText ?? code).trim());
+const canCopy = $derived(copyable && resolvedCopyText.length > 0);
+const classes = $derived.by(() => {
+	const slots = codeBlockVariants({
+		variant,
+		size
+	});
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			ui?.root
+		] }),
+		header: slots.header({ class: [config.slots.header, ui?.header] }),
+		title: slots.title({ class: [config.slots.title, ui?.title] }),
+		button: slots.button({ class: [config.slots.button, ui?.button] }),
+		body: slots.body({ class: [config.slots.body, ui?.body] })
+	};
+});
+function scheduleLabelReset(resetLabel) {
+	window.setTimeout(() => {
+		copyLabel = resetLabel;
+	}, 1200);
+}
+async function handleCopy() {
+	if (!canCopy) return;
+	if (typeof navigator === "undefined" || !navigator.clipboard) return;
+	const resetLabel = copyLabel;
+	try {
+		await navigator.clipboard.writeText(resolvedCopyText);
+		copyLabel = "Copied";
+	} catch {
+		copyLabel = "Failed";
+	}
+	scheduleLabelReset(resetLabel);
+}
 </script>
 
 <div class={classes.root}>

package/dist/Collapsible/Collapsible.svelte

@@ -1,43 +1,27 @@
-<script lang="ts" module>
-    import type { CollapsibleProps } from './collapsible.types.js'
-
-    export type Props = CollapsibleProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Collapsible } from 'bits-ui'
-    import { getComponentConfig } from '../config.js'
-    import { collapsibleDefaults, collapsibleVariants } from './collapsible.variants.js'
-
-    const config = getComponentConfig('collapsible', collapsibleDefaults)
-
-    let {
-        ref = $bindable(null),
-        open = $bindable(false),
-        onOpenChange,
-        onOpenChangeComplete,
-        disabled = false,
-        trigger: triggerSlot,
-        content: contentSlot,
-        children,
-        ui,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const slots = $derived(collapsibleVariants({ disabled }))
-    const classes = $derived.by(() => {
-        const u = ui ?? {}
-        return {
-            root: slots.root({ class: [config.slots.root, className, u.root] }),
-            content: slots.content({ class: [config.slots.content, u.content] })
-        }
-    })
-
-    function handleOpenChange(value: boolean) {
-        open = value
-        onOpenChange?.(value)
-    }
+<script lang="ts">import { Collapsible } from "bits-ui";
+import { getComponentConfig } from "../config.js";
+import { collapsibleDefaults, collapsibleVariants } from "./collapsible.variants.js";
+const config = getComponentConfig("collapsible", collapsibleDefaults);
+let { ref = $bindable(null), open = $bindable(false), onOpenChange, onOpenChangeComplete, disabled = false, trigger: triggerSlot, content: contentSlot, children, ui, class: className, ...restProps } = $props();
+const slots = $derived(collapsibleVariants({ disabled }));
+const classes = $derived.by(() => {
+	const u = ui ?? {};
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			u.root
+		] }),
+		content: slots.content({ class: [config.slots.content, u.content] })
+	};
+});
+function handleOpenChange(value) {
+	open = value;
+	onOpenChange?.(value);
+}
 </script>
 
 <Collapsible.Root

package/dist/Collapsible/Collapsible.svelte.d.ts

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

package/dist/Collapsible/CollapsibleTestWrapper.svelte

@@ -1,8 +1,5 @@
-<script lang="ts">
-    import Collapsible from './Collapsible.svelte'
-    import type { CollapsibleProps } from './collapsible.types.js'
-
-    let { ...props }: Omit<CollapsibleProps, 'trigger' | 'content' | 'children'> = $props()
+<script lang="ts">import Collapsible from "./Collapsible.svelte";
+let { ...props } = $props();
 </script>
 
 <Collapsible {...props}>

package/dist/Collapsible/CollapsibleTestWrapper.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { CollapsibleProps } from './collapsible.types.js';
-declare const CollapsibleTestWrapper: import("svelte").Component<Omit<CollapsibleProps, "trigger" | "content" | "children">, {}, "">;
+declare const CollapsibleTestWrapper: import("svelte").Component<Omit<CollapsibleProps, "children" | "content" | "trigger">, {}, "">;
 type CollapsibleTestWrapper = ReturnType<typeof CollapsibleTestWrapper>;
 export default CollapsibleTestWrapper;