@helpwave/hightide 0.1.45 → 0.1.47

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

@@ -1 +0,0 @@
-{"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\n        data-positioned={position && !props.hidden ? '' : undefined}\n\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.d.cts

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { HTMLAttributes, MutableRefObject, ReactNode } from 'react';
-import { UseFloatingElementOptions, FloatingElementAlignment } from '../../hooks/useFloatingElement.cjs';
-
-type FloatingContainerProps = HTMLAttributes<HTMLDivElement> & UseFloatingElementOptions & {
-    anchor?: MutableRefObject<HTMLElement>;
-    /**
-     * Polls the position of the anchor every 100ms
-     *
-     * Use sparingly
-     */
-    backgroundOverlay?: ReactNode;
-};
-/**
- * A floating container that aligns to its anchor
- *
- * Notes:
- * - to hide it use the hidden attribute as other means break the functionality
- */
-declare const FloatingContainer: React.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    verticalAlignment?: FloatingElementAlignment;
-    horizontalAlignment?: FloatingElementAlignment;
-    screenPadding?: number;
-    gap?: number;
-} & {
-    isPolling?: boolean;
-    pollingInterval?: number;
-} & {
-    anchor?: MutableRefObject<HTMLElement>;
-    /**
-     * Polls the position of the anchor every 100ms
-     *
-     * Use sparingly
-     */
-    backgroundOverlay?: ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
-
-export { FloatingContainer, type FloatingContainerProps };

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

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { HTMLAttributes, MutableRefObject, ReactNode } from 'react';
-import { UseFloatingElementOptions, FloatingElementAlignment } from '../../hooks/useFloatingElement.js';
-
-type FloatingContainerProps = HTMLAttributes<HTMLDivElement> & UseFloatingElementOptions & {
-    anchor?: MutableRefObject<HTMLElement>;
-    /**
-     * Polls the position of the anchor every 100ms
-     *
-     * Use sparingly
-     */
-    backgroundOverlay?: ReactNode;
-};
-/**
- * A floating container that aligns to its anchor
- *
- * Notes:
- * - to hide it use the hidden attribute as other means break the functionality
- */
-declare const FloatingContainer: React.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    verticalAlignment?: FloatingElementAlignment;
-    horizontalAlignment?: FloatingElementAlignment;
-    screenPadding?: number;
-    gap?: number;
-} & {
-    isPolling?: boolean;
-    pollingInterval?: number;
-} & {
-    anchor?: MutableRefObject<HTMLElement>;
-    /**
-     * Polls the position of the anchor every 100ms
-     *
-     * Use sparingly
-     */
-    backgroundOverlay?: ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
-
-export { FloatingContainer, type FloatingContainerProps };

package/dist/components/layout/FloatingContainer.js

@@ -1,196 +0,0 @@
-// 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,
-          "data-positioned": position && !props.hidden ? "" : void 0,
-          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.js.map

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

@@ -1 +0,0 @@
-{"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\n        data-positioned={position && !props.hidden ? '' : undefined}\n\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.cjs

@@ -1,339 +0,0 @@
-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);
-
-// src/components/layout/ListBox.tsx
-var ListBox_exports = {};
-__export(ListBox_exports, {
-  ListBox: () => ListBox,
-  ListBoxItem: () => ListBoxItem,
-  ListBoxMultiple: () => ListBoxMultiple,
-  ListBoxMultipleUncontrolled: () => ListBoxMultipleUncontrolled,
-  ListBoxPrimitive: () => ListBoxPrimitive,
-  ListBoxUncontrolled: () => ListBoxUncontrolled
-});
-module.exports = __toCommonJS(ListBox_exports);
-var import_react2 = __toESM(require("react"), 1);
-var import_clsx = require("clsx");
-
-// src/utils/match.ts
-var match = (key, values) => {
-  return values[key];
-};
-
-// src/hooks/useOverwritableState.ts
-var import_react = require("react");
-
-// src/utils/resolveSetState.ts
-function resolveSetState(action, prev) {
-  return typeof action === "function" ? action(prev) : action;
-}
-
-// src/hooks/useOverwritableState.ts
-var useOverwritableState = (initialValue, onChange) => {
-  const [state, setState] = (0, import_react.useState)(initialValue);
-  (0, import_react.useEffect)(() => {
-    setState(initialValue);
-  }, [initialValue]);
-  const onChangeWrapper = (action) => {
-    const resolved = resolveSetState(action, state);
-    setState(resolved);
-    onChange?.(state);
-  };
-  return [state, onChangeWrapper];
-};
-
-// src/components/layout/ListBox.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var ListBoxContext = (0, import_react2.createContext)(null);
-function useListBoxContext() {
-  const ctx = (0, import_react2.useContext)(ListBoxContext);
-  if (!ctx) {
-    throw new Error("ListBoxItem must be used within a ListBoxPrimitive");
-  }
-  return ctx;
-}
-var ListBoxItem = (0, import_react2.forwardRef)(
-  function ListBoxItem2({ value, disabled = false, children, className, ...rest }, ref) {
-    const {
-      registerItem,
-      unregisterItem,
-      highlightedId,
-      setHighlightedId,
-      onItemClick,
-      isSelected
-    } = useListBoxContext();
-    const itemRef = (0, import_react2.useRef)(null);
-    const id = import_react2.default.useId();
-    (0, import_react2.useEffect)(() => {
-      registerItem({ id, value, disabled, ref: itemRef });
-      return () => unregisterItem(id);
-    }, [id, value, disabled, registerItem, unregisterItem]);
-    const isHighlighted = highlightedId === id;
-    const selected = isSelected(value);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "li",
-      {
-        ref: (node) => {
-          itemRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        },
-        id,
-        role: "option",
-        "aria-disabled": disabled,
-        "aria-selected": selected,
-        "data-highlighted": isHighlighted ? "" : void 0,
-        "data-selected": selected ? "" : void 0,
-        "data-disabled": disabled ? "" : void 0,
-        className: (0, import_clsx.clsx)(
-          "flex-row-1 items-center px-2 py-1 rounded-md",
-          "data-highlighted:bg-primary/20",
-          "data-disabled:text-disabled data-disabled:cursor-not-allowed",
-          "not-data-disabled:cursor-pointer",
-          className
-        ),
-        onClick: () => {
-          if (!disabled) onItemClick(id);
-        },
-        onMouseEnter: () => {
-          if (!disabled) {
-            setHighlightedId(id);
-          }
-        },
-        ...rest,
-        children: children ?? value
-      }
-    );
-  }
-);
-var ListBoxPrimitive = (0, import_react2.forwardRef)(
-  function ListBoxPrimitive2({
-    value,
-    onSelectionChanged,
-    onItemClicked,
-    isSelection = false,
-    isMultiple = false,
-    orientation = "vertical",
-    ...props
-  }, ref) {
-    const itemsRef = (0, import_react2.useRef)([]);
-    const [highlightedIndex, setHighlightedIndex] = (0, import_react2.useState)(void 0);
-    const registerItem = (0, import_react2.useCallback)((item) => {
-      itemsRef.current.push(item);
-      itemsRef.current.sort((a, b) => {
-        const aEl = a.ref.current;
-        const bEl = b.ref.current;
-        if (!aEl || !bEl) return 0;
-        return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
-      });
-    }, []);
-    const unregisterItem = (0, import_react2.useCallback)((id) => {
-      itemsRef.current = itemsRef.current.filter((i) => i.id !== id);
-    }, []);
-    const isSelected = (0, import_react2.useCallback)(
-      (val) => (value ?? []).includes(val),
-      [value]
-    );
-    const onItemClickedHandler = (0, import_react2.useCallback)(
-      (id) => {
-        const index = itemsRef.current.findIndex((i) => i.id === id);
-        if (index === -1) {
-          console.error("ListBoxItem provided an invalid id");
-          return;
-        }
-        const item = itemsRef.current[index];
-        const val = item.value;
-        onItemClicked?.(val);
-        setHighlightedIndex(index);
-        if (!isSelection) return;
-        if (!isMultiple) {
-          onSelectionChanged?.([val]);
-        } else {
-          if (isSelected(val)) {
-            onSelectionChanged?.((value ?? []).filter((v) => v !== val));
-          } else {
-            onSelectionChanged?.([...value ?? [], val]);
-          }
-        }
-      },
-      [onItemClicked, isSelection, isMultiple, onSelectionChanged, isSelected, value]
-    );
-    const setHighlightedId = (0, import_react2.useCallback)((id) => {
-      const index = itemsRef.current.findIndex((i) => i.id === id);
-      if (index !== -1) {
-        setHighlightedIndex(index);
-      }
-    }, []);
-    (0, import_react2.useEffect)(() => {
-      if (highlightedIndex !== void 0) {
-        itemsRef.current[highlightedIndex]?.ref.current?.scrollIntoView({ block: "nearest", behavior: "auto" });
-      }
-    }, [highlightedIndex]);
-    const highlightedItem = itemsRef.current[highlightedIndex];
-    const ctxValue = {
-      registerItem,
-      unregisterItem,
-      highlightedId: highlightedItem?.id,
-      setHighlightedId,
-      onItemClick: onItemClickedHandler,
-      isSelected
-    };
-    const moveHighlight = (delta) => {
-      if (itemsRef.current.length === 0) return;
-      let nextIndex = highlightedIndex ?? -1;
-      for (let i = 0; i < itemsRef.current.length; i++) {
-        nextIndex = (nextIndex + delta + itemsRef.current.length) % itemsRef.current.length;
-        if (!itemsRef.current[nextIndex].disabled) break;
-      }
-      setHighlightedIndex(nextIndex);
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListBoxContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "ul",
-      {
-        ref,
-        ...props,
-        onFocus: (event) => {
-          if (highlightedIndex === void 0) {
-            const firstEnabled = itemsRef.current.findIndex((i) => !i.disabled);
-            setHighlightedIndex(firstEnabled !== -1 ? firstEnabled : void 0);
-          }
-          props.onFocus?.(event);
-        },
-        onBlur: (event) => {
-          setHighlightedIndex(void 0);
-          props.onBlur?.(event);
-        },
-        onKeyDown: (event) => {
-          switch (event.key) {
-            case match(orientation, {
-              vertical: "ArrowDown",
-              horizontal: "ArrowUp"
-            }):
-              moveHighlight(1);
-              event.preventDefault();
-              break;
-            case match(orientation, {
-              vertical: "ArrowUp",
-              horizontal: "ArrowDown"
-            }):
-              moveHighlight(-1);
-              event.preventDefault();
-              break;
-            case "Home":
-              setHighlightedIndex(itemsRef.current.findIndex((i) => !i.disabled));
-              event.preventDefault();
-              break;
-            case "End":
-              for (let i = itemsRef.current.length - 1; i >= 0; i--) {
-                if (!itemsRef.current[i].disabled) {
-                  setHighlightedIndex(i);
-                  break;
-                }
-              }
-              event.preventDefault();
-              break;
-            case "Enter":
-            case " ":
-              if (highlightedIndex !== void 0) {
-                event.preventDefault();
-                onItemClickedHandler(itemsRef.current[highlightedIndex].id);
-              }
-              break;
-          }
-          props.onKeyDown?.(event);
-        },
-        role: "listbox",
-        "aria-multiselectable": isSelection ? isMultiple : void 0,
-        "aria-orientation": orientation,
-        tabIndex: 0,
-        children: props.children
-      }
-    ) });
-  }
-);
-var ListBoxMultiple = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListBoxPrimitive, { ...props });
-};
-var ListBoxMultipleUncontrolled = ({
-  value: initialValue,
-  onSelectionChanged,
-  ...props
-}) => {
-  const [value, setValue] = useOverwritableState(initialValue, onSelectionChanged);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ListBoxMultiple,
-    {
-      ...props,
-      value,
-      onSelectionChanged: setValue
-    }
-  );
-};
-var ListBox = (0, import_react2.forwardRef)(function ListBox2({
-  value,
-  onSelectionChanged,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ListBoxPrimitive,
-    {
-      ref,
-      value: value !== void 0 ? [value] : void 0,
-      onSelectionChanged: (newValue) => {
-        onSelectionChanged(newValue[0] ?? value);
-      },
-      isMultiple: false,
-      ...props
-    }
-  );
-});
-var ListBoxUncontrolled = ({
-  value: initialValue,
-  onSelectionChanged,
-  ...props
-}) => {
-  const [value, setValue] = useOverwritableState(initialValue, onSelectionChanged);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ListBox,
-    {
-      ...props,
-      value,
-      onSelectionChanged: setValue
-    }
-  );
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ListBox,
-  ListBoxItem,
-  ListBoxMultiple,
-  ListBoxMultipleUncontrolled,
-  ListBoxPrimitive,
-  ListBoxUncontrolled
-});
-//# sourceMappingURL=ListBox.cjs.map