@pathscale/ui 0.1.1 → 1.2.0

package/dist/components/svgbackground/SvgBackground.js

@@ -0,0 +1,413 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><ellipse></svg>", false, true, false), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle></svg>", false, true, false), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=0 r=100 opacity=0.7></svg>", false, true, false), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=0 r=120></svg>", false, true, false), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=400 r=100 opacity=0.7></svg>", false, true, false), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=400 r=120></svg>", false, true, false), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=200 r=70 opacity=0.6></svg>", false, true, false), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=0 r=100></svg>", false, true, false), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=200 r=100></svg>", false, true, false), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=400 r=100></svg>", false, true, false), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class=hidden><svg viewBox="0 0 400 400"xmlns=http://www.w3.org/2000/svg><rect width=400 height=400></rect></svg></div><canvas></canvas><div class="relative z-10 h-full w-full">'), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
+function hexToRgb(hex) {
+    hex = hex.replace(/^#/, "");
+    const bigint = Number.parseInt(hex, 16);
+    const r = bigint >> 16 & 255;
+    const g = bigint >> 8 & 255;
+    const b = 255 & bigint;
+    return {
+        r,
+        g,
+        b
+    };
+}
+function SvgBackground(props) {
+    const [local] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "colorStart",
+        "colorEnd",
+        "backgroundColor",
+        "opacity",
+        "blurIntensity",
+        "density",
+        "darkness",
+        "class",
+        "style",
+        "children"
+    ]);
+    let containerRef;
+    let svgRef;
+    let canvasRef;
+    const [isBackgroundReady, setBackgroundReady] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const getIntermediateColor = (t)=>{
+        const start = hexToRgb(local.colorStart ?? "#6366f1");
+        const end = hexToRgb(local.colorEnd ?? "#4f46e5");
+        const r = Math.round(start.r + (end.r - start.r) * t);
+        const g = Math.round(start.g + (end.g - start.g) * t);
+        const b = Math.round(start.b + (end.b - start.b) * t);
+        return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+    };
+    const generateShapes = ()=>{
+        const normalizedDensity = Math.max(1, local.density ?? 5);
+        const maxShapes = Math.min(200, Math.max(10, Math.ceil(15 + 8 * Math.sqrt(normalizedDensity))));
+        const colors = [];
+        for(let i = 0; i < maxShapes; i++){
+            const randomOffset = 0.1 * Math.sin(0.1 * i);
+            const t = i / (maxShapes - 1) + randomOffset;
+            colors.push(getIntermediateColor(Math.max(0, Math.min(1, t))));
+        }
+        const seed = 42;
+        const random = (i)=>{
+            const x = 10000 * Math.sin(seed + 100 * i);
+            return x - Math.floor(x);
+        };
+        const gridSize = Math.ceil(Math.sqrt(maxShapes / 1.5));
+        const cellWidth = 400 / gridSize;
+        const cellHeight = 400 / gridSize;
+        const minRadius = 40;
+        const baseCount = Math.ceil(gridSize * gridSize * 0.8);
+        const baseShapes = [];
+        const coveredGrid = Array(gridSize).fill(0).map(()=>Array(gridSize).fill(false));
+        for(let i = 0; i < gridSize; i++)for(let j = 0; j < gridSize; j++){
+            if (baseShapes.length >= baseCount) continue;
+            const isLeftSide = i < gridSize / 3;
+            const leftSideMultiplier = isLeftSide ? 3 : 1;
+            const skipChance = Math.max(0, (0.2 - normalizedDensity / 100) * leftSideMultiplier);
+            if (random(100 * i + j) < skipChance) continue;
+            coveredGrid[i][j] = true;
+            const randomOffsetMultiplier = isLeftSide ? 1.5 : 1;
+            const randomOffset = 0.4 * Math.min(cellWidth, cellHeight) * (1 - Math.min(1, normalizedDensity / 50)) * randomOffsetMultiplier;
+            const cx = i * cellWidth + cellWidth / 2 + (2 * random(200 * i + j) - 1) * randomOffset;
+            const cy = j * cellHeight + cellHeight / 2 + (2 * random(300 * i + j) - 1) * randomOffset;
+            const sizeRatioBase = Math.max(0.6, 1.2 - 0.15 * Math.log10(normalizedDensity + 1));
+            const sizeRatio = isLeftSide ? 0.8 * sizeRatioBase : sizeRatioBase;
+            const baseRadius = Math.min(cellWidth, cellHeight) * sizeRatio;
+            const sizeVariationBase = Math.max(0.2, 0.5 - normalizedDensity / 200);
+            const sizeVariation = isLeftSide ? 1.5 * sizeVariationBase : sizeVariationBase;
+            const radius = Math.max(minRadius, baseRadius * (0.8 + random(400 * i + j) * sizeVariation));
+            const colorIndexBase = Math.floor(random(500 * i + j) * colors.length);
+            const colorIndex = isLeftSide ? Math.floor((colorIndexBase + random(600 * i + j) * colors.length) / 2) : colorIndexBase;
+            const color = colors[colorIndex];
+            const opacity = isLeftSide && random(700 * i + j) > 0.6 ? 0.7 + 0.3 * random(800 * i + j) : 1;
+            const ellipseChance = isLeftSide ? 0.6 : 0.4;
+            if (random(600 * i + j) > 1 - ellipseChance) {
+                const rx = radius;
+                const ry = Math.max(minRadius, radius * (0.6 + 0.8 * random(700 * i + j)));
+                const rotation = 360 * random(800 * i + j);
+                baseShapes.push((()=>{
+                    var _el$ = _tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "fill", color);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "transform", `rotate(${rotation} ${cx} ${cy})`);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$ = cx.toString(), _v$2 = cy.toString(), _v$3 = rx.toString(), _v$4 = ry.toString(), _v$5 = opacity.toString();
+                        _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "cx", _p$.e = _v$);
+                        _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "cy", _p$.t = _v$2);
+                        _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "rx", _p$.a = _v$3);
+                        _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "ry", _p$.o = _v$4);
+                        _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "opacity", _p$.i = _v$5);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0,
+                        o: void 0,
+                        i: void 0
+                    });
+                    return _el$;
+                })());
+            } else baseShapes.push((()=>{
+                var _el$2 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "fill", color);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                    var _v$6 = cx.toString(), _v$7 = cy.toString(), _v$8 = radius.toString(), _v$9 = opacity.toString();
+                    _v$6 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "cx", _p$.e = _v$6);
+                    _v$7 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "cy", _p$.t = _v$7);
+                    _v$8 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "r", _p$.a = _v$8);
+                    _v$9 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "opacity", _p$.o = _v$9);
+                    return _p$;
+                }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0,
+                    o: void 0
+                });
+                return _el$2;
+            })());
+        }
+        for(let i = 0; i < gridSize; i++)for(let j = 0; j < gridSize; j++)if (!coveredGrid[i][j]) {
+            const isLeftSide = i < gridSize / 3;
+            if (isLeftSide && random(900 * i + j) < 0.3) continue;
+            const cx = i * cellWidth + cellWidth / 2;
+            const cy = j * cellHeight + cellHeight / 2;
+            const radiusBase = 0.7 * Math.min(cellWidth, cellHeight);
+            const radius = Math.max(minRadius, isLeftSide ? 0.8 * radiusBase : radiusBase);
+            const colorIndex = Math.floor(random(900 * i + j) * colors.length);
+            const opacity = isLeftSide ? 0.7 + 0.3 * random(950 * i + j) : 1;
+            baseShapes.push((()=>{
+                var _el$3 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                    var _v$0 = cx.toString(), _v$1 = cy.toString(), _v$10 = radius.toString(), _v$11 = colors[colorIndex], _v$12 = opacity.toString();
+                    _v$0 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "cx", _p$.e = _v$0);
+                    _v$1 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "cy", _p$.t = _v$1);
+                    _v$10 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "r", _p$.a = _v$10);
+                    _v$11 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "fill", _p$.o = _v$11);
+                    _v$12 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "opacity", _p$.i = _v$12);
+                    return _p$;
+                }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0,
+                    o: void 0,
+                    i: void 0
+                });
+                return _el$3;
+            })());
+        }
+        const edgeShapes = [
+            (()=>{
+                var _el$4 = _tmpl$3();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "fill", local.colorStart ?? "#6366f1"));
+                return _el$4;
+            })(),
+            (()=>{
+                var _el$5 = _tmpl$4();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "fill", getIntermediateColor(0.25)));
+                return _el$5;
+            })(),
+            (()=>{
+                var _el$6 = _tmpl$5();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "fill", getIntermediateColor(0.75)));
+                return _el$6;
+            })(),
+            (()=>{
+                var _el$7 = _tmpl$6();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "fill", local.colorEnd ?? "#4f46e5"));
+                return _el$7;
+            })(),
+            (()=>{
+                var _el$8 = _tmpl$7();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$8, "fill", getIntermediateColor(0.65)));
+                return _el$8;
+            })(),
+            (()=>{
+                var _el$9 = _tmpl$8();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$9, "fill", getIntermediateColor(0.15)));
+                return _el$9;
+            })(),
+            (()=>{
+                var _el$0 = _tmpl$9();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "fill", getIntermediateColor(0.4)));
+                return _el$0;
+            })(),
+            (()=>{
+                var _el$1 = _tmpl$0();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "fill", getIntermediateColor(0.85)));
+                return _el$1;
+            })()
+        ];
+        const accentShapes = [];
+        const accentCount = Math.max(0, maxShapes - baseShapes.length - edgeShapes.length);
+        const leftSideAccentCount = Math.floor(0.6 * accentCount);
+        const rightSideAccentCount = accentCount - leftSideAccentCount;
+        for(let i = 0; i < leftSideAccentCount; i++){
+            const cx = 20 + 120 * random(1000 + i);
+            const cy = 20 + 360 * random(2000 + i);
+            const radius = minRadius * (0.5 + 0.6 * random(3000 + i));
+            const colorIndex = Math.floor(random(4000 + i) * colors.length);
+            const opacity = 0.6 + 0.4 * random(5500 + i);
+            if (random(5000 + i) > 0.4) accentShapes.push((()=>{
+                var _el$10 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                    var _v$13 = cx.toString(), _v$14 = cy.toString(), _v$15 = radius.toString(), _v$16 = colors[colorIndex], _v$17 = opacity.toString();
+                    _v$13 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "cx", _p$.e = _v$13);
+                    _v$14 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "cy", _p$.t = _v$14);
+                    _v$15 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "r", _p$.a = _v$15);
+                    _v$16 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "fill", _p$.o = _v$16);
+                    _v$17 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "opacity", _p$.i = _v$17);
+                    return _p$;
+                }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0,
+                    o: void 0,
+                    i: void 0
+                });
+                return _el$10;
+            })());
+            else {
+                const rx = radius;
+                const ry = radius * (0.4 + 0.6 * random(6000 + i));
+                const rotation = 360 * random(7000 + i);
+                accentShapes.push((()=>{
+                    var _el$11 = _tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "transform", `rotate(${rotation} ${cx} ${cy})`);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$18 = cx.toString(), _v$19 = cy.toString(), _v$20 = rx.toString(), _v$21 = ry.toString(), _v$22 = colors[colorIndex], _v$23 = opacity.toString();
+                        _v$18 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "cx", _p$.e = _v$18);
+                        _v$19 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "cy", _p$.t = _v$19);
+                        _v$20 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "rx", _p$.a = _v$20);
+                        _v$21 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "ry", _p$.o = _v$21);
+                        _v$22 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "fill", _p$.i = _v$22);
+                        _v$23 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "opacity", _p$.n = _v$23);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0,
+                        o: void 0,
+                        i: void 0,
+                        n: void 0
+                    });
+                    return _el$11;
+                })());
+            }
+        }
+        for(let i = 0; i < rightSideAccentCount; i++){
+            const cx = 140 + 260 * random(8000 + i);
+            const cy = 20 + 360 * random(9000 + i);
+            const radius = minRadius * (0.7 + 0.8 * random(10000 + i));
+            const colorIndex = Math.floor(random(11000 + i) * colors.length);
+            if (random(12000 + i) > 0.3) accentShapes.push((()=>{
+                var _el$12 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                    var _v$24 = cx.toString(), _v$25 = cy.toString(), _v$26 = radius.toString(), _v$27 = colors[colorIndex];
+                    _v$24 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "cx", _p$.e = _v$24);
+                    _v$25 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "cy", _p$.t = _v$25);
+                    _v$26 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "r", _p$.a = _v$26);
+                    _v$27 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "fill", _p$.o = _v$27);
+                    return _p$;
+                }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0,
+                    o: void 0
+                });
+                return _el$12;
+            })());
+            else {
+                const rx = radius;
+                const ry = radius * (0.5 + 0.8 * random(13000 + i));
+                const rotation = 360 * random(14000 + i);
+                accentShapes.push((()=>{
+                    var _el$13 = _tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "transform", `rotate(${rotation} ${cx} ${cy})`);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$28 = cx.toString(), _v$29 = cy.toString(), _v$30 = rx.toString(), _v$31 = ry.toString(), _v$32 = colors[colorIndex];
+                        _v$28 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "cx", _p$.e = _v$28);
+                        _v$29 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "cy", _p$.t = _v$29);
+                        _v$30 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "rx", _p$.a = _v$30);
+                        _v$31 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "ry", _p$.o = _v$31);
+                        _v$32 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "fill", _p$.i = _v$32);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0,
+                        o: void 0,
+                        i: void 0
+                    });
+                    return _el$13;
+                })());
+            }
+        }
+        return [
+            ...edgeShapes,
+            ...baseShapes,
+            ...accentShapes
+        ];
+    };
+    const renderSvgToCanvas = ()=>{
+        if (!svgRef || !canvasRef) return;
+        const svgData = new XMLSerializer().serializeToString(svgRef);
+        const svgBlob = new Blob([
+            svgData
+        ], {
+            type: "image/svg+xml"
+        });
+        const svgUrl = URL.createObjectURL(svgBlob);
+        const img = new Image();
+        img.src = svgUrl;
+        img.onload = ()=>{
+            if (!canvasRef) return;
+            if (containerRef) {
+                const rect = containerRef.getBoundingClientRect();
+                const blurPadding = Math.ceil((local.blurIntensity ?? 40) * 2);
+                canvasRef.width = rect.width + 2 * blurPadding;
+                canvasRef.height = rect.height + 2 * blurPadding;
+            }
+            const ctx = canvasRef.getContext("2d");
+            if (!ctx) return;
+            ctx.clearRect(0, 0, canvasRef.width, canvasRef.height);
+            ctx.fillStyle = local.backgroundColor ?? "#000000";
+            ctx.fillRect(0, 0, canvasRef.width, canvasRef.height);
+            const blur = local.blurIntensity ?? 40;
+            ctx.drawImage(img, 2 * -blur, 2 * -blur, canvasRef.width + 4 * blur, canvasRef.height + 4 * blur);
+            URL.revokeObjectURL(svgUrl);
+            setBackgroundReady(true);
+        };
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (window && "ResizeObserver" in window) {
+            const observer = new ResizeObserver(()=>{
+                renderSvgToCanvas();
+            });
+            if (containerRef) observer.observe(containerRef);
+            return ()=>{
+                if (containerRef) observer.unobserve(containerRef);
+            };
+        }
+        renderSvgToCanvas();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        local.colorStart, local.colorEnd, local.backgroundColor, local.opacity, local.blurIntensity, local.density;
+        setTimeout(()=>{
+            renderSvgToCanvas();
+        }, 0);
+    });
+    const backgroundStyle = ()=>({
+            position: "relative",
+            overflow: "hidden",
+            ...local.style
+        });
+    const canvasStyle = ()=>{
+        const blur = local.blurIntensity ?? 40;
+        const op = local.opacity ?? 1;
+        return {
+            position: "absolute",
+            top: `-${2 * blur}px`,
+            left: `-${2 * blur}px`,
+            width: `calc(100% + ${4 * blur}px)`,
+            height: `calc(100% + ${4 * blur}px)`,
+            "z-index": "0",
+            opacity: op.toString(),
+            filter: `blur(${blur}px)`
+        };
+    };
+    return (()=>{
+        var _el$14 = _tmpl$1(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$15.nextSibling, _el$19 = _el$18.nextSibling;
+        var _ref$ = containerRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$14) : containerRef = _el$14;
+        var _ref$2 = svgRef;
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$16) : svgRef = _el$16;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, generateShapes, null);
+        var _ref$3 = canvasRef;
+        "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$18) : canvasRef = _el$18;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$14, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>(local.darkness ?? 0) > 0);
+            return ()=>_c$() && (()=>{
+                    var _el$20 = _tmpl$10();
+                    _el$20.style.setProperty("pointer-events", "none");
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(_$p = `rgba(0, 0, 0, ${local.darkness ?? 0})`, _el$20.style.setProperty("background-color", _$p)));
+                    return _el$20;
+                })();
+        })(), _el$19);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$19, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$33 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative flex items-center justify-center", local.class), _v$34 = backgroundStyle(), _v$35 = local.backgroundColor ?? "#000000", _v$36 = canvasStyle();
+            _v$33 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$14, _p$.e = _v$33);
+            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$14, _v$34, _p$.t);
+            _v$35 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$17, "fill", _p$.a = _v$35);
+            _p$.o = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$18, _v$36, _p$.o);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+        });
+        return _el$14;
+    })();
+}
+export { SvgBackground as default };

