@studio-helga/once-ui-core 1.7.8

package/dist/components/Logo.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import Link from "next/link";
+import classNames from "classnames";
+import { Flex, ContextMenu, Option, Icon, Column, Line } from ".";
+import { useToast } from "../contexts";
+const sizeMap = {
+    xs: "20",
+    s: "24",
+    m: "32",
+    l: "40",
+    xl: "48",
+};
+const Logo = ({ size = "m", href, icon, wordmark, className, style, dark, light, brand, ...props }) => {
+    useEffect(() => {
+        if (!icon && !wordmark) {
+            console.warn("Both 'icon' and 'wordmark' props are set to false. The logo will not render any content.");
+        }
+    }, [icon, wordmark]);
+    const content = (_jsxs(_Fragment, { children: [icon && (
+            // @ts-ignore
+            _jsx("img", { style: {
+                    height: `var(--static-space-${sizeMap[size]})`,
+                    width: "auto",
+                }, alt: "Trademark", src: icon })), wordmark && (
+            // @ts-ignore
+            _jsx("img", { style: {
+                    height: `var(--static-space-${sizeMap[size]})`,
+                    width: "auto",
+                }, alt: "Trademark", src: wordmark }))] }));
+    const { addToast } = useToast();
+    const copyIconToClipboard = async () => {
+        if (!icon) {
+            addToast({
+                variant: "danger",
+                message: "No icon available to copy",
+            });
+            return;
+        }
+        try {
+            const response = await fetch(icon);
+            const svgText = await response.text();
+            await navigator.clipboard.writeText(svgText);
+            addToast({
+                variant: "success",
+                message: "Icon copied to clipboard as SVG",
+            });
+        }
+        catch (error) {
+            addToast({
+                variant: "danger",
+                message: "Failed to copy icon to clipboard",
+            });
+            console.error("Error copying icon:", error);
+        }
+    };
+    const copyWordmarkToClipboard = async () => {
+        if (!wordmark) {
+            addToast({
+                variant: "danger",
+                message: "No wordmark available to copy",
+            });
+            return;
+        }
+        try {
+            const response = await fetch(wordmark);
+            const svgText = await response.text();
+            await navigator.clipboard.writeText(svgText);
+            addToast({
+                variant: "success",
+                message: "Wordmark copied to clipboard as SVG",
+            });
+        }
+        catch (error) {
+            addToast({
+                variant: "danger",
+                message: "Failed to copy wordmark to clipboard",
+            });
+            console.error("Error copying wordmark:", error);
+        }
+    };
+    const renderDropdownContent = () => {
+        return (_jsxs(Column, { fillWidth: true, children: [_jsxs(Column, { fillWidth: true, padding: "4", gap: "4", children: [brand?.copy && icon && (_jsx(Option, { value: "copy-icon", label: "Copy icon as SVG", hasPrefix: _jsx(Logo, { size: "xs", icon: icon, style: { opacity: 0.5 } }), onClick: copyIconToClipboard })), brand?.copy && wordmark && (_jsx(Option, { value: "copy-wordmark", label: "Copy wordmark as SVG", hasPrefix: _jsx(Icon, { size: "xs", onBackground: "neutral-weak", name: "wordmark" }), onClick: copyWordmarkToClipboard }))] }), brand?.url && (_jsxs(_Fragment, { children: [_jsx(Line, {}), _jsx(Column, { fillWidth: true, padding: "4", children: _jsx(Option, { value: "brand-guidelines", label: "Visit brand guidelines", hasPrefix: _jsx(Icon, { size: "xs", onBackground: "neutral-weak", name: "arrowUpRight" }), href: brand.url }) })] }))] }));
+    };
+    const enableContext = brand && ((brand.copy && (icon || wordmark)) || brand.url);
+    const renderLogo = () => {
+        if (href) {
+            return (_jsx(Link, { className: classNames("radius-l", "display-flex", "fit-height", dark ? "dark-flex" : "", light ? "light-flex" : "", className), style: style, href: href, "aria-label": "Trademark", ...props, children: content }));
+        }
+        else {
+            return (_jsx(Flex, { className: classNames(className), dark: dark, light: light, radius: "l", fitHeight: true, style: style, "aria-label": "Trademark", children: content }));
+        }
+    };
+    return enableContext ? (_jsx(ContextMenu, { dropdown: renderDropdownContent(), placement: "bottom-start", children: renderLogo() })) : (renderLogo());
+};
+Logo.displayName = "Logo";
+export { Logo };
+//# sourceMappingURL=Logo.js.map

