@intlayer/design-system 6.1.4 → 6.1.6-canary.0

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

@@ -1,12 +1,126 @@
 import { FC, SVGProps } from 'react';
+/**
+ * Props for the GridPattern component
+ * Extends SVGProps to inherit all standard SVG attributes
+ */
 type GridPatternProps = {
+    /** Width of each grid cell in pixels */
     width?: number;
+    /** Height of each grid cell in pixels */
     height?: number;
+    /** Horizontal offset of the pattern */
     x?: number;
+    /** Vertical offset of the pattern */
     y?: number;
+    /** Array of grid coordinates to highlight as filled squares */
     squares?: [x: number, y: number][];
+    /** Dash pattern for grid lines (0 = solid, positive = dashed) */
     strokeDasharray?: number;
 } & SVGProps<SVGSVGElement>;
+/**
+ * Grid Pattern Component
+ *
+ * A versatile SVG component that generates a repeating grid pattern background with
+ * optional highlighted squares. Ideal for technical layouts, dashboards, design mockups,
+ * and any interface requiring structured visual organization.
+ *
+ * Features:
+ * - Scalable vector-based grid that renders crisp at any zoom level
+ * - Customizable cell dimensions and spacing
+ * - Optional square highlighting for emphasis or data visualization
+ * - Configurable stroke patterns (solid or dashed lines)
+ * - Theme-aware styling with automatic dark mode support
+ * - Accessibility-friendly with screen reader exclusion
+ * - Performance optimized with pointer events disabled
+ * - Full container coverage with responsive sizing
+ *
+ * Technical Architecture:
+ * - Uses SVG `<pattern>` for memory-efficient repetition
+ * - Grid lines drawn with path elements for precision
+ * - Highlighted squares rendered as separate rect elements
+ * - Pattern coordinates use userSpaceOnUse for consistency
+ * - Static pattern ID prevents conflicts between instances
+ *
+ * Visual Design:
+ * - Default: 40x40px grid cells with subtle neutral strokes
+ * - Light mode: 10% fill opacity, 15% stroke opacity
+ * - Dark mode: Enhanced 30% stroke opacity for visibility
+ * - Slight offset (-1px) for optimal line rendering
+ * - Optional dashed lines for more subtle appearance
+ *
+ * Highlighted Squares:
+ * - Defined by coordinate arrays [x, y] where x,y are grid positions
+ * - Automatically sized to fit within grid cells (width-1, height-1)
+ * - Positioned with 1px offset for visual separation from grid lines
+ * - Inherit theme-based fill colors for consistency
+ *
+ * @example
+ * Basic grid background:
+ * ```tsx
+ * <div className="relative min-h-screen">
+ *   <GridPattern />
+ *   <div className="relative z-10">
+ *     <h1>Content over grid</h1>
+ *   </div>
+ * </div>
+ * ```
+ *
+ * @example
+ * Custom grid size with dashed lines:
+ * ```tsx
+ * <GridPattern
+ *   width={60}
+ *   height={60}
+ *   strokeDasharray={2}
+ *   className="stroke-primary/20"
+ * />
+ * ```
+ *
+ * @example
+ * Data visualization with highlighted squares:
+ * ```tsx
+ * <GridPattern
+ *   width={30}
+ *   height={30}
+ *   squares={[
+ *     [0, 1], [1, 1], [2, 1],
+ *     [1, 2], [3, 0], [4, 2]
+ *   ]}
+ *   className="fill-accent/20 stroke-accent/30"
+ * />
+ * ```
+ *
+ * @example
+ * Fine grid for technical layouts:
+ * ```tsx
+ * <GridPattern
+ *   width={20}
+ *   height={20}
+ *   strokeDasharray={1}
+ *   className="stroke-neutral/8 fill-neutral/5"
+ * />
+ * ```
+ *
+ * Styling Guidelines:
+ * - Use low opacity values (5-30%) for background subtlety
+ * - Consider theme contrast when customizing colors
+ * - Dashed patterns work well for secondary grids
+ * - Match grid colors with overall design system
+ *
+ * Performance Notes:
+ * - Pattern definition reused efficiently across large areas
+ * - Highlighted squares rendered individually for flexibility
+ * - Pointer events disabled to prevent interaction blocking
+ * - SVG optimized for browser rendering performance
+ *
+ * Accessibility:
+ * - Hidden from screen readers with aria-hidden="true"
+ * - Purely decorative - doesn't convey essential information
+ * - Maintains sufficient contrast with overlaid content
+ *
+ * @param props - GridPattern component props
+ * @returns SVG element with repeating grid pattern and optional highlights
+ */
 export declare const GridPattern: FC<GridPatternProps>;
 export {};
 //# sourceMappingURL=GridPattern.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GridPattern.d.ts","sourceRoot":"","sources":["../../../src/components/Pattern/GridPattern.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG1C,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAI5B,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkD5C,CAAC"}
