@aaas-pro/library 0.0.0-stage → 0.1.0

package/dist/primitives/form.js

@@ -0,0 +1,139 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+function useForm({ defaultValues = {}, mode = "onSubmit" } = {}) {
+  const initial = React.useRef(defaultValues);
+  const modeRef = React.useRef(mode);
+  modeRef.current = mode;
+  const controlRef = React.useRef(null);
+  if (!controlRef.current) {
+    const listeners = /* @__PURE__ */ new Set();
+    const publish2 = (patch) => {
+      control2.snapshot = { ...control2.snapshot, ...patch };
+      listeners.forEach((callback) => callback());
+    };
+    const control2 = {
+      snapshot: { values: { ...defaultValues }, errors: {}, touchedFields: {}, dirtyFields: {}, isSubmitting: false, isSubmitted: false },
+      rules: /* @__PURE__ */ new Map(),
+      refs: /* @__PURE__ */ new Map(),
+      subscribe(callback) {
+        listeners.add(callback);
+        return () => {
+          listeners.delete(callback);
+        };
+      },
+      setValue(name, value, options = {}) {
+        publish2({ values: { ...control2.snapshot.values, [name]: value }, dirtyFields: options.shouldDirty === false ? control2.snapshot.dirtyFields : { ...control2.snapshot.dirtyFields, [name]: value !== initial.current[name] }, touchedFields: options.shouldTouch ? { ...control2.snapshot.touchedFields, [name]: true } : control2.snapshot.touchedFields });
+        if (options.shouldValidate || modeRef.current === "onChange" || control2.snapshot.isSubmitted) void control2.validate([name]);
+      },
+      touch(name) {
+        publish2({ touchedFields: { ...control2.snapshot.touchedFields, [name]: true } });
+        if (modeRef.current === "onBlur") void control2.validate([name]);
+      },
+      async validate(names = [...control2.rules.keys()]) {
+        const values = control2.snapshot.values;
+        const results = await Promise.all(names.map(async (name) => [name, await validateValue(values[name], control2.rules.get(name) ?? {})]));
+        const errors = { ...control2.snapshot.errors };
+        results.forEach(([name, error]) => {
+          if (control2.snapshot.values[name] !== values[name]) return;
+          if (error) errors[name] = error;
+          else delete errors[name];
+        });
+        publish2({ errors });
+        return names.every((name) => !errors[name]);
+      }
+    };
+    Object.assign(control2, { publish: publish2 });
+    controlRef.current = control2;
+  }
+  const control = controlRef.current;
+  const snapshot = React.useSyncExternalStore(control.subscribe, () => control.snapshot, () => control.snapshot);
+  const publish = (patch) => control.publish(patch);
+  const getFieldState = (name, state = control.snapshot) => ({ error: state.errors[name], invalid: !!state.errors[name], isTouched: !!state.touchedFields[name], isDirty: !!state.dirtyFields[name] });
+  return {
+    control,
+    formState: { ...snapshot, isDirty: Object.values(snapshot.dirtyFields).some(Boolean), isValid: !Object.keys(snapshot.errors).length },
+    getFieldState,
+    getValues: () => ({ ...control.snapshot.values }),
+    setValue: control.setValue,
+    trigger: (name) => control.validate(name ? [name] : void 0),
+    reset(values = initial.current) {
+      initial.current = values;
+      publish({ values: { ...values }, errors: {}, touchedFields: {}, dirtyFields: {}, isSubmitted: false });
+    },
+    setFocus(name) {
+      control.refs.get(name)?.focus();
+    },
+    handleSubmit(onValid, onInvalid) {
+      return async (event) => {
+        event?.preventDefault();
+        if (control.snapshot.isSubmitting) return;
+        publish({ isSubmitting: true, isSubmitted: true });
+        try {
+          if (await control.validate()) await onValid({ ...control.snapshot.values });
+          else {
+            onInvalid?.(control.snapshot.errors);
+            control.refs.get(Object.keys(control.snapshot.errors)[0])?.focus();
+          }
+        } finally {
+          publish({ isSubmitting: false });
+        }
+      };
+    }
+  };
+}
+async function validateValue(value, rules) {
+  const fail = (type, message) => ({ type, message });
+  if (rules.required && (value == null || value === "" || value === false || Array.isArray(value) && !value.length)) return fail("required", typeof rules.required === "string" ? rules.required : "此字段必填");
+  if (value != null && value !== "") {
+    for (const name of ["min", "max", "minLength", "maxLength"]) {
+      const rule = rules[name];
+      if (rule === void 0) continue;
+      const bound = typeof rule === "number" ? rule : rule.value;
+      const actual = name.endsWith("Length") ? value.length : Number(value);
+      if (name.startsWith("min") ? actual < bound : actual > bound) return fail(name, typeof rule === "number" ? `${name.startsWith("min") ? "最小" : "最大"}${name.endsWith("Length") ? "长度" : "值"}为 ${bound}` : rule.message);
+    }
+    if (rules.pattern) {
+      const pattern = rules.pattern instanceof RegExp ? rules.pattern : rules.pattern.value;
+      pattern.lastIndex = 0;
+      if (!pattern.test(String(value))) return fail("pattern", rules.pattern instanceof RegExp ? "格式不正确" : rules.pattern.message);
+    }
+  }
+  if (rules.validate) {
+    const result = await rules.validate(value);
+    if (result !== true) return fail("validate", typeof result === "string" ? result : "校验未通过");
+  }
+}
+const FormContext = React.createContext(null);
+function FormProvider({ children, ...form }) {
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: form, children });
+}
+function useFormContext() {
+  const form = React.useContext(FormContext);
+  if (!form) throw new Error("字段必须在 Form 内使用");
+  return form;
+}
+function useFormState(_options) {
+  return useFormContext().formState;
+}
+function Controller({ name, control, rules, defaultValue, disabled, render }) {
+  const state = React.useSyncExternalStore(control.subscribe, () => control.snapshot, () => control.snapshot);
+  control.rules.set(name, disabled ? {} : rules ?? {});
+  React.useEffect(() => {
+    if (control.snapshot.values[name] === void 0 && defaultValue !== void 0) control.setValue(name, defaultValue, { shouldDirty: false });
+    return () => {
+      control.rules.delete(name);
+      control.refs.delete(name);
+    };
+  }, [control, name]);
+  return render({ field: { name, value: state.values[name] ?? defaultValue ?? "", disabled, onChange: (event) => control.setValue(name, event?.target ? event.target.type === "checkbox" ? event.target.checked : event.target.value : event), onBlur: () => control.touch(name), ref: (element) => {
+    if (element) control.refs.set(name, element);
+    else control.refs.delete(name);
+  } }, fieldState: { error: state.errors[name], invalid: !!state.errors[name] }, formState: state });
+}
+export {
+  Controller,
+  FormProvider,
+  useForm,
+  useFormContext,
+  useFormState
+};