package/dist/components/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../src/components/Logo.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,OAAO,GAAiC;IAC5C,EAAE,EAAE,IAAI;IACR,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,IAAI;CACT,CAAC;AAcF,MAAM,IAAI,GAAwB,CAAC,EACjC,IAAI,GAAG,GAAG,EACV,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACvB,OAAO,CAAC,IAAI,CACV,0FAA0F,CAC3F,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,MAAM,OAAO,GAAG,CACd,8BACG,IAAI,IAAI;YACP,aAAa;YACb,cACE,KAAK,EAAE;oBACL,MAAM,EAAE,sBAAsB,OAAO,CAAC,IAAI,CAAC,GAAG;oBAC9C,KAAK,EAAE,MAAM;iBACd,EACD,GAAG,EAAC,WAAW,EACf,GAAG,EAAE,IAAI,GACT,CACH,EACA,QAAQ,IAAI;YACX,aAAa;YACb,cACE,KAAK,EAAE;oBACL,MAAM,EAAE,sBAAsB,OAAO,CAAC,IAAI,CAAC,GAAG;oBAC9C,KAAK,EAAE,MAAM;iBACd,EACD,GAAG,EAAC,WAAW,EACf,GAAG,EAAE,QAAQ,GACb,CACH,IACA,CACJ,CAAC;IAEF,MAAM,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IAEhC,MAAM,mBAAmB,GAAG,KAAK,IAAI,EAAE;QACrC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,QAAQ,CAAC;gBACP,OAAO,EAAE,QAAQ;gBACjB,OAAO,EAAE,2BAA2B;aACrC,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QAED,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC;YACnC,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YACtC,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YAE7C,QAAQ,CAAC;gBACP,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,iCAAiC;aAC3C,CAAC,CAAC;QACL,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,QAAQ,CAAC;gBACP,OAAO,EAAE,QAAQ;gBACjB,OAAO,EAAE,kCAAkC;aAC5C,CAAC,CAAC;YACH,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,KAAK,IAAI,EAAE;QACzC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,CAAC;gBACP,OAAO,EAAE,QAAQ;gBACjB,OAAO,EAAE,+BAA+B;aACzC,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QAED,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;YACvC,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YACtC,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YAE7C,QAAQ,CAAC;gBACP,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,qCAAqC;aAC/C,CAAC,CAAC;QACL,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,QAAQ,CAAC;gBACP,OAAO,EAAE,QAAQ;gBACjB,OAAO,EAAE,sCAAsC;aAChD,CAAC,CAAC;YACH,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,OAAO,CACL,MAAC,MAAM,IAAC,SAAS,mBACf,MAAC,MAAM,IAAC,SAAS,QAAC,OAAO,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,aAClC,KAAK,EAAE,IAAI,IAAI,IAAI,IAAI,CACtB,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,KAAK,EAAC,kBAAkB,EACxB,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAI,EAClE,OAAO,EAAE,mBAAmB,GAC5B,CACH,EACA,KAAK,EAAE,IAAI,IAAI,QAAQ,IAAI,CAC1B,KAAC,MAAM,IACL,KAAK,EAAC,eAAe,EACrB,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,YAAY,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,GAAG,EACzE,OAAO,EAAE,uBAAuB,GAChC,CACH,IACM,EACR,KAAK,EAAE,GAAG,IAAI,CACb,8BACE,KAAC,IAAI,KAAG,EACR,KAAC,MAAM,IAAC,SAAS,QAAC,OAAO,EAAC,GAAG,YAC3B,KAAC,MAAM,IACL,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAC,wBAAwB,EAC9B,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,YAAY,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,GAAG,EAC7E,IAAI,EAAE,KAAK,CAAC,GAAG,GACf,GACK,IACR,CACJ,IACM,CACV,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC;IAEjF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,IAAI,EAAE,CAAC;YACT,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,UAAU,CACnB,UAAU,EACV,cAAc,EACd,YAAY,EACZ,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EACvB,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EACzB,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,gBACC,WAAW,KAClB,KAAK,YAER,OAAO,GACH,CACR,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,GAAG,EACV,SAAS,QACT,KAAK,EAAE,KAAK,gBACD,WAAW,YAErB,OAAO,GACH,CACR,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,aAAa,CAAC,CAAC,CAAC,CACrB,KAAC,WAAW,IAAC,QAAQ,EAAE,qBAAqB,EAAE,EAAE,SAAS,EAAC,cAAc,YACrE,UAAU,EAAE,GACD,CACf,CAAC,CAAC,CAAC,CACF,UAAU,EAAE,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/LogoCloud.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Grid, Logo } from ".";
+import type { ComponentProps } from "react";
+type LogoProps = ComponentProps<typeof Logo>;
+interface LogoCloudProps extends React.ComponentProps<typeof Grid> {
+    logos: LogoProps[];
+    className?: string;
+    style?: React.CSSProperties;
+    limit?: number;
+    rotationInterval?: number;
+}
+declare const LogoCloud: React.ForwardRefExoticComponent<Omit<LogoCloudProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { LogoCloud };
+//# sourceMappingURL=LogoCloud.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoCloud.d.ts","sourceRoot":"","sources":["../../src/components/LogoCloud.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,IAAI,EAAQ,IAAI,EAAE,MAAM,GAAG,CAAC;AAErC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,KAAK,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAE7C,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAChE,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAKD,QAAA,MAAM,SAAS,oGAwDd,CAAC;AAGF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/LogoCloud.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
+import classNames from "classnames";
+import { Grid, Flex, Logo } from ".";
+import styles from "./LogoCloud.module.scss";
+const ANIMATION_DURATION = 5000;
+const STAGGER_DELAY = 25;
+const LogoCloud = forwardRef(({ logos, className, style, limit = 6, rotationInterval = ANIMATION_DURATION, ...rest }, ref) => {
+    const [visibleLogos, setVisibleLogos] = useState(() => logos.slice(0, limit));
+    const [key, setKey] = useState(0);
+    const shouldRotate = logos.length > limit;
+    useEffect(() => {
+        if (!shouldRotate) {
+            setVisibleLogos(logos);
+            return;
+        }
+        const interval = setInterval(() => {
+            setVisibleLogos((currentLogos) => {
+                const currentIndices = currentLogos.map((logo) => logos.findIndex((l) => l === logo));
+                const nextIndices = currentIndices
+                    .map((index) => (index + 1) % logos.length)
+                    .sort((a, b) => a - b);
+                const nextLogos = nextIndices.map((index) => logos[index]);
+                setKey((k) => k + 1);
+                return nextLogos;
+            });
+        }, rotationInterval + STAGGER_DELAY * limit);
+        return () => clearInterval(interval);
+    }, [logos, limit, rotationInterval, shouldRotate]);
+    return (_jsx(Grid, { ref: ref, className: classNames(styles.container, className), style: style, ...rest, children: visibleLogos.map((logo, index) => (_jsx(Flex, { vertical: "center", horizontal: "center", paddingX: "24", paddingY: "20", radius: "l", children: _jsx(Logo, { className: shouldRotate ? styles.logo : styles.staticLogo, style: {
+                    ...logo.style,
+                    animationDelay: `${index * STAGGER_DELAY}ms`,
+                }, ...logo }) }, `${key}-${index}`))) }));
+});
+LogoCloud.displayName = "LogoCloud";
+export { LogoCloud };
+//# sourceMappingURL=LogoCloud.js.map

