@studio-helga/once-ui-core 1.7.8

package/dist/components/Card.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Flex } from ".";
+import styles from "./Card.module.scss";
+import { ElementType } from "./ElementType";
+import classNames from "classnames";
+const Card = forwardRef(({ children, href, onClick, style, className, fillHeight, ...flex }, ref) => {
+    return (_jsx(ElementType, { tabIndex: onClick || href ? 0 : undefined, className: classNames("reset-button-styles", "display-flex", "fill-width", fillHeight ? "fill-height" : undefined, "min-width-0", (onClick || href) && "focus-ring", (onClick || href) && (`radius-${flex.radius}` || "radius-l")), href: href, onClick: onClick && onClick, role: onClick ? "button" : href ? "link" : "none", ref: ref, children: _jsx(Flex, { background: "surface", onBackground: "neutral-strong", transition: "macro-medium", border: "neutral-medium", cursor: "interactive", align: "left", onClick: onClick && onClick, className: classNames(styles.card, className), style: { ...style }, ...flex, children: children }) }));
+});
+Card.displayName = "Card";
+export { Card };
+//# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AACzB,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,UAAU,MAAM,YAAY,CAAC;AAWpC,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1E,OAAO,CACL,KAAC,WAAW,IACV,QAAQ,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACzC,SAAS,EAAE,UAAU,CACnB,qBAAqB,EACrB,cAAc,EACd,YAAY,EACZ,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACtC,aAAa,EACb,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,YAAY,EACjC,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,MAAM,EAAE,IAAI,UAAU,CAAC,CAC7D,EACD,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,IAAI,OAAO,EAC3B,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACjD,GAAG,EAAE,GAAG,YAER,KAAC,IAAI,IACH,UAAU,EAAC,SAAS,EACpB,YAAY,EAAC,gBAAgB,EAC7B,UAAU,EAAC,cAAc,EACzB,MAAM,EAAC,gBAAgB,EACvB,MAAM,EAAC,aAAa,EACpB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,OAAO,IAAI,OAAO,EAC3B,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7C,KAAK,EAAE,EAAC,GAAG,KAAK,EAAC,KACb,IAAI,YAEP,QAAQ,GACJ,GACK,CACf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Card.module.scss

@@ -0,0 +1,7 @@
+.card {
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--neutral-alpha-weak);
+        }
+    }
+}

package/dist/components/Carousel.d.ts

