@locus-ui/components 0.0.15 → 0.1.0

package/dist/components/portal/backdrop/portal-backdrop.props.mjs

@@ -0,0 +1,41 @@
+const variants = ["clear", "shadow", "blurred"];
+const PortalBackdropPropsDefs = {
+  /**
+   * The visual style variant of the backdrop.
+   *
+   * @example variant="blurred" // Applies a blurred effect to the backdrop
+   * @default "clear"
+   */
+  variant: {
+    type: "enum",
+    values: variants,
+    default: "clear",
+    dataAttr: "variant"
+  },
+  /**
+   * The opacity level of the backdrop.
+   *
+   * @example opacity="0.5" // Sets the backdrop opacity to 50%
+   * @default "0.3"
+   */
+  opacity: {
+    type: "string",
+    default: "0.3",
+    cssProperty: "--backdrop-opacity"
+  },
+  /**
+   * The blur amount applied to the backdrop when the "blurred" variant is used.
+   *
+   * @example blur="4px" // Sets the backdrop blur to 4 pixels
+   * @default "2px"
+   */
+  blur: {
+    type: "string",
+    default: "2px",
+    cssProperty: "--backdrop-blur"
+  }
+};
+export {
+  PortalBackdropPropsDefs
+};
+//# sourceMappingURL=portal-backdrop.props.mjs.map

package/dist/components/portal/backdrop/portal-backdrop.props.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/portal/backdrop/portal-backdrop.props.ts"],"sourcesContent":["import { PropDef } from \"../../../props\";\n\nconst variants = [\"clear\", \"shadow\", \"blurred\"] as const;\n\nconst PortalBackdropPropsDefs = {\n  /**\n   * The visual style variant of the backdrop.\n   *\n   * @example variant=\"blurred\" // Applies a blurred effect to the backdrop\n   * @default \"clear\"\n   */\n  variant: {\n    type: \"enum\",\n    values: variants,\n    default: \"clear\",\n    dataAttr: \"variant\",\n  } satisfies PropDef<(typeof variants)[number]>,\n\n  /**\n   * The opacity level of the backdrop.\n   *\n   * @example opacity=\"0.5\" // Sets the backdrop opacity to 50%\n   * @default \"0.3\"\n   */\n  opacity: {\n    type: \"string\",\n    default: \"0.3\",\n    cssProperty: \"--backdrop-opacity\",\n  } satisfies PropDef<string>,\n\n  /**\n   * The blur amount applied to the backdrop when the \"blurred\" variant is used.\n   *\n   * @example blur=\"4px\" // Sets the backdrop blur to 4 pixels\n   * @default \"2px\"\n   */\n  blur: {\n    type: \"string\",\n    default: \"2px\",\n    cssProperty: \"--backdrop-blur\",\n  } satisfies PropDef<string>,\n};\n\ntype PortalBackdropInternalProps = {\n  /**\n   * The visual style variant of the backdrop.\n   *\n   * @example variant=\"blurred\" // Applies a blurred effect to the backdrop\n   * @default \"clear\"\n   */\n  variant?: (typeof variants)[number];\n\n  /**\n   * The opacity level of the backdrop.\n   *\n   * @example opacity=\"0.5\" // Sets the backdrop opacity to 50%\n   * @default \"0.3\"\n   */\n  opacity?: string;\n\n  /**\n   * The blur amount applied to the backdrop when the \"blurred\" variant is used.\n   *\n   * @example blur=\"4px\" // Sets the backdrop blur to 4 pixels\n   * @default \"2px\"\n   */\n  blur?: string;\n};\n\nexport { PortalBackdropInternalProps, PortalBackdropPropsDefs };\n"],"mappings":"AAEA,MAAM,WAAW,CAAC,SAAS,UAAU,SAAS;AAE9C,MAAM,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO9B,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF;","names":[]}

package/dist/components/portal/content/portal-content.d.mts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AlignProp } from '../../../props/align.prop.mjs';
+import { PortalContentInternalProps } from './portal-content.props.mjs';
+import '../../../props/prop-def.mjs';
+
+interface AllPortalContentProps extends PortalContentInternalProps, AlignProp {
+}
+type PortalContentProps = AllPortalContentProps & React.HTMLAttributes<HTMLDivElement>;
+/** The content displayed within a portal. */
+declare const PortalContent: React.ForwardRefExoticComponent<AllPortalContentProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+export { type AllPortalContentProps, PortalContent, type PortalContentProps };

