border-beam 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +70 -70
- package/dist/index.es.js +161 -157
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react/jsx-runtime"),v=require("react"),ke={sm:{borderRadius:32,borderWidth:1,width:70,height:36},md:{borderRadius:16,borderWidth:1},line:{borderRadius:16,borderWidth:1},"pulse-outside":{borderRadius:16,borderWidth:1},"pulse-inner":{borderRadius:16,borderWidth:1}},K={sm:{dark:{strokeOpacity:.46,innerOpacity:.24,bloomOpacity:.38,innerShadow:"rgba(255, 255, 255, 0.3)",saturation:1.2},light:{strokeOpacity:.12,innerOpacity:.3,bloomOpacity:.16,innerShadow:"rgba(0, 0, 0, 0.14)",saturation:1.8}},md:{dark:{strokeOpacity:.26,innerOpacity:.42,bloomOpacity:.24,innerShadow:"rgba(255, 255, 255, 0.27)",saturation:1.2},light:{strokeOpacity:.12,innerOpacity:.26,bloomOpacity:.34,innerShadow:"rgba(0, 0, 0, 0.14)",saturation:1.5}},line:{dark:{strokeOpacity:1.14,innerOpacity:.7,bloomOpacity:.8,innerShadow:"rgba(255, 255, 255, 0.1)",saturation:1.2},light:{strokeOpacity:.16,innerOpacity:.32,bloomOpacity:.3,innerShadow:"rgba(0, 0, 0, 0.14)",saturation:1.95}},"pulse-outside":{dark:{strokeOpacity:.94,innerOpacity:.34,bloomOpacity:.3,innerShadow:"transparent",saturation:1.2,brightness:1.9,hairlineOpacity:0},light:{strokeOpacity:1.96,innerOpacity:1.04,bloomOpacity:.42,innerShadow:"transparent",saturation:.6,brightness:1.7,hairlineOpacity:0}},"pulse-inner":{dark:{strokeOpacity:1.54,innerOpacity:.44,bloomOpacity:.66,innerShadow:"transparent",saturation:1.2,brightness:.75},light:{strokeOpacity:.32,innerOpacity:.4,bloomOpacity:.8,innerShadow:"transparent",saturation:.75,brightness:1.3}}},Re={dark:{...K.md.dark},light:{...K.md.light}},C={colorful:{border:[{color:"rgb(255, 50, 100)",pos:"33% -7.4%",size:"70px 40px"},{color:"rgb(40, 140, 255)",pos:"12% -5%",size:"60px 35px"},{color:"rgb(50, 200, 80)",pos:"2.1% 68.3%",size:"40px 70px"},{color:"rgb(30, 185, 170)",pos:"2.1% 68.3%",size:"20px 35px"},{color:"rgb(100, 70, 255)",pos:"74.4% 100%",size:"180px 32px"},{color:"rgb(40, 140, 255)",pos:"55% 100%",size:"85px 26px"},{color:"rgb(255, 120, 40)",pos:"93.9% 0%",size:"74px 32px"},{color:"rgb(240, 50, 180)",pos:"100% 27.1%",size:"26px 42px"},{color:"rgb(180, 40, 240)",pos:"100% 27.1%",size:"52px 48px"}],spike:{primary:"rgb(255, 60, 80)",secondary:"rgba(40, 190, 180, 0.98)"},spikeLt:{primary:"rgb(200, 30, 60)",secondary:"rgb(20, 150, 140)"}},mono:{border:[{color:"rgb(180, 180, 180)",pos:"33% -7.4%",size:"70px 40px"},{color:"rgb(140, 140, 140)",pos:"12% -5%",size:"60px 35px"},{color:"rgb(160, 160, 160)",pos:"2.1% 68.3%",size:"40px 70px"},{color:"rgb(130, 130, 130)",pos:"2.1% 68.3%",size:"20px 35px"},{color:"rgb(170, 170, 170)",pos:"74.4% 100%",size:"180px 32px"},{color:"rgb(150, 150, 150)",pos:"55% 100%",size:"85px 26px"},{color:"rgb(190, 190, 190)",pos:"93.9% 0%",size:"74px 32px"},{color:"rgb(145, 145, 145)",pos:"100% 27.1%",size:"26px 42px"},{color:"rgb(165, 165, 165)",pos:"100% 27.1%",size:"52px 48px"}],spike:{primary:"rgb(200, 200, 200)",secondary:"rgb(170, 170, 170)"},spikeLt:{primary:"rgb(80, 80, 80)",secondary:"rgb(120, 120, 120)"}},ocean:{border:[{color:"rgb(100, 80, 220)",pos:"33% -7.4%",size:"70px 40px"},{color:"rgb(60, 120, 255)",pos:"12% -5%",size:"60px 35px"},{color:"rgb(80, 100, 200)",pos:"2.1% 68.3%",size:"40px 70px"},{color:"rgb(50, 140, 220)",pos:"2.1% 68.3%",size:"20px 35px"},{color:"rgb(120, 80, 255)",pos:"74.4% 100%",size:"180px 32px"},{color:"rgb(70, 130, 255)",pos:"55% 100%",size:"85px 26px"},{color:"rgb(140, 100, 240)",pos:"93.9% 0%",size:"74px 32px"},{color:"rgb(90, 110, 230)",pos:"100% 27.1%",size:"26px 42px"},{color:"rgb(130, 70, 255)",pos:"100% 27.1%",size:"52px 48px"}],spike:{primary:"rgb(100, 120, 255)",secondary:"rgba(130, 100, 220, 0.98)"},spikeLt:{primary:"rgb(60, 60, 180)",secondary:"rgb(80, 100, 200)"}},sunset:{border:[{color:"rgb(255, 80, 50)",pos:"33% -7.4%",size:"70px 40px"},{color:"rgb(255, 160, 40)",pos:"12% -5%",size:"60px 35px"},{color:"rgb(255, 120, 60)",pos:"2.1% 68.3%",size:"40px 70px"},{color:"rgb(255, 200, 50)",pos:"2.1% 68.3%",size:"20px 35px"},{color:"rgb(255, 100, 80)",pos:"74.4% 100%",size:"180px 32px"},{color:"rgb(255, 180, 60)",pos:"55% 100%",size:"85px 26px"},{color:"rgb(255, 60, 60)",pos:"93.9% 0%",size:"74px 32px"},{color:"rgb(255, 140, 50)",pos:"100% 27.1%",size:"26px 42px"},{color:"rgb(255, 90, 70)",pos:"100% 27.1%",size:"52px 48px"}],spike:{primary:"rgb(255, 140, 80)",secondary:"rgba(255, 100, 60, 0.98)"},spikeLt:{primary:"rgb(200, 80, 40)",secondary:"rgb(220, 120, 30)"}}},ve={colorful:{border:[{color:"rgb(50, 200, 80)",pos:"2% 68%",size:"9px 18px"},{color:"rgb(30, 185, 170)",pos:"2% 68%",size:"4px 8px"},{color:"rgb(255, 120, 40)",pos:"72% -3%",size:"59px 9px"},{color:"rgb(100, 70, 255)",pos:"74% 100%",size:"42px 7px"},{color:"rgb(240, 50, 180)",pos:"100% 27%",size:"10px 17px"},{color:"rgb(180, 40, 240)",pos:"100% 27%",size:"10px 18px"},{color:"rgb(40, 140, 255)",pos:"100% 27%",size:"5px 10px"},{color:"rgb(255, 50, 100)",pos:"100% 27%",size:"11px 12px"}],inner:[{color:"rgba(50, 200, 80, 0.5)",pos:"2% 68%",size:"9px 18px"},{color:"rgba(30, 185, 170, 0.45)",pos:"2% 68%",size:"4px 8px"},{color:"rgba(255, 120, 40, 0.35)",pos:"72% -3%",size:"59px 9px"},{color:"rgba(100, 70, 255, 0.35)",pos:"74% 100%",size:"42px 7px"},{color:"rgba(240, 50, 180, 0.3)",pos:"100% 27%",size:"10px 17px"},{color:"rgba(180, 40, 240, 0.4)",pos:"100% 27%",size:"10px 18px"},{color:"rgba(40, 140, 255, 0.3)",pos:"100% 27%",size:"5px 10px"},{color:"rgba(255, 50, 100, 0.3)",pos:"100% 27%",size:"11px 12px"}]},mono:{border:[{color:"rgb(160, 160, 160)",pos:"2% 68%",size:"9px 18px"},{color:"rgb(140, 140, 140)",pos:"2% 68%",size:"4px 8px"},{color:"rgb(180, 180, 180)",pos:"72% -3%",size:"59px 9px"},{color:"rgb(150, 150, 150)",pos:"74% 100%",size:"42px 7px"},{color:"rgb(170, 170, 170)",pos:"100% 27%",size:"10px 17px"},{color:"rgb(155, 155, 155)",pos:"100% 27%",size:"10px 18px"},{color:"rgb(145, 145, 145)",pos:"100% 27%",size:"5px 10px"},{color:"rgb(165, 165, 165)",pos:"100% 27%",size:"11px 12px"}],inner:[{color:"rgba(160, 160, 160, 0.25)",pos:"2% 68%",size:"9px 18px"},{color:"rgba(140, 140, 140, 0.22)",pos:"2% 68%",size:"4px 8px"},{color:"rgba(180, 180, 180, 0.17)",pos:"72% -3%",size:"59px 9px"},{color:"rgba(150, 150, 150, 0.17)",pos:"74% 100%",size:"42px 7px"},{color:"rgba(170, 170, 170, 0.15)",pos:"100% 27%",size:"10px 17px"},{color:"rgba(155, 155, 155, 0.20)",pos:"100% 27%",size:"10px 18px"},{color:"rgba(145, 145, 145, 0.15)",pos:"100% 27%",size:"5px 10px"},{color:"rgba(165, 165, 165, 0.15)",pos:"100% 27%",size:"11px 12px"}]},ocean:{border:[{color:"rgb(60, 140, 200)",pos:"2% 68%",size:"9px 18px"},{color:"rgb(50, 120, 180)",pos:"2% 68%",size:"4px 8px"},{color:"rgb(100, 80, 220)",pos:"72% -3%",size:"59px 9px"},{color:"rgb(80, 100, 255)",pos:"74% 100%",size:"42px 7px"},{color:"rgb(120, 70, 240)",pos:"100% 27%",size:"10px 17px"},{color:"rgb(90, 80, 220)",pos:"100% 27%",size:"10px 18px"},{color:"rgb(70, 110, 255)",pos:"100% 27%",size:"5px 10px"},{color:"rgb(110, 90, 230)",pos:"100% 27%",size:"11px 12px"}],inner:[{color:"rgba(60, 140, 200, 0.5)",pos:"2% 68%",size:"9px 18px"},{color:"rgba(50, 120, 180, 0.45)",pos:"2% 68%",size:"4px 8px"},{color:"rgba(100, 80, 220, 0.35)",pos:"72% -3%",size:"59px 9px"},{color:"rgba(80, 100, 255, 0.35)",pos:"74% 100%",size:"42px 7px"},{color:"rgba(120, 70, 240, 0.3)",pos:"100% 27%",size:"10px 17px"},{color:"rgba(90, 80, 220, 0.4)",pos:"100% 27%",size:"10px 18px"},{color:"rgba(70, 110, 255, 0.3)",pos:"100% 27%",size:"5px 10px"},{color:"rgba(110, 90, 230, 0.3)",pos:"100% 27%",size:"11px 12px"}]},sunset:{border:[{color:"rgb(255, 180, 50)",pos:"2% 68%",size:"9px 18px"},{color:"rgb(255, 150, 40)",pos:"2% 68%",size:"4px 8px"},{color:"rgb(255, 80, 60)",pos:"72% -3%",size:"59px 9px"},{color:"rgb(255, 100, 80)",pos:"74% 100%",size:"42px 7px"},{color:"rgb(255, 60, 80)",pos:"100% 27%",size:"10px 17px"},{color:"rgb(255, 120, 60)",pos:"100% 27%",size:"10px 18px"},{color:"rgb(255, 200, 50)",pos:"100% 27%",size:"5px 10px"},{color:"rgb(255, 90, 70)",pos:"100% 27%",size:"11px 12px"}],inner:[{color:"rgba(255, 180, 50, 0.5)",pos:"2% 68%",size:"9px 18px"},{color:"rgba(255, 150, 40, 0.45)",pos:"2% 68%",size:"4px 8px"},{color:"rgba(255, 80, 60, 0.35)",pos:"72% -3%",size:"59px 9px"},{color:"rgba(255, 100, 80, 0.35)",pos:"74% 100%",size:"42px 7px"},{color:"rgba(255, 60, 80, 0.3)",pos:"100% 27%",size:"10px 17px"},{color:"rgba(255, 120, 60, 0.4)",pos:"100% 27%",size:"10px 18px"},{color:"rgba(255, 200, 50, 0.3)",pos:"100% 27%",size:"5px 10px"},{color:"rgba(255, 90, 70, 0.3)",pos:"100% 27%",size:"11px 12px"}]}};function Me(t){return ve[t].border.map(a=>`radial-gradient(ellipse ${a.size} at ${a.pos}, ${a.color}, transparent)`).join(`,
|
|
2
2
|
`)}function qe(t){return ve[t].inner.map(a=>`radial-gradient(ellipse ${a.size} at ${a.pos}, ${a.color}, transparent)`).join(`,
|
|
3
3
|
`)}function Ce(t){return C[t].border.map(a=>`radial-gradient(ellipse ${a.size} at ${a.pos}, ${a.color}, transparent)`).join(`,
|
|
4
|
-
`)}function Ge(t){const e=C[t],a=t==="mono"?.225:.45;return e.border.map(r=>{const o=r.color.replace("rgb(","rgba(").replace(")",`, ${a})`);return`radial-gradient(ellipse ${r.size.split(" ").map(
|
|
5
|
-
`)}function Ie(t,e){const a=C[t];return e?a.spike:a.spikeLt}const Pe={colorful:{dark:[{color:"rgb(255, 50, 100)",sizeW:36,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(40, 180, 220)",sizeW:30,sizeH:32,offsetX:39,offsetY:0},{color:"rgb(50, 200, 80)",sizeW:33,sizeH:28,offsetX:-36,offsetY:2},{color:"rgb(180, 40, 240)",sizeW:29,sizeH:34,offsetX:-54,offsetY:0},{color:"rgb(255, 160, 30)",sizeW:27,sizeH:30,offsetX:51,offsetY:-1},{color:"rgb(100, 70, 255)",sizeW:36,sizeH:24,offsetX:21,offsetY:1},{color:"rgb(40, 140, 255)",sizeW:30,sizeH:22,offsetX:-21,offsetY:0},{color:"rgb(240, 50, 180)",sizeW:25,sizeH:28,offsetX:66,offsetY:1},{color:"rgb(30, 185, 170)",sizeW:23,sizeH:30,offsetX:-66,offsetY:-1}],light:[{color:"rgb(255, 50, 100)",sizeW:45,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(40, 140, 255)",sizeW:35,sizeH:32,offsetX:65,offsetY:0},{color:"rgb(50, 200, 80)",sizeW:40,sizeH:28,offsetX:-60,offsetY:2},{color:"rgb(180, 40, 240)",sizeW:35,sizeH:34,offsetX:-90,offsetY:0},{color:"rgb(30, 185, 170)",sizeW:38,sizeH:30,offsetX:85,offsetY:-1},{color:"rgb(100, 70, 255)",sizeW:50,sizeH:24,offsetX:35,offsetY:1},{color:"rgb(40, 140, 255)",sizeW:40,sizeH:22,offsetX:-35,offsetY:0},{color:"rgb(255, 120, 40)",sizeW:35,sizeH:28,offsetX:110,offsetY:1},{color:"rgb(240, 50, 180)",sizeW:30,sizeH:30,offsetX:-110,offsetY:-1}]},mono:{dark:[{color:"rgb(200, 200, 200)",sizeW:36,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(170, 170, 170)",sizeW:30,sizeH:32,offsetX:39,offsetY:0},{color:"rgb(155, 155, 155)",sizeW:33,sizeH:28,offsetX:-36,offsetY:2},{color:"rgb(185, 185, 185)",sizeW:29,sizeH:34,offsetX:-54,offsetY:0},{color:"rgb(165, 165, 165)",sizeW:27,sizeH:30,offsetX:51,offsetY:-1},{color:"rgb(180, 180, 180)",sizeW:36,sizeH:24,offsetX:21,offsetY:1},{color:"rgb(160, 160, 160)",sizeW:30,sizeH:22,offsetX:-21,offsetY:0},{color:"rgb(175, 175, 175)",sizeW:25,sizeH:28,offsetX:66,offsetY:1},{color:"rgb(190, 190, 190)",sizeW:23,sizeH:30,offsetX:-66,offsetY:-1}],light:[{color:"rgb(100, 100, 100)",sizeW:45,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(80, 80, 80)",sizeW:35,sizeH:32,offsetX:65,offsetY:0},{color:"rgb(90, 90, 90)",sizeW:40,sizeH:28,offsetX:-60,offsetY:2},{color:"rgb(70, 70, 70)",sizeW:35,sizeH:34,offsetX:-90,offsetY:0},{color:"rgb(85, 85, 85)",sizeW:38,sizeH:30,offsetX:85,offsetY:-1},{color:"rgb(95, 95, 95)",sizeW:50,sizeH:24,offsetX:35,offsetY:1},{color:"rgb(75, 75, 75)",sizeW:40,sizeH:22,offsetX:-35,offsetY:0},{color:"rgb(105, 105, 105)",sizeW:35,sizeH:28,offsetX:110,offsetY:1},{color:"rgb(65, 65, 65)",sizeW:30,sizeH:30,offsetX:-110,offsetY:-1}]},ocean:{dark:[{color:"rgb(100, 80, 220)",sizeW:36,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(60, 120, 255)",sizeW:30,sizeH:32,offsetX:39,offsetY:0},{color:"rgb(80, 100, 200)",sizeW:33,sizeH:28,offsetX:-36,offsetY:2},{color:"rgb(130, 70, 255)",sizeW:29,sizeH:34,offsetX:-54,offsetY:0},{color:"rgb(70, 130, 255)",sizeW:27,sizeH:30,offsetX:51,offsetY:-1},{color:"rgb(120, 80, 255)",sizeW:36,sizeH:24,offsetX:21,offsetY:1},{color:"rgb(90, 110, 230)",sizeW:30,sizeH:22,offsetX:-21,offsetY:0},{color:"rgb(110, 90, 240)",sizeW:25,sizeH:28,offsetX:66,offsetY:1},{color:"rgb(140, 100, 255)",sizeW:23,sizeH:30,offsetX:-66,offsetY:-1}],light:[{color:"rgb(80, 60, 200)",sizeW:45,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(50, 100, 220)",sizeW:35,sizeH:32,offsetX:65,offsetY:0},{color:"rgb(70, 90, 190)",sizeW:40,sizeH:28,offsetX:-60,offsetY:2},{color:"rgb(110, 60, 220)",sizeW:35,sizeH:34,offsetX:-90,offsetY:0},{color:"rgb(60, 110, 230)",sizeW:38,sizeH:30,offsetX:85,offsetY:-1},{color:"rgb(100, 70, 240)",sizeW:50,sizeH:24,offsetX:35,offsetY:1},{color:"rgb(80, 100, 210)",sizeW:40,sizeH:22,offsetX:-35,offsetY:0},{color:"rgb(90, 80, 225)",sizeW:35,sizeH:28,offsetX:110,offsetY:1},{color:"rgb(120, 90, 245)",sizeW:30,sizeH:30,offsetX:-110,offsetY:-1}]},sunset:{dark:[{color:"rgb(255, 100, 60)",sizeW:36,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(255, 180, 50)",sizeW:30,sizeH:32,offsetX:39,offsetY:0},{color:"rgb(255, 140, 70)",sizeW:33,sizeH:28,offsetX:-36,offsetY:2},{color:"rgb(255, 80, 80)",sizeW:29,sizeH:34,offsetX:-54,offsetY:0},{color:"rgb(255, 200, 60)",sizeW:27,sizeH:30,offsetX:51,offsetY:-1},{color:"rgb(255, 120, 50)",sizeW:36,sizeH:24,offsetX:21,offsetY:1},{color:"rgb(255, 160, 80)",sizeW:30,sizeH:22,offsetX:-21,offsetY:0},{color:"rgb(255, 90, 60)",sizeW:25,sizeH:28,offsetX:66,offsetY:1},{color:"rgb(255, 70, 70)",sizeW:23,sizeH:30,offsetX:-66,offsetY:-1}],light:[{color:"rgb(220, 80, 40)",sizeW:45,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(230, 150, 30)",sizeW:35,sizeH:32,offsetX:65,offsetY:0},{color:"rgb(210, 110, 50)",sizeW:40,sizeH:28,offsetX:-60,offsetY:2},{color:"rgb(200, 60, 60)",sizeW:35,sizeH:34,offsetX:-90,offsetY:0},{color:"rgb(220, 170, 40)",sizeW:38,sizeH:30,offsetX:85,offsetY:-1},{color:"rgb(210, 100, 30)",sizeW:50,sizeH:24,offsetX:35,offsetY:1},{color:"rgb(230, 130, 60)",sizeW:40,sizeH:22,offsetX:-35,offsetY:0},{color:"rgb(190, 70, 50)",sizeW:35,sizeH:28,offsetX:110,offsetY:1},{color:"rgb(180, 50, 50)",sizeW:30,sizeH:30,offsetX:-110,offsetY:-1}]}};function Ee(t,e,a){return Pe[t][e?"dark":"light"].map(o=>{const s=o.offsetX===0?"":o.offsetX>0?` + ${o.offsetX}px`:` - ${Math.abs(o.offsetX)}px`,
|
|
4
|
+
`)}function Ge(t){const e=C[t],a=t==="mono"?.225:.45;return e.border.map(r=>{const o=r.color.replace("rgb(","rgba(").replace(")",`, ${a})`);return`radial-gradient(ellipse ${r.size.split(" ").map(i=>{const c=parseInt(i);return`${Math.round(c*.9)}px`}).join(" ")} at ${r.pos}, ${o}, transparent)`}).join(`,
|
|
5
|
+
`)}function Ie(t,e){const a=C[t];return e?a.spike:a.spikeLt}const Pe={colorful:{dark:[{color:"rgb(255, 50, 100)",sizeW:36,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(40, 180, 220)",sizeW:30,sizeH:32,offsetX:39,offsetY:0},{color:"rgb(50, 200, 80)",sizeW:33,sizeH:28,offsetX:-36,offsetY:2},{color:"rgb(180, 40, 240)",sizeW:29,sizeH:34,offsetX:-54,offsetY:0},{color:"rgb(255, 160, 30)",sizeW:27,sizeH:30,offsetX:51,offsetY:-1},{color:"rgb(100, 70, 255)",sizeW:36,sizeH:24,offsetX:21,offsetY:1},{color:"rgb(40, 140, 255)",sizeW:30,sizeH:22,offsetX:-21,offsetY:0},{color:"rgb(240, 50, 180)",sizeW:25,sizeH:28,offsetX:66,offsetY:1},{color:"rgb(30, 185, 170)",sizeW:23,sizeH:30,offsetX:-66,offsetY:-1}],light:[{color:"rgb(255, 50, 100)",sizeW:45,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(40, 140, 255)",sizeW:35,sizeH:32,offsetX:65,offsetY:0},{color:"rgb(50, 200, 80)",sizeW:40,sizeH:28,offsetX:-60,offsetY:2},{color:"rgb(180, 40, 240)",sizeW:35,sizeH:34,offsetX:-90,offsetY:0},{color:"rgb(30, 185, 170)",sizeW:38,sizeH:30,offsetX:85,offsetY:-1},{color:"rgb(100, 70, 255)",sizeW:50,sizeH:24,offsetX:35,offsetY:1},{color:"rgb(40, 140, 255)",sizeW:40,sizeH:22,offsetX:-35,offsetY:0},{color:"rgb(255, 120, 40)",sizeW:35,sizeH:28,offsetX:110,offsetY:1},{color:"rgb(240, 50, 180)",sizeW:30,sizeH:30,offsetX:-110,offsetY:-1}]},mono:{dark:[{color:"rgb(200, 200, 200)",sizeW:36,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(170, 170, 170)",sizeW:30,sizeH:32,offsetX:39,offsetY:0},{color:"rgb(155, 155, 155)",sizeW:33,sizeH:28,offsetX:-36,offsetY:2},{color:"rgb(185, 185, 185)",sizeW:29,sizeH:34,offsetX:-54,offsetY:0},{color:"rgb(165, 165, 165)",sizeW:27,sizeH:30,offsetX:51,offsetY:-1},{color:"rgb(180, 180, 180)",sizeW:36,sizeH:24,offsetX:21,offsetY:1},{color:"rgb(160, 160, 160)",sizeW:30,sizeH:22,offsetX:-21,offsetY:0},{color:"rgb(175, 175, 175)",sizeW:25,sizeH:28,offsetX:66,offsetY:1},{color:"rgb(190, 190, 190)",sizeW:23,sizeH:30,offsetX:-66,offsetY:-1}],light:[{color:"rgb(100, 100, 100)",sizeW:45,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(80, 80, 80)",sizeW:35,sizeH:32,offsetX:65,offsetY:0},{color:"rgb(90, 90, 90)",sizeW:40,sizeH:28,offsetX:-60,offsetY:2},{color:"rgb(70, 70, 70)",sizeW:35,sizeH:34,offsetX:-90,offsetY:0},{color:"rgb(85, 85, 85)",sizeW:38,sizeH:30,offsetX:85,offsetY:-1},{color:"rgb(95, 95, 95)",sizeW:50,sizeH:24,offsetX:35,offsetY:1},{color:"rgb(75, 75, 75)",sizeW:40,sizeH:22,offsetX:-35,offsetY:0},{color:"rgb(105, 105, 105)",sizeW:35,sizeH:28,offsetX:110,offsetY:1},{color:"rgb(65, 65, 65)",sizeW:30,sizeH:30,offsetX:-110,offsetY:-1}]},ocean:{dark:[{color:"rgb(100, 80, 220)",sizeW:36,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(60, 120, 255)",sizeW:30,sizeH:32,offsetX:39,offsetY:0},{color:"rgb(80, 100, 200)",sizeW:33,sizeH:28,offsetX:-36,offsetY:2},{color:"rgb(130, 70, 255)",sizeW:29,sizeH:34,offsetX:-54,offsetY:0},{color:"rgb(70, 130, 255)",sizeW:27,sizeH:30,offsetX:51,offsetY:-1},{color:"rgb(120, 80, 255)",sizeW:36,sizeH:24,offsetX:21,offsetY:1},{color:"rgb(90, 110, 230)",sizeW:30,sizeH:22,offsetX:-21,offsetY:0},{color:"rgb(110, 90, 240)",sizeW:25,sizeH:28,offsetX:66,offsetY:1},{color:"rgb(140, 100, 255)",sizeW:23,sizeH:30,offsetX:-66,offsetY:-1}],light:[{color:"rgb(80, 60, 200)",sizeW:45,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(50, 100, 220)",sizeW:35,sizeH:32,offsetX:65,offsetY:0},{color:"rgb(70, 90, 190)",sizeW:40,sizeH:28,offsetX:-60,offsetY:2},{color:"rgb(110, 60, 220)",sizeW:35,sizeH:34,offsetX:-90,offsetY:0},{color:"rgb(60, 110, 230)",sizeW:38,sizeH:30,offsetX:85,offsetY:-1},{color:"rgb(100, 70, 240)",sizeW:50,sizeH:24,offsetX:35,offsetY:1},{color:"rgb(80, 100, 210)",sizeW:40,sizeH:22,offsetX:-35,offsetY:0},{color:"rgb(90, 80, 225)",sizeW:35,sizeH:28,offsetX:110,offsetY:1},{color:"rgb(120, 90, 245)",sizeW:30,sizeH:30,offsetX:-110,offsetY:-1}]},sunset:{dark:[{color:"rgb(255, 100, 60)",sizeW:36,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(255, 180, 50)",sizeW:30,sizeH:32,offsetX:39,offsetY:0},{color:"rgb(255, 140, 70)",sizeW:33,sizeH:28,offsetX:-36,offsetY:2},{color:"rgb(255, 80, 80)",sizeW:29,sizeH:34,offsetX:-54,offsetY:0},{color:"rgb(255, 200, 60)",sizeW:27,sizeH:30,offsetX:51,offsetY:-1},{color:"rgb(255, 120, 50)",sizeW:36,sizeH:24,offsetX:21,offsetY:1},{color:"rgb(255, 160, 80)",sizeW:30,sizeH:22,offsetX:-21,offsetY:0},{color:"rgb(255, 90, 60)",sizeW:25,sizeH:28,offsetX:66,offsetY:1},{color:"rgb(255, 70, 70)",sizeW:23,sizeH:30,offsetX:-66,offsetY:-1}],light:[{color:"rgb(220, 80, 40)",sizeW:45,sizeH:36,offsetX:0,offsetY:2},{color:"rgb(230, 150, 30)",sizeW:35,sizeH:32,offsetX:65,offsetY:0},{color:"rgb(210, 110, 50)",sizeW:40,sizeH:28,offsetX:-60,offsetY:2},{color:"rgb(200, 60, 60)",sizeW:35,sizeH:34,offsetX:-90,offsetY:0},{color:"rgb(220, 170, 40)",sizeW:38,sizeH:30,offsetX:85,offsetY:-1},{color:"rgb(210, 100, 30)",sizeW:50,sizeH:24,offsetX:35,offsetY:1},{color:"rgb(230, 130, 60)",sizeW:40,sizeH:22,offsetX:-35,offsetY:0},{color:"rgb(190, 70, 50)",sizeW:35,sizeH:28,offsetX:110,offsetY:1},{color:"rgb(180, 50, 50)",sizeW:30,sizeH:30,offsetX:-110,offsetY:-1}]}};function Ee(t,e,a){return Pe[t][e?"dark":"light"].map(o=>{const s=o.offsetX===0?"":o.offsetX>0?` + ${o.offsetX}px`:` - ${Math.abs(o.offsetX)}px`,i=o.offsetY===0?"":o.offsetY>0?` + ${o.offsetY}px`:` - ${Math.abs(o.offsetY)}px`;return`radial-gradient(ellipse calc(${o.sizeW}px * var(--beam-w-${a})) calc(${o.sizeH}px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%${s}) calc(100%${i}), ${o.color}, transparent)`}).join(`,
|
|
6
6
|
`)}const Be={colorful:[{color:"rgba(255, 50, 100, 0.48)",sizeW:33,sizeH:30,offsetX:0,offsetY:0},{color:"rgba(40, 180, 220, 0.42)",sizeW:24,sizeH:26,offsetX:39,offsetY:-3},{color:"rgba(50, 200, 80, 0.48)",sizeW:27,sizeH:24,offsetX:-36,offsetY:0},{color:"rgba(180, 40, 240, 0.42)",sizeW:23,sizeH:28,offsetX:-54,offsetY:-2},{color:"rgba(255, 160, 30, 0.50)",sizeW:24,sizeH:24,offsetX:51,offsetY:-1},{color:"rgba(100, 70, 255, 0.45)",sizeW:30,sizeH:20,offsetX:21,offsetY:0},{color:"rgba(40, 140, 255, 0.40)",sizeW:25,sizeH:18,offsetX:-21,offsetY:-2},{color:"rgba(240, 50, 180, 0.45)",sizeW:21,sizeH:24,offsetX:66,offsetY:0},{color:"rgba(30, 185, 170, 0.52)",sizeW:18,sizeH:26,offsetX:-66,offsetY:-1}],mono:[{color:"rgba(200, 200, 200, 0.48)",sizeW:33,sizeH:30,offsetX:0,offsetY:0},{color:"rgba(170, 170, 170, 0.42)",sizeW:24,sizeH:26,offsetX:39,offsetY:-3},{color:"rgba(155, 155, 155, 0.48)",sizeW:27,sizeH:24,offsetX:-36,offsetY:0},{color:"rgba(185, 185, 185, 0.42)",sizeW:23,sizeH:28,offsetX:-54,offsetY:-2},{color:"rgba(165, 165, 165, 0.50)",sizeW:24,sizeH:24,offsetX:51,offsetY:-1},{color:"rgba(180, 180, 180, 0.45)",sizeW:30,sizeH:20,offsetX:21,offsetY:0},{color:"rgba(160, 160, 160, 0.40)",sizeW:25,sizeH:18,offsetX:-21,offsetY:-2},{color:"rgba(175, 175, 175, 0.45)",sizeW:21,sizeH:24,offsetX:66,offsetY:0},{color:"rgba(190, 190, 190, 0.52)",sizeW:18,sizeH:26,offsetX:-66,offsetY:-1}],ocean:[{color:"rgba(100, 80, 220, 0.48)",sizeW:33,sizeH:30,offsetX:0,offsetY:0},{color:"rgba(60, 120, 255, 0.42)",sizeW:24,sizeH:26,offsetX:39,offsetY:-3},{color:"rgba(80, 100, 200, 0.48)",sizeW:27,sizeH:24,offsetX:-36,offsetY:0},{color:"rgba(130, 70, 255, 0.42)",sizeW:23,sizeH:28,offsetX:-54,offsetY:-2},{color:"rgba(70, 130, 255, 0.50)",sizeW:24,sizeH:24,offsetX:51,offsetY:-1},{color:"rgba(120, 80, 255, 0.45)",sizeW:30,sizeH:20,offsetX:21,offsetY:0},{color:"rgba(90, 110, 230, 0.40)",sizeW:25,sizeH:18,offsetX:-21,offsetY:-2},{color:"rgba(110, 90, 240, 0.45)",sizeW:21,sizeH:24,offsetX:66,offsetY:0},{color:"rgba(140, 100, 255, 0.52)",sizeW:18,sizeH:26,offsetX:-66,offsetY:-1}],sunset:[{color:"rgba(255, 100, 60, 0.48)",sizeW:33,sizeH:30,offsetX:0,offsetY:0},{color:"rgba(255, 180, 50, 0.42)",sizeW:24,sizeH:26,offsetX:39,offsetY:-3},{color:"rgba(255, 140, 70, 0.48)",sizeW:27,sizeH:24,offsetX:-36,offsetY:0},{color:"rgba(255, 80, 80, 0.42)",sizeW:23,sizeH:28,offsetX:-54,offsetY:-2},{color:"rgba(255, 200, 60, 0.50)",sizeW:24,sizeH:24,offsetX:51,offsetY:-1},{color:"rgba(255, 120, 50, 0.45)",sizeW:30,sizeH:20,offsetX:21,offsetY:0},{color:"rgba(255, 160, 80, 0.40)",sizeW:25,sizeH:18,offsetX:-21,offsetY:-2},{color:"rgba(255, 90, 60, 0.45)",sizeW:21,sizeH:24,offsetX:66,offsetY:0},{color:"rgba(255, 70, 70, 0.52)",sizeW:18,sizeH:26,offsetX:-66,offsetY:-1}]};function Le(t,e){return Be[t].map(r=>{const o=r.offsetX===0?"":r.offsetX>0?` + ${r.offsetX}px`:` - ${Math.abs(r.offsetX)}px`,s=r.offsetY===0?"":` - ${Math.abs(r.offsetY)}px`;return`radial-gradient(ellipse calc(${r.sizeW}px * var(--beam-w-${e})) calc(${r.sizeH}px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%${o}) calc(100%${s}), ${r.color}, transparent)`}).join(`,
|
|
7
|
-
`)}const _e={colorful:{dark:{spikes:[{color1:"rgb(100, 70, 255)",color2:"rgba(100, 70, 255, 1)"},{color1:"rgba(255, 170, 40, 0.59)",color2:"rgba(255, 170, 40, 0.29)"},{color1:"rgb(50, 200, 100)",color2:"rgba(50, 200, 100, 1)"},{color1:"rgba(200, 50, 240, 0.91)",color2:"rgba(200, 50, 240, 0.45)"},{color1:"rgb(40, 140, 255)",color2:"rgba(40, 140, 255, 1)"}]},light:{spikes:[{color1:"rgb(80, 50, 200)",color2:"rgba(80, 50, 200, 0.8)"},{color1:"rgba(210, 130, 0, 0.7)",color2:"rgba(210, 130, 0, 0.46)"},{color1:"rgb(30, 160, 70)",color2:"rgba(30, 160, 70, 0.82)"},{color1:"rgb(160, 30, 190)",color2:"rgba(160, 30, 190, 0.7)"},{color1:"rgb(30, 100, 200)",color2:"rgba(30, 100, 200, 0.78)"}]}},mono:{dark:{spikes:[{color1:"rgb(200, 200, 200)",color2:"rgba(200, 200, 200, 1)"},{color1:"rgba(180, 180, 180, 0.59)",color2:"rgba(180, 180, 180, 0.29)"},{color1:"rgb(190, 190, 190)",color2:"rgba(190, 190, 190, 1)"},{color1:"rgba(170, 170, 170, 0.91)",color2:"rgba(170, 170, 170, 0.45)"},{color1:"rgb(185, 185, 185)",color2:"rgba(185, 185, 185, 1)"}]},light:{spikes:[{color1:"rgb(80, 80, 80)",color2:"rgba(80, 80, 80, 0.8)"},{color1:"rgba(100, 100, 100, 0.7)",color2:"rgba(100, 100, 100, 0.46)"},{color1:"rgb(70, 70, 70)",color2:"rgba(70, 70, 70, 0.82)"},{color1:"rgb(90, 90, 90)",color2:"rgba(90, 90, 90, 0.7)"},{color1:"rgb(85, 85, 85)",color2:"rgba(85, 85, 85, 0.78)"}]}},ocean:{dark:{spikes:[{color1:"rgb(100, 80, 255)",color2:"rgb(100, 80, 255)"},{color1:"rgba(80, 130, 220, 0.59)",color2:"rgba(80, 130, 220, 0.29)"},{color1:"rgb(60, 100, 255)",color2:"rgb(60, 100, 255)"},{color1:"rgba(90, 120, 200, 0.91)",color2:"rgba(90, 120, 200, 0.45)"},{color1:"rgb(120, 90, 255)",color2:"rgb(120, 90, 255)"}]},light:{spikes:[{color1:"rgb(50, 40, 180)",color2:"rgba(50, 40, 180, 0.8)"},{color1:"rgba(40, 80, 200, 0.7)",color2:"rgba(40, 80, 200, 0.46)"},{color1:"rgb(30, 50, 190)",color2:"rgba(30, 50, 190, 0.82)"},{color1:"rgb(60, 90, 180)",color2:"rgba(60, 90, 180, 0.7)"},{color1:"rgb(70, 60, 200)",color2:"rgba(70, 60, 200, 0.78)"}]}},sunset:{dark:{spikes:[{color1:"rgb(255, 100, 80)",color2:"rgb(255, 100, 80)"},{color1:"rgba(255, 150, 80, 0.59)",color2:"rgba(255, 150, 80, 0.29)"},{color1:"rgb(255, 80, 60)",color2:"rgb(255, 80, 60)"},{color1:"rgba(255, 120, 50, 0.91)",color2:"rgba(255, 120, 50, 0.45)"},{color1:"rgb(255, 140, 70)",color2:"rgb(255, 140, 70)"}]},light:{spikes:[{color1:"rgb(200, 60, 30)",color2:"rgba(200, 60, 30, 0.8)"},{color1:"rgba(220, 100, 20, 0.7)",color2:"rgba(220, 100, 20, 0.46)"},{color1:"rgb(180, 40, 20)",color2:"rgba(180, 40, 20, 0.82)"},{color1:"rgb(210, 80, 10)",color2:"rgba(210, 80, 10, 0.7)"},{color1:"rgb(190, 70, 30)",color2:"rgba(190, 70, 30, 0.78)"}]}}};function U(t,e){const a=t.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/);if(a)return`rgba(${a[1]}, ${a[2]}, ${a[3]}, ${e})`;const r=t.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);return r?`rgba(${r[1]}, ${r[2]}, ${r[3]}, ${e})`:t}function q(t,e){const a=t.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if(a)return`rgba(${a[1]}, ${a[2]}, ${a[3]}, ${(parseFloat(a[4])*e).toFixed(2)})`;const r=t.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);return r?`rgba(${r[1]}, ${r[2]}, ${r[3]}, ${e.toFixed(2)})`:t}function Ae(t,e,a){const r=Ie(t,e),o=_e[t][e?"dark":"light"],s=t==="mono",
|
|
7
|
+
`)}const _e={colorful:{dark:{spikes:[{color1:"rgb(100, 70, 255)",color2:"rgba(100, 70, 255, 1)"},{color1:"rgba(255, 170, 40, 0.59)",color2:"rgba(255, 170, 40, 0.29)"},{color1:"rgb(50, 200, 100)",color2:"rgba(50, 200, 100, 1)"},{color1:"rgba(200, 50, 240, 0.91)",color2:"rgba(200, 50, 240, 0.45)"},{color1:"rgb(40, 140, 255)",color2:"rgba(40, 140, 255, 1)"}]},light:{spikes:[{color1:"rgb(80, 50, 200)",color2:"rgba(80, 50, 200, 0.8)"},{color1:"rgba(210, 130, 0, 0.7)",color2:"rgba(210, 130, 0, 0.46)"},{color1:"rgb(30, 160, 70)",color2:"rgba(30, 160, 70, 0.82)"},{color1:"rgb(160, 30, 190)",color2:"rgba(160, 30, 190, 0.7)"},{color1:"rgb(30, 100, 200)",color2:"rgba(30, 100, 200, 0.78)"}]}},mono:{dark:{spikes:[{color1:"rgb(200, 200, 200)",color2:"rgba(200, 200, 200, 1)"},{color1:"rgba(180, 180, 180, 0.59)",color2:"rgba(180, 180, 180, 0.29)"},{color1:"rgb(190, 190, 190)",color2:"rgba(190, 190, 190, 1)"},{color1:"rgba(170, 170, 170, 0.91)",color2:"rgba(170, 170, 170, 0.45)"},{color1:"rgb(185, 185, 185)",color2:"rgba(185, 185, 185, 1)"}]},light:{spikes:[{color1:"rgb(80, 80, 80)",color2:"rgba(80, 80, 80, 0.8)"},{color1:"rgba(100, 100, 100, 0.7)",color2:"rgba(100, 100, 100, 0.46)"},{color1:"rgb(70, 70, 70)",color2:"rgba(70, 70, 70, 0.82)"},{color1:"rgb(90, 90, 90)",color2:"rgba(90, 90, 90, 0.7)"},{color1:"rgb(85, 85, 85)",color2:"rgba(85, 85, 85, 0.78)"}]}},ocean:{dark:{spikes:[{color1:"rgb(100, 80, 255)",color2:"rgb(100, 80, 255)"},{color1:"rgba(80, 130, 220, 0.59)",color2:"rgba(80, 130, 220, 0.29)"},{color1:"rgb(60, 100, 255)",color2:"rgb(60, 100, 255)"},{color1:"rgba(90, 120, 200, 0.91)",color2:"rgba(90, 120, 200, 0.45)"},{color1:"rgb(120, 90, 255)",color2:"rgb(120, 90, 255)"}]},light:{spikes:[{color1:"rgb(50, 40, 180)",color2:"rgba(50, 40, 180, 0.8)"},{color1:"rgba(40, 80, 200, 0.7)",color2:"rgba(40, 80, 200, 0.46)"},{color1:"rgb(30, 50, 190)",color2:"rgba(30, 50, 190, 0.82)"},{color1:"rgb(60, 90, 180)",color2:"rgba(60, 90, 180, 0.7)"},{color1:"rgb(70, 60, 200)",color2:"rgba(70, 60, 200, 0.78)"}]}},sunset:{dark:{spikes:[{color1:"rgb(255, 100, 80)",color2:"rgb(255, 100, 80)"},{color1:"rgba(255, 150, 80, 0.59)",color2:"rgba(255, 150, 80, 0.29)"},{color1:"rgb(255, 80, 60)",color2:"rgb(255, 80, 60)"},{color1:"rgba(255, 120, 50, 0.91)",color2:"rgba(255, 120, 50, 0.45)"},{color1:"rgb(255, 140, 70)",color2:"rgb(255, 140, 70)"}]},light:{spikes:[{color1:"rgb(200, 60, 30)",color2:"rgba(200, 60, 30, 0.8)"},{color1:"rgba(220, 100, 20, 0.7)",color2:"rgba(220, 100, 20, 0.46)"},{color1:"rgb(180, 40, 20)",color2:"rgba(180, 40, 20, 0.82)"},{color1:"rgb(210, 80, 10)",color2:"rgba(210, 80, 10, 0.7)"},{color1:"rgb(190, 70, 30)",color2:"rgba(190, 70, 30, 0.78)"}]}}};function U(t,e){const a=t.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/);if(a)return`rgba(${a[1]}, ${a[2]}, ${a[3]}, ${e})`;const r=t.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);return r?`rgba(${r[1]}, ${r[2]}, ${r[3]}, ${e})`:t}function q(t,e){const a=t.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if(a)return`rgba(${a[1]}, ${a[2]}, ${a[3]}, ${(parseFloat(a[4])*e).toFixed(2)})`;const r=t.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);return r?`rgba(${r[1]}, ${r[2]}, ${r[3]}, ${e.toFixed(2)})`:t}function Ae(t,e,a){const r=Ie(t,e),o=_e[t][e?"dark":"light"],s=t==="mono",i=s?.14:1,c=s?q(r.primary,.14):r.primary,b=s?q(r.primary,.09):r.primary,p=s?q(r.secondary,.12):r.secondary,m=s?U(r.secondary,.06):U(r.secondary,.49),n=o.spikes.map($=>s?{color1:q($.color1,i),color2:q($.color2,i*.7)}:$),l=s?"12px":"0.8px",f=s?"14px":"2px",w=s?"12px":"1.2px",d=s?"10px":"0.6px",g=s?"42px":"92px",H=s?"38px":"72px",O=s?"40px":"85px",y=s?"32px":"60px",X=s?"12px":"1px",u=s?"rgba(255, 255, 255, 0.5)":"rgba(255, 255, 255, 1)",W=s?"rgba(255, 255, 255, 0.45)":"rgba(255, 255, 255, 0.9)",k=s?"rgba(255, 255, 255, 0.25)":"rgba(255, 255, 255, 0.5)",h=s?"rgba(255, 255, 255, 0.15)":"rgba(255, 255, 255, 0.3)",Y=s?"rgba(255, 255, 255, 0.06)":"rgba(255, 255, 255, 0.12)",x=s?"rgba(255, 255, 255, 0.015)":"rgba(255, 255, 255, 0.03)";if(e)return`radial-gradient(ellipse calc(${l} * var(--beam-spike-${a})) calc(${g} * var(--beam-h-${a})) at 8% calc(100% - 2px), ${c}, ${b} 30%, transparent 88%),
|
|
8
8
|
radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${p}, ${m} 50%, transparent 95%),
|
|
9
|
-
radial-gradient(ellipse calc(${
|
|
10
|
-
radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${
|
|
11
|
-
radial-gradient(ellipse calc(${w} * (2 - var(--beam-spike2-${a}))) calc(${O} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${
|
|
12
|
-
radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${
|
|
13
|
-
radial-gradient(ellipse calc(${d} * (2 - var(--beam-spike-${a}))) calc(${y} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${
|
|
14
|
-
radial-gradient(ellipse calc(21px * var(--beam-spike-${a})) calc(15px * var(--beam-spike2-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100% + 1px), ${
|
|
15
|
-
radial-gradient(ellipse calc(42px * var(--beam-w-${a})) calc(40px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) 100%, ${
|
|
16
|
-
radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${p}, ${
|
|
17
|
-
radial-gradient(ellipse calc(${
|
|
18
|
-
radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${
|
|
19
|
-
radial-gradient(ellipse calc(${w} * (2 - var(--beam-spike2-${a}))) calc(${O} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${
|
|
20
|
-
radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${
|
|
21
|
-
radial-gradient(ellipse calc(${X} * (2 - var(--beam-spike-${a}))) calc(${y} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${
|
|
22
|
-
radial-gradient(ellipse calc(50px * var(--beam-w-${a})) calc(32px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`}}const we=[{region:1,quad:"tl"},{region:2,quad:"tl"},{region:3,quad:"bl"},{region:1,quad:"bl"},{region:2,quad:"br"},{region:3,quad:"br"},{region:1,quad:"tr"},{region:2,quad:"tr"},{region:3,quad:"tr"}],je=[[65,35],[55,30],[35,65],[15,30],[173,28],[80,22],[69,28],[22,38],[47,44]],Te=[{ci:0,region:1,quad:"tl",w:84,h:48},{ci:1,region:2,quad:"tl",w:72,h:42},{ci:2,region:3,quad:"bl",w:48,h:84},{ci:4,region:2,quad:"br",w:216,h:38},{ci:5,region:3,quad:"br",w:102,h:31},{ci:6,region:1,quad:"tr",w:89,h:38},{ci:8,region:3,quad:"tr",w:62,h:58}],he=[{ci:0,region:1,quad:"tl",w:80,h:19,x:"27%",y:"0%"},{ci:6,region:2,quad:"tr",w:74,h:11,x:"73%",y:"-1%"},{ci:7,region:3,quad:"tr",w:15,h:44,x:"100%",y:"33%"},{ci:8,region:1,quad:"br",w:19,h:38,x:"101%",y:"72%"},{ci:4,region:2,quad:"br",w:84,h:13,x:"67%",y:"100%"},{ci:1,region:3,quad:"bl",w:60,h:21,x:"24%",y:"101%"},{ci:2,region:1,quad:"bl",w:17,h:40,x:"0%",y:"60%"},{ci:3,region:2,quad:"tl",w:13,h:32,x:"-1%",y:"28%"}],Ne=[{ci:0,region:1,quad:"tl",w:110,h:30,x:"27%",y:"3%"},{ci:6,region:2,quad:"tr",w:100,h:20,x:"73%",y:"1%"},{ci:7,region:3,quad:"tr",w:26,h:62,x:"100%",y:"33%"},{ci:8,region:1,quad:"br",w:30,h:56,x:"101%",y:"72%"},{ci:4,region:2,quad:"br",w:120,h:22,x:"67%",y:"99%"},{ci:1,region:3,quad:"bl",w:88,h:32,x:"24%",y:"99%"},{ci:2,region:1,quad:"bl",w:28,h:58,x:"0%",y:"60%"}];function Ve(t,e,a){const r=t.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);return`rgba(${r?`${r[1]}, ${r[2]}, ${r[3]}`:"255, 255, 255"}, var(--bop-${e}-${a}))`}function pe(t,e,a,r,o,s,
|
|
23
|
-
`)}function Ue(t,e,a){const o=C[t].border.map((p,m)=>{const{region:
|
|
24
|
-
`)}function ze(t,e,a){const r=C[e].border;return t.map(o=>{const s=r[o.ci],[
|
|
25
|
-
`)}function We(t,e,a){const r=C[e].border,o=+a.toFixed(3);return t.map(s=>{const
|
|
9
|
+
radial-gradient(ellipse calc(${f} * (2 - var(--beam-spike-${a}))) calc(${H} * var(--beam-h-${a})) at 36% calc(100% - 3px), ${n[0].color1}, ${n[0].color2} 40%, transparent 90%),
|
|
10
|
+
radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${n[1].color1}, ${n[1].color2} 55%, transparent 96%),
|
|
11
|
+
radial-gradient(ellipse calc(${w} * (2 - var(--beam-spike2-${a}))) calc(${O} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${n[2].color1}, ${n[2].color2} 35%, transparent 89%),
|
|
12
|
+
radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${n[3].color1}, ${n[3].color2} 48%, transparent 94%),
|
|
13
|
+
radial-gradient(ellipse calc(${d} * (2 - var(--beam-spike-${a}))) calc(${y} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${n[4].color1}, ${n[4].color2} 42%, transparent 91%),
|
|
14
|
+
radial-gradient(ellipse calc(21px * var(--beam-spike-${a})) calc(15px * var(--beam-spike2-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100% + 1px), ${u} 0%, ${W} 20%, ${k} 50%, transparent 100%),
|
|
15
|
+
radial-gradient(ellipse calc(42px * var(--beam-w-${a})) calc(40px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) 100%, ${h} 0%, ${Y} 25%, ${x} 55%, transparent 80%)`;{const $=s?q(r.primary,.11):U(r.primary,.85),F=s?q(r.secondary,.09):U(r.secondary,.7);return`radial-gradient(ellipse calc(${l} * var(--beam-spike-${a})) calc(${g} * var(--beam-h-${a})) at 8% calc(100% - 2px), ${c}, ${$} 30%, transparent 88%),
|
|
16
|
+
radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${p}, ${F} 50%, transparent 95%),
|
|
17
|
+
radial-gradient(ellipse calc(${f} * (2 - var(--beam-spike-${a}))) calc(${H} * var(--beam-h-${a})) at 36% calc(100% - 3px), ${n[0].color1}, ${n[0].color2} 40%, transparent 90%),
|
|
18
|
+
radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${n[1].color1}, ${n[1].color2} 55%, transparent 96%),
|
|
19
|
+
radial-gradient(ellipse calc(${w} * (2 - var(--beam-spike2-${a}))) calc(${O} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${n[2].color1}, ${n[2].color2} 35%, transparent 89%),
|
|
20
|
+
radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${n[3].color1}, ${n[3].color2} 48%, transparent 94%),
|
|
21
|
+
radial-gradient(ellipse calc(${X} * (2 - var(--beam-spike-${a}))) calc(${y} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${n[4].color1}, ${n[4].color2} 42%, transparent 91%),
|
|
22
|
+
radial-gradient(ellipse calc(50px * var(--beam-w-${a})) calc(32px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`}}const we=[{region:1,quad:"tl"},{region:2,quad:"tl"},{region:3,quad:"bl"},{region:1,quad:"bl"},{region:2,quad:"br"},{region:3,quad:"br"},{region:1,quad:"tr"},{region:2,quad:"tr"},{region:3,quad:"tr"}],je=[[65,35],[55,30],[35,65],[15,30],[173,28],[80,22],[69,28],[22,38],[47,44]],Te=[{ci:0,region:1,quad:"tl",w:84,h:48},{ci:1,region:2,quad:"tl",w:72,h:42},{ci:2,region:3,quad:"bl",w:48,h:84},{ci:4,region:2,quad:"br",w:216,h:38},{ci:5,region:3,quad:"br",w:102,h:31},{ci:6,region:1,quad:"tr",w:89,h:38},{ci:8,region:3,quad:"tr",w:62,h:58}],he=[{ci:0,region:1,quad:"tl",w:80,h:19,x:"27%",y:"0%"},{ci:6,region:2,quad:"tr",w:74,h:11,x:"73%",y:"-1%"},{ci:7,region:3,quad:"tr",w:15,h:44,x:"100%",y:"33%"},{ci:8,region:1,quad:"br",w:19,h:38,x:"101%",y:"72%"},{ci:4,region:2,quad:"br",w:84,h:13,x:"67%",y:"100%"},{ci:1,region:3,quad:"bl",w:60,h:21,x:"24%",y:"101%"},{ci:2,region:1,quad:"bl",w:17,h:40,x:"0%",y:"60%"},{ci:3,region:2,quad:"tl",w:13,h:32,x:"-1%",y:"28%"}],Ne=[{ci:0,region:1,quad:"tl",w:110,h:30,x:"27%",y:"3%"},{ci:6,region:2,quad:"tr",w:100,h:20,x:"73%",y:"1%"},{ci:7,region:3,quad:"tr",w:26,h:62,x:"100%",y:"33%"},{ci:8,region:1,quad:"br",w:30,h:56,x:"101%",y:"72%"},{ci:4,region:2,quad:"br",w:120,h:22,x:"67%",y:"99%"},{ci:1,region:3,quad:"bl",w:88,h:32,x:"24%",y:"99%"},{ci:2,region:1,quad:"bl",w:28,h:58,x:"0%",y:"60%"}];function Ve(t,e,a){const r=t.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);return`rgba(${r?`${r[1]}, ${r[2]}, ${r[3]}`:"255, 255, 255"}, var(--bop-${e}-${a}))`}function pe(t,e,a,r,o,s,i,c){return`radial-gradient(ellipse calc(${e}px * var(--bw${r}-${c}) * var(--pulse-glow-sx, 1)) calc(${a}px * var(--bh${r}-${c}) * var(--bgh-${c}) * var(--pulse-glow-sy, 1)) at calc(${s} + var(--bx${r}-${c})) calc(${i} + var(--by${r}-${c})), ${Ve(t,o,c)}, transparent)`}function De(t,e){return C[t].border.map((a,r)=>{const{region:o,quad:s}=we[r],[i,c]=a.pos.split(" "),[b,p]=a.size.split(" ").map(parseFloat);return pe(a.color,b,p,o,s,i,c,e)}).join(`,
|
|
23
|
+
`)}function Ue(t,e,a){const o=C[t].border.map((p,m)=>{const{region:n,quad:l}=we[m],[f,w]=p.pos.split(" "),[d,g]=je[m];return pe(p.color,d,g,n,l,f,w,e)}),s=a?"255, 255, 255":"0, 0, 0",i=a?.18:.08,b=[["0%","0%","tl"],["100%","0%","tr"],["0%","100%","bl"],["100%","100%","br"]].map(([p,m,n])=>`radial-gradient(ellipse 60px 60px at ${p} ${m}, rgba(${s}, calc(${i} * var(--bop-${n}-${e}))), transparent 70%)`);return[...o,...b].join(`,
|
|
24
|
+
`)}function ze(t,e,a){const r=C[e].border;return t.map(o=>{const s=r[o.ci],[i,c]=s.pos.split(" ");return pe(s.color,o.w,o.h,o.region,o.quad,o.x??i,o.y??c,a)}).join(`,
|
|
25
|
+
`)}function We(t,e,a){const r=C[e].border,o=+a.toFixed(3);return t.map(s=>{const i=r[s.ci],[c,b]=i.pos.split(" "),p=s.x??c,m=s.y??b,n=i.color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/),l=n?`${n[1]}, ${n[2]}, ${n[3]}`:"255, 255, 255";return`radial-gradient(ellipse calc(${s.w}px * var(--pulse-glow-sx, 1)) calc(${s.h}px * var(--pulse-glow-sy, 1)) at ${p} ${m}, rgba(${l}, ${o}), transparent)`}).join(`,
|
|
26
26
|
`)}function _(t){return`
|
|
27
27
|
[data-beam="${t}"][data-paused],
|
|
28
28
|
[data-beam="${t}"][data-paused]::after,
|
|
@@ -55,12 +55,12 @@ ${o}
|
|
|
55
55
|
syntax: "<angle>";
|
|
56
56
|
initial-value: 0deg;
|
|
57
57
|
inherits: true;
|
|
58
|
-
}`}function be(t,e,a){const r=e==="dark",o=a/2.3;return t==="pulse-inner"?{sp:.28,dr:r?33:40,op:r?.48:.45,gh:r?.34:.22,bs:(r?1.9:2.6)*o,ss:(r?2.6:4.6)*o,ghs:(r?2.4:5.5)*o,huePeriod:
|
|
58
|
+
}`}function be(t,e,a){const r=e==="dark",o=a/2.3;return t==="pulse-inner"?{sp:.28,dr:r?33:40,op:r?.48:.45,gh:r?.34:.22,bs:(r?1.9:2.6)*o,ss:(r?2.6:4.6)*o,ghs:(r?2.4:5.5)*o,huePeriod:16}:{sp:r?.28:.36,dr:r?14:19,op:r?.46:0,gh:r?.16:.58,bs:(r?2.3:3.7)*o,ss:(r?6.4:4.6)*o,ghs:(r?2.4:3.8)*o,huePeriod:14}}function Ke(t,e){const{sp:a,dr:r,op:o,gh:s,bs:i,ss:c,ghs:b}=e;return[{prop:`--bw1-${t}`,a:1-a,b:1+a*1.1,period:c*.9,delay:0,unit:""},{prop:`--bh1-${t}`,a:1+a*.9,b:1-a*.85,period:c*1.26,delay:0,unit:""},{prop:`--bx1-${t}`,a:-r,b:r*.9,period:i*1.6,delay:0,unit:"px"},{prop:`--by1-${t}`,a:r*.55,b:-r*.7,period:i*1.6,delay:0,unit:"px"},{prop:`--bw2-${t}`,a:1+a,b:1-a*.85,period:c*1.1,delay:0,unit:""},{prop:`--bh2-${t}`,a:1-a*.8,b:1+a*1.05,period:c*.81,delay:0,unit:""},{prop:`--bx2-${t}`,a:r*.8,b:-r*.9,period:i*1.88,delay:0,unit:"px"},{prop:`--by2-${t}`,a:-r,b:r*.65,period:i*1.88,delay:0,unit:"px"},{prop:`--bw3-${t}`,a:1-a*.6,b:1+a*1.15,period:c*.98,delay:0,unit:""},{prop:`--bh3-${t}`,a:1+a*.75,b:1-a,period:c*1.4,delay:0,unit:""},{prop:`--bx3-${t}`,a:-r*.6,b:r,period:i*1.45,delay:0,unit:"px"},{prop:`--by3-${t}`,a:-r*.85,b:r*.45,period:i*1.45,delay:0,unit:"px"},{prop:`--bgh-${t}`,a:1-s,b:1+s,period:b,delay:0,unit:""},{prop:`--bop-tl-${t}`,a:1-o,b:1,period:i,delay:0,unit:""},{prop:`--bop-tr-${t}`,a:1-o,b:1,period:i*1.32,delay:i*.28,unit:""},{prop:`--bop-bl-${t}`,a:1-o,b:1,period:i*.84,delay:i*.55,unit:""},{prop:`--bop-br-${t}`,a:1-o,b:1,period:i*1.58,delay:i*.83,unit:""}]}function Qe(t,e,a,r,o,s){if(t!=="pulse-inner"&&t!=="pulse-outside")return null;const i=be(t,e,a);return{oscillators:Ke(s,i),hue:o?null:{prop:`--beam-hue-${s}`,range:360,period:i.huePeriod,continuous:!0}}}function Q(t,e,a){return` animation: ${e}-${t} ${a}s ease forwards;`}function Ze(t){const{size:e}=t;return e==="line"?ta(t):e==="sm"?Je(t):e==="pulse-inner"?aa(t):e==="pulse-outside"?ra(t):ea(t)}function Je(t){const{id:e,borderRadius:a,borderWidth:r,duration:o,strokeOpacity:s,innerOpacity:i,bloomOpacity:c,innerShadow:b,colorVariant:p,staticColors:m,brightness:n,saturation:l,hueRange:f,theme:w}=t,d=Math.max(0,a-r),g=p==="mono"?.5:1,H=s*g,O=i*g,y=c*g,X=m?"":`animation: beam-hue-shift-${e} 12s ease-in-out infinite;`,u=m?"":`
|
|
59
59
|
@keyframes beam-hue-shift-${e} {
|
|
60
|
-
0% { filter: hue-rotate(-${
|
|
61
|
-
50% { filter: hue-rotate(${
|
|
62
|
-
100% { filter: hue-rotate(-${
|
|
63
|
-
}`,
|
|
60
|
+
0% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
61
|
+
50% { filter: hue-rotate(${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
62
|
+
100% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
63
|
+
}`,W=w==="dark",k=W?`conic-gradient(
|
|
64
64
|
from var(--beam-angle-${e}),
|
|
65
65
|
transparent 0%, transparent 54%,
|
|
66
66
|
rgba(255, 255, 255, 0.1) 57%,
|
|
@@ -82,7 +82,7 @@ ${o}
|
|
|
82
82
|
rgba(0, 0, 0, 0.2) 72%,
|
|
83
83
|
rgba(0, 0, 0, 0.08) 75%,
|
|
84
84
|
transparent 78%, transparent 100%
|
|
85
|
-
)`,
|
|
85
|
+
)`,h=Me(p),Y=qe(p),x=W?`conic-gradient(
|
|
86
86
|
from var(--beam-angle-${e}),
|
|
87
87
|
transparent 0%, transparent 58%,
|
|
88
88
|
rgba(255, 255, 255, 0.03) 62%,
|
|
@@ -156,7 +156,7 @@ ${o}
|
|
|
156
156
|
border-radius: ${d}px;
|
|
157
157
|
padding: ${r}px;
|
|
158
158
|
clip-path: inset(0 round ${a}px);
|
|
159
|
-
background: ${k},${
|
|
159
|
+
background: ${k},${h};
|
|
160
160
|
-webkit-mask:
|
|
161
161
|
conic-gradient(
|
|
162
162
|
from var(--beam-angle-${e}),
|
|
@@ -183,7 +183,7 @@ ${o}
|
|
|
183
183
|
mask-composite: intersect, exclude;
|
|
184
184
|
pointer-events: none;
|
|
185
185
|
z-index: 2;
|
|
186
|
-
opacity: calc(var(--beam-opacity-${e}) * ${
|
|
186
|
+
opacity: calc(var(--beam-opacity-${e}) * ${H.toFixed(2)} * var(--beam-strength, 1));
|
|
187
187
|
${X}
|
|
188
188
|
}
|
|
189
189
|
|
|
@@ -195,7 +195,7 @@ ${o}
|
|
|
195
195
|
border-radius: ${a}px;
|
|
196
196
|
clip-path: inset(0 round ${a}px);
|
|
197
197
|
background: ${Y};
|
|
198
|
-
box-shadow: inset 0 0 5px 1px ${
|
|
198
|
+
box-shadow: inset 0 0 5px 1px ${b};
|
|
199
199
|
-webkit-mask-image: ${$};
|
|
200
200
|
-webkit-mask-composite: source-over;
|
|
201
201
|
mask-image: ${$};
|
|
@@ -212,13 +212,13 @@ ${o}
|
|
|
212
212
|
inset: 0;
|
|
213
213
|
border-radius: ${d}px;
|
|
214
214
|
clip-path: inset(0 round ${a}px);
|
|
215
|
-
background: ${
|
|
215
|
+
background: ${x};
|
|
216
216
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
217
217
|
-webkit-mask-composite: xor;
|
|
218
218
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
219
219
|
mask-composite: exclude;
|
|
220
220
|
padding: ${r}px;
|
|
221
|
-
filter: blur(8px) brightness(${
|
|
221
|
+
filter: blur(8px) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)});
|
|
222
222
|
pointer-events: none;
|
|
223
223
|
z-index: 3;
|
|
224
224
|
opacity: 0;
|
|
@@ -242,14 +242,14 @@ ${o}
|
|
|
242
242
|
from { --beam-opacity-${e}: 1; }
|
|
243
243
|
to { --beam-opacity-${e}: 0; }
|
|
244
244
|
}
|
|
245
|
-
${
|
|
245
|
+
${u}
|
|
246
246
|
${_(e)}
|
|
247
|
-
`}function ea(t){const{id:e,borderRadius:a,borderWidth:r,duration:o,strokeOpacity:s,innerOpacity:
|
|
247
|
+
`}function ea(t){const{id:e,borderRadius:a,borderWidth:r,duration:o,strokeOpacity:s,innerOpacity:i,bloomOpacity:c,innerShadow:b,colorVariant:p,staticColors:m,brightness:n,saturation:l,hueRange:f,theme:w}=t,d=Math.max(0,a-r),g=p==="mono"?.5:1,H=s*g,O=i*g,y=c*g,X=m?"":`animation: beam-hue-shift-${e} 12s ease-in-out infinite;`,u=m?"":`
|
|
248
248
|
@keyframes beam-hue-shift-${e} {
|
|
249
|
-
0% { filter: hue-rotate(-${
|
|
250
|
-
50% { filter: hue-rotate(${
|
|
251
|
-
100% { filter: hue-rotate(-${
|
|
252
|
-
}`,
|
|
249
|
+
0% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
250
|
+
50% { filter: hue-rotate(${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
251
|
+
100% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
252
|
+
}`,W=w==="dark",k=W?`conic-gradient(
|
|
253
253
|
from var(--beam-angle-${e}),
|
|
254
254
|
transparent 0%, transparent 54%,
|
|
255
255
|
rgba(255, 255, 255, 0.1) 57%,
|
|
@@ -271,7 +271,7 @@ ${_(e)}
|
|
|
271
271
|
rgba(0, 0, 0, 0.2) 72%,
|
|
272
272
|
rgba(0, 0, 0, 0.08) 75%,
|
|
273
273
|
transparent 78%, transparent 100%
|
|
274
|
-
)`,
|
|
274
|
+
)`,h=Ce(p),Y=Ge(p),x=W?`conic-gradient(
|
|
275
275
|
from var(--beam-angle-${e}),
|
|
276
276
|
transparent 0%, transparent 58%,
|
|
277
277
|
rgba(255, 255, 255, 0.03) 62%,
|
|
@@ -338,7 +338,7 @@ ${_(e)}
|
|
|
338
338
|
border-radius: ${d}px;
|
|
339
339
|
padding: ${r}px;
|
|
340
340
|
clip-path: inset(0 round ${a}px);
|
|
341
|
-
background: ${k},${
|
|
341
|
+
background: ${k},${h};
|
|
342
342
|
-webkit-mask:
|
|
343
343
|
conic-gradient(
|
|
344
344
|
from var(--beam-angle-${e}),
|
|
@@ -365,7 +365,7 @@ ${_(e)}
|
|
|
365
365
|
mask-composite: intersect, exclude;
|
|
366
366
|
pointer-events: none;
|
|
367
367
|
z-index: 2;
|
|
368
|
-
opacity: calc(var(--beam-opacity-${e}) * ${
|
|
368
|
+
opacity: calc(var(--beam-opacity-${e}) * ${H.toFixed(2)} * var(--beam-strength, 1));
|
|
369
369
|
${X}
|
|
370
370
|
}
|
|
371
371
|
|
|
@@ -376,7 +376,7 @@ ${_(e)}
|
|
|
376
376
|
inset: 0;
|
|
377
377
|
border-radius: ${a}px;
|
|
378
378
|
background: ${Y};
|
|
379
|
-
box-shadow: inset 0 0 9px 1px ${
|
|
379
|
+
box-shadow: inset 0 0 9px 1px ${b};
|
|
380
380
|
-webkit-mask-image:
|
|
381
381
|
conic-gradient(
|
|
382
382
|
from var(--beam-angle-${e}),
|
|
@@ -414,13 +414,13 @@ ${_(e)}
|
|
|
414
414
|
inset: 0;
|
|
415
415
|
border-radius: ${d}px;
|
|
416
416
|
clip-path: inset(0 round ${a}px);
|
|
417
|
-
background: ${
|
|
417
|
+
background: ${x};
|
|
418
418
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
419
419
|
-webkit-mask-composite: xor;
|
|
420
420
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
421
421
|
mask-composite: exclude;
|
|
422
422
|
padding: ${r}px;
|
|
423
|
-
filter: blur(8px) brightness(${
|
|
423
|
+
filter: blur(8px) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)});
|
|
424
424
|
pointer-events: none;
|
|
425
425
|
z-index: 3;
|
|
426
426
|
opacity: 0;
|
|
@@ -444,9 +444,9 @@ ${_(e)}
|
|
|
444
444
|
from { --beam-opacity-${e}: 1; }
|
|
445
445
|
to { --beam-opacity-${e}: 0; }
|
|
446
446
|
}
|
|
447
|
-
${
|
|
447
|
+
${u}
|
|
448
448
|
${_(e)}
|
|
449
|
-
`}function aa(t){const{id:e,borderRadius:a,borderWidth:r,duration:o,strokeOpacity:s,innerOpacity:
|
|
449
|
+
`}function aa(t){const{id:e,borderRadius:a,borderWidth:r,duration:o,strokeOpacity:s,innerOpacity:i,bloomOpacity:c,colorVariant:b,staticColors:p,brightness:m,saturation:n,hueRange:l,theme:f}=t,w=f==="dark",d=b==="mono"?.5:1,g=(s*d).toFixed(2),H=(i*d).toFixed(2),O=(c*d).toFixed(2),{op:y}=be("pulse-inner",f,o),X=8,u=m.toFixed(2),W=n.toFixed(2),k=p?`filter: brightness(${u}) saturate(${W});`:`filter: hue-rotate(var(--beam-hue-${e})) brightness(${u}) saturate(${W});`,h=p?`filter: blur(${X}px) brightness(${u}) saturate(${W});`:`filter: blur(${X}px) hue-rotate(var(--beam-hue-${e})) brightness(${u}) saturate(${W});`,Y=De(b,e),x=Ue(b,e,w),$=We(Te,b,1-y*.5);return`
|
|
450
450
|
${He(e)}
|
|
451
451
|
|
|
452
452
|
[data-beam="${e}"] {
|
|
@@ -491,7 +491,7 @@ ${Q(e,"beam-fade-out",.5)}
|
|
|
491
491
|
inset: 0;
|
|
492
492
|
border-radius: ${a}px;
|
|
493
493
|
clip-path: inset(0 round ${a}px);
|
|
494
|
-
background: ${
|
|
494
|
+
background: ${x};
|
|
495
495
|
-webkit-mask-image:
|
|
496
496
|
linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
|
|
497
497
|
linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
|
|
@@ -503,7 +503,7 @@ ${Q(e,"beam-fade-out",.5)}
|
|
|
503
503
|
pointer-events: none;
|
|
504
504
|
z-index: 1;
|
|
505
505
|
will-change: opacity, filter;
|
|
506
|
-
opacity: calc(var(--beam-opacity-${e}) * ${
|
|
506
|
+
opacity: calc(var(--beam-opacity-${e}) * ${H} * var(--beam-strength, 1));
|
|
507
507
|
${k}
|
|
508
508
|
}
|
|
509
509
|
|
|
@@ -529,7 +529,7 @@ ${Q(e,"beam-fade-out",.5)}
|
|
|
529
529
|
[data-beam="${e}"][data-fading] [data-beam-bloom] {
|
|
530
530
|
display: block;
|
|
531
531
|
opacity: calc(var(--beam-opacity-${e}) * ${O} * var(--beam-strength, 1));
|
|
532
|
-
${
|
|
532
|
+
${h}
|
|
533
533
|
}
|
|
534
534
|
|
|
535
535
|
@keyframes beam-fade-in-${e} { to { --beam-opacity-${e}: 1; } }
|
|
@@ -548,8 +548,8 @@ ${_(e)}
|
|
|
548
548
|
animation: none !important;
|
|
549
549
|
}
|
|
550
550
|
}
|
|
551
|
-
`}function ra(t){const{id:e,borderRadius:a,duration:r,strokeOpacity:o,innerOpacity:s,bloomOpacity:
|
|
552
|
-
${
|
|
551
|
+
`}function ra(t){const{id:e,borderRadius:a,duration:r,strokeOpacity:o,innerOpacity:s,bloomOpacity:i,colorVariant:c,staticColors:b,brightness:p,saturation:m,hueRange:n,theme:l,hairlineOpacity:f=0}=t,w=l==="dark",d=c==="mono"?.5:1,g=(o*d).toFixed(2),H=(s*d).toFixed(2),O=(i*d).toFixed(2),y=w?"70, 70, 70":"0, 0, 0",X=f.toFixed(2),u=`linear-gradient(rgba(${y}, ${X}), rgba(${y}, ${X}))`,{op:W}=be("pulse-outside",l,r),k=.95,h=.9,Y=w?3:6,x=w?22.5:15,$=p.toFixed(2),F=m.toFixed(2),J=b?`filter: brightness(${$}) saturate(${F});`:`filter: hue-rotate(var(--beam-hue-${e})) brightness(${$}) saturate(${F});`,ee=b?`filter: blur(${Y}px) brightness(${$}) saturate(${F});`:`filter: blur(${Y}px) hue-rotate(var(--beam-hue-${e})) brightness(${$}) saturate(${F});`,ae=b?`filter: blur(${x}px) brightness(${$}) saturate(${F});`:`filter: blur(${x}px) hue-rotate(var(--beam-hue-${e})) brightness(${$}) saturate(${F});`,B=ze(he,c,e),A=ze(he,c,e),re=We(Ne,c,1-W*.5),M=f>0?`${B},
|
|
552
|
+
${u}`:B;return`
|
|
553
553
|
${He(e)}
|
|
554
554
|
|
|
555
555
|
[data-beam="${e}"] {
|
|
@@ -566,7 +566,7 @@ ${Q(e,"beam-fade-in",.6)}
|
|
|
566
566
|
[data-beam="${e}"][data-fading] {
|
|
567
567
|
${Q(e,"beam-fade-out",.5)}
|
|
568
568
|
}
|
|
569
|
-
${
|
|
569
|
+
${f>0?`
|
|
570
570
|
/* Idle hairline — painted above the (opaque) child in the inner 1px edge ring so
|
|
571
571
|
it overlaps a standard inset component border exactly. */
|
|
572
572
|
[data-beam="${e}"]::after {
|
|
@@ -576,7 +576,7 @@ ${l>0?`
|
|
|
576
576
|
border-radius: ${a}px;
|
|
577
577
|
padding: 1px;
|
|
578
578
|
clip-path: inset(0 round ${a}px);
|
|
579
|
-
background: ${
|
|
579
|
+
background: ${u};
|
|
580
580
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
581
581
|
-webkit-mask-composite: xor;
|
|
582
582
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
@@ -613,10 +613,10 @@ ${l>0?`
|
|
|
613
613
|
z-index: -1;
|
|
614
614
|
border-radius: ${a+10}px;
|
|
615
615
|
background: ${A};
|
|
616
|
-
transform: scale(${k}, ${
|
|
616
|
+
transform: scale(${k}, ${h});
|
|
617
617
|
pointer-events: none;
|
|
618
618
|
will-change: opacity, filter;
|
|
619
|
-
opacity: calc(var(--beam-opacity-${e}) * ${
|
|
619
|
+
opacity: calc(var(--beam-opacity-${e}) * ${H} * var(--beam-strength, 1));
|
|
620
620
|
${ee}
|
|
621
621
|
}
|
|
622
622
|
|
|
@@ -627,7 +627,7 @@ ${l>0?`
|
|
|
627
627
|
z-index: -1;
|
|
628
628
|
border-radius: ${a+30}px;
|
|
629
629
|
background: ${re};
|
|
630
|
-
transform: scale(${k}, ${
|
|
630
|
+
transform: scale(${k}, ${h});
|
|
631
631
|
pointer-events: none;
|
|
632
632
|
will-change: transform;
|
|
633
633
|
opacity: 0;
|
|
@@ -656,17 +656,17 @@ ${_(e)}
|
|
|
656
656
|
animation: none !important;
|
|
657
657
|
}
|
|
658
658
|
}
|
|
659
|
-
`}function ta(t){const{id:e,borderRadius:a,borderWidth:r,duration:o,strokeOpacity:s,innerOpacity:
|
|
659
|
+
`}function ta(t){const{id:e,borderRadius:a,borderWidth:r,duration:o,strokeOpacity:s,innerOpacity:i,bloomOpacity:c,innerShadow:b,colorVariant:p,staticColors:m,brightness:n,saturation:l,hueRange:f,theme:w}=t,d=Math.max(0,a-r),g=w==="dark",H=s,O=i,y=c,X=m?"":`animation: beam-hue-shift-${e} 12s ease-in-out infinite;`,u=m?"":`animation: beam-hue-shift-bloom-${e} 8s ease-in-out infinite;`,W=m?"":`
|
|
660
660
|
@keyframes beam-hue-shift-${e} {
|
|
661
|
-
0% { filter: hue-rotate(-${
|
|
662
|
-
50% { filter: hue-rotate(${
|
|
663
|
-
100% { filter: hue-rotate(-${
|
|
661
|
+
0% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
662
|
+
50% { filter: hue-rotate(${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
663
|
+
100% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
664
664
|
}
|
|
665
665
|
|
|
666
666
|
@keyframes beam-hue-shift-bloom-${e} {
|
|
667
|
-
0% { filter: blur(8px) hue-rotate(-${
|
|
668
|
-
50% { filter: blur(8px) hue-rotate(${
|
|
669
|
-
100% { filter: blur(8px) hue-rotate(-${
|
|
667
|
+
0% { filter: blur(8px) hue-rotate(-${f+10}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
668
|
+
50% { filter: blur(8px) hue-rotate(${f+10}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
669
|
+
100% { filter: blur(8px) hue-rotate(-${f+10}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
670
670
|
}`,k=g?`radial-gradient(
|
|
671
671
|
ellipse calc(24px * var(--beam-w-${e})) calc(28px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) calc(100% + 2px),
|
|
672
672
|
rgba(255, 255, 255, 0.38) 0%,
|
|
@@ -677,7 +677,7 @@ ${_(e)}
|
|
|
677
677
|
rgba(0, 0, 0, 0.6) 0%,
|
|
678
678
|
rgba(0, 0, 0, 0.25) 35%,
|
|
679
679
|
transparent 70%
|
|
680
|
-
)`,
|
|
680
|
+
)`,h=Ee(p,g,e),Y=Le(p,e),x=Ae(p,g,e),$=p==="mono"?"filter: blur(6px);":"";return`
|
|
681
681
|
@property --beam-x-${e} {
|
|
682
682
|
syntax: "<number>";
|
|
683
683
|
initial-value: 0;
|
|
@@ -754,7 +754,7 @@ ${_(e)}
|
|
|
754
754
|
border-radius: ${d}px;
|
|
755
755
|
padding: ${r}px;
|
|
756
756
|
clip-path: inset(0 round ${a}px);
|
|
757
|
-
background: ${k}, ${
|
|
757
|
+
background: ${k}, ${h};
|
|
758
758
|
-webkit-mask:
|
|
759
759
|
radial-gradient(
|
|
760
760
|
ellipse calc(78px * var(--beam-w-${e})) calc(60px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
|
|
@@ -773,7 +773,7 @@ ${_(e)}
|
|
|
773
773
|
mask-composite: intersect, exclude;
|
|
774
774
|
pointer-events: none;
|
|
775
775
|
z-index: 2;
|
|
776
|
-
opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${
|
|
776
|
+
opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${H.toFixed(2)} * var(--beam-strength, 1));
|
|
777
777
|
${X}
|
|
778
778
|
}
|
|
779
779
|
|
|
@@ -784,7 +784,7 @@ ${_(e)}
|
|
|
784
784
|
inset: 0;
|
|
785
785
|
border-radius: ${a}px;
|
|
786
786
|
background: ${Y};
|
|
787
|
-
box-shadow: inset 0 0 9px 1px ${
|
|
787
|
+
box-shadow: inset 0 0 9px 1px ${b};
|
|
788
788
|
-webkit-mask-image:
|
|
789
789
|
radial-gradient(
|
|
790
790
|
ellipse calc(78px * var(--beam-w-${e})) calc(60px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
|
|
@@ -825,7 +825,7 @@ ${_(e)}
|
|
|
825
825
|
white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
|
|
826
826
|
);
|
|
827
827
|
mask-composite: add;
|
|
828
|
-
background: ${
|
|
828
|
+
background: ${x};
|
|
829
829
|
${$}
|
|
830
830
|
pointer-events: none;
|
|
831
831
|
z-index: 3;
|
|
@@ -836,7 +836,7 @@ ${_(e)}
|
|
|
836
836
|
[data-beam="${e}"][data-fading] [data-beam-bloom] {
|
|
837
837
|
display: block;
|
|
838
838
|
opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${y.toFixed(2)} * var(--beam-strength, 1));
|
|
839
|
-
${
|
|
839
|
+
${u}
|
|
840
840
|
}
|
|
841
841
|
|
|
842
842
|
@keyframes beam-travel-${e} {
|
|
@@ -893,6 +893,6 @@ ${_(e)}
|
|
|
893
893
|
from { --beam-opacity-${e}: 1; }
|
|
894
894
|
to { --beam-opacity-${e}: 0; }
|
|
895
895
|
}
|
|
896
|
-
${
|
|
896
|
+
${W}
|
|
897
897
|
${_(e)}
|
|
898
|
-
`}const Z=new Set;let E=null,ce=0;const oa=1e3/30-2,sa=Math.PI*2;function ye(t){return(1-Math.cos(sa*t))/2}function Xe(t){if(E=requestAnimationFrame(Xe),t-ce<oa)return;ce=t;const e=t/1e3;Z.forEach(({el:a,config:r})=>{for(const o of r.oscillators){const s=(e-o.delay)/o.period,
|
|
898
|
+
`}const Z=new Set;let E=null,ce=0;const oa=1e3/30-2,sa=Math.PI*2;function ye(t){return(1-Math.cos(sa*t))/2}function Xe(t){if(E=requestAnimationFrame(Xe),t-ce<oa)return;ce=t;const e=t/1e3;Z.forEach(({el:a,config:r})=>{for(const o of r.oscillators){const s=(e-o.delay)/o.period,i=o.a+(o.b-o.a)*ye(s);a.style.setProperty(o.prop,o.unit==="px"?`${i.toFixed(2)}px`:i.toFixed(4))}if(r.hue){const{prop:o,range:s,period:i,continuous:c}=r.hue,b=c?e/i%1*s:-s+2*s*ye(e/i);a.style.setProperty(o,`${b.toFixed(2)}deg`)}})}function ia(){E==null&&(ce=0,E=requestAnimationFrame(Xe))}function na(){Z.size===0&&E!=null&&(cancelAnimationFrame(E),E=null)}function ca(t,e){const a={el:t,config:e};return Z.add(a),ia(),()=>{Z.delete(a),na()}}function pa(){const[t,e]=v.useState(()=>typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");return v.useEffect(()=>{if(typeof window>"u")return;const a=window.matchMedia("(prefers-color-scheme: dark)"),r=o=>{e(o.matches?"dark":"light")};return a.addEventListener("change",r),()=>a.removeEventListener("change",r)},[]),t}function ba(t,e){return t==="auto"?e:t}const Ye=v.forwardRef(function({children:e,size:a="md",colorVariant:r="colorful",theme:o="dark",staticColors:s=!1,duration:i,active:c=!0,borderRadius:b,brightness:p,saturation:m,hueRange:n=30,strength:l=1,className:f,style:w,onActivate:d,onDeactivate:g,onAnimationEnd:H,...O},y){const u=v.useId().replace(/:/g,"-"),W=pa(),k=v.useRef(null),[h,Y]=v.useState(c),[x,$]=v.useState(!1),[F,J]=v.useState(!0),[ee,ae]=v.useState(null),[B,A]=v.useState({x:1,y:1});v.useEffect(()=>{if(b!=null)return;const z=k.current;if(!z)return;const S=()=>{const I=z.firstElementChild;if(!I)return;const ie=getComputedStyle(I),P=parseFloat(ie.borderTopLeftRadius);!isNaN(P)&&P>0&&ae(P)};S();const G=new MutationObserver(S);return G.observe(z,{childList:!0,subtree:!1}),()=>G.disconnect()},[b,e]),v.useEffect(()=>{c&&!h&&!x?Y(!0):!c&&h&&!x&&$(!0)},[c,h,x]),v.useEffect(()=>{const z=k.current;if(!z||typeof IntersectionObserver>"u")return;const S=new IntersectionObserver(G=>{for(const I of G)J(I.isIntersecting)},{rootMargin:"256px"});return S.observe(z),()=>S.disconnect()},[]),v.useEffect(()=>{if(a!=="pulse-outside"){A({x:1,y:1});return}const z=k.current;if(!z)return;const S=350,G=140,I=.35,ie=4,P=V=>Math.max(I,Math.min(ie,V)),ge=()=>{const V=z.firstElementChild;if(!V)return;const D=V.getBoundingClientRect();if(!D.width||!D.height)return;const ue=+P(D.width/S).toFixed(3),xe=+P(D.height/G).toFixed(3);A(ne=>ne.x===ue&&ne.y===xe?ne:{x:ue,y:xe})};if(ge(),typeof ResizeObserver>"u")return;const me=z.firstElementChild;if(!me)return;const $e=new ResizeObserver(ge);return $e.observe(me),()=>$e.disconnect()},[a,e]);const re=v.useCallback(z=>{const S=z.animationName;S.includes("fade-out")?(Y(!1),$(!1),g==null||g()):S.includes("fade-in")&&(d==null||d()),H==null||H(z)},[d,g,H]),M=ba(o,W),R=K[a][M],te=ke[a],oe=a==="pulse-inner"||a==="pulse-outside",le=b??ee??te.borderRadius,j=i??(a==="line"?3.1:oe?2.3:1.96),fe=m??R.saturation,de=p??R.brightness??1.3,T=a==="line"?Math.min(n,13):n,N=r==="mono"?!0:s,Oe=v.useMemo(()=>Ze({id:u,borderRadius:le,borderWidth:te.borderWidth,duration:j,strokeOpacity:R.strokeOpacity,innerOpacity:R.innerOpacity,bloomOpacity:R.bloomOpacity,innerShadow:R.innerShadow,size:a,colorVariant:r,staticColors:N,brightness:de,saturation:fe,hueRange:T,theme:M,hairlineOpacity:R.hairlineOpacity}),[u,le,te.borderWidth,j,R.strokeOpacity,R.innerOpacity,R.bloomOpacity,R.innerShadow,R.hairlineOpacity,a,r,N,de,fe,T,M]),se=v.useMemo(()=>oe?Qe(a,M,j,T,N,u):null,[oe,a,M,j,T,N,u]);v.useEffect(()=>{var S;if(!se||!(h||x)||!F)return;const z=k.current;if(z&&!(typeof window<"u"&&((S=window.matchMedia)!=null&&S.call(window,"(prefers-reduced-motion: reduce)").matches)))return ca(z,se)},[se,h,x,F]);const Se=v.useCallback(z=>{k.current=z,typeof y=="function"?y(z):y&&(y.current=z)},[y]),Fe={...w??{},"--beam-strength":Math.max(0,Math.min(1,l)),...a==="pulse-outside"?{"--pulse-glow-sx":B.x,"--pulse-glow-sy":B.y}:{}};return L.jsxs(L.Fragment,{children:[L.jsx("style",{children:Oe}),L.jsxs("div",{...O,ref:Se,"data-beam":u,"data-active":h&&!x?"":void 0,"data-fading":x?"":void 0,"data-paused":h&&!x&&!F?"":void 0,className:f,style:Fe,onAnimationEnd:re,children:[e,L.jsx("div",{"data-beam-bloom":!0})]})]})});exports.BorderBeam=Ye;exports.default=Ye;exports.sizePresets=ke;exports.sizeThemePresets=K;exports.themeColors=Re;
|
package/dist/index.es.js
CHANGED
|
@@ -286,8 +286,8 @@ function Ae(t) {
|
|
|
286
286
|
const e = C[t], a = t === "mono" ? 0.225 : 0.45;
|
|
287
287
|
return e.border.map((r) => {
|
|
288
288
|
const o = r.color.replace("rgb(", "rgba(").replace(")", `, ${a})`);
|
|
289
|
-
return `radial-gradient(ellipse ${r.size.split(" ").map((
|
|
290
|
-
const c = parseInt(
|
|
289
|
+
return `radial-gradient(ellipse ${r.size.split(" ").map((i) => {
|
|
290
|
+
const c = parseInt(i);
|
|
291
291
|
return `${Math.round(c * 0.9)}px`;
|
|
292
292
|
}).join(" ")} at ${r.pos}, ${o}, transparent)`;
|
|
293
293
|
}).join(`,
|
|
@@ -397,8 +397,8 @@ const je = {
|
|
|
397
397
|
};
|
|
398
398
|
function Te(t, e, a) {
|
|
399
399
|
return je[t][e ? "dark" : "light"].map((o) => {
|
|
400
|
-
const s = o.offsetX === 0 ? "" : o.offsetX > 0 ? ` + ${o.offsetX}px` : ` - ${Math.abs(o.offsetX)}px`,
|
|
401
|
-
return `radial-gradient(ellipse calc(${o.sizeW}px * var(--beam-w-${a})) calc(${o.sizeH}px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%${s}) calc(100%${
|
|
400
|
+
const s = o.offsetX === 0 ? "" : o.offsetX > 0 ? ` + ${o.offsetX}px` : ` - ${Math.abs(o.offsetX)}px`, i = o.offsetY === 0 ? "" : o.offsetY > 0 ? ` + ${o.offsetY}px` : ` - ${Math.abs(o.offsetY)}px`;
|
|
401
|
+
return `radial-gradient(ellipse calc(${o.sizeW}px * var(--beam-w-${a})) calc(${o.sizeH}px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%${s}) calc(100%${i}), ${o.color}, transparent)`;
|
|
402
402
|
}).join(`,
|
|
403
403
|
`);
|
|
404
404
|
}
|
|
@@ -560,28 +560,28 @@ function q(t, e) {
|
|
|
560
560
|
return r ? `rgba(${r[1]}, ${r[2]}, ${r[3]}, ${e.toFixed(2)})` : t;
|
|
561
561
|
}
|
|
562
562
|
function Ue(t, e, a) {
|
|
563
|
-
const r = _e(t, e), o = De[t][e ? "dark" : "light"], s = t === "mono",
|
|
564
|
-
($) => s ? { color1: q($.color1,
|
|
565
|
-
),
|
|
563
|
+
const r = _e(t, e), o = De[t][e ? "dark" : "light"], s = t === "mono", i = s ? 0.14 : 1, c = s ? q(r.primary, 0.14) : r.primary, b = s ? q(r.primary, 0.09) : r.primary, p = s ? q(r.secondary, 0.12) : r.secondary, m = s ? U(r.secondary, 0.06) : U(r.secondary, 0.49), n = o.spikes.map(
|
|
564
|
+
($) => s ? { color1: q($.color1, i), color2: q($.color2, i * 0.7) } : $
|
|
565
|
+
), l = s ? "12px" : "0.8px", f = s ? "14px" : "2px", v = s ? "12px" : "1.2px", d = s ? "10px" : "0.6px", g = s ? "42px" : "92px", W = s ? "38px" : "72px", Y = s ? "40px" : "85px", y = s ? "32px" : "60px", H = s ? "12px" : "1px", x = s ? "rgba(255, 255, 255, 0.5)" : "rgba(255, 255, 255, 1)", w = s ? "rgba(255, 255, 255, 0.45)" : "rgba(255, 255, 255, 0.9)", k = s ? "rgba(255, 255, 255, 0.25)" : "rgba(255, 255, 255, 0.5)", h = s ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.3)", X = s ? "rgba(255, 255, 255, 0.06)" : "rgba(255, 255, 255, 0.12)", u = s ? "rgba(255, 255, 255, 0.015)" : "rgba(255, 255, 255, 0.03)";
|
|
566
566
|
if (e)
|
|
567
|
-
return `radial-gradient(ellipse calc(${
|
|
567
|
+
return `radial-gradient(ellipse calc(${l} * var(--beam-spike-${a})) calc(${g} * var(--beam-h-${a})) at 8% calc(100% - 2px), ${c}, ${b} 30%, transparent 88%),
|
|
568
568
|
radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${p}, ${m} 50%, transparent 95%),
|
|
569
|
-
radial-gradient(ellipse calc(${
|
|
570
|
-
radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${
|
|
571
|
-
radial-gradient(ellipse calc(${v} * (2 - var(--beam-spike2-${a}))) calc(${Y} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${
|
|
572
|
-
radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${
|
|
573
|
-
radial-gradient(ellipse calc(${d} * (2 - var(--beam-spike-${a}))) calc(${y} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${
|
|
574
|
-
radial-gradient(ellipse calc(21px * var(--beam-spike-${a})) calc(15px * var(--beam-spike2-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100% + 1px), ${x} 0%, ${
|
|
575
|
-
radial-gradient(ellipse calc(42px * var(--beam-w-${a})) calc(40px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) 100%, ${
|
|
569
|
+
radial-gradient(ellipse calc(${f} * (2 - var(--beam-spike-${a}))) calc(${W} * var(--beam-h-${a})) at 36% calc(100% - 3px), ${n[0].color1}, ${n[0].color2} 40%, transparent 90%),
|
|
570
|
+
radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${n[1].color1}, ${n[1].color2} 55%, transparent 96%),
|
|
571
|
+
radial-gradient(ellipse calc(${v} * (2 - var(--beam-spike2-${a}))) calc(${Y} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${n[2].color1}, ${n[2].color2} 35%, transparent 89%),
|
|
572
|
+
radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${n[3].color1}, ${n[3].color2} 48%, transparent 94%),
|
|
573
|
+
radial-gradient(ellipse calc(${d} * (2 - var(--beam-spike-${a}))) calc(${y} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${n[4].color1}, ${n[4].color2} 42%, transparent 91%),
|
|
574
|
+
radial-gradient(ellipse calc(21px * var(--beam-spike-${a})) calc(15px * var(--beam-spike2-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100% + 1px), ${x} 0%, ${w} 20%, ${k} 50%, transparent 100%),
|
|
575
|
+
radial-gradient(ellipse calc(42px * var(--beam-w-${a})) calc(40px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) 100%, ${h} 0%, ${X} 25%, ${u} 55%, transparent 80%)`;
|
|
576
576
|
{
|
|
577
|
-
const $ = s ? q(r.primary, 0.11) : U(r.primary, 0.85),
|
|
578
|
-
return `radial-gradient(ellipse calc(${
|
|
579
|
-
radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${p}, ${
|
|
580
|
-
radial-gradient(ellipse calc(${
|
|
581
|
-
radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${
|
|
582
|
-
radial-gradient(ellipse calc(${v} * (2 - var(--beam-spike2-${a}))) calc(${Y} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${
|
|
583
|
-
radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${
|
|
584
|
-
radial-gradient(ellipse calc(${H} * (2 - var(--beam-spike-${a}))) calc(${y} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${
|
|
577
|
+
const $ = s ? q(r.primary, 0.11) : U(r.primary, 0.85), F = s ? q(r.secondary, 0.09) : U(r.secondary, 0.7);
|
|
578
|
+
return `radial-gradient(ellipse calc(${l} * var(--beam-spike-${a})) calc(${g} * var(--beam-h-${a})) at 8% calc(100% - 2px), ${c}, ${$} 30%, transparent 88%),
|
|
579
|
+
radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${p}, ${F} 50%, transparent 95%),
|
|
580
|
+
radial-gradient(ellipse calc(${f} * (2 - var(--beam-spike-${a}))) calc(${W} * var(--beam-h-${a})) at 36% calc(100% - 3px), ${n[0].color1}, ${n[0].color2} 40%, transparent 90%),
|
|
581
|
+
radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${n[1].color1}, ${n[1].color2} 55%, transparent 96%),
|
|
582
|
+
radial-gradient(ellipse calc(${v} * (2 - var(--beam-spike2-${a}))) calc(${Y} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${n[2].color1}, ${n[2].color2} 35%, transparent 89%),
|
|
583
|
+
radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${n[3].color1}, ${n[3].color2} 48%, transparent 94%),
|
|
584
|
+
radial-gradient(ellipse calc(${H} * (2 - var(--beam-spike-${a}))) calc(${y} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${n[4].color1}, ${n[4].color2} 42%, transparent 91%),
|
|
585
585
|
radial-gradient(ellipse calc(50px * var(--beam-w-${a})) calc(32px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`;
|
|
586
586
|
}
|
|
587
587
|
}
|
|
@@ -635,44 +635,44 @@ function Je(t, e, a) {
|
|
|
635
635
|
const r = t.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
|
|
636
636
|
return `rgba(${r ? `${r[1]}, ${r[2]}, ${r[3]}` : "255, 255, 255"}, var(--bop-${e}-${a}))`;
|
|
637
637
|
}
|
|
638
|
-
function pe(t, e, a, r, o, s,
|
|
639
|
-
return `radial-gradient(ellipse calc(${e}px * var(--bw${r}-${c}) * var(--pulse-glow-sx, 1)) calc(${a}px * var(--bh${r}-${c}) * var(--bgh-${c}) * var(--pulse-glow-sy, 1)) at calc(${s} + var(--bx${r}-${c})) calc(${
|
|
638
|
+
function pe(t, e, a, r, o, s, i, c) {
|
|
639
|
+
return `radial-gradient(ellipse calc(${e}px * var(--bw${r}-${c}) * var(--pulse-glow-sx, 1)) calc(${a}px * var(--bh${r}-${c}) * var(--bgh-${c}) * var(--pulse-glow-sy, 1)) at calc(${s} + var(--bx${r}-${c})) calc(${i} + var(--by${r}-${c})), ${Je(t, o, c)}, transparent)`;
|
|
640
640
|
}
|
|
641
641
|
function ea(t, e) {
|
|
642
642
|
return C[t].border.map((a, r) => {
|
|
643
|
-
const { region: o, quad: s } = Xe[r], [
|
|
644
|
-
return pe(a.color,
|
|
643
|
+
const { region: o, quad: s } = Xe[r], [i, c] = a.pos.split(" "), [b, p] = a.size.split(" ").map(parseFloat);
|
|
644
|
+
return pe(a.color, b, p, o, s, i, c, e);
|
|
645
645
|
}).join(`,
|
|
646
646
|
`);
|
|
647
647
|
}
|
|
648
648
|
function aa(t, e, a) {
|
|
649
649
|
const o = C[t].border.map((p, m) => {
|
|
650
|
-
const { region:
|
|
651
|
-
return pe(p.color, d, g,
|
|
652
|
-
}), s = a ? "255, 255, 255" : "0, 0, 0",
|
|
650
|
+
const { region: n, quad: l } = Xe[m], [f, v] = p.pos.split(" "), [d, g] = Ke[m];
|
|
651
|
+
return pe(p.color, d, g, n, l, f, v, e);
|
|
652
|
+
}), s = a ? "255, 255, 255" : "0, 0, 0", i = a ? 0.18 : 0.08, b = [
|
|
653
653
|
["0%", "0%", "tl"],
|
|
654
654
|
["100%", "0%", "tr"],
|
|
655
655
|
["0%", "100%", "bl"],
|
|
656
656
|
["100%", "100%", "br"]
|
|
657
657
|
].map(
|
|
658
|
-
([p, m,
|
|
658
|
+
([p, m, n]) => `radial-gradient(ellipse 60px 60px at ${p} ${m}, rgba(${s}, calc(${i} * var(--bop-${n}-${e}))), transparent 70%)`
|
|
659
659
|
);
|
|
660
|
-
return [...o, ...
|
|
660
|
+
return [...o, ...b].join(`,
|
|
661
661
|
`);
|
|
662
662
|
}
|
|
663
663
|
function we(t, e, a) {
|
|
664
664
|
const r = C[e].border;
|
|
665
665
|
return t.map((o) => {
|
|
666
|
-
const s = r[o.ci], [
|
|
667
|
-
return pe(s.color, o.w, o.h, o.region, o.quad, o.x ??
|
|
666
|
+
const s = r[o.ci], [i, c] = s.pos.split(" ");
|
|
667
|
+
return pe(s.color, o.w, o.h, o.region, o.quad, o.x ?? i, o.y ?? c, a);
|
|
668
668
|
}).join(`,
|
|
669
669
|
`);
|
|
670
670
|
}
|
|
671
671
|
function Ye(t, e, a) {
|
|
672
672
|
const r = C[e].border, o = +a.toFixed(3);
|
|
673
673
|
return t.map((s) => {
|
|
674
|
-
const
|
|
675
|
-
return `radial-gradient(ellipse ${s.w}px ${s.h}px at ${p} ${m}, rgba(${
|
|
674
|
+
const i = r[s.ci], [c, b] = i.pos.split(" "), p = s.x ?? c, m = s.y ?? b, n = i.color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/), l = n ? `${n[1]}, ${n[2]}, ${n[3]}` : "255, 255, 255";
|
|
675
|
+
return `radial-gradient(ellipse calc(${s.w}px * var(--pulse-glow-sx, 1)) calc(${s.h}px * var(--pulse-glow-sy, 1)) at ${p} ${m}, rgba(${l}, ${o}), transparent)`;
|
|
676
676
|
}).join(`,
|
|
677
677
|
`);
|
|
678
678
|
}
|
|
@@ -729,7 +729,8 @@ function be(t, e, a) {
|
|
|
729
729
|
bs: (r ? 1.9 : 2.6) * o,
|
|
730
730
|
ss: (r ? 2.6 : 4.6) * o,
|
|
731
731
|
ghs: (r ? 2.4 : 5.5) * o,
|
|
732
|
-
|
|
732
|
+
// Full hue revolution period (seconds) — colors continuously cycle.
|
|
733
|
+
huePeriod: 16
|
|
733
734
|
} : {
|
|
734
735
|
sp: r ? 0.28 : 0.36,
|
|
735
736
|
dr: r ? 14 : 19,
|
|
@@ -738,37 +739,40 @@ function be(t, e, a) {
|
|
|
738
739
|
bs: (r ? 2.3 : 3.7) * o,
|
|
739
740
|
ss: (r ? 6.4 : 4.6) * o,
|
|
740
741
|
ghs: (r ? 2.4 : 3.8) * o,
|
|
741
|
-
|
|
742
|
+
// Full hue revolution period (seconds) — colors continuously cycle.
|
|
743
|
+
huePeriod: 14
|
|
742
744
|
};
|
|
743
745
|
}
|
|
744
746
|
function ra(t, e) {
|
|
745
|
-
const { sp: a, dr: r, op: o, gh: s, bs:
|
|
747
|
+
const { sp: a, dr: r, op: o, gh: s, bs: i, ss: c, ghs: b } = e;
|
|
746
748
|
return [
|
|
747
749
|
{ prop: `--bw1-${t}`, a: 1 - a, b: 1 + a * 1.1, period: c * 0.9, delay: 0, unit: "" },
|
|
748
750
|
{ prop: `--bh1-${t}`, a: 1 + a * 0.9, b: 1 - a * 0.85, period: c * 1.26, delay: 0, unit: "" },
|
|
749
|
-
{ prop: `--bx1-${t}`, a: -r, b: r * 0.9, period:
|
|
750
|
-
{ prop: `--by1-${t}`, a: r * 0.55, b: -r * 0.7, period:
|
|
751
|
+
{ prop: `--bx1-${t}`, a: -r, b: r * 0.9, period: i * 1.6, delay: 0, unit: "px" },
|
|
752
|
+
{ prop: `--by1-${t}`, a: r * 0.55, b: -r * 0.7, period: i * 1.6, delay: 0, unit: "px" },
|
|
751
753
|
{ prop: `--bw2-${t}`, a: 1 + a, b: 1 - a * 0.85, period: c * 1.1, delay: 0, unit: "" },
|
|
752
754
|
{ prop: `--bh2-${t}`, a: 1 - a * 0.8, b: 1 + a * 1.05, period: c * 0.81, delay: 0, unit: "" },
|
|
753
|
-
{ prop: `--bx2-${t}`, a: r * 0.8, b: -r * 0.9, period:
|
|
754
|
-
{ prop: `--by2-${t}`, a: -r, b: r * 0.65, period:
|
|
755
|
+
{ prop: `--bx2-${t}`, a: r * 0.8, b: -r * 0.9, period: i * 1.88, delay: 0, unit: "px" },
|
|
756
|
+
{ prop: `--by2-${t}`, a: -r, b: r * 0.65, period: i * 1.88, delay: 0, unit: "px" },
|
|
755
757
|
{ prop: `--bw3-${t}`, a: 1 - a * 0.6, b: 1 + a * 1.15, period: c * 0.98, delay: 0, unit: "" },
|
|
756
758
|
{ prop: `--bh3-${t}`, a: 1 + a * 0.75, b: 1 - a, period: c * 1.4, delay: 0, unit: "" },
|
|
757
|
-
{ prop: `--bx3-${t}`, a: -r * 0.6, b: r, period:
|
|
758
|
-
{ prop: `--by3-${t}`, a: -r * 0.85, b: r * 0.45, period:
|
|
759
|
-
{ prop: `--bgh-${t}`, a: 1 - s, b: 1 + s, period:
|
|
760
|
-
{ prop: `--bop-tl-${t}`, a: 1 - o, b: 1, period:
|
|
761
|
-
{ prop: `--bop-tr-${t}`, a: 1 - o, b: 1, period:
|
|
762
|
-
{ prop: `--bop-bl-${t}`, a: 1 - o, b: 1, period:
|
|
763
|
-
{ prop: `--bop-br-${t}`, a: 1 - o, b: 1, period:
|
|
759
|
+
{ prop: `--bx3-${t}`, a: -r * 0.6, b: r, period: i * 1.45, delay: 0, unit: "px" },
|
|
760
|
+
{ prop: `--by3-${t}`, a: -r * 0.85, b: r * 0.45, period: i * 1.45, delay: 0, unit: "px" },
|
|
761
|
+
{ prop: `--bgh-${t}`, a: 1 - s, b: 1 + s, period: b, delay: 0, unit: "" },
|
|
762
|
+
{ prop: `--bop-tl-${t}`, a: 1 - o, b: 1, period: i, delay: 0, unit: "" },
|
|
763
|
+
{ prop: `--bop-tr-${t}`, a: 1 - o, b: 1, period: i * 1.32, delay: i * 0.28, unit: "" },
|
|
764
|
+
{ prop: `--bop-bl-${t}`, a: 1 - o, b: 1, period: i * 0.84, delay: i * 0.55, unit: "" },
|
|
765
|
+
{ prop: `--bop-br-${t}`, a: 1 - o, b: 1, period: i * 1.58, delay: i * 0.83, unit: "" }
|
|
764
766
|
];
|
|
765
767
|
}
|
|
766
768
|
function ta(t, e, a, r, o, s) {
|
|
767
769
|
if (t !== "pulse-inner" && t !== "pulse-outside") return null;
|
|
768
|
-
const
|
|
770
|
+
const i = be(t, e, a);
|
|
769
771
|
return {
|
|
770
|
-
oscillators: ra(s,
|
|
771
|
-
|
|
772
|
+
oscillators: ra(s, i),
|
|
773
|
+
// Pulse colors continuously rotate a full hue circle so the palette is never
|
|
774
|
+
// pinned to fixed edges (no more "always red top-right / green left").
|
|
775
|
+
hue: o ? null : { prop: `--beam-hue-${s}`, range: 360, period: i.huePeriod, continuous: !0 }
|
|
772
776
|
};
|
|
773
777
|
}
|
|
774
778
|
function K(t, e, a) {
|
|
@@ -785,21 +789,21 @@ function sa(t) {
|
|
|
785
789
|
borderWidth: r,
|
|
786
790
|
duration: o,
|
|
787
791
|
strokeOpacity: s,
|
|
788
|
-
innerOpacity:
|
|
792
|
+
innerOpacity: i,
|
|
789
793
|
bloomOpacity: c,
|
|
790
|
-
innerShadow:
|
|
794
|
+
innerShadow: b,
|
|
791
795
|
colorVariant: p,
|
|
792
796
|
staticColors: m,
|
|
793
|
-
brightness:
|
|
794
|
-
saturation:
|
|
795
|
-
hueRange:
|
|
797
|
+
brightness: n,
|
|
798
|
+
saturation: l,
|
|
799
|
+
hueRange: f,
|
|
796
800
|
theme: v
|
|
797
|
-
} = t, d = Math.max(0, a - r), g = p === "mono" ? 0.5 : 1,
|
|
801
|
+
} = t, d = Math.max(0, a - r), g = p === "mono" ? 0.5 : 1, W = s * g, Y = i * g, y = c * g, H = m ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, x = m ? "" : `
|
|
798
802
|
@keyframes beam-hue-shift-${e} {
|
|
799
|
-
0% { filter: hue-rotate(-${
|
|
800
|
-
50% { filter: hue-rotate(${
|
|
801
|
-
100% { filter: hue-rotate(-${
|
|
802
|
-
}`,
|
|
803
|
+
0% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
804
|
+
50% { filter: hue-rotate(${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
805
|
+
100% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
806
|
+
}`, w = v === "dark", k = w ? `conic-gradient(
|
|
803
807
|
from var(--beam-angle-${e}),
|
|
804
808
|
transparent 0%, transparent 54%,
|
|
805
809
|
rgba(255, 255, 255, 0.1) 57%,
|
|
@@ -821,7 +825,7 @@ function sa(t) {
|
|
|
821
825
|
rgba(0, 0, 0, 0.2) 72%,
|
|
822
826
|
rgba(0, 0, 0, 0.08) 75%,
|
|
823
827
|
transparent 78%, transparent 100%
|
|
824
|
-
)`,
|
|
828
|
+
)`, h = Pe(p), X = Be(p), u = w ? `conic-gradient(
|
|
825
829
|
from var(--beam-angle-${e}),
|
|
826
830
|
transparent 0%, transparent 58%,
|
|
827
831
|
rgba(255, 255, 255, 0.03) 62%,
|
|
@@ -896,7 +900,7 @@ function sa(t) {
|
|
|
896
900
|
border-radius: ${d}px;
|
|
897
901
|
padding: ${r}px;
|
|
898
902
|
clip-path: inset(0 round ${a}px);
|
|
899
|
-
background: ${k},${
|
|
903
|
+
background: ${k},${h};
|
|
900
904
|
-webkit-mask:
|
|
901
905
|
conic-gradient(
|
|
902
906
|
from var(--beam-angle-${e}),
|
|
@@ -923,7 +927,7 @@ function sa(t) {
|
|
|
923
927
|
mask-composite: intersect, exclude;
|
|
924
928
|
pointer-events: none;
|
|
925
929
|
z-index: 2;
|
|
926
|
-
opacity: calc(var(--beam-opacity-${e}) * ${
|
|
930
|
+
opacity: calc(var(--beam-opacity-${e}) * ${W.toFixed(2)} * var(--beam-strength, 1));
|
|
927
931
|
${H}
|
|
928
932
|
}
|
|
929
933
|
|
|
@@ -935,7 +939,7 @@ function sa(t) {
|
|
|
935
939
|
border-radius: ${a}px;
|
|
936
940
|
clip-path: inset(0 round ${a}px);
|
|
937
941
|
background: ${X};
|
|
938
|
-
box-shadow: inset 0 0 5px 1px ${
|
|
942
|
+
box-shadow: inset 0 0 5px 1px ${b};
|
|
939
943
|
-webkit-mask-image: ${$};
|
|
940
944
|
-webkit-mask-composite: source-over;
|
|
941
945
|
mask-image: ${$};
|
|
@@ -952,13 +956,13 @@ function sa(t) {
|
|
|
952
956
|
inset: 0;
|
|
953
957
|
border-radius: ${d}px;
|
|
954
958
|
clip-path: inset(0 round ${a}px);
|
|
955
|
-
background: ${
|
|
959
|
+
background: ${u};
|
|
956
960
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
957
961
|
-webkit-mask-composite: xor;
|
|
958
962
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
959
963
|
mask-composite: exclude;
|
|
960
964
|
padding: ${r}px;
|
|
961
|
-
filter: blur(8px) brightness(${
|
|
965
|
+
filter: blur(8px) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)});
|
|
962
966
|
pointer-events: none;
|
|
963
967
|
z-index: 3;
|
|
964
968
|
opacity: 0;
|
|
@@ -993,21 +997,21 @@ function ia(t) {
|
|
|
993
997
|
borderWidth: r,
|
|
994
998
|
duration: o,
|
|
995
999
|
strokeOpacity: s,
|
|
996
|
-
innerOpacity:
|
|
1000
|
+
innerOpacity: i,
|
|
997
1001
|
bloomOpacity: c,
|
|
998
|
-
innerShadow:
|
|
1002
|
+
innerShadow: b,
|
|
999
1003
|
colorVariant: p,
|
|
1000
1004
|
staticColors: m,
|
|
1001
|
-
brightness:
|
|
1002
|
-
saturation:
|
|
1003
|
-
hueRange:
|
|
1005
|
+
brightness: n,
|
|
1006
|
+
saturation: l,
|
|
1007
|
+
hueRange: f,
|
|
1004
1008
|
theme: v
|
|
1005
|
-
} = t, d = Math.max(0, a - r), g = p === "mono" ? 0.5 : 1,
|
|
1009
|
+
} = t, d = Math.max(0, a - r), g = p === "mono" ? 0.5 : 1, W = s * g, Y = i * g, y = c * g, H = m ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, x = m ? "" : `
|
|
1006
1010
|
@keyframes beam-hue-shift-${e} {
|
|
1007
|
-
0% { filter: hue-rotate(-${
|
|
1008
|
-
50% { filter: hue-rotate(${
|
|
1009
|
-
100% { filter: hue-rotate(-${
|
|
1010
|
-
}`,
|
|
1011
|
+
0% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
1012
|
+
50% { filter: hue-rotate(${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
1013
|
+
100% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
1014
|
+
}`, w = v === "dark", k = w ? `conic-gradient(
|
|
1011
1015
|
from var(--beam-angle-${e}),
|
|
1012
1016
|
transparent 0%, transparent 54%,
|
|
1013
1017
|
rgba(255, 255, 255, 0.1) 57%,
|
|
@@ -1029,7 +1033,7 @@ function ia(t) {
|
|
|
1029
1033
|
rgba(0, 0, 0, 0.2) 72%,
|
|
1030
1034
|
rgba(0, 0, 0, 0.08) 75%,
|
|
1031
1035
|
transparent 78%, transparent 100%
|
|
1032
|
-
)`,
|
|
1036
|
+
)`, h = Ee(p), X = Ae(p), u = w ? `conic-gradient(
|
|
1033
1037
|
from var(--beam-angle-${e}),
|
|
1034
1038
|
transparent 0%, transparent 58%,
|
|
1035
1039
|
rgba(255, 255, 255, 0.03) 62%,
|
|
@@ -1097,7 +1101,7 @@ function ia(t) {
|
|
|
1097
1101
|
border-radius: ${d}px;
|
|
1098
1102
|
padding: ${r}px;
|
|
1099
1103
|
clip-path: inset(0 round ${a}px);
|
|
1100
|
-
background: ${k},${
|
|
1104
|
+
background: ${k},${h};
|
|
1101
1105
|
-webkit-mask:
|
|
1102
1106
|
conic-gradient(
|
|
1103
1107
|
from var(--beam-angle-${e}),
|
|
@@ -1124,7 +1128,7 @@ function ia(t) {
|
|
|
1124
1128
|
mask-composite: intersect, exclude;
|
|
1125
1129
|
pointer-events: none;
|
|
1126
1130
|
z-index: 2;
|
|
1127
|
-
opacity: calc(var(--beam-opacity-${e}) * ${
|
|
1131
|
+
opacity: calc(var(--beam-opacity-${e}) * ${W.toFixed(2)} * var(--beam-strength, 1));
|
|
1128
1132
|
${H}
|
|
1129
1133
|
}
|
|
1130
1134
|
|
|
@@ -1135,7 +1139,7 @@ function ia(t) {
|
|
|
1135
1139
|
inset: 0;
|
|
1136
1140
|
border-radius: ${a}px;
|
|
1137
1141
|
background: ${X};
|
|
1138
|
-
box-shadow: inset 0 0 9px 1px ${
|
|
1142
|
+
box-shadow: inset 0 0 9px 1px ${b};
|
|
1139
1143
|
-webkit-mask-image:
|
|
1140
1144
|
conic-gradient(
|
|
1141
1145
|
from var(--beam-angle-${e}),
|
|
@@ -1173,13 +1177,13 @@ function ia(t) {
|
|
|
1173
1177
|
inset: 0;
|
|
1174
1178
|
border-radius: ${d}px;
|
|
1175
1179
|
clip-path: inset(0 round ${a}px);
|
|
1176
|
-
background: ${
|
|
1180
|
+
background: ${u};
|
|
1177
1181
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1178
1182
|
-webkit-mask-composite: xor;
|
|
1179
1183
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1180
1184
|
mask-composite: exclude;
|
|
1181
1185
|
padding: ${r}px;
|
|
1182
|
-
filter: blur(8px) brightness(${
|
|
1186
|
+
filter: blur(8px) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)});
|
|
1183
1187
|
pointer-events: none;
|
|
1184
1188
|
z-index: 3;
|
|
1185
1189
|
opacity: 0;
|
|
@@ -1214,15 +1218,15 @@ function na(t) {
|
|
|
1214
1218
|
borderWidth: r,
|
|
1215
1219
|
duration: o,
|
|
1216
1220
|
strokeOpacity: s,
|
|
1217
|
-
innerOpacity:
|
|
1221
|
+
innerOpacity: i,
|
|
1218
1222
|
bloomOpacity: c,
|
|
1219
|
-
colorVariant:
|
|
1223
|
+
colorVariant: b,
|
|
1220
1224
|
staticColors: p,
|
|
1221
1225
|
brightness: m,
|
|
1222
|
-
saturation:
|
|
1223
|
-
hueRange:
|
|
1224
|
-
theme:
|
|
1225
|
-
} = t, v =
|
|
1226
|
+
saturation: n,
|
|
1227
|
+
hueRange: l,
|
|
1228
|
+
theme: f
|
|
1229
|
+
} = t, v = f === "dark", d = b === "mono" ? 0.5 : 1, g = (s * d).toFixed(2), W = (i * d).toFixed(2), Y = (c * d).toFixed(2), { op: y } = be("pulse-inner", f, o), H = 8, x = m.toFixed(2), w = n.toFixed(2), k = p ? `filter: brightness(${x}) saturate(${w});` : `filter: hue-rotate(var(--beam-hue-${e})) brightness(${x}) saturate(${w});`, h = p ? `filter: blur(${H}px) brightness(${x}) saturate(${w});` : `filter: blur(${H}px) hue-rotate(var(--beam-hue-${e})) brightness(${x}) saturate(${w});`, X = ea(b, e), u = aa(b, e, v), $ = Ye(Qe, b, 1 - y * 0.5);
|
|
1226
1230
|
return `
|
|
1227
1231
|
${Oe(e)}
|
|
1228
1232
|
|
|
@@ -1268,7 +1272,7 @@ ${K(e, "beam-fade-out", 0.5)}
|
|
|
1268
1272
|
inset: 0;
|
|
1269
1273
|
border-radius: ${a}px;
|
|
1270
1274
|
clip-path: inset(0 round ${a}px);
|
|
1271
|
-
background: ${
|
|
1275
|
+
background: ${u};
|
|
1272
1276
|
-webkit-mask-image:
|
|
1273
1277
|
linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
|
|
1274
1278
|
linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
|
|
@@ -1280,7 +1284,7 @@ ${K(e, "beam-fade-out", 0.5)}
|
|
|
1280
1284
|
pointer-events: none;
|
|
1281
1285
|
z-index: 1;
|
|
1282
1286
|
will-change: opacity, filter;
|
|
1283
|
-
opacity: calc(var(--beam-opacity-${e}) * ${
|
|
1287
|
+
opacity: calc(var(--beam-opacity-${e}) * ${W} * var(--beam-strength, 1));
|
|
1284
1288
|
${k}
|
|
1285
1289
|
}
|
|
1286
1290
|
|
|
@@ -1306,7 +1310,7 @@ ${K(e, "beam-fade-out", 0.5)}
|
|
|
1306
1310
|
[data-beam="${e}"][data-fading] [data-beam-bloom] {
|
|
1307
1311
|
display: block;
|
|
1308
1312
|
opacity: calc(var(--beam-opacity-${e}) * ${Y} * var(--beam-strength, 1));
|
|
1309
|
-
${
|
|
1313
|
+
${h}
|
|
1310
1314
|
}
|
|
1311
1315
|
|
|
1312
1316
|
@keyframes beam-fade-in-${e} { to { --beam-opacity-${e}: 1; } }
|
|
@@ -1334,15 +1338,15 @@ function ca(t) {
|
|
|
1334
1338
|
duration: r,
|
|
1335
1339
|
strokeOpacity: o,
|
|
1336
1340
|
innerOpacity: s,
|
|
1337
|
-
bloomOpacity:
|
|
1341
|
+
bloomOpacity: i,
|
|
1338
1342
|
colorVariant: c,
|
|
1339
|
-
staticColors:
|
|
1343
|
+
staticColors: b,
|
|
1340
1344
|
brightness: p,
|
|
1341
1345
|
saturation: m,
|
|
1342
|
-
hueRange:
|
|
1343
|
-
theme:
|
|
1344
|
-
hairlineOpacity:
|
|
1345
|
-
} = t, v =
|
|
1346
|
+
hueRange: n,
|
|
1347
|
+
theme: l,
|
|
1348
|
+
hairlineOpacity: f = 0
|
|
1349
|
+
} = t, v = l === "dark", d = c === "mono" ? 0.5 : 1, g = (o * d).toFixed(2), W = (s * d).toFixed(2), Y = (i * d).toFixed(2), y = v ? "70, 70, 70" : "0, 0, 0", H = f.toFixed(2), x = `linear-gradient(rgba(${y}, ${H}), rgba(${y}, ${H}))`, { op: w } = be("pulse-outside", l, r), k = 0.95, h = 0.9, X = v ? 3 : 6, u = v ? 22.5 : 15, $ = p.toFixed(2), F = m.toFixed(2), Z = b ? `filter: brightness(${$}) saturate(${F});` : `filter: hue-rotate(var(--beam-hue-${e})) brightness(${$}) saturate(${F});`, J = b ? `filter: blur(${X}px) brightness(${$}) saturate(${F});` : `filter: blur(${X}px) hue-rotate(var(--beam-hue-${e})) brightness(${$}) saturate(${F});`, ee = b ? `filter: blur(${u}px) brightness(${$}) saturate(${F});` : `filter: blur(${u}px) hue-rotate(var(--beam-hue-${e})) brightness(${$}) saturate(${F});`, E = we(ve, c, e), _ = we(ve, c, e), ae = Ye(Ze, c, 1 - w * 0.5), R = f > 0 ? `${E},
|
|
1346
1350
|
${x}` : E;
|
|
1347
1351
|
return `
|
|
1348
1352
|
${Oe(e)}
|
|
@@ -1361,7 +1365,7 @@ ${K(e, "beam-fade-in", 0.6)}
|
|
|
1361
1365
|
[data-beam="${e}"][data-fading] {
|
|
1362
1366
|
${K(e, "beam-fade-out", 0.5)}
|
|
1363
1367
|
}
|
|
1364
|
-
${
|
|
1368
|
+
${f > 0 ? `
|
|
1365
1369
|
/* Idle hairline — painted above the (opaque) child in the inner 1px edge ring so
|
|
1366
1370
|
it overlaps a standard inset component border exactly. */
|
|
1367
1371
|
[data-beam="${e}"]::after {
|
|
@@ -1408,10 +1412,10 @@ ${l > 0 ? `
|
|
|
1408
1412
|
z-index: -1;
|
|
1409
1413
|
border-radius: ${a + 10}px;
|
|
1410
1414
|
background: ${_};
|
|
1411
|
-
transform: scale(${k}, ${
|
|
1415
|
+
transform: scale(${k}, ${h});
|
|
1412
1416
|
pointer-events: none;
|
|
1413
1417
|
will-change: opacity, filter;
|
|
1414
|
-
opacity: calc(var(--beam-opacity-${e}) * ${
|
|
1418
|
+
opacity: calc(var(--beam-opacity-${e}) * ${W} * var(--beam-strength, 1));
|
|
1415
1419
|
${J}
|
|
1416
1420
|
}
|
|
1417
1421
|
|
|
@@ -1422,7 +1426,7 @@ ${l > 0 ? `
|
|
|
1422
1426
|
z-index: -1;
|
|
1423
1427
|
border-radius: ${a + 30}px;
|
|
1424
1428
|
background: ${ae};
|
|
1425
|
-
transform: scale(${k}, ${
|
|
1429
|
+
transform: scale(${k}, ${h});
|
|
1426
1430
|
pointer-events: none;
|
|
1427
1431
|
will-change: transform;
|
|
1428
1432
|
opacity: 0;
|
|
@@ -1460,26 +1464,26 @@ function pa(t) {
|
|
|
1460
1464
|
borderWidth: r,
|
|
1461
1465
|
duration: o,
|
|
1462
1466
|
strokeOpacity: s,
|
|
1463
|
-
innerOpacity:
|
|
1467
|
+
innerOpacity: i,
|
|
1464
1468
|
bloomOpacity: c,
|
|
1465
|
-
innerShadow:
|
|
1469
|
+
innerShadow: b,
|
|
1466
1470
|
colorVariant: p,
|
|
1467
1471
|
staticColors: m,
|
|
1468
|
-
brightness:
|
|
1469
|
-
saturation:
|
|
1470
|
-
hueRange:
|
|
1472
|
+
brightness: n,
|
|
1473
|
+
saturation: l,
|
|
1474
|
+
hueRange: f,
|
|
1471
1475
|
theme: v
|
|
1472
|
-
} = t, d = Math.max(0, a - r), g = v === "dark",
|
|
1476
|
+
} = t, d = Math.max(0, a - r), g = v === "dark", W = s, Y = i, y = c, H = m ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, x = m ? "" : `animation: beam-hue-shift-bloom-${e} 8s ease-in-out infinite;`, w = m ? "" : `
|
|
1473
1477
|
@keyframes beam-hue-shift-${e} {
|
|
1474
|
-
0% { filter: hue-rotate(-${
|
|
1475
|
-
50% { filter: hue-rotate(${
|
|
1476
|
-
100% { filter: hue-rotate(-${
|
|
1478
|
+
0% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
1479
|
+
50% { filter: hue-rotate(${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
1480
|
+
100% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
1477
1481
|
}
|
|
1478
1482
|
|
|
1479
1483
|
@keyframes beam-hue-shift-bloom-${e} {
|
|
1480
|
-
0% { filter: blur(8px) hue-rotate(-${
|
|
1481
|
-
50% { filter: blur(8px) hue-rotate(${
|
|
1482
|
-
100% { filter: blur(8px) hue-rotate(-${
|
|
1484
|
+
0% { filter: blur(8px) hue-rotate(-${f + 10}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
1485
|
+
50% { filter: blur(8px) hue-rotate(${f + 10}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
1486
|
+
100% { filter: blur(8px) hue-rotate(-${f + 10}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
|
|
1483
1487
|
}`, k = g ? `radial-gradient(
|
|
1484
1488
|
ellipse calc(24px * var(--beam-w-${e})) calc(28px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) calc(100% + 2px),
|
|
1485
1489
|
rgba(255, 255, 255, 0.38) 0%,
|
|
@@ -1490,7 +1494,7 @@ function pa(t) {
|
|
|
1490
1494
|
rgba(0, 0, 0, 0.6) 0%,
|
|
1491
1495
|
rgba(0, 0, 0, 0.25) 35%,
|
|
1492
1496
|
transparent 70%
|
|
1493
|
-
)`,
|
|
1497
|
+
)`, h = Te(p, g, e), X = Ve(p, e), u = Ue(p, g, e), $ = p === "mono" ? "filter: blur(6px);" : "";
|
|
1494
1498
|
return `
|
|
1495
1499
|
@property --beam-x-${e} {
|
|
1496
1500
|
syntax: "<number>";
|
|
@@ -1568,7 +1572,7 @@ function pa(t) {
|
|
|
1568
1572
|
border-radius: ${d}px;
|
|
1569
1573
|
padding: ${r}px;
|
|
1570
1574
|
clip-path: inset(0 round ${a}px);
|
|
1571
|
-
background: ${k}, ${
|
|
1575
|
+
background: ${k}, ${h};
|
|
1572
1576
|
-webkit-mask:
|
|
1573
1577
|
radial-gradient(
|
|
1574
1578
|
ellipse calc(78px * var(--beam-w-${e})) calc(60px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
|
|
@@ -1587,7 +1591,7 @@ function pa(t) {
|
|
|
1587
1591
|
mask-composite: intersect, exclude;
|
|
1588
1592
|
pointer-events: none;
|
|
1589
1593
|
z-index: 2;
|
|
1590
|
-
opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${
|
|
1594
|
+
opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${W.toFixed(2)} * var(--beam-strength, 1));
|
|
1591
1595
|
${H}
|
|
1592
1596
|
}
|
|
1593
1597
|
|
|
@@ -1598,7 +1602,7 @@ function pa(t) {
|
|
|
1598
1602
|
inset: 0;
|
|
1599
1603
|
border-radius: ${a}px;
|
|
1600
1604
|
background: ${X};
|
|
1601
|
-
box-shadow: inset 0 0 9px 1px ${
|
|
1605
|
+
box-shadow: inset 0 0 9px 1px ${b};
|
|
1602
1606
|
-webkit-mask-image:
|
|
1603
1607
|
radial-gradient(
|
|
1604
1608
|
ellipse calc(78px * var(--beam-w-${e})) calc(60px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
|
|
@@ -1639,7 +1643,7 @@ function pa(t) {
|
|
|
1639
1643
|
white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
|
|
1640
1644
|
);
|
|
1641
1645
|
mask-composite: add;
|
|
1642
|
-
background: ${
|
|
1646
|
+
background: ${u};
|
|
1643
1647
|
${$}
|
|
1644
1648
|
pointer-events: none;
|
|
1645
1649
|
z-index: 3;
|
|
@@ -1707,7 +1711,7 @@ function pa(t) {
|
|
|
1707
1711
|
from { --beam-opacity-${e}: 1; }
|
|
1708
1712
|
to { --beam-opacity-${e}: 0; }
|
|
1709
1713
|
}
|
|
1710
|
-
${
|
|
1714
|
+
${w}
|
|
1711
1715
|
${A(e)}
|
|
1712
1716
|
`;
|
|
1713
1717
|
}
|
|
@@ -1723,15 +1727,15 @@ function Fe(t) {
|
|
|
1723
1727
|
const e = t / 1e3;
|
|
1724
1728
|
Q.forEach(({ el: a, config: r }) => {
|
|
1725
1729
|
for (const o of r.oscillators) {
|
|
1726
|
-
const s = (e - o.delay) / o.period,
|
|
1730
|
+
const s = (e - o.delay) / o.period, i = o.a + (o.b - o.a) * We(s);
|
|
1727
1731
|
a.style.setProperty(
|
|
1728
1732
|
o.prop,
|
|
1729
|
-
o.unit === "px" ? `${
|
|
1733
|
+
o.unit === "px" ? `${i.toFixed(2)}px` : i.toFixed(4)
|
|
1730
1734
|
);
|
|
1731
1735
|
}
|
|
1732
1736
|
if (r.hue) {
|
|
1733
|
-
const { prop: o, range: s, period:
|
|
1734
|
-
a.style.setProperty(o, `${
|
|
1737
|
+
const { prop: o, range: s, period: i, continuous: c } = r.hue, b = c ? e / i % 1 * s : -s + 2 * s * We(e / i);
|
|
1738
|
+
a.style.setProperty(o, `${b.toFixed(2)}deg`);
|
|
1735
1739
|
}
|
|
1736
1740
|
});
|
|
1737
1741
|
}
|
|
@@ -1767,23 +1771,23 @@ const za = Ge(
|
|
|
1767
1771
|
colorVariant: r = "colorful",
|
|
1768
1772
|
theme: o = "dark",
|
|
1769
1773
|
staticColors: s = !1,
|
|
1770
|
-
duration:
|
|
1774
|
+
duration: i,
|
|
1771
1775
|
active: c = !0,
|
|
1772
|
-
borderRadius:
|
|
1776
|
+
borderRadius: b,
|
|
1773
1777
|
brightness: p,
|
|
1774
1778
|
saturation: m,
|
|
1775
|
-
hueRange:
|
|
1776
|
-
strength:
|
|
1777
|
-
className:
|
|
1779
|
+
hueRange: n = 30,
|
|
1780
|
+
strength: l = 1,
|
|
1781
|
+
className: f,
|
|
1778
1782
|
style: v,
|
|
1779
1783
|
onActivate: d,
|
|
1780
1784
|
onDeactivate: g,
|
|
1781
|
-
onAnimationEnd:
|
|
1785
|
+
onAnimationEnd: W,
|
|
1782
1786
|
...Y
|
|
1783
1787
|
}, y) {
|
|
1784
|
-
const x = Me().replace(/:/g, "-"),
|
|
1788
|
+
const x = Me().replace(/:/g, "-"), w = ma(), k = Ie(null), [h, X] = L(c), [u, $] = L(!1), [F, Z] = L(!0), [J, ee] = L(null), [E, _] = L({ x: 1, y: 1 });
|
|
1785
1789
|
P(() => {
|
|
1786
|
-
if (
|
|
1790
|
+
if (b != null) return;
|
|
1787
1791
|
const z = k.current;
|
|
1788
1792
|
if (!z) return;
|
|
1789
1793
|
const O = () => {
|
|
@@ -1795,9 +1799,9 @@ const za = Ge(
|
|
|
1795
1799
|
O();
|
|
1796
1800
|
const G = new MutationObserver(O);
|
|
1797
1801
|
return G.observe(z, { childList: !0, subtree: !1 }), () => G.disconnect();
|
|
1798
|
-
}, [
|
|
1799
|
-
c && !
|
|
1800
|
-
}, [c,
|
|
1802
|
+
}, [b, e]), P(() => {
|
|
1803
|
+
c && !h && !u ? X(!0) : !c && h && !u && $(!0);
|
|
1804
|
+
}, [c, h, u]), P(() => {
|
|
1801
1805
|
const z = k.current;
|
|
1802
1806
|
if (!z || typeof IntersectionObserver > "u") return;
|
|
1803
1807
|
const O = new IntersectionObserver(
|
|
@@ -1832,19 +1836,19 @@ const za = Ge(
|
|
|
1832
1836
|
const ae = ye(
|
|
1833
1837
|
(z) => {
|
|
1834
1838
|
const O = z.animationName;
|
|
1835
|
-
O.includes("fade-out") ? (X(!1), $(!1), g == null || g()) : O.includes("fade-in") && (d == null || d()),
|
|
1839
|
+
O.includes("fade-out") ? (X(!1), $(!1), g == null || g()) : O.includes("fade-in") && (d == null || d()), W == null || W(z);
|
|
1836
1840
|
},
|
|
1837
|
-
[d, g,
|
|
1838
|
-
), R = $a(o,
|
|
1841
|
+
[d, g, W]
|
|
1842
|
+
), R = $a(o, w), S = ne[a][R], re = Le[a], te = a === "pulse-inner" || a === "pulse-outside", le = b ?? J ?? re.borderRadius, j = i ?? (a === "line" ? 3.1 : te ? 2.3 : 1.96), fe = m ?? S.saturation, de = p ?? S.brightness ?? 1.3, T = a === "line" ? Math.min(n, 13) : n, N = r === "mono" ? !0 : s, Se = ke(
|
|
1839
1843
|
() => oa({
|
|
1840
1844
|
id: x,
|
|
1841
1845
|
borderRadius: le,
|
|
1842
1846
|
borderWidth: re.borderWidth,
|
|
1843
1847
|
duration: j,
|
|
1844
|
-
strokeOpacity:
|
|
1845
|
-
innerOpacity:
|
|
1846
|
-
bloomOpacity:
|
|
1847
|
-
innerShadow:
|
|
1848
|
+
strokeOpacity: S.strokeOpacity,
|
|
1849
|
+
innerOpacity: S.innerOpacity,
|
|
1850
|
+
bloomOpacity: S.bloomOpacity,
|
|
1851
|
+
innerShadow: S.innerShadow,
|
|
1848
1852
|
size: a,
|
|
1849
1853
|
colorVariant: r,
|
|
1850
1854
|
staticColors: N,
|
|
@@ -1852,18 +1856,18 @@ const za = Ge(
|
|
|
1852
1856
|
saturation: fe,
|
|
1853
1857
|
hueRange: T,
|
|
1854
1858
|
theme: R,
|
|
1855
|
-
hairlineOpacity:
|
|
1859
|
+
hairlineOpacity: S.hairlineOpacity
|
|
1856
1860
|
}),
|
|
1857
1861
|
[
|
|
1858
1862
|
x,
|
|
1859
1863
|
le,
|
|
1860
1864
|
re.borderWidth,
|
|
1861
1865
|
j,
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1866
|
+
S.strokeOpacity,
|
|
1867
|
+
S.innerOpacity,
|
|
1868
|
+
S.bloomOpacity,
|
|
1869
|
+
S.innerShadow,
|
|
1870
|
+
S.hairlineOpacity,
|
|
1867
1871
|
a,
|
|
1868
1872
|
r,
|
|
1869
1873
|
N,
|
|
@@ -1878,11 +1882,11 @@ const za = Ge(
|
|
|
1878
1882
|
);
|
|
1879
1883
|
P(() => {
|
|
1880
1884
|
var O;
|
|
1881
|
-
if (!oe || !(
|
|
1885
|
+
if (!oe || !(h || u) || !F) return;
|
|
1882
1886
|
const z = k.current;
|
|
1883
1887
|
if (z && !(typeof window < "u" && ((O = window.matchMedia) != null && O.call(window, "(prefers-reduced-motion: reduce)").matches)))
|
|
1884
1888
|
return ga(z, oe);
|
|
1885
|
-
}, [oe,
|
|
1889
|
+
}, [oe, h, u, F]);
|
|
1886
1890
|
const Re = ye(
|
|
1887
1891
|
(z) => {
|
|
1888
1892
|
k.current = z, typeof y == "function" ? y(z) : y && (y.current = z);
|
|
@@ -1890,7 +1894,7 @@ const za = Ge(
|
|
|
1890
1894
|
[y]
|
|
1891
1895
|
), qe = {
|
|
1892
1896
|
...v ?? {},
|
|
1893
|
-
"--beam-strength": Math.max(0, Math.min(1,
|
|
1897
|
+
"--beam-strength": Math.max(0, Math.min(1, l)),
|
|
1894
1898
|
...a === "pulse-outside" ? { "--pulse-glow-sx": E.x, "--pulse-glow-sy": E.y } : {}
|
|
1895
1899
|
};
|
|
1896
1900
|
return /* @__PURE__ */ he(Ce, { children: [
|
|
@@ -1901,10 +1905,10 @@ const za = Ge(
|
|
|
1901
1905
|
...Y,
|
|
1902
1906
|
ref: Re,
|
|
1903
1907
|
"data-beam": x,
|
|
1904
|
-
"data-active":
|
|
1905
|
-
"data-fading":
|
|
1906
|
-
"data-paused":
|
|
1907
|
-
className:
|
|
1908
|
+
"data-active": h && !u ? "" : void 0,
|
|
1909
|
+
"data-fading": u ? "" : void 0,
|
|
1910
|
+
"data-paused": h && !u && !F ? "" : void 0,
|
|
1911
|
+
className: f,
|
|
1908
1912
|
style: qe,
|
|
1909
1913
|
onAnimationEnd: ae,
|
|
1910
1914
|
children: [
|