@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/components/Pattern/SpotLight.d.ts

@@ -1,137 +0,0 @@
-import { FC, SVGProps } from 'react';
-/**
- * Props for the Spotlight component
- * Extends SVGProps to inherit all standard SVG attributes
- */
-type SpotlightProps = {
-    /** Fill color for the spotlight effect (supports CSS color values) */
-    fill?: string;
-    /** X coordinate of the ellipse center */
-    cx?: number;
-    /** Y coordinate of the ellipse center */
-    cy?: number;
-    /** Horizontal radius of the ellipse */
-    rx?: number;
-    /** Vertical radius of the ellipse */
-    ry?: number;
-    /** Opacity of the spotlight effect (0-1) */
-    opacity?: number;
-} & SVGProps<SVGSVGElement>;
-/**
- * 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
- */
-export declare const Spotlight: FC<SpotlightProps>;
-export {};
-//# sourceMappingURL=SpotLight.d.ts.map

package/dist/components/Pattern/SpotLight.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SpotLight.d.ts","sourceRoot":"","sources":["../../../src/components/Pattern/SpotLight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG1C;;;GAGG;AACH,KAAK,cAAc,GAAG;IACpB,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkHG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAuDxC,CAAC"}

package/dist/components/Pattern/SpotLight.mjs

@@ -1,73 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.mjs";
-const Spotlight = ({
-  fill = "currentColor",
-  cy = 273.501,
-  rx = 1924.71,
-  ry = 273.501,
-  cx = 1924.71,
-  opacity = 0.21,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    className: cn(
-      "animate-spotlight size-screen pointer-events-none absolute opacity-0",
-      className
-    ),
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 3787 2842",
-    fill: "none",
-    ...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"
-              }
-            )
-          ]
-        }
-      ) })
-    ]
-  }
-);
-export {
-  Spotlight
-};
-//# sourceMappingURL=SpotLight.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SpotLight.mjs","sources":["../../../src/components/Pattern/SpotLight.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\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      'animate-spotlight size-screen pointer-events-none absolute opacity-0',\n      className\n    )}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 3787 2842\"\n    fill=\"none\"\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"],"names":[],"mappings":";;AAyIO,MAAM,YAAgC,CAAC;AAAA,EAC5C,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA,oBAAC,KAAA,EAAE,QAAO,gBAAe,WAAU,iBACjC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,aAAa;AAAA,UACb,WAAU;AAAA,QAAA;AAAA,MAAA,GAEd;AAAA,0BACC,QAAA,EACC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,GAAE;AAAA,UACF,GAAE;AAAA,UACF,OAAM;AAAA,UACN,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,2BAA0B;AAAA,UAE1B,UAAA;AAAA,YAAA,oBAAC,WAAA,EAAQ,cAAa,KAAI,QAAO,sBAAqB;AAAA,YACtD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,IAAG;AAAA,gBACH,KAAI;AAAA,gBACJ,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAET;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,cAAa;AAAA,gBACb,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UACR;AAAA,QAAA;AAAA,MAAA,EACH,CACF;AAAA,IAAA;AAAA,EAAA;AACF;"}

package/dist/components/Pattern/index.cjs

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const components_Pattern_GridPattern = require("./GridPattern.cjs");
-const components_Pattern_DotPattern = require("./DotPattern.cjs");
-const components_Pattern_SpotLight = require("./SpotLight.cjs");
-exports.GridPattern = components_Pattern_GridPattern.GridPattern;
-exports.DotPattern = components_Pattern_DotPattern.DotPattern;
-exports.Spotlight = components_Pattern_SpotLight.Spotlight;
-//# sourceMappingURL=index.cjs.map

package/dist/components/Pattern/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Pattern/index.d.ts

@@ -1,4 +0,0 @@
-export * from './GridPattern';
-export * from './DotPattern';
-export * from './SpotLight';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Pattern/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pattern/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}

package/dist/components/Pattern/index.mjs

