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

package/dist/components/Pattern/DotPattern.cjs

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ReactExports = require("react");
-const utils_cn = require("../../utils/cn.cjs");
-const DotPattern = ({
-  width = 16,
-  height = 16,
-  x = 0,
-  y = 0,
-  cx = 1,
-  cy = 1,
-  cr = 1,
-  className,
-  ...props
-}) => {
-  const id = ReactExports.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className: utils_cn.cn(
-        "fill-neutral/30 pointer-events-none absolute inset-0 h-full w-full",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
-          "pattern",
-          {
-            id,
-            width,
-            height,
-            patternUnits: "userSpaceOnUse",
-            patternContentUnits: "userSpaceOnUse",
-            x,
-            y,
-            children: /* @__PURE__ */ jsxRuntime.jsx("circle", { id: "pattern-circle", cx, cy, r: cr })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", strokeWidth: 0, fill: `url(#${id})` })
-      ]
-    }
-  );
-};
-exports.DotPattern = DotPattern;
-//# sourceMappingURL=DotPattern.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DotPattern.cjs","sources":["../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import { type FC, type SVGProps, useId } from 'react';\n\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the DotPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n */\ntype DotPatternProps = {\n  /** Width of the pattern tile in pixels */\n  width?: number;\n  /** Height of the pattern tile in pixels */\n  height?: number;\n  /** Horizontal offset of the pattern */\n  x?: number;\n  /** Vertical offset of the pattern */\n  y?: number;\n  /** X coordinate of the dot center within the pattern tile */\n  cx?: number;\n  /** Y coordinate of the dot center within the pattern tile */\n  cy?: number;\n  /** Radius of each dot in the pattern */\n  cr?: number;\n} & SVGProps<SVGSVGElement>;\n\n/**\n * Dot Pattern Component\n *\n * A decorative SVG component that generates a repeating dot pattern background.\n * Perfect for adding subtle texture and visual interest to sections, cards, or hero areas\n * without interfering with content readability.\n *\n * Features:\n * - Scalable vector-based pattern that looks crisp at any size\n * - Customizable dot spacing, size, and positioning\n * - Semi-transparent fill for subtle visual effect\n * - Accessibility-friendly with aria-hidden attribute\n * - Pointer events disabled to avoid interaction interference\n * - Unique pattern ID generation to prevent conflicts\n * - Full coverage with absolute positioning\n *\n * Technical Implementation:\n * - Uses SVG `<pattern>` element for efficient rendering\n * - Pattern repeats using userSpaceOnUse coordinate system\n * - Generates unique IDs using React's useId hook\n * - Fills entire container with 100% width and height\n * - Pattern tile coordinates defined in userSpaceOnUse units\n *\n * Visual Characteristics:\n * - Default: 16x16px tile with 1px radius dots\n * - Semi-transparent neutral fill (30% opacity)\n * - Dots positioned at (1,1) within each tile by default\n * - Absolute positioning covers entire parent container\n *\n * @example\n * Basic usage as background pattern:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n *   <DotPattern />\n *   <div className=\"relative z-10\">\n *     <h1>Content over dot pattern</h1>\n *   </div>\n * </div>\n * ```\n *\n * @example\n * Custom dot spacing and size:\n * ```tsx\n * <DotPattern\n *   width={24}\n *   height={24}\n *   cr={1.5}\n *   className=\"fill-primary/20\"\n * />\n * ```\n *\n * @example\n * Offset pattern positioning:\n * ```tsx\n * <DotPattern\n *   x={8}\n *   y={8}\n *   cx={2}\n *   cy={2}\n *   className=\"fill-accent/25\"\n * />\n * ```\n *\n * @example\n * Large sparse dots:\n * ```tsx\n * <DotPattern\n *   width={32}\n *   height={32}\n *   cr={2}\n *   cx={16}\n *   cy={16}\n *   className=\"fill-neutral/10\"\n * />\n * ```\n *\n * Styling Notes:\n * - Use `fill-*` classes to customize dot color and opacity\n * - Pattern automatically fills parent container\n * - Consider contrast with overlaid content\n * - Semi-transparent fills work best for backgrounds\n *\n * Accessibility:\n * - Marked as `aria-hidden=\"true\"` since it's decorative\n * - Pointer events disabled to maintain interactivity of overlaid content\n * - Does not interfere with screen readers or keyboard navigation\n *\n * @param props - DotPattern component props\n * @returns SVG element with repeating dot pattern\n */\nexport const DotPattern: FC<DotPatternProps> = ({\n  width = 16,\n  height = 16,\n  x = 0,\n  y = 0,\n  cx = 1,\n  cy = 1,\n  cr = 1,\n  className,\n  ...props\n}) => {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        'fill-neutral/30 pointer-events-none absolute inset-0 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          patternContentUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <circle id=\"pattern-circle\" cx={cx} cy={cy} r={cr} />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    </svg>\n  );\n};\n"],"names":["useId","jsxs","cn","jsx"],"mappings":";;;;;AAmHO,MAAM,aAAkC,CAAC;AAAA,EAC9C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAKA,aAAAA,MAAA;AAEX,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,+BAAC,QAAA,EACC,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa;AAAA,YACb,qBAAoB;AAAA,YACpB;AAAA,YACA;AAAA,YAEA,yCAAC,UAAA,EAAO,IAAG,kBAAiB,IAAQ,IAAQ,GAAG,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA,GAEvD;AAAA,QACAA,2BAAAA,IAAC,QAAA,EAAK,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;;"}

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