package/dist/primitives/hover-card.d.ts

@@ -0,0 +1,4 @@
+export declare const Root: ({ children, open: controlled, defaultOpen, onOpenChange, modal: isModal, delayDuration, openDelay, closeDelay, ...rest }: import("./layer").LayerRootProps & {
+    sub?: boolean;
+    direction?: import("./layer").LayerState["direction"];
+}) => import("react").JSX.Element, Trigger: ({ onClick, onKeyDown, onPointerEnter, onPointerLeave, onFocus, onBlur, onContextMenu, ref, disabled, ...props }: import("./core").ButtonProps) => import("react").JSX.Element, Portal: ({ children, container, forceMount }: import("./layer").PortalProps) => import("react").ReactPortal | null, Content: ({ forceMount, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ref, style, onKeyDown, onPointerEnter, onPointerLeave, ...props }: import("./layer").LayerContentProps) => import("react").JSX.Element | null;

package/dist/primitives/hover-card.js

@@ -0,0 +1,8 @@
+import { createLayer } from "./layer.js";
+const { Root, Trigger, Portal, Content } = createLayer({ hover: true });
+export {
+  Content,
+  Portal,
+  Root,
+  Trigger
+};

package/dist/primitives/input-otp.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+type SlotState = {
+    char: string | null;
+    isActive: boolean;
+    hasFakeCaret: boolean;
+};
+export declare const OTPInputContext: React.Context<{
+    slots: SlotState[];
+}>;
+export interface OTPInputProps extends Omit<React.ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'maxLength'> {
+    maxLength: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    pasteTransformer?: (text: string) => string;
+    containerClassName?: string;
+    children?: React.ReactNode;
+}
+export declare function OTPInput({ maxLength, value, defaultValue, onChange, onComplete, pasteTransformer, containerClassName, children, pattern, disabled, readOnly, ref, style, onFocus, onBlur, onSelect, onPaste, autoComplete, inputMode, ...props }: OTPInputProps): React.JSX.Element;
+export {};