package/dist/components/LogoCloud.js.map

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

package/dist/components/LogoCloud.module.scss

@@ -0,0 +1,42 @@
+.logo {
+    animation: fadeInOut 5s ease-out both;
+    will-change: opacity, filter, transform;
+    transform-origin: center;
+}
+
+.staticLogo {
+    animation: fadeIn 1s ease-out forwards;
+    will-change: opacity, filter, transform;
+    transform-origin: center;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        filter: blur(1.5rem);
+        transform: scale(0.2);
+    }
+    100% {
+        opacity: 1;
+        filter: blur(0);
+        transform: scale(1);
+    }
+}
+
+@keyframes fadeInOut {
+    0% {
+        opacity: 0;
+        filter: blur(1.5rem);
+        transform: scale(0.2);
+    }
+    4%, 96% {
+        opacity: 1;
+        filter: blur(0);
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        filter: blur(1.5rem);
+        transform: scale(0.2);
+    }
+}

package/dist/components/Mask.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { Flex } from ".";
+export interface MaskProps extends Omit<React.ComponentProps<typeof Flex>, "radius" | "cursor"> {
+    cursor?: boolean;
+    x?: number;
+    y?: number;
+    radius?: number;
+    reducedMotion?: boolean | "auto";
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+declare const Mask: React.ForwardRefExoticComponent<Omit<MaskProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Mask };
+//# sourceMappingURL=Mask.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Mask.d.ts","sourceRoot":"","sources":["../../src/components/Mask.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAMzB,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,IAAI,+FA8HT,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Mask.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { Flex } from ".";
+import styles from "./Mask.module.scss";
+import classNames from "classnames";
+import { useInViewport } from "../hooks/useInViewport";
+import { useReducedMotion } from "../hooks/useReducedMotion";
+const Mask = forwardRef(({ cursor = false, x, y, radius = 50, reducedMotion = "auto", children, className, style, ...rest }, forwardedRef) => {
+    const maskRef = useRef(null);
+    const cursorPosRef = useRef({ x: 0, y: 0 });
+    const smoothPosRef = useRef({ x: 0, y: 0 });
+    const rafIdRef = useRef(null);
+    const isInViewport = useInViewport(maskRef);
+    const { shouldAnimate } = useReducedMotion(reducedMotion);
+    const isActive = cursor && isInViewport && shouldAnimate;
+    useEffect(() => {
+        if (forwardedRef) {
+            if (typeof forwardedRef === "function") {
+                forwardedRef(maskRef.current);
+            }
+            else if (forwardedRef && "current" in forwardedRef) {
+                forwardedRef.current = maskRef.current;
+            }
+        }
+    }, [forwardedRef]);
+    const writeCssVars = useCallback((px, py) => {
+        const el = maskRef.current;
+        if (!el)
+            return;
+        el.style.setProperty("--mask-position-x", `${px}px`);
+        el.style.setProperty("--mask-position-y", `${py}px`);
+    }, []);
+    useEffect(() => {
+        if (!isActive)
+            return;
+        const handleMouseMove = (event) => {
+            const el = maskRef.current;
+            if (!el)
+                return;
+            const rect = el.getBoundingClientRect();
+            cursorPosRef.current = {
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            };
+        };
+        document.addEventListener("mousemove", handleMouseMove, { passive: true });
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+        };
+    }, [isActive]);
+    useEffect(() => {
+        if (!isActive) {
+            if (rafIdRef.current != null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+            return;
+        }
+        const easingFactor = 0.05;
+        const convergenceThreshold = 0.5;
+        const tick = () => {
+            const target = cursorPosRef.current;
+            const prev = smoothPosRef.current;
+            const dx = target.x - prev.x;
+            const dy = target.y - prev.y;
+            if (Math.abs(dx) > convergenceThreshold || Math.abs(dy) > convergenceThreshold) {
+                const nx = prev.x + dx * easingFactor;
+                const ny = prev.y + dy * easingFactor;
+                smoothPosRef.current = { x: nx, y: ny };
+                writeCssVars(nx, ny);
+            }
+            rafIdRef.current = requestAnimationFrame(tick);
+        };
+        rafIdRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (rafIdRef.current != null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+        };
+    }, [isActive, writeCssVars]);
+    const maskStyle = () => {
+        if (cursor) {
+            return {
+                "--mask-position-x": `${smoothPosRef.current.x}px`,
+                "--mask-position-y": `${smoothPosRef.current.y}px`,
+                "--mask-radius": `${radius}vh`,
+            };
+        }
+        if (x != null && y != null) {
+            return {
+                "--mask-position-x": `${x}%`,
+                "--mask-position-y": `${y}%`,
+                "--mask-radius": `${radius}vh`,
+            };
+        }
+        return {};
+    };
+    return (_jsx(Flex, { ref: maskRef, fill: true, className: classNames(styles.mask, className), top: "0", left: "0", zIndex: 0, overflow: "hidden", style: {
+            ...maskStyle(),
+            ...style,
+        }, ...rest, children: children }));
+});
+Mask.displayName = "Mask";
+export { Mask };
+//# sourceMappingURL=Mask.js.map

