@zvk/ui 0.1.0

package/dist/internal/floating/index.d.ts

@@ -0,0 +1,27 @@
+import type * as React from "react";
+import type { FloatingPlacement } from "./floating-types.js";
+export type { FloatingAlign, FloatingBoundary, FloatingPlacement, FloatingPositionResult, FloatingRect, FloatingSide, FloatingStrategy, ComputeFloatingPositionOptions } from "./floating-types.js";
+export type UseFloatingPositionOptions = {
+    open: boolean;
+    placement?: import("./floating-types.js").FloatingPlacement;
+    strategy?: import("./floating-types.js").FloatingStrategy;
+    offset?: number;
+    collisionPadding?: number;
+    matchReferenceWidth?: boolean;
+    maxHeight?: number;
+    flip?: boolean;
+    shift?: boolean;
+    boundary?: import("./floating-types.js").FloatingBoundary;
+};
+export interface UseFloatingPositionResult {
+    referenceRef: (node: HTMLElement | null) => void;
+    floatingRef: (node: HTMLElement | null) => void;
+    floatingStyle: React.CSSProperties & Record<`--${string}`, string>;
+    placement: FloatingPlacement;
+    updatePosition: () => void;
+}
+export { autoUpdateFloating } from "./auto-update.js";
+export { computeFloatingPosition } from "./compute-position.js";
+export { detectOverflow } from "./detect-overflow.js";
+export { getOppositeSide, parsePlacement, buildPlacement, clamp } from "./middleware.js";
+export { useFloatingPosition } from "./use-floating-position.js";

package/dist/internal/floating/index.js

@@ -0,0 +1,5 @@
+export { autoUpdateFloating } from "./auto-update.js";
+export { computeFloatingPosition } from "./compute-position.js";
+export { detectOverflow } from "./detect-overflow.js";
+export { getOppositeSide, parsePlacement, buildPlacement, clamp } from "./middleware.js";
+export { useFloatingPosition } from "./use-floating-position.js";

package/dist/internal/floating/middleware.d.ts

@@ -0,0 +1,11 @@
+import type { FloatingAlign, FloatingPlacement, FloatingSide } from "./floating-types.js";
+export interface ParsedPlacement {
+    side: FloatingSide;
+    align: FloatingAlign;
+}
+export declare function isFloatingSide(value: string): value is FloatingSide;
+export declare function parsePlacement(placement: FloatingPlacement): ParsedPlacement;
+export declare function getOppositeSide(side: FloatingSide): FloatingSide;
+export declare function buildPlacement(side: FloatingSide, align: FloatingAlign): FloatingPlacement;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function normalizePlacement(placement: FloatingPlacement): FloatingPlacement;

package/dist/internal/floating/middleware.js

@@ -0,0 +1,42 @@
+export function isFloatingSide(value) {
+    return value === "top" || value === "right" || value === "bottom" || value === "left";
+}
+export function parsePlacement(placement) {
+    const [side, align] = placement.split("-");
+    if (!isFloatingSide(side)) {
+        return { side: "bottom", align: "center" };
+    }
+    if (align === "start" || align === "end") {
+        return { side, align };
+    }
+    return { side, align: "center" };
+}
+export function getOppositeSide(side) {
+    switch (side) {
+        case "top": {
+            return "bottom";
+        }
+        case "right": {
+            return "left";
+        }
+        case "bottom": {
+            return "top";
+        }
+        case "left": {
+            return "right";
+        }
+    }
+}
+export function buildPlacement(side, align) {
+    if (align === "center") {
+        return side;
+    }
+    return `${side}-${align}`;
+}
+export function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+export function normalizePlacement(placement) {
+    const parsed = parsePlacement(placement);
+    return buildPlacement(parsed.side, parsed.align);
+}

package/dist/internal/floating/use-floating-position.d.ts

@@ -0,0 +1,2 @@
+import type { UseFloatingPositionOptions, UseFloatingPositionResult } from "./index.js";
+export declare function useFloatingPosition(options: UseFloatingPositionOptions): UseFloatingPositionResult;

package/dist/internal/floating/use-floating-position.js

