@arolariu/components/dist/cjs/components/ui/dot-background.cjs.map

🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

{"version":3,"file":"components\\ui\\dot-background.cjs","sources":["webpack://@arolariu/components/webpack/runtime/define_property_getters","webpack://@arolariu/components/webpack/runtime/has_own_property","webpack://@arolariu/components/webpack/runtime/make_namespace_object","webpack://@arolariu/components/./src/components/ui/dot-background.tsx"],"sourcesContent":["__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\n\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"motion/react\";\nimport React, { useEffect, useId, useRef, useState } from \"react\";\n\n/**\n *  DotBackground Component Props\n *\n * @param {number} [width=16] - The horizontal spacing between dots\n * @param {number} [height=16] - The vertical spacing between dots\n * @param {number} [x=0] - The x-offset of the entire pattern\n * @param {number} [y=0] - The y-offset of the entire pattern\n * @param {number} [cx=1] - The x-offset of individual dots\n * @param {number} [cy=1] - The y-offset of individual dots\n * @param {number} [cr=1] - The radius of each dot\n * @param {string} [className] - Additional CSS classes to apply to the SVG container\n * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect\n */\ninterface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  cx?: number;\n  cy?: number;\n  cr?: number;\n  className?: string;\n  glow?: boolean;\n  [key: string]: unknown;\n}\n\n/**\n * DotBackground Component\n *\n * A React component that creates an animated or static dot pattern background using SVG.\n * The pattern automatically adjusts to fill its container and can optionally display glowing dots.\n *\n * @component\n *\n * @see DotBackgroundProps for the props interface.\n *\n * @example\n * // Basic usage\n * <DotBackground />\n *\n * // With glowing effect and custom spacing\n * <DotBackground\n *   width={20}\n *   height={20}\n *   glow={true}\n *   className=\"opacity-50\"\n * />\n *\n * @notes\n * - The component is client-side only (\"use client\")\n * - Automatically responds to container size changes\n * - When glow is enabled, dots will animate with random delays and durations\n * - Uses Motion for animations\n * - Dots color can be controlled via the text color utility classes\n */\n\nexport function DotBackground({\n  width = 16,\n  height = 16,\n  x = 0,\n  y = 0,\n  cx = 1,\n  cy = 1,\n  cr = 1,\n  className,\n  glow = false,\n  ...props\n}: DotBackgroundProps) {\n  const id = useId();\n  const containerRef = useRef<SVGSVGElement>(null);\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n\n  useEffect(() => {\n    const updateDimensions = () => {\n      if (containerRef.current) {\n        const { width, height } = containerRef.current.getBoundingClientRect();\n        setDimensions({ width, height });\n      }\n    };\n\n    updateDimensions();\n    window.addEventListener(\"resize\", updateDimensions);\n    return () => window.removeEventListener(\"resize\", updateDimensions);\n  }, []);\n\n  const dots = Array.from(\n    {\n      length:\n        Math.ceil(dimensions.width / width) *\n        Math.ceil(dimensions.height / height),\n    },\n    (_, i) => {\n      const col = i % Math.ceil(dimensions.width / width);\n      const row = Math.floor(i / Math.ceil(dimensions.width / width));\n      return {\n        x: col * width + cx,\n        y: row * height + cy,\n        delay: Math.random() * 5,\n        duration: Math.random() * 3 + 2,\n      };\n    },\n  );\n\n  return (\n    <svg\n      ref={containerRef}\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 h-full w-full\",\n        className,\n      )}\n      {...props}\n    >\n      <defs>\n        <radialGradient id={`${id}-gradient`}>\n          <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"1\" />\n          <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {dots.map((dot, index) => (\n        <motion.circle\n          key={`${dot.x}-${dot.y}`}\n          cx={dot.x}\n          cy={dot.y}\n          r={cr}\n          fill={glow ? `url(#${id}-gradient)` : \"currentColor\"}\n          className=\"text-neutral-400/80\"\n          initial={glow ? { opacity: 0.4, scale: 1 } : {}}\n          animate={\n            glow\n              ? {\n                  opacity: [0.4, 1, 0.4],\n                  scale: [1, 1.5, 1],\n                }\n              : {}\n          }\n          transition={\n            glow\n              ? {\n                  duration: dot.duration,\n                  repeat: Infinity,\n                  repeatType: \"reverse\",\n                  delay: dot.delay,\n                  ease: \"easeInOut\",\n                }\n              : {}\n          }\n        />\n      ))}\n    </svg>\n  );\n}\n"],"names":["__webpack_require__","definition","key","Object","obj","prop","Symbol","DotBackground","width","height","x","y","cx","cy","cr","className","glow","props","id","useId","containerRef","useRef","dimensions","setDimensions","useState","useEffect","updateDimensions","window","dots","Array","Math","_","i","col","row","cn","dot","index","motion","Infinity"],"mappings":";;;;IAAAA,oBAAoB,CAAC,GAAG,CAAC,UAASC;QACjC,IAAI,IAAIC,OAAOD,WACR,IAAGD,oBAAoB,CAAC,CAACC,YAAYC,QAAQ,CAACF,oBAAoB,CAAC,CAAC,UAASE,MACzEC,OAAO,cAAc,CAAC,UAASD,KAAK;YAAE,YAAY;YAAM,KAAKD,UAAU,CAACC,IAAI;QAAC;IAGzF;;;ICNAF,oBAAoB,CAAC,GAAG,CAACI,KAAKC,OAAUF,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAACC,KAAKC;;;ICClFL,oBAAoB,CAAC,GAAG,CAAC;QACxB,IAAG,sBAAOM,UAA0BA,OAAO,WAAW,EACrDH,OAAO,cAAc,CAAC,UAASG,OAAO,WAAW,EAAE;YAAE,OAAO;QAAS;QAEtEH,OAAO,cAAc,CAAC,UAAS,cAAc;YAAE,OAAO;QAAK;IAC5D;;;;;;;;;;;ACwDO,SAASI,cAAc,EAC5BC,QAAQ,EAAE,EACVC,SAAS,EAAE,EACXC,IAAI,CAAC,EACLC,IAAI,CAAC,EACLC,KAAK,CAAC,EACNC,KAAK,CAAC,EACNC,KAAK,CAAC,EACNC,SAAS,EACTC,OAAO,KAAK,EACZ,GAAGC,OACgB;IACnB,MAAMC,KAAKC,IAAAA,+BAAAA,KAAAA;IACX,MAAMC,eAAeC,IAAAA,+BAAAA,MAAAA,EAAsB;IAC3C,MAAM,CAACC,YAAYC,cAAc,GAAGC,IAAAA,+BAAAA,QAAAA,EAAS;QAAE,OAAO;QAAG,QAAQ;IAAE;IAEnEC,IAAAA,+BAAAA,SAAAA,EAAU;QACR,MAAMC,mBAAmB;YACvB,IAAIN,aAAa,OAAO,EAAE;gBACxB,MAAM,EAAEZ,KAAK,EAAEC,MAAM,EAAE,GAAGW,aAAa,OAAO,CAAC,qBAAqB;gBACpEG,cAAc;oBAAEf;oBAAOC;gBAAO;YAChC;QACF;QAEAiB;QACAC,OAAO,gBAAgB,CAAC,UAAUD;QAClC,OAAO,IAAMC,OAAO,mBAAmB,CAAC,UAAUD;IACpD,GAAG,EAAE;IAEL,MAAME,OAAOC,MAAM,IAAI,CACrB;QACE,QACEC,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd,SAC7BsB,KAAK,IAAI,CAACR,WAAW,MAAM,GAAGb;IAClC,GACA,CAACsB,GAAGC;QACF,MAAMC,MAAMD,IAAIF,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd;QAC7C,MAAM0B,MAAMJ,KAAK,KAAK,CAACE,IAAIF,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd;QACxD,OAAO;YACL,GAAGyB,MAAMzB,QAAQI;YACjB,GAAGsB,MAAMzB,SAASI;YAClB,OAAOiB,IAAAA,KAAK,MAAM;YAClB,UAAUA,IAAAA,KAAK,MAAM,KAAS;QAChC;IACF;IAGF,OACE,WADF,GACE,sCAAC;QACC,KAAKV;QACL,eAAY;QACZ,WAAWe,IAAAA,0BAAAA,EAAAA,EACT,sDACApB;QAED,GAAGE,KAAK;;0BAET,qCAAC;0BACC,oDAAC;oBAAe,IAAI,GAAGC,GAAG,SAAS,CAAC;;sCAClC,qCAAC;4BAAK,QAAO;4BAAK,WAAU;4BAAe,aAAY;;sCACvD,qCAAC;4BAAK,QAAO;4BAAO,WAAU;4BAAe,aAAY;;;;;YAG5DU,KAAK,GAAG,CAAC,CAACQ,KAAKC,QACd,WADcA,GACd,qCAACC,sBAAAA,MAAAA,CAAAA,MAAa;oBAEZ,IAAIF,IAAI,CAAC;oBACT,IAAIA,IAAI,CAAC;oBACT,GAAGtB;oBACH,MAAME,OAAO,CAAC,KAAK,EAAEE,GAAG,UAAU,CAAC,GAAG;oBACtC,WAAU;oBACV,SAASF,OAAO;wBAAE,SAAS;wBAAK,OAAO;oBAAE,IAAI,CAAC;oBAC9C,SACEA,OACI;wBACE,SAAS;4BAAC;4BAAK;4BAAG;yBAAI;wBACtB,OAAO;4BAAC;4BAAG;4BAAK;yBAAE;oBACpB,IACA,CAAC;oBAEP,YACEA,OACI;wBACE,UAAUoB,IAAI,QAAQ;wBACtB,QAAQG;wBACR,YAAY;wBACZ,OAAOH,IAAI,KAAK;wBAChB,MAAM;oBACR,IACA,CAAC;mBAxBF,GAAGA,IAAI,CAAC,CAAC,CAAC,EAAEA,IAAI,CAAC,EAAE;;;AA8BlC"}