sheer-ui 0.4.2 → 0.5.0

package/dist/components/pin-input/usePasswordManager.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type DOMContext, type ReadableBox, type WritableBox } from '../../internal/tools/index.js';
+import type { PinInputRootPropsWithoutHTML } from './types.js';
+type UsePasswordManagerBadgeProps = {
+    containerRef: WritableBox<HTMLElement | null>;
+    inputRef: WritableBox<HTMLInputElement | null>;
+    pushPasswordManagerStrategy: ReadableBox<PinInputRootPropsWithoutHTML['pushPasswordManagerStrategy']>;
+    isFocused: () => boolean;
+    domContext: DOMContext;
+};
+export declare function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, domContext, }: UsePasswordManagerBadgeProps): {
+    readonly hasPwmBadge: boolean;
+    readonly willPushPwmBadge: boolean;
+    PWM_BADGE_SPACE_WIDTH: "40px";
+};
+export {};

package/dist/components/pin-input/usePasswordManager.svelte.js

@@ -0,0 +1,90 @@
+import { getWindow } from '../../internal/tools/index.js';
+const PWM_BADGE_MARGIN_RIGHT = 18;
+const PWM_BADGE_SPACE_WIDTH_PX = 40;
+const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px`;
+const PASSWORD_MANAGER_SELECTORS = [
+    '[data-lastpass-icon-root]', // LastPass,
+    'com-1password-button', // 1Password,
+    '[data-dashlanecreated]', // Dashlane,
+    '[style$="2147483647 !important;"]', // Bitwarden
+].join(',');
+export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, domContext, }) {
+    let hasPwmBadge = $state(false);
+    let hasPwmBadgeSpace = $state(false);
+    let done = $state(false);
+    function willPushPwmBadge() {
+        const strategy = pushPasswordManagerStrategy.current;
+        if (strategy === 'none')
+            return false;
+        const increaseWidthCase = strategy === 'increase-width' && hasPwmBadge && hasPwmBadgeSpace;
+        return increaseWidthCase;
+    }
+    function trackPwmBadge() {
+        const container = containerRef.current;
+        const input = inputRef.current;
+        if (!container || !input || done || pushPasswordManagerStrategy.current === 'none')
+            return;
+        const elementToCompare = container;
+        // get the top right-center point of the container
+        // that is usually where most password managers place their badge
+        const rightCornerX = elementToCompare.getBoundingClientRect().left + elementToCompare.offsetWidth;
+        const centeredY = elementToCompare.getBoundingClientRect().top + elementToCompare.offsetHeight / 2;
+        const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
+        const y = centeredY;
+        // do an extra search to check for all the password manager badges
+        const passwordManagerStrategy = domContext.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
+        // if no password manager is detected, dispatch document.elementFromPoint to
+        // identify the badges
+        if (passwordManagerStrategy.length === 0) {
+            const maybeBadgeEl = domContext.getDocument().elementFromPoint(x, y);
+            // if the found element is the container,
+            // then it is not a badge, most times there is no badge in this case
+            if (maybeBadgeEl === container)
+                return;
+        }
+        hasPwmBadge = true;
+        done = true;
+    }
+    $effect(() => {
+        const container = containerRef.current;
+        if (!container || pushPasswordManagerStrategy.current === 'none')
+            return;
+        // check if the pwm area is fully visible
+        function checkHasSpace() {
+            const viewportWidth = getWindow(container).innerWidth;
+            const distanceToRightEdge = viewportWidth - container.getBoundingClientRect().right;
+            hasPwmBadgeSpace = distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX;
+        }
+        checkHasSpace();
+        const interval = setInterval(checkHasSpace, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    });
+    $effect(() => {
+        const focused = isFocused() || domContext.getActiveElement() === inputRef.current;
+        if (pushPasswordManagerStrategy.current === 'none' || !focused)
+            return;
+        const t1 = setTimeout(trackPwmBadge, 0);
+        const t2 = setTimeout(trackPwmBadge, 2000);
+        const t3 = setTimeout(trackPwmBadge, 5000);
+        const t4 = setTimeout(() => {
+            done = true;
+        }, 6000);
+        return () => {
+            clearTimeout(t1);
+            clearTimeout(t2);
+            clearTimeout(t3);
+            clearTimeout(t4);
+        };
+    });
+    return {
+        get hasPwmBadge() {
+            return hasPwmBadge;
+        },
+        get willPushPwmBadge() {
+            return willPushPwmBadge();
+        },
+        PWM_BADGE_SPACE_WIDTH,
+    };
+}

package/dist/components/popover/components/popover-close.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PopoverCloseProps } from '../types.js';
+	import { PopoverCloseState } from '../popover.svelte.js';
+
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { child, children, id = createId(uid), ref = $bindable(null), ...restProps }: PopoverCloseProps = $props();
+
+	const closeState = PopoverCloseState.create({
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			restProps,
+			{
+				'data-slot': 'popover-close',
+			},
+			closeState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/popover/components/popover-close.svelte.d.ts

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

package/dist/components/popover/components/popover-content.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PopoverContentProps } from '../types.js';
+	import { PopoverContentState } from '../popover.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { useNativePopoverLifecycle } from '../../../internal/native-popover.svelte.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		ref = $bindable(null),
+		id = createId(uid),
+		side = 'bottom',
+		align = 'center',
+		customAnchor = null,
+		style,
+		// No native equivalent — accepted for API compatibility but intentionally ignored.
+		// Native popovers don't trap focus or lock scroll (ARIA-correct for a non-modal
+		// popover), and the content is always mounted (the popover toggles `display` itself),
+		// so trapFocus / preventScroll / forceMount / the FU auto-focus hooks are no-ops.
+		// Dismissal is the UA's (`popover="auto"` light dismiss + top-layer Escape), so the
+		// onInteractOutside / onEscapeKeydown interception hooks are no-ops too.
+		// The remaining FU-only positioning props (sideOffset, avoidCollisions, …) ride in
+		// restProps; native CSS `anchor()` positioning ignores them.
+		trapFocus = true,
+		preventScroll = false,
+		forceMount = false,
+		onOpenAutoFocus = () => {},
+		onCloseAutoFocus = () => {},
+		onInteractOutside = () => {},
+		onEscapeKeydown = () => {},
+		...restProps
+	}: PopoverContentProps = $props();
+
+	const contentState = PopoverContentState.create({
+		get id() {
+			return id;
+		},
+		get customAnchor() {
+			return customAnchor;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+	});
+
+	const lifecycleProps = useNativePopoverLifecycle(contentState, { anchor: () => customAnchor, mode: 'auto' });
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'popover-content',
+				class:
+					'bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden transition-[opacity,scale,translate,display,overlay] transition-discrete opacity-0 scale-95 open:data-[state=open]:opacity-100 open:data-[state=open]:scale-100 starting:open:data-[state=open]:opacity-0 starting:open:data-[state=open]:scale-95',
+			},
+			restProps,
+			contentState.props,
+			{ style },
+			lifecycleProps,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...contentState.snippetProps })}
+{:else}
+	<div {...mergedProps} bind:this={ref} data-side={side} data-align={align}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/popover/components/popover-content.svelte.d.ts

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

package/dist/components/popover/components/popover-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../internal/utils.js';
+declare const PopoverHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverHeader = ReturnType<typeof PopoverHeader>;
+export default PopoverHeader;

package/dist/components/popover/components/popover-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../internal/utils.js';
+declare const PopoverTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverTitle = ReturnType<typeof PopoverTitle>;
+export default PopoverTitle;

package/dist/components/popover/components/popover-trigger.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PopoverTriggerProps } from '../types.js';
+	import { PopoverTriggerState } from '../popover.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		type = 'button',
+		disabled = false,
+		openOnHover = false,
+		openDelay = 700,
+		closeDelay = 300,
+		...restProps
+	}: PopoverTriggerProps = $props();
+
+	const triggerState = PopoverTriggerState.create({
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return Boolean(disabled);
+		},
+		get openOnHover() {
+			return openOnHover;
+		},
+		get openDelay() {
+			return openDelay;
+		},
+		get closeDelay() {
+			return closeDelay;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+	});
+
+	const mergedProps = $derived(mergeProps({ 'data-slot': 'popover-trigger' }, restProps, triggerState.props, { type }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/popover/components/popover-trigger.svelte.d.ts

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

package/dist/components/popover/components/popover.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { PopoverRootProps } from '../types.js';
+	import { PopoverRootState } from '../popover.svelte.js';
+	import { OpenCell } from '../../../internal/open-cell.svelte.js';
+
+	let { open = false, onOpenChangeComplete = () => {}, state, children }: PopoverRootProps = $props();
+
+	// Root owns both the machinery and the cell; `open` (the prop) is the cell's
+	// derivation source, and the children snippet is the only way the cell leaves.
+	// A caller-built `state` cell (with its own source/writer) takes over both roles.
+	// The cell's identity is fixed at mount — swapping `state` later is not supported.
+	// svelte-ignore state_referenced_locally
+	const popover = state ?? new OpenCell(() => open);
+	PopoverRootState.create({
+		get open() {
+			return popover.open;
+		},
+		set open(value) {
+			popover.open = value;
+		},
+		get onOpenChangeComplete() {
+			return onOpenChangeComplete;
+		},
+	});
+</script>
+
+{@render children?.(popover)}

package/dist/components/popover/components/popover.svelte.d.ts

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

package/dist/components/popover/exports.d.ts

@@ -0,0 +1,6 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../../internal/portal/portal.svelte";
+export type { PopoverRootProps as RootProps, PopoverContentProps as ContentProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, PopoverPortalProps as PortalProps, } from "./types.js";

package/dist/components/popover/exports.js

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../../internal/portal/portal.svelte";

package/dist/components/popover/index.js

@@ -0,0 +1,2 @@
+export * as Popover from './exports.js';
+export * from './exports.js';

package/dist/components/popover/popover.svelte.d.ts

@@ -0,0 +1,103 @@
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, RefOpts } from '../../internal/types.js';
+import type { Measurable } from '../../internal/floating-layer/index.js';
+interface PopoverRootStateOpts {
+    open: boolean;
+    readonly onOpenChangeComplete: OnChangeFn<boolean>;
+}
+export declare class PopoverRootState {
+    #private;
+    static create(opts: PopoverRootStateOpts): PopoverRootState;
+    readonly opts: PopoverRootStateOpts;
+    contentNode: HTMLElement | null;
+    triggerNode: HTMLElement | null;
+    openedViaHover: boolean;
+    hasInteractedWithContent: boolean;
+    hoverCooldown: boolean;
+    constructor(opts: PopoverRootStateOpts);
+    get closeDelay(): number;
+    setCloseDelaySource(source: () => number): void;
+    toggleOpen(): void;
+    handleClose(): void;
+    handleHoverOpen(): void;
+    handleHoverClose(): void;
+    handleDelayedHoverClose(): void;
+    cancelDelayedClose(): void;
+    markInteraction(): void;
+}
+interface PopoverTriggerStateOpts extends RefOpts {
+    readonly disabled: boolean;
+    readonly openOnHover: boolean;
+    readonly openDelay: number;
+    readonly closeDelay: number;
+}
+export declare class PopoverTriggerState {
+    #private;
+    static create(opts: PopoverTriggerStateOpts): PopoverTriggerState;
+    readonly opts: PopoverTriggerStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverTriggerStateOpts, root: PopoverRootState);
+    onpointerenter(e: BitsPointerEvent): void;
+    onpointerleave(e: BitsPointerEvent): void;
+    onpointerdown(_: BitsPointerEvent): void;
+    onclick(e: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly 'aria-haspopup': "dialog";
+        readonly 'aria-expanded': "true" | "false";
+        readonly 'data-state': "closed" | "open";
+        readonly 'aria-controls': string | undefined;
+        readonly disabled: boolean;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onpointerdown: (_: BitsPointerEvent) => void;
+        readonly onpointerenter: (e: BitsPointerEvent) => void;
+        readonly onpointerleave: (e: BitsPointerEvent) => void;
+    };
+}
+interface PopoverContentStateOpts extends RefOpts {
+    readonly customAnchor: string | HTMLElement | null | Measurable;
+}
+export declare class PopoverContentState {
+    static create(opts: PopoverContentStateOpts): PopoverContentState;
+    readonly opts: PopoverContentStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverContentStateOpts, root: PopoverRootState);
+    onpointerdown(_: BitsPointerEvent): void;
+    onfocusin(e: BitsFocusEvent): void;
+    onpointerenter(e: BitsPointerEvent): void;
+    onpointerleave(e: BitsPointerEvent): void;
+    dismiss: () => void;
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly tabindex: -1;
+        readonly 'data-state': "closed" | "open";
+        readonly onpointerdown: (_: BitsPointerEvent) => void;
+        readonly onfocusin: (e: BitsFocusEvent) => void;
+        readonly onpointerenter: (e: BitsPointerEvent) => void;
+        readonly onpointerleave: (e: BitsPointerEvent) => void;
+    };
+}
+interface PopoverCloseStateOpts extends RefOpts {
+}
+export declare class PopoverCloseState {
+    static create(opts: PopoverCloseStateOpts): PopoverCloseState;
+    readonly opts: PopoverCloseStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverCloseStateOpts, root: PopoverRootState);
+    onclick(_: BitsPointerEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly onclick: (_: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly type: "button";
+    };
+}
+export {};