@@ -0,0 +1,113 @@
+"use client";
+import * as React from "react";
+import { computeFloatingPosition } from "./compute-position.js";
+import { autoUpdateFloating } from "./auto-update.js";
+export function useFloatingPosition(options) {
+    const { open, placement = "bottom", strategy = "absolute", offset = 0, collisionPadding = 0, matchReferenceWidth = false, maxHeight, flip = true, shift = true, boundary } = options;
+    const [referenceEl, setReferenceEl] = React.useState(null);
+    const [floatingEl, setFloatingEl] = React.useState(null);
+    const [style, setStyle] = React.useState({
+        position: strategy
+    });
+    const [resolvedPlacement, setResolvedPlacement] = React.useState((placement ?? "bottom"));
+    const referenceRef = React.useCallback((node) => {
+        setReferenceEl(node);
+    }, []);
+    const floatingRef = React.useCallback((node) => {
+        setFloatingEl(node);
+    }, []);
+    const buildEnvironment = React.useCallback(() => {
+        if (referenceEl === null || floatingEl === null || typeof window === "undefined") {
+            return null;
+        }
+        const referenceRect = referenceEl.getBoundingClientRect();
+        const floatingRect = floatingEl.getBoundingClientRect();
+        const viewport = {
+            x: strategy === "fixed" ? 0 : window.scrollX,
+            y: strategy === "fixed" ? 0 : window.scrollY,
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+        const safeBoundary = boundary ?? viewport;
+        const shiftedReferenceRect = {
+            x: (strategy === "absolute" ? referenceRect.left + viewport.x : referenceRect.left),
+            y: (strategy === "absolute" ? referenceRect.top + viewport.y : referenceRect.top),
+            width: referenceRect.width,
+            height: referenceRect.height
+        };
+        return {
+            boundary: {
+                ...safeBoundary,
+                x: safeBoundary.x,
+                y: safeBoundary.y
+            },
+            referenceRect: shiftedReferenceRect,
+            floatingRect: {
+                x: 0,
+                y: 0,
+                width: floatingRect.width,
+                height: floatingRect.height
+            }
+        };
+    }, [boundary, referenceEl, floatingEl, strategy]);
+    const updatePosition = React.useCallback(() => {
+        const env = buildEnvironment();
+        if (env === null) {
+            return;
+        }
+        const computed = computeFloatingPosition({
+            reference: env.referenceRect,
+            floating: env.floatingRect,
+            boundary: env.boundary,
+            placement: placement,
+            strategy: strategy,
+            offset,
+            collisionPadding,
+            matchReferenceWidth,
+            ...(maxHeight === undefined ? {} : { maxHeight }),
+            flip,
+            shift
+        });
+        setStyle({
+            position: computed.strategy,
+            left: `${computed.x}px`,
+            top: `${computed.y}px`,
+            width: matchReferenceWidth ? `${referenceEl?.offsetWidth ?? computed.referenceWidth}px` : "auto",
+            "--liano-floating-available-width": `${computed.availableWidth}px`,
+            "--liano-floating-available-height": `${computed.availableHeight}px`
+        });
+        setResolvedPlacement(computed.placement);
+    }, [
+        buildEnvironment,
+        placement,
+        strategy,
+        offset,
+        collisionPadding,
+        matchReferenceWidth,
+        maxHeight,
+        flip,
+        shift,
+        referenceEl
+    ]);
+    React.useEffect(() => {
+        if (!open) {
+            setResolvedPlacement((placement ?? "bottom"));
+        }
+    }, [open, placement]);
+    React.useEffect(() => {
+        const autoCleanup = autoUpdateFloating({
+            enabled: open,
+            reference: referenceEl,
+            floating: floatingEl,
+            update: updatePosition
+        });
+        return autoCleanup;
+    }, [open, referenceEl, floatingEl, updatePosition]);
+    return {
+        referenceRef,
+        floatingRef,
+        floatingStyle: style,
+        placement: resolvedPlacement,
+        updatePosition
+    };
+}

package/dist/internal/focus/focus-scope.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+interface FocusScopeProps {
+    children: React.ReactNode;
+    trapped?: boolean;
+    active?: boolean;
+    initialFocus?: HTMLElement | null;
+    restoreFocus?: boolean;
+}
+export declare function FocusScope({ children, trapped, active, initialFocus, restoreFocus }: FocusScopeProps): React.ReactElement;
+export type { FocusScopeProps };

package/dist/internal/focus/focus-scope.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { getFocusableElements, focusFirst, focusNext } from "./focus-utils.js";
+export function FocusScope({ children, trapped = false, active = true, initialFocus, restoreFocus = true }) {
+    const containerRef = React.useRef(null);
+    const previouslyFocused = React.useRef(null);
+    React.useEffect(() => {
+        if (!active || containerRef.current === null) {
+            return;
+        }
+        previouslyFocused.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        if (initialFocus) {
+            initialFocus.focus();
+            return;
+        }
+        const focusables = getFocusableElements(containerRef.current);
+        focusables[0]?.focus();
+    }, [active, initialFocus]);
+    React.useEffect(() => {
+        if (!active || containerRef.current === null || !trapped) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            if (event.key !== "Tab") {
+                return;
+            }
+            const focusables = getFocusableElements(containerRef.current);
+            if (focusables.length === 0) {
+                return;
+            }
+            const activeElement = document.activeElement;
+            if (activeElement === null) {
+                focusables[0]?.focus();
+                event.preventDefault();
+                return;
+            }
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target) &&
+                !containerRef.current.contains(activeElement)) {
+                return;
+            }
+            if (event.shiftKey) {
+                focusNext(containerRef.current, "prev");
+            }
+            else {
+                focusNext(containerRef.current, "next");
+            }
+            event.preventDefault();
+        };
+        const listener = (event) => handleKeyDown(event);
+        document.addEventListener("keydown", listener);
+        return () => {
+            document.removeEventListener("keydown", listener);
+        };
+    }, [active, trapped]);
+    React.useEffect(() => {
+        return () => {
+            if (!restoreFocus) {
+                return;
+            }
+            if (previouslyFocused.current && document.body.contains(previouslyFocused.current)) {
+                previouslyFocused.current.focus();
+            }
+        };
+    }, [restoreFocus]);
+    return _jsx("div", { ref: containerRef, children: children });
+}