@@ -1,9 +0,0 @@
-import { GridPattern } from "./GridPattern.mjs";
-import { DotPattern } from "./DotPattern.mjs";
-import { Spotlight } from "./SpotLight.mjs";
-export {
-  DotPattern,
-  GridPattern,
-  Spotlight
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/Popover/index.cjs

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const utils_cn = require("../../utils/cn.cjs");
-const components_Container_index = require("../Container/index.cjs");
-var PopoverXAlign = /* @__PURE__ */ ((PopoverXAlign2) => {
-  PopoverXAlign2["START"] = "start";
-  PopoverXAlign2["END"] = "end";
-  return PopoverXAlign2;
-})(PopoverXAlign || {});
-var PopoverYAlign = /* @__PURE__ */ ((PopoverYAlign2) => {
-  PopoverYAlign2["BELOW"] = "bellow";
-  PopoverYAlign2["ABOVE"] = "above";
-  return PopoverYAlign2;
-})(PopoverYAlign || {});
-const Popover = ({
-  children,
-  className,
-  identifier,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: utils_cn.cn("group/popover relative flex cursor-pointer", className),
-    "aria-label": `Popover ${identifier}`,
-    id: `unrollable-panel-button-${identifier}`,
-    "aria-haspopup": true,
-    ...props,
-    children
-  }
-);
-const Detail = ({
-  children,
-  isHidden = void 0,
-  isOverable = true,
-  isFocusable = false,
-  xAlign = "start",
-  yAlign = "bellow",
-  identifier,
-  className,
-  displayArrow = true,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  components_Container_index.Container,
-  {
-    transparency: "sm",
-    "aria-hidden": isHidden,
-    "aria-labelledby": `unrollable-panel-button-${identifier}`,
-    id: `unrollable-panel-${identifier}`,
-    className: utils_cn.cn(
-      "absolute z-[1000] min-w-full ring-neutral ring-1 rounded-md",
-      /* Positioning */
-      xAlign === "start" && "left-0",
-      xAlign === "end" && "right-0",
-      yAlign === "bellow" && "top-[calc(100%+1rem)]",
-      yAlign === "above" && "bottom-[calc(100%+1rem)]",
-      /* Arrow indicator */
-      displayArrow && 'before:absolute before:z-[999] before:content-[""] before:w-0 before:h-0',
-      /* Horizontal positioning */
-      displayArrow && xAlign === "start" && "before:left-2",
-      displayArrow && xAlign === "end" && "before:right-2",
-      /* Arrow pointing up (when popover is below trigger) */
-      displayArrow && yAlign === "bellow" && "before:-top-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral",
-      /* Arrow pointing down (when popover is above trigger) */
-      displayArrow && yAlign === "above" && "before:-bottom-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-neutral",
-      /* Visibility management */
-      "overflow-x-visible transition-all duration-400 ease-in-out opacity-0",
-      isHidden !== false ? "invisible" : "delay-800 visible opacity-100",
-      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
-  }
-);
-Popover.Detail = Detail;
-exports.Popover = Popover;
-exports.PopoverXAlign = PopoverXAlign;
-exports.PopoverYAlign = PopoverYAlign;
-//# sourceMappingURL=index.cjs.map

package/dist/components/Popover/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\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 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/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 Popover: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn('group/popover relative flex cursor-pointer', className)}\n    aria-label={`Popover ${identifier}`}\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) 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=\"sm\"\n    aria-hidden={isHidden}\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n    className={cn(\n      'absolute z-[1000] min-w-full ring-neutral ring-1 rounded-md',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\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:content-[\"\"] before:w-0 before:h-0',\n\n      /* Horizontal positioning */\n      displayArrow && xAlign === 'start' && 'before:left-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-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-neutral',\n\n      /* Visibility management */\n      'overflow-x-visible transition-all duration-400 ease-in-out opacity-0',\n      isHidden !== false ? 'invisible' : 'delay-800 visible opacity-100',\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\nPopover.Detail = Detail;\n"],"names":["PopoverXAlign","PopoverYAlign","jsx","cn","Container"],"mappings":";;;;;AA2BO,IAAK,kCAAAA,mBAAL;AAELA,iBAAA,OAAA,IAAQ;AAERA,iBAAA,KAAA,IAAM;AAJI,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAUL,IAAK,kCAAAC,mBAAL;AAELA,iBAAA,OAAA,IAAQ;AAERA,iBAAA,OAAA,IAAQ;AAJE,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAwFL,MAAM,UAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,8CAA8C,SAAS;AAAA,IACrE,cAAY,WAAW,UAAU;AAAA,IACjC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAuFF,MAAM,SAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MACED,2BAAAA;AAAAA,EAACE,2BAAAA;AAAAA,EAAA;AAAA,IACC,cAAa;AAAA,IACb,eAAa;AAAA,IACb,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAClC,WAAWD,SAAAA;AAAAA,MACT;AAAA;AAAA,MAGA,WAAW,WAAW;AAAA,MACtB,WAAW,SAAS;AAAA,MACpB,WAAW,YAAY;AAAA,MACvB,WAAW,WAAW;AAAA;AAAA,MAGtB,gBACE;AAAA;AAAA,MAGF,gBAAgB,WAAW,WAAW;AAAA,MACtC,gBAAgB,WAAW,SAAS;AAAA;AAAA,MAGpC,gBACE,WAAW,YACX;AAAA;AAAA,MAGF,gBACE,WAAW,WACX;AAAA;AAAA,MAGF;AAAA,MACA,aAAa,QAAQ,cAAc;AAAA,MACnC,cACE;AAAA,MACF,eACE;AAAA,MACF;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,QAAQ,SAAS;;;;"}

