@johly/bits-ui 2.18.1

package/dist/bits/accordion/components/accordion-trigger.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { AccordionTriggerProps } from "../types.js";
+	import { AccordionTriggerState } from "../accordion.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		disabled = false,
+		ref = $bindable(null),
+		id = createId(uid),
+		tabindex = 0,
+		children,
+		child,
+		...restProps
+	}: AccordionTriggerProps = $props();
+
+	const triggerState = AccordionTriggerState.create({
+		disabled: boxWith(() => disabled),
+		id: boxWith(() => id),
+		tabindex: boxWith(() => tabindex ?? 0),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button type="button" {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/bits/accordion/components/accordion-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionTriggerProps } from "../types.js";
+declare const AccordionTrigger: import("svelte").Component<AccordionTriggerProps, {}, "ref">;
+type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
+export default AccordionTrigger;

package/dist/bits/accordion/components/accordion.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { type WritableBox, boxWith, mergeProps } from "svelte-toolbelt";
+	import { AccordionRootState } from "../accordion.svelte.js";
+	import type { AccordionRootProps } from "../types.js";
+	import { noop } from "../../../internal/noop.js";
+	import { watch } from "runed";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		disabled = false,
+		children,
+		child,
+		type,
+		value = $bindable(),
+		ref = $bindable(null),
+		id = createId(uid),
+		onValueChange = noop,
+		loop = true,
+		orientation = "vertical",
+		...restProps
+	}: AccordionRootProps = $props();
+
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = type === "single" ? "" : [];
+	}
+
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
+	const rootState = AccordionRootState.create({
+		type,
+		value: boxWith(
+			() => value!,
+			(v) => {
+				value = v;
+				// oxlint-disable-next-line no-explicit-any
+				onValueChange(v as any);
+			}
+		) as WritableBox<string> | WritableBox<string[]>,
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		loop: boxWith(() => loop),
+		orientation: boxWith(() => orientation),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/accordion/components/accordion.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionRootProps } from "../types.js";
+declare const Accordion: import("svelte").Component<AccordionRootProps, {}, "value" | "ref">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/bits/accordion/exports.d.ts

@@ -0,0 +1,6 @@
+export { default as Root } from "./components/accordion.svelte";
+export { default as Item } from "./components/accordion-item.svelte";
+export { default as Header } from "./components/accordion-header.svelte";
+export { default as Trigger } from "./components/accordion-trigger.svelte";
+export { default as Content } from "./components/accordion-content.svelte";
+export type { AccordionRootProps as RootProps, AccordionItemProps as ItemProps, AccordionHeaderProps as HeaderProps, AccordionTriggerProps as TriggerProps, AccordionContentProps as ContentProps, } from "./types.js";

package/dist/bits/accordion/exports.js

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/accordion.svelte";
+export { default as Item } from "./components/accordion-item.svelte";
+export { default as Header } from "./components/accordion-header.svelte";
+export { default as Trigger } from "./components/accordion-trigger.svelte";
+export { default as Content } from "./components/accordion-content.svelte";

package/dist/bits/accordion/index.d.ts

@@ -0,0 +1 @@
+export * as Accordion from "./exports.js";

package/dist/bits/accordion/index.js

@@ -0,0 +1 @@
+export * as Accordion from "./exports.js";

package/dist/bits/accordion/types.d.ts

@@ -0,0 +1,121 @@
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { Orientation } from "../../shared/index.js";
+export type BaseAccordionRootPropsWithoutHTML = {
+    /**
+     * Whether the accordion is disabled or not.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to loop through the accordion items when navigating
+     * with the arrow keys.
+     *
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * The orientation of the accordion.
+     *
+     * @default "vertical"
+     */
+    orientation?: Orientation;
+};
+export type AccordionRootSinglePropsWithoutHTML = BaseAccordionRootPropsWithoutHTML & {
+    /**
+     * The type of accordion. If set to `'multiple'`, the accordion will
+     * allow multiple items to be open at the same time. If set to
+     * `'single'`, the accordion will only allow a single item to be open.
+     *
+     * @required
+     */
+    type: "single";
+    /**
+     * The value of the currently open accordion item.
+     *
+     * @bindable
+     * @default ""
+     */
+    value?: string;
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<string>;
+};
+export type AccordionRootMultiplePropsWithoutHTML = BaseAccordionRootPropsWithoutHTML & {
+    /**
+     * The type of accordion. If set to `'multiple'`, the accordion will
+     * allow multiple items to be open at the same time. If set to
+     * `'single'`, the accordion will only allow a single item to be open.
+     *
+     * @required
+     */
+    type: "multiple";
+    /**
+     * The value of the currently open accordion item.
+     *
+     * @bindable
+     * @default []
+     */
+    value?: string[];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<string[]>;
+};
+export type AccordionRootPropsWithoutHTML = WithChild<AccordionRootSinglePropsWithoutHTML> | WithChild<AccordionRootMultiplePropsWithoutHTML>;
+export type AccordionRootProps = AccordionRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AccordionRootPropsWithoutHTML>;
+export type AccordionRootSingleProps = AccordionRootSinglePropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AccordionRootSinglePropsWithoutHTML>;
+export type AccordionMultipleProps = AccordionRootMultiplePropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AccordionRootMultiplePropsWithoutHTML>;
+export type AccordionTriggerPropsWithoutHTML = WithChild;
+export type AccordionTriggerProps = AccordionTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, AccordionTriggerPropsWithoutHTML>;
+export type AccordionContentSnippetProps = {
+    /**
+     * Whether the accordion content is active/open or not.
+     */
+    open: boolean;
+};
+export type AccordionContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<{
+    /**
+     * Whether to forcefully mount the content, regardless of the open state.
+     * This is useful if you want to use Svelte transitions for the content.
+     *
+     * @default true
+     */
+    forceMount?: boolean;
+    /**
+     * Whether to allow the browser to expand the content when searching for content
+     * within the panel via the browser's built-in search functionality.
+     *
+     * When `true`, this prop will override the `forceMount` prop.
+     *
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+}, AccordionContentSnippetProps>;
+export type AccordionContentProps = AccordionContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AccordionContentPropsWithoutHTML>;
+export type AccordionItemPropsWithoutHTML = WithChild<{
+    /**
+     * The value of the accordion item. This is used to identify if the item is open or closed.
+     * If not provided, a unique ID will be generated for this value.
+     */
+    value?: string;
+    /**
+     * Whether the accordion item is disabled, which prevents users from interacting with it.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}>;
+export type AccordionItemProps = AccordionItemPropsWithoutHTML & BitsPrimitiveDivAttributes;
+export type AccordionHeaderPropsWithoutHTML = WithChild<{
+    /**
+     * The level of the accordion header, applied to the element's `aria-level` attribute.
+     * This is used to indicate the hierarchical relationship between the accordion items.
+     *
+     * @default `3`
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}>;
+export type AccordionHeaderProps = AccordionHeaderPropsWithoutHTML & BitsPrimitiveDivAttributes;

package/dist/bits/accordion/types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/alert-dialog/components/alert-dialog-action.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { AlertDialogActionProps } from "../types.js";
+	import { DialogActionState } from "../../dialog/dialog.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogActionProps = $props();
+
+	const actionState = DialogActionState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, actionState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/bits/alert-dialog/components/alert-dialog-action.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AlertDialogAction: import("svelte").Component<import("../types.js").AlertDialogTriggerProps, {}, "ref">;
+type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
+export default AlertDialogAction;

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { AlertDialogCancelProps } from "../types.js";
+	import { AlertDialogCancelState } from "../../dialog/dialog.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		children,
+		child,
+		disabled = false,
+		...restProps
+	}: AlertDialogCancelProps = $props();
+
+	const cancelState = AlertDialogCancelState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		disabled: boxWith(() => Boolean(disabled)),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, cancelState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AlertDialogCancel: import("svelte").Component<import("../types.js").AlertDialogTriggerProps, {}, "ref">;
+type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
+export default AlertDialogCancel;

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { afterSleep, boxWith, mergeProps } from "svelte-toolbelt";
+	import type { AlertDialogContentProps } from "../types.js";
+	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
+	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
+	import FocusScope from "../../utilities/focus-scope/focus-scope.svelte";
+	import TextSelectionLayer from "../../utilities/text-selection-layer/text-selection-layer.svelte";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
+	import { DialogContentState } from "../../dialog/dialog.svelte.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		children,
+		child,
+		ref = $bindable(null),
+		forceMount = false,
+		interactOutsideBehavior = "ignore",
+		onCloseAutoFocus = noop,
+		onEscapeKeydown = noop,
+		onOpenAutoFocus = noop,
+		onInteractOutside = noop,
+		preventScroll = true,
+		trapFocus = true,
+		restoreScrollDelay = null,
+		...restProps
+	}: AlertDialogContentProps = $props();
+
+	const contentState = DialogContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if contentState.shouldRender || forceMount}
+	<FocusScope
+		ref={contentState.opts.ref}
+		loop
+		{trapFocus}
+		enabled={contentState.root.opts.open.current}
+		{onCloseAutoFocus}
+		onOpenAutoFocus={(e) => {
+			onOpenAutoFocus(e);
+			if (e.defaultPrevented) return;
+			e.preventDefault();
+			afterSleep(0, () => contentState.opts.ref.current?.focus());
+		}}
+	>
+		{#snippet focusScope({ props: focusScopeProps })}
+			<EscapeLayer
+				{...mergedProps}
+				enabled={contentState.root.opts.open.current}
+				ref={contentState.opts.ref}
+				onEscapeKeydown={(e) => {
+					onEscapeKeydown(e);
+					if (e.defaultPrevented) return;
+					contentState.root.handleClose();
+				}}
+			>
+				<DismissibleLayer
+					{...mergedProps}
+					ref={contentState.opts.ref}
+					enabled={contentState.root.opts.open.current}
+					{interactOutsideBehavior}
+					onInteractOutside={(e) => {
+						onInteractOutside(e);
+						if (e.defaultPrevented) return;
+						contentState.root.handleClose();
+					}}
+				>
+					<TextSelectionLayer
+						{...mergedProps}
+						ref={contentState.opts.ref}
+						enabled={contentState.root.opts.open.current}
+					>
+						{#if child}
+							{#if contentState.root.opts.open.current}
+								<ScrollLock {preventScroll} {restoreScrollDelay} />
+							{/if}
+							{@render child({
+								props: mergeProps(mergedProps, focusScopeProps),
+								...contentState.snippetProps,
+							})}
+						{:else}
+							<ScrollLock {preventScroll} />
+							<div {...mergeProps(mergedProps, focusScopeProps)}>
+								{@render children?.()}
+							</div>
+						{/if}
+					</TextSelectionLayer>
+				</DismissibleLayer>
+			</EscapeLayer>
+		{/snippet}
+	</FocusScope>
+{/if}

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AlertDialogContent: import("svelte").Component<import("../../dialog/types.js").DialogContentProps, {}, "ref">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
+export default AlertDialogContent;

package/dist/bits/alert-dialog/components/alert-dialog.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import type { AlertDialogRootProps } from "../types.js";
+	import { noop } from "../../../internal/noop.js";
+	import { DialogRootState } from "../../dialog/dialog.svelte.js";
+
+	let {
+		open = $bindable(false),
+		onOpenChange = noop,
+		onOpenChangeComplete = noop,
+		children,
+	}: AlertDialogRootProps = $props();
+
+	DialogRootState.create({
+		variant: boxWith(() => "alert-dialog"),
+		open: boxWith(
+			() => open,
+			(v) => {
+				open = v;
+				onOpenChange(v);
+			}
+		),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+	});
+</script>
+
+{@render children?.()}

package/dist/bits/alert-dialog/components/alert-dialog.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AlertDialog: import("svelte").Component<import("../types.js").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/bits/alert-dialog/exports.d.ts

@@ -0,0 +1,10 @@
+export { default as Root } from "./components/alert-dialog.svelte";
+export { default as Title } from "../dialog/components/dialog-title.svelte";
+export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/alert-dialog-content.svelte";
+export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
+export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
+export { default as Description } from "../dialog/components/dialog-description.svelte";
+export type { AlertDialogRootProps as RootProps, AlertDialogTitleProps as TitleProps, AlertDialogActionProps as ActionProps, AlertDialogCancelProps as CancelProps, AlertDialogPortalProps as PortalProps, AlertDialogContentProps as ContentProps, AlertDialogOverlayProps as OverlayProps, AlertDialogTriggerProps as TriggerProps, AlertDialogDescriptionProps as DescriptionProps, } from "./types.js";

package/dist/bits/alert-dialog/exports.js

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/alert-dialog.svelte";
+export { default as Title } from "../dialog/components/dialog-title.svelte";
+export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/alert-dialog-content.svelte";
+export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
+export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
+export { default as Description } from "../dialog/components/dialog-description.svelte";

package/dist/bits/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+export * as AlertDialog from "./exports.js";

package/dist/bits/alert-dialog/index.js

@@ -0,0 +1 @@
+export * as AlertDialog from "./exports.js";

package/dist/bits/alert-dialog/types.d.ts

@@ -0,0 +1,4 @@
+import type { DialogContentProps, DialogContentPropsWithoutHTML } from "../../types.js";
+export type { DialogRootPropsWithoutHTML as AlertDialogRootPropsWithoutHTML, DialogRootProps as AlertDialogRootProps, DialogClosePropsWithoutHTML as AlertDialogActionPropsWithoutHTML, DialogCloseProps as AlertDialogActionProps, DialogClosePropsWithoutHTML as AlertDialogCancelPropsWithoutHTML, DialogCloseProps as AlertDialogCancelProps, DialogPortalPropsWithoutHTML as AlertDialogPortalPropsWithoutHTML, DialogPortalProps as AlertDialogPortalProps, DialogOverlayPropsWithoutHTML as AlertDialogOverlayPropsWithoutHTML, DialogOverlayProps as AlertDialogOverlayProps, DialogTitlePropsWithoutHTML as AlertDialogTitlePropsWithoutHTML, DialogTitleProps as AlertDialogTitleProps, DialogDescriptionPropsWithoutHTML as AlertDialogDescriptionPropsWithoutHTML, DialogDescriptionProps as AlertDialogDescriptionProps, DialogTriggerPropsWithoutHTML as AlertDialogTriggerPropsWithoutHTML, DialogTriggerProps as AlertDialogTriggerProps, } from "../dialog/types.js";
+export type AlertDialogContentPropsWithoutHTML = Omit<DialogContentPropsWithoutHTML, "onInteractOutside">;
+export type AlertDialogContentProps = DialogContentProps;

package/dist/bits/alert-dialog/types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/aspect-ratio/aspect-ratio.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+import type { RefAttachment, WithRefOpts } from "../../internal/types.js";
+interface AspectRatioRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    ratio: number;
+}> {
+}
+export declare class AspectRatioRootState {
+    static create(opts: AspectRatioRootStateOpts): AspectRatioRootState;
+    readonly opts: AspectRatioRootStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: AspectRatioRootStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly style: {
+            readonly position: "absolute";
+            readonly top: 0;
+            readonly right: 0;
+            readonly bottom: 0;
+            readonly left: 0;
+        };
+    };
+}
+export {};

package/dist/bits/aspect-ratio/aspect-ratio.svelte.js

@@ -0,0 +1,29 @@
+import { attachRef } from "svelte-toolbelt";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const aspectRatioAttrs = createBitsAttrs({
+    component: "aspect-ratio",
+    parts: ["root"],
+});
+export class AspectRatioRootState {
+    static create(opts) {
+        return new AspectRatioRootState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        style: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+        },
+        [aspectRatioAttrs.root]: "",
+        ...this.attachment,
+    }));
+}

package/dist/bits/aspect-ratio/components/aspect-ratio.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { AspectRatioRootProps } from "../types.js";
+	import { AspectRatioRootState } from "../aspect-ratio.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		ratio = 1,
+		children,
+		child,
+		...restProps
+	}: AspectRatioRootProps = $props();
+
+	const rootState = AspectRatioRootState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		ratio: boxWith(() => ratio),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+<div style:position="relative" style:width="100%" style:padding-bottom="{ratio ? 100 / ratio : 0}%">
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+</div>

package/dist/bits/aspect-ratio/components/aspect-ratio.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AspectRatioRootProps } from "../types.js";
+declare const AspectRatio: import("svelte").Component<AspectRatioRootProps, {}, "ref">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;

package/dist/bits/aspect-ratio/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/aspect-ratio.svelte";
+export type { AspectRatioRootProps as RootProps } from "./types.js";

package/dist/bits/aspect-ratio/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/aspect-ratio.svelte";

package/dist/bits/aspect-ratio/index.d.ts

@@ -0,0 +1 @@
+export * as AspectRatio from "./exports.js";

package/dist/bits/aspect-ratio/index.js

@@ -0,0 +1 @@
+export * as AspectRatio from "./exports.js";

package/dist/bits/aspect-ratio/types.d.ts

@@ -0,0 +1,11 @@
+import type { WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+export type AspectRatioRootPropsWithoutHTML = WithChild<{
+    /**
+     * The aspect ratio of the image.
+     *
+     * @defaultValue 1
+     */
+    ratio?: number;
+}>;
+export type AspectRatioRootProps = AspectRatioRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AspectRatioRootPropsWithoutHTML>;

package/dist/bits/aspect-ratio/types.js

@@ -0,0 +1 @@
+export {};