package/dist/internal/focus/focus-utils.d.ts

@@ -0,0 +1,9 @@
+export declare function isElementTabbable(element: Element): element is HTMLElement;
+export declare function getFocusableElements(root: ParentNode): HTMLElement[];
+export declare function focusFirst(root: ParentNode, options?: {
+    preventScroll?: boolean;
+}): HTMLElement | null;
+export declare function focusLast(root: ParentNode, options?: {
+    preventScroll?: boolean;
+}): HTMLElement | null;
+export declare function focusNext(root: ParentNode, direction?: "next" | "prev"): HTMLElement | null;

package/dist/internal/focus/focus-utils.js

@@ -0,0 +1,94 @@
+const FOCUSABLE_SELECTOR = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]"
+].join(",");
+function hasNegativeTabIndex(element) {
+    const tabIndex = element.getAttribute("tabindex");
+    if (tabIndex === null) {
+        return false;
+    }
+    const index = Number.parseInt(tabIndex, 10);
+    return Number.isNaN(index) || index < 0;
+}
+function isHiddenByStyle(element) {
+    if (element.hasAttribute("hidden")) {
+        return true;
+    }
+    if (element.style.display === "none" || element.style.visibility === "hidden") {
+        return true;
+    }
+    const style = window.getComputedStyle(element);
+    if (style.display === "none" || style.visibility === "hidden") {
+        return true;
+    }
+    return false;
+}
+export function isElementTabbable(element) {
+    if (!(element instanceof HTMLElement)) {
+        return false;
+    }
+    if (element.inert) {
+        return false;
+    }
+    if (element.matches(":disabled")) {
+        return false;
+    }
+    if (hasNegativeTabIndex(element)) {
+        return false;
+    }
+    if (isHiddenByStyle(element)) {
+        return false;
+    }
+    let parent = element.parentElement;
+    while (parent !== null) {
+        if (isHiddenByStyle(parent)) {
+            return false;
+        }
+        parent = parent.parentElement;
+    }
+    return true;
+}
+export function getFocusableElements(root) {
+    const nodes = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+    return nodes.filter(isElementTabbable);
+}
+export function focusFirst(root, options) {
+    const [first] = getFocusableElements(root);
+    if (!first) {
+        return null;
+    }
+    first.focus({ preventScroll: options?.preventScroll ?? false });
+    return first;
+}
+export function focusLast(root, options) {
+    const focusables = getFocusableElements(root);
+    const last = focusables[focusables.length - 1] ?? null;
+    if (!last) {
+        return null;
+    }
+    last.focus({ preventScroll: options?.preventScroll ?? false });
+    return last;
+}
+export function focusNext(root, direction = "next") {
+    const focusables = getFocusableElements(root);
+    const active = document.activeElement;
+    if (focusables.length === 0) {
+        return null;
+    }
+    if (!active || !focusables.includes(active)) {
+        return focusables[0] ?? null;
+    }
+    const currentIndex = focusables.indexOf(active);
+    if (direction === "next") {
+        const next = focusables[(currentIndex + 1) % focusables.length];
+        next.focus();
+        return next;
+    }
+    const previous = focusables[(currentIndex - 1 + focusables.length) % focusables.length];
+    previous.focus();
+    return previous;
+}