package/dist/components/Popover/index.d.ts

@@ -1,137 +0,0 @@
-import { DetailedHTMLProps, FC, HTMLAttributes } from 'react';
-/**
- * Props for the main Popover component
- * Extends HTMLDivElement attributes for full DOM compatibility
- */
-export type PopoverProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-    /** Unique identifier linking the trigger to its popover content for accessibility */
-    identifier: string;
-};
-/**
- * Composite type for the Popover component with Detail subcomponent
- * Allows for Popover.Detail usage pattern
- */
-export type PopoverType = FC<PopoverProps> & {
-    Detail: FC<DetailProps>;
-};
-/**
- * Horizontal alignment options for popover positioning
- */
-export declare enum PopoverXAlign {
-    /** Align popover to start (left) of trigger */
-    START = "start",
-    /** Align popover to end (right) of trigger */
-    END = "end"
-}
-/**
- * Vertical alignment options for popover positioning
- */
-export declare enum PopoverYAlign {
-    /** Position popover below the trigger */
-    BELOW = "bellow",
-    /** Position popover above the trigger */
-    ABOVE = "above"
-}
-/**
- * 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/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
- */
-export declare const Popover: PopoverType;
-/**
- * Props for the Popover.Detail component
- * Extends HTMLDivElement attributes for styling flexibility
- */
-export type DetailProps = HTMLAttributes<HTMLDivElement> & {
-    /** Whether the popover responds to focus events on the trigger */
-    isFocusable?: boolean;
-    /** Controls visibility state - undefined allows automatic hover/focus control */
-    isHidden?: boolean;
-    /** Whether the popover responds to hover events on the trigger */
-    isOverable?: boolean;
-    /** Unique identifier matching the trigger's identifier for accessibility */
-    identifier: string;
-    /** Horizontal positioning relative to trigger */
-    xAlign?: PopoverXAlign | `${PopoverXAlign}`;
-    /** Vertical positioning relative to trigger */
-    yAlign?: PopoverYAlign | `${PopoverYAlign}`;
-    /** Whether to display the directional arrow indicator */
-    displayArrow?: boolean;
-};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAInE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,cAAc,CACf,GAAG;IACF,qFAAqF;IACrF,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG;IAC3C,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,oBAAY,aAAa;IACvB,+CAA+C;IAC/C,KAAK,UAAU;IACf,8CAA8C;IAC9C,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,aAAa;IACvB,yCAAyC;IACzC,KAAK,WAAW;IAChB,yCAAyC;IACzC,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,eAAO,MAAM,OAAO,EAAE,WAerB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,UAAU,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,MAAM,CAAC,EAAE,aAAa,GAAG,GAAG,aAAa,EAAE,CAAC;IAC5C,+CAA+C;IAC/C,MAAM,CAAC,EAAE,aAAa,GAAG,GAAG,aAAa,EAAE,CAAC;IAC5C,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC"}

package/dist/components/Popover/index.mjs

