@helpwave/hightide 0.1.25 → 0.1.27

package/dist/components/layout/FloatingContainer.js

@@ -0,0 +1,219 @@
+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);
+
+// src/components/layout/FloatingContainer.tsx
+var FloatingContainer_exports = {};
+__export(FloatingContainer_exports, {
+  FloatingContainer: () => FloatingContainer
+});
+module.exports = __toCommonJS(FloatingContainer_exports);
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+var import_clsx = require("clsx");
+
+// src/hooks/useFloatingElement.ts
+var import_react2 = require("react");
+
+// src/utils/math.ts
+var clamp = (value, range = [0, 1]) => {
+  const [min, max] = range;
+  return Math.min(Math.max(value, min), max);
+};
+
+// src/hooks/focus/useIsMounted.ts
+var import_react = require("react");
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicEffect = isClient ? import_react.useLayoutEffect : import_react.useEffect;
+var useIsMounted = () => {
+  const [isMounted, setIsMounted] = (0, import_react.useState)(false);
+  useIsomorphicEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+};
+
+// src/hooks/useFloatingElement.ts
+function calculatePosition({
+  windowRect,
+  containerRect,
+  anchorRect,
+  options
+}) {
+  const { verticalAlignment, horizontalAlignment, gap, screenPadding } = options;
+  const windowWidth = windowRect.width;
+  const windowHeight = windowRect.height;
+  const maxWidth = windowWidth - 2 * screenPadding;
+  const maxHeight = windowHeight - 2 * screenPadding;
+  const width = Math.min(containerRect.width, maxWidth);
+  const height = Math.min(containerRect.height, maxHeight);
+  const leftSuggestion = {
+    beforeStart: anchorRect.left - width - gap,
+    afterStart: anchorRect.left,
+    center: anchorRect.left + anchorRect.width / 2 - width / 2,
+    beforeEnd: anchorRect.right - width,
+    afterEnd: anchorRect.right + gap
+  }[horizontalAlignment];
+  const topSuggestion = {
+    beforeStart: anchorRect.top - height - gap,
+    afterStart: anchorRect.top,
+    center: anchorRect.top + anchorRect.height / 2 - height / 2,
+    beforeEnd: anchorRect.bottom - height,
+    afterEnd: anchorRect.bottom + gap
+  }[verticalAlignment];
+  const left = clamp(leftSuggestion, [
+    screenPadding,
+    windowWidth - screenPadding - width
+  ]);
+  const top = clamp(topSuggestion, [
+    screenPadding,
+    windowHeight - screenPadding - height
+  ]);
+  return {
+    left,
+    top,
+    maxWidth,
+    maxHeight
+  };
+}
+function useFloatingElement({
+  active = true,
+  windowRef,
+  anchorRef,
+  containerRef,
+  isPolling = false,
+  pollingInterval = 100,
+  verticalAlignment = "afterEnd",
+  horizontalAlignment = "afterStart",
+  screenPadding = 16,
+  gap = 4
+}) {
+  const [style, setStyle] = (0, import_react2.useState)();
+  const isMounted = useIsMounted();
+  const calculate = (0, import_react2.useCallback)(() => {
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const windowRect = windowRef?.current.getBoundingClientRect() ?? {
+      top: 0,
+      bottom: window.innerHeight,
+      left: 0,
+      right: window.innerWidth,
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    const anchorElement = anchorRef?.current;
+    if (anchorRef && !anchorElement) {
+      console.warn("FloatingContainer anchor provided, but its value is undefined");
+    }
+    const anchorRect = anchorElement?.getBoundingClientRect() ?? windowRect;
+    const calculateProps = {
+      windowRect,
+      anchorRect,
+      containerRect,
+      options: {
+        horizontalAlignment,
+        verticalAlignment,
+        screenPadding,
+        gap
+      }
+    };
+    setStyle(calculatePosition(calculateProps));
+  }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
+  const height = containerRef.current?.getBoundingClientRect().height;
+  const width = containerRef.current?.getBoundingClientRect().width;
+  (0, import_react2.useEffect)(() => {
+    if (active && isMounted) {
+      calculate();
+    } else {
+      setStyle(void 0);
+    }
+  }, [calculate, active, isMounted, height, width]);
+  (0, import_react2.useEffect)(() => {
+    window.addEventListener("resize", calculate);
+    let timeout;
+    if (isPolling) {
+      timeout = setInterval(calculate, pollingInterval);
+    }
+    return () => {
+      window.removeEventListener("resize", calculate);
+      if (timeout) {
+        clearInterval(timeout);
+      }
+    };
+  }, [calculate, isPolling, pollingInterval]);
+  return style;
+}
+
+// src/components/layout/FloatingContainer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FloatingContainer = (0, import_react3.forwardRef)(function FloatingContainer2({
+  children,
+  backgroundOverlay,
+  anchor,
+  isPolling = false,
+  pollingInterval = 100,
+  verticalAlignment = "afterEnd",
+  horizontalAlignment = "afterStart",
+  screenPadding = 16,
+  gap = 4,
+  ...props
+}, forwardRef2) {
+  const innerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useImperativeHandle)(forwardRef2, () => innerRef.current);
+  const position = useFloatingElement({
+    active: !props.hidden,
+    containerRef: innerRef,
+    anchorRef: anchor,
+    isPolling,
+    pollingInterval,
+    verticalAlignment,
+    horizontalAlignment,
+    gap,
+    screenPadding
+  });
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      backgroundOverlay,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ...props,
+          ref: innerRef,
+          style: {
+            position: "fixed",
+            overflow: "hidden",
+            opacity: position ? void 0 : 0,
+            // hide when position calculation isn't done yet
+            transition: position ? `top ${pollingInterval}ms linear, left ${pollingInterval}ms linear` : void 0,
+            ...position,
+            ...props.style
+          },
+          className: (0, import_clsx.clsx)("motion-safe:duration-100 motion-reduce:duration-0", props.className),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloatingContainer
+});
+//# sourceMappingURL=FloatingContainer.js.map