@@ -1,114 +0,0 @@
-import { FC, SVGProps } from 'react';
-/**
- * Props for the DotPattern component
- * Extends SVGProps to inherit all standard SVG attributes
- */
-type DotPatternProps = {
-    /** Width of the pattern tile in pixels */
-    width?: number;
-    /** Height of the pattern tile in pixels */
-    height?: number;
-    /** Horizontal offset of the pattern */
-    x?: number;
-    /** Vertical offset of the pattern */
-    y?: number;
-    /** X coordinate of the dot center within the pattern tile */
-    cx?: number;
-    /** Y coordinate of the dot center within the pattern tile */
-    cy?: number;
-    /** Radius of each dot in the pattern */
-    cr?: number;
-} & SVGProps<SVGSVGElement>;
-/**
- * Dot Pattern Component
- *
- * A decorative SVG component that generates a repeating dot pattern background.
- * Perfect for adding subtle texture and visual interest to sections, cards, or hero areas
- * without interfering with content readability.
- *
- * Features:
- * - Scalable vector-based pattern that looks crisp at any size
- * - Customizable dot spacing, size, and positioning
- * - Semi-transparent fill for subtle visual effect
- * - Accessibility-friendly with aria-hidden attribute
- * - Pointer events disabled to avoid interaction interference
- * - Unique pattern ID generation to prevent conflicts
- * - Full coverage with absolute positioning
- *
- * Technical Implementation:
- * - Uses SVG `<pattern>` element for efficient rendering
- * - Pattern repeats using userSpaceOnUse coordinate system
- * - Generates unique IDs using React's useId hook
- * - Fills entire container with 100% width and height
- * - Pattern tile coordinates defined in userSpaceOnUse units
- *
- * Visual Characteristics:
- * - Default: 16x16px tile with 1px radius dots
- * - Semi-transparent neutral fill (30% opacity)
- * - Dots positioned at (1,1) within each tile by default
- * - Absolute positioning covers entire parent container
- *
- * @example
- * Basic usage as background pattern:
- * ```tsx
- * <div className="relative min-h-screen">
- *   <DotPattern />
- *   <div className="relative z-10">
- *     <h1>Content over dot pattern</h1>
- *   </div>
- * </div>
- * ```
- *
- * @example
- * Custom dot spacing and size:
- * ```tsx
- * <DotPattern
- *   width={24}
- *   height={24}
- *   cr={1.5}
- *   className="fill-primary/20"
- * />
- * ```
- *
- * @example
- * Offset pattern positioning:
- * ```tsx
- * <DotPattern
- *   x={8}
- *   y={8}
- *   cx={2}
- *   cy={2}
- *   className="fill-accent/25"
- * />
- * ```
- *
- * @example
- * Large sparse dots:
- * ```tsx
- * <DotPattern
- *   width={32}
- *   height={32}
- *   cr={2}
- *   cx={16}
- *   cy={16}
- *   className="fill-neutral/10"
- * />
- * ```
- *
- * Styling Notes:
- * - Use `fill-*` classes to customize dot color and opacity
- * - Pattern automatically fills parent container
- * - Consider contrast with overlaid content
- * - Semi-transparent fills work best for backgrounds
- *
- * Accessibility:
- * - Marked as `aria-hidden="true"` since it's decorative
- * - Pointer events disabled to maintain interactivity of overlaid content
- * - Does not interfere with screen readers or keyboard navigation
- *
- * @param props - DotPattern component props
- * @returns SVG element with repeating dot pattern
- */
-export declare const DotPattern: FC<DotPatternProps>;
-export {};
-//# sourceMappingURL=DotPattern.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DotPattern.d.ts","sourceRoot":"","sources":["../../../src/components/Pattern/DotPattern.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,QAAQ,EAAS,MAAM,OAAO,CAAC;AAItD;;;GAGG;AACH,KAAK,eAAe,GAAG;IACrB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,6DAA6D;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,wCAAwC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAsC1C,CAAC"}

