@intlayer/design-system 8.4.4 → 8.4.6

package/dist/esm/components/Popover/dynamic.mjs

@@ -1,2 +1,129 @@
-"use client";import{Detail as e,PopoverStatic as t,PopoverXAlign as n,PopoverYAlign as r}from"./static.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=e=>s(t,{...e}),l=({xAlign:t=n.START,yAlign:c=r.BELOW,...l})=>{let u=a(null),[d,f]=o(t),[p,m]=o(c),[h,g]=o(void 0);return i(()=>{let e=()=>{if(!u.current)return;let e=u.current,i=document.getElementById(`unrollable-panel-button-${l.identifier}`);if(!i)return;let a=i.getBoundingClientRect(),o=window.innerWidth,s=window.innerHeight,d=o-a.left-16,p=a.right-16;g(Math.max(d,p));let h=e.classList.contains(`invisible`);h&&(e.style.visibility=`hidden`,e.classList.remove(`invisible`)),requestAnimationFrame(()=>{let i=e.getBoundingClientRect();h&&(e.style.visibility=``,e.classList.add(`invisible`));let l=c,u=s-a.bottom-16,d=a.top-16;c===r.BELOW&&u<i.height?d>=i.height&&(l=r.ABOVE):c===r.ABOVE&&d<i.height&&u>=i.height&&(l=r.BELOW);let p=t,g=o-a.left-16,_=a.right-16;t===n.START&&g<i.width?_>=i.width&&(p=n.END):t===n.END&&_<i.width&&g>=i.width&&(p=n.START),m(l),f(p)})},i=setTimeout(e,0),a=document.getElementById(`unrollable-panel-button-${l.identifier}`);a&&(a.addEventListener(`mouseenter`,e),a.addEventListener(`focusin`,e));let o=new ResizeObserver(()=>{e()});return u.current&&o.observe(u.current),window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{clearTimeout(i),a&&(a.removeEventListener(`mouseenter`,e),a.removeEventListener(`focusin`,e)),o.disconnect(),window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[l.identifier,t,c]),s(e,{...l,xAlign:d,yAlign:p,ref:u,style:{...l.style,maxWidth:h?`${h}px`:void 0}})},u=c;u.Detail=l;export{u as Popover};
+'use client';
+
+import { Detail as Detail$1, PopoverStatic, PopoverXAlign, PopoverYAlign } from "./static.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Popover/dynamic.tsx
+/**
+* Popover Component (Client-side)
+*
+* Client-side wrapper around the static Popover component.
+* Reuses the server-side compatible implementation.
+*
+* @param props - Popover component props
+* @returns Trigger container with popover functionality
+*/
+const PopoverComponent = (props) => {
+	return /* @__PURE__ */ jsx(PopoverStatic, { ...props });
+};
+/**
+* Popover Detail Component (Client-side)
+*
+* Client-side wrapper around the static Detail component that adds automatic
+* positioning logic based on viewport constraints.
+*
+* Features:
+* - Reuses server-side compatible static Detail component
+* - Adds automatic positioning adjustment based on viewport
+* - Calculates optimal X/Y alignment to prevent overflow
+* - Dynamically adjusts max-width based on available space
+* - Listens to window resize and scroll events
+*
+* @param props - Popover Detail component props
+* @returns Positioned popover content with animations and accessibility
+*/
+const Detail = ({ xAlign = PopoverXAlign.START, yAlign = PopoverYAlign.BELOW, ...props }) => {
+	const popoverRef = useRef(null);
+	const [computedXAlign, setComputedXAlign] = useState(xAlign);
+	const [computedYAlign, setComputedYAlign] = useState(yAlign);
+	const [maxWidth, setMaxWidth] = useState(void 0);
+	useEffect(() => {
+		const adjustPosition = () => {
+			if (!popoverRef.current) return;
+			const popoverElement = popoverRef.current;
+			const triggerElement = document.getElementById(`unrollable-panel-button-${props.identifier}`);
+			if (!triggerElement) return;
+			const triggerRect = triggerElement.getBoundingClientRect();
+			const viewportWidth = window.innerWidth;
+			const viewportHeight = window.innerHeight;
+			const gap = 16;
+			const padding = 16;
+			const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;
+			const maxWidthFromRight = triggerRect.right - padding;
+			setMaxWidth(Math.max(maxWidthFromLeft, maxWidthFromRight));
+			const wasInvisible = popoverElement.classList.contains("invisible");
+			if (wasInvisible) {
+				popoverElement.style.visibility = "hidden";
+				popoverElement.classList.remove("invisible");
+			}
+			requestAnimationFrame(() => {
+				const popoverRect = popoverElement.getBoundingClientRect();
+				if (wasInvisible) {
+					popoverElement.style.visibility = "";
+					popoverElement.classList.add("invisible");
+				}
+				let newYAlign = yAlign;
+				const spaceBelow = viewportHeight - triggerRect.bottom - gap;
+				const spaceAbove = triggerRect.top - gap;
+				if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {
+					if (spaceAbove >= popoverRect.height) newYAlign = PopoverYAlign.ABOVE;
+				} else if (yAlign === PopoverYAlign.ABOVE && spaceAbove < popoverRect.height) {
+					if (spaceBelow >= popoverRect.height) newYAlign = PopoverYAlign.BELOW;
+				}
+				let newXAlign = xAlign;
+				const spaceRight = viewportWidth - triggerRect.left - padding;
+				const spaceLeft = triggerRect.right - padding;
+				if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {
+					if (spaceLeft >= popoverRect.width) newXAlign = PopoverXAlign.END;
+				} else if (xAlign === PopoverXAlign.END && spaceLeft < popoverRect.width) {
+					if (spaceRight >= popoverRect.width) newXAlign = PopoverXAlign.START;
+				}
+				setComputedYAlign(newYAlign);
+				setComputedXAlign(newXAlign);
+			});
+		};
+		const timeoutId = setTimeout(adjustPosition, 0);
+		const triggerElement = document.getElementById(`unrollable-panel-button-${props.identifier}`);
+		if (triggerElement) {
+			triggerElement.addEventListener("mouseenter", adjustPosition);
+			triggerElement.addEventListener("focusin", adjustPosition);
+		}
+		const resizeObserver = new ResizeObserver(() => {
+			adjustPosition();
+		});
+		if (popoverRef.current) resizeObserver.observe(popoverRef.current);
+		window.addEventListener("resize", adjustPosition);
+		window.addEventListener("scroll", adjustPosition, true);
+		return () => {
+			clearTimeout(timeoutId);
+			if (triggerElement) {
+				triggerElement.removeEventListener("mouseenter", adjustPosition);
+				triggerElement.removeEventListener("focusin", adjustPosition);
+			}
+			resizeObserver.disconnect();
+			window.removeEventListener("resize", adjustPosition);
+			window.removeEventListener("scroll", adjustPosition, true);
+		};
+	}, [
+		props.identifier,
+		xAlign,
+		yAlign
+	]);
+	return /* @__PURE__ */ jsx(Detail$1, {
+		...props,
+		xAlign: computedXAlign,
+		yAlign: computedYAlign,
+		ref: popoverRef,
+		style: {
+			...props.style,
+			maxWidth: maxWidth ? `${maxWidth}px` : void 0
+		}
+	});
+};
+const Popover = PopoverComponent;
+Popover.Detail = Detail;
+
+//#endregion
+export { Popover };
 //# sourceMappingURL=dynamic.mjs.map