@@ -1,81 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.mjs";
-import { Container } from "../Container/index.mjs";
-var PopoverXAlign = /* @__PURE__ */ ((PopoverXAlign2) => {
-  PopoverXAlign2["START"] = "start";
-  PopoverXAlign2["END"] = "end";
-  return PopoverXAlign2;
-})(PopoverXAlign || {});
-var PopoverYAlign = /* @__PURE__ */ ((PopoverYAlign2) => {
-  PopoverYAlign2["BELOW"] = "bellow";
-  PopoverYAlign2["ABOVE"] = "above";
-  return PopoverYAlign2;
-})(PopoverYAlign || {});
-const Popover = ({
-  children,
-  className,
-  identifier,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn("group/popover relative flex cursor-pointer", className),
-    "aria-label": `Popover ${identifier}`,
-    id: `unrollable-panel-button-${identifier}`,
-    "aria-haspopup": true,
-    ...props,
-    children
-  }
-);
-const Detail = ({
-  children,
-  isHidden = void 0,
-  isOverable = true,
-  isFocusable = false,
-  xAlign = "start",
-  yAlign = "bellow",
-  identifier,
-  className,
-  displayArrow = true,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  Container,
-  {
-    transparency: "sm",
-    "aria-hidden": isHidden,
-    "aria-labelledby": `unrollable-panel-button-${identifier}`,
-    id: `unrollable-panel-${identifier}`,
-    className: cn(
-      "absolute z-[1000] min-w-full ring-neutral ring-1 rounded-md",
-      /* Positioning */
-      xAlign === "start" && "left-0",
-      xAlign === "end" && "right-0",
-      yAlign === "bellow" && "top-[calc(100%+1rem)]",
-      yAlign === "above" && "bottom-[calc(100%+1rem)]",
-      /* Arrow indicator */
-      displayArrow && 'before:absolute before:z-[999] before:content-[""] before:w-0 before:h-0',
-      /* Horizontal positioning */
-      displayArrow && xAlign === "start" && "before:left-2",
-      displayArrow && xAlign === "end" && "before:right-2",
-      /* Arrow pointing up (when popover is below trigger) */
-      displayArrow && yAlign === "bellow" && "before:-top-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral",
-      /* Arrow pointing down (when popover is above trigger) */
-      displayArrow && yAlign === "above" && "before:-bottom-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-neutral",
-      /* Visibility management */
-      "overflow-x-visible transition-all duration-400 ease-in-out opacity-0",
-      isHidden !== false ? "invisible" : "delay-800 visible opacity-100",
-      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
-  }
-);
-Popover.Detail = Detail;
-export {
-  Popover,
-  PopoverXAlign,
-  PopoverYAlign
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\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 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/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 Popover: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn('group/popover relative flex cursor-pointer', className)}\n    aria-label={`Popover ${identifier}`}\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) 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=\"sm\"\n    aria-hidden={isHidden}\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n    className={cn(\n      'absolute z-[1000] min-w-full ring-neutral ring-1 rounded-md',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\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:content-[\"\"] before:w-0 before:h-0',\n\n      /* Horizontal positioning */\n      displayArrow && xAlign === 'start' && 'before:left-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-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-neutral',\n\n      /* Visibility management */\n      'overflow-x-visible transition-all duration-400 ease-in-out opacity-0',\n      isHidden !== false ? 'invisible' : 'delay-800 visible opacity-100',\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\nPopover.Detail = Detail;\n"],"names":["PopoverXAlign","PopoverYAlign"],"mappings":";;;AA2BO,IAAK,kCAAAA,mBAAL;AAELA,iBAAA,OAAA,IAAQ;AAERA,iBAAA,KAAA,IAAM;AAJI,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAUL,IAAK,kCAAAC,mBAAL;AAELA,iBAAA,OAAA,IAAQ;AAERA,iBAAA,OAAA,IAAQ;AAJE,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAwFL,MAAM,UAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,8CAA8C,SAAS;AAAA,IACrE,cAAY,WAAW,UAAU;AAAA,IACjC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAuFF,MAAM,SAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,cAAa;AAAA,IACb,eAAa;AAAA,IACb,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAClC,WAAW;AAAA,MACT;AAAA;AAAA,MAGA,WAAW,WAAW;AAAA,MACtB,WAAW,SAAS;AAAA,MACpB,WAAW,YAAY;AAAA,MACvB,WAAW,WAAW;AAAA;AAAA,MAGtB,gBACE;AAAA;AAAA,MAGF,gBAAgB,WAAW,WAAW;AAAA,MACtC,gBAAgB,WAAW,SAAS;AAAA;AAAA,MAGpC,gBACE,WAAW,YACX;AAAA;AAAA,MAGF,gBACE,WAAW,WACX;AAAA;AAAA,MAGF;AAAA,MACA,aAAa,QAAQ,cAAc;AAAA,MACnC,cACE;AAAA,MACF,eACE;AAAA,MACF;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,QAAQ,SAAS;"}