package/dist/components/portal/content/portal-content.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AlignProp } from '../../../props/align.prop.js';
+import { PortalContentInternalProps } from './portal-content.props.js';
+import '../../../props/prop-def.js';
+
+interface AllPortalContentProps extends PortalContentInternalProps, AlignProp {
+}
+type PortalContentProps = AllPortalContentProps & React.HTMLAttributes<HTMLDivElement>;
+/** The content displayed within a portal. */
+declare const PortalContent: React.ForwardRefExoticComponent<AllPortalContentProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+export { type AllPortalContentProps, PortalContent, type PortalContentProps };

package/dist/components/portal/content/portal-content.js

@@ -0,0 +1,163 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var portal_content_exports = {};
+__export(portal_content_exports, {
+  PortalContent: () => PortalContent
+});
+module.exports = __toCommonJS(portal_content_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var React = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var import_props = require("../../../props");
+var import_get_component_props = require("../../../utils/get-component-props");
+var import_theme_context = require("../../theme/theme-context");
+var import_portal_context = require("../portal-context");
+var import_use_anchor_position = require("../utils/use-anchor-position");
+var import_portal_content = require("./portal-content.props");
+const PortalContent = React.forwardRef(
+  (props, ref) => {
+    const portalContext = (0, import_portal_context.usePortalContext)();
+    const themeContext = React.useContext(import_theme_context.ThemeContext);
+    const contentRef = React.useRef(null);
+    const {
+      side = "bottom",
+      align = "center",
+      sideOffset = "0",
+      alignOffset = "0",
+      anchored = false,
+      children,
+      className,
+      dataAttrs,
+      style
+    } = (0, import_get_component_props.getComponentProps)(props, import_portal_content.PortalContentPropsDefs, import_props.AlignPropDef);
+    const anchorRef = portalContext.anchorRef ?? portalContext.triggerRef;
+    const anchorPosition = (0, import_use_anchor_position.useAnchorPosition)({
+      anchorRef,
+      contentRef,
+      side,
+      align,
+      sideOffset: parseInt(sideOffset, 10) || 0,
+      alignOffset: parseInt(alignOffset, 10) || 0,
+      enabled: anchored && portalContext.open
+    });
+    const setRefs = React.useCallback(
+      (node) => {
+        contentRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    React.useEffect(() => {
+      if (!portalContext.open) return;
+      function onKeyDown(e) {
+        if (e.key === "Escape") {
+          portalContext.onOpenChange?.(false);
+        }
+      }
+      document.addEventListener("keydown", onKeyDown);
+      return () => {
+        document.removeEventListener("keydown", onKeyDown);
+      };
+    }, [portalContext.open, portalContext.onOpenChange]);
+    React.useEffect(() => {
+      if (!portalContext.open || !anchored) return;
+      function onClickOutside(e) {
+        const target = e.target;
+        const content2 = contentRef.current;
+        const trigger = (portalContext.anchorRef ?? portalContext.triggerRef)?.current;
+        if (content2?.contains(target) || trigger?.contains(target)) {
+          return;
+        }
+        portalContext.onOpenChange?.(false);
+      }
+      const timeoutId = setTimeout(() => {
+        document.addEventListener("click", onClickOutside);
+      }, 0);
+      return () => {
+        clearTimeout(timeoutId);
+        document.removeEventListener("click", onClickOutside);
+      };
+    }, [
+      portalContext.open,
+      portalContext.onOpenChange,
+      portalContext.anchorRef,
+      portalContext.triggerRef,
+      anchored
+    ]);
+    const container = portalContext.open && globalThis?.document?.body;
+    if (!container) return null;
+    const combinedStyle = {
+      ...style,
+      ...anchored && anchorPosition ? {
+        position: "absolute",
+        top: anchorPosition.top,
+        left: anchorPosition.left
+      } : {}
+    };
+    const portalContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: setRefs,
+        className: (0, import_clsx.default)("portal", className),
+        "data-appearance": themeContext?.appearance,
+        "data-radius": themeContext?.radius,
+        "data-roundness": themeContext?.roundness ?? "theme",
+        "data-spacing": themeContext?.spacing ?? "theme",
+        "data-theme-radius": themeContext?.radius,
+        "data-theme-roundness": themeContext?.roundness,
+        "data-theme-spacing": themeContext?.spacing,
+        onClick: anchored ? void 0 : () => portalContext.onOpenChange?.(false),
+        style: combinedStyle,
+        ...dataAttrs,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "portal-content",
+            onClick: (e) => e.stopPropagation(),
+            children
+          }
+        )
+      }
+    );
+    const content = themeContext ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_theme_context.ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
+    return import_react_dom.default.createPortal(content, container);
+  }
+);
+PortalContent.displayName = "Portal.Content";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PortalContent
+});
+//# sourceMappingURL=portal-content.js.map