package/dist/esm/components/Popover/dynamic.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n  type DetailProps,\n  type PopoverProps,\n  PopoverStatic,\n  type PopoverType,\n  PopoverXAlign,\n  PopoverYAlign,\n  Detail as StaticDetail,\n} from './static';\n\n/**\n * Popover Component (Client-side)\n *\n * Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n  return <PopoverStatic {...props} />;\n};\n\n/**\n * Popover Detail Component (Client-side)\n *\n * Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n *\n * Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n  xAlign = PopoverXAlign.START,\n  yAlign = PopoverYAlign.BELOW,\n  ...props\n}) => {\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [computedXAlign, setComputedXAlign] = useState(xAlign);\n  const [computedYAlign, setComputedYAlign] = useState(yAlign);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    const adjustPosition = () => {\n      if (!popoverRef.current) return;\n\n      const popoverElement = popoverRef.current;\n      const triggerElement = document.getElementById(\n        `unrollable-panel-button-${props.identifier}`\n      );\n\n      if (!triggerElement) return;\n\n      const triggerRect = triggerElement.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      const gap = 16; // 1rem gap\n      const padding = 16; // Additional padding from viewport edges\n\n      // Calculate maximum width based on viewport and trigger position\n      const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n      const maxWidthFromRight = triggerRect.right - padding;\n\n      // Use the larger space to ensure popover can fit\n      const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n      setMaxWidth(absoluteMaxWidth);\n\n      // Force a layout calculation by temporarily making visible if needed\n      const wasInvisible = popoverElement.classList.contains('invisible');\n      if (wasInvisible) {\n        popoverElement.style.visibility = 'hidden';\n        popoverElement.classList.remove('invisible');\n      }\n\n      // Small delay to ensure max-width is applied and content reflows\n      requestAnimationFrame(() => {\n        const popoverRect = popoverElement.getBoundingClientRect();\n\n        // Restore invisible state if it was invisible\n        if (wasInvisible) {\n          popoverElement.style.visibility = '';\n          popoverElement.classList.add('invisible');\n        }\n\n        // Determine optimal Y alignment\n        let newYAlign = yAlign;\n        const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n        const spaceAbove = triggerRect.top - gap;\n\n        if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {\n          // Not enough space below, try above\n          if (spaceAbove >= popoverRect.height) {\n            newYAlign = PopoverYAlign.ABOVE;\n          }\n        } else if (\n          yAlign === PopoverYAlign.ABOVE &&\n          spaceAbove < popoverRect.height\n        ) {\n          // Not enough space above, try below\n          if (spaceBelow >= popoverRect.height) {\n            newYAlign = PopoverYAlign.BELOW;\n          }\n        }\n\n        // Determine optimal X alignment\n        let newXAlign = xAlign;\n        const spaceRight = viewportWidth - triggerRect.left - padding;\n        const spaceLeft = triggerRect.right - padding;\n\n        if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {\n          // Not enough space on the right, try left\n          if (spaceLeft >= popoverRect.width) {\n            newXAlign = PopoverXAlign.END;\n          }\n        } else if (\n          xAlign === PopoverXAlign.END &&\n          spaceLeft < popoverRect.width\n        ) {\n          // Not enough space on the left, try right\n          if (spaceRight >= popoverRect.width) {\n            newXAlign = PopoverXAlign.START;\n          }\n        }\n\n        setComputedYAlign(newYAlign);\n        setComputedXAlign(newXAlign);\n      });\n    };\n\n    // Adjust position with a slight delay to ensure DOM is ready\n    const timeoutId = setTimeout(adjustPosition, 0);\n\n    // Listen to mouse enter on the trigger to recalculate\n    const triggerElement = document.getElementById(\n      `unrollable-panel-button-${props.identifier}`\n    );\n\n    if (triggerElement) {\n      triggerElement.addEventListener('mouseenter', adjustPosition);\n      triggerElement.addEventListener('focusin', adjustPosition);\n    }\n\n    // Use ResizeObserver to detect popover content size changes\n    const resizeObserver = new ResizeObserver(() => {\n      adjustPosition();\n    });\n\n    if (popoverRef.current) {\n      resizeObserver.observe(popoverRef.current);\n    }\n\n    window.addEventListener('resize', adjustPosition);\n    window.addEventListener('scroll', adjustPosition, true);\n\n    return () => {\n      clearTimeout(timeoutId);\n      if (triggerElement) {\n        triggerElement.removeEventListener('mouseenter', adjustPosition);\n        triggerElement.removeEventListener('focusin', adjustPosition);\n      }\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', adjustPosition);\n      window.removeEventListener('scroll', adjustPosition, true);\n    };\n  }, [props.identifier, xAlign, yAlign]);\n\n  // Use the static Detail component with computed alignment values\n  return (\n    <StaticDetail\n      {...props}\n      xAlign={computedXAlign}\n      yAlign={computedYAlign}\n      ref={popoverRef}\n      style={{\n        ...props.style,\n        maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n      }}\n    />\n  );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":"gNAuBA,MAAM,EAAsC,GACnC,EAAC,EAAD,CAAe,GAAI,EAAS,CAAA,CAmB/B,GAA2B,CAC/B,SAAS,EAAc,MACvB,SAAS,EAAc,MACvB,GAAG,KACC,CACJ,IAAM,EAAa,EAAuB,KAAK,CACzC,CAAC,EAAgB,GAAqB,EAAS,EAAO,CACtD,CAAC,EAAgB,GAAqB,EAAS,EAAO,CACtD,CAAC,EAAU,GAAe,EAA6B,IAAA,GAAU,CAgIvE,OA9HA,MAAgB,CACd,IAAM,MAAuB,CAC3B,GAAI,CAAC,EAAW,QAAS,OAEzB,IAAM,EAAiB,EAAW,QAC5B,EAAiB,SAAS,eAC9B,2BAA2B,EAAM,aAClC,CAED,GAAI,CAAC,EAAgB,OAErB,IAAM,EAAc,EAAe,uBAAuB,CACpD,EAAgB,OAAO,WACvB,EAAiB,OAAO,YAKxB,EAAmB,EAAgB,EAAY,KAAO,GACtD,EAAoB,EAAY,MAAQ,GAK9C,EAFyB,KAAK,IAAI,EAAkB,EAAkB,CAEzC,CAG7B,IAAM,EAAe,EAAe,UAAU,SAAS,YAAY,CAC/D,IACF,EAAe,MAAM,WAAa,SAClC,EAAe,UAAU,OAAO,YAAY,EAI9C,0BAA4B,CAC1B,IAAM,EAAc,EAAe,uBAAuB,CAGtD,IACF,EAAe,MAAM,WAAa,GAClC,EAAe,UAAU,IAAI,YAAY,EAI3C,IAAI,EAAY,EACV,EAAa,EAAiB,EAAY,OAAS,GACnD,EAAa,EAAY,IAAM,GAEjC,IAAW,EAAc,OAAS,EAAa,EAAY,OAEzD,GAAc,EAAY,SAC5B,EAAY,EAAc,OAG5B,IAAW,EAAc,OACzB,EAAa,EAAY,QAGrB,GAAc,EAAY,SAC5B,EAAY,EAAc,OAK9B,IAAI,EAAY,EACV,EAAa,EAAgB,EAAY,KAAO,GAChD,EAAY,EAAY,MAAQ,GAElC,IAAW,EAAc,OAAS,EAAa,EAAY,MAEzD,GAAa,EAAY,QAC3B,EAAY,EAAc,KAG5B,IAAW,EAAc,KACzB,EAAY,EAAY,OAGpB,GAAc,EAAY,QAC5B,EAAY,EAAc,OAI9B,EAAkB,EAAU,CAC5B,EAAkB,EAAU,EAC5B,EAIE,EAAY,WAAW,EAAgB,EAAE,CAGzC,EAAiB,SAAS,eAC9B,2BAA2B,EAAM,aAClC,CAEG,IACF,EAAe,iBAAiB,aAAc,EAAe,CAC7D,EAAe,iBAAiB,UAAW,EAAe,EAI5D,IAAM,EAAiB,IAAI,mBAAqB,CAC9C,GAAgB,EAChB,CASF,OAPI,EAAW,SACb,EAAe,QAAQ,EAAW,QAAQ,CAG5C,OAAO,iBAAiB,SAAU,EAAe,CACjD,OAAO,iBAAiB,SAAU,EAAgB,GAAK,KAE1C,CACX,aAAa,EAAU,CACnB,IACF,EAAe,oBAAoB,aAAc,EAAe,CAChE,EAAe,oBAAoB,UAAW,EAAe,EAE/D,EAAe,YAAY,CAC3B,OAAO,oBAAoB,SAAU,EAAe,CACpD,OAAO,oBAAoB,SAAU,EAAgB,GAAK,GAE3D,CAAC,EAAM,WAAY,EAAQ,EAAO,CAAC,CAIpC,EAACA,EAAD,CACE,GAAI,EACJ,OAAQ,EACR,OAAQ,EACR,IAAK,EACL,MAAO,CACL,GAAG,EAAM,MACT,SAAU,EAAW,GAAG,EAAS,IAAM,IAAA,GACxC,CACD,CAAA,EAKO,EAAuB,EAEpC,EAAQ,OAAS"}
+{"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n  type DetailProps,\n  type PopoverProps,\n  PopoverStatic,\n  type PopoverType,\n  PopoverXAlign,\n  PopoverYAlign,\n  Detail as StaticDetail,\n} from './static';\n\n/**\n * Popover Component (Client-side)\n *\n * Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n  return <PopoverStatic {...props} />;\n};\n\n/**\n * Popover Detail Component (Client-side)\n *\n * Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n *\n * Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n  xAlign = PopoverXAlign.START,\n  yAlign = PopoverYAlign.BELOW,\n  ...props\n}) => {\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [computedXAlign, setComputedXAlign] = useState(xAlign);\n  const [computedYAlign, setComputedYAlign] = useState(yAlign);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    const adjustPosition = () => {\n      if (!popoverRef.current) return;\n\n      const popoverElement = popoverRef.current;\n      const triggerElement = document.getElementById(\n        `unrollable-panel-button-${props.identifier}`\n      );\n\n      if (!triggerElement) return;\n\n      const triggerRect = triggerElement.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      const gap = 16; // 1rem gap\n      const padding = 16; // Additional padding from viewport edges\n\n      // Calculate maximum width based on viewport and trigger position\n      const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n      const maxWidthFromRight = triggerRect.right - padding;\n\n      // Use the larger space to ensure popover can fit\n      const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n      setMaxWidth(absoluteMaxWidth);\n\n      // Force a layout calculation by temporarily making visible if needed\n      const wasInvisible = popoverElement.classList.contains('invisible');\n      if (wasInvisible) {\n        popoverElement.style.visibility = 'hidden';\n        popoverElement.classList.remove('invisible');\n      }\n\n      // Small delay to ensure max-width is applied and content reflows\n      requestAnimationFrame(() => {\n        const popoverRect = popoverElement.getBoundingClientRect();\n\n        // Restore invisible state if it was invisible\n        if (wasInvisible) {\n          popoverElement.style.visibility = '';\n          popoverElement.classList.add('invisible');\n        }\n\n        // Determine optimal Y alignment\n        let newYAlign = yAlign;\n        const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n        const spaceAbove = triggerRect.top - gap;\n\n        if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {\n          // Not enough space below, try above\n          if (spaceAbove >= popoverRect.height) {\n            newYAlign = PopoverYAlign.ABOVE;\n          }\n        } else if (\n          yAlign === PopoverYAlign.ABOVE &&\n          spaceAbove < popoverRect.height\n        ) {\n          // Not enough space above, try below\n          if (spaceBelow >= popoverRect.height) {\n            newYAlign = PopoverYAlign.BELOW;\n          }\n        }\n\n        // Determine optimal X alignment\n        let newXAlign = xAlign;\n        const spaceRight = viewportWidth - triggerRect.left - padding;\n        const spaceLeft = triggerRect.right - padding;\n\n        if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {\n          // Not enough space on the right, try left\n          if (spaceLeft >= popoverRect.width) {\n            newXAlign = PopoverXAlign.END;\n          }\n        } else if (\n          xAlign === PopoverXAlign.END &&\n          spaceLeft < popoverRect.width\n        ) {\n          // Not enough space on the left, try right\n          if (spaceRight >= popoverRect.width) {\n            newXAlign = PopoverXAlign.START;\n          }\n        }\n\n        setComputedYAlign(newYAlign);\n        setComputedXAlign(newXAlign);\n      });\n    };\n\n    // Adjust position with a slight delay to ensure DOM is ready\n    const timeoutId = setTimeout(adjustPosition, 0);\n\n    // Listen to mouse enter on the trigger to recalculate\n    const triggerElement = document.getElementById(\n      `unrollable-panel-button-${props.identifier}`\n    );\n\n    if (triggerElement) {\n      triggerElement.addEventListener('mouseenter', adjustPosition);\n      triggerElement.addEventListener('focusin', adjustPosition);\n    }\n\n    // Use ResizeObserver to detect popover content size changes\n    const resizeObserver = new ResizeObserver(() => {\n      adjustPosition();\n    });\n\n    if (popoverRef.current) {\n      resizeObserver.observe(popoverRef.current);\n    }\n\n    window.addEventListener('resize', adjustPosition);\n    window.addEventListener('scroll', adjustPosition, true);\n\n    return () => {\n      clearTimeout(timeoutId);\n      if (triggerElement) {\n        triggerElement.removeEventListener('mouseenter', adjustPosition);\n        triggerElement.removeEventListener('focusin', adjustPosition);\n      }\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', adjustPosition);\n      window.removeEventListener('scroll', adjustPosition, true);\n    };\n  }, [props.identifier, xAlign, yAlign]);\n\n  // Use the static Detail component with computed alignment values\n  return (\n    <StaticDetail\n      {...props}\n      xAlign={computedXAlign}\n      yAlign={computedYAlign}\n      ref={popoverRef}\n      style={{\n        ...props.style,\n        maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n      }}\n    />\n  );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,MAAM,oBAAsC,UAAU;AACpD,QAAO,oBAAC,eAAD,EAAe,GAAI,OAAS;;;;;;;;;;;;;;;;;;AAmBrC,MAAM,UAA2B,EAC/B,SAAS,cAAc,OACvB,SAAS,cAAc,OACvB,GAAG,YACC;CACJ,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,OAAO;CAC5D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,OAAO;CAC5D,MAAM,CAAC,UAAU,eAAe,SAA6B,OAAU;AAEvE,iBAAgB;EACd,MAAM,uBAAuB;AAC3B,OAAI,CAAC,WAAW,QAAS;GAEzB,MAAM,iBAAiB,WAAW;GAClC,MAAM,iBAAiB,SAAS,eAC9B,2BAA2B,MAAM,aAClC;AAED,OAAI,CAAC,eAAgB;GAErB,MAAM,cAAc,eAAe,uBAAuB;GAC1D,MAAM,gBAAgB,OAAO;GAC7B,MAAM,iBAAiB,OAAO;GAC9B,MAAM,MAAM;GACZ,MAAM,UAAU;GAGhB,MAAM,mBAAmB,gBAAgB,YAAY,OAAO;GAC5D,MAAM,oBAAoB,YAAY,QAAQ;AAK9C,eAFyB,KAAK,IAAI,kBAAkB,kBAAkB,CAEzC;GAG7B,MAAM,eAAe,eAAe,UAAU,SAAS,YAAY;AACnE,OAAI,cAAc;AAChB,mBAAe,MAAM,aAAa;AAClC,mBAAe,UAAU,OAAO,YAAY;;AAI9C,+BAA4B;IAC1B,MAAM,cAAc,eAAe,uBAAuB;AAG1D,QAAI,cAAc;AAChB,oBAAe,MAAM,aAAa;AAClC,oBAAe,UAAU,IAAI,YAAY;;IAI3C,IAAI,YAAY;IAChB,MAAM,aAAa,iBAAiB,YAAY,SAAS;IACzD,MAAM,aAAa,YAAY,MAAM;AAErC,QAAI,WAAW,cAAc,SAAS,aAAa,YAAY,QAE7D;SAAI,cAAc,YAAY,OAC5B,aAAY,cAAc;eAG5B,WAAW,cAAc,SACzB,aAAa,YAAY,QAGzB;SAAI,cAAc,YAAY,OAC5B,aAAY,cAAc;;IAK9B,IAAI,YAAY;IAChB,MAAM,aAAa,gBAAgB,YAAY,OAAO;IACtD,MAAM,YAAY,YAAY,QAAQ;AAEtC,QAAI,WAAW,cAAc,SAAS,aAAa,YAAY,OAE7D;SAAI,aAAa,YAAY,MAC3B,aAAY,cAAc;eAG5B,WAAW,cAAc,OACzB,YAAY,YAAY,OAGxB;SAAI,cAAc,YAAY,MAC5B,aAAY,cAAc;;AAI9B,sBAAkB,UAAU;AAC5B,sBAAkB,UAAU;KAC5B;;EAIJ,MAAM,YAAY,WAAW,gBAAgB,EAAE;EAG/C,MAAM,iBAAiB,SAAS,eAC9B,2BAA2B,MAAM,aAClC;AAED,MAAI,gBAAgB;AAClB,kBAAe,iBAAiB,cAAc,eAAe;AAC7D,kBAAe,iBAAiB,WAAW,eAAe;;EAI5D,MAAM,iBAAiB,IAAI,qBAAqB;AAC9C,mBAAgB;IAChB;AAEF,MAAI,WAAW,QACb,gBAAe,QAAQ,WAAW,QAAQ;AAG5C,SAAO,iBAAiB,UAAU,eAAe;AACjD,SAAO,iBAAiB,UAAU,gBAAgB,KAAK;AAEvD,eAAa;AACX,gBAAa,UAAU;AACvB,OAAI,gBAAgB;AAClB,mBAAe,oBAAoB,cAAc,eAAe;AAChE,mBAAe,oBAAoB,WAAW,eAAe;;AAE/D,kBAAe,YAAY;AAC3B,UAAO,oBAAoB,UAAU,eAAe;AACpD,UAAO,oBAAoB,UAAU,gBAAgB,KAAK;;IAE3D;EAAC,MAAM;EAAY;EAAQ;EAAO,CAAC;AAGtC,QACE,oBAACA,UAAD;EACE,GAAI;EACJ,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;GACL,GAAG,MAAM;GACT,UAAU,WAAW,GAAG,SAAS,MAAM;GACxC;EACD;;AAKN,MAAa,UAAuB;AAEpC,QAAQ,SAAS"}

package/dist/esm/components/Popover/index.mjs

@@ -1 +1,4 @@
-import{Detail as e,PopoverStatic as t,PopoverXAlign as n,PopoverYAlign as r}from"./static.mjs";import{Popover as i}from"./dynamic.mjs";export{e as Detail,i as Popover,t as PopoverStatic,n as PopoverXAlign,r as PopoverYAlign};
+import { Detail, PopoverStatic, PopoverXAlign, PopoverYAlign } from "./static.mjs";
+import { Popover } from "./dynamic.mjs";
+
+export { Detail, Popover, PopoverStatic, PopoverXAlign, PopoverYAlign };

package/dist/esm/components/Popover/static.mjs

@@ -1,2 +1,193 @@
-import{cn as e}from"../../utils/cn.mjs";import{Container as t}from"../Container/index.mjs";import{jsx as n}from"react/jsx-runtime";let r=function(e){return e.START=`start`,e.CENTER=`center`,e.END=`end`,e}({}),i=function(e){return e.BELOW=`bellow`,e.ABOVE=`above`,e}({});const a=({children:t,className:r,identifier:i,...a})=>n(`div`,{className:e(`group/popover relative flex cursor-pointer`,r),id:`unrollable-panel-button-${i}`,"aria-haspopup":!0,...a,children:t}),o=({children:a,isHidden:o=void 0,isOverable:s=!0,isFocusable:c=!1,xAlign:l=r.START,yAlign:u=i.BELOW,identifier:d,className:f,displayArrow:p=!0,...m})=>n(t,{transparency:`xs`,role:`group`,"aria-hidden":o,"aria-labelledby":`unrollable-panel-button-${d}`,id:`unrollable-panel-${d}`,className:e(`absolute z-50 min-w-full rounded-md ring-1 ring-neutral`,l===`start`&&`left-0`,l===`center`&&`left-1/2 -translate-x-1/2`,l===`end`&&`right-0`,u===`bellow`&&`top-[calc(100%+1rem)]`,u===`above`&&`bottom-[calc(100%+1rem)]`,p&&`before:absolute before:z-[999] before:h-0 before:w-0 before:content-[""]`,p&&l===`start`&&`before:left-2`,p&&l===`center`&&`before:left-1/2 before:-translate-x-1/2`,p&&l===`end`&&`before:right-2`,p&&u===`bellow`&&`before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent`,p&&u===`above`&&`before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent`,`overflow-x-visible opacity-0 transition-all duration-400 ease-in-out`,o===!1?`visible opacity-100 delay-800`:`invisible`,s&&`group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`,c&&`group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`,f),...m,children:a});a.Detail=o;export{o as Detail,a as PopoverStatic,r as PopoverXAlign,i as PopoverYAlign};
+import { cn } from "../../utils/cn.mjs";
+import { Container } from "../Container/index.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Popover/static.tsx
+/**
+* Horizontal alignment options for popover positioning
+*/
+let PopoverXAlign = /* @__PURE__ */ function(PopoverXAlign) {
+	/** Align popover to start (left) of trigger */
+	PopoverXAlign["START"] = "start";
+	/** Align popover to center of trigger */
+	PopoverXAlign["CENTER"] = "center";
+	/** Align popover to end (right) of trigger */
+	PopoverXAlign["END"] = "end";
+	return PopoverXAlign;
+}({});
+/**
+* Vertical alignment options for popover positioning
+*/
+let PopoverYAlign = /* @__PURE__ */ function(PopoverYAlign) {
+	/** Position popover below the trigger */
+	PopoverYAlign["BELOW"] = "bellow";
+	/** Position popover above the trigger */
+	PopoverYAlign["ABOVE"] = "above";
+	return PopoverYAlign;
+}({});
+/**
+* Popover Component
+*
+* A versatile popover container that displays contextual content when triggered by hover
+* or focus interactions. Built with accessibility in mind and supports multiple positioning
+* options with smooth animations.
+*
+* Features:
+* - Hover and focus-based triggering
+* - Multiple positioning options (above/below, start/center/end)
+* - Accessibility compliant with ARIA attributes
+* - Smooth animations with configurable delays
+* - Optional directional arrows
+* - Automatic z-index management
+* - Responsive design support
+*
+* Architecture:
+* - Main Popover acts as trigger container
+* - Popover.Detail renders the actual popover content
+* - Uses CSS groups for coordinated hover/focus states
+* - Unique identifier system prevents conflicts
+*
+* @example
+* Basic hover popover:
+* ```jsx
+* <Popover identifier="help-tooltip">
+*   <button>Need Help?</button>
+*
+*   <Popover.Detail identifier="help-tooltip">
+*     <div>This is helpful information!</div>
+*   </Popover.Detail>
+* </Popover>
+* ```
+*
+* @example
+* Focus-triggered popover:
+* ```jsx
+* <Popover identifier="focus-menu">
+*   <input placeholder="Focus me" />
+*
+*   <Popover.Detail
+*     identifier="focus-menu"
+*     isFocusable
+*     isOverable={false}
+*   >
+*     <div>Focus-only menu content</div>
+*   </Popover.Detail>
+* </Popover>
+* ```
+*
+* @example
+* Positioned popover with custom alignment:
+* ```jsx
+* <Popover identifier="positioned">
+*   <span>Hover me</span>
+*
+*   <Popover.Detail
+*     identifier="positioned"
+*     xAlign={PopoverXAlign.END}
+*     yAlign={PopoverYAlign.ABOVE}
+*     displayArrow={false}
+*   >
+*     <div>Above and right-aligned</div>
+*   </Popover.Detail>
+* </Popover>
+* ```
+*
+* Accessibility Features:
+* - Proper ARIA labeling and relationships
+* - Keyboard navigation support
+* - Screen reader compatibility
+* - Focus management
+*
+* Performance Considerations:
+* - CSS-only animations for smooth transitions
+* - Efficient group-based state management
+* - Minimal DOM updates during interactions
+*
+* @param props - Popover component props
+* @returns Trigger container with popover functionality
+*/
+const PopoverStatic = ({ children, className, identifier, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn(`group/popover relative flex cursor-pointer`, className),
+	id: `unrollable-panel-button-${identifier}`,
+	"aria-haspopup": true,
+	...props,
+	children
+});
+/**
+* Popover Detail Component
+*
+* The actual popover content container with advanced positioning, animation, and
+* accessibility features. Automatically manages visibility based on trigger interactions.
+*
+* Features:
+* - Precise positioning with alignment options
+* - Smooth fade and slide animations
+* - Configurable directional arrows
+* - Hover and focus interaction support
+* - Accessibility-compliant ARIA attributes
+* - High z-index for overlay behavior
+* - Automatic visibility management
+*
+* Positioning System:
+* - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)
+* - Y-axis: BELOW (underneath) or ABOVE (on top)
+* - Automatic spacing with 1rem gap from trigger
+* - Responsive minimum width matching trigger
+*
+* Arrow Indicators:
+* - CSS-generated triangular arrows
+* - Positioned based on alignment settings
+* - Points toward trigger for visual connection
+* - Can be disabled for clean, minimal appearance
+*
+* Animation Behavior:
+* - Starts invisible with opacity: 0
+* - Smooth 400ms transitions with easing
+* - 800ms delay for hover states (prevents flicker)
+* - Immediate hiding when trigger loses focus/hover
+*
+* @example
+* Rich content popover:
+* ```jsx
+* <Popover.Detail identifier="rich-content">
+*   <div className="p-4">
+*     <h3>Popover Title</h3>
+*     <p>Detailed information with multiple paragraphs.</p>
+*     <button>Action Button</button>
+*   </div>
+* </Popover.Detail>
+* ```
+*
+* @example
+* Menu-style popover:
+* ```jsx
+* <Popover.Detail
+* identifier="context-menu"
+* displayArrow={false}
+* xAlign={PopoverXAlign.END}
+* >
+* <ul className="py-2">
+* <li><button className="w-full px-4 py-2">Edit</button></li>
+* <li><button className="w-full px-4 py-2">Delete</button></li>
+* </ul>
+* </Popover.Detail>
+* ```
+*
+* @param props - Popover Detail component props
+* @returns Positioned popover content with animations and accessibility
+*/
+const Detail = ({ children, isHidden = void 0, isOverable = true, isFocusable = false, xAlign = PopoverXAlign.START, yAlign = PopoverYAlign.BELOW, identifier, className, displayArrow = true, ...props }) => /* @__PURE__ */ jsx(Container, {
+	transparency: "xs",
+	role: "group",
+	"aria-hidden": isHidden,
+	"aria-labelledby": `unrollable-panel-button-${identifier}`,
+	id: `unrollable-panel-${identifier}`,
+	className: cn("absolute z-50 min-w-full rounded-md ring-1 ring-neutral", xAlign === "start" && "left-0", xAlign === "center" && "left-1/2 -translate-x-1/2", xAlign === "end" && "right-0", yAlign === "bellow" && "top-[calc(100%+1rem)]", yAlign === "above" && "bottom-[calc(100%+1rem)]", displayArrow && "before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]", displayArrow && xAlign === "start" && "before:left-2", displayArrow && xAlign === "center" && "before:left-1/2 before:-translate-x-1/2", displayArrow && xAlign === "end" && "before:right-2", displayArrow && yAlign === "bellow" && "before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent", displayArrow && yAlign === "above" && "before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent", "overflow-x-visible opacity-0 transition-all duration-400 ease-in-out", isHidden !== false ? "invisible" : "visible opacity-100 delay-800", isOverable && `group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`, isFocusable && `group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`, className),
+	...props,
+	children
+});
+PopoverStatic.Detail = Detail;
+
+//#endregion
+export { Detail, PopoverStatic, PopoverXAlign, PopoverYAlign };
 //# sourceMappingURL=static.mjs.map