package/dist/components/Mask.js.map

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

package/dist/components/Mask.module.scss

@@ -0,0 +1,8 @@
+.mask {
+  mask-size: 100% 100%;
+  mask-image: radial-gradient(
+    var(--mask-radius) at var(--mask-position-x) var(--mask-position-y),
+    black 0%,
+    transparent 100%
+  );
+}

package/dist/components/MasonryGrid.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { CSSProperties, ReactNode } from "react";
+import { SpacingToken } from "../types";
+import { Flex } from "./Flex";
+interface MasonryBreakpointProps {
+    columns?: number;
+    hide?: boolean;
+}
+interface MasonryGridProps extends Omit<React.ComponentProps<typeof Flex>, 'l' | 'm' | 's' | 'xs'> {
+    children: ReactNode;
+    gap?: SpacingToken | "-1" | undefined;
+    columns?: number;
+    style?: CSSProperties;
+    className?: string;
+    l?: MasonryBreakpointProps;
+    m?: MasonryBreakpointProps;
+    s?: MasonryBreakpointProps;
+    xs?: MasonryBreakpointProps;
+}
+declare const MasonryGrid: React.ForwardRefExoticComponent<Omit<MasonryGridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MasonryGrid };
+//# sourceMappingURL=MasonryGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MasonryGrid.d.ts","sourceRoot":"","sources":["../../src/components/MasonryGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAIxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAmCD,UAAU,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAChG,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,CAAC,EAAE,sBAAsB,CAAC;IAC3B,CAAC,CAAC,EAAE,sBAAsB,CAAC;IAC3B,CAAC,CAAC,EAAE,sBAAsB,CAAC;IAC3B,EAAE,CAAC,EAAE,sBAAsB,CAAC;CAC7B;AAED,QAAA,MAAM,WAAW,sGAwChB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/MasonryGrid.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import { Column } from "./Column";
+import classNames from "classnames";
+import styles from "./MasonryGrid.module.scss";
+import { Flex } from "./Flex";
+function parseToken(value, type) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === "number")
+        return `${value}rem`;
+    if ([
+        "0",
+        "1",
+        "2",
+        "4",
+        "8",
+        "12",
+        "16",
+        "20",
+        "24",
+        "32",
+        "40",
+        "48",
+        "56",
+        "64",
+        "80",
+        "104",
+        "128",
+        "160",
+    ].includes(value)) {
+        return `var(--static-space-${value})`;
+    }
+    if (["xs", "s", "m", "l", "xl"].includes(value)) {
+        return `var(--responsive-${type}-${value})`;
+    }
+    return undefined;
+}
+const MasonryGrid = forwardRef(({ children, gap = "8", columns = 3, style, className, l, m, s, xs, ...flex }, ref) => {
+    const gapValue = parseToken(gap, "width") ?? "var(--static-space-8)";
+    const classes = classNames(columns && styles[`columns-${columns}`], l?.columns && styles[`l-columns-${l.columns}`], m?.columns && styles[`m-columns-${m.columns}`], s?.columns && styles[`s-columns-${s.columns}`], xs?.columns && styles[`xs-columns-${xs.columns}`], className);
+    return (_jsx(Flex, { fillWidth: true, className: classes, ref: ref, ...flex, style: {
+            display: "block",
+            columnGap: gapValue,
+            ...style,
+        }, children: React.Children.map(children, (child, idx) => (_jsx(Column, { fillWidth: true, fitHeight: true, style: {
+                breakInside: "avoid",
+                marginBottom: gapValue,
+            }, children: child }, idx))) }));
+});
+export { MasonryGrid };
+MasonryGrid.displayName = "MasonryGrid";
+//# sourceMappingURL=MasonryGrid.js.map