package/dist/components/portal/content/portal-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/portal/content/portal-content.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { AlignProp, AlignPropDef } from \"../../../props\";\nimport { getComponentProps } from \"../../../utils/get-component-props\";\nimport { ThemeContext } from \"../../theme/theme-context\";\nimport { usePortalContext } from \"../portal-context\";\nimport {\n  AnchorAlign,\n  AnchorSide,\n  useAnchorPosition,\n} from \"../utils/use-anchor-position\";\nimport {\n  PortalContentInternalProps,\n  PortalContentPropsDefs,\n} from \"./portal-content.props\";\n\ninterface AllPortalContentProps extends PortalContentInternalProps, AlignProp {}\n\ntype PortalContentProps = AllPortalContentProps &\n  React.HTMLAttributes<HTMLDivElement>;\n\n/** The content displayed within a portal. */\nconst PortalContent = React.forwardRef<HTMLDivElement, PortalContentProps>(\n  (props, ref) => {\n    const portalContext = usePortalContext();\n    const themeContext = React.useContext(ThemeContext);\n    const contentRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n      side = \"bottom\",\n      align = \"center\",\n      sideOffset = \"0\",\n      alignOffset = \"0\",\n      anchored = false,\n      children,\n      className,\n      dataAttrs,\n      style,\n    } = getComponentProps(props, PortalContentPropsDefs, AlignPropDef);\n\n    // Determine anchor element (custom anchorRef or triggerRef)\n    const anchorRef = portalContext.anchorRef ?? portalContext.triggerRef;\n\n    // Calculate anchor position when anchored mode is enabled\n    const anchorPosition = useAnchorPosition({\n      anchorRef,\n      contentRef,\n      side: side as AnchorSide,\n      align: align as AnchorAlign,\n      sideOffset: parseInt(sideOffset, 10) || 0,\n      alignOffset: parseInt(alignOffset, 10) || 0,\n      enabled: anchored && portalContext.open,\n    });\n\n    // Compose refs\n    const setRefs = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        contentRef.current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref]\n    );\n\n    React.useEffect(() => {\n      if (!portalContext.open) return;\n\n      function onKeyDown(e: KeyboardEvent) {\n        if (e.key === \"Escape\") {\n          portalContext.onOpenChange?.(false);\n        }\n      }\n\n      document.addEventListener(\"keydown\", onKeyDown);\n\n      return () => {\n        document.removeEventListener(\"keydown\", onKeyDown);\n      };\n    }, [portalContext.open, portalContext.onOpenChange]);\n\n    // Click outside listener for anchored portals\n    React.useEffect(() => {\n      if (!portalContext.open || !anchored) return;\n\n      function onClickOutside(e: MouseEvent) {\n        const target = e.target as Node;\n        const content = contentRef.current;\n        const trigger = (portalContext.anchorRef ?? portalContext.triggerRef)\n          ?.current;\n\n        // Don't close if clicking inside the content or the trigger\n        if (content?.contains(target) || trigger?.contains(target)) {\n          return;\n        }\n\n        portalContext.onOpenChange?.(false);\n      }\n\n      // Use setTimeout to avoid the click that opened the portal from immediately closing it\n      const timeoutId = setTimeout(() => {\n        document.addEventListener(\"click\", onClickOutside);\n      }, 0);\n\n      return () => {\n        clearTimeout(timeoutId);\n        document.removeEventListener(\"click\", onClickOutside);\n      };\n    }, [\n      portalContext.open,\n      portalContext.onOpenChange,\n      portalContext.anchorRef,\n      portalContext.triggerRef,\n      anchored,\n    ]);\n\n    const container = portalContext.open && globalThis?.document?.body;\n    if (!container) return null;\n\n    // Build style for anchored positioning\n    const combinedStyle: React.CSSProperties = {\n      ...style,\n      ...(anchored && anchorPosition\n        ? {\n            position: \"absolute\",\n            top: anchorPosition.top,\n            left: anchorPosition.left,\n          }\n        : {}),\n    };\n\n    const portalContent = (\n      <div\n        ref={setRefs}\n        className={clsx(\"portal\", className)}\n        data-appearance={themeContext?.appearance}\n        data-radius={themeContext?.radius}\n        data-roundness={themeContext?.roundness ?? \"theme\"}\n        data-spacing={themeContext?.spacing ?? \"theme\"}\n        data-theme-radius={themeContext?.radius}\n        data-theme-roundness={themeContext?.roundness}\n        data-theme-spacing={themeContext?.spacing}\n        onClick={\n          anchored ? undefined : () => portalContext.onOpenChange?.(false)\n        }\n        style={combinedStyle}\n        {...dataAttrs}\n      >\n        <div\n          className=\"portal-content\"\n          onClick={(e) => e.stopPropagation()}\n        >\n          {children}\n        </div>\n      </div>\n    );\n\n    // Wrap with ThemeContext if available to pass theme through\n    const content = themeContext ? (\n      <ThemeContext.Provider value={themeContext}>\n        {portalContent}\n      </ThemeContext.Provider>\n    ) : (\n      portalContent\n    );\n\n    return ReactDOM.createPortal(content, container);\n  }\n);\nPortalContent.displayName = \"Portal.Content\";\n\nexport { AllPortalContentProps, PortalContent, PortalContentProps };\n"],"mappings":"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","names":["content","clsx","ReactDOM"]}