package/dist/internal/focus/index.d.ts

@@ -0,0 +1,3 @@
+export { FocusScope } from "./focus-scope.js";
+export { getFocusableElements, focusFirst, focusLast, focusNext, isElementTabbable } from "./focus-utils.js";
+export type { FocusScopeProps } from "./focus-scope.js";

package/dist/internal/focus/index.js

@@ -0,0 +1,2 @@
+export { FocusScope } from "./focus-scope.js";
+export { getFocusableElements, focusFirst, focusLast, focusNext, isElementTabbable } from "./focus-utils.js";

package/dist/internal/overlay-stack/index.d.ts

@@ -0,0 +1 @@
+export { getOverlayStackLength, getTopOverlay, isInOverlayStack, isTopOverlay, popOverlay, pushOverlay, resetOverlayStackForTests } from "./overlay-stack.js";

package/dist/internal/overlay-stack/index.js

@@ -0,0 +1 @@
+export { getOverlayStackLength, getTopOverlay, isInOverlayStack, isTopOverlay, popOverlay, pushOverlay, resetOverlayStackForTests } from "./overlay-stack.js";

package/dist/internal/overlay-stack/overlay-stack.d.ts

@@ -0,0 +1,12 @@
+interface OverlayStackEntry {
+    id: string;
+    node: HTMLElement;
+}
+export declare function pushOverlay(node: HTMLElement): string;
+export declare function popOverlay(id: string): void;
+export declare function getTopOverlay(): OverlayStackEntry | undefined;
+export declare function isTopOverlay(id: string): boolean;
+export declare function isInOverlayStack(node: Node): boolean;
+export declare function resetOverlayStackForTests(): void;
+export declare function getOverlayStackLength(): number;
+export {};

package/dist/internal/overlay-stack/overlay-stack.js

@@ -0,0 +1,41 @@
+const overlayStack = [];
+export function pushOverlay(node) {
+    const id = `liano-overlay-${overlayStack.length + 1}-${Math.random().toString(36).slice(2)}`;
+    overlayStack.push({ id, node });
+    return id;
+}
+export function popOverlay(id) {
+    const index = overlayStack.findIndex((entry) => entry.id === id);
+    if (index === -1) {
+        return;
+    }
+    overlayStack.splice(index, 1);
+}
+export function getTopOverlay() {
+    if (overlayStack.length === 0) {
+        return undefined;
+    }
+    for (let i = overlayStack.length - 1; i >= 0; i -= 1) {
+        const candidate = overlayStack[i];
+        if (candidate === undefined) {
+            continue;
+        }
+        const containsAnotherOverlay = overlayStack.some((entry) => entry.node !== candidate.node && candidate.node.contains(entry.node));
+        if (!containsAnotherOverlay) {
+            return candidate;
+        }
+    }
+    return overlayStack.at(-1);
+}
+export function isTopOverlay(id) {
+    return getTopOverlay()?.id === id;
+}
+export function isInOverlayStack(node) {
+    return overlayStack.some((entry) => entry.node === node);
+}
+export function resetOverlayStackForTests() {
+    overlayStack.length = 0;
+}
+export function getOverlayStackLength() {
+    return overlayStack.length;
+}