package/dist/esm/components/Popover/static.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"static.mjs","names":[],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\n\n/**\n * Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n */\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  /** Unique identifier linking the trigger to its popover content for accessibility */\n  identifier: string;\n};\n\n/**\n * Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n */\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Horizontal alignment options for popover positioning\n */\nexport enum PopoverXAlign {\n  /** Align popover to start (left) of trigger */\n  START = 'start',\n  /** Align popover to center of trigger */\n  CENTER = 'center',\n  /** Align popover to end (right) of trigger */\n  END = 'end',\n}\n\n/**\n * Vertical alignment options for popover positioning\n */\nexport enum PopoverYAlign {\n  /** Position popover below the trigger */\n  BELOW = 'bellow',\n  /** Position popover above the trigger */\n  ABOVE = 'above',\n}\n\n/**\n * Popover Component\n *\n * A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n *\n * Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/center/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n *\n * Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n *\n * @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n *   <button>Need Help?</button>\n *\n *   <Popover.Detail identifier=\"help-tooltip\">\n *     <div>This is helpful information!</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n *   <input placeholder=\"Focus me\" />\n *\n *   <Popover.Detail\n *     identifier=\"focus-menu\"\n *     isFocusable\n *     isOverable={false}\n *   >\n *     <div>Focus-only menu content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n *   <span>Hover me</span>\n *\n *   <Popover.Detail\n *     identifier=\"positioned\"\n *     xAlign={PopoverXAlign.END}\n *     yAlign={PopoverYAlign.ABOVE}\n *     displayArrow={false}\n *   >\n *     <div>Above and right-aligned</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n *\n * Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nexport const PopoverStatic: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/popover relative flex cursor-pointer`, className)}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n */\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  /** Whether the popover responds to focus events on the trigger */\n  isFocusable?: boolean;\n  /** Controls visibility state - undefined allows automatic hover/focus control */\n  isHidden?: boolean;\n  /** Whether the popover responds to hover events on the trigger */\n  isOverable?: boolean;\n  /** Unique identifier matching the trigger's identifier for accessibility */\n  identifier: string;\n  /** Horizontal positioning relative to trigger */\n  xAlign?: PopoverXAlign | `${PopoverXAlign}`;\n  /** Vertical positioning relative to trigger */\n  yAlign?: PopoverYAlign | `${PopoverYAlign}`;\n  /** Whether to display the directional arrow indicator */\n  displayArrow?: boolean;\n};\n\n/**\n * Popover Detail Component\n *\n * The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n *\n * Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n *\n * Positioning System:\n * - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n *\n * Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n *\n * Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n *\n * @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n *   <div className=\"p-4\">\n *     <h3>Popover Title</h3>\n *     <p>Detailed information with multiple paragraphs.</p>\n *     <button>Action Button</button>\n *   </div>\n * </Popover.Detail>\n * ```\n *\n * @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n * identifier=\"context-menu\"\n * displayArrow={false}\n * xAlign={PopoverXAlign.END}\n * >\n * <ul className=\"py-2\">\n * <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n * <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n * </ul>\n * </Popover.Detail>\n * ```\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = true,\n  isFocusable = false,\n  xAlign = PopoverXAlign.START,\n  yAlign = PopoverYAlign.BELOW,\n  identifier,\n  className,\n  displayArrow = true,\n  ...props\n}) => (\n  <Container\n    transparency=\"xs\"\n    role=\"group\"\n    aria-hidden={isHidden}\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n    className={cn(\n      'absolute z-50 min-w-full rounded-md ring-1 ring-neutral',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\n      xAlign === 'center' && 'left-1/2 -translate-x-1/2',\n      xAlign === 'end' && 'right-0',\n      yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n      yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n      /* Arrow indicator */\n      displayArrow &&\n        'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n      /* Horizontal positioning */\n      displayArrow && xAlign === 'start' && 'before:left-2',\n      displayArrow &&\n        xAlign === 'center' &&\n        'before:left-1/2 before:-translate-x-1/2',\n      displayArrow && xAlign === 'end' && 'before:right-2',\n\n      /* Arrow pointing up (when popover is below trigger) */\n      displayArrow &&\n        yAlign === 'bellow' &&\n        'before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n      /* Visibility management */\n      'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n      isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n      isOverable &&\n        `group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`,\n      isFocusable &&\n        `group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`,\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </Container>\n);\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":"mIA2BA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,MAAA,QAEA,EAAA,OAAA,SAEA,EAAA,IAAA,YACD,CAKW,EAAL,SAAA,EAAA,OAEL,GAAA,MAAA,SAEA,EAAA,MAAA,cACD,CAmFD,MAAa,GAA8B,CACzC,WACA,YACA,aACA,GAAG,KAEH,EAAC,MAAD,CACE,UAAW,EAAG,6CAA8C,EAAU,CACtE,GAAI,2BAA2B,IAC/B,gBAAA,GACA,GAAI,EAEH,WACG,CAAA,CAuFF,GAA2B,CAC/B,WACA,WAAW,IAAA,GACX,aAAa,GACb,cAAc,GACd,SAAS,EAAc,MACvB,SAAS,EAAc,MACvB,aACA,YACA,eAAe,GACf,GAAG,KAEH,EAAC,EAAD,CACE,aAAa,KACb,KAAK,QACL,cAAa,EACb,kBAAiB,2BAA2B,IAC5C,GAAI,oBAAoB,IACxB,UAAW,EACT,0DAGA,IAAW,SAAW,SACtB,IAAW,UAAY,4BACvB,IAAW,OAAS,UACpB,IAAW,UAAY,wBACvB,IAAW,SAAW,2BAGtB,GACE,2EAGF,GAAgB,IAAW,SAAW,gBACtC,GACE,IAAW,UACX,0CACF,GAAgB,IAAW,OAAS,iBAGpC,GACE,IAAW,UACX,0KAGF,GACE,IAAW,SACX,6KAGF,uEACA,IAAa,GAAsB,gCAAd,YACrB,GACE,4FACF,GACE,iHACF,EACD,CACD,GAAI,EAEH,WACS,CAAA,CAGd,EAAc,OAAS"}
+{"version":3,"file":"static.mjs","names":[],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\n\n/**\n * Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n */\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  /** Unique identifier linking the trigger to its popover content for accessibility */\n  identifier: string;\n};\n\n/**\n * Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n */\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Horizontal alignment options for popover positioning\n */\nexport enum PopoverXAlign {\n  /** Align popover to start (left) of trigger */\n  START = 'start',\n  /** Align popover to center of trigger */\n  CENTER = 'center',\n  /** Align popover to end (right) of trigger */\n  END = 'end',\n}\n\n/**\n * Vertical alignment options for popover positioning\n */\nexport enum PopoverYAlign {\n  /** Position popover below the trigger */\n  BELOW = 'bellow',\n  /** Position popover above the trigger */\n  ABOVE = 'above',\n}\n\n/**\n * Popover Component\n *\n * A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n *\n * Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/center/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n *\n * Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n *\n * @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n *   <button>Need Help?</button>\n *\n *   <Popover.Detail identifier=\"help-tooltip\">\n *     <div>This is helpful information!</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n *   <input placeholder=\"Focus me\" />\n *\n *   <Popover.Detail\n *     identifier=\"focus-menu\"\n *     isFocusable\n *     isOverable={false}\n *   >\n *     <div>Focus-only menu content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n *   <span>Hover me</span>\n *\n *   <Popover.Detail\n *     identifier=\"positioned\"\n *     xAlign={PopoverXAlign.END}\n *     yAlign={PopoverYAlign.ABOVE}\n *     displayArrow={false}\n *   >\n *     <div>Above and right-aligned</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n *\n * Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nexport const PopoverStatic: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/popover relative flex cursor-pointer`, className)}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n */\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  /** Whether the popover responds to focus events on the trigger */\n  isFocusable?: boolean;\n  /** Controls visibility state - undefined allows automatic hover/focus control */\n  isHidden?: boolean;\n  /** Whether the popover responds to hover events on the trigger */\n  isOverable?: boolean;\n  /** Unique identifier matching the trigger's identifier for accessibility */\n  identifier: string;\n  /** Horizontal positioning relative to trigger */\n  xAlign?: PopoverXAlign | `${PopoverXAlign}`;\n  /** Vertical positioning relative to trigger */\n  yAlign?: PopoverYAlign | `${PopoverYAlign}`;\n  /** Whether to display the directional arrow indicator */\n  displayArrow?: boolean;\n};\n\n/**\n * Popover Detail Component\n *\n * The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n *\n * Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n *\n * Positioning System:\n * - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n *\n * Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n *\n * Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n *\n * @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n *   <div className=\"p-4\">\n *     <h3>Popover Title</h3>\n *     <p>Detailed information with multiple paragraphs.</p>\n *     <button>Action Button</button>\n *   </div>\n * </Popover.Detail>\n * ```\n *\n * @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n * identifier=\"context-menu\"\n * displayArrow={false}\n * xAlign={PopoverXAlign.END}\n * >\n * <ul className=\"py-2\">\n * <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n * <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n * </ul>\n * </Popover.Detail>\n * ```\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = true,\n  isFocusable = false,\n  xAlign = PopoverXAlign.START,\n  yAlign = PopoverYAlign.BELOW,\n  identifier,\n  className,\n  displayArrow = true,\n  ...props\n}) => (\n  <Container\n    transparency=\"xs\"\n    role=\"group\"\n    aria-hidden={isHidden}\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n    className={cn(\n      'absolute z-50 min-w-full rounded-md ring-1 ring-neutral',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\n      xAlign === 'center' && 'left-1/2 -translate-x-1/2',\n      xAlign === 'end' && 'right-0',\n      yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n      yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n      /* Arrow indicator */\n      displayArrow &&\n        'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n      /* Horizontal positioning */\n      displayArrow && xAlign === 'start' && 'before:left-2',\n      displayArrow &&\n        xAlign === 'center' &&\n        'before:left-1/2 before:-translate-x-1/2',\n      displayArrow && xAlign === 'end' && 'before:right-2',\n\n      /* Arrow pointing up (when popover is below trigger) */\n      displayArrow &&\n        yAlign === 'bellow' &&\n        'before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n      /* Visibility management */\n      'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n      isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n      isOverable &&\n        `group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`,\n      isFocusable &&\n        `group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`,\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </Container>\n);\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":";;;;;;;;AA2BA,IAAY,gBAAL;;AAEL;;AAEA;;AAEA;;KACD;;;;AAKD,IAAY,gBAAL;;AAEL;;AAEA;;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFD,MAAa,iBAA8B,EACzC,UACA,WACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GAAG,8CAA8C,UAAU;CACtE,IAAI,2BAA2B;CAC/B;CACA,GAAI;CAEH;CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFR,MAAM,UAA2B,EAC/B,UACA,WAAW,QACX,aAAa,MACb,cAAc,OACd,SAAS,cAAc,OACvB,SAAS,cAAc,OACvB,YACA,WACA,eAAe,MACf,GAAG,YAEH,oBAAC,WAAD;CACE,cAAa;CACb,MAAK;CACL,eAAa;CACb,mBAAiB,2BAA2B;CAC5C,IAAI,oBAAoB;CACxB,WAAW,GACT,2DAGA,WAAW,WAAW,UACtB,WAAW,YAAY,6BACvB,WAAW,SAAS,WACpB,WAAW,YAAY,yBACvB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,gBACE,WAAW,YACX,2CACF,gBAAgB,WAAW,SAAS,kBAGpC,gBACE,WAAW,YACX,2KAGF,gBACE,WAAW,WACX,8KAGF,wEACA,aAAa,QAAQ,cAAc,iCACnC,cACE,6FACF,eACE,kHACF,UACD;CACD,GAAI;CAEH;CACS;AAGd,cAAc,SAAS"}