@@ -0,0 +1,32 @@
+import { SpacingToken } from "@/types";
+import { Flex } from ".";
+interface CarouselItem {
+    slide: string | React.ReactNode;
+    alt?: string;
+}
+interface ThumbnailItem {
+    scaling?: number;
+    height?: SpacingToken | number;
+    sizes?: string;
+}
+interface CarouselProps extends React.ComponentProps<typeof Flex> {
+    items: CarouselItem[];
+    controls?: boolean;
+    priority?: boolean;
+    fill?: boolean;
+    indicator?: "line" | "thumbnail" | false;
+    translateY?: SpacingToken | number;
+    aspectRatio?: string;
+    sizes?: string;
+    revealedByDefault?: boolean;
+    thumbnail?: ThumbnailItem;
+    play?: {
+        auto?: boolean;
+        interval?: number;
+        controls?: boolean;
+        progress?: boolean;
+    };
+}
+declare const Carousel: React.FC<CarouselProps>;
+export { Carousel };
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/components/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/components/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,IAAI,EAA4D,MAAM,GAAG,CAAC;AAInF,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC/D,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,KAAK,CAAC;IACzC,UAAU,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,IAAI,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CACtF;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuarC,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Carousel.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, RevealFx, Scroller, Media, Column, Row, IconButton, Fade } from ".";
+import { useEffect, useState, useRef } from "react";
+import styles from "./Carousel.module.scss";
+const Carousel = ({ items = [], fill = false, controls = true, priority = false, indicator = "line", translateY, aspectRatio = "original", sizes, revealedByDefault = false, thumbnail = { scaling: 1, height: "80", sizes: "120px" }, play = { auto: false, interval: 3000, controls: true }, ...flex }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [hoverIndex, setHoverIndex] = useState(0);
+    const [isTransitioning, setIsTransitioning] = useState(revealedByDefault);
+    const [initialTransition, setInitialTransition] = useState(revealedByDefault);
+    const [isPlaying, setIsPlaying] = useState(play.auto || false);
+    const [progressPercent, setProgressPercent] = useState(0);
+    // Initialize auto-play state when props change
+    useEffect(() => {
+        setIsPlaying(play.auto || false);
+    }, [play.auto]);
+    const nextImageRef = useRef(null);
+    const transitionTimeoutRef = useRef(undefined);
+    const autoPlayIntervalRef = useRef(undefined);
+    const touchStartXRef = useRef(null);
+    const touchEndXRef = useRef(null);
+    const preloadNextImage = (nextIndex) => {
+        if (nextIndex >= 0 && nextIndex < items.length) {
+            const item = items[nextIndex];
+            if (typeof item.slide === "string") {
+                nextImageRef.current = new Image();
+                nextImageRef.current.src = item.slide;
+            }
+        }
+    };
+    const handlePrevClick = () => {
+        if (items.length > 1 && activeIndex > 0) {
+            const prevIndex = activeIndex - 1;
+            handleControlClick(prevIndex);
+        }
+    };
+    const handleNextClick = () => {
+        if (items.length > 1) {
+            // If at the last slide, loop back to the first one
+            const nextIndex = activeIndex < items.length - 1 ? activeIndex + 1 : 0;
+            handleControlClick(nextIndex);
+        }
+    };
+    const handleControlClick = (nextIndex) => {
+        if (nextIndex !== activeIndex && !transitionTimeoutRef.current) {
+            preloadNextImage(nextIndex);
+            setIsTransitioning(false);
+            transitionTimeoutRef.current = setTimeout(() => {
+                setActiveIndex(nextIndex);
+                setTimeout(() => {
+                    setIsTransitioning(true);
+                    transitionTimeoutRef.current = undefined;
+                }, 50);
+            }, 300);
+        }
+    };
+    // Simple function to handle auto-play
+    const handleNextWithLoop = () => {
+        const nextIndex = activeIndex < items.length - 1 ? activeIndex + 1 : 0;
+        handleControlClick(nextIndex);
+    };
+    // Progress tracking for animation
+    useEffect(() => {
+        let progressTimer;
+        if (isPlaying && play.progress && items.length > 1) {
+            // Reset progress when slide changes
+            setProgressPercent(0);
+            // Update progress every 50ms
+            const updateFrequency = 50; // ms
+            const interval = play.interval || 3000; // Default to 3000ms if undefined
+            const totalSteps = Math.floor(interval / updateFrequency);
+            let currentStep = 0;
+            progressTimer = setInterval(() => {
+                currentStep++;
+                const percent = Math.min((currentStep / totalSteps) * 100, 100);
+                setProgressPercent(percent);
+            }, updateFrequency);
+        }
+        return () => {
+            if (progressTimer) {
+                clearInterval(progressTimer);
+            }
+        };
+    }, [isPlaying, activeIndex, play.interval, play.progress, items.length]);
+    // Handle auto-play functionality
+    useEffect(() => {
+        // Clear any existing interval first
+        if (autoPlayIntervalRef.current) {
+            clearInterval(autoPlayIntervalRef.current);
+            autoPlayIntervalRef.current = undefined;
+        }
+        // Start auto-play if enabled
+        if (isPlaying && items.length > 1) {
+            autoPlayIntervalRef.current = setInterval(() => {
+                // Simply call the next function which already has looping logic
+                handleNextWithLoop();
+            }, play.interval);
+        }
+        // Cleanup function
+        return () => {
+            if (autoPlayIntervalRef.current) {
+                clearInterval(autoPlayIntervalRef.current);
+                autoPlayIntervalRef.current = undefined;
+            }
+        };
+    }, [isPlaying, items.length, play.interval, handleNextWithLoop]);
+    // Handle initial transition
+    useEffect(() => {
+        if (!revealedByDefault && !initialTransition) {
+            setIsTransitioning(true);
+            setInitialTransition(true);
+        }
+        return () => {
+            if (transitionTimeoutRef.current) {
+                clearTimeout(transitionTimeoutRef.current);
+            }
+        };
+    }, [revealedByDefault, initialTransition]);
+    // Toggle play/pause function
+    const togglePlayPause = () => {
+        setIsPlaying(prev => !prev);
+    };
+    if (items.length === 0) {
+        return null;
+    }
+    return (_jsxs(Column, { fillWidth: true, fillHeight: fill, gap: "8", ...flex, aspectRatio: undefined, style: { isolation: "isolate" }, children: [items.length > 1 && play.controls && play.auto && (_jsx(Flex, { position: "absolute", top: "16", right: "16", zIndex: 1, children: _jsx(Flex, { radius: "m", background: "surface", children: _jsx(IconButton, { onClick: (e) => {
+                            e.stopPropagation();
+                            togglePlayPause();
+                        }, variant: "secondary", icon: isPlaying ? "pause" : "play" }) }) })), _jsxs(RevealFx, { fillWidth: true, fillHeight: fill, radius: flex.radius || "l", trigger: isTransitioning, translateY: translateY, aspectRatio: aspectRatio === "original" ? undefined : aspectRatio, speed: 300, onTouchStart: (e) => {
+                    touchStartXRef.current = e.touches[0].clientX;
+                }, onTouchEnd: (e) => {
+                    if (touchStartXRef.current === null)
+                        return;
+                    const touchEndX = e.changedTouches[0].clientX;
+                    touchEndXRef.current = touchEndX;
+                    const diffX = touchStartXRef.current - touchEndX;
+                    // Detect swipe (more than 50px movement is considered a swipe)
+                    if (Math.abs(diffX) > 50) {
+                        if (diffX > 0) {
+                            handleNextClick();
+                        }
+                        else {
+                            handlePrevClick();
+                        }
+                    }
+                    touchStartXRef.current = null;
+                    touchEndXRef.current = null;
+                }, children: [typeof items[activeIndex]?.slide === "string" ? (_jsx(Media, { fill: fill, sizes: sizes, priority: priority, radius: flex.radius || "l", border: flex.border || "neutral-alpha-weak", overflow: "hidden", aspectRatio: fill ? undefined : aspectRatio === "auto" ? undefined : aspectRatio, src: items[activeIndex]?.slide, alt: items[activeIndex]?.alt || "" })) : (_jsx(Flex, { fill: true, overflow: "hidden", radius: flex.radius || "l", border: flex.border || "neutral-alpha-weak", aspectRatio: fill ? undefined : aspectRatio === "auto" ? undefined : aspectRatio, children: items[activeIndex]?.slide })), _jsxs(Row, { fill: true, className: styles.controls, radius: flex.radius || "l", position: "absolute", top: "0", left: "0", overflow: "hidden", horizontal: "between", children: [activeIndex > 0 ? (_jsx(Row, { className: styles.left, cursor: "interactive", maxWidth: 12, fill: true, vertical: "center", onClick: handlePrevClick, children: controls && (_jsxs(_Fragment, { children: [_jsx(Fade, { m: { hide: true }, transition: "micro-medium", className: styles.fade, position: "absolute", left: "0", top: "0", to: "right", fillHeight: true, maxWidth: 6 }), _jsx(Flex, { m: { hide: true }, transition: "micro-medium", className: styles.button, marginLeft: "m", radius: "l", overflow: "hidden", background: "surface", children: _jsx(IconButton, { tabIndex: 0, onClick: handlePrevClick, variant: "secondary", icon: "chevronLeft" }) })] })) })) : (_jsx(Flex, { maxWidth: 12 })), activeIndex < items.length - 1 ? (_jsx(Row, { className: styles.right, cursor: "interactive", maxWidth: 12, fill: true, vertical: "center", horizontal: "end", onClick: handleNextClick, children: controls && (_jsxs(_Fragment, { children: [_jsx(Fade, { m: { hide: true }, transition: "micro-medium", className: styles.fade, position: "absolute", right: "0", top: "0", to: "left", fillHeight: true, maxWidth: 6 }), _jsx(Flex, { m: { hide: true }, transition: "micro-medium", className: styles.button, marginRight: "m", radius: "l", overflow: "hidden", background: "surface", children: _jsx(IconButton, { tabIndex: 0, onClick: handleNextClick, variant: "secondary", icon: "chevronRight" }) })] })) })) : (_jsx(Flex, { maxWidth: 12 }))] }), play.progress && (_jsx(Row, { fillWidth: true, paddingBottom: "12", paddingX: "24", position: "absolute", bottom: "0", left: "0", zIndex: 1, children: _jsx(Row, { radius: "full", background: "neutral-alpha-weak", height: "2", fillWidth: true, children: _jsx(Row, { radius: "full", solid: "brand-strong", style: { width: `${progressPercent}%`, transition: `width 0.05s linear` }, fillHeight: true }) }) }))] }), items.length > 1 && indicator !== false && (_jsx(_Fragment, { children: indicator === "line" ? (_jsx(Flex, { gap: "4", paddingX: "s", fillWidth: true, horizontal: "center", children: items.map((_, index) => (_jsx(Flex, { className: styles.indicator, onClick: () => handleControlClick(index), cursor: activeIndex === index ? undefined : "interactive", fillWidth: true, height: "12", vertical: "center", children: _jsx(Flex, { className: activeIndex === index ? styles.active : styles.inactive, radius: "full", transition: "micro-short", fillWidth: true, height: "2" }) }, index))) })) : (_jsx(Scroller, { gap: "4", marginTop: "12", onItemClick: handleControlClick, children: items.map((item, index) => (_jsx(Flex, { style: {
+                            border: activeIndex === index
+                                ? "2px solid var(--brand-solid-strong)"
+                                : "2px solid var(--static-transparent)",
+                        }, radius: "m-8", padding: "4", aspectRatio: aspectRatio, cursor: "interactive", minHeight: thumbnail.height, maxHeight: thumbnail.height, children: typeof item.slide === "string" ? (_jsx(Media, { alt: item.alt || "", aspectRatio: aspectRatio, sizes: thumbnail.sizes, src: item.slide, cursor: "interactive", radius: "m", transition: "macro-medium" })) : (_jsx(Flex, { aspectRatio: aspectRatio, cursor: "interactive", radius: "m", transition: "macro-medium", overflow: "hidden", fill: true, children: _jsx(Flex, { fill: true, style: { transform: `scale(${thumbnail.scaling})` }, children: item.slide }) })) }, index))) })) }))] }));
+};
+Carousel.displayName = "Carousel";
+export { Carousel };
+//# sourceMappingURL=Carousel.js.map