package/dist/internal/portal/index.d.ts

@@ -0,0 +1,2 @@
+export { Portal } from "./portal.js";
+export type { PortalProps } from "./portal.js";

package/dist/internal/portal/index.js

@@ -0,0 +1 @@
+export { Portal } from "./portal.js";

package/dist/internal/portal/portal.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface PortalProps {
+    children: React.ReactNode;
+    container?: HTMLElement | null;
+}
+export declare function Portal({ children, container }: PortalProps): React.ReactElement | null;
+export default Portal;

package/dist/internal/portal/portal.js

@@ -0,0 +1,19 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+export function Portal({ children, container }) {
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    if (!mounted) {
+        return null;
+    }
+    if (container === null) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const target = container ?? document.body;
+    return createPortal(children, target);
+}
+export default Portal;

package/dist/internal/scroll-lock/index.d.ts

@@ -0,0 +1 @@
+export { getLockDepth, lockScroll, resetScrollLockForTests, unlockScroll } from "./scroll-lock.js";

package/dist/internal/scroll-lock/index.js

@@ -0,0 +1 @@
+export { getLockDepth, lockScroll, resetScrollLockForTests, unlockScroll } from "./scroll-lock.js";

package/dist/internal/scroll-lock/scroll-lock.d.ts

@@ -0,0 +1,4 @@
+export declare function lockScroll(): void;
+export declare function unlockScroll(): void;
+export declare function getLockDepth(): number;
+export declare function resetScrollLockForTests(): void;

package/dist/internal/scroll-lock/scroll-lock.js

@@ -0,0 +1,69 @@
+let lockCount = 0;
+let snapshot = null;
+function hasBrowserEnvironment() {
+    return typeof document !== "undefined" && typeof window !== "undefined";
+}
+function getBody() {
+    return document.body ?? null;
+}
+function getScrollbarWidth() {
+    const body = getBody();
+    if (body === null) {
+        return 0;
+    }
+    return window.innerWidth - document.documentElement.clientWidth;
+}
+export function lockScroll() {
+    if (!hasBrowserEnvironment()) {
+        return;
+    }
+    const body = getBody();
+    if (body === null) {
+        return;
+    }
+    if (lockCount === 0) {
+        snapshot = {
+            overflow: body.style.overflow,
+            paddingRight: body.style.paddingRight
+        };
+        const scrollbar = getScrollbarWidth();
+        const parsedPadding = Number.parseFloat(body.style.paddingRight || "0");
+        body.style.overflow = "hidden";
+        if (!Number.isNaN(scrollbar) && scrollbar > 0) {
+            body.style.paddingRight = `${(Number.isNaN(parsedPadding) ? 0 : parsedPadding) + scrollbar}px`;
+        }
+    }
+    lockCount += 1;
+}
+export function unlockScroll() {
+    if (!hasBrowserEnvironment()) {
+        return;
+    }
+    if (lockCount === 0) {
+        return;
+    }
+    lockCount -= 1;
+    if (lockCount > 0) {
+        return;
+    }
+    const body = getBody();
+    if (body === null || snapshot === null) {
+        return;
+    }
+    body.style.overflow = snapshot.overflow;
+    body.style.paddingRight = snapshot.paddingRight;
+    snapshot = null;
+}
+export function getLockDepth() {
+    return lockCount;
+}
+export function resetScrollLockForTests() {
+    if (typeof document === "undefined") {
+        lockCount = 0;
+        snapshot = null;
+        return;
+    }
+    while (lockCount > 0) {
+        unlockScroll();
+    }
+}