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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DotPattern.mjs","names":["DotPattern: FC<DotPatternProps>"],"sources":["../../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import type { FC, SVGProps } 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  <svg\n    aria-hidden=\"true\"\n    className={cn(\n      'pointer-events-none absolute inset-0 h-full w-full fill-neutral/30',\n      className\n    )}\n    {...props}\n  >\n    <defs>\n      <pattern\n        id=\"pattern-circle\"\n        width={width}\n        height={height}\n        patternUnits=\"userSpaceOnUse\"\n        patternContentUnits=\"userSpaceOnUse\"\n        x={x}\n        y={y}\n      >\n        <circle cx={cx} cy={cy} r={cr} />\n      </pattern>\n    </defs>\n    <rect\n      width=\"100%\"\n      height=\"100%\"\n      strokeWidth={0}\n      fill={`url(#pattern-circle)`}\n    />\n  </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,MAAaA,cAAmC,EAC9C,QAAQ,IACR,SAAS,IACT,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,UACA,GAAG,YAEH,qBAAC;CACC,eAAY;CACZ,WAAW,GACT,sEACA,UACD;CACD,GAAI;YAEJ,oBAAC,oBACC,oBAAC;EACC,IAAG;EACI;EACC;EACR,cAAa;EACb,qBAAoB;EACjB;EACA;YAEH,oBAAC;GAAW;GAAQ;GAAI,GAAG;IAAM;GACzB,GACL,EACP,oBAAC;EACC,OAAM;EACN,QAAO;EACP,aAAa;EACb,MAAM;GACN;EACE"}

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

@@ -0,0 +1,157 @@
+import { cn } from "../../utils/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Pattern/GridPattern.tsx
+/**
+* Unique identifier for the grid pattern definition
+* Static to ensure consistent referencing across instances
+*/
+const id = "grid-pattern";
+/**
+* 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
+*/
+const GridPattern = ({ width = 40, height = 40, x = -1, y = -1, strokeDasharray = 0, squares, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+	"aria-hidden": "true",
+	className: cn("pointer-events-none absolute inset-0 h-full max-h-full w-full fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30", 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",
+			role: "img",
+			"aria-label": "Grid pattern",
+			children: squares.map(([x$1, y$1]) => /* @__PURE__ */ jsx("rect", {
+				strokeWidth: "0",
+				width: width - 1,
+				height: height - 1,
+				x: x$1 * width + 1,
+				y: y$1 * height + 1
+			}, `${x$1}-${y$1}`))
+		})
+	]
+});
+
+//#endregion
+export { GridPattern };
+//# sourceMappingURL=GridPattern.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridPattern.mjs","names":["GridPattern: FC<GridPatternProps>","x","y"],"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      'pointer-events-none absolute inset-0 h-full max-h-full w-full fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30',\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\n        x={x}\n        y={y}\n        className=\"overflow-visible\"\n        role=\"img\"\n        aria-label=\"Grid pattern\"\n      >\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"],"mappings":";;;;;;;;AA0BA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GX,MAAaA,eAAqC,EAChD,QAAQ,IACR,SAAS,IACT,IAAI,IACJ,IAAI,IACJ,kBAAkB,GAClB,SACA,UACA,GAAG,YAEH,qBAAC;CACC,eAAY;CACZ,WAAW,GACT,0HACA,UACD;CACD,GAAI;;EAEJ,oBAAC,oBACC,oBAAC;GACK;GACG;GACC;GACR,cAAa;GACV;GACA;aAEH,oBAAC;IACC,GAAG,OAAO,OAAO,MAAM;IACvB,MAAK;IACY;KACjB;IACM,GACL;EACP,oBAAC;GAAK,OAAM;GAAO,QAAO;GAAO,aAAa;GAAG,MAAM,QAAQ,GAAG;IAAM;EACvE,WACC,oBAAC;GACI;GACA;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAEV,QAAQ,KAAK,CAACC,KAAGC,SAChB,oBAAC;IACC,aAAY;IAEZ,OAAO,QAAQ;IACf,QAAQ,SAAS;IACjB,GAAGD,MAAI,QAAQ;IACf,GAAGC,MAAI,SAAS;MAJX,GAAGD,IAAE,GAAGC,MAKb,CACF;IACE;;EAEJ"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpotLight.mjs","names":["Spotlight: FC<SpotlightProps>"],"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      'pointer-events-none absolute size-screen animate-spotlight opacity-0',\n      className\n    )}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 3787 2842\"\n    fill=\"none\"\n    role=\"img\"\n    aria-label=\"Spotlight\"\n    {...props}\n  >\n    <g filter=\"url(#filter)\" transform=\"scale (-1, 1)\">\n      <ellipse\n        cx={cx}\n        cy={cy}\n        rx={rx}\n        ry={ry}\n        fill={fill}\n        fillOpacity={opacity}\n        transform=\"matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)\"\n      ></ellipse>\n    </g>\n    <defs>\n      <filter\n        id=\"filter\"\n        x=\"0.860352\"\n        y=\"0.838989\"\n        width=\"3785.16\"\n        height=\"2840.26\"\n        filterUnits=\"userSpaceOnUse\"\n        colorInterpolationFilters=\"sRGB\"\n      >\n        <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\n        <feBlend\n          mode=\"normal\"\n          in=\"SourceGraphic\"\n          in2=\"BackgroundImageFix\"\n          result=\"shape\"\n        ></feBlend>\n        <feGaussianBlur\n          stdDeviation=\"151\"\n          result=\"effect1_foregroundBlur_1065_8\"\n        ></feGaussianBlur>\n      </filter>\n    </defs>\n  </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyIA,MAAaA,aAAiC,EAC5C,OAAO,gBACP,KAAK,SACL,KAAK,SACL,KAAK,SACL,KAAK,SACL,UAAU,KACV,UACA,GAAG,YAEH,qBAAC;CACC,WAAW,GACT,wEACA,UACD;CACD,OAAM;CACN,SAAQ;CACR,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;YAEJ,oBAAC;EAAE,QAAO;EAAe,WAAU;YACjC,oBAAC;GACK;GACA;GACA;GACA;GACE;GACN,aAAa;GACb,WAAU;IACD;GACT,EACJ,oBAAC,oBACC,qBAAC;EACC,IAAG;EACH,GAAE;EACF,GAAE;EACF,OAAM;EACN,QAAO;EACP,aAAY;EACZ,2BAA0B;;GAE1B,oBAAC;IAAQ,cAAa;IAAI,QAAO;KAA+B;GAChE,oBAAC;IACC,MAAK;IACL,IAAG;IACH,KAAI;IACJ,QAAO;KACE;GACX,oBAAC;IACC,cAAa;IACb,QAAO;KACS;;GACX,GACJ;EACH"}

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

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