package/dist/components/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../src/components/Carousel.tsx"],"names":[],"mappings":"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"}

package/dist/components/Carousel.module.scss

@@ -0,0 +1,48 @@
+.indicator {
+  &:hover, &:focus-within {
+    .inactive {
+      background: var(--neutral-alpha-strong);
+    }
+  }
+}
+
+.inactive {
+  background: var(--neutral-alpha-medium);
+}
+
+.active {
+  background: var(--neutral-on-background-strong);
+}
+
+.controls {
+  &:hover, &:focus-within {
+    .fade {
+      opacity: 0.5;
+    }
+
+    .button {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+
+.fade, .button {
+  opacity: 0;
+}
+
+.button {
+  animation-delay: 0.2s;
+}
+
+.left {
+  .button {
+    transform: translateX(-1rem);
+  }
+}
+
+.right {
+  .button {
+    transform: translateX(1rem);
+  }
+}

package/dist/components/CelebrationFx.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Flex } from ".";
+type CelebrationType = "confetti" | "fireworks";
+interface CelebrationFxProps extends React.ComponentProps<typeof Flex> {
+    type?: CelebrationType;
+    speed?: number;
+    colors?: string[];
+    intensity?: number;
+    duration?: number;
+    trigger?: "mount" | "hover" | "manual" | "click";
+    active?: boolean;
+    reducedMotion?: boolean | "auto";
+    children?: React.ReactNode;
+}
+declare const CelebrationFx: React.ForwardRefExoticComponent<Omit<CelebrationFxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { CelebrationFx };
+//# sourceMappingURL=CelebrationFx.d.ts.map

package/dist/components/CelebrationFx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CelebrationFx.d.ts","sourceRoot":"","sources":["../../src/components/CelebrationFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAGzB,KAAK,eAAe,GAAG,UAAU,GAAG,WAAW,CAAC;AAEhD,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACpE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAuCD,QAAA,MAAM,aAAa,wGA+WlB,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/CelebrationFx.js

@@ -0,0 +1,314 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from "react";
+import { Flex } from ".";
+import { useReducedMotion } from "../hooks/useReducedMotion";
+const CelebrationFx = React.forwardRef(({ type = "confetti", speed = 1, colors = ["brand-solid-medium", "accent-solid-medium"], intensity = 50, duration, trigger = "mount", active = true, reducedMotion = "auto", children, ...rest }, forwardedRef) => {
+    const { shouldAnimate } = useReducedMotion(reducedMotion);
+    const containerRef = useRef(null);
+    const canvasRef = useRef(null);
+    const animationRef = useRef(undefined);
+    const particlesRef = useRef([]);
+    const isEmittingRef = useRef(trigger === "mount");
+    const emitStartTimeRef = useRef(Date.now());
+    const isHoveredRef = useRef(false);
+    const fireworkTimerRef = useRef(0);
+    const clickPositionRef = useRef(null);
+    useEffect(() => {
+        if (forwardedRef) {
+            if ("current" in forwardedRef) {
+                forwardedRef.current = containerRef.current;
+            }
+            else if (typeof forwardedRef === "function") {
+                forwardedRef(containerRef.current);
+            }
+        }
+    }, [forwardedRef]);
+    // Handle manual trigger
+    useEffect(() => {
+        if (trigger === "manual") {
+            if (active) {
+                isEmittingRef.current = true;
+                emitStartTimeRef.current = Date.now();
+            }
+            else {
+                isEmittingRef.current = false;
+            }
+        }
+    }, [trigger, active]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const container = containerRef.current;
+        if (!canvas || !container)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        // Set canvas size
+        let canvasWidth = 0;
+        let canvasHeight = 0;
+        const updateSize = () => {
+            const rect = container.getBoundingClientRect();
+            canvasWidth = rect.width;
+            canvasHeight = rect.height;
+            canvas.width = rect.width * 2; // 2x for retina
+            canvas.height = rect.height * 2;
+            canvas.style.width = `${rect.width}px`;
+            canvas.style.height = `${rect.height}px`;
+            ctx.scale(2, 2); // Scale for retina
+        };
+        updateSize();
+        window.addEventListener("resize", updateSize);
+        // Parse colors - convert token names to CSS variables
+        const parsedColors = colors.map((color) => {
+            const computedColor = getComputedStyle(container).getPropertyValue(`--${color}`);
+            return computedColor || color;
+        });
+        // Initialize confetti
+        const initializeConfetti = () => {
+            const particles = [];
+            const shapes = ["rectangle", "circle", "triangle"];
+            for (let i = 0; i < intensity; i++) {
+                // Stagger particles more dramatically over a larger vertical range
+                const stagger = (i / intensity) * canvasHeight * 2;
+                particles.push({
+                    x: Math.random() * canvasWidth,
+                    y: -canvasHeight - Math.random() * canvasHeight - stagger,
+                    width: 8 + Math.random() * 8,
+                    height: 6 + Math.random() * 6,
+                    color: parsedColors[Math.floor(Math.random() * parsedColors.length)],
+                    rotation: Math.random() * Math.PI * 2,
+                    rotationSpeed: (Math.random() - 0.5) * 0.2,
+                    velocityX: (Math.random() - 0.5) * 3,
+                    velocityY: (0.5 + Math.random() * 2.5) * speed,
+                    gravity: (0.12 + Math.random() * 0.06) * speed,
+                    opacity: 0.8 + Math.random() * 0.2,
+                    shape: shapes[Math.floor(Math.random() * shapes.length)],
+                });
+            }
+            return particles;
+        };
+        // Create a new firework (explodes immediately at random or click position)
+        const createFirework = (clickPos) => {
+            const firework = {
+                x: clickPos ? clickPos.x : Math.random() * canvasWidth,
+                y: clickPos ? clickPos.y : canvasHeight * (0.2 + Math.random() * 0.4),
+                targetY: 0, // Not used anymore
+                velocityY: 0,
+                color: parsedColors[Math.floor(Math.random() * parsedColors.length)],
+                exploded: true, // Start already exploded
+                particles: [],
+            };
+            // Explode immediately
+            explodeFirework(firework);
+            return firework;
+        };
+        // Explode firework into particles
+        const explodeFirework = (firework) => {
+            const particleCount = 30 + Math.floor(Math.random() * 20);
+            for (let i = 0; i < particleCount; i++) {
+                const angle = (Math.PI * 2 * i) / particleCount;
+                const velocity = 1 + Math.random() * 3;
+                firework.particles.push({
+                    x: firework.x,
+                    y: firework.y,
+                    velocityX: Math.cos(angle) * velocity * speed,
+                    velocityY: Math.sin(angle) * velocity * speed,
+                    color: firework.color,
+                    opacity: 1,
+                    size: 1 + Math.random(),
+                    life: 0,
+                    maxLife: 60 + Math.random() * 40,
+                });
+            }
+            firework.exploded = true;
+        };
+        // Initialize particles only if not already initialized
+        if (particlesRef.current.length === 0 && type === "confetti") {
+            particlesRef.current = initializeConfetti();
+        }
+        // Animation loop
+        const animate = () => {
+            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+            // Check if we should still be emitting new particles
+            const shouldEmit = trigger === "hover" ? isHoveredRef.current :
+                trigger === "manual" ? active :
+                    trigger === "click" ? clickPositionRef.current !== null :
+                        isEmittingRef.current;
+            // Check duration limit
+            if (duration && isEmittingRef.current && trigger !== "manual") {
+                const elapsed = (Date.now() - emitStartTimeRef.current) / 1000;
+                if (elapsed > duration) {
+                    isEmittingRef.current = false;
+                }
+            }
+            if (type === "confetti") {
+                // Update and draw confetti
+                particlesRef.current.forEach((piece) => {
+                    // Update physics
+                    piece.velocityY += piece.gravity;
+                    piece.x += piece.velocityX;
+                    piece.y += piece.velocityY;
+                    piece.rotation += piece.rotationSpeed;
+                    // Add some air resistance
+                    piece.velocityX *= 0.99;
+                    // Only respawn if we're still emitting
+                    if (piece.y > canvasHeight + 50 && shouldEmit) {
+                        piece.y = -20 - Math.random() * canvasHeight * 0.5;
+                        piece.x = Math.random() * canvasWidth;
+                        piece.velocityX = (Math.random() - 0.5) * 3;
+                        piece.velocityY = (0.5 + Math.random() * 2.5) * speed;
+                        piece.gravity = (0.12 + Math.random() * 0.06) * speed;
+                    }
+                    // Only draw if still on screen
+                    if (piece.y < canvasHeight + 100) {
+                        // Draw confetti piece
+                        ctx.save();
+                        ctx.translate(piece.x, piece.y);
+                        ctx.rotate(piece.rotation);
+                        ctx.globalAlpha = piece.opacity;
+                        ctx.fillStyle = piece.color;
+                        if (piece.shape === "rectangle") {
+                            ctx.fillRect(-piece.width / 2, -piece.height / 2, piece.width, piece.height);
+                        }
+                        else if (piece.shape === "circle") {
+                            ctx.beginPath();
+                            ctx.arc(0, 0, piece.width / 2, 0, Math.PI * 2);
+                            ctx.fill();
+                        }
+                        else if (piece.shape === "triangle") {
+                            ctx.beginPath();
+                            ctx.moveTo(0, -piece.height / 2);
+                            ctx.lineTo(piece.width / 2, piece.height / 2);
+                            ctx.lineTo(-piece.width / 2, piece.height / 2);
+                            ctx.closePath();
+                            ctx.fill();
+                        }
+                        ctx.restore();
+                    }
+                });
+            }
+            else if (type === "fireworks") {
+                // Launch new fireworks
+                if (trigger === "click" && clickPositionRef.current) {
+                    // Fire from click position
+                    particlesRef.current.push(createFirework(clickPositionRef.current));
+                    clickPositionRef.current = null;
+                }
+                else {
+                    fireworkTimerRef.current++;
+                    if (shouldEmit && fireworkTimerRef.current > 20 / speed) {
+                        // Launch new firework every ~20 frames
+                        fireworkTimerRef.current = 0;
+                        particlesRef.current.push(createFirework());
+                    }
+                }
+                // Update and draw fireworks (explosion particles only)
+                particlesRef.current.forEach((firework) => {
+                    // Update and draw explosion particles
+                    firework.particles.forEach((particle) => {
+                        particle.life++;
+                        if (particle.life < particle.maxLife) {
+                            // Update position
+                            particle.x += particle.velocityX;
+                            particle.y += particle.velocityY;
+                            particle.velocityY += 0.1; // Gravity
+                            // Fade out
+                            particle.opacity = 1 - particle.life / particle.maxLife;
+                            // Draw particle
+                            ctx.globalAlpha = particle.opacity;
+                            ctx.fillStyle = particle.color;
+                            ctx.beginPath();
+                            ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+                            ctx.fill();
+                        }
+                    });
+                });
+                // Clean up dead fireworks (only when not emitting)
+                if (!shouldEmit) {
+                    particlesRef.current = particlesRef.current.filter((firework) => {
+                        // Keep if any particles are still alive
+                        return firework.particles.some(p => p.life < p.maxLife);
+                    });
+                }
+            }
+            ctx.globalAlpha = 1;
+            animationRef.current = requestAnimationFrame(animate);
+        };
+        if (shouldAnimate) {
+            animate();
+        }
+        return () => {
+            window.removeEventListener("resize", updateSize);
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, [type, colors, speed, intensity, duration, trigger, shouldAnimate]);
+    const handleMouseEnter = () => {
+        if (trigger === "hover" && !isHoveredRef.current) {
+            isHoveredRef.current = true;
+            isEmittingRef.current = true;
+            emitStartTimeRef.current = Date.now();
+        }
+    };
+    const handleMouseLeave = () => {
+        if (trigger === "hover" && isHoveredRef.current) {
+            isHoveredRef.current = false;
+        }
+    };
+    const handleClick = (e) => {
+        if (trigger === "click" && containerRef.current) {
+            const rect = containerRef.current.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            if (type === "confetti") {
+                // For confetti, add burst of particles from click position
+                const shapes = ["rectangle", "circle", "triangle"];
+                const canvas = canvasRef.current;
+                if (!canvas)
+                    return;
+                const parsedColors = colors.map((color) => {
+                    const computedColor = getComputedStyle(containerRef.current).getPropertyValue(`--${color}`);
+                    return computedColor || color;
+                });
+                for (let i = 0; i < intensity; i++) {
+                    const angle = (Math.PI * 2 * i) / intensity;
+                    const velocity = 2 + Math.random() * 3;
+                    particlesRef.current.push({
+                        x,
+                        y,
+                        width: 8 + Math.random() * 8,
+                        height: 6 + Math.random() * 6,
+                        color: parsedColors[Math.floor(Math.random() * parsedColors.length)],
+                        rotation: Math.random() * Math.PI * 2,
+                        rotationSpeed: (Math.random() - 0.5) * 0.2,
+                        velocityX: Math.cos(angle) * velocity,
+                        velocityY: Math.sin(angle) * velocity - 2, // Slight upward bias
+                        gravity: (0.12 + Math.random() * 0.06) * speed,
+                        opacity: 0.8 + Math.random() * 0.2,
+                        shape: shapes[Math.floor(Math.random() * shapes.length)],
+                    });
+                }
+            }
+            else {
+                // For fireworks, store click position
+                clickPositionRef.current = { x, y };
+            }
+        }
+    };
+    return (_jsxs(Flex, { ref: containerRef, fill: true, overflow: "hidden", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, style: {
+            cursor: trigger === "click" ? "pointer" : undefined,
+            ...rest.style,
+        }, ...rest, children: [_jsx("canvas", { ref: canvasRef, style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    pointerEvents: "none",
+                } }), children] }));
+});
+CelebrationFx.displayName = "CelebrationFx";
+export { CelebrationFx };
+//# sourceMappingURL=CelebrationFx.js.map