package/dist/components/portal/content/portal-content.mjs

@@ -0,0 +1,133 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { AlignPropDef } from "../../../props";
+import { getComponentProps } from "../../../utils/get-component-props";
+import { ThemeContext } from "../../theme/theme-context";
+import { usePortalContext } from "../portal-context";
+import {
+  useAnchorPosition
+} from "../utils/use-anchor-position";
+import {
+  PortalContentPropsDefs
+} from "./portal-content.props";
+const PortalContent = React.forwardRef(
+  (props, ref) => {
+    const portalContext = usePortalContext();
+    const themeContext = React.useContext(ThemeContext);
+    const contentRef = React.useRef(null);
+    const {
+      side = "bottom",
+      align = "center",
+      sideOffset = "0",
+      alignOffset = "0",
+      anchored = false,
+      children,
+      className,
+      dataAttrs,
+      style
+    } = getComponentProps(props, PortalContentPropsDefs, AlignPropDef);
+    const anchorRef = portalContext.anchorRef ?? portalContext.triggerRef;
+    const anchorPosition = useAnchorPosition({
+      anchorRef,
+      contentRef,
+      side,
+      align,
+      sideOffset: parseInt(sideOffset, 10) || 0,
+      alignOffset: parseInt(alignOffset, 10) || 0,
+      enabled: anchored && portalContext.open
+    });
+    const setRefs = React.useCallback(
+      (node) => {
+        contentRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    React.useEffect(() => {
+      if (!portalContext.open) return;
+      function onKeyDown(e) {
+        if (e.key === "Escape") {
+          portalContext.onOpenChange?.(false);
+        }
+      }
+      document.addEventListener("keydown", onKeyDown);
+      return () => {
+        document.removeEventListener("keydown", onKeyDown);
+      };
+    }, [portalContext.open, portalContext.onOpenChange]);
+    React.useEffect(() => {
+      if (!portalContext.open || !anchored) return;
+      function onClickOutside(e) {
+        const target = e.target;
+        const content2 = contentRef.current;
+        const trigger = (portalContext.anchorRef ?? portalContext.triggerRef)?.current;
+        if (content2?.contains(target) || trigger?.contains(target)) {
+          return;
+        }
+        portalContext.onOpenChange?.(false);
+      }
+      const timeoutId = setTimeout(() => {
+        document.addEventListener("click", onClickOutside);
+      }, 0);
+      return () => {
+        clearTimeout(timeoutId);
+        document.removeEventListener("click", onClickOutside);
+      };
+    }, [
+      portalContext.open,
+      portalContext.onOpenChange,
+      portalContext.anchorRef,
+      portalContext.triggerRef,
+      anchored
+    ]);
+    const container = portalContext.open && globalThis?.document?.body;
+    if (!container) return null;
+    const combinedStyle = {
+      ...style,
+      ...anchored && anchorPosition ? {
+        position: "absolute",
+        top: anchorPosition.top,
+        left: anchorPosition.left
+      } : {}
+    };
+    const portalContent = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRefs,
+        className: clsx("portal", className),
+        "data-appearance": themeContext?.appearance,
+        "data-radius": themeContext?.radius,
+        "data-roundness": themeContext?.roundness ?? "theme",
+        "data-spacing": themeContext?.spacing ?? "theme",
+        "data-theme-radius": themeContext?.radius,
+        "data-theme-roundness": themeContext?.roundness,
+        "data-theme-spacing": themeContext?.spacing,
+        onClick: anchored ? void 0 : () => portalContext.onOpenChange?.(false),
+        style: combinedStyle,
+        ...dataAttrs,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "portal-content",
+            onClick: (e) => e.stopPropagation(),
+            children
+          }
+        )
+      }
+    );
+    const content = themeContext ? /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
+    return ReactDOM.createPortal(content, container);
+  }
+);
+PortalContent.displayName = "Portal.Content";
+export {
+  PortalContent
+};
+//# sourceMappingURL=portal-content.mjs.map