package/dist/components/Pattern/DotPattern.mjs

@@ -1,47 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useId } from "react";
-import { cn } from "../../utils/cn.mjs";
-const DotPattern = ({
-  width = 16,
-  height = 16,
-  x = 0,
-  y = 0,
-  cx = 1,
-  cy = 1,
-  cr = 1,
-  className,
-  ...props
-}) => {
-  const id = useId();
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className: cn(
-        "fill-neutral/30 pointer-events-none absolute inset-0 h-full w-full",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-          "pattern",
-          {
-            id,
-            width,
-            height,
-            patternUnits: "userSpaceOnUse",
-            patternContentUnits: "userSpaceOnUse",
-            x,
-            y,
-            children: /* @__PURE__ */ jsx("circle", { id: "pattern-circle", cx, cy, r: cr })
-          }
-        ) }),
-        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", strokeWidth: 0, fill: `url(#${id})` })
-      ]
-    }
-  );
-};
-export {
-  DotPattern
-};
-//# sourceMappingURL=DotPattern.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DotPattern.mjs","sources":["../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import { type FC, type SVGProps, useId } from 'react';\n\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the DotPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n */\ntype DotPatternProps = {\n  /** Width of the pattern tile in pixels */\n  width?: number;\n  /** Height of the pattern tile in pixels */\n  height?: number;\n  /** Horizontal offset of the pattern */\n  x?: number;\n  /** Vertical offset of the pattern */\n  y?: number;\n  /** X coordinate of the dot center within the pattern tile */\n  cx?: number;\n  /** Y coordinate of the dot center within the pattern tile */\n  cy?: number;\n  /** Radius of each dot in the pattern */\n  cr?: number;\n} & SVGProps<SVGSVGElement>;\n\n/**\n * Dot Pattern Component\n *\n * A decorative SVG component that generates a repeating dot pattern background.\n * Perfect for adding subtle texture and visual interest to sections, cards, or hero areas\n * without interfering with content readability.\n *\n * Features:\n * - Scalable vector-based pattern that looks crisp at any size\n * - Customizable dot spacing, size, and positioning\n * - Semi-transparent fill for subtle visual effect\n * - Accessibility-friendly with aria-hidden attribute\n * - Pointer events disabled to avoid interaction interference\n * - Unique pattern ID generation to prevent conflicts\n * - Full coverage with absolute positioning\n *\n * Technical Implementation:\n * - Uses SVG `<pattern>` element for efficient rendering\n * - Pattern repeats using userSpaceOnUse coordinate system\n * - Generates unique IDs using React's useId hook\n * - Fills entire container with 100% width and height\n * - Pattern tile coordinates defined in userSpaceOnUse units\n *\n * Visual Characteristics:\n * - Default: 16x16px tile with 1px radius dots\n * - Semi-transparent neutral fill (30% opacity)\n * - Dots positioned at (1,1) within each tile by default\n * - Absolute positioning covers entire parent container\n *\n * @example\n * Basic usage as background pattern:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n *   <DotPattern />\n *   <div className=\"relative z-10\">\n *     <h1>Content over dot pattern</h1>\n *   </div>\n * </div>\n * ```\n *\n * @example\n * Custom dot spacing and size:\n * ```tsx\n * <DotPattern\n *   width={24}\n *   height={24}\n *   cr={1.5}\n *   className=\"fill-primary/20\"\n * />\n * ```\n *\n * @example\n * Offset pattern positioning:\n * ```tsx\n * <DotPattern\n *   x={8}\n *   y={8}\n *   cx={2}\n *   cy={2}\n *   className=\"fill-accent/25\"\n * />\n * ```\n *\n * @example\n * Large sparse dots:\n * ```tsx\n * <DotPattern\n *   width={32}\n *   height={32}\n *   cr={2}\n *   cx={16}\n *   cy={16}\n *   className=\"fill-neutral/10\"\n * />\n * ```\n *\n * Styling Notes:\n * - Use `fill-*` classes to customize dot color and opacity\n * - Pattern automatically fills parent container\n * - Consider contrast with overlaid content\n * - Semi-transparent fills work best for backgrounds\n *\n * Accessibility:\n * - Marked as `aria-hidden=\"true\"` since it's decorative\n * - Pointer events disabled to maintain interactivity of overlaid content\n * - Does not interfere with screen readers or keyboard navigation\n *\n * @param props - DotPattern component props\n * @returns SVG element with repeating dot pattern\n */\nexport const DotPattern: FC<DotPatternProps> = ({\n  width = 16,\n  height = 16,\n  x = 0,\n  y = 0,\n  cx = 1,\n  cy = 1,\n  cr = 1,\n  className,\n  ...props\n}) => {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        'fill-neutral/30 pointer-events-none absolute inset-0 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          patternContentUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <circle id=\"pattern-circle\" cx={cx} cy={cy} r={cr} />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;AAmHO,MAAM,aAAkC,CAAC;AAAA,EAC9C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,MAAA;AAEX,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EACC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa;AAAA,YACb,qBAAoB;AAAA,YACpB;AAAA,YACA;AAAA,YAEA,8BAAC,UAAA,EAAO,IAAG,kBAAiB,IAAQ,IAAQ,GAAG,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA,GAEvD;AAAA,QACA,oBAAC,QAAA,EAAK,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;"}