package/dist/components/layout/FloatingContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/FloatingContainer.tsx","../../../src/hooks/useFloatingElement.ts","../../../src/utils/math.ts","../../../src/hooks/focus/useIsMounted.ts"],"sourcesContent":["import type { HTMLAttributes, MutableRefObject, ReactNode } from 'react'\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport type { UseFloatingElementOptions } from '@/src/hooks/useFloatingElement'\nimport { useFloatingElement } from '@/src/hooks/useFloatingElement'\n\nexport type FloatingContainerProps = HTMLAttributes<HTMLDivElement> & UseFloatingElementOptions & {\n  anchor?: MutableRefObject<HTMLElement>,\n  /**\n   * Polls the position of the anchor every 100ms\n   *\n   * Use sparingly\n   */\n  backgroundOverlay?: ReactNode,\n}\n\n/**\n * A floating container that aligns to its anchor\n *\n * Notes:\n * - to hide it use the hidden attribute as other means break the functionality\n */\nexport const FloatingContainer = forwardRef<HTMLDivElement, FloatingContainerProps>(function FloatingContainer({\n                                                                                                                 children,\n                                                                                                                 backgroundOverlay,\n                                                                                                                 anchor,\n                                                                                                                 isPolling = false,\n                                                                                                                 pollingInterval = 100,\n                                                                                                                 verticalAlignment = 'afterEnd',\n                                                                                                                 horizontalAlignment = 'afterStart',\n                                                                                                                 screenPadding = 16,\n                                                                                                                 gap = 4,\n                                                                                                                 ...props\n                                                                                                               }, forwardRef) {\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(forwardRef, () => innerRef.current)\n\n  const position = useFloatingElement({\n    active: !props.hidden,\n    containerRef: innerRef,\n    anchorRef: anchor,\n    isPolling,\n    pollingInterval,\n    verticalAlignment,\n    horizontalAlignment,\n    gap,\n    screenPadding,\n  })\n\n  return createPortal(\n    <>\n      {backgroundOverlay}\n      <div\n        {...props}\n        ref={innerRef}\n        style={{\n          position: 'fixed',\n          overflow: 'hidden',\n          opacity: position ? undefined : 0, // hide when position calculation isn't done yet\n          transition: position ? `top ${pollingInterval}ms linear, left ${pollingInterval}ms linear` : undefined,\n          ...position,\n          ...props.style\n        }}\n        className={clsx('motion-safe:duration-100 motion-reduce:duration-0', props.className)}\n      >\n        {children}\n      </div>\n    </>,\n    document.body\n  )\n})","'use client'\n\nimport type { CSSProperties, MutableRefObject } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { clamp } from '@/src/utils/math'\nimport { useIsMounted } from '@/src/hooks/focus/useIsMounted'\n\nexport type FloatingElementAlignment = 'beforeStart' | 'afterStart' | 'center' | 'beforeEnd' | 'afterEnd'\n\ntype RectangleBounds = {\n  top: number,\n  right: number,\n  bottom: number,\n  left: number,\n  width: number,\n  height: number,\n}\n\ntype CalculatePositionOptions = {\n  verticalAlignment?: FloatingElementAlignment,\n  horizontalAlignment?: FloatingElementAlignment,\n  screenPadding?: number,\n  gap?: number,\n}\n\ntype CalculatePositionProps = {\n  windowRect: RectangleBounds,\n  containerRect: RectangleBounds,\n  anchorRect: RectangleBounds,\n  options: CalculatePositionOptions,\n}\n\ntype UseFloatingElementStyle = {\n  left: number,\n  top: number,\n  maxWidth: number,\n  maxHeight: number,\n}\n\nfunction calculatePosition({\n                             windowRect,\n                             containerRect,\n                             anchorRect,\n                             options,\n                           }: CalculatePositionProps): UseFloatingElementStyle {\n  const { verticalAlignment, horizontalAlignment, gap, screenPadding } = options\n  const windowWidth = windowRect.width\n  const windowHeight = windowRect.height\n\n  const maxWidth = windowWidth - 2 * screenPadding\n  const maxHeight = windowHeight - 2 * screenPadding\n\n  const width = Math.min(containerRect.width, maxWidth)\n  const height = Math.min(containerRect.height, maxHeight)\n\n  const leftSuggestion = {\n    beforeStart: anchorRect.left - width - gap,\n    afterStart: anchorRect.left,\n    center: anchorRect.left + anchorRect.width / 2 - width / 2,\n    beforeEnd: anchorRect.right - width,\n    afterEnd: anchorRect.right + gap,\n  }[horizontalAlignment]\n\n  const topSuggestion = {\n    beforeStart: anchorRect.top - height - gap,\n    afterStart: anchorRect.top,\n    center: anchorRect.top + anchorRect.height / 2 - height / 2,\n    beforeEnd: anchorRect.bottom - height,\n    afterEnd: anchorRect.bottom + gap,\n  }[verticalAlignment]\n\n  const left = clamp(leftSuggestion, [\n    screenPadding,\n    windowWidth - screenPadding - width,\n  ])\n\n  const top = clamp(topSuggestion, [\n    screenPadding,\n    windowHeight - screenPadding - height,\n  ])\n\n  return {\n    left,\n    top,\n    maxWidth,\n    maxHeight,\n  }\n}\n\nexport type UseFloatingElementOptions = CalculatePositionOptions & {\n  isPolling?: boolean,\n  pollingInterval?: number,\n}\n\nexport type UseFloatingElementProps = UseFloatingElementOptions & {\n  containerRef: MutableRefObject<HTMLElement>,\n  anchorRef: MutableRefObject<HTMLElement>,\n  windowRef?: MutableRefObject<HTMLElement>,\n  active?: boolean,\n}\n\nexport function useFloatingElement({\n                                     active = true,\n                                     windowRef,\n                                     anchorRef,\n                                     containerRef,\n                                     isPolling = false,\n                                     pollingInterval = 100,\n                                     verticalAlignment = 'afterEnd',\n                                     horizontalAlignment = 'afterStart',\n                                     screenPadding = 16,\n                                     gap = 4,\n                                   }: UseFloatingElementProps) {\n  const [style, setStyle] = useState<CSSProperties>()\n  const isMounted = useIsMounted()\n\n  const calculate = useCallback(() => {\n    const containerRect = containerRef.current.getBoundingClientRect()\n    const windowRect: RectangleBounds = windowRef?.current.getBoundingClientRect() ?? {\n      top: 0,\n      bottom: window.innerHeight,\n      left: 0,\n      right: window.innerWidth,\n      width: window.innerWidth,\n      height: window.innerHeight,\n    }\n    const anchorElement = anchorRef?.current\n    if (anchorRef && !anchorElement) {\n      console.warn('FloatingContainer anchor provided, but its value is undefined')\n    }\n    const anchorRect: RectangleBounds = anchorElement?.getBoundingClientRect() ?? windowRect\n\n    const calculateProps: CalculatePositionProps = {\n      windowRect,\n      anchorRect,\n      containerRect,\n      options: {\n        horizontalAlignment,\n        verticalAlignment,\n        screenPadding,\n        gap,\n      }\n    }\n    setStyle(calculatePosition(calculateProps))\n  }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef])\n\n\n  const height = containerRef.current?.getBoundingClientRect().height\n  const width = containerRef.current?.getBoundingClientRect().width\n  useEffect(() => {\n    if (active && isMounted) {\n      calculate()\n    } else {\n      setStyle(undefined)\n    }\n  }, [calculate, active, isMounted, height, width])\n\n  useEffect(() => {\n    window.addEventListener('resize', calculate)\n    let timeout: NodeJS.Timeout\n    if (isPolling) {\n      timeout = setInterval(calculate, pollingInterval)\n    }\n    return () => {\n      window.removeEventListener('resize', calculate)\n      if (timeout) {\n        clearInterval(timeout)\n      }\n    }\n  }, [calculate, isPolling, pollingInterval])\n\n  return style\n}","export const clamp = (value: number, range: [number, number] = [0, 1]): number => {\n  const [min, max] = range\n  return Math.min(Math.max(value, min), max)\n}\n","'use client'\n\nimport { useEffect, useLayoutEffect, useState } from 'react'\n\nconst isClient = typeof window !== 'undefined' && typeof document !== 'undefined'\nconst useIsomorphicEffect = isClient ? useLayoutEffect : useEffect\n\nexport const useIsMounted = () => {\n  const [isMounted, setIsMounted] = useState(false)\n\n  useIsomorphicEffect(() => {\n    setIsMounted(true)\n    return () => {\n      setIsMounted(false)\n    }\n  }, [])\n  return isMounted\n}"],"mappings":"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","names":["import_react","import_react","FloatingContainer","forwardRef"]}

package/dist/components/layout/FloatingContainer.mjs

@@ -0,0 +1,195 @@
+// src/components/layout/FloatingContainer.tsx
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { createPortal } from "react-dom";
+import { clsx } from "clsx";
+
+// src/hooks/useFloatingElement.ts
+import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/utils/math.ts
+var clamp = (value, range = [0, 1]) => {
+  const [min, max] = range;
+  return Math.min(Math.max(value, min), max);
+};
+
+// src/hooks/focus/useIsMounted.ts
+import { useEffect, useLayoutEffect, useState } from "react";
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicEffect = isClient ? useLayoutEffect : useEffect;
+var useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState(false);
+  useIsomorphicEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+};
+
+// src/hooks/useFloatingElement.ts
+function calculatePosition({
+  windowRect,
+  containerRect,
+  anchorRect,
+  options
+}) {
+  const { verticalAlignment, horizontalAlignment, gap, screenPadding } = options;
+  const windowWidth = windowRect.width;
+  const windowHeight = windowRect.height;
+  const maxWidth = windowWidth - 2 * screenPadding;
+  const maxHeight = windowHeight - 2 * screenPadding;
+  const width = Math.min(containerRect.width, maxWidth);
+  const height = Math.min(containerRect.height, maxHeight);
+  const leftSuggestion = {
+    beforeStart: anchorRect.left - width - gap,
+    afterStart: anchorRect.left,
+    center: anchorRect.left + anchorRect.width / 2 - width / 2,
+    beforeEnd: anchorRect.right - width,
+    afterEnd: anchorRect.right + gap
+  }[horizontalAlignment];
+  const topSuggestion = {
+    beforeStart: anchorRect.top - height - gap,
+    afterStart: anchorRect.top,
+    center: anchorRect.top + anchorRect.height / 2 - height / 2,
+    beforeEnd: anchorRect.bottom - height,
+    afterEnd: anchorRect.bottom + gap
+  }[verticalAlignment];
+  const left = clamp(leftSuggestion, [
+    screenPadding,
+    windowWidth - screenPadding - width
+  ]);
+  const top = clamp(topSuggestion, [
+    screenPadding,
+    windowHeight - screenPadding - height
+  ]);
+  return {
+    left,
+    top,
+    maxWidth,
+    maxHeight
+  };
+}
+function useFloatingElement({
+  active = true,
+  windowRef,
+  anchorRef,
+  containerRef,
+  isPolling = false,
+  pollingInterval = 100,
+  verticalAlignment = "afterEnd",
+  horizontalAlignment = "afterStart",
+  screenPadding = 16,
+  gap = 4
+}) {
+  const [style, setStyle] = useState2();
+  const isMounted = useIsMounted();
+  const calculate = useCallback(() => {
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const windowRect = windowRef?.current.getBoundingClientRect() ?? {
+      top: 0,
+      bottom: window.innerHeight,
+      left: 0,
+      right: window.innerWidth,
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    const anchorElement = anchorRef?.current;
+    if (anchorRef && !anchorElement) {
+      console.warn("FloatingContainer anchor provided, but its value is undefined");
+    }
+    const anchorRect = anchorElement?.getBoundingClientRect() ?? windowRect;
+    const calculateProps = {
+      windowRect,
+      anchorRect,
+      containerRect,
+      options: {
+        horizontalAlignment,
+        verticalAlignment,
+        screenPadding,
+        gap
+      }
+    };
+    setStyle(calculatePosition(calculateProps));
+  }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
+  const height = containerRef.current?.getBoundingClientRect().height;
+  const width = containerRef.current?.getBoundingClientRect().width;
+  useEffect2(() => {
+    if (active && isMounted) {
+      calculate();
+    } else {
+      setStyle(void 0);
+    }
+  }, [calculate, active, isMounted, height, width]);
+  useEffect2(() => {
+    window.addEventListener("resize", calculate);
+    let timeout;
+    if (isPolling) {
+      timeout = setInterval(calculate, pollingInterval);
+    }
+    return () => {
+      window.removeEventListener("resize", calculate);
+      if (timeout) {
+        clearInterval(timeout);
+      }
+    };
+  }, [calculate, isPolling, pollingInterval]);
+  return style;
+}
+
+// src/components/layout/FloatingContainer.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FloatingContainer = forwardRef(function FloatingContainer2({
+  children,
+  backgroundOverlay,
+  anchor,
+  isPolling = false,
+  pollingInterval = 100,
+  verticalAlignment = "afterEnd",
+  horizontalAlignment = "afterStart",
+  screenPadding = 16,
+  gap = 4,
+  ...props
+}, forwardRef2) {
+  const innerRef = useRef(null);
+  useImperativeHandle(forwardRef2, () => innerRef.current);
+  const position = useFloatingElement({
+    active: !props.hidden,
+    containerRef: innerRef,
+    anchorRef: anchor,
+    isPolling,
+    pollingInterval,
+    verticalAlignment,
+    horizontalAlignment,
+    gap,
+    screenPadding
+  });
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      backgroundOverlay,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          ref: innerRef,
+          style: {
+            position: "fixed",
+            overflow: "hidden",
+            opacity: position ? void 0 : 0,
+            // hide when position calculation isn't done yet
+            transition: position ? `top ${pollingInterval}ms linear, left ${pollingInterval}ms linear` : void 0,
+            ...position,
+            ...props.style
+          },
+          className: clsx("motion-safe:duration-100 motion-reduce:duration-0", props.className),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+});
+export {
+  FloatingContainer
+};
+//# sourceMappingURL=FloatingContainer.mjs.map

package/dist/components/layout/FloatingContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/FloatingContainer.tsx","../../../src/hooks/useFloatingElement.ts","../../../src/utils/math.ts","../../../src/hooks/focus/useIsMounted.ts"],"sourcesContent":["import type { HTMLAttributes, MutableRefObject, ReactNode } from 'react'\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport type { UseFloatingElementOptions } from '@/src/hooks/useFloatingElement'\nimport { useFloatingElement } from '@/src/hooks/useFloatingElement'\n\nexport type FloatingContainerProps = HTMLAttributes<HTMLDivElement> & UseFloatingElementOptions & {\n  anchor?: MutableRefObject<HTMLElement>,\n  /**\n   * Polls the position of the anchor every 100ms\n   *\n   * Use sparingly\n   */\n  backgroundOverlay?: ReactNode,\n}\n\n/**\n * A floating container that aligns to its anchor\n *\n * Notes:\n * - to hide it use the hidden attribute as other means break the functionality\n */\nexport const FloatingContainer = forwardRef<HTMLDivElement, FloatingContainerProps>(function FloatingContainer({\n                                                                                                                 children,\n                                                                                                                 backgroundOverlay,\n                                                                                                                 anchor,\n                                                                                                                 isPolling = false,\n                                                                                                                 pollingInterval = 100,\n                                                                                                                 verticalAlignment = 'afterEnd',\n                                                                                                                 horizontalAlignment = 'afterStart',\n                                                                                                                 screenPadding = 16,\n                                                                                                                 gap = 4,\n                                                                                                                 ...props\n                                                                                                               }, forwardRef) {\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(forwardRef, () => innerRef.current)\n\n  const position = useFloatingElement({\n    active: !props.hidden,\n    containerRef: innerRef,\n    anchorRef: anchor,\n    isPolling,\n    pollingInterval,\n    verticalAlignment,\n    horizontalAlignment,\n    gap,\n    screenPadding,\n  })\n\n  return createPortal(\n    <>\n      {backgroundOverlay}\n      <div\n        {...props}\n        ref={innerRef}\n        style={{\n          position: 'fixed',\n          overflow: 'hidden',\n          opacity: position ? undefined : 0, // hide when position calculation isn't done yet\n          transition: position ? `top ${pollingInterval}ms linear, left ${pollingInterval}ms linear` : undefined,\n          ...position,\n          ...props.style\n        }}\n        className={clsx('motion-safe:duration-100 motion-reduce:duration-0', props.className)}\n      >\n        {children}\n      </div>\n    </>,\n    document.body\n  )\n})","'use client'\n\nimport type { CSSProperties, MutableRefObject } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { clamp } from '@/src/utils/math'\nimport { useIsMounted } from '@/src/hooks/focus/useIsMounted'\n\nexport type FloatingElementAlignment = 'beforeStart' | 'afterStart' | 'center' | 'beforeEnd' | 'afterEnd'\n\ntype RectangleBounds = {\n  top: number,\n  right: number,\n  bottom: number,\n  left: number,\n  width: number,\n  height: number,\n}\n\ntype CalculatePositionOptions = {\n  verticalAlignment?: FloatingElementAlignment,\n  horizontalAlignment?: FloatingElementAlignment,\n  screenPadding?: number,\n  gap?: number,\n}\n\ntype CalculatePositionProps = {\n  windowRect: RectangleBounds,\n  containerRect: RectangleBounds,\n  anchorRect: RectangleBounds,\n  options: CalculatePositionOptions,\n}\n\ntype UseFloatingElementStyle = {\n  left: number,\n  top: number,\n  maxWidth: number,\n  maxHeight: number,\n}\n\nfunction calculatePosition({\n                             windowRect,\n                             containerRect,\n                             anchorRect,\n                             options,\n                           }: CalculatePositionProps): UseFloatingElementStyle {\n  const { verticalAlignment, horizontalAlignment, gap, screenPadding } = options\n  const windowWidth = windowRect.width\n  const windowHeight = windowRect.height\n\n  const maxWidth = windowWidth - 2 * screenPadding\n  const maxHeight = windowHeight - 2 * screenPadding\n\n  const width = Math.min(containerRect.width, maxWidth)\n  const height = Math.min(containerRect.height, maxHeight)\n\n  const leftSuggestion = {\n    beforeStart: anchorRect.left - width - gap,\n    afterStart: anchorRect.left,\n    center: anchorRect.left + anchorRect.width / 2 - width / 2,\n    beforeEnd: anchorRect.right - width,\n    afterEnd: anchorRect.right + gap,\n  }[horizontalAlignment]\n\n  const topSuggestion = {\n    beforeStart: anchorRect.top - height - gap,\n    afterStart: anchorRect.top,\n    center: anchorRect.top + anchorRect.height / 2 - height / 2,\n    beforeEnd: anchorRect.bottom - height,\n    afterEnd: anchorRect.bottom + gap,\n  }[verticalAlignment]\n\n  const left = clamp(leftSuggestion, [\n    screenPadding,\n    windowWidth - screenPadding - width,\n  ])\n\n  const top = clamp(topSuggestion, [\n    screenPadding,\n    windowHeight - screenPadding - height,\n  ])\n\n  return {\n    left,\n    top,\n    maxWidth,\n    maxHeight,\n  }\n}\n\nexport type UseFloatingElementOptions = CalculatePositionOptions & {\n  isPolling?: boolean,\n  pollingInterval?: number,\n}\n\nexport type UseFloatingElementProps = UseFloatingElementOptions & {\n  containerRef: MutableRefObject<HTMLElement>,\n  anchorRef: MutableRefObject<HTMLElement>,\n  windowRef?: MutableRefObject<HTMLElement>,\n  active?: boolean,\n}\n\nexport function useFloatingElement({\n                                     active = true,\n                                     windowRef,\n                                     anchorRef,\n                                     containerRef,\n                                     isPolling = false,\n                                     pollingInterval = 100,\n                                     verticalAlignment = 'afterEnd',\n                                     horizontalAlignment = 'afterStart',\n                                     screenPadding = 16,\n                                     gap = 4,\n                                   }: UseFloatingElementProps) {\n  const [style, setStyle] = useState<CSSProperties>()\n  const isMounted = useIsMounted()\n\n  const calculate = useCallback(() => {\n    const containerRect = containerRef.current.getBoundingClientRect()\n    const windowRect: RectangleBounds = windowRef?.current.getBoundingClientRect() ?? {\n      top: 0,\n      bottom: window.innerHeight,\n      left: 0,\n      right: window.innerWidth,\n      width: window.innerWidth,\n      height: window.innerHeight,\n    }\n    const anchorElement = anchorRef?.current\n    if (anchorRef && !anchorElement) {\n      console.warn('FloatingContainer anchor provided, but its value is undefined')\n    }\n    const anchorRect: RectangleBounds = anchorElement?.getBoundingClientRect() ?? windowRect\n\n    const calculateProps: CalculatePositionProps = {\n      windowRect,\n      anchorRect,\n      containerRect,\n      options: {\n        horizontalAlignment,\n        verticalAlignment,\n        screenPadding,\n        gap,\n      }\n    }\n    setStyle(calculatePosition(calculateProps))\n  }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef])\n\n\n  const height = containerRef.current?.getBoundingClientRect().height\n  const width = containerRef.current?.getBoundingClientRect().width\n  useEffect(() => {\n    if (active && isMounted) {\n      calculate()\n    } else {\n      setStyle(undefined)\n    }\n  }, [calculate, active, isMounted, height, width])\n\n  useEffect(() => {\n    window.addEventListener('resize', calculate)\n    let timeout: NodeJS.Timeout\n    if (isPolling) {\n      timeout = setInterval(calculate, pollingInterval)\n    }\n    return () => {\n      window.removeEventListener('resize', calculate)\n      if (timeout) {\n        clearInterval(timeout)\n      }\n    }\n  }, [calculate, isPolling, pollingInterval])\n\n  return style\n}","export const clamp = (value: number, range: [number, number] = [0, 1]): number => {\n  const [min, max] = range\n  return Math.min(Math.max(value, min), max)\n}\n","'use client'\n\nimport { useEffect, useLayoutEffect, useState } from 'react'\n\nconst isClient = typeof window !== 'undefined' && typeof document !== 'undefined'\nconst useIsomorphicEffect = isClient ? useLayoutEffect : useEffect\n\nexport const useIsMounted = () => {\n  const [isMounted, setIsMounted] = useState(false)\n\n  useIsomorphicEffect(() => {\n    setIsMounted(true)\n    return () => {\n      setIsMounted(false)\n    }\n  }, [])\n  return isMounted\n}"],"mappings":"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","names":["useEffect","useState","useState","useEffect","FloatingContainer","forwardRef"]}

package/dist/components/layout/ListBox.d.mts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { HTMLAttributes } from 'react';
+
+type ListBoxItemProps = HTMLAttributes<HTMLLIElement> & {
+    value: string;
+    disabled?: boolean;
+};
+declare const ListBoxItem: React__default.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+    value: string;
+    disabled?: boolean;
+} & React__default.RefAttributes<HTMLLIElement>>;
+type ListBoxOrientation = 'vertical' | 'horizontal';
+type ListBoxPrimitiveProps = HTMLAttributes<HTMLUListElement> & {
+    value?: string[];
+    onItemClicked?: (value: string) => void;
+    onSelectionChanged?: (value: string[]) => void;
+    isSelection?: boolean;
+    isMultiple?: boolean;
+    orientation?: ListBoxOrientation;
+};
+declare const ListBoxPrimitive: React__default.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    value?: string[];
+    onItemClicked?: (value: string) => void;
+    onSelectionChanged?: (value: string[]) => void;
+    isSelection?: boolean;
+    isMultiple?: boolean;
+    orientation?: ListBoxOrientation;
+} & React__default.RefAttributes<HTMLUListElement>>;
+type ListBoxMultipleProps = Omit<ListBoxPrimitiveProps, 'isMultiple'>;
+declare const ListBoxMultiple: ({ ...props }: ListBoxMultipleProps) => react_jsx_runtime.JSX.Element;
+type ListBoxMultipleUncontrolledProps = ListBoxMultipleProps;
+declare const ListBoxMultipleUncontrolled: ({ value: initialValue, onSelectionChanged, ...props }: ListBoxMultipleUncontrolledProps) => react_jsx_runtime.JSX.Element;
+type ListBoxProps = Omit<ListBoxPrimitiveProps, 'isMultiple' | 'value' | 'onSelectionChanged'> & {
+    value?: string;
+    onSelectionChanged?: (value: string) => void;
+};
+declare const ListBox: React__default.ForwardRefExoticComponent<Omit<ListBoxPrimitiveProps, "value" | "onSelectionChanged" | "isMultiple"> & {
+    value?: string;
+    onSelectionChanged?: (value: string) => void;
+} & React__default.RefAttributes<HTMLUListElement>>;
+type ListBoxUncontrolledProps = ListBoxProps;
+declare const ListBoxUncontrolled: ({ value: initialValue, onSelectionChanged, ...props }: ListBoxUncontrolledProps) => react_jsx_runtime.JSX.Element;
+
+export { ListBox, ListBoxItem, type ListBoxItemProps, ListBoxMultiple, type ListBoxMultipleProps, ListBoxMultipleUncontrolled, type ListBoxMultipleUncontrolledProps, ListBoxPrimitive, type ListBoxPrimitiveProps, type ListBoxProps, ListBoxUncontrolled, type ListBoxUncontrolledProps };

package/dist/components/layout/ListBox.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { HTMLAttributes } from 'react';
+
+type ListBoxItemProps = HTMLAttributes<HTMLLIElement> & {
+    value: string;
+    disabled?: boolean;
+};
+declare const ListBoxItem: React__default.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+    value: string;
+    disabled?: boolean;
+} & React__default.RefAttributes<HTMLLIElement>>;
+type ListBoxOrientation = 'vertical' | 'horizontal';
+type ListBoxPrimitiveProps = HTMLAttributes<HTMLUListElement> & {
+    value?: string[];
+    onItemClicked?: (value: string) => void;
+    onSelectionChanged?: (value: string[]) => void;
+    isSelection?: boolean;
+    isMultiple?: boolean;
+    orientation?: ListBoxOrientation;
+};
+declare const ListBoxPrimitive: React__default.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    value?: string[];
+    onItemClicked?: (value: string) => void;
+    onSelectionChanged?: (value: string[]) => void;
+    isSelection?: boolean;
+    isMultiple?: boolean;
+    orientation?: ListBoxOrientation;
+} & React__default.RefAttributes<HTMLUListElement>>;
+type ListBoxMultipleProps = Omit<ListBoxPrimitiveProps, 'isMultiple'>;
+declare const ListBoxMultiple: ({ ...props }: ListBoxMultipleProps) => react_jsx_runtime.JSX.Element;
+type ListBoxMultipleUncontrolledProps = ListBoxMultipleProps;
+declare const ListBoxMultipleUncontrolled: ({ value: initialValue, onSelectionChanged, ...props }: ListBoxMultipleUncontrolledProps) => react_jsx_runtime.JSX.Element;
+type ListBoxProps = Omit<ListBoxPrimitiveProps, 'isMultiple' | 'value' | 'onSelectionChanged'> & {
+    value?: string;
+    onSelectionChanged?: (value: string) => void;
+};
+declare const ListBox: React__default.ForwardRefExoticComponent<Omit<ListBoxPrimitiveProps, "value" | "onSelectionChanged" | "isMultiple"> & {
+    value?: string;
+    onSelectionChanged?: (value: string) => void;
+} & React__default.RefAttributes<HTMLUListElement>>;
+type ListBoxUncontrolledProps = ListBoxProps;
+declare const ListBoxUncontrolled: ({ value: initialValue, onSelectionChanged, ...props }: ListBoxUncontrolledProps) => react_jsx_runtime.JSX.Element;
+
+export { ListBox, ListBoxItem, type ListBoxItemProps, ListBoxMultiple, type ListBoxMultipleProps, ListBoxMultipleUncontrolled, type ListBoxMultipleUncontrolledProps, ListBoxPrimitive, type ListBoxPrimitiveProps, type ListBoxProps, ListBoxUncontrolled, type ListBoxUncontrolledProps };