package/dist/components/portal/content/portal-content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/portal/content/portal-content.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { AlignProp, AlignPropDef } from \"../../../props\";\nimport { getComponentProps } from \"../../../utils/get-component-props\";\nimport { ThemeContext } from \"../../theme/theme-context\";\nimport { usePortalContext } from \"../portal-context\";\nimport {\n  AnchorAlign,\n  AnchorSide,\n  useAnchorPosition,\n} from \"../utils/use-anchor-position\";\nimport {\n  PortalContentInternalProps,\n  PortalContentPropsDefs,\n} from \"./portal-content.props\";\n\ninterface AllPortalContentProps extends PortalContentInternalProps, AlignProp {}\n\ntype PortalContentProps = AllPortalContentProps &\n  React.HTMLAttributes<HTMLDivElement>;\n\n/** The content displayed within a portal. */\nconst PortalContent = React.forwardRef<HTMLDivElement, PortalContentProps>(\n  (props, ref) => {\n    const portalContext = usePortalContext();\n    const themeContext = React.useContext(ThemeContext);\n    const contentRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n      side = \"bottom\",\n      align = \"center\",\n      sideOffset = \"0\",\n      alignOffset = \"0\",\n      anchored = false,\n      children,\n      className,\n      dataAttrs,\n      style,\n    } = getComponentProps(props, PortalContentPropsDefs, AlignPropDef);\n\n    // Determine anchor element (custom anchorRef or triggerRef)\n    const anchorRef = portalContext.anchorRef ?? portalContext.triggerRef;\n\n    // Calculate anchor position when anchored mode is enabled\n    const anchorPosition = useAnchorPosition({\n      anchorRef,\n      contentRef,\n      side: side as AnchorSide,\n      align: align as AnchorAlign,\n      sideOffset: parseInt(sideOffset, 10) || 0,\n      alignOffset: parseInt(alignOffset, 10) || 0,\n      enabled: anchored && portalContext.open,\n    });\n\n    // Compose refs\n    const setRefs = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        contentRef.current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref]\n    );\n\n    React.useEffect(() => {\n      if (!portalContext.open) return;\n\n      function onKeyDown(e: KeyboardEvent) {\n        if (e.key === \"Escape\") {\n          portalContext.onOpenChange?.(false);\n        }\n      }\n\n      document.addEventListener(\"keydown\", onKeyDown);\n\n      return () => {\n        document.removeEventListener(\"keydown\", onKeyDown);\n      };\n    }, [portalContext.open, portalContext.onOpenChange]);\n\n    // Click outside listener for anchored portals\n    React.useEffect(() => {\n      if (!portalContext.open || !anchored) return;\n\n      function onClickOutside(e: MouseEvent) {\n        const target = e.target as Node;\n        const content = contentRef.current;\n        const trigger = (portalContext.anchorRef ?? portalContext.triggerRef)\n          ?.current;\n\n        // Don't close if clicking inside the content or the trigger\n        if (content?.contains(target) || trigger?.contains(target)) {\n          return;\n        }\n\n        portalContext.onOpenChange?.(false);\n      }\n\n      // Use setTimeout to avoid the click that opened the portal from immediately closing it\n      const timeoutId = setTimeout(() => {\n        document.addEventListener(\"click\", onClickOutside);\n      }, 0);\n\n      return () => {\n        clearTimeout(timeoutId);\n        document.removeEventListener(\"click\", onClickOutside);\n      };\n    }, [\n      portalContext.open,\n      portalContext.onOpenChange,\n      portalContext.anchorRef,\n      portalContext.triggerRef,\n      anchored,\n    ]);\n\n    const container = portalContext.open && globalThis?.document?.body;\n    if (!container) return null;\n\n    // Build style for anchored positioning\n    const combinedStyle: React.CSSProperties = {\n      ...style,\n      ...(anchored && anchorPosition\n        ? {\n            position: \"absolute\",\n            top: anchorPosition.top,\n            left: anchorPosition.left,\n          }\n        : {}),\n    };\n\n    const portalContent = (\n      <div\n        ref={setRefs}\n        className={clsx(\"portal\", className)}\n        data-appearance={themeContext?.appearance}\n        data-radius={themeContext?.radius}\n        data-roundness={themeContext?.roundness ?? \"theme\"}\n        data-spacing={themeContext?.spacing ?? \"theme\"}\n        data-theme-radius={themeContext?.radius}\n        data-theme-roundness={themeContext?.roundness}\n        data-theme-spacing={themeContext?.spacing}\n        onClick={\n          anchored ? undefined : () => portalContext.onOpenChange?.(false)\n        }\n        style={combinedStyle}\n        {...dataAttrs}\n      >\n        <div\n          className=\"portal-content\"\n          onClick={(e) => e.stopPropagation()}\n        >\n          {children}\n        </div>\n      </div>\n    );\n\n    // Wrap with ThemeContext if available to pass theme through\n    const content = themeContext ? (\n      <ThemeContext.Provider value={themeContext}>\n        {portalContent}\n      </ThemeContext.Provider>\n    ) : (\n      portalContent\n    );\n\n    return ReactDOM.createPortal(content, container);\n  }\n);\nPortalContent.displayName = \"Portal.Content\";\n\nexport { AllPortalContentProps, PortalContent, PortalContentProps };\n"],"mappings":"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","names":["content"]}