package/dist/esm/components/PressableSpan/PressableSpan.mjs

@@ -1,2 +1,159 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{useCallback as t,useEffect as n,useRef as r,useState as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=({children:o,onPress:s,onClickOutside:c,pressDuration:l=400,isSelecting:u,...d})=>{let f=r(null),[p,m]=i(u),h=r(null),g=()=>{m(!0),s()},_=()=>{h.current=setTimeout(()=>{g()},l)},v=()=>{h.current&&=(clearTimeout(h.current),null)},y=()=>{v(),_()},b=()=>{v()},x=t(e=>{f.current&&!f.current.contains(e.target)&&(m(!1),c?.())},[c]);n(()=>(document.addEventListener(`mousedown`,x),()=>{document.removeEventListener(`mousedown`,x)}),[x]);let S=e=>{p&&(e.preventDefault(),e.stopPropagation())},C=()=>{m(!1)},w=e=>{switch(e.key){case`Enter`:case` `:e.preventDefault(),g();break;case`Escape`:e.preventDefault(),m(!1),c?.();break;default:break}},T=u??p;return a(`span`,{className:e(`inline cursor-pointer select-none rounded-md outline outline-2 outline-transparent outline-offset-4 transition-all delay-100 duration-200`,T?`outline-inherit`:`hover:outline-inherit`),role:`button`,tabIndex:0,"aria-pressed":T?`true`:`false`,"aria-label":`${T?`Selected`:`Selectable`} content`,onKeyDown:w,onClick:S,onMouseDown:y,onMouseUp:b,onMouseLeave:b,onTouchStart:y,onTouchEnd:b,onTouchCancel:b,onBlur:C,ref:f,...d,children:o})};export{o as PressableSpan};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/PressableSpan/PressableSpan.tsx
+const DEFAULT_PRESS_DETECT_DURATION = 400;
+/**
+* PressableSpan - An interactive span element that responds to long press gestures
+*
+* A versatile component that detects long press interactions and provides visual feedback.
+* Commonly used for text editing interfaces, selection systems, and interactive content
+* that requires differentiation between quick clicks and intentional long presses.
+*
+* ## Key Features
+* - **Long Press Detection**: Configurable press duration for different interaction patterns
+* - **Visual Feedback**: Smooth outline transitions to indicate interactive and selected states
+* - **Click Outside Detection**: Automatically deselects when clicking outside the component
+* - **Touch Support**: Works seamlessly on both desktop and mobile devices
+* - **Accessible**: Keyboard navigation support and proper ARIA attributes
+*
+* ## Use Cases
+* - Text editing interfaces where long press activates edit mode
+* - Content selection systems with visual feedback
+* - Interactive cards or elements that need press-and-hold activation
+* - Mobile-friendly interfaces requiring long press gestures
+*
+* ## Accessibility
+* - Uses semantic `role="button"` for proper screen reader announcement
+* - Keyboard navigable with `tabIndex={0}`
+* - Focus management with proper blur handling
+* - Visual outline indicators for focus and selection states
+*
+* @example
+* Basic usage with long press detection:
+* ```tsx
+* <PressableSpan onPress={() => setIsEditing(true)}>
+*   Press and hold to edit this text
+* </PressableSpan>
+* ```
+*
+* @example
+* With custom press duration and click outside handling:
+* ```tsx
+* <PressableSpan
+*   pressDuration={600}
+*   onPress={() => setIsEditing(true)}
+*   onClickOutside={() => setIsEditing(false)}
+*   isSelecting={isEditing}
+* >
+*   Custom behavior configuration
+* </PressableSpan>
+* ```
+*
+* @example
+* In a content editing context:
+* ```tsx
+* <PressableSpan
+*   onPress={() => startEditingContent(contentId)}
+*   onClickOutside={() => saveAndExitEditing()}
+*   className="prose-text"
+* >
+*   {editableContent}
+* </PressableSpan>
+* ```
+*/
+const PressableSpan = ({ children, onPress: onSelect, onClickOutside: onUnselect, pressDuration = DEFAULT_PRESS_DETECT_DURATION, isSelecting: isSelectingProp, ...props }) => {
+	const elementRef = useRef(null);
+	const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);
+	const pressTimerRef = useRef(null);
+	const handleOnLongPress = () => {
+		setIsSelectingState(true);
+		onSelect();
+	};
+	const startPressTimer = () => {
+		pressTimerRef.current = setTimeout(() => {
+			handleOnLongPress();
+		}, pressDuration);
+	};
+	const clearPressTimer = () => {
+		if (pressTimerRef.current) {
+			clearTimeout(pressTimerRef.current);
+			pressTimerRef.current = null;
+		}
+	};
+	const handleMouseDown = () => {
+		clearPressTimer();
+		startPressTimer();
+	};
+	const handleMouseUp = () => {
+		clearPressTimer();
+	};
+	const handleClickOutside = useCallback((event) => {
+		if (elementRef.current && !elementRef.current.contains(event.target)) {
+			setIsSelectingState(false);
+			onUnselect?.();
+		}
+	}, [onUnselect]);
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [handleClickOutside]);
+	const handleOnClick = (e) => {
+		if (isSelectingState) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	};
+	const handleOnBlur = () => {
+		setIsSelectingState(false);
+	};
+	/**
+	* Handle keyboard interactions
+	* - Enter/Space: Trigger long press action immediately
+	* - Escape: Cancel selection/editing state
+	*/
+	const handleKeyDown = (e) => {
+		switch (e.key) {
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				handleOnLongPress();
+				break;
+			case "Escape":
+				e.preventDefault();
+				setIsSelectingState(false);
+				onUnselect?.();
+				break;
+			default: break;
+		}
+	};
+	const isCurrentlySelecting = isSelectingProp ?? isSelectingState;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline cursor-pointer select-none rounded-md outline outline-2 outline-transparent outline-offset-4 transition-all delay-100 duration-200", isCurrentlySelecting ? "outline-inherit" : "hover:outline-inherit"),
+		role: "button",
+		tabIndex: 0,
+		"aria-pressed": isCurrentlySelecting ? "true" : "false",
+		"aria-label": `${isCurrentlySelecting ? "Selected" : "Selectable"} content`,
+		onKeyDown: handleKeyDown,
+		onClick: handleOnClick,
+		onMouseDown: handleMouseDown,
+		onMouseUp: handleMouseUp,
+		onMouseLeave: handleMouseUp,
+		onTouchStart: handleMouseDown,
+		onTouchEnd: handleMouseUp,
+		onTouchCancel: handleMouseUp,
+		onBlur: handleOnBlur,
+		ref: elementRef,
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { PressableSpan };
 //# sourceMappingURL=PressableSpan.mjs.map