@johly/bits-ui 2.18.1

package/dist/bits/label/label.svelte.js

@@ -0,0 +1,28 @@
+import { attachRef } from "svelte-toolbelt";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const labelAttrs = createBitsAttrs({
+    component: "label",
+    parts: ["root"],
+});
+export class LabelRootState {
+    static create(opts) {
+        return new LabelRootState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+        this.onmousedown = this.onmousedown.bind(this);
+    }
+    onmousedown(e) {
+        if (e.detail > 1)
+            e.preventDefault();
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [labelAttrs.root]: "",
+        onmousedown: this.onmousedown,
+        ...this.attachment,
+    }));
+}

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

@@ -0,0 +1,4 @@
+import type { WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveLabelAttributes } from "../../shared/attributes.js";
+export type LabelRootPropsWithoutHTML = WithChild;
+export type LabelRootProps = LabelRootPropsWithoutHTML & Without<BitsPrimitiveLabelAttributes, LabelRootPropsWithoutHTML>;

package/dist/bits/label/types.js

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

package/dist/bits/link-preview/components/link-preview-content-static.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { LinkPreviewContentStaticProps } from "../types.js";
+	import { LinkPreviewContentState } from "../link-preview.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import Mounted from "../../utilities/mounted.svelte";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		forceMount = false,
+		style,
+		...restProps
+	}: LinkPreviewContentStaticProps = $props();
+
+	const contentState = LinkPreviewContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		enabled={contentState.root.opts.open.current}
+		isStatic
+		{id}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={true}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("link-preview") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+			<Mounted bind:mounted={contentState.root.contentMounted} />
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		open={contentState.root.opts.open.current}
+		isStatic
+		{id}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={false}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("link-preview") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/link-preview/components/link-preview-content-static.svelte.d.ts

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

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { LinkPreviewContentProps } from "../types.js";
+	import { LinkPreviewContentState } from "../link-preview.svelte.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import Mounted from "../../utilities/mounted.svelte";
+	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		side = "top",
+		sideOffset = 0,
+		align = "center",
+		avoidCollisions = true,
+		arrowPadding = 0,
+		sticky = "partial",
+		hideWhenDetached = false,
+		collisionPadding = 0,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		forceMount = false,
+		style,
+		...restProps
+	}: LinkPreviewContentProps = $props();
+
+	const contentState = LinkPreviewContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+	});
+
+	const floatingProps = $derived({
+		side,
+		sideOffset,
+		align,
+		avoidCollisions,
+		arrowPadding,
+		sticky,
+		hideWhenDetached,
+		collisionPadding,
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		enabled={contentState.root.opts.open.current}
+		{id}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={true}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("link-preview") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+			<Mounted bind:mounted={contentState.root.contentMounted} />
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		open={contentState.root.opts.open.current}
+		{id}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={false}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("link-preview") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+			<Mounted bind:mounted={contentState.root.contentMounted} />
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/link-preview/components/link-preview-content.svelte.d.ts

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

package/dist/bits/link-preview/components/link-preview-trigger.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { LinkPreviewTriggerProps } from "../types.js";
+	import { LinkPreviewTriggerState } from "../link-preview.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		child,
+		children,
+		...restProps
+	}: LinkPreviewTriggerProps = $props();
+
+	const triggerState = LinkPreviewTriggerState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+</script>
+
+<FloatingLayer.Anchor {id} ref={triggerState.opts.ref}>
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<a {...mergedProps}>
+			{@render children?.()}
+		</a>
+	{/if}
+</FloatingLayer.Anchor>

package/dist/bits/link-preview/components/link-preview-trigger.svelte.d.ts

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

package/dist/bits/link-preview/components/link-preview.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import type { LinkPreviewRootProps } from "../types.js";
+	import { LinkPreviewRootState } from "../link-preview.svelte.js";
+	import { noop } from "../../../internal/noop.js";
+	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
+
+	let {
+		disabled = false,
+		open = $bindable(false),
+		onOpenChange = noop,
+		onOpenChangeComplete = noop,
+		openDelay = 700,
+		closeDelay = 300,
+		children,
+	}: LinkPreviewRootProps = $props();
+
+	LinkPreviewRootState.create({
+		disabled: boxWith(() => disabled),
+		open: boxWith(
+			() => open,
+			(v) => {
+				open = v;
+				onOpenChange(v);
+			}
+		),
+		openDelay: boxWith(() => openDelay),
+		closeDelay: boxWith(() => closeDelay),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+	});
+</script>
+
+<FloatingLayer.Root>
+	{@render children?.()}
+</FloatingLayer.Root>

package/dist/bits/link-preview/components/link-preview.svelte.d.ts

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

package/dist/bits/link-preview/exports.d.ts

@@ -0,0 +1,7 @@
+export { default as Arrow } from "../utilities/floating-layer/components/floating-layer-arrow.svelte";
+export { default as Root } from "./components/link-preview.svelte";
+export { default as Content } from "./components/link-preview-content.svelte";
+export { default as Trigger } from "./components/link-preview-trigger.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as ContentStatic } from "./components/link-preview-content-static.svelte";
+export type { LinkPreviewRootProps as RootProps, LinkPreviewArrowProps as ArrowProps, LinkPreviewContentProps as ContentProps, LinkPreviewContentStaticProps as ContentStaticProps, LinkPreviewTriggerProps as TriggerProps, LinkPreviewPortalProps as PortalProps, } from "./types.js";

package/dist/bits/link-preview/exports.js

@@ -0,0 +1,6 @@
+export { default as Arrow } from "../utilities/floating-layer/components/floating-layer-arrow.svelte";
+export { default as Root } from "./components/link-preview.svelte";
+export { default as Content } from "./components/link-preview-content.svelte";
+export { default as Trigger } from "./components/link-preview-trigger.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as ContentStatic } from "./components/link-preview-content-static.svelte";

package/dist/bits/link-preview/index.d.ts

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

package/dist/bits/link-preview/index.js

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

package/dist/bits/link-preview/link-preview.svelte.d.ts

@@ -0,0 +1,96 @@
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+interface LinkPreviewRootStateOpts extends WritableBoxedValues<{
+    open: boolean;
+}>, ReadableBoxedValues<{
+    disabled: boolean;
+    openDelay: number;
+    closeDelay: number;
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}> {
+}
+export declare class LinkPreviewRootState {
+    static create(opts: LinkPreviewRootStateOpts): LinkPreviewRootState;
+    readonly opts: LinkPreviewRootStateOpts;
+    hasSelection: boolean;
+    isPointerDownOnContent: boolean;
+    containsSelection: boolean;
+    timeout: number | null;
+    contentNode: HTMLElement | null;
+    contentMounted: boolean;
+    contentPresence: PresenceManager;
+    triggerNode: HTMLElement | null;
+    isOpening: boolean;
+    domContext: DOMContext;
+    constructor(opts: LinkPreviewRootStateOpts);
+    clearTimeout(): void;
+    handleOpen(): void;
+    immediateClose(): void;
+    handleClose(): void;
+}
+interface LinkPreviewTriggerStateOpts extends WithRefOpts {
+}
+export declare class LinkPreviewTriggerState {
+    static create(opts: LinkPreviewTriggerStateOpts): LinkPreviewTriggerState;
+    readonly opts: LinkPreviewTriggerStateOpts;
+    readonly root: LinkPreviewRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: LinkPreviewTriggerStateOpts, root: LinkPreviewRootState);
+    onpointerenter(e: BitsPointerEvent): void;
+    onpointerleave(e: BitsPointerEvent): void;
+    onfocus(e: BitsFocusEvent): void;
+    onblur(_: BitsFocusEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly "aria-haspopup": "dialog";
+        readonly "aria-expanded": "true" | "false";
+        readonly "data-state": "open" | "closed";
+        readonly "aria-controls": string | undefined;
+        readonly role: "button";
+        readonly onpointerenter: (e: BitsPointerEvent) => void;
+        readonly onfocus: (e: BitsFocusEvent) => void;
+        readonly onblur: (_: BitsFocusEvent) => void;
+        readonly onpointerleave: (e: BitsPointerEvent) => void;
+    };
+}
+interface LinkPreviewContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+}> {
+}
+export declare class LinkPreviewContentState {
+    static create(opts: LinkPreviewContentStateOpts): LinkPreviewContentState;
+    readonly opts: LinkPreviewContentStateOpts;
+    readonly root: LinkPreviewRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: LinkPreviewContentStateOpts, root: LinkPreviewRootState);
+    onpointerdown(e: BitsPointerEvent): void;
+    onpointerenter(e: BitsPointerEvent): void;
+    onfocusout(e: BitsFocusEvent): void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onOpenAutoFocus: (e: Event) => void;
+    onCloseAutoFocus: (e: Event) => void;
+    get shouldRender(): boolean;
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly onpointerdown: (e: BitsPointerEvent) => void;
+        readonly onpointerenter: (e: BitsPointerEvent) => void;
+        readonly onfocusout: (e: BitsFocusEvent) => void;
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly tabindex: -1;
+        readonly "data-state": "open" | "closed";
+    };
+    readonly popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+        onOpenAutoFocus: (e: Event) => void;
+        onCloseAutoFocus: (e: Event) => void;
+    };
+}
+export {};