package/dist/components/portal/content/portal-content.props.d.mts

@@ -0,0 +1,45 @@
+import { GetPropDefTypes } from '../../../props/prop-def.mjs';
+
+declare const PortalContentPropsDefs: {
+    /**
+     * The position of the portal content relative to the screen if no anchor is used.
+     *
+     * @example position="bl" // Portal renders at bottom-left of the screen
+     */
+    position: {
+        type: "enum";
+        values: readonly ["tl", "top", "tr", "left", "center", "right", "bl", "bottom", "br"];
+        default: "center";
+        dataAttr: string;
+    };
+    /**
+     * Whether the portal content is anchored to an element.
+     *
+     * When anchored, the portal content is positioned relative to the trigger element unless a custom anchorRef is provided.
+     */
+    anchored: {
+        type: "boolean";
+        dataAttr: string;
+    };
+    /**
+     * The side of the anchor element to position the portal content on.
+     *
+     * @default "bottom"
+     */
+    side: {
+        type: "enum";
+        values: readonly ["top", "right", "bottom", "left"];
+        default: "bottom";
+    };
+    /** Offset in pixels from the anchor element along the side axis. */
+    sideOffset: {
+        type: "string";
+    };
+    /** Offset in pixels along the alignment axis. */
+    alignOffset: {
+        type: "string";
+    };
+};
+type PortalContentInternalProps = GetPropDefTypes<typeof PortalContentPropsDefs>;
+
+export { type PortalContentInternalProps, PortalContentPropsDefs };

package/dist/components/portal/content/portal-content.props.d.ts