package/dist/primitives/input-otp.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllable, useMergedRef } from "./core.js";
+const OTPInputContext = React.createContext({ slots: [] });
+function OTPInput({ maxLength, value, defaultValue = "", onChange, onComplete, pasteTransformer, containerClassName, children, pattern, disabled, readOnly, ref, style, onFocus, onBlur, onSelect, onPaste, autoComplete = "one-time-code", inputMode = "numeric", ...props }) {
+  const [current, set] = useControllable(value, defaultValue, onChange);
+  const [focused, setFocused] = React.useState(false), [caret, setCaret] = React.useState(0);
+  const input = React.useRef(null), merged = useMergedRef(ref, input);
+  const length = Math.max(1, Math.floor(maxLength));
+  const accept = (candidate) => {
+    const next = candidate.slice(0, length);
+    if (next && pattern && !new RegExp(`^(?:${pattern})$`).test(next)) return;
+    set(next);
+    setCaret(Math.min(next.length, length - 1));
+    if (next.length === length && next !== current) onComplete?.(next);
+  };
+  const slots = Array.from({ length }, (_, index) => ({ char: current[index] ?? null, isActive: focused && caret === index, hasFakeCaret: focused && caret === index && !current[index] }));
+  return /* @__PURE__ */ jsx(OTPInputContext.Provider, { value: { slots }, children: /* @__PURE__ */ jsxs("div", { className: containerClassName, style: { position: "relative", cursor: disabled ? "not-allowed" : "text" }, "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { display: "contents" }, children }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        ref: merged,
+        value: current,
+        disabled,
+        readOnly,
+        maxLength: length,
+        pattern,
+        autoComplete,
+        inputMode,
+        style: { position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0, caretColor: "transparent", ...style },
+        onPointerDown: (event) => {
+          props.onPointerDown?.(event);
+          if (event.defaultPrevented || disabled) return;
+          const slots2 = [...event.currentTarget.parentElement.querySelectorAll('[data-slot="input-otp-slot"]')];
+          const index = slots2.findIndex((slot) => {
+            const bounds = slot.getBoundingClientRect();
+            return event.clientX >= bounds.left && event.clientX <= bounds.right;
+          });
+          if (index >= 0) {
+            event.preventDefault();
+            event.currentTarget.focus();
+            event.currentTarget.setSelectionRange(Math.min(index, current.length), Math.min(index + 1, current.length));
+            setCaret(index);
+          }
+        },
+        onChange: (event) => accept(event.target.value),
+        onFocus: (event) => {
+          setFocused(true);
+          setCaret(Math.min(event.target.selectionStart ?? current.length, length - 1));
+          onFocus?.(event);
+        },
+        onBlur: (event) => {
+          setFocused(false);
+          onBlur?.(event);
+        },
+        onSelect: (event) => {
+          setCaret(Math.min(event.currentTarget.selectionStart ?? 0, length - 1));
+          onSelect?.(event);
+        },
+        onPaste: (event) => {
+          onPaste?.(event);
+          if (event.defaultPrevented || disabled || readOnly) return;
+          event.preventDefault();
+          const raw = event.clipboardData.getData("text");
+          const text = pasteTransformer ? pasteTransformer(raw) : raw;
+          const start = event.currentTarget.selectionStart ?? current.length, end = event.currentTarget.selectionEnd ?? start;
+          accept(current.slice(0, start) + text + current.slice(end));
+        }
+      }
+    )
+  ] }) });
+}
+export {
+  OTPInput,
+  OTPInputContext
+};

