npm - @intlayer/design-system - Versions diffs - 6.1.5 → 6.1.6-canary.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (301) hide show

package/dist/components/Navbar/useNavigation.mjs CHANGED Viewed

@@ -49,7 +49,14 @@ const useNavActions = () => {
       onClick?.();
     }
   };
-  return { activeSection, onClickLogo, onClickSection };
+  return {
+    /** Currently active section ID, null if no section is active */
+    activeSection,
+    /** Handler for logo click interactions */
+    onClickLogo,
+    /** Handler for section navigation clicks */
+    onClickSection
+  };
 };
 export {
   useNavActions

package/dist/components/Navbar/useNavigation.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useNavigation.mjs","sources":["../../../src/components/Navbar/useNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\ninterface SectionData {\n id: string;\n offsetTop: number;\n offsetHeight: number;\n}\n\nexport const useNavActions = () => {\n const [activeSection, setActiveSection] = useState<string \| null>(null);\n\n const detectActiveSection = () => {\n const scrollY = window.scrollY;\n const sections = document.querySelectorAll('section');\n const sectionsData: SectionData[] = [];\n\n sections.forEach((section) =>\n sectionsData.push({\n id: section.id,\n offsetTop: section.offsetTop,\n offsetHeight: section.offsetHeight,\n })\n );\n\n const currentSection = sectionsData.find(\n (section) =>\n section.offsetTop <= scrollY + window.screen.height / 4 &&\n section.offsetTop + section.offsetHeight >\n scrollY + window.screen.height / 4\n );\n\n if (currentSection) {\n setActiveSection(currentSection.id);\n }\n };\n\n useEffect(() => {\n window.addEventListener('scroll', detectActiveSection, { passive: true });\n\n return () => {\n window.removeEventListener('scroll', detectActiveSection);\n };\n }, []);\n\n const onClickLogo = (onClick: (url: string) => void) => {\n setActiveSection(null);\n\n if (window.location.pathname === '/') {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } else {\n onClick('/');\n }\n };\n\n const onClickSection = (\n sectionId: string,\n url?: string,\n onClick?: () => void\n ) => {\n setActiveSection(sectionId);\n\n if (window.location.pathname === url) {\n const sectionEl = document.getElementById(sectionId);\n\n if (sectionEl) {\n sectionEl.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'nearest',\n });\n }\n } else {\n onClick?.();\n }\n };\n\n return { ~~activeSection~~, onClickLogo, onClickSection };\n};\n"],"names":[],"mappings":";;~~AAUO~~,MAAM,gBAAgB,MAAM;~~AACjC~~,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;~~AAEtE~~,QAAM,sBAAsB,MAAM;AAChC,UAAM,UAAU,OAAO;AACvB,UAAM,WAAW,SAAS,iBAAiB,SAAS;AACpD,UAAM,eAA8B,CAAA;~~AAEpC~~,aAAS;AAAA,MAAQ,CAAC,YAChB,aAAa,KAAK;AAAA,QAChB,IAAI,QAAQ;AAAA,QACZ,WAAW,QAAQ;AAAA,QACnB,cAAc,QAAQ;AAAA,MAAA,CACvB;AAAA,IAAA;~~AAGH~~,UAAM,iBAAiB,aAAa;AAAA,MAClC,CAAC,YACC,QAAQ,aAAa,UAAU,OAAO,OAAO,SAAS,KACtD,QAAQ,YAAY,QAAQ,eAC1B,UAAU,OAAO,OAAO,SAAS;AAAA,IAAA;AAGvC,QAAI,gBAAgB;AAClB,uBAAiB,eAAe,EAAE;AAAA,IACpC;AAAA,EACF;~~AAEA~~,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,MAAM;AAExE,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,mBAAmB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAA,CAAE;~~AAEL~~,QAAM,cAAc,CAAC,YAAmC;AACtD,qBAAiB,IAAI;AAErB,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,aAAO,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAAA,IAChD,OAAO;AACL,cAAQ,GAAG;AAAA,IACb;AAAA,EACF;~~AAEA~~,QAAM,iBAAiB,CACrB,WACA,KACA,YACG;AACH,qBAAiB,SAAS;~~AAE1B~~,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,YAAM,YAAY,SAAS,eAAe,SAAS;AAEnD,UAAI,WAAW;AACb,kBAAU,eAAe;AAAA,UACvB,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA,CACT;AAAA,MACH;AAAA,IACF,OAAO;~~AACL~~,gBAAA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,~~EAAE~~,~~eAAe~~,~~aAAa~~,~~eAAA~~;~~AACvC~~;"}
1	+ {"version":3,"file":"useNavigation.mjs","sources":["../../../src/components/Navbar/useNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/*\n Interface describing section data used for scroll detection\n /\ninterface SectionData {\n /* Unique identifier of the section element /\n id: string;\n /* Distance from top of document to section start /\n offsetTop: number;\n /* Height of the section element /\n offsetHeight: number;\n}\n\n/\n Navigation Actions Hook\n \n A comprehensive hook for managing navigation interactions and scroll-based section detection.\n * Provides automatic active section detection based on scroll position and handles smooth\n * scrolling navigation behaviors.\n \n Features:\n * - Automatic active section detection based on scroll position\n * - Smooth scrolling to sections within the same page\n * - Logo click handling with home navigation\n * - Section click handling with conditional scrolling vs navigation\n * - Passive scroll event listeners for optimal performance\n * - Viewport-aware active section calculation (using screen height / 4 offset)\n \n Active Section Detection:\n * - Monitors all `<section>` elements on the page\n * - Calculates which section is currently in the \"active\" zone\n * - Active zone is defined as the top 25% of the viewport\n * - Updates activeSection state as user scrolls\n \n Navigation Behaviors:\n * - Logo click: Scrolls to top if on home page, navigates to home if on other pages\n * - Section click: Smooth scrolls if on same page, executes callback if different page\n * - All scrolling uses smooth behavior for better UX\n \n @example\n * Basic usage in navigation component:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n \n // In navigation items\n * const navItems = sections.map(section => (\n * <TabSelectorItem\n * key={section.id}\n * isActive={activeSection === section.id}\n * onClick={() => onClickSection(section.id, section.url, section.onClick)}\n * >\n * {section.label}\n * </TabSelectorItem>\n * ));\n \n // In logo\n * <Logo onClick={() => onClickLogo(navigate)} />\n * ```\n \n @example\n * Advanced usage with routing:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n * const navigate = useNavigate();\n \n const handleLogoClick = () => {\n * onClickLogo((url) => {\n * navigate(url);\n * // Additional logic like analytics\n * trackEvent('logo_click');\n * });\n * };\n \n const handleSectionClick = (sectionId: string) => {\n * onClickSection(\n * sectionId,\n * `/page#${sectionId}`,\n * () => {\n * navigate(`/page#${sectionId}`);\n * trackEvent('section_navigation', { sectionId });\n * }\n * );\n * };\n * ```\n \n Performance Considerations:\n * - Uses passive scroll event listeners to prevent blocking\n * - Automatically cleans up event listeners on unmount\n * - Efficiently queries DOM elements using native selectors\n * - Calculates section positions dynamically for accuracy\n \n @returns Object containing navigation state and action handlers\n /\nexport const useNavActions = () => {\n /* Currently active section ID based on scroll position /\n const [activeSection, setActiveSection] = useState<string \| null>(null);\n\n /\n Detects which section is currently active based on scroll position\n * Uses viewport-aware calculation to determine active section\n /\n const detectActiveSection = () => {\n const scrollY = window.scrollY;\n const sections = document.querySelectorAll('section');\n const sectionsData: SectionData[] = [];\n\n // Collect position data for all sections\n sections.forEach((section) =>\n sectionsData.push({\n id: section.id,\n offsetTop: section.offsetTop,\n offsetHeight: section.offsetHeight,\n })\n );\n\n // Find section that intersects with the active zone (top 25% of viewport)\n const currentSection = sectionsData.find(\n (section) =>\n section.offsetTop <= scrollY + window.screen.height / 4 &&\n section.offsetTop + section.offsetHeight >\n scrollY + window.screen.height / 4\n );\n\n if (currentSection) {\n setActiveSection(currentSection.id);\n }\n };\n\n // Set up scroll listener for active section detection\n useEffect(() => {\n window.addEventListener('scroll', detectActiveSection, { passive: true });\n\n return () => {\n window.removeEventListener('scroll', detectActiveSection);\n };\n }, []);\n\n /\n Handles logo click behavior\n * Scrolls to top if on home page, navigates to home if on other pages\n \n @param onClick - Callback function to handle navigation (e.g., router.push)\n /\n const onClickLogo = (onClick: (url: string) => void) => {\n setActiveSection(null);\n\n if (window.location.pathname === '/') {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } else {\n onClick('/');\n }\n };\n\n /\n Handles section navigation click behavior\n * Smooth scrolls if on same page, executes callback if different page\n \n @param sectionId - ID of the target section element\n * @param url - URL of the page containing the section (optional)\n * @param onClick - Callback function to handle navigation (optional)\n /\n const onClickSection = (\n sectionId: string,\n url?: string,\n onClick?: () => void\n ) => {\n setActiveSection(sectionId);\n\n // If on the same page, scroll to section\n if (window.location.pathname === url) {\n const sectionEl = document.getElementById(sectionId);\n\n if (sectionEl) {\n sectionEl.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'nearest',\n });\n }\n } else {\n // If on different page, execute callback (typically navigation)\n onClick?.();\n }\n };\n\n return {\n /* Currently active section ID, null if no section is active /\n activeSection,\n /* Handler for logo click interactions /\n onClickLogo,\n /* Handler for section navigation clicks */\n onClickSection,\n };\n};\n"],"names":[],"mappings":";;AAgGO,MAAM,gBAAgB,MAAM;AAEjC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AAMtE,QAAM,sBAAsB,MAAM;AAChC,UAAM,UAAU,OAAO;AACvB,UAAM,WAAW,SAAS,iBAAiB,SAAS;AACpD,UAAM,eAA8B,CAAA;AAGpC,aAAS;AAAA,MAAQ,CAAC,YAChB,aAAa,KAAK;AAAA,QAChB,IAAI,QAAQ;AAAA,QACZ,WAAW,QAAQ;AAAA,QACnB,cAAc,QAAQ;AAAA,MAAA,CACvB;AAAA,IAAA;AAIH,UAAM,iBAAiB,aAAa;AAAA,MAClC,CAAC,YACC,QAAQ,aAAa,UAAU,OAAO,OAAO,SAAS,KACtD,QAAQ,YAAY,QAAQ,eAC1B,UAAU,OAAO,OAAO,SAAS;AAAA,IAAA;AAGvC,QAAI,gBAAgB;AAClB,uBAAiB,eAAe,EAAE;AAAA,IACpC;AAAA,EACF;AAGA,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,MAAM;AAExE,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,mBAAmB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAA,CAAE;AAQL,QAAM,cAAc,CAAC,YAAmC;AACtD,qBAAiB,IAAI;AAErB,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,aAAO,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAAA,IAChD,OAAO;AACL,cAAQ,GAAG;AAAA,IACb;AAAA,EACF;AAUA,QAAM,iBAAiB,CACrB,WACA,KACA,YACG;AACH,qBAAiB,SAAS;AAG1B,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,YAAM,YAAY,SAAS,eAAe,SAAS;AAEnD,UAAI,WAAW;AACb,kBAAU,eAAe;AAAA,UACvB,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA,CACT;AAAA,MACH;AAAA,IACF,OAAO;AAEL,gBAAA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAEJ;"}

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

	@@ -1 +1 @@
1	- {"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\ntype DotPatternProps = {\n width?: number;\n height?: number;\n x?: number;\n y?: number;\n cx?: number;\n cy?: number;\n cr?: number;\n} & SVGProps<SVGSVGElement>;\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":";;;;;~~AAcO~~,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;;"}
1	+ {"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 CHANGED Viewed

@@ -1,13 +1,114 @@
 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAE5B,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAsC1C,CAAC"}
1	+ {"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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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\ntype DotPatternProps = {\n width?: number;\n height?: number;\n x?: number;\n y?: number;\n cx?: number;\n cy?: number;\n cr?: number;\n} & SVGProps<SVGSVGElement>;\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":";;;~~AAcO~~,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;"}
1	+ {"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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridPattern.cjs","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":["jsxs","cn","jsx","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,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;;"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;;;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 CHANGED Viewed

	@@ -1 +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;"}
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\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 CHANGED Viewed

	@@ -1 +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;;"}
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\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;;;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 CHANGED Viewed

	@@ -1 +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;"}
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\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 CHANGED Viewed

@@ -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,