@@ -0,0 +1,45 @@
+import { GetPropDefTypes } from '../../../props/prop-def.js';
+
+declare const PortalContentPropsDefs: {
+    /**
+     * The position of the portal content relative to the screen if no anchor is used.
+     *
+     * @example position="bl" // Portal renders at bottom-left of the screen
+     */
+    position: {
+        type: "enum";
+        values: readonly ["tl", "top", "tr", "left", "center", "right", "bl", "bottom", "br"];
+        default: "center";
+        dataAttr: string;
+    };
+    /**
+     * Whether the portal content is anchored to an element.
+     *
+     * When anchored, the portal content is positioned relative to the trigger element unless a custom anchorRef is provided.
+     */
+    anchored: {
+        type: "boolean";
+        dataAttr: string;
+    };
+    /**
+     * The side of the anchor element to position the portal content on.
+     *
+     * @default "bottom"
+     */
+    side: {
+        type: "enum";
+        values: readonly ["top", "right", "bottom", "left"];
+        default: "bottom";
+    };
+    /** Offset in pixels from the anchor element along the side axis. */
+    sideOffset: {
+        type: "string";
+    };
+    /** Offset in pixels along the alignment axis. */
+    alignOffset: {
+        type: "string";
+    };
+};
+type PortalContentInternalProps = GetPropDefTypes<typeof PortalContentPropsDefs>;
+
+export { type PortalContentInternalProps, PortalContentPropsDefs };

package/dist/components/portal/content/portal-content.props.js

@@ -0,0 +1,80 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var portal_content_props_exports = {};
+__export(portal_content_props_exports, {
+  PortalContentPropsDefs: () => PortalContentPropsDefs
+});
+module.exports = __toCommonJS(portal_content_props_exports);
+const positions = [
+  "tl",
+  "top",
+  "tr",
+  "left",
+  "center",
+  "right",
+  "bl",
+  "bottom",
+  "br"
+];
+const anchorSides = ["top", "right", "bottom", "left"];
+const PortalContentPropsDefs = {
+  /**
+   * The position of the portal content relative to the screen if no anchor is used.
+   *
+   * @example position="bl" // Portal renders at bottom-left of the screen
+   */
+  position: {
+    type: "enum",
+    values: positions,
+    default: "center",
+    dataAttr: "position"
+  },
+  /**
+   * Whether the portal content is anchored to an element.
+   *
+   * When anchored, the portal content is positioned relative to the trigger element unless a custom anchorRef is provided.
+   */
+  anchored: {
+    type: "boolean",
+    dataAttr: "anchored"
+  },
+  /**
+   * The side of the anchor element to position the portal content on.
+   *
+   * @default "bottom"
+   */
+  side: {
+    type: "enum",
+    values: anchorSides,
+    default: "bottom"
+  },
+  /** Offset in pixels from the anchor element along the side axis. */
+  sideOffset: {
+    type: "string"
+  },
+  /** Offset in pixels along the alignment axis. */
+  alignOffset: {
+    type: "string"
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PortalContentPropsDefs
+});
+//# sourceMappingURL=portal-content.props.js.map

package/dist/components/portal/content/portal-content.props.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/portal/content/portal-content.props.ts"],"sourcesContent":["import { PropDef } from \"../../../props\";\nimport { GetPropDefTypes } from \"../../../props/prop-def\";\n\nconst positions = [\n  \"tl\",\n  \"top\",\n  \"tr\",\n  \"left\",\n  \"center\",\n  \"right\",\n  \"bl\",\n  \"bottom\",\n  \"br\",\n] as const;\n\nconst anchorSides = [\"top\", \"right\", \"bottom\", \"left\"] as const;\n\nconst PortalContentPropsDefs = {\n  /**\n   * The position of the portal content relative to the screen if no anchor is used.\n   *\n   * @example position=\"bl\" // Portal renders at bottom-left of the screen\n   */\n  position: {\n    type: \"enum\",\n    values: positions,\n    default: \"center\",\n    dataAttr: \"position\",\n  } satisfies PropDef<(typeof positions)[number]>,\n\n  /**\n   * Whether the portal content is anchored to an element.\n   *\n   * When anchored, the portal content is positioned relative to the trigger element unless a custom anchorRef is provided.\n   */\n  anchored: {\n    type: \"boolean\",\n    dataAttr: \"anchored\",\n  } satisfies PropDef<boolean>,\n\n  /**\n   * The side of the anchor element to position the portal content on.\n   *\n   * @default \"bottom\"\n   */\n  side: {\n    type: \"enum\",\n    values: anchorSides,\n    default: \"bottom\",\n  } satisfies PropDef<(typeof anchorSides)[number]>,\n\n  /** Offset in pixels from the anchor element along the side axis. */\n  sideOffset: {\n    type: \"string\",\n  } satisfies PropDef<string>,\n\n  /** Offset in pixels along the alignment axis. */\n  alignOffset: {\n    type: \"string\",\n  } satisfies PropDef<string>,\n};\n\ntype PortalContentInternalProps = GetPropDefTypes<\n  typeof PortalContentPropsDefs\n>;\n\nexport { PortalContentInternalProps, PortalContentPropsDefs };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,cAAc,CAAC,OAAO,SAAS,UAAU,MAAM;AAErD,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM7B,UAAU;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA;AAAA,EAGA,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA;AAAA,EAGA,aAAa;AAAA,IACX,MAAM;AAAA,EACR;AACF;","names":[]}

