@arolariu/components 0.5.0 → 1.0.0

package/dist/components/ui/field_module.css

@@ -0,0 +1,185 @@
+.fieldSet-ZsYf1y {
+  gap: var(--ac-space-6);
+  flex-direction: column;
+  display: flex;
+}
+
+.legend-cxaotK {
+  color: var(--ac-foreground);
+  margin-bottom: var(--ac-space-3);
+  font-weight: 600;
+}
+
+.legendDefault-za5qgw {
+  font-size: var(--ac-text-base);
+}
+
+.legendLabel-dxy8Ra {
+  font-size: var(--ac-text-sm);
+}
+
+.group-jMAZ6P {
+  gap: calc(var(--ac-space-6) + var(--ac-space-1));
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.group-jMAZ6P > .group-jMAZ6P {
+  gap: var(--ac-space-4);
+}
+
+.field-xkpXUG {
+  gap: var(--ac-space-3);
+  width: 100%;
+  display: flex;
+}
+
+.field-xkpXUG[data-invalid="true"] {
+  color: var(--ac-destructive);
+}
+
+.vertical-teIgkd {
+  flex-direction: column;
+}
+
+.vertical-teIgkd > * {
+  width: 100%;
+}
+
+.horizontal-xEGT3H {
+  flex-direction: row;
+  align-items: center;
+}
+
+.horizontal-xEGT3H > [data-slot="field-label"] {
+  flex: none;
+}
+
+.responsive-KhsIcd {
+  flex-direction: column;
+}
+
+.responsive-KhsIcd > * {
+  width: 100%;
+}
+
+@media (width >= 768px) {
+  .responsive-KhsIcd {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .responsive-KhsIcd > * {
+    width: auto;
+  }
+
+  .responsive-KhsIcd > [data-slot="field-label"] {
+    flex: none;
+    min-width: 10rem;
+  }
+}
+
+.content-wtS4mt {
+  flex-direction: column;
+  flex: auto;
+  min-width: 0;
+}
+
+.content-wtS4mt, .label-aBLDfE {
+  gap: var(--ac-space-2);
+  line-height: 1.4;
+  display: flex;
+}
+
+.label-aBLDfE {
+  color: var(--ac-foreground);
+  cursor: default;
+  font-size: var(--ac-text-sm);
+  -webkit-user-select: none;
+  user-select: none;
+  width: fit-content;
+  font-weight: 500;
+}
+
+.field-xkpXUG[data-disabled="true"] .label-aBLDfE {
+  opacity: .5;
+}
+
+.label-aBLDfE:has([data-slot="field"]) {
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-md);
+  padding: var(--ac-space-4);
+  flex-direction: column;
+  width: 100%;
+}
+
+.title-yyNFE9 {
+  color: var(--ac-foreground);
+  align-items: center;
+  gap: var(--ac-space-2);
+  width: fit-content;
+  font-weight: 500;
+  line-height: 1.4;
+  display: flex;
+}
+
+.description-wbkoMV, .title-yyNFE9 {
+  font-size: var(--ac-text-sm);
+}
+
+.description-wbkoMV {
+  color: var(--ac-muted-foreground);
+  line-height: 1.5;
+}
+
+.description-wbkoMV a {
+  color: inherit;
+  text-underline-offset: 4px;
+  text-decoration: underline;
+}
+
+@media (hover: hover) {
+  .description-wbkoMV a:hover {
+    color: var(--ac-foreground);
+  }
+}
+
+.separator-ZduEsC {
+  font-size: var(--ac-text-sm);
+  margin: calc(var(--ac-space-2)*-1) 0;
+  min-height: 1.25rem;
+  position: relative;
+}
+
+.separatorLine-cueT3n {
+  position: absolute;
+  inset: 50% 0 auto;
+  transform: translateY(-50%);
+}
+
+.separatorContent-naPPmD {
+  background-color: var(--ac-background);
+  color: var(--ac-muted-foreground);
+  padding: 0 var(--ac-space-2);
+  width: fit-content;
+  margin: 0 auto;
+  display: block;
+  position: relative;
+}
+
+.error-zfXC1o {
+  color: var(--ac-destructive);
+  font-size: var(--ac-text-sm);
+}
+
+.errorList-SVbSW8 {
+  gap: var(--ac-space-1);
+  padding-left: var(--ac-space-4);
+  flex-direction: column;
+  margin: 0;
+  display: flex;
+}
+
+
+/*# sourceMappingURL=field_module.css.map */

package/dist/components/ui/field_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/field.module.css","webpack://./src/components/ui/field.module.css"],"names":[],"mappings":"AADA;ECEE,sBAAsB;EACtB,sBAAsB;EACtB,aAAa;AACf;;AAEA;EACE,2BAA2B;EAC3B,gCAAgC;EAChC,gBAAgB;AAClB;;AAEA;EACE,8BAA8B;AAChC;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;EACE,gDAAgD;EAChD,sBAAsB;EACtB,WAAW;EACX,aAAa;AACf;;AAEA;EACE,sBAAsB;AACxB;;AAEA;EACE,sBAAsB;EACtB,WAAW;EACX,aAAa;AACf;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;EACE,sBAAsB;AACxB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,mBAAmB;EACnB,mBAAmB;AACrB;;AAEA;EACE,UAAU;AACZ;;AAEA;EACE,sBAAsB;AACxB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE;IACE,mBAAmB;IACnB,mBAAmB;EACrB;;EAEA;IACE,WAAW;EACb;;EAEA;IACE,UAAU;IACV,gBAAgB;EAClB;AACF;;AAEA;EACE,sBAAsB;EACtB,UAAU;EACV,YAAY;AACd;;AAEA;EACE,sBAAsB;EACtB,gBAAgB;EAChB,aAAa;AACf;;AAEA;EACE,2BAA2B;EAC3B,eAAe;EACf,4BAA4B;EAC5B,yBAAyB;EACzB,iBAAiB;EACjB,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,kCAAkC;EAClC,kCAAkC;EAClC,0BAA0B;EAC1B,sBAAsB;EACtB,WAAW;AACb;;AAEA;EACE,2BAA2B;EAC3B,mBAAmB;EACnB,sBAAsB;EACtB,kBAAkB;EAClB,gBAAgB;EAChB,gBAAgB;EAChB,aAAa;AACf;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;EACE,iCAAiC;EACjC,gBAAgB;AAClB;;AAEA;EACE,cAAc;EACd,0BAA0B;EAC1B,0BAA0B;AAC5B;;AAEA;EACE;IACE,2BAA2B;EAC7B;AACF;;AAEA;EACE,4BAA4B;EAC5B,oCAAoC;EACpC,mBAAmB;EACnB,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;EAClB,iBAAiB;EACjB,2BAA2B;AAC7B;;AAEA;EACE,sCAAsC;EACtC,iCAAiC;EACjC,4BAA4B;EAC5B,kBAAkB;EAClB,cAAc;EACd,cAAc;EACd,kBAAkB;AACpB;;AAEA;EACE,4BAA4B;EAC5B,4BAA4B;AAC9B;;AAEA;EACE,sBAAsB;EACtB,+BAA+B;EAC/B,sBAAsB;EACtB,SAAS;EACT,aAAa;AACf","sourcesContent":[".fieldSet{display:flex;flex-direction:column;gap:var(--ac-space-6)}.legend{color:var(--ac-foreground);font-weight:600;margin-bottom:var(--ac-space-3)}.legendDefault{font-size:var(--ac-text-base)}.legendLabel{font-size:var(--ac-text-sm)}.group{display:flex;flex-direction:column;gap:calc(var(--ac-space-6) + var(--ac-space-1));width:100%}.group>.group{gap:var(--ac-space-4)}.field{display:flex;gap:var(--ac-space-3);width:100%}.field[data-invalid=true]{color:var(--ac-destructive)}.vertical{flex-direction:column}.vertical>*{width:100%}.horizontal{align-items:center;flex-direction:row}.horizontal>[data-slot=field-label]{flex:0 0 auto}.responsive{flex-direction:column}.responsive>*{width:100%}@media (min-width:768px){.responsive{align-items:center;flex-direction:row}.responsive>*{width:auto}.responsive>[data-slot=field-label]{flex:0 0 auto;min-width:10rem}}.content{flex:1 1 auto;flex-direction:column;min-width:0}.content,.label{display:flex;gap:var(--ac-space-2);line-height:1.4}.label{color:var(--ac-foreground);cursor:default;font-size:var(--ac-text-sm);font-weight:500;user-select:none;width:fit-content}.field[data-disabled=true] .label{opacity:.5}.label:has([data-slot=field]){border:1px solid var(--ac-border);border-radius:var(--ac-radius-md);flex-direction:column;padding:var(--ac-space-4);width:100%}.title{align-items:center;color:var(--ac-foreground);display:flex;font-weight:500;gap:var(--ac-space-2);line-height:1.4;width:fit-content}.description,.title{font-size:var(--ac-text-sm)}.description{color:var(--ac-muted-foreground);line-height:1.5}.description a{color:inherit;text-decoration:underline;text-underline-offset:4px}@media (hover:hover){.description a:hover{color:var(--ac-foreground)}}.separator{font-size:var(--ac-text-sm);margin:calc(var(--ac-space-2)*-1) 0;min-height:1.25rem;position:relative}.separatorLine{inset:50% 0 auto;position:absolute;transform:translateY(-50%)}.separatorContent{background-color:var(--ac-background);color:var(--ac-muted-foreground);display:block;margin:0 auto;padding:0 var(--ac-space-2);position:relative;width:fit-content}.error{color:var(--ac-destructive);font-size:var(--ac-text-sm)}.errorList{display:flex;flex-direction:column;gap:var(--ac-space-1);margin:0;padding-left:var(--ac-space-4)}",".fieldSet {\n  gap: var(--ac-space-6);\n  flex-direction: column;\n  display: flex;\n}\n\n.legend {\n  color: var(--ac-foreground);\n  margin-bottom: var(--ac-space-3);\n  font-weight: 600;\n}\n\n.legendDefault {\n  font-size: var(--ac-text-base);\n}\n\n.legendLabel {\n  font-size: var(--ac-text-sm);\n}\n\n.group {\n  gap: calc(var(--ac-space-6) + var(--ac-space-1));\n  flex-direction: column;\n  width: 100%;\n  display: flex;\n}\n\n.group > .group {\n  gap: var(--ac-space-4);\n}\n\n.field {\n  gap: var(--ac-space-3);\n  width: 100%;\n  display: flex;\n}\n\n.field[data-invalid=\"true\"] {\n  color: var(--ac-destructive);\n}\n\n.vertical {\n  flex-direction: column;\n}\n\n.vertical > * {\n  width: 100%;\n}\n\n.horizontal {\n  flex-direction: row;\n  align-items: center;\n}\n\n.horizontal > [data-slot=\"field-label\"] {\n  flex: none;\n}\n\n.responsive {\n  flex-direction: column;\n}\n\n.responsive > * {\n  width: 100%;\n}\n\n@media (width >= 768px) {\n  .responsive {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .responsive > * {\n    width: auto;\n  }\n\n  .responsive > [data-slot=\"field-label\"] {\n    flex: none;\n    min-width: 10rem;\n  }\n}\n\n.content {\n  flex-direction: column;\n  flex: auto;\n  min-width: 0;\n}\n\n.content, .label {\n  gap: var(--ac-space-2);\n  line-height: 1.4;\n  display: flex;\n}\n\n.label {\n  color: var(--ac-foreground);\n  cursor: default;\n  font-size: var(--ac-text-sm);\n  -webkit-user-select: none;\n  user-select: none;\n  width: fit-content;\n  font-weight: 500;\n}\n\n.field[data-disabled=\"true\"] .label {\n  opacity: .5;\n}\n\n.label:has([data-slot=\"field\"]) {\n  border: 1px solid var(--ac-border);\n  border-radius: var(--ac-radius-md);\n  padding: var(--ac-space-4);\n  flex-direction: column;\n  width: 100%;\n}\n\n.title {\n  color: var(--ac-foreground);\n  align-items: center;\n  gap: var(--ac-space-2);\n  width: fit-content;\n  font-weight: 500;\n  line-height: 1.4;\n  display: flex;\n}\n\n.description, .title {\n  font-size: var(--ac-text-sm);\n}\n\n.description {\n  color: var(--ac-muted-foreground);\n  line-height: 1.5;\n}\n\n.description a {\n  color: inherit;\n  text-underline-offset: 4px;\n  text-decoration: underline;\n}\n\n@media (hover: hover) {\n  .description a:hover {\n    color: var(--ac-foreground);\n  }\n}\n\n.separator {\n  font-size: var(--ac-text-sm);\n  margin: calc(var(--ac-space-2)*-1) 0;\n  min-height: 1.25rem;\n  position: relative;\n}\n\n.separatorLine {\n  position: absolute;\n  inset: 50% 0 auto;\n  transform: translateY(-50%);\n}\n\n.separatorContent {\n  background-color: var(--ac-background);\n  color: var(--ac-muted-foreground);\n  padding: 0 var(--ac-space-2);\n  width: fit-content;\n  margin: 0 auto;\n  display: block;\n  position: relative;\n}\n\n.error {\n  color: var(--ac-destructive);\n  font-size: var(--ac-text-sm);\n}\n\n.errorList {\n  gap: var(--ac-space-1);\n  padding-left: var(--ac-space-4);\n  flex-direction: column;\n  margin: 0;\n  display: flex;\n}\n"],"sourceRoot":""}

package/dist/components/ui/fireworks-background.d.ts

@@ -1,25 +1,49 @@
 import * as React from "react";
-interface FireworksBackgroundProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+/** Props accepted by {@link FireworksBackground}. */
+export interface FireworksBackgroundProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+    /** HTML attributes forwarded to the internal `<canvas>` element. @default undefined */
     canvasProps?: React.HTMLAttributes<HTMLCanvasElement>;
+    /** Relative launch frequency multiplier for automatic fireworks. @default 1 */
     population?: number;
-    color?: string | string[];
+    /** Fixed color or palette used for generated fireworks and particles. @default undefined */
+    color?: string | ReadonlyArray<string>;
+    /** Launch velocity or range used for ascending fireworks. @default {min: 4, max: 8} */
     fireworkSpeed?: {
         min: number;
         max: number;
     } | number;
+    /** Stroke width or range used for the ascending firework trail. @default {min: 2, max: 5} */
     fireworkSize?: {
         min: number;
         max: number;
     } | number;
+    /** Velocity or range used for explosion particles. @default {min: 2, max: 7} */
     particleSpeed?: {
         min: number;
         max: number;
     } | number;
+    /** Size or range used for explosion particles. @default {min: 1, max: 5} */
     particleSize?: {
         min: number;
         max: number;
     } | number;
 }