package/dist/primitives/label.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function Root(props: React.ComponentProps<'label'>): React.JSX.Element;

package/dist/primitives/label.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+function Root(props) {
+  return /* @__PURE__ */ jsx("label", { ...props });
+}
+export {
+  Root
+};

package/dist/primitives/layer.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { type ButtonProps, type DivProps } from './core';
+export interface LayerRootProps {
+    children?: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Modal layers trap focus and lock background scrolling. */
+    modal?: boolean;
+    delayDuration?: number;
+    openDelay?: number;
+    closeDelay?: number;
+}
+export interface PortalProps {
+    children?: React.ReactNode;
+    container?: HTMLElement | null;
+    forceMount?: true;
+}
+export type OutsideEvent = CustomEvent<{
+    originalEvent: PointerEvent | FocusEvent;
+}>;
+export interface LayerContentProps extends DivProps {
+    forceMount?: true;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    alignOffset?: number;
+    avoidCollisions?: boolean;
+    collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onPointerDownOutside?: (event: OutsideEvent) => void;
+    onFocusOutside?: (event: OutsideEvent) => void;
+    onInteractOutside?: (event: OutsideEvent) => void;
+}
+export interface LayerState {
+    open: boolean;
+    setOpen: (v: boolean) => void;
+    modal: boolean;
+    id: string;
+    trigger: React.RefObject<HTMLElement | null>;
+    anchor: React.RefObject<HTMLElement | null>;
+    point: React.RefObject<{
+        x: number;
+        y: number;
+    } | null>;
+    parent?: LayerState;
+    sub?: boolean;
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+    schedule: (open: boolean, immediate?: boolean) => void;
+}
+export declare function createLayer({ modal, role, floating, hover, contextMenu, alert }?: {
+    modal?: boolean;
+    role?: 'dialog' | 'alertdialog' | 'tooltip' | 'menu' | 'listbox';
+    floating?: boolean;
+    hover?: boolean;
+    contextMenu?: boolean;
+    alert?: boolean;
+}): {
+    Root: ({ children, open: controlled, defaultOpen, onOpenChange, modal: isModal, delayDuration, openDelay, closeDelay, ...rest }: LayerRootProps & {
+        sub?: boolean;
+        direction?: LayerState["direction"];
+    }) => React.JSX.Element;
+    Provider: ({ children, delayDuration }: {
+        children?: React.ReactNode;
+        delayDuration?: number;
+    }) => React.JSX.Element;
+    Trigger: ({ onClick, onKeyDown, onPointerEnter, onPointerLeave, onFocus, onBlur, onContextMenu, ref, disabled, ...props }: ButtonProps) => React.JSX.Element;
+    Anchor: ({ ref, ...props }: DivProps) => React.JSX.Element;
+    Close: ({ onClick, ...props }: ButtonProps) => React.JSX.Element;
+    Portal: ({ children, container, forceMount }: PortalProps) => React.ReactPortal | null;
+    Overlay: ({ forceMount, ...props }: DivProps & {
+        forceMount?: true;
+    }) => React.JSX.Element | null;
+    Content: ({ forceMount, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ref, style, onKeyDown, onPointerEnter, onPointerLeave, ...props }: LayerContentProps) => React.JSX.Element | null;
+    Title: (props: React.ComponentProps<"h2">) => React.JSX.Element;
+    Description: (props: React.ComponentProps<"p">) => React.JSX.Element;
+    Arrow: (props: React.ComponentProps<"span">) => React.JSX.Element;
+    Sub: (props: LayerRootProps) => React.JSX.Element;
+    useLayer: () => LayerState;
+};
+export type ModalRootProps = Omit<LayerRootProps, "delayDuration" | "openDelay" | "closeDelay">;
+export type ModalContentProps = Omit<LayerContentProps, "side" | "align" | "sideOffset" | "alignOffset" | "avoidCollisions" | "collisionPadding">;