package/dist/components/svgbackground/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__SvgBackground_js_31ad6613__ from "./SvgBackground.js";
+var __webpack_exports__SvgBackground = __WEBPACK_EXTERNAL_MODULE__SvgBackground_js_31ad6613__["default"];
+export { __webpack_exports__SvgBackground as SvgBackground };

package/dist/components/swap/Swap.d.ts

@@ -1,3 +1,4 @@
+import "./swap.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type SwapProps = Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "onClick" | "onChange"> & IComponentBaseProps & {

package/dist/components/swap/Swap.js

@@ -0,0 +1,57 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./swap.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__ from "../utils.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label><input type=checkbox>");
+function Swap(props) {
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "onElement",
+        "offElement",
+        "active",
+        "rotate",
+        "flip",
+        "dataTheme",
+        "class",
+        "className",
+        "onClick",
+        "onChange"
+    ]);
+    const className = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("swap", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "swap-active": local.active,
+            "swap-rotate": local.rotate,
+            "swap-flip": local.flip
+        }), local.class, local.className));
+    const onEl = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.wrapWithElementIfInvalid)({
+            node: local.onElement,
+            wrapper: "div",
+            className: "swap-on flex h-full w-full items-center justify-center"
+        }));
+    const offEl = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.wrapWithElementIfInvalid)({
+            node: local.offElement,
+            wrapper: "div",
+            className: "swap-off flex h-full w-full items-center justify-center"
+        }));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return className();
+            },
+            role: "switch"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.addEventListener)(_el$2, "change", local.onChange);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.addEventListener)(_el$2, "click", local.onClick, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, onEl, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, offEl, null);
+        return _el$;
+    })();
+}
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { Swap as default };