package/dist/components/portal/content/portal-content.props.mjs

@@ -0,0 +1,56 @@
+const positions = [
+  "tl",
+  "top",
+  "tr",
+  "left",
+  "center",
+  "right",
+  "bl",
+  "bottom",
+  "br"
+];
+const anchorSides = ["top", "right", "bottom", "left"];
+const PortalContentPropsDefs = {
+  /**
+   * The position of the portal content relative to the screen if no anchor is used.
+   *
+   * @example position="bl" // Portal renders at bottom-left of the screen
+   */
+  position: {
+    type: "enum",
+    values: positions,
+    default: "center",
+    dataAttr: "position"
+  },
+  /**
+   * Whether the portal content is anchored to an element.
+   *
+   * When anchored, the portal content is positioned relative to the trigger element unless a custom anchorRef is provided.
+   */
+  anchored: {
+    type: "boolean",
+    dataAttr: "anchored"
+  },
+  /**
+   * The side of the anchor element to position the portal content on.
+   *
+   * @default "bottom"
+   */
+  side: {
+    type: "enum",
+    values: anchorSides,
+    default: "bottom"
+  },
+  /** Offset in pixels from the anchor element along the side axis. */
+  sideOffset: {
+    type: "string"
+  },
+  /** Offset in pixels along the alignment axis. */
+  alignOffset: {
+    type: "string"
+  }
+};
+export {
+  PortalContentPropsDefs
+};
+//# sourceMappingURL=portal-content.props.mjs.map

package/dist/components/portal/content/portal-content.props.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/portal/content/portal-content.props.ts"],"sourcesContent":["import { PropDef } from \"../../../props\";\nimport { GetPropDefTypes } from \"../../../props/prop-def\";\n\nconst positions = [\n  \"tl\",\n  \"top\",\n  \"tr\",\n  \"left\",\n  \"center\",\n  \"right\",\n  \"bl\",\n  \"bottom\",\n  \"br\",\n] as const;\n\nconst anchorSides = [\"top\", \"right\", \"bottom\", \"left\"] as const;\n\nconst PortalContentPropsDefs = {\n  /**\n   * The position of the portal content relative to the screen if no anchor is used.\n   *\n   * @example position=\"bl\" // Portal renders at bottom-left of the screen\n   */\n  position: {\n    type: \"enum\",\n    values: positions,\n    default: \"center\",\n    dataAttr: \"position\",\n  } satisfies PropDef<(typeof positions)[number]>,\n\n  /**\n   * Whether the portal content is anchored to an element.\n   *\n   * When anchored, the portal content is positioned relative to the trigger element unless a custom anchorRef is provided.\n   */\n  anchored: {\n    type: \"boolean\",\n    dataAttr: \"anchored\",\n  } satisfies PropDef<boolean>,\n\n  /**\n   * The side of the anchor element to position the portal content on.\n   *\n   * @default \"bottom\"\n   */\n  side: {\n    type: \"enum\",\n    values: anchorSides,\n    default: \"bottom\",\n  } satisfies PropDef<(typeof anchorSides)[number]>,\n\n  /** Offset in pixels from the anchor element along the side axis. */\n  sideOffset: {\n    type: \"string\",\n  } satisfies PropDef<string>,\n\n  /** Offset in pixels along the alignment axis. */\n  alignOffset: {\n    type: \"string\",\n  } satisfies PropDef<string>,\n};\n\ntype PortalContentInternalProps = GetPropDefTypes<\n  typeof PortalContentPropsDefs\n>;\n\nexport { PortalContentInternalProps, PortalContentPropsDefs };\n"],"mappings":"AAGA,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,cAAc,CAAC,OAAO,SAAS,UAAU,MAAM;AAErD,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM7B,UAAU;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA;AAAA,EAGA,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA;AAAA,EAGA,aAAa;AAAA,IACX,MAAM;AAAA,EACR;AACF;","names":[]}