package/dist/components/MasonryGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasonryGrid.js","sourceRoot":"","sources":["../../src/components/MasonryGrid.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAO9B,SAAS,UAAU,CAAC,KAA+C,EAAE,IAAwB;IAC3F,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IAC1C,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,GAAG,KAAK,KAAK,CAAC;IACpD,IACE;QACE,GAAG;QACH,GAAG;QACH,GAAG;QACH,GAAG;QACH,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,KAAK;QACL,KAAK;QACL,KAAK;KACN,CAAC,QAAQ,CAAC,KAAK,CAAC,EACjB,CAAC;QACD,OAAO,sBAAsB,KAAK,GAAG,CAAC;IACxC,CAAC;IACD,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QAChD,OAAO,oBAAoB,IAAI,IAAI,KAAK,GAAG,CAAC;IAC9C,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAcD,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAE,QAAQ,EAAE,GAAG,GAAG,GAAG,EAAE,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACpF,MAAM,QAAQ,GAAG,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,uBAAuB,CAAC;IAErE,MAAM,OAAO,GAAG,UAAU,CACxB,OAAO,IAAI,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EACvC,CAAC,EAAE,OAAO,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,CAAC,EAC9C,CAAC,EAAE,OAAO,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,CAAC,EAC9C,CAAC,EAAE,OAAO,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,CAAC,EAC9C,EAAE,EAAE,OAAO,IAAI,MAAM,CAAC,cAAc,EAAE,CAAC,OAAO,EAAE,CAAC,EACjD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,SAAS,QACT,SAAS,EAAE,OAAO,EAClB,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,SAAS,EAAE,QAAQ;YACnB,GAAG,KAAK;SACT,YACA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5C,KAAC,MAAM,IAEL,SAAS,QACT,SAAS,QACT,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,YAAY,EAAE,QAAQ;aACvB,YAEA,KAAK,IARD,GAAG,CASD,CACV,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/components/MasonryGrid.module.scss