package/dist/primitives/layer.js

@@ -0,0 +1,300 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useMergedRef, focusable, DivPart, ButtonPart, useControllable } from "./core.js";
+const stack = [];
+let locks = 0, originalOverflow = "";
+let hidden = [];
+function updateBackground() {
+  hidden.forEach(({ node, inert, aria }) => {
+    node.inert = inert;
+    if (aria === null)
+      node.removeAttribute("aria-hidden");
+    else
+      node.setAttribute("aria-hidden", aria);
+  });
+  hidden = [];
+  if (!stack.some((layer) => layer.modal))
+    return;
+  const allowed = stack.map((layer) => layer.node);
+  const visit = (parent) => [...parent.children].forEach((element) => {
+    if (!(element instanceof HTMLElement) || ["SCRIPT", "STYLE", "LINK"].includes(element.tagName))
+      return;
+    if (allowed.includes(element))
+      return;
+    if (allowed.some((node) => element.contains(node)))
+      visit(element);
+    else {
+      hidden.push({ node: element, inert: element.inert, aria: element.getAttribute("aria-hidden") });
+      element.inert = true;
+      element.setAttribute("aria-hidden", "true");
+    }
+  });
+  visit(document.body);
+}
+const Nesting = React.createContext(null);
+const depth = (state) => state.parent ? 1 + depth(state.parent) : 0;
+function createLayer({ modal = false, role = "dialog", floating = true, hover = false, contextMenu = false, alert = false } = {}) {
+  const Context = React.createContext(null);
+  const DelayContext = React.createContext(0);
+  const PortalMountContext = React.createContext(false);
+  function useLayer() {
+    const value = React.useContext(Context);
+    if (!value)
+      throw new Error("Layer part must be inside its root");
+    return value;
+  }
+  function Root({ children, open: controlled, defaultOpen = false, onOpenChange, modal: isModal = modal, delayDuration, openDelay, closeDelay = 100, ...rest }) {
+    const parent = React.useContext(Nesting), delay = React.useContext(DelayContext);
+    const [open, setOpen] = useControllable(controlled, defaultOpen, onOpenChange);
+    const trigger = React.useRef(null), anchor = React.useRef(null), point = React.useRef(null);
+    const timer = React.useRef(void 0), id = React.useId();
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+    const schedule = (next, immediate = false) => {
+      clearTimeout(timer.current);
+      const ms = immediate ? 0 : next ? openDelay ?? delayDuration ?? delay : closeDelay;
+      if (!ms)
+        setOpen(next);
+      else
+        timer.current = setTimeout(() => setOpen(next), ms);
+    };
+    const state = { open, setOpen, modal: isModal, trigger, anchor, point, id, parent: parent ?? void 0, sub: rest.sub, direction: rest.direction, schedule };
+    return /* @__PURE__ */ jsx(Context.Provider, { value: state, children: /* @__PURE__ */ jsx(Nesting.Provider, { value: state, children }) });
+  }
+  function Provider({ children, delayDuration = 0 }) {
+    return /* @__PURE__ */ jsx(DelayContext.Provider, { value: delayDuration, children });
+  }
+  function Trigger({ onClick, onKeyDown, onPointerEnter, onPointerLeave, onFocus, onBlur, onContextMenu, ref, disabled, ...props }) {
+    const state = useLayer();
+    const merged = useMergedRef(ref, state.trigger);
+    return /* @__PURE__ */ jsx(ButtonPart, { ...props, ref: merged, disabled, "aria-haspopup": role === "tooltip" ? void 0 : role === "alertdialog" ? "dialog" : role, "aria-expanded": role === "tooltip" ? void 0 : state.open, "aria-controls": state.open ? state.id : void 0, "aria-describedby": role === "tooltip" && state.open ? state.id : props["aria-describedby"], "data-state": state.open ? "open" : "closed", onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented && !disabled && !hover && !contextMenu)
+        state.setOpen(!state.open);
+    }, onKeyDown: (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled)
+        return;
+      if (["ArrowDown", "ArrowUp"].includes(event.key) || contextMenu && event.key === "ContextMenu") {
+        event.preventDefault();
+        state.setOpen(true);
+      }
+    }, onContextMenu: (event) => {
+      onContextMenu?.(event);
+      if (contextMenu && !disabled && !event.defaultPrevented) {
+        event.preventDefault();
+        state.point.current = { x: event.clientX, y: event.clientY };
+        state.setOpen(true);
+      }
+    }, onPointerEnter: (event) => {
+      onPointerEnter?.(event);
+      if (hover && !disabled)
+        state.schedule(true);
+    }, onPointerLeave: (event) => {
+      onPointerLeave?.(event);
+      if (hover)
+        state.schedule(false);
+    }, onFocus: (event) => {
+      onFocus?.(event);
+      if (hover && !disabled)
+        state.schedule(true, true);
+    }, onBlur: (event) => {
+      onBlur?.(event);
+      if (hover)
+        state.schedule(false);
+    } });
+  }
+  function Anchor({ ref, ...props }) {
+    const state = useLayer();
+    const merged = useMergedRef(ref, state.anchor);
+    return /* @__PURE__ */ jsx(DivPart, { ref: merged, ...props });
+  }
+  function Close({ onClick, ...props }) {
+    const state = useLayer();
+    return /* @__PURE__ */ jsx(ButtonPart, { ...props, onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented)
+        state.setOpen(false);
+    } });
+  }
+  function Portal({ children, container, forceMount }) {
+    useLayer();
+    return typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx(PortalMountContext.Provider, { value: !!forceMount, children }), container ?? document.body) : null;
+  }
+  function Overlay({ forceMount, ...props }) {
+    const state = useLayer(), portalMount = React.useContext(PortalMountContext);
+    return state.open || forceMount || portalMount ? /* @__PURE__ */ jsx(DivPart, { ...props, hidden: !state.open, "data-state": state.open ? "open" : "closed", "aria-hidden": "true" }) : null;
+  }
+  function Content({ forceMount, side = "bottom", align = "center", sideOffset = 0, alignOffset = 0, avoidCollisions = true, collisionPadding = 8, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ref, style, onKeyDown, onPointerEnter, onPointerLeave, ...props }) {
+    const portalMount = React.useContext(PortalMountContext);
+    const state = useLayer();
+    const local = React.useRef(null);
+    const merged = useMergedRef(ref, local);
+    const latest = React.useRef({ state, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside });
+    latest.current = { state, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside };
+    const [position, setPosition] = React.useState({ position: "fixed", visibility: "hidden" });
+    const [actualSide, setActualSide] = React.useState(side);
+    React.useLayoutEffect(() => {
+      if (!state.open || !floating)
+        return;
+      const update = () => {
+        const node = local.current, anchor = state.anchor.current ?? state.trigger.current;
+        if (!node)
+          return;
+        const rect = state.point.current ? { left: state.point.current.x, right: state.point.current.x, top: state.point.current.y, bottom: state.point.current.y, width: 0, height: 0 } : anchor?.getBoundingClientRect();
+        if (!rect)
+          return;
+        const size = node.getBoundingClientRect();
+        const padding = typeof collisionPadding === "number" ? collisionPadding : Math.max(8, ...Object.values(collisionPadding));
+        let resolved = state.sub ? "right" : side;
+        if (avoidCollisions) {
+          if (resolved === "bottom" && rect.bottom + sideOffset + size.height > innerHeight - padding && rect.top > innerHeight - rect.bottom)
+            resolved = "top";
+          else if (resolved === "top" && rect.top - sideOffset - size.height < padding && innerHeight - rect.bottom > rect.top)
+            resolved = "bottom";
+          else if (resolved === "right" && rect.right + sideOffset + size.width > innerWidth - padding)
+            resolved = "left";
+          else if (resolved === "left" && rect.left - sideOffset - size.width < padding)
+            resolved = "right";
+        }
+        const vertical = resolved === "top" || resolved === "bottom";
+        let x = vertical ? align === "start" ? rect.left : align === "end" ? rect.right - size.width : rect.left + (rect.width - size.width) / 2 : resolved === "right" ? rect.right + sideOffset : rect.left - size.width - sideOffset;
+        let y = vertical ? resolved === "bottom" ? rect.bottom + sideOffset : rect.top - size.height - sideOffset : align === "end" ? rect.bottom - size.height : align === "center" ? rect.top + (rect.height - size.height) / 2 : rect.top;
+        if (vertical)
+          x += alignOffset;
+        else
+          y += alignOffset;
+        if (avoidCollisions) {
+          x = Math.max(padding, Math.min(innerWidth - size.width - padding, x));
+          y = Math.max(padding, Math.min(innerHeight - size.height - padding, y));
+        }
+        const available = Math.max(0, resolved === "top" ? rect.top - sideOffset - padding : resolved === "bottom" ? innerHeight - rect.bottom - sideOffset - padding : innerHeight - padding * 2);
+        setActualSide(resolved);
+        setPosition({ position: "fixed", left: x, top: y, visibility: "visible", maxHeight: available, "--aaas-trigger-width": `${rect.width}px`, "--aaas-content-available-height": `${available}px`, "--aaas-content-transform-origin": `${align} ${resolved === "bottom" ? "top" : resolved === "top" ? "bottom" : "center"}` });
+      };
+      update();
+      window.addEventListener("resize", update);
+      window.addEventListener("scroll", update, true);
+      const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+      if (local.current)
+        observer?.observe(local.current);
+      return () => {
+        window.removeEventListener("resize", update);
+        window.removeEventListener("scroll", update, true);
+        observer?.disconnect();
+      };
+    }, [state.open, floating, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, state.sub]);
+    React.useLayoutEffect(() => {
+      const node = local.current;
+      if (!state.open || !node)
+        return;
+      const entry = { node, modal: state.modal, state };
+      stack.push(entry);
+      stack.sort((a, b) => depth(a.state) - depth(b.state));
+      const previous = document.activeElement;
+      if (state.modal) {
+        if (!locks++) {
+          originalOverflow = document.body.style.overflow;
+          document.body.style.overflow = "hidden";
+        }
+      }
+      const opening = new Event("openAutoFocus", { cancelable: true });
+      latest.current.onOpenAutoFocus?.(opening);
+      if (!opening.defaultPrevented && role !== "tooltip" && !hover && stack.at(-1) === entry)
+        ((alert ? node.querySelector('[data-slot="alert-dialog-cancel"]') : null) ?? node.querySelector('[role="option"]:not(:disabled),[role^="menuitem"]:not(:disabled)') ?? focusable(node)[0] ?? node).focus();
+      if (!Object.prototype.hasOwnProperty.call(props, "aria-describedby") && document.getElementById(`${state.id}-description`))
+        node.setAttribute("aria-describedby", `${state.id}-description`);
+      updateBackground();
+      const top = () => stack.at(-1) === entry;
+      const escape = (event) => {
+        if (!top())
+          return;
+        if (event.key === "Escape") {
+          latest.current.onEscapeKeyDown?.(event);
+          if (!event.defaultPrevented) {
+            event.preventDefault();
+            event.stopPropagation();
+            latest.current.state.setOpen(false);
+          }
+        }
+        if (event.key === "Tab" && state.modal) {
+          const nodes = focusable(node), first = nodes[0] ?? node, last = nodes.at(-1) ?? node;
+          if (!nodes.length || (event.shiftKey ? document.activeElement === first || document.activeElement === node : document.activeElement === last)) {
+            event.preventDefault();
+            (event.shiftKey ? last : first).focus();
+          }
+        }
+      };
+      const outside = (event) => {
+        if (!top() || node.contains(event.target) || state.trigger.current?.contains(event.target))
+          return;
+        const cancel = new CustomEvent("pointerDownOutside", { cancelable: true, detail: { originalEvent: event } });
+        latest.current.onPointerDownOutside?.(cancel);
+        latest.current.onInteractOutside?.(cancel);
+        if (!cancel.defaultPrevented && !alert)
+          latest.current.state.setOpen(false);
+      };
+      const focus = (event) => {
+        if (!top() || node.contains(event.target) || state.trigger.current?.contains(event.target))
+          return;
+        const cancel = new CustomEvent("focusOutside", { cancelable: true, detail: { originalEvent: event } });
+        latest.current.onFocusOutside?.(cancel);
+        latest.current.onInteractOutside?.(cancel);
+        if (state.modal) {
+          if (!cancel.defaultPrevented)
+            (focusable(node)[0] ?? node).focus();
+        } else if (!cancel.defaultPrevented && role !== "tooltip")
+          latest.current.state.setOpen(false);
+      };
+      document.addEventListener("keydown", escape, true);
+      document.addEventListener("pointerdown", outside, true);
+      document.addEventListener("focusin", focus);
+      return () => {
+        document.removeEventListener("keydown", escape, true);
+        document.removeEventListener("pointerdown", outside, true);
+        document.removeEventListener("focusin", focus);
+        stack.splice(stack.indexOf(entry), 1);
+        if (state.modal && !--locks)
+          document.body.style.overflow = originalOverflow;
+        updateBackground();
+        const closing = new Event("closeAutoFocus", { cancelable: true });
+        latest.current.onCloseAutoFocus?.(closing);
+        if (!closing.defaultPrevented && role !== "tooltip" && !hover) {
+          const target = state.trigger.current ?? previous;
+          if (target?.isConnected)
+            target.focus();
+        }
+      };
+    }, [state.open, state.modal]);
+    if (!state.open && !forceMount && !portalMount)
+      return null;
+    const floatingRole = role === "dialog" && !state.modal ? "dialog" : role;
+    return /* @__PURE__ */ jsx(DivPart, { ...props, id: props.id ?? state.id, ref: merged, role: props.role ?? floatingRole, "aria-modal": state.modal && role !== "tooltip" ? true : void 0, "aria-labelledby": props["aria-labelledby"] ?? (!floating ? `${state.id}-title` : void 0), tabIndex: -1, hidden: !state.open, "data-aaas-layer": "", "data-state": state.open ? "open" : "closed", "data-side": actualSide, "data-align": align, "data-drawer-direction": state.direction, style: { ...floating ? position : {}, ...style }, onKeyDown, onPointerEnter: (event) => {
+      onPointerEnter?.(event);
+      if (hover)
+        state.schedule(true, true);
+    }, onPointerLeave: (event) => {
+      onPointerLeave?.(event);
+      if (hover)
+        state.schedule(false);
+    } });
+  }
+  function Title(props) {
+    const state = useLayer();
+    return /* @__PURE__ */ jsx("h2", { id: `${state.id}-title`, ...props });
+  }
+  function Description(props) {
+    const state = useLayer();
+    return /* @__PURE__ */ jsx("p", { id: `${state.id}-description`, ...props });
+  }
+  function Arrow(props) {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ...props });
+  }
+  function Sub(props) {
+    return /* @__PURE__ */ jsx(Root, { ...props, sub: true });
+  }
+  return { Root, Provider, Trigger, Anchor, Close, Portal, Overlay, Content, Title, Description, Arrow, Sub, useLayer };
+}
+export {
+  createLayer
+};