+/**
+ * Renders an auto-launching fireworks display inside a clickable background canvas.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<div>` element containing a `<canvas>`
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <FireworksBackground population={2} />
+ * ```
+ *
+ * @see {@link FireworksBackgroundProps} for available props
+ */
 declare const FireworksBackground: React.ForwardRefExoticComponent<FireworksBackgroundProps & React.RefAttributes<HTMLDivElement>>;
-export { FireworksBackground, type FireworksBackgroundProps };
+export { FireworksBackground };
 //# sourceMappingURL=fireworks-background.d.ts.map

package/dist/components/ui/fireworks-background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fireworks-background.d.ts","sourceRoot":"","sources":["../../../src/components/ui/fireworks-background.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyL/B,UAAU,wBAAyB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC5F,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,GAAG,MAAM,CAAC;IACpD,YAAY,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,GAAG,MAAM,CAAC;IACnD,aAAa,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,GAAG,MAAM,CAAC;IACpD,YAAY,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,GAAG,MAAM,CAAC;CACpD;AAED,QAAA,MAAM,mBAAmB,iGA2HxB,CAAC;AAIF,OAAO,EAAC,mBAAmB,EAAE,KAAK,wBAAwB,EAAC,CAAC"}
+{"version":3,"file":"fireworks-background.d.ts","sourceRoot":"","sources":["../../../src/components/ui/fireworks-background.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgM/B,qDAAqD;AACrD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACnG,uFAAuF;IACvF,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACtD,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACvC,uFAAuF;IACvF,aAAa,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,GAAG,MAAM,CAAC;IACpD,6FAA6F;IAC7F,YAAY,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,GAAG,MAAM,CAAC;IACnD,gFAAgF;IAChF,aAAa,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,GAAG,MAAM,CAAC;IACpD,4EAA4E;IAC5E,YAAY,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,GAAG,MAAM,CAAC;CACpD;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,mBAAmB,iGAkIxB,CAAC;AAIF,OAAO,EAAC,mBAAmB,EAAC,CAAC"}

package/dist/components/ui/fireworks-background.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { cn } from "../../lib/utilities.js";
+import fireworks_background_module from "./fireworks-background.module.js";
 const rand = (min, max)=>Math.random() * (max - min) + min;
 const randInt = (min, max)=>Math.floor(Math.random() * (max - min) + min);
 const randColor = ()=>`hsl(${randInt(0, 360)}, 100%, 50%)`;
@@ -80,9 +81,9 @@ const createFirework = (x, y, targetY, color, speed, size, particleSpeed, partic
             return true;
         },
         explode () {
-            const numParticles = randInt(50, 150);
+            const numberOfParticles = randInt(50, 150);
             const particles = [];
-            for(let i = 0; i < numParticles; i++){
+            for(let index = 0; index < numberOfParticles; index += 1){
                 const particleAngle = rand(0, 2 * Math.PI);
                 const localParticleSpeed = getValueByRange(particleSpeed);
                 const localParticleSize = getValueByRange(particleSize);
@@ -113,8 +114,9 @@ const getValueByRange = (range)=>{
     return rand(range.min, range.max);
 };
 const getColor = (color)=>{
-    if (Array.isArray(color)) return color[randInt(0, color.length)];
-    return color ?? randColor();
+    if (Array.isArray(color)) return color[randInt(0, color.length)] ?? randColor();
+    if ("string" == typeof color) return color;
+    return randColor();
 };
 const FireworksBackground = /*#__PURE__*/ forwardRef(({ className, canvasProps, population = 1, color, fireworkSpeed = {
     min: 4,
@@ -131,26 +133,27 @@ const FireworksBackground = /*#__PURE__*/ forwardRef(({ className, canvasProps,
 }, ...props }, ref)=>{
     const canvasRef = useRef(null);
     const containerRef = useRef(null);
-    useImperativeHandle(ref, ()=>containerRef.current);
+    useImperativeHandle(ref, ()=>containerRef.current, []);
     useEffect(()=>{
         const canvas = canvasRef.current;
         const container = containerRef.current;
         if (!canvas || !container) return;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-        let maxX = window.innerWidth;
-        let ratio = container.offsetHeight / container.offsetWidth;
+        const context = canvas.getContext("2d");
+        if (!context) return;
+        let maxX = globalThis.window.innerWidth;
+        let ratio = container.offsetHeight / Math.max(container.offsetWidth, 1);
         let maxY = maxX * ratio;
+        let launchTimeoutId = 0;
         canvas.width = maxX;
         canvas.height = maxY;
         const setCanvasSize = ()=>{
-            maxX = window.innerWidth;
-            ratio = container.offsetHeight / container.offsetWidth;
+            maxX = globalThis.window.innerWidth;
+            ratio = container.offsetHeight / Math.max(container.offsetWidth, 1);
             maxY = maxX * ratio;
             canvas.width = maxX;
             canvas.height = maxY;
         };
-        window.addEventListener("resize", setCanvasSize);
+        globalThis.window.addEventListener("resize", setCanvasSize);
         const explosions = [];
         const fireworks = [];
         const handleExplosion = (particles)=>{
@@ -165,57 +168,55 @@ const FireworksBackground = /*#__PURE__*/ forwardRef(({ className, canvasProps,
             const size = getValueByRange(fireworkSize);
             fireworks.push(createFirework(x, y, targetY, fireworkColor, speed, size, particleSpeed, particleSize, handleExplosion));
             const timeout = rand(300, 800) / population;
-            setTimeout(launchFirework, timeout);
+            launchTimeoutId = globalThis.window.setTimeout(launchFirework, timeout);
         };
         launchFirework();
-        let animationFrameId;
+        let animationFrameId = 0;
         const animate = ()=>{
-            ctx.clearRect(0, 0, maxX, maxY);
-            for(let i = fireworks.length - 1; i >= 0; i--){
-                const firework = fireworks[i];
-                if (firework.update()) firework.draw(ctx);
-                else fireworks.splice(i, 1);
+            context.clearRect(0, 0, maxX, maxY);
+            for(let index = fireworks.length - 1; index >= 0; index -= 1){
+                const firework = fireworks[index];
+                if (firework.update()) firework.draw(context);
+                else fireworks.splice(index, 1);
             }
-            for(let i = explosions.length - 1; i >= 0; i--){
-                const particle = explosions[i];
+            for(let index = explosions.length - 1; index >= 0; index -= 1){
+                const particle = explosions[index];
                 particle.update();
-                if (particle.isAlive()) particle.draw(ctx);
-                else explosions.splice(i, 1);
+                if (particle.isAlive()) particle.draw(context);
+                else explosions.splice(index, 1);
             }
-            animationFrameId = requestAnimationFrame(animate);
+            animationFrameId = globalThis.requestAnimationFrame(animate);
         };
         animate();
         const handleClick = (event)=>{
-            const x = event.clientX;
-            const y = maxY;
-            const targetY = event.clientY;
             const fireworkColor = getColor(color);
             const speed = getValueByRange(fireworkSpeed);
             const size = getValueByRange(fireworkSize);
-            fireworks.push(createFirework(x, y, targetY, fireworkColor, speed, size, particleSpeed, particleSize, handleExplosion));
+            fireworks.push(createFirework(event.clientX, maxY, event.clientY, fireworkColor, speed, size, particleSpeed, particleSize, handleExplosion));
         };
         container.addEventListener("click", handleClick);
         return ()=>{
-            window.removeEventListener("resize", setCanvasSize);
+            globalThis.window.removeEventListener("resize", setCanvasSize);
             container.removeEventListener("click", handleClick);
-            cancelAnimationFrame(animationFrameId);
+            globalThis.window.clearTimeout(launchTimeoutId);
+            globalThis.cancelAnimationFrame(animationFrameId);
         };
     }, [
-        population,
         color,
-        fireworkSpeed,
         fireworkSize,
+        fireworkSpeed,
+        particleSize,
         particleSpeed,
-        particleSize
+        population
     ]);
     return /*#__PURE__*/ jsx("div", {
         ref: containerRef,
-        className: cn("relative size-full overflow-hidden", className),
+        className: cn(fireworks_background_module.root, className),
         ...props,
         children: /*#__PURE__*/ jsx("canvas", {
             ...canvasProps,
             ref: canvasRef,
-            className: cn("absolute inset-0 size-full", canvasProps?.className)
+            className: cn(fireworks_background_module.canvas, canvasProps?.className)
         })
     });
 });

package/dist/components/ui/fireworks-background.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/fireworks-background.js","sources":["../../../src/components/ui/fireworks-background.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst rand = (min: number, max: number): number => Math.random() * (max - min) + min;\r\nconst randInt = (min: number, max: number): number => Math.floor(Math.random() * (max - min) + min);\r\nconst randColor = (): string => `hsl(${randInt(0, 360)}, 100%, 50%)`;\r\n\r\ninterface ParticleType {\r\n  x: number;\r\n  y: number;\r\n  color: string;\r\n  speed: number;\r\n  direction: number;\r\n  vx: number;\r\n  vy: number;\r\n  gravity: number;\r\n  friction: number;\r\n  alpha: number;\r\n  decay: number;\r\n  size: number;\r\n  update: () => void;\r\n  draw: (ctx: CanvasRenderingContext2D) => void;\r\n  isAlive: () => boolean;\r\n}\r\n\r\nconst createParticle = (\r\n  x: number,\r\n  y: number,\r\n  color: string,\r\n  speed: number,\r\n  direction: number,\r\n  gravity: number,\r\n  friction: number,\r\n  size: number,\r\n): ParticleType => {\r\n  const vx = Math.cos(direction) * speed;\r\n  const vy = Math.sin(direction) * speed;\r\n  const alpha = 1;\r\n  const decay = rand(0.005, 0.02);\r\n\r\n  return {\r\n    x,\r\n    y,\r\n    color,\r\n    speed,\r\n    direction,\r\n    vx,\r\n    vy,\r\n    gravity,\r\n    friction,\r\n    alpha,\r\n    decay,\r\n    size,\r\n    update() {\r\n      this.vx *= this.friction;\r\n      this.vy *= this.friction;\r\n      this.vy += this.gravity;\r\n      this.x += this.vx;\r\n      this.y += this.vy;\r\n      this.alpha -= this.decay;\r\n    },\r\n    draw(ctx: CanvasRenderingContext2D) {\r\n      ctx.save();\r\n      ctx.globalAlpha = this.alpha;\r\n      ctx.beginPath();\r\n      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n      ctx.fillStyle = this.color;\r\n      ctx.fill();\r\n      ctx.restore();\r\n    },\r\n    isAlive() {\r\n      return this.alpha > 0;\r\n    },\r\n  };\r\n};\r\n\r\ninterface FireworkType {\r\n  x: number;\r\n  y: number;\r\n  targetY: number;\r\n  color: string;\r\n  speed: number;\r\n  size: number;\r\n  angle: number;\r\n  vx: number;\r\n  vy: number;\r\n  trail: {x: number; y: number}[];\r\n  trailLength: number;\r\n  exploded: boolean;\r\n  update: () => boolean;\r\n  explode: () => void;\r\n  draw: (ctx: CanvasRenderingContext2D) => void;\r\n}\r\n\r\nconst createFirework = (\r\n  x: number,\r\n  y: number,\r\n  targetY: number,\r\n  color: string,\r\n  speed: number,\r\n  size: number,\r\n  particleSpeed: {min: number; max: number} | number,\r\n  particleSize: {min: number; max: number} | number,\r\n  onExplode: (particles: ParticleType[]) => void,\r\n): FireworkType => {\r\n  const angle = -Math.PI / 2 + rand(-0.3, 0.3);\r\n  const vx = Math.cos(angle) * speed;\r\n  const vy = Math.sin(angle) * speed;\r\n  const trail: {x: number; y: number}[] = [];\r\n  const trailLength = randInt(10, 25);\r\n\r\n  return {\r\n    x,\r\n    y,\r\n    targetY,\r\n    color,\r\n    speed,\r\n    size,\r\n    angle,\r\n    vx,\r\n    vy,\r\n    trail,\r\n    trailLength,\r\n    exploded: false,\r\n    update() {\r\n      this.trail.push({x: this.x, y: this.y});\r\n      if (this.trail.length > this.trailLength) {\r\n        this.trail.shift();\r\n      }\r\n      this.x += this.vx;\r\n      this.y += this.vy;\r\n      this.vy += 0.02;\r\n      if (this.vy >= 0 || this.y <= this.targetY) {\r\n        this.explode();\r\n        return false;\r\n      }\r\n      return true;\r\n    },\r\n    explode() {\r\n      const numParticles = randInt(50, 150);\r\n      const particles: ParticleType[] = [];\r\n      for (let i = 0; i < numParticles; i++) {\r\n        const particleAngle = rand(0, Math.PI * 2);\r\n        const localParticleSpeed = getValueByRange(particleSpeed);\r\n        const localParticleSize = getValueByRange(particleSize);\r\n        particles.push(createParticle(this.x, this.y, this.color, localParticleSpeed, particleAngle, 0.05, 0.98, localParticleSize));\r\n      }\r\n      onExplode(particles);\r\n    },\r\n    draw(ctx: CanvasRenderingContext2D) {\r\n      ctx.save();\r\n      ctx.beginPath();\r\n      if (this.trail.length > 1) {\r\n        ctx.moveTo(this.trail[0].x, this.trail[0].y);\r\n        for (const point of this.trail) {\r\n          ctx.lineTo(point.x, point.y);\r\n        }\r\n      } else {\r\n        ctx.moveTo(this.x, this.y);\r\n        ctx.lineTo(this.x, this.y);\r\n      }\r\n      ctx.strokeStyle = this.color;\r\n      ctx.lineWidth = this.size;\r\n      ctx.lineCap = \"round\";\r\n      ctx.stroke();\r\n      ctx.restore();\r\n    },\r\n  };\r\n};\r\n\r\nconst getValueByRange = (range: {min: number; max: number} | number): number => {\r\n  if (typeof range === \"number\") {\r\n    return range;\r\n  }\r\n  return rand(range.min, range.max);\r\n};\r\n\r\nconst getColor = (color: string | string[] | undefined): string => {\r\n  if (Array.isArray(color)) {\r\n    return color[randInt(0, color.length)];\r\n  }\r\n  return color ?? randColor();\r\n};\r\n\r\ninterface FireworksBackgroundProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"color\"> {\r\n  canvasProps?: React.HTMLAttributes<HTMLCanvasElement>;\r\n  population?: number;\r\n  color?: string | string[];\r\n  fireworkSpeed?: {min: number; max: number} | number;\r\n  fireworkSize?: {min: number; max: number} | number;\r\n  particleSpeed?: {min: number; max: number} | number;\r\n  particleSize?: {min: number; max: number} | number;\r\n}\r\n\r\nconst FireworksBackground = React.forwardRef<HTMLDivElement, FireworksBackgroundProps>(\r\n  (\r\n    {\r\n      className,\r\n      canvasProps,\r\n      population = 1,\r\n      color,\r\n      fireworkSpeed = {min: 4, max: 8},\r\n      fireworkSize = {min: 2, max: 5},\r\n      particleSpeed = {min: 2, max: 7},\r\n      particleSize = {min: 1, max: 5},\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const canvasRef = React.useRef<HTMLCanvasElement>(null);\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\r\n\r\n    React.useEffect(() => {\r\n      const canvas = canvasRef.current;\r\n      const container = containerRef.current;\r\n      if (!canvas || !container) return;\r\n      const ctx = canvas.getContext(\"2d\");\r\n      if (!ctx) return;\r\n\r\n      let maxX = window.innerWidth;\r\n      let ratio = container.offsetHeight / container.offsetWidth;\r\n      let maxY = maxX * ratio;\r\n      canvas.width = maxX;\r\n      canvas.height = maxY;\r\n\r\n      const setCanvasSize = () => {\r\n        maxX = window.innerWidth;\r\n        ratio = container.offsetHeight / container.offsetWidth;\r\n        maxY = maxX * ratio;\r\n        canvas.width = maxX;\r\n        canvas.height = maxY;\r\n      };\r\n      window.addEventListener(\"resize\", setCanvasSize);\r\n\r\n      const explosions: ParticleType[] = [];\r\n      const fireworks: FireworkType[] = [];\r\n\r\n      const handleExplosion = (particles: ParticleType[]) => {\r\n        explosions.push(...particles);\r\n      };\r\n\r\n      const launchFirework = () => {\r\n        const x = rand(maxX * 0.1, maxX * 0.9);\r\n        const y = maxY;\r\n        const targetY = rand(maxY * 0.1, maxY * 0.4);\r\n        const fireworkColor = getColor(color);\r\n        const speed = getValueByRange(fireworkSpeed);\r\n        const size = getValueByRange(fireworkSize);\r\n        fireworks.push(createFirework(x, y, targetY, fireworkColor, speed, size, particleSpeed, particleSize, handleExplosion));\r\n        const timeout = rand(300, 800) / population;\r\n        setTimeout(launchFirework, timeout);\r\n      };\r\n\r\n      launchFirework();\r\n\r\n      // eslint-disable-next-line init-declarations -- firework animation id\r\n      let animationFrameId: number;\r\n      const animate = () => {\r\n        ctx.clearRect(0, 0, maxX, maxY);\r\n\r\n        for (let i = fireworks.length - 1; i >= 0; i--) {\r\n          const firework = fireworks[i];\r\n          if (firework.update()) {\r\n            firework.draw(ctx);\r\n          } else {\r\n            fireworks.splice(i, 1);\r\n          }\r\n        }\r\n\r\n        for (let i = explosions.length - 1; i >= 0; i--) {\r\n          const particle = explosions[i];\r\n          particle.update();\r\n          if (particle.isAlive()) {\r\n            particle.draw(ctx);\r\n          } else {\r\n            explosions.splice(i, 1);\r\n          }\r\n        }\r\n\r\n        animationFrameId = requestAnimationFrame(animate);\r\n      };\r\n\r\n      animate();\r\n\r\n      const handleClick = (event: MouseEvent) => {\r\n        const x = event.clientX;\r\n        const y = maxY;\r\n        const targetY = event.clientY;\r\n        const fireworkColor = getColor(color);\r\n        const speed = getValueByRange(fireworkSpeed);\r\n        const size = getValueByRange(fireworkSize);\r\n        fireworks.push(createFirework(x, y, targetY, fireworkColor, speed, size, particleSpeed, particleSize, handleExplosion));\r\n      };\r\n\r\n      container.addEventListener(\"click\", handleClick);\r\n\r\n      return () => {\r\n        window.removeEventListener(\"resize\", setCanvasSize);\r\n        container.removeEventListener(\"click\", handleClick);\r\n        cancelAnimationFrame(animationFrameId);\r\n      };\r\n    }, [population, color, fireworkSpeed, fireworkSize, particleSpeed, particleSize]);\r\n\r\n    return (\r\n      <div\r\n        ref={containerRef}\r\n        className={cn(\"relative size-full overflow-hidden\", className)}\r\n        {...props}>\r\n        <canvas\r\n          {...canvasProps}\r\n          ref={canvasRef}\r\n          className={cn(\"absolute inset-0 size-full\", canvasProps?.className)}\r\n        />\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nFireworksBackground.displayName = \"FireworksBackground\";\r\n\r\nexport {FireworksBackground, type FireworksBackgroundProps};\r\n"],"names":["rand","min","max","Math","randInt","randColor","createParticle","x","y","color","speed","direction","gravity","friction","size","vx","vy","alpha","decay","ctx","createFirework","targetY","particleSpeed","particleSize","onExplode","angle","trail","trailLength","numParticles","particles","i","particleAngle","localParticleSpeed","getValueByRange","localParticleSize","point","range","getColor","Array","FireworksBackground","React","className","canvasProps","population","fireworkSpeed","fireworkSize","props","ref","canvasRef","containerRef","canvas","container","maxX","window","ratio","maxY","setCanvasSize","explosions","fireworks","handleExplosion","launchFirework","fireworkColor","timeout","setTimeout","animationFrameId","animate","firework","particle","requestAnimationFrame","handleClick","event","cancelAnimationFrame","cn"],"mappings":"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"}
+{"version":3,"file":"components/ui/fireworks-background.js","sources":["../../../src/components/ui/fireworks-background.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./fireworks-background.module.css\";\r\n\r\nconst rand = (min: number, max: number): number => Math.random() * (max - min) + min;\r\nconst randInt = (min: number, max: number): number => Math.floor(Math.random() * (max - min) + min);\r\nconst randColor = (): string => `hsl(${randInt(0, 360)}, 100%, 50%)`;\r\n\r\ninterface ParticleType {\r\n  x: number;\r\n  y: number;\r\n  color: string;\r\n  speed: number;\r\n  direction: number;\r\n  vx: number;\r\n  vy: number;\r\n  gravity: number;\r\n  friction: number;\r\n  alpha: number;\r\n  decay: number;\r\n  size: number;\r\n  update: () => void;\r\n  draw: (ctx: CanvasRenderingContext2D) => void;\r\n  isAlive: () => boolean;\r\n}\r\n\r\nconst createParticle = (\r\n  x: number,\r\n  y: number,\r\n  color: string,\r\n  speed: number,\r\n  direction: number,\r\n  gravity: number,\r\n  friction: number,\r\n  size: number,\r\n): ParticleType => {\r\n  const vx = Math.cos(direction) * speed;\r\n  const vy = Math.sin(direction) * speed;\r\n  const alpha = 1;\r\n  const decay = rand(0.005, 0.02);\r\n\r\n  return {\r\n    x,\r\n    y,\r\n    color,\r\n    speed,\r\n    direction,\r\n    vx,\r\n    vy,\r\n    gravity,\r\n    friction,\r\n    alpha,\r\n    decay,\r\n    size,\r\n    update() {\r\n      this.vx *= this.friction;\r\n      this.vy *= this.friction;\r\n      this.vy += this.gravity;\r\n      this.x += this.vx;\r\n      this.y += this.vy;\r\n      this.alpha -= this.decay;\r\n    },\r\n    draw(ctx: CanvasRenderingContext2D) {\r\n      ctx.save();\r\n      ctx.globalAlpha = this.alpha;\r\n      ctx.beginPath();\r\n      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n      ctx.fillStyle = this.color;\r\n      ctx.fill();\r\n      ctx.restore();\r\n    },\r\n    isAlive() {\r\n      return this.alpha > 0;\r\n    },\r\n  };\r\n};\r\n\r\ninterface FireworkType {\r\n  x: number;\r\n  y: number;\r\n  targetY: number;\r\n  color: string;\r\n  speed: number;\r\n  size: number;\r\n  angle: number;\r\n  vx: number;\r\n  vy: number;\r\n  trail: Array<{x: number; y: number}>;\r\n  trailLength: number;\r\n  exploded: boolean;\r\n  update: () => boolean;\r\n  explode: () => void;\r\n  draw: (ctx: CanvasRenderingContext2D) => void;\r\n}\r\n\r\nconst createFirework = (\r\n  x: number,\r\n  y: number,\r\n  targetY: number,\r\n  color: string,\r\n  speed: number,\r\n  size: number,\r\n  particleSpeed: {min: number; max: number} | number,\r\n  particleSize: {min: number; max: number} | number,\r\n  onExplode: (particles: ReadonlyArray<ParticleType>) => void,\r\n): FireworkType => {\r\n  const angle = -Math.PI / 2 + rand(-0.3, 0.3);\r\n  const vx = Math.cos(angle) * speed;\r\n  const vy = Math.sin(angle) * speed;\r\n  const trail: Array<{x: number; y: number}> = [];\r\n  const trailLength = randInt(10, 25);\r\n\r\n  return {\r\n    x,\r\n    y,\r\n    targetY,\r\n    color,\r\n    speed,\r\n    size,\r\n    angle,\r\n    vx,\r\n    vy,\r\n    trail,\r\n    trailLength,\r\n    exploded: false,\r\n    update() {\r\n      this.trail.push({x: this.x, y: this.y});\r\n      if (this.trail.length > this.trailLength) {\r\n        this.trail.shift();\r\n      }\r\n      this.x += this.vx;\r\n      this.y += this.vy;\r\n      this.vy += 0.02;\r\n      if (this.vy >= 0 || this.y <= this.targetY) {\r\n        this.explode();\r\n        return false;\r\n      }\r\n      return true;\r\n    },\r\n    explode() {\r\n      const numberOfParticles = randInt(50, 150);\r\n      const particles: Array<ParticleType> = [];\r\n      for (let index = 0; index < numberOfParticles; index += 1) {\r\n        const particleAngle = rand(0, Math.PI * 2);\r\n        const localParticleSpeed = getValueByRange(particleSpeed);\r\n        const localParticleSize = getValueByRange(particleSize);\r\n        particles.push(createParticle(this.x, this.y, this.color, localParticleSpeed, particleAngle, 0.05, 0.98, localParticleSize));\r\n      }\r\n      onExplode(particles);\r\n    },\r\n    draw(ctx: CanvasRenderingContext2D) {\r\n      ctx.save();\r\n      ctx.beginPath();\r\n      if (this.trail.length > 1) {\r\n        ctx.moveTo(this.trail[0]!.x, this.trail[0]!.y);\r\n        for (const point of this.trail) {\r\n          ctx.lineTo(point.x, point.y);\r\n        }\r\n      } else {\r\n        ctx.moveTo(this.x, this.y);\r\n        ctx.lineTo(this.x, this.y);\r\n      }\r\n      ctx.strokeStyle = this.color;\r\n      ctx.lineWidth = this.size;\r\n      ctx.lineCap = \"round\";\r\n      ctx.stroke();\r\n      ctx.restore();\r\n    },\r\n  };\r\n};\r\n\r\nconst getValueByRange = (range: {min: number; max: number} | number): number => {\r\n  if (typeof range === \"number\") {\r\n    return range;\r\n  }\r\n\r\n  return rand(range.min, range.max);\r\n};\r\n\r\nconst getColor = (color: string | ReadonlyArray<string> | undefined): string => {\r\n  if (Array.isArray(color)) {\r\n    return color[randInt(0, color.length)] ?? randColor();\r\n  }\r\n\r\n  if (typeof color === \"string\") {\r\n    return color;\r\n  }\r\n\r\n  return randColor();\r\n};\r\n\r\n/** Props accepted by {@link FireworksBackground}. */\r\nexport interface FireworksBackgroundProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"color\"> {\r\n  /** HTML attributes forwarded to the internal `<canvas>` element. @default undefined */\r\n  canvasProps?: React.HTMLAttributes<HTMLCanvasElement>;\r\n  /** Relative launch frequency multiplier for automatic fireworks. @default 1 */\r\n  population?: number;\r\n  /** Fixed color or palette used for generated fireworks and particles. @default undefined */\r\n  color?: string | ReadonlyArray<string>;\r\n  /** Launch velocity or range used for ascending fireworks. @default {min: 4, max: 8} */\r\n  fireworkSpeed?: {min: number; max: number} | number;\r\n  /** Stroke width or range used for the ascending firework trail. @default {min: 2, max: 5} */\r\n  fireworkSize?: {min: number; max: number} | number;\r\n  /** Velocity or range used for explosion particles. @default {min: 2, max: 7} */\r\n  particleSpeed?: {min: number; max: number} | number;\r\n  /** Size or range used for explosion particles. @default {min: 1, max: 5} */\r\n  particleSize?: {min: number; max: number} | number;\r\n}\r\n\r\n/**\r\n * Renders an auto-launching fireworks display inside a clickable background canvas.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders a `<div>` element containing a `<canvas>`\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n * - Client-side only (`\"use client\"` directive)\r\n *\r\n * @example\r\n * ```tsx\r\n * <FireworksBackground population={2} />\r\n * ```\r\n *\r\n * @see {@link FireworksBackgroundProps} for available props\r\n */\r\nconst FireworksBackground = React.forwardRef<HTMLDivElement, FireworksBackgroundProps>(\r\n  (\r\n    {\r\n      className,\r\n      canvasProps,\r\n      population = 1,\r\n      color,\r\n      fireworkSpeed = {min: 4, max: 8},\r\n      fireworkSize = {min: 2, max: 5},\r\n      particleSpeed = {min: 2, max: 7},\r\n      particleSize = {min: 1, max: 5},\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const canvasRef = React.useRef<HTMLCanvasElement>(null);\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n    React.useImperativeHandle(ref, () => containerRef.current!, []);\r\n\r\n    React.useEffect(() => {\r\n      const canvas = canvasRef.current;\r\n      const container = containerRef.current;\r\n      if (!canvas || !container) {\r\n        return;\r\n      }\r\n\r\n      const context = canvas.getContext(\"2d\");\r\n      if (!context) {\r\n        return;\r\n      }\r\n\r\n      let maxX = globalThis.window.innerWidth;\r\n      let ratio = container.offsetHeight / Math.max(container.offsetWidth, 1);\r\n      let maxY = maxX * ratio;\r\n      let launchTimeoutId = 0;\r\n      canvas.width = maxX;\r\n      canvas.height = maxY;\r\n\r\n      const setCanvasSize = (): void => {\r\n        maxX = globalThis.window.innerWidth;\r\n        ratio = container.offsetHeight / Math.max(container.offsetWidth, 1);\r\n        maxY = maxX * ratio;\r\n        canvas.width = maxX;\r\n        canvas.height = maxY;\r\n      };\r\n\r\n      globalThis.window.addEventListener(\"resize\", setCanvasSize);\r\n\r\n      const explosions: Array<ParticleType> = [];\r\n      const fireworks: Array<FireworkType> = [];\r\n\r\n      const handleExplosion = (particles: ReadonlyArray<ParticleType>): void => {\r\n        explosions.push(...particles);\r\n      };\r\n\r\n      const launchFirework = (): void => {\r\n        const x = rand(maxX * 0.1, maxX * 0.9);\r\n        const y = maxY;\r\n        const targetY = rand(maxY * 0.1, maxY * 0.4);\r\n        const fireworkColor = getColor(color);\r\n        const speed = getValueByRange(fireworkSpeed);\r\n        const size = getValueByRange(fireworkSize);\r\n        fireworks.push(createFirework(x, y, targetY, fireworkColor, speed, size, particleSpeed, particleSize, handleExplosion));\r\n        const timeout = rand(300, 800) / population;\r\n        launchTimeoutId = globalThis.window.setTimeout(launchFirework, timeout);\r\n      };\r\n\r\n      launchFirework();\r\n\r\n      let animationFrameId = 0;\r\n      const animate = (): void => {\r\n        context.clearRect(0, 0, maxX, maxY);\r\n\r\n        for (let index = fireworks.length - 1; index >= 0; index -= 1) {\r\n          const firework = fireworks[index]!;\r\n          if (firework.update()) {\r\n            firework.draw(context);\r\n          } else {\r\n            fireworks.splice(index, 1);\r\n          }\r\n        }\r\n\r\n        for (let index = explosions.length - 1; index >= 0; index -= 1) {\r\n          const particle = explosions[index]!;\r\n          particle.update();\r\n          if (particle.isAlive()) {\r\n            particle.draw(context);\r\n          } else {\r\n            explosions.splice(index, 1);\r\n          }\r\n        }\r\n\r\n        animationFrameId = globalThis.requestAnimationFrame(animate);\r\n      };\r\n\r\n      animate();\r\n\r\n      const handleClick = (event: MouseEvent): void => {\r\n        const fireworkColor = getColor(color);\r\n        const speed = getValueByRange(fireworkSpeed);\r\n        const size = getValueByRange(fireworkSize);\r\n        fireworks.push(\r\n          createFirework(event.clientX, maxY, event.clientY, fireworkColor, speed, size, particleSpeed, particleSize, handleExplosion),\r\n        );\r\n      };\r\n\r\n      container.addEventListener(\"click\", handleClick);\r\n\r\n      return () => {\r\n        globalThis.window.removeEventListener(\"resize\", setCanvasSize);\r\n        container.removeEventListener(\"click\", handleClick);\r\n        globalThis.window.clearTimeout(launchTimeoutId);\r\n        globalThis.cancelAnimationFrame(animationFrameId);\r\n      };\r\n    }, [color, fireworkSize, fireworkSpeed, particleSize, particleSpeed, population]);\r\n\r\n    return (\r\n      <div\r\n        ref={containerRef}\r\n        className={cn(styles.root, className)}\r\n        {...props}>\r\n        <canvas\r\n          {...canvasProps}\r\n          ref={canvasRef}\r\n          className={cn(styles.canvas, canvasProps?.className)}\r\n        />\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nFireworksBackground.displayName = \"FireworksBackground\";\r\n\r\nexport {FireworksBackground};\r\n"],"names":["rand","min","max","Math","randInt","randColor","createParticle","x","y","color","speed","direction","gravity","friction","size","vx","vy","alpha","decay","ctx","createFirework","targetY","particleSpeed","particleSize","onExplode","angle","trail","trailLength","numberOfParticles","particles","index","particleAngle","localParticleSpeed","getValueByRange","localParticleSize","point","range","getColor","Array","FireworksBackground","React","className","canvasProps","population","fireworkSpeed","fireworkSize","props","ref","canvasRef","containerRef","canvas","container","context","maxX","globalThis","ratio","maxY","launchTimeoutId","setCanvasSize","explosions","fireworks","handleExplosion","launchFirework","fireworkColor","timeout","animationFrameId","animate","firework","particle","handleClick","event","cn","styles"],"mappings":"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"}

package/dist/components/ui/fireworks-background.module.js

@@ -0,0 +1,8 @@
+import "./fireworks-background_module.css";
+const fireworks_background_module = {
+    root: "root-wlxOx3",
+    canvas: "canvas-dP7eq7"
+};
+export default fireworks_background_module;
+
+//# sourceMappingURL=fireworks-background.module.js.map

package/dist/components/ui/fireworks-background.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/fireworks-background.module.js","sources":["../../../src/components/ui/fireworks-background.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./fireworks-background_module.css\"\nexport default {\"root\":\"root-wlxOx3\",\"canvas\":\"canvas-dP7eq7\"};"],"names":[],"mappings":";AAEA,oCAAe;IAAC,MAAO;IAAc,QAAS;AAAe"}

package/dist/components/ui/fireworks-background_module.css

@@ -0,0 +1,17 @@
+.root-wlxOx3 {
+  position: relative;
+  overflow: hidden;
+}
+
+.canvas-dP7eq7, .root-wlxOx3 {
+  width: 100%;
+  height: 100%;
+}
+
+.canvas-dP7eq7 {
+  position: absolute;
+  inset: 0;
+}
+
+
+/*# sourceMappingURL=fireworks-background_module.css.map */

package/dist/components/ui/fireworks-background_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/fireworks-background.module.css","webpack://./src/components/ui/fireworks-background.module.css"],"names":[],"mappings":"AADA;ECEE,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,kBAAkB;EAClB,QAAQ;AACV","sourcesContent":[".root{overflow:hidden;position:relative}.canvas,.root{height:100%;width:100%}.canvas{inset:0;position:absolute}",".root {\n  position: relative;\n  overflow: hidden;\n}\n\n.canvas, .root {\n  width: 100%;\n  height: 100%;\n}\n\n.canvas {\n  position: absolute;\n  inset: 0;\n}\n"],"sourceRoot":""}

package/dist/components/ui/flip-button.d.ts

@@ -1,14 +1,38 @@
 import { type HTMLMotionProps, type Transition } from "motion/react";
 import * as React from "react";
-type FlipDirection = "top" | "bottom" | "left" | "righ";
-interface FlipButtonProps extends HTMLMotionProps<"button"> {
+/** Supported flip origins for the button animation. */
+export type FlipDirection = "top" | "bottom" | "left" | "righ";
+/** Props accepted by {@link FlipButton}. */
+export interface FlipButtonProps extends HTMLMotionProps<"button"> {
+    /** Label rendered on the default face of the button. @default undefined */
     frontText: string;
+    /** Label revealed after the flip animation completes. @default undefined */
     backText: string;
+    /** Motion transition applied to both button faces. @default {type: "spring", stiffness: 280, damping: 20} */
     transition?: Transition;
+    /** Additional CSS classes merged with the front face. @default undefined */
     frontClassName?: string;
+    /** Additional CSS classes merged with the back face. @default undefined */
     backClassName?: string;
+    /** Direction from which the back face flips into view. @default "top" */
     from?: FlipDirection;
 }
+/**
+ * Renders a two-sided button that flips between front and back labels on hover.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<button>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <FlipButton frontText="Learn more" backText="Open" />
+ * ```
+ *
+ * @see {@link FlipButtonProps} for available props
+ */
 declare const FlipButton: React.ForwardRefExoticComponent<Omit<FlipButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { FlipButton, type FlipButtonProps, type FlipDirection };
+export { FlipButton };
 //# sourceMappingURL=flip-button.d.ts.map

package/dist/components/ui/flip-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flip-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/flip-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,eAAe,EAAE,KAAK,UAAU,EAAuB,MAAM,cAAc,CAAC;AACzF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,UAAU,eAAgB,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAID,QAAA,MAAM,UAAU,wGAgEf,CAAC;AAIF,OAAO,EAAC,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,aAAa,EAAC,CAAC"}
+{"version":3,"file":"flip-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/flip-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,eAAe,EAAU,KAAK,UAAU,EAAe,MAAM,cAAc,CAAC;AACzF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,uDAAuD;AACvD,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAE/D,4CAA4C;AAC5C,MAAM,WAAW,eAAgB,SAAQ,eAAe,CAAC,QAAQ,CAAC;IAChE,2EAA2E;IAC3E,SAAS,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,QAAQ,EAAE,MAAM,CAAC;IACjB,6GAA6G;IAC7G,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yEAAyE;IACzE,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,UAAU,wGAwEf,CAAC;AAIF,OAAO,EAAC,UAAU,EAAC,CAAC"}