package/dist/components/swap/index.d.ts

@@ -1 +1 @@
-export { default } from "./Swap";
+export { default, type SwapProps } from "./Swap";

package/dist/components/swap/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Swap_js_f53c72fe__ from "./Swap.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Swap_js_f53c72fe__["default"];
+export { __webpack_exports__default as default };

package/dist/components/swap/swap.css

@@ -0,0 +1,92 @@
+@layer components {
+  .swap {
+      position: relative;
+      display: inline-grid;
+      cursor: pointer;
+      place-content: center;
+      vertical-align: middle;
+      webkit-user-select: none;
+      user-select: none;
+    }
+
+  .swap input {
+      appearance: none;
+      border: none;
+    }
+
+  .swap > * {
+      grid-column-start: 1;
+      grid-row-start: 1;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .swap > * {
+      transition-property: transform, rotate, opacity;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+    }
+
+  .swap .swap-on,
+    .swap .swap-indeterminate,
+    .swap input:indeterminate ~ .swap-on {
+      opacity: 0%;
+    }
+
+  .swap input:is(:checked, :indeterminate) ~ .swap-off {
+      opacity: 0%;
+    }
+
+  .swap input:checked ~ .swap-on,
+    .swap input:indeterminate ~ .swap-indeterminate {
+      opacity: 100%;
+      backface-visibility: visible;
+    }
+
+  .swap-rotate .swap-on,
+    .swap-rotate input:indeterminate ~ .swap-on {
+      rotate: 45deg;
+    }
+
+  .swap-rotate input:is(:checked, :indeterminate) ~ .swap-on,
+    .swap-rotate.swap-active .swap-on {
+      rotate: 0deg;
+    }
+
+  .swap-rotate input:is(:checked, :indeterminate) ~ .swap-off,
+    .swap-rotate.swap-active .swap-off {
+      rotate: calc(45deg * -1);
+    }
+
+  .swap-flip {
+      transform-style: preserve-3d;
+      perspective: 20rem;
+    }
+
+  .swap-flip .swap-on,
+    .swap-flip .swap-indeterminate,
+    .swap-flip input:indeterminate ~ .swap-on {
+      transform: rotateY(180deg);
+      backface-visibility: hidden;
+    }
+
+  .swap-flip input:is(:checked, :indeterminate) ~ .swap-on,
+    .swap-flip.swap-active .swap-on {
+      transform: rotateY(0deg);
+    }
+
+  .swap-flip input:is(:checked, :indeterminate) ~ .swap-off,
+    .swap-flip.swap-active .swap-off {
+      transform: rotateY(-180deg);
+      backface-visibility: hidden;
+      opacity: 100%;
+    }
+
+  .swap-active .swap-off {
+      opacity: 0%;
+    }
+
+  .swap-active .swap-on {
+      opacity: 100%;
+    }
+}

package/dist/components/switch-field/SwitchField.d.ts

@@ -0,0 +1,19 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import type { ToggleColor, ToggleSize } from "../toggle/Toggle";
+/**
+ * @deprecated Use `<Toggle>` directly instead.
+ * SwitchField is now a thin wrapper around Toggle for backwards compatibility.
+ */
+export type SwitchFieldProps = IComponentBaseProps & {
+    label: string;
+    description?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: ToggleSize;
+    color?: ToggleColor;
+    error?: string;
+};
+declare const SwitchField: (props: SwitchFieldProps) => JSX.Element;
+export default SwitchField;