@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
596 lines • 31 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import HUDButton from "./HUDButton.js";
import HUDIcon from "./HUDIcon.js";
function maskCodeString(source, strategy, concealLevel) {
var level = Math.min(1, Math.max(0, concealLevel !== null && concealLevel !== void 0 ? concealLevel : 0.69));
var n = source.length;
if (n === 0) {
return "";
}
if (strategy === "asterisks") {
var keep = Math.max(1, Math.round(n * (1 - level) * 0.5));
var head = source.slice(0, keep);
var tail = source.slice(-keep);
var masked = "•".repeat(Math.max(0, n - keep * 2));
return "".concat(head).concat(masked).concat(tail);
}
if (strategy === "blocks") {
var arr = Array.from(source);
var maskCount = Math.round(n * level);
var startKeep = Math.max(1, Math.floor((n - maskCount) / 2));
var endKeep = Math.max(1, n - maskCount - startKeep);
return arr.map(function (ch, i) {
return i < startKeep || i >= n - endKeep ? ch : "█";
}).join("");
}
if (strategy === "dotgrid") {
return Array.from({
length: Math.max(8, Math.round(n * 0.9))
}).map(function (_, i) {
return i % 3 === 0 ? "•" : "·";
}).join(" ");
}
return source;
}
;
function hexToRgba(hex) {
var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!m) {
return "rgba(26, 115, 232, ".concat(alpha, ")");
}
var r = parseInt(m[1], 16);
var g = parseInt(m[2], 16);
var b = parseInt(m[3], 16);
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
}
;
function Orb(_ref) {
var _ref$subtle = _ref.subtle,
subtle = _ref$subtle === void 0 ? false : _ref$subtle,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 12 : _ref$size,
color = _ref.color;
return /*#__PURE__*/React.createElement("span", {
style: {
display: "inline-block",
borderRadius: 999,
boxShadow: subtle ? "0 0 10px ".concat(hexToRgba(color, 0.35)) : "0 0 16px ".concat(hexToRgba(color, 0.55)),
background: subtle ? "radial-gradient(circle at 40% 35%, ".concat(hexToRgba(color, 0.8), ", ").concat(hexToRgba(color, 0.28), ")") : "radial-gradient(circle at 35% 30%, ".concat(hexToRgba(color, 1), ", ").concat(hexToRgba(color, 0.25), ")"),
height: size,
width: size
},
"aria-hidden": true
});
}
;
var HUDRedeemableCode = /*#__PURE__*/forwardRef(function HUDRedeemableCode(_ref2, ref) {
var _sizes$size;
var _ref2$redeemableCodeC = _ref2.redeemableCodeContentContainerHoverConfigurationSettings,
redeemableCodeContentContainerHoverConfigurationSettings = _ref2$redeemableCodeC === void 0 ? {} : _ref2$redeemableCodeC,
_ref2$redeemableCodeC2 = _ref2.redeemableCodeCodeContentContainerConfigurationSettings,
redeemableCodeCodeContentContainerConfigurationSettings = _ref2$redeemableCodeC2 === void 0 ? {} : _ref2$redeemableCodeC2,
_ref2$redeemableCodeC3 = _ref2.redeemableCodeContentContainerConfigurationSettings,
redeemableCodeContentContainerConfigurationSettings = _ref2$redeemableCodeC3 === void 0 ? {} : _ref2$redeemableCodeC3,
_ref2$redeemableCodeT = _ref2.redeemableCodeTrailingShimmerConfigurationSettings,
redeemableCodeTrailingShimmerConfigurationSettings = _ref2$redeemableCodeT === void 0 ? {} : _ref2$redeemableCodeT,
_ref2$redeemableCodeG = _ref2.redeemableCodeGlowUnderLightConfigurationSettings,
redeemableCodeGlowUnderLightConfigurationSettings = _ref2$redeemableCodeG === void 0 ? {} : _ref2$redeemableCodeG,
_ref2$redeemableCodeR = _ref2.redeemableCodeRevealCodeConfigurationSettings,
redeemableCodeRevealCodeConfigurationSettings = _ref2$redeemableCodeR === void 0 ? {} : _ref2$redeemableCodeR,
_ref2$redeemableCodeC4 = _ref2.redeemableCodeCopyButtonConfigurationSettings,
redeemableCodeCopyButtonConfigurationSettings = _ref2$redeemableCodeC4 === void 0 ? {} : _ref2$redeemableCodeC4,
_ref2$redeemableCodeC5 = _ref2.redeemableCodeContainerConfigurationSettings,
redeemableCodeContainerConfigurationSettings = _ref2$redeemableCodeC5 === void 0 ? {} : _ref2$redeemableCodeC5,
_ref2$redeemableCodeG2 = _ref2.redeemableCodeGlowLightConfigurationSettings,
redeemableCodeGlowLightConfigurationSettings = _ref2$redeemableCodeG2 === void 0 ? {} : _ref2$redeemableCodeG2,
_ref2$redeemableCodeS = _ref2.redeemableCodeScanLineConfigurationSettings,
redeemableCodeScanLineConfigurationSettings = _ref2$redeemableCodeS === void 0 ? {} : _ref2$redeemableCodeS,
_ref2$redeemableCodeS2 = _ref2.redeemableCodeShimmerConfigurationSettings,
redeemableCodeShimmerConfigurationSettings = _ref2$redeemableCodeS2 === void 0 ? {} : _ref2$redeemableCodeS2,
_ref2$redeemableCodeC6 = _ref2.redeemableCodeConcealConfigurationSettings,
redeemableCodeConcealConfigurationSettings = _ref2$redeemableCodeC6 === void 0 ? {} : _ref2$redeemableCodeC6,
_ref2$redeemableCodeL = _ref2.redeemableCodeLabelConfigurationSettings,
redeemableCodeLabelConfigurationSettings = _ref2$redeemableCodeL === void 0 ? {} : _ref2$redeemableCodeL,
_ref2$redeemableCodeC7 = _ref2.redeemableCodeConfigurationSettings,
redeemableCodeConfigurationSettings = _ref2$redeemableCodeC7 === void 0 ? {} : _ref2$redeemableCodeC7,
_ref2$redeemableCodeC8 = _ref2.redeemableCodeCodeContentContainerConfigurations,
redeemableCodeCodeContentContainerConfigurations = _ref2$redeemableCodeC8 === void 0 ? {} : _ref2$redeemableCodeC8,
_ref2$redeemableCodeC9 = _ref2.redeemableCodeContentContainerConfigurations,
redeemableCodeContentContainerConfigurations = _ref2$redeemableCodeC9 === void 0 ? {} : _ref2$redeemableCodeC9,
_ref2$redeemableCodeT2 = _ref2.redeemableCodeTrailingShimmerConfigurations,
redeemableCodeTrailingShimmerConfigurations = _ref2$redeemableCodeT2 === void 0 ? {} : _ref2$redeemableCodeT2,
_ref2$redeemableCodeC10 = _ref2.redeemableCodeCopyButtonIconConfigurations,
redeemableCodeCopyButtonIconConfigurations = _ref2$redeemableCodeC10 === void 0 ? {} : _ref2$redeemableCodeC10,
_ref2$redeemableCodeG3 = _ref2.redeemableCodeGlowUnderLightConfigurations,
redeemableCodeGlowUnderLightConfigurations = _ref2$redeemableCodeG3 === void 0 ? {} : _ref2$redeemableCodeG3,
_ref2$redeemableCodeR2 = _ref2.redeemableCodeRevealCodeConfigurations,
redeemableCodeRevealCodeConfigurations = _ref2$redeemableCodeR2 === void 0 ? {} : _ref2$redeemableCodeR2,
_ref2$redeemableCodeC11 = _ref2.redeemableCodeCopyButtonConfigurations,
redeemableCodeCopyButtonConfigurations = _ref2$redeemableCodeC11 === void 0 ? {} : _ref2$redeemableCodeC11,
_ref2$redeemableCodeG4 = _ref2.redeemableCodeGlowLightConfigurations,
redeemableCodeGlowLightConfigurations = _ref2$redeemableCodeG4 === void 0 ? {} : _ref2$redeemableCodeG4,
_ref2$redeemableCodeC12 = _ref2.redeemableCodeContainerConfigurations,
redeemableCodeContainerConfigurations = _ref2$redeemableCodeC12 === void 0 ? {} : _ref2$redeemableCodeC12,
_ref2$redeemableCodeS3 = _ref2.redeemableCodeScanLineConfigurations,
redeemableCodeScanLineConfigurations = _ref2$redeemableCodeS3 === void 0 ? {} : _ref2$redeemableCodeS3,
_ref2$redeemableCodeS4 = _ref2.redeemableCodeShimmerConfigurations,
redeemableCodeShimmerConfigurations = _ref2$redeemableCodeS4 === void 0 ? {} : _ref2$redeemableCodeS4,
_ref2$redeemableCodeC13 = _ref2.redeemableCodeConcealConfigurations,
redeemableCodeConcealConfigurations = _ref2$redeemableCodeC13 === void 0 ? {} : _ref2$redeemableCodeC13,
_ref2$redeemableCodeL2 = _ref2.redeemableCodeLabelConfigurations,
redeemableCodeLabelConfigurations = _ref2$redeemableCodeL2 === void 0 ? {} : _ref2$redeemableCodeL2,
_ref2$redeemableCodeC14 = _ref2.redeemableCodeConfigurations,
redeemableCodeConfigurations = _ref2$redeemableCodeC14 === void 0 ? {} : _ref2$redeemableCodeC14,
onRevealChange = _ref2.onRevealChange,
onCopy = _ref2.onCopy,
defaultRevealed = _ref2.defaultRevealed,
revealed = _ref2.revealed,
label = _ref2.label,
code = _ref2.code,
_ref2$innerBevelColor = _ref2.innerBevelColor,
innerBevelColor = _ref2$innerBevelColor === void 0 ? "rgba(255, 255, 255, 0.07)" : _ref2$innerBevelColor,
_ref2$scanlineColor = _ref2.scanlineColor,
scanlineColor = _ref2$scanlineColor === void 0 ? "rgba(255, 255, 255, 0.05)" : _ref2$scanlineColor,
_ref2$shimmerColor = _ref2.shimmerColor,
shimmerColor = _ref2$shimmerColor === void 0 ? "rgba(255, 255, 255, 1)" : _ref2$shimmerColor,
_ref2$borderColor = _ref2.borderColor,
borderColor = _ref2$borderColor === void 0 ? "rgba(255, 255, 255, 0.10)" : _ref2$borderColor,
_ref2$backgroundStart = _ref2.backgroundStart,
backgroundStart = _ref2$backgroundStart === void 0 ? "rgba(7, 10, 16, 0.78)" : _ref2$backgroundStart,
_ref2$backgroundEnd = _ref2.backgroundEnd,
backgroundEnd = _ref2$backgroundEnd === void 0 ? "rgba(16, 20, 28, 0.92)" : _ref2$backgroundEnd,
_ref2$themeColor = _ref2.themeColor,
themeColor = _ref2$themeColor === void 0 ? "#1A73E8" : _ref2$themeColor,
_ref2$textColor = _ref2.textColor,
textColor = _ref2$textColor === void 0 ? "white" : _ref2$textColor,
_ref2$revealOnHover = _ref2.revealOnHover,
revealOnHover = _ref2$revealOnHover === void 0 ? false : _ref2$revealOnHover,
_ref2$copyable = _ref2.copyable,
copyable = _ref2$copyable === void 0 ? false : _ref2$copyable,
_ref2$showOrb = _ref2.showOrb,
showOrb = _ref2$showOrb === void 0 ? false : _ref2$showOrb,
_ref2$shimmer = _ref2.shimmer,
shimmer = _ref2$shimmer === void 0 ? true : _ref2$shimmer,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? "md" : _ref2$size,
orbColor = _ref2.orbColor,
_ref2$maskStrategy = _ref2.maskStrategy,
maskStrategy = _ref2$maskStrategy === void 0 ? "blur" : _ref2$maskStrategy,
_ref2$concealLevel = _ref2.concealLevel,
concealLevel = _ref2$concealLevel === void 0 ? 0.69 : _ref2$concealLevel,
_ref2$shimmerDuration = _ref2.shimmerDuration,
shimmerDuration = _ref2$shimmerDuration === void 0 ? 3.6 : _ref2$shimmerDuration,
_ref2$shimmerOpacity = _ref2.shimmerOpacity,
shimmerOpacity = _ref2$shimmerOpacity === void 0 ? 0.085 : _ref2$shimmerOpacity,
_ref2$fixedWidth = _ref2.fixedWidth,
fixedWidth = _ref2$fixedWidth === void 0 ? true : _ref2$fixedWidth,
_ref2$visualChars = _ref2.visualChars,
visualChars = _ref2$visualChars === void 0 ? 8 : _ref2$visualChars,
_ref2$minWidth = _ref2.minWidth,
minWidth = _ref2$minWidth === void 0 ? 127 : _ref2$minWidth,
_ref2$mode = _ref2.mode,
mode = _ref2$mode === void 0 ? "preview" : _ref2$mode,
_ref2$processingWhile = _ref2.processingWhileConcealed,
processingWhileConcealed = _ref2$processingWhile === void 0 ? true : _ref2$processingWhile,
_ref2$processingChars = _ref2.processingCharset,
processingCharset = _ref2$processingChars === void 0 ? "binary" : _ref2$processingChars,
_ref2$processingEffec = _ref2.processingEffect,
processingEffect = _ref2$processingEffec === void 0 ? true : _ref2$processingEffec,
_ref2$processingSpeed = _ref2.processingSpeedMs,
processingSpeedMs = _ref2$processingSpeed === void 0 ? 45 : _ref2$processingSpeed;
var isPreview = mode === "preview";
var initialUncontrolled = defaultRevealed !== undefined ? defaultRevealed : mode === "display";
var _useState = useState(initialUncontrolled),
_useState2 = _slicedToArray(_useState, 2),
uncontrolledRevealed = _useState2[0],
setUncontrolledRevealed = _useState2[1];
var _useState3 = useState(""),
_useState4 = _slicedToArray(_useState3, 2),
scramble = _useState4[0],
setScramble = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
copied = _useState6[0],
setCopied = _useState6[1];
var processTimer = useRef(null);
var flashTimer = useRef(null);
var isControlled = typeof revealed === "boolean";
var isRevealed = isControlled ? revealed : uncontrolledRevealed;
var sizes = {
sm: {
pad: 12,
font: 16,
label: 10,
radius: 20,
gap: 8,
icon: 10
},
md: {
pad: 18,
font: 22,
label: 11,
radius: 22,
gap: 10,
icon: 12
},
lg: {
pad: 22,
font: 28,
label: 12,
radius: 24,
gap: 12,
icon: 14
}
};
var S = (_sizes$size = sizes[size]) !== null && _sizes$size !== void 0 ? _sizes$size : sizes.md;
var maskedText = useMemo(function () {
return maskCodeString(code !== null && code !== void 0 ? code : "", maskStrategy, concealLevel);
}, [code, maskStrategy, concealLevel]);
var charset = processingCharset === "binary" ? "01" : processingCharset === "decimal" ? "0123456789" : processingCharset === "alpha" ? "ABCDEFGHIJKLMNOPQRSTUVWXYZ" : "0123456789ABCDEF";
var glow = themeColor;
var orb = orbColor || themeColor;
var hoverEnabled = isPreview && revealOnHover;
var concealedUniform = "•".repeat(Math.max(1, visualChars));
var concealedStream = processingEffect ? scramble || concealedUniform : concealedUniform;
var canMountReal = !isPreview || isRevealed;
var displayText = canMountReal ? code !== null && code !== void 0 ? code : "" : concealedStream;
var charW = S.font * 0.6 + 2;
var targetPx = fixedWidth ? Math.max(minWidth, Math.round(S.pad * 2 + charW * visualChars)) : undefined;
function setReveal(next) {
if (isControlled) {
onRevealChange === null || onRevealChange === void 0 || onRevealChange(!!next);
} else {
setUncontrolledRevealed(!!next);
onRevealChange === null || onRevealChange === void 0 || onRevealChange(!!next);
}
}
;
function startProcessing() {
var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
stopProcessing();
if (init) {
setScramble(randomStream(visualChars, charset));
}
processTimer.current = setInterval(function () {
setScramble(randomStream(visualChars, charset));
}, Math.max(18, processingSpeedMs));
}
;
function stopProcessing() {
if (processTimer.current) {
clearInterval(processTimer.current);
processTimer.current = null;
}
setScramble("");
}
;
function randomStream(n, set) {
var out = "";
for (var i = 0; i < n; i++) {
out += set[Math.random() * set.length | 0];
}
return out;
}
;
function handleCopy() {
return _handleCopy.apply(this, arguments);
}
function _handleCopy() {
_handleCopy = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var ta;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
_context.next = 3;
return navigator.clipboard.writeText(code !== null && code !== void 0 ? code : "");
case 3:
setCopied(true);
onCopy === null || onCopy === void 0 || onCopy(code !== null && code !== void 0 ? code : "");
_context.next = 15;
break;
case 7:
_context.prev = 7;
_context.t0 = _context["catch"](0);
ta = document.createElement("textarea");
ta.value = code !== null && code !== void 0 ? code : "";
document.body.appendChild(ta);
ta.select();
try {
document.execCommand("copy");
setCopied(true);
onCopy === null || onCopy === void 0 || onCopy(code !== null && code !== void 0 ? code : "");
} catch (_unused2) {}
document.body.removeChild(ta);
case 15:
_context.prev = 15;
setTimeout(function () {
return setCopied(false);
}, 1100);
return _context.finish(15);
case 18:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 7, 15, 18]]);
}));
return _handleCopy.apply(this, arguments);
}
;
useImperativeHandle(ref, function () {
return {
reveal: function reveal() {
setReveal(true);
},
hide: function hide() {
setReveal(false);
},
toggle: function toggle() {
setReveal(!isRevealed);
},
flash: function flash() {
var ms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1500;
clearTimeout(flashTimer.current);
setReveal(true);
flashTimer.current = setTimeout(function () {
setReveal(false);
}, ms);
},
revealWithEffect: function revealWithEffect() {
var ms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 900;
startProcessing(true);
clearTimeout(flashTimer.current);
flashTimer.current = setTimeout(function () {
stopProcessing();
setReveal(true);
}, ms);
}
};
}, [isRevealed]);
useEffect(function () {
return function () {
clearTimeout(flashTimer.current);
stopProcessing();
};
}, []);
useEffect(function () {
if (!isControlled) {
setUncontrolledRevealed(mode === "display");
}
}, [mode, isControlled]);
useEffect(function () {
var concealed = isPreview && !isRevealed;
if (!processingEffect || !processingWhileConcealed || !concealed) {
stopProcessing();
return;
}
startProcessing(true);
return stopProcessing;
}, [processingEffect, processingWhileConcealed, isRevealed, isPreview, visualChars, charset, processingSpeedMs]);
return /*#__PURE__*/React.createElement(motion.div, _extends({
initial: {
opacity: 0,
y: 8
},
animate: {
opacity: 1,
y: 0
},
transition: {
type: "spring",
stiffness: 220,
damping: 22
},
style: _objectSpread({
position: "relative",
display: "inline-flex",
flexDirection: "column",
gap: S.gap,
userSelect: "none",
width: targetPx,
minWidth: fixedWidth ? targetPx : minWidth
}, redeemableCodeContainerConfigurationSettings !== null && redeemableCodeContainerConfigurationSettings !== void 0 ? redeemableCodeContainerConfigurationSettings : {})
}, redeemableCodeContainerConfigurations !== null && redeemableCodeContainerConfigurations !== void 0 ? redeemableCodeContainerConfigurations : {}), label ? /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
alignItems: "center",
textTransform: "uppercase",
letterSpacing: 1.4,
fontSize: S.label,
color: "rgba(255, 255, 255, 0.78)",
gap: 8
}, redeemableCodeLabelConfigurationSettings !== null && redeemableCodeLabelConfigurationSettings !== void 0 ? redeemableCodeLabelConfigurationSettings : {})
}, redeemableCodeLabelConfigurations !== null && redeemableCodeLabelConfigurations !== void 0 ? redeemableCodeLabelConfigurations : {}), showOrb ? /*#__PURE__*/React.createElement(Orb, {
color: hexToRgba(orb, 0.9),
size: S.icon,
subtle: true
}) : null, label) : null, /*#__PURE__*/React.createElement(motion.div, _extends({
whileHover: hoverEnabled ? _objectSpread({
scale: 1.006
}, redeemableCodeContentContainerHoverConfigurationSettings !== null && redeemableCodeContentContainerHoverConfigurationSettings !== void 0 ? redeemableCodeContentContainerHoverConfigurationSettings : {}) : undefined,
style: _objectSpread({
position: "relative",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
overflow: "hidden",
border: "1px solid ".concat(borderColor),
borderRadius: S.radius,
boxShadow: "\n inset 0 0 0 1px ".concat(hexToRgba(glow, 0.14), ",\n inset 0 1px 0 ").concat(innerBevelColor, ",\n 0 14px 46px ").concat(hexToRgba(glow, 0.16), ",\n 0 8px 22px rgba(0,0,0,0.48)\n "),
background: "\n radial-gradient(140% 180% at 10% -10%, rgba(255,255,255,0.06), transparent 42%),\n linear-gradient(180deg, ".concat(backgroundStart, ", ").concat(backgroundEnd, "),\n linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02))\n "),
gap: S.gap,
padding: S.pad
}, redeemableCodeContentContainerConfigurationSettings !== null && redeemableCodeContentContainerConfigurationSettings !== void 0 ? redeemableCodeContentContainerConfigurationSettings : {}),
onMouseLeave: function onMouseLeave() {
if (hoverEnabled) setReveal(false);
},
onMouseEnter: function onMouseEnter() {
if (hoverEnabled) setReveal(true);
}
}, redeemableCodeContentContainerConfigurations !== null && redeemableCodeContentContainerConfigurations !== void 0 ? redeemableCodeContentContainerConfigurations : {}), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "absolute",
inset: -2,
pointerEvents: "none",
filter: "blur(22px)",
maskImage: "radial-gradient(ellipse at center, black 44%, transparent 74%)",
borderRadius: S.radius + 10,
background: "conic-gradient(from 0deg, ".concat(hexToRgba(glow, 0.38), ", transparent 26%, transparent 74%, ").concat(hexToRgba(glow, 0.38), ")"),
opacity: 0.22
}, redeemableCodeGlowLightConfigurationSettings !== null && redeemableCodeGlowLightConfigurationSettings !== void 0 ? redeemableCodeGlowLightConfigurationSettings : {}),
"aria-hidden": true
}, redeemableCodeGlowLightConfigurations !== null && redeemableCodeGlowLightConfigurations !== void 0 ? redeemableCodeGlowLightConfigurations : {})), shimmer ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({
initial: {
x: "-110%"
},
animate: {
x: "110%"
},
transition: {
duration: shimmerDuration,
repeat: Infinity,
repeatType: "mirror",
ease: "linear"
},
style: _objectSpread({
position: "absolute",
transform: "skewX(-14deg)",
mixBlendMode: "soft-light",
willChange: "transform",
filter: "blur(0.2px)",
maskImage: "linear-gradient(90deg, transparent 0%, black 18%, black 82%, transparent 100%)",
background: "linear-gradient(90deg, transparent, ".concat(shimmerColor, ", transparent)"),
width: "42%",
opacity: shimmerOpacity,
bottom: 0,
top: 0
}, redeemableCodeShimmerConfigurationSettings !== null && redeemableCodeShimmerConfigurationSettings !== void 0 ? redeemableCodeShimmerConfigurationSettings : {}),
"aria-hidden": true
}, redeemableCodeShimmerConfigurations !== null && redeemableCodeShimmerConfigurations !== void 0 ? redeemableCodeShimmerConfigurations : {})), /*#__PURE__*/React.createElement(motion.div, _extends({
initial: {
x: "110%"
},
animate: {
x: "-110%"
},
transition: {
duration: shimmerDuration * 1.1,
repeat: Infinity,
repeatType: "mirror",
ease: [0.45, 0.05, 0.2, 0.95],
delay: shimmerDuration / 3
},
style: _objectSpread({
position: "absolute",
transform: "skewX(-10deg)",
mixBlendMode: "soft-light",
willChange: "transform",
filter: "blur(0.35px)",
maskImage: "linear-gradient(90deg, transparent 0%, black 25%, black 75%, transparent 100%)",
background: "linear-gradient(90deg, transparent, ".concat(shimmerColor, ", transparent)"),
width: "30%",
opacity: shimmerOpacity * 0.75,
bottom: 0,
top: 0
}, redeemableCodeTrailingShimmerConfigurationSettings !== null && redeemableCodeTrailingShimmerConfigurationSettings !== void 0 ? redeemableCodeTrailingShimmerConfigurationSettings : {}),
"aria-hidden": true
}, redeemableCodeTrailingShimmerConfigurations !== null && redeemableCodeTrailingShimmerConfigurations !== void 0 ? redeemableCodeTrailingShimmerConfigurations : {}))) : null, /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "absolute",
inset: 0,
pointerEvents: "none",
mixBlendMode: "overlay",
backgroundImage: "\n radial-gradient(70% 140% at 100% 0%, ".concat(hexToRgba(glow, 0.06), ", transparent 60%),\n repeating-linear-gradient(0deg, ").concat(scanlineColor, " 0px, ").concat(scanlineColor, " 1px, transparent 1px, transparent 3px)\n "),
opacity: 0.5
}, redeemableCodeScanLineConfigurationSettings !== null && redeemableCodeScanLineConfigurationSettings !== void 0 ? redeemableCodeScanLineConfigurationSettings : {}),
"aria-hidden": true
}, redeemableCodeScanLineConfigurations !== null && redeemableCodeScanLineConfigurations !== void 0 ? redeemableCodeScanLineConfigurations : {})), /*#__PURE__*/React.createElement(AnimatePresence, null, isPreview && !isRevealed && /*#__PURE__*/React.createElement(motion.div, _extends({
key: "conceal",
initial: {
opacity: 0
},
animate: {
opacity: 0.26
},
exit: {
opacity: 0
},
transition: {
duration: 0.25
},
style: _objectSpread({
position: "absolute",
inset: 0,
pointerEvents: "none"
}, redeemableCodeConcealConfigurationSettings !== null && redeemableCodeConcealConfigurationSettings !== void 0 ? redeemableCodeConcealConfigurationSettings : {})
}, redeemableCodeConcealConfigurations !== null && redeemableCodeConcealConfigurations !== void 0 ? redeemableCodeConcealConfigurations : {}))), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
flex: 1,
alignItems: "center",
minWidth: 0,
gap: 12
}, redeemableCodeCodeContentContainerConfigurationSettings !== null && redeemableCodeCodeContentContainerConfigurationSettings !== void 0 ? redeemableCodeCodeContentContainerConfigurationSettings : {})
}, redeemableCodeCodeContentContainerConfigurations !== null && redeemableCodeCodeContentContainerConfigurations !== void 0 ? redeemableCodeCodeContentContainerConfigurations : {}), showOrb ? /*#__PURE__*/React.createElement(Orb, {
color: orb,
size: S.icon + 4
}) : null, /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
overflow: "hidden",
transform: "translateZ(0)",
textOverflow: "clip",
whiteSpace: "nowrap",
letterSpacing: 2,
fontVariantNumeric: "tabular-nums",
fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace",
fontSize: S.font,
color: textColor,
opacity: isPreview && !isRevealed ? 0.95 : 1
}, redeemableCodeConfigurationSettings !== null && redeemableCodeConfigurationSettings !== void 0 ? redeemableCodeConfigurationSettings : {}),
"aria-live": "polite"
}, redeemableCodeConfigurations !== null && redeemableCodeConfigurations !== void 0 ? redeemableCodeConfigurations : {}), canMountReal ? code !== null && code !== void 0 ? code : "" : displayText || "•".repeat(visualChars)), isRevealed ? /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
textTransform: "uppercase",
letterSpacing: 2,
fontSize: 10,
color: "rgba(255, 255, 255, 0.45)",
opacity: 0.9,
marginLeft: 8
}, redeemableCodeRevealCodeConfigurationSettings !== null && redeemableCodeRevealCodeConfigurationSettings !== void 0 ? redeemableCodeRevealCodeConfigurationSettings : {})
}, redeemableCodeRevealCodeConfigurations !== null && redeemableCodeRevealCodeConfigurations !== void 0 ? redeemableCodeRevealCodeConfigurations : {}), String(code !== null && code !== void 0 ? code : "").slice(-4)) : null), copyable ? /*#__PURE__*/React.createElement(HUDButton, _extends({
style: _objectSpread({
border: "1px solid rgba(255, 255, 255, 0.169)",
borderRadius: 12,
boxShadow: "0 2px 10px ".concat(hexToRgba(themeColor, 0.18)),
background: "rgba(255,255,255,0.069)",
color: themeColor,
padding: "8px 10px"
}, redeemableCodeCopyButtonConfigurationSettings !== null && redeemableCodeCopyButtonConfigurationSettings !== void 0 ? redeemableCodeCopyButtonConfigurationSettings : {}),
onClick: handleCopy
}, redeemableCodeCopyButtonConfigurations !== null && redeemableCodeCopyButtonConfigurations !== void 0 ? redeemableCodeCopyButtonConfigurations : {}), /*#__PURE__*/React.createElement(HUDIcon, _extends({
name: copied ? "check" : "copy"
}, redeemableCodeCopyButtonIconConfigurations !== null && redeemableCodeCopyButtonIconConfigurations !== void 0 ? redeemableCodeCopyButtonIconConfigurations : {})), copied ? "Copied" : "Copy") : null, /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "absolute",
pointerEvents: "none",
filter: "blur(0.8px)",
background: "linear-gradient(90deg, transparent, ".concat(hexToRgba(glow, 0.8), ", transparent)"),
height: 2,
opacity: 0.69,
bottom: 6,
right: 14,
left: 14
}, redeemableCodeGlowUnderLightConfigurationSettings !== null && redeemableCodeGlowUnderLightConfigurationSettings !== void 0 ? redeemableCodeGlowUnderLightConfigurationSettings : {}),
"aria-hidden": true
}, redeemableCodeGlowUnderLightConfigurations !== null && redeemableCodeGlowUnderLightConfigurations !== void 0 ? redeemableCodeGlowUnderLightConfigurations : {}))));
});
export default HUDRedeemableCode;