package/dist/components/Pattern/GridPattern.cjs

@@ -1,60 +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 id = "grid-pattern";
-const GridPattern = ({
-  width = 40,
-  height = 40,
-  x = -1,
-  y = -1,
-  strokeDasharray = 0,
-  squares,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    "aria-hidden": "true",
-    className: utils_cn.cn(
-      "fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30 pointer-events-none absolute inset-0 h-full max-h-full w-full",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        "pattern",
-        {
-          id,
-          width,
-          height,
-          patternUnits: "userSpaceOnUse",
-          x,
-          y,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: `M.5 ${height}V.5H${width}`,
-              fill: "none",
-              strokeDasharray
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", strokeWidth: 0, fill: `url(#${id})` }),
-      squares && /* @__PURE__ */ jsxRuntime.jsx("svg", { x, y, className: "overflow-visible", children: squares.map(([x2, y2]) => /* @__PURE__ */ jsxRuntime.jsx(
-        "rect",
-        {
-          strokeWidth: "0",
-          width: width - 1,
-          height: height - 1,
-          x: x2 * width + 1,
-          y: y2 * height + 1
-        },
-        `${x2}-${y2}`
-      )) })
-    ]
-  }
-);
-exports.GridPattern = GridPattern;
-//# sourceMappingURL=GridPattern.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"GridPattern.cjs","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":["jsxs","cn","jsx","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,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,+BAAC,QAAA,EACC,UAAAA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAa;AAAA,UACb;AAAA,UACA;AAAA,UAEA,UAAAA,2BAAAA;AAAAA,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,MACAA,2BAAAA,IAAC,QAAA,EAAK,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAA,CAAK;AAAA,MACrE,WACCA,2BAAAA,IAAC,OAAA,EAAI,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACC,IAAGC,EAAC,MACjBF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAY;AAAA,UAEZ,OAAO,QAAQ;AAAA,UACf,QAAQ,SAAS;AAAA,UACjB,GAAGC,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/GridPattern.d.ts

@@ -1,126 +0,0 @@
-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 +0,0 @@
-{"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

@@ -1,60 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.mjs";
-const id = "grid-pattern";
-const GridPattern = ({
-  width = 40,
-  height = 40,
-  x = -1,
-  y = -1,
-  strokeDasharray = 0,
-  squares,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    "aria-hidden": "true",
-    className: cn(
-      "fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30 pointer-events-none absolute inset-0 h-full max-h-full w-full",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-        "pattern",
-        {
-          id,
-          width,
-          height,
-          patternUnits: "userSpaceOnUse",
-          x,
-          y,
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: `M.5 ${height}V.5H${width}`,
-              fill: "none",
-              strokeDasharray
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", strokeWidth: 0, fill: `url(#${id})` }),
-      squares && /* @__PURE__ */ jsx("svg", { x, y, className: "overflow-visible", children: squares.map(([x2, y2]) => /* @__PURE__ */ jsx(
-        "rect",
-        {
-          strokeWidth: "0",
-          width: width - 1,
-          height: height - 1,
-          x: x2 * width + 1,
-          y: y2 * height + 1
-        },
-        `${x2}-${y2}`
-      )) })
-    ]
-  }
-);
-export {
-  GridPattern
-};
-//# sourceMappingURL=GridPattern.mjs.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,73 +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 Spotlight = ({
-  fill = "currentColor",
-  cy = 273.501,
-  rx = 1924.71,
-  ry = 273.501,
-  cx = 1924.71,
-  opacity = 0.21,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    className: utils_cn.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__ */ jsxRuntime.jsx("g", { filter: "url(#filter)", transform: "scale (-1, 1)", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "ellipse",
-        {
-          cx,
-          cy,
-          rx,
-          ry,
-          fill,
-          fillOpacity: opacity,
-          transform: "matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "filter",
-        {
-          id: "filter",
-          x: "0.860352",
-          y: "0.838989",
-          width: "3785.16",
-          height: "2840.26",
-          filterUnits: "userSpaceOnUse",
-          colorInterpolationFilters: "sRGB",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "feBlend",
-              {
-                mode: "normal",
-                in: "SourceGraphic",
-                in2: "BackgroundImageFix",
-                result: "shape"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "feGaussianBlur",
-              {
-                stdDeviation: "151",
-                result: "effect1_foregroundBlur_1065_8"
-              }
-            )
-          ]
-        }
-      ) })
-    ]
-  }
-);
-exports.Spotlight = Spotlight;
-//# sourceMappingURL=SpotLight.cjs.map

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

@@ -1 +0,0 @@
-{"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;;"}