@@ -0,0 +1,199 @@
+@use "../styles/breakpoints.scss" as breakpoints;
+
+.columns-1 {
+  column-count: 1;
+}
+
+.columns-2 {
+  column-count: 2;
+}
+
+.columns-3 {
+  column-count: 3;
+}
+
+.columns-4 {
+  column-count: 4;
+}
+
+.columns-5 {
+  column-count: 5;
+}
+
+.columns-6 {
+  column-count: 6;
+}
+
+.columns-7 {
+  column-count: 7;
+}
+
+.columns-8 {
+  column-count: 8;
+}
+
+.columns-9 {
+  column-count: 9;
+}
+
+.columns-10 {
+  column-count: 10;
+}
+
+.columns-11 {
+  column-count: 11;
+}
+
+.columns-12 {
+  column-count: 12;
+}
+
+@include breakpoints.l {
+  .l-columns-1 {
+      column-count: 1;
+  }
+
+  .l-columns-2 {
+      column-count: 2;
+  }
+
+  .l-columns-3 {
+      column-count: 3;
+  }
+
+  .l-columns-4 {
+      column-count: 4;
+  }
+
+  .l-columns-5 {
+      column-count: 5;
+  }
+
+  .l-columns-6 {
+      column-count: 6;
+  }
+
+  .l-columns-7 {
+      column-count: 7;
+  }
+
+  .l-columns-8 {
+      column-count: 8;
+  }
+
+  .l-columns-9 {
+      column-count: 9;
+  }
+
+  .l-columns-10 {
+      column-count: 10;
+  }
+
+  .l-columns-11 {
+      column-count: 11;
+  }
+
+  .l-columns-12 {
+      column-count: 12;
+  }
+}
+
+@include breakpoints.m {
+  .m-columns-1 {
+      column-count: 1;
+  }
+
+  .m-columns-2 {
+      column-count: 2;
+  }
+
+  .m-columns-3 {
+      column-count: 3;
+  }
+
+  .m-columns-4 {
+      column-count: 4;
+  }
+
+  .m-columns-5 {
+      column-count: 5;
+  }
+
+  .m-columns-6 {
+      column-count: 6;
+  }
+
+  .m-columns-7 {
+      column-count: 7;
+  }
+
+  .m-columns-8 {
+      column-count: 8;
+  }
+
+  .m-columns-9 {
+      column-count: 9;
+  }
+
+  .m-columns-10 {
+      column-count: 10;
+  }
+
+  .m-columns-11 {
+      column-count: 11;
+  }
+
+  .m-columns-12 {
+      column-count: 12;
+  }
+}
+
+@include breakpoints.s {
+  .s-columns-1 {
+      column-count: 1;
+  }
+
+  .s-columns-2 {
+      column-count: 2;
+  }
+
+  .s-columns-3 {
+      column-count: 3;
+  }
+
+  .s-columns-4 {
+      column-count: 4;
+  }
+
+  .s-columns-5 {
+      column-count: 5;
+  }
+
+  .s-columns-6 {
+      column-count: 6;
+  }
+
+  .s-columns-7 {
+      column-count: 7;
+  }
+
+  .s-columns-8 {
+      column-count: 8;
+  }
+
+  .s-columns-9 {
+      column-count: 9;
+  }
+
+  .s-columns-10 {
+      column-count: 10;
+  }
+
+  .s-columns-11 {
+      column-count: 11;
+  }
+
+  .s-columns-12 {
+      column-count: 12;
+  }
+}