@intlayer/design-system 8.1.2 → 8.1.3

package/dist/esm/components/Pattern/SpotLight.mjs

@@ -1,169 +1,2 @@
-import { cn } from "../../utils/cn.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/Pattern/SpotLight.tsx
-/**
-* Spotlight Component
-*
-* A dramatic animated SVG spotlight effect that creates a soft, glowing light beam
-* perfect for hero sections, landing pages, and attention-grabbing areas. Features
-* a sophisticated blur filter and smooth animation entrance.
-*
-* Features:
-* - Animated entrance with opacity fade-in effect
-* - Gaussian blur filter for realistic light diffusion
-* - Customizable positioning, size, and color
-* - Full-screen coverage with responsive scaling
-* - Performance optimized with CSS animations
-* - Pointer events disabled to preserve interactivity
-* - Theme-aware with currentColor support
-*
-* Technical Implementation:
-* - Uses SVG ellipse with advanced filter effects
-* - Gaussian blur with 151px standard deviation for soft edges
-* - Matrix transformation for realistic light angle (-0.822377, -0.568943)
-* - ViewBox coordinates optimized for screen coverage (3787x2842)
-* - Animation class `animate-spotlight` handles entrance effect
-* - Filter definition with unique ID prevents conflicts
-*
-* Visual Characteristics:
-* - Default: Large elliptical light beam (1924.71px radius)
-* - Positioned at (1924.71, 273.501) with soft vertical spread
-* - 21% opacity for subtle but noticeable effect
-* - Rotated and scaled for natural spotlight angle
-* - Soft gaussian blur creates realistic light falloff
-*
-* Animation Behavior:
-* - Starts with opacity: 0 (invisible)
-* - Animates to full visibility with smooth transition
-* - Animation timing and easing handled by CSS class
-* - Can be triggered on scroll or interaction events
-*
-* @example
-* Basic hero section spotlight:
-* ```tsx
-* <div className="relative min-h-screen bg-dark">
-*   <Spotlight className="top-0 left-0" />
-*   <div className="relative z-10 flex items-center justify-center h-screen">
-*     <h1 className="text-6xl font-bold text-white">
-*       Welcome to the Future
-*     </h1>
-*   </div>
-* </div>
-* ```
-*
-* @example
-* Custom colored spotlight:
-* ```tsx
-* <Spotlight
-*   fill="#3b82f6"
-*   opacity={0.3}
-*   className="top-10 -left-20"
-* />
-* ```
-*
-* @example
-* Multiple spotlights for complex lighting:
-* ```tsx
-* <div className="relative">
-*   <Spotlight
-*     cx={1000}
-*     cy={300}
-*     fill="rgb(59, 130, 246)"
-*     opacity={0.15}
-*   />
-*   <Spotlight
-*     cx={2500}
-*     cy={800}
-*     fill="rgb(236, 72, 153)"
-*     opacity={0.15}
-*     className="scale-75"
-*   />
-* </div>
-* ```
-*
-* @example
-* Responsive positioning:
-* ```tsx
-* <Spotlight
-*   className="top-0 left-1/2 transform -translate-x-1/2 lg:left-0 lg:transform-none"
-*   opacity={0.25}
-* />
-* ```
-*
-* Styling Guidelines:
-* - Use low opacity (0.1-0.3) for subtle background effects
-* - Higher opacity (0.3-0.5) for dramatic focal points
-* - Consider theme colors when using custom fill values
-* - Position absolute with z-index management for layering
-*
-* Performance Considerations:
-* - SVG filter effects are GPU accelerated when possible
-* - Animation handled by CSS transforms for optimal performance
-* - Large viewBox size cached by browser for efficiency
-* - Pointer events disabled prevents layout recalculation
-*
-* Accessibility:
-* - Purely decorative - doesn't interfere with screen readers
-* - High contrast maintained with overlaid content
-* - Animation respects user's reduced motion preferences
-* - No semantic meaning - safe to hide from assistive tech
-*
-* CSS Requirements:
-* - Requires `animate-spotlight` animation class in Tailwind config
-* - Should define entrance animation timing and easing
-* - Consider defining custom animations for different effects
-*
-* @param props - Spotlight component props
-* @returns Animated SVG spotlight effect with blur filters
-*/
-const Spotlight = ({ fill = "currentColor", cy = 273.501, rx = 1924.71, ry = 273.501, cx = 1924.71, opacity = .21, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
-	className: cn("pointer-events-none absolute size-screen animate-spotlight opacity-0", className),
-	xmlns: "http://www.w3.org/2000/svg",
-	viewBox: "0 0 3787 2842",
-	fill: "none",
-	role: "img",
-	"aria-label": "Spotlight",
-	...props,
-	children: [/* @__PURE__ */ jsx("g", {
-		filter: "url(#filter)",
-		transform: "scale (-1, 1)",
-		children: /* @__PURE__ */ jsx("ellipse", {
-			cx,
-			cy,
-			rx,
-			ry,
-			fill,
-			fillOpacity: opacity,
-			transform: "matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
-		})
-	}), /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
-		id: "filter",
-		x: "0.860352",
-		y: "0.838989",
-		width: "3785.16",
-		height: "2840.26",
-		filterUnits: "userSpaceOnUse",
-		colorInterpolationFilters: "sRGB",
-		children: [
-			/* @__PURE__ */ jsx("feFlood", {
-				floodOpacity: "0",
-				result: "BackgroundImageFix"
-			}),
-			/* @__PURE__ */ jsx("feBlend", {
-				mode: "normal",
-				in: "SourceGraphic",
-				in2: "BackgroundImageFix",
-				result: "shape"
-			}),
-			/* @__PURE__ */ jsx("feGaussianBlur", {
-				stdDeviation: "151",
-				result: "effect1_foregroundBlur_1065_8"
-			})
-		]
-	}) })]
-});
-
-//#endregion
-export { Spotlight };
+import{cn as e}from"../../utils/cn.mjs";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=({fill:r=`currentColor`,cy:i=273.501,rx:a=1924.71,ry:o=273.501,cx:s=1924.71,opacity:c=.21,className:l,...u})=>n(`svg`,{className:e(`pointer-events-none absolute size-screen animate-spotlight opacity-0`,l),xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 3787 2842`,fill:`none`,role:`img`,"aria-label":`Spotlight`,...u,children:[t(`g`,{filter:`url(#filter)`,transform:`scale (-1, 1)`,children:t(`ellipse`,{cx:s,cy:i,rx:a,ry:o,fill:r,fillOpacity:c,transform:`matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)`})}),t(`defs`,{children:n(`filter`,{id:`filter`,x:`0.860352`,y:`0.838989`,width:`3785.16`,height:`2840.26`,filterUnits:`userSpaceOnUse`,colorInterpolationFilters:`sRGB`,children:[t(`feFlood`,{floodOpacity:`0`,result:`BackgroundImageFix`}),t(`feBlend`,{mode:`normal`,in:`SourceGraphic`,in2:`BackgroundImageFix`,result:`shape`}),t(`feGaussianBlur`,{stdDeviation:`151`,result:`effect1_foregroundBlur_1065_8`})]})})]});export{r as Spotlight};
 //# sourceMappingURL=SpotLight.mjs.map

package/dist/esm/components/Pattern/SpotLight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpotLight.mjs","names":[],"sources":["../../../../src/components/Pattern/SpotLight.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/**\n * Props for the Spotlight component\n * Extends SVGProps to inherit all standard SVG attributes\n */\ntype SpotlightProps = {\n  /** Fill color for the spotlight effect (supports CSS color values) */\n  fill?: string;\n  /** X coordinate of the ellipse center */\n  cx?: number;\n  /** Y coordinate of the ellipse center */\n  cy?: number;\n  /** Horizontal radius of the ellipse */\n  rx?: number;\n  /** Vertical radius of the ellipse */\n  ry?: number;\n  /** Opacity of the spotlight effect (0-1) */\n  opacity?: number;\n} & SVGProps<SVGSVGElement>;\n\n/**\n * Spotlight Component\n *\n * A dramatic animated SVG spotlight effect that creates a soft, glowing light beam\n * perfect for hero sections, landing pages, and attention-grabbing areas. Features\n * a sophisticated blur filter and smooth animation entrance.\n *\n * Features:\n * - Animated entrance with opacity fade-in effect\n * - Gaussian blur filter for realistic light diffusion\n * - Customizable positioning, size, and color\n * - Full-screen coverage with responsive scaling\n * - Performance optimized with CSS animations\n * - Pointer events disabled to preserve interactivity\n * - Theme-aware with currentColor support\n *\n * Technical Implementation:\n * - Uses SVG ellipse with advanced filter effects\n * - Gaussian blur with 151px standard deviation for soft edges\n * - Matrix transformation for realistic light angle (-0.822377, -0.568943)\n * - ViewBox coordinates optimized for screen coverage (3787x2842)\n * - Animation class `animate-spotlight` handles entrance effect\n * - Filter definition with unique ID prevents conflicts\n *\n * Visual Characteristics:\n * - Default: Large elliptical light beam (1924.71px radius)\n * - Positioned at (1924.71, 273.501) with soft vertical spread\n * - 21% opacity for subtle but noticeable effect\n * - Rotated and scaled for natural spotlight angle\n * - Soft gaussian blur creates realistic light falloff\n *\n * Animation Behavior:\n * - Starts with opacity: 0 (invisible)\n * - Animates to full visibility with smooth transition\n * - Animation timing and easing handled by CSS class\n * - Can be triggered on scroll or interaction events\n *\n * @example\n * Basic hero section spotlight:\n * ```tsx\n * <div className=\"relative min-h-screen bg-dark\">\n *   <Spotlight className=\"top-0 left-0\" />\n *   <div className=\"relative z-10 flex items-center justify-center h-screen\">\n *     <h1 className=\"text-6xl font-bold text-white\">\n *       Welcome to the Future\n *     </h1>\n *   </div>\n * </div>\n * ```\n *\n * @example\n * Custom colored spotlight:\n * ```tsx\n * <Spotlight\n *   fill=\"#3b82f6\"\n *   opacity={0.3}\n *   className=\"top-10 -left-20\"\n * />\n * ```\n *\n * @example\n * Multiple spotlights for complex lighting:\n * ```tsx\n * <div className=\"relative\">\n *   <Spotlight\n *     cx={1000}\n *     cy={300}\n *     fill=\"rgb(59, 130, 246)\"\n *     opacity={0.15}\n *   />\n *   <Spotlight\n *     cx={2500}\n *     cy={800}\n *     fill=\"rgb(236, 72, 153)\"\n *     opacity={0.15}\n *     className=\"scale-75\"\n *   />\n * </div>\n * ```\n *\n * @example\n * Responsive positioning:\n * ```tsx\n * <Spotlight\n *   className=\"top-0 left-1/2 transform -translate-x-1/2 lg:left-0 lg:transform-none\"\n *   opacity={0.25}\n * />\n * ```\n *\n * Styling Guidelines:\n * - Use low opacity (0.1-0.3) for subtle background effects\n * - Higher opacity (0.3-0.5) for dramatic focal points\n * - Consider theme colors when using custom fill values\n * - Position absolute with z-index management for layering\n *\n * Performance Considerations:\n * - SVG filter effects are GPU accelerated when possible\n * - Animation handled by CSS transforms for optimal performance\n * - Large viewBox size cached by browser for efficiency\n * - Pointer events disabled prevents layout recalculation\n *\n * Accessibility:\n * - Purely decorative - doesn't interfere with screen readers\n * - High contrast maintained with overlaid content\n * - Animation respects user's reduced motion preferences\n * - No semantic meaning - safe to hide from assistive tech\n *\n * CSS Requirements:\n * - Requires `animate-spotlight` animation class in Tailwind config\n * - Should define entrance animation timing and easing\n * - Consider defining custom animations for different effects\n *\n * @param props - Spotlight component props\n * @returns Animated SVG spotlight effect with blur filters\n */\nexport const Spotlight: FC<SpotlightProps> = ({\n  fill = 'currentColor',\n  cy = 273.501,\n  rx = 1924.71,\n  ry = 273.501,\n  cx = 1924.71,\n  opacity = 0.21,\n  className,\n  ...props\n}) => (\n  <svg\n    className={cn(\n      'pointer-events-none absolute size-screen animate-spotlight opacity-0',\n      className\n    )}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 3787 2842\"\n    fill=\"none\"\n    role=\"img\"\n    aria-label=\"Spotlight\"\n    {...props}\n  >\n    <g filter=\"url(#filter)\" transform=\"scale (-1, 1)\">\n      <ellipse\n        cx={cx}\n        cy={cy}\n        rx={rx}\n        ry={ry}\n        fill={fill}\n        fillOpacity={opacity}\n        transform=\"matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)\"\n      ></ellipse>\n    </g>\n    <defs>\n      <filter\n        id=\"filter\"\n        x=\"0.860352\"\n        y=\"0.838989\"\n        width=\"3785.16\"\n        height=\"2840.26\"\n        filterUnits=\"userSpaceOnUse\"\n        colorInterpolationFilters=\"sRGB\"\n      >\n        <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\n        <feBlend\n          mode=\"normal\"\n          in=\"SourceGraphic\"\n          in2=\"BackgroundImageFix\"\n          result=\"shape\"\n        ></feBlend>\n        <feGaussianBlur\n          stdDeviation=\"151\"\n          result=\"effect1_foregroundBlur_1065_8\"\n        ></feGaussianBlur>\n      </filter>\n    </defs>\n  </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyIA,MAAa,aAAiC,EAC5C,OAAO,gBACP,KAAK,SACL,KAAK,SACL,KAAK,SACL,KAAK,SACL,UAAU,KACV,WACA,GAAG,YAEH,qBAAC;CACC,WAAW,GACT,wEACA,UACD;CACD,OAAM;CACN,SAAQ;CACR,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;YAEJ,oBAAC;EAAE,QAAO;EAAe,WAAU;YACjC,oBAAC;GACK;GACA;GACA;GACA;GACE;GACN,aAAa;GACb,WAAU;IACD;GACT,EACJ,oBAAC,oBACC,qBAAC;EACC,IAAG;EACH,GAAE;EACF,GAAE;EACF,OAAM;EACN,QAAO;EACP,aAAY;EACZ,2BAA0B;;GAE1B,oBAAC;IAAQ,cAAa;IAAI,QAAO;KAA+B;GAChE,oBAAC;IACC,MAAK;IACL,IAAG;IACH,KAAI;IACJ,QAAO;KACE;GACX,oBAAC;IACC,cAAa;IACb,QAAO;KACS;;GACX,GACJ;EACH"}
+{"version":3,"file":"SpotLight.mjs","names":[],"sources":["../../../../src/components/Pattern/SpotLight.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/**\n * Props for the Spotlight component\n * Extends SVGProps to inherit all standard SVG attributes\n */\ntype SpotlightProps = {\n  /** Fill color for the spotlight effect (supports CSS color values) */\n  fill?: string;\n  /** X coordinate of the ellipse center */\n  cx?: number;\n  /** Y coordinate of the ellipse center */\n  cy?: number;\n  /** Horizontal radius of the ellipse */\n  rx?: number;\n  /** Vertical radius of the ellipse */\n  ry?: number;\n  /** Opacity of the spotlight effect (0-1) */\n  opacity?: number;\n} & SVGProps<SVGSVGElement>;\n\n/**\n * Spotlight Component\n *\n * A dramatic animated SVG spotlight effect that creates a soft, glowing light beam\n * perfect for hero sections, landing pages, and attention-grabbing areas. Features\n * a sophisticated blur filter and smooth animation entrance.\n *\n * Features:\n * - Animated entrance with opacity fade-in effect\n * - Gaussian blur filter for realistic light diffusion\n * - Customizable positioning, size, and color\n * - Full-screen coverage with responsive scaling\n * - Performance optimized with CSS animations\n * - Pointer events disabled to preserve interactivity\n * - Theme-aware with currentColor support\n *\n * Technical Implementation:\n * - Uses SVG ellipse with advanced filter effects\n * - Gaussian blur with 151px standard deviation for soft edges\n * - Matrix transformation for realistic light angle (-0.822377, -0.568943)\n * - ViewBox coordinates optimized for screen coverage (3787x2842)\n * - Animation class `animate-spotlight` handles entrance effect\n * - Filter definition with unique ID prevents conflicts\n *\n * Visual Characteristics:\n * - Default: Large elliptical light beam (1924.71px radius)\n * - Positioned at (1924.71, 273.501) with soft vertical spread\n * - 21% opacity for subtle but noticeable effect\n * - Rotated and scaled for natural spotlight angle\n * - Soft gaussian blur creates realistic light falloff\n *\n * Animation Behavior:\n * - Starts with opacity: 0 (invisible)\n * - Animates to full visibility with smooth transition\n * - Animation timing and easing handled by CSS class\n * - Can be triggered on scroll or interaction events\n *\n * @example\n * Basic hero section spotlight:\n * ```tsx\n * <div className=\"relative min-h-screen bg-dark\">\n *   <Spotlight className=\"top-0 left-0\" />\n *   <div className=\"relative z-10 flex items-center justify-center h-screen\">\n *     <h1 className=\"text-6xl font-bold text-white\">\n *       Welcome to the Future\n *     </h1>\n *   </div>\n * </div>\n * ```\n *\n * @example\n * Custom colored spotlight:\n * ```tsx\n * <Spotlight\n *   fill=\"#3b82f6\"\n *   opacity={0.3}\n *   className=\"top-10 -left-20\"\n * />\n * ```\n *\n * @example\n * Multiple spotlights for complex lighting:\n * ```tsx\n * <div className=\"relative\">\n *   <Spotlight\n *     cx={1000}\n *     cy={300}\n *     fill=\"rgb(59, 130, 246)\"\n *     opacity={0.15}\n *   />\n *   <Spotlight\n *     cx={2500}\n *     cy={800}\n *     fill=\"rgb(236, 72, 153)\"\n *     opacity={0.15}\n *     className=\"scale-75\"\n *   />\n * </div>\n * ```\n *\n * @example\n * Responsive positioning:\n * ```tsx\n * <Spotlight\n *   className=\"top-0 left-1/2 transform -translate-x-1/2 lg:left-0 lg:transform-none\"\n *   opacity={0.25}\n * />\n * ```\n *\n * Styling Guidelines:\n * - Use low opacity (0.1-0.3) for subtle background effects\n * - Higher opacity (0.3-0.5) for dramatic focal points\n * - Consider theme colors when using custom fill values\n * - Position absolute with z-index management for layering\n *\n * Performance Considerations:\n * - SVG filter effects are GPU accelerated when possible\n * - Animation handled by CSS transforms for optimal performance\n * - Large viewBox size cached by browser for efficiency\n * - Pointer events disabled prevents layout recalculation\n *\n * Accessibility:\n * - Purely decorative - doesn't interfere with screen readers\n * - High contrast maintained with overlaid content\n * - Animation respects user's reduced motion preferences\n * - No semantic meaning - safe to hide from assistive tech\n *\n * CSS Requirements:\n * - Requires `animate-spotlight` animation class in Tailwind config\n * - Should define entrance animation timing and easing\n * - Consider defining custom animations for different effects\n *\n * @param props - Spotlight component props\n * @returns Animated SVG spotlight effect with blur filters\n */\nexport const Spotlight: FC<SpotlightProps> = ({\n  fill = 'currentColor',\n  cy = 273.501,\n  rx = 1924.71,\n  ry = 273.501,\n  cx = 1924.71,\n  opacity = 0.21,\n  className,\n  ...props\n}) => (\n  <svg\n    className={cn(\n      'pointer-events-none absolute size-screen animate-spotlight opacity-0',\n      className\n    )}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 3787 2842\"\n    fill=\"none\"\n    role=\"img\"\n    aria-label=\"Spotlight\"\n    {...props}\n  >\n    <g filter=\"url(#filter)\" transform=\"scale (-1, 1)\">\n      <ellipse\n        cx={cx}\n        cy={cy}\n        rx={rx}\n        ry={ry}\n        fill={fill}\n        fillOpacity={opacity}\n        transform=\"matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)\"\n      ></ellipse>\n    </g>\n    <defs>\n      <filter\n        id=\"filter\"\n        x=\"0.860352\"\n        y=\"0.838989\"\n        width=\"3785.16\"\n        height=\"2840.26\"\n        filterUnits=\"userSpaceOnUse\"\n        colorInterpolationFilters=\"sRGB\"\n      >\n        <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\n        <feBlend\n          mode=\"normal\"\n          in=\"SourceGraphic\"\n          in2=\"BackgroundImageFix\"\n          result=\"shape\"\n        ></feBlend>\n        <feGaussianBlur\n          stdDeviation=\"151\"\n          result=\"effect1_foregroundBlur_1065_8\"\n        ></feGaussianBlur>\n      </filter>\n    </defs>\n  </svg>\n);\n"],"mappings":"0FAyIA,MAAa,GAAiC,CAC5C,OAAO,eACP,KAAK,QACL,KAAK,QACL,KAAK,QACL,KAAK,QACL,UAAU,IACV,YACA,GAAG,KAEH,EAAC,MAAA,CACC,UAAW,EACT,uEACA,EACD,CACD,MAAM,6BACN,QAAQ,gBACR,KAAK,OACL,KAAK,MACL,aAAW,YACX,GAAI,YAEJ,EAAC,IAAA,CAAE,OAAO,eAAe,UAAU,yBACjC,EAAC,UAAA,CACK,KACA,KACA,KACA,KACE,OACN,YAAa,EACb,UAAU,kEACD,EACT,CACJ,EAAC,OAAA,CAAA,SACC,EAAC,SAAA,CACC,GAAG,SACH,EAAE,WACF,EAAE,WACF,MAAM,UACN,OAAO,UACP,YAAY,iBACZ,0BAA0B,iBAE1B,EAAC,UAAA,CAAQ,aAAa,IAAI,OAAO,sBAA+B,CAChE,EAAC,UAAA,CACC,KAAK,SACL,GAAG,gBACH,IAAI,qBACJ,OAAO,SACE,CACX,EAAC,iBAAA,CACC,aAAa,MACb,OAAO,iCACS,GACX,CAAA,CACJ,CAAA,EACH"}

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

@@ -1,5 +1 @@
-import { DotPattern } from "./DotPattern.mjs";
-import { GridPattern } from "./GridPattern.mjs";
-import { Spotlight } from "./SpotLight.mjs";
-
-export { DotPattern, GridPattern, Spotlight };
+import{DotPattern as e}from"./DotPattern.mjs";import{GridPattern as t}from"./GridPattern.mjs";import{Spotlight as n}from"./SpotLight.mjs";export{e as DotPattern,t as GridPattern,n as Spotlight};

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

@@ -1,129 +1,2 @@
-'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 };
+"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};
 //# 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":";;;;;;;;;;;;;;;;AAuBA,MAAM,oBAAsC,UAAU;AACpD,QAAO,oBAAC,iBAAc,GAAI,QAAS;;;;;;;;;;;;;;;;;;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;EACC,GAAI;EACJ,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;GACL,GAAG,MAAM;GACT,UAAU,WAAW,GAAG,SAAS,MAAM;GACxC;GACD;;AAKN,MAAa,UAAuB;AAEpC,QAAQ,SAAS"}
+{"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,EAAA,CAAc,GAAI,EAAA,CAAS,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,EAAAA,CACC,GAAI,EACJ,OAAQ,EACR,OAAQ,EACR,IAAK,EACL,MAAO,CACL,GAAG,EAAM,MACT,SAAU,EAAW,GAAG,EAAS,IAAM,IAAA,GACxC,EACD,EAKO,EAAuB,EAEpC,EAAQ,OAAS"}

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

@@ -1,4 +1 @@
-import { Detail, PopoverStatic, PopoverXAlign, PopoverYAlign } from "./static.mjs";
-import { Popover } from "./dynamic.mjs";
-
-export { Detail, Popover, PopoverStatic, PopoverXAlign, PopoverYAlign };
+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};

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

@@ -1,193 +1,2 @@
-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 };
+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};
 //# sourceMappingURL=static.mjs.map