+{"version":3,"file":"GridPattern.d.ts","sourceRoot":"","sources":["../../../src/components/Pattern/GridPattern.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG1C;;;GAGG;AACH,KAAK,gBAAgB,GAAG;IACtB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACnC,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAQ5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuGG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkD5C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"GridPattern.mjs","sources":["../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype GridPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  squares?: [x: number, y: number][];\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\nconst id = 'grid-pattern';\n\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => (\n  <svg\n    aria-hidden=\"true\"\n    className={cn(\n      'fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30 pointer-events-none absolute inset-0 h-full max-h-full w-full',\n      className\n    )}\n    {...props}\n  >\n    <defs>\n      <pattern\n        id={id}\n        width={width}\n        height={height}\n        patternUnits=\"userSpaceOnUse\"\n        x={x}\n        y={y}\n      >\n        <path\n          d={`M.5 ${height}V.5H${width}`}\n          fill=\"none\"\n          strokeDasharray={strokeDasharray}\n        />\n      </pattern>\n    </defs>\n    <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    {squares && (\n      <svg x={x} y={y} className=\"overflow-visible\">\n        {squares.map(([x, y]) => (\n          <rect\n            strokeWidth=\"0\"\n            key={`${x}-${y}`}\n            width={width - 1}\n            height={height - 1}\n            x={x * width + 1}\n            y={y * height + 1}\n          />\n        ))}\n      </svg>\n    )}\n  </svg>\n);\n"],"names":["x","y"],"mappings":";;AAYA,MAAM,KAAK;AAEJ,MAAM,cAAoC,CAAC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA,oBAAC,QAAA,EACC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAa;AAAA,UACb;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAG,OAAO,MAAM,OAAO,KAAK;AAAA,cAC5B,MAAK;AAAA,cACL;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,GAEJ;AAAA,MACA,oBAAC,QAAA,EAAK,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAA,CAAK;AAAA,MACrE,WACC,oBAAC,OAAA,EAAI,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACA,IAAGC,EAAC,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAY;AAAA,UAEZ,OAAO,QAAQ;AAAA,UACf,QAAQ,SAAS;AAAA,UACjB,GAAGD,KAAI,QAAQ;AAAA,UACf,GAAGC,KAAI,SAAS;AAAA,QAAA;AAAA,QAJX,GAAGD,EAAC,IAAIC,EAAC;AAAA,MAAA,CAMjB,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"GridPattern.mjs","sources":["../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the GridPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n */\ntype GridPatternProps = {\n  /** Width of each grid cell in pixels */\n  width?: number;\n  /** Height of each grid cell in pixels */\n  height?: number;\n  /** Horizontal offset of the pattern */\n  x?: number;\n  /** Vertical offset of the pattern */\n  y?: number;\n  /** Array of grid coordinates to highlight as filled squares */\n  squares?: [x: number, y: number][];\n  /** Dash pattern for grid lines (0 = solid, positive = dashed) */\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\n/**\n * Unique identifier for the grid pattern definition\n * Static to ensure consistent referencing across instances\n */\nconst id = 'grid-pattern';\n\n/**\n * Grid Pattern Component\n *\n * A versatile SVG component that generates a repeating grid pattern background with\n * optional highlighted squares. Ideal for technical layouts, dashboards, design mockups,\n * and any interface requiring structured visual organization.\n *\n * Features:\n * - Scalable vector-based grid that renders crisp at any zoom level\n * - Customizable cell dimensions and spacing\n * - Optional square highlighting for emphasis or data visualization\n * - Configurable stroke patterns (solid or dashed lines)\n * - Theme-aware styling with automatic dark mode support\n * - Accessibility-friendly with screen reader exclusion\n * - Performance optimized with pointer events disabled\n * - Full container coverage with responsive sizing\n *\n * Technical Architecture:\n * - Uses SVG `<pattern>` for memory-efficient repetition\n * - Grid lines drawn with path elements for precision\n * - Highlighted squares rendered as separate rect elements\n * - Pattern coordinates use userSpaceOnUse for consistency\n * - Static pattern ID prevents conflicts between instances\n *\n * Visual Design:\n * - Default: 40x40px grid cells with subtle neutral strokes\n * - Light mode: 10% fill opacity, 15% stroke opacity\n * - Dark mode: Enhanced 30% stroke opacity for visibility\n * - Slight offset (-1px) for optimal line rendering\n * - Optional dashed lines for more subtle appearance\n *\n * Highlighted Squares:\n * - Defined by coordinate arrays [x, y] where x,y are grid positions\n * - Automatically sized to fit within grid cells (width-1, height-1)\n * - Positioned with 1px offset for visual separation from grid lines\n * - Inherit theme-based fill colors for consistency\n *\n * @example\n * Basic grid background:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n *   <GridPattern />\n *   <div className=\"relative z-10\">\n *     <h1>Content over grid</h1>\n *   </div>\n * </div>\n * ```\n *\n * @example\n * Custom grid size with dashed lines:\n * ```tsx\n * <GridPattern\n *   width={60}\n *   height={60}\n *   strokeDasharray={2}\n *   className=\"stroke-primary/20\"\n * />\n * ```\n *\n * @example\n * Data visualization with highlighted squares:\n * ```tsx\n * <GridPattern\n *   width={30}\n *   height={30}\n *   squares={[\n *     [0, 1], [1, 1], [2, 1],\n *     [1, 2], [3, 0], [4, 2]\n *   ]}\n *   className=\"fill-accent/20 stroke-accent/30\"\n * />\n * ```\n *\n * @example\n * Fine grid for technical layouts:\n * ```tsx\n * <GridPattern\n *   width={20}\n *   height={20}\n *   strokeDasharray={1}\n *   className=\"stroke-neutral/8 fill-neutral/5\"\n * />\n * ```\n *\n * Styling Guidelines:\n * - Use low opacity values (5-30%) for background subtlety\n * - Consider theme contrast when customizing colors\n * - Dashed patterns work well for secondary grids\n * - Match grid colors with overall design system\n *\n * Performance Notes:\n * - Pattern definition reused efficiently across large areas\n * - Highlighted squares rendered individually for flexibility\n * - Pointer events disabled to prevent interaction blocking\n * - SVG optimized for browser rendering performance\n *\n * Accessibility:\n * - Hidden from screen readers with aria-hidden=\"true\"\n * - Purely decorative - doesn't convey essential information\n * - Maintains sufficient contrast with overlaid content\n *\n * @param props - GridPattern component props\n * @returns SVG element with repeating grid pattern and optional highlights\n */\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => (\n  <svg\n    aria-hidden=\"true\"\n    className={cn(\n      'fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30 pointer-events-none absolute inset-0 h-full max-h-full w-full',\n      className\n    )}\n    {...props}\n  >\n    <defs>\n      <pattern\n        id={id}\n        width={width}\n        height={height}\n        patternUnits=\"userSpaceOnUse\"\n        x={x}\n        y={y}\n      >\n        <path\n          d={`M.5 ${height}V.5H${width}`}\n          fill=\"none\"\n          strokeDasharray={strokeDasharray}\n        />\n      </pattern>\n    </defs>\n    <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    {squares && (\n      <svg x={x} y={y} className=\"overflow-visible\">\n        {squares.map(([x, y]) => (\n          <rect\n            strokeWidth=\"0\"\n            key={`${x}-${y}`}\n            width={width - 1}\n            height={height - 1}\n            x={x * width + 1}\n            y={y * height + 1}\n          />\n        ))}\n      </svg>\n    )}\n  </svg>\n);\n"],"names":["x","y"],"mappings":";;AA0BA,MAAM,KAAK;AA0GJ,MAAM,cAAoC,CAAC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA,oBAAC,QAAA,EACC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAa;AAAA,UACb;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAG,OAAO,MAAM,OAAO,KAAK;AAAA,cAC5B,MAAK;AAAA,cACL;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,GAEJ;AAAA,MACA,oBAAC,QAAA,EAAK,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAA,CAAK;AAAA,MACrE,WACC,oBAAC,OAAA,EAAI,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACA,IAAGC,EAAC,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAY;AAAA,UAEZ,OAAO,QAAQ;AAAA,UACf,QAAQ,SAAS;AAAA,UACjB,GAAGD,KAAI,QAAQ;AAAA,UACf,GAAGC,KAAI,SAAS;AAAA,QAAA;AAAA,QAJX,GAAGD,EAAC,IAAIC,EAAC;AAAA,MAAA,CAMjB,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAEJ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"SpotLight.cjs","sources":["../../../src/components/Pattern/SpotLight.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype SpotlightProps = {\n  fill?: string;\n  cx?: number;\n  cy?: number;\n  rx?: number;\n  ry?: number;\n  opacity?: number;\n} & SVGProps<SVGSVGElement>;\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":["jsxs","cn","jsx"],"mappings":";;;;AAYO,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,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,2BAAAA,IAAC,KAAA,EAAE,QAAO,gBAAe,WAAU,iBACjC,UAAAA,2BAAAA;AAAAA,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,qCACC,QAAA,EACC,UAAAF,2BAAAA;AAAAA,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,YAAAE,2BAAAA,IAAC,WAAA,EAAQ,cAAa,KAAI,QAAO,sBAAqB;AAAA,YACtDA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,IAAG;AAAA,gBACH,KAAI;AAAA,gBACJ,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAETA,2BAAAA;AAAAA,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;;"}
+{"version":3,"file":"SpotLight.cjs","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":["jsxs","cn","jsx"],"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,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,2BAAAA,IAAC,KAAA,EAAE,QAAO,gBAAe,WAAU,iBACjC,UAAAA,2BAAAA;AAAAA,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,qCACC,QAAA,EACC,UAAAF,2BAAAA;AAAAA,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,YAAAE,2BAAAA,IAAC,WAAA,EAAQ,cAAa,KAAI,QAAO,sBAAqB;AAAA,YACtDA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,IAAG;AAAA,gBACH,KAAI;AAAA,gBACJ,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAETA,2BAAAA;AAAAA,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/SpotLight.d.ts

@@ -1,12 +1,137 @@
 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 +1 @@
-{"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,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAE5B,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAuDxC,CAAC"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"SpotLight.mjs","sources":["../../../src/components/Pattern/SpotLight.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype SpotlightProps = {\n  fill?: string;\n  cx?: number;\n  cy?: number;\n  rx?: number;\n  ry?: number;\n  opacity?: number;\n} & SVGProps<SVGSVGElement>;\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":";;AAYO,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;"}
+{"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/Popover/index.cjs

@@ -3,6 +3,16 @@ 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,
@@ -19,16 +29,6 @@ const Popover = ({
     children
   }
 );
-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 Detail = ({
   children,
   isHidden = void 0,

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

@@ -1 +1 @@
-{"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\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  identifier: string;\n};\n\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Trigger allowing to open a popover menu.\n *\n * Example:\n * ```jsx\n * <Popover identifier=\"popover\">\n *   Open popover\n *\n *   <Popover.Detail identifier=\"popover\">\n *     <div>Content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * > Note Popover.Trigger can be replaced by a button. Don't add a button inside the trigger.\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\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  xAlign?: PopoverXAlign | `${PopoverXAlign}`;\n  yAlign?: PopoverYAlign | `${PopoverYAlign}`;\n  displayArrow?: boolean;\n};\n\nexport enum PopoverXAlign {\n  START = 'start',\n  END = 'end',\n}\n\nexport enum PopoverYAlign {\n  BELOW = 'bellow',\n  ABOVE = 'above',\n}\n\n/**\n * Component that opens a popover menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <Popover.Detail identifier=\"popover\">\n *   <div>Content</div>\n * </Popover.Detail>\n * ```\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":["jsx","cn","PopoverXAlign","PopoverYAlign","Container"],"mappings":";;;;;AA+BO,MAAM,UAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,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;AAaK,IAAK,kCAAAC,mBAAL;AACLA,iBAAA,OAAA,IAAQ;AACRA,iBAAA,KAAA,IAAM;AAFI,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAKL,IAAK,kCAAAC,mBAAL;AACLA,iBAAA,OAAA,IAAQ;AACRA,iBAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAeZ,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,MACEH,2BAAAA;AAAAA,EAACI,2BAAAA;AAAAA,EAAA;AAAA,IACC,cAAa;AAAA,IACb,eAAa;AAAA,IACb,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAClC,WAAWH,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;;;;"}
+{"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,42 +1,137 @@
 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>;
 };
 /**
- * Trigger allowing to open a popover menu.
+ * 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.
  *
- * Example:
+ * 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="popover">
- *   Open popover
+ * <Popover identifier="help-tooltip">
+ *   <button>Need Help?</button>
  *
- *   <Popover.Detail identifier="popover">
- *     <div>Content</div>
+ *   <Popover.Detail identifier="help-tooltip">
+ *     <div>This is helpful information!</div>
  *   </Popover.Detail>
  * </Popover>
  * ```
  *
- * > Note Popover.Trigger can be replaced by a button. Don't add a button inside the trigger.
+ * @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;
 };
-export declare enum PopoverXAlign {
-    START = "start",
-    END = "end"
-}
-export declare enum PopoverYAlign {
-    BELOW = "bellow",
-    ABOVE = "above"
-}
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"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,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,cAAc,CACf,GAAG;IACF,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG;IAC3C,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,OAAO,EAAE,WAerB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,GAAG,GAAG,aAAa,EAAE,CAAC;IAC5C,MAAM,CAAC,EAAE,aAAa,GAAG,GAAG,aAAa,EAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,oBAAY,aAAa;IACvB,KAAK,UAAU;IACf,GAAG,QAAQ;CACZ;AAED,oBAAY,aAAa;IACvB,KAAK,WAAW;IAChB,KAAK,UAAU;CAChB"}
+{"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,6 +1,16 @@
 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,
@@ -17,16 +27,6 @@ const Popover = ({
     children
   }
 );
-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 Detail = ({
   children,
   isHidden = void 0,