@razorpay/blade
Version:
The Design System that powers Razorpay
10 lines (7 loc) • 1.66 kB
JavaScript
import 'react';
import { useFluidGradient } from './useFluidGradient.js';
import { useId } from '../../../utils/useId.js';
import { jsxs, jsx } from 'react/jsx-runtime';
var CANVAS_SCALE=1.4;function FluidGradient(_ref){var children=_ref.children,_ref$size=_ref.size,size=_ref$size===void 0?200:_ref$size,_ref$viewBox=_ref.viewBox,viewBox=_ref$viewBox===void 0?'0 0 24 24':_ref$viewBox,_ref$origin=_ref.origin,origin=_ref$origin===void 0?[0.5,0.0]:_ref$origin,className=_ref.className,style=_ref.style;var uid=useId('rzp-sense-gradient');var maskId=`fg-mask-${uid}`;var canvasSize=Math.round(size*CANVAS_SCALE);var offset=(canvasSize-size)/2;var containerRef=useFluidGradient({size:canvasSize,origin:origin});var vbW=parseViewBoxSize(viewBox,'w');var vbH=parseViewBoxSize(viewBox,'h');return jsxs("div",{className:className,style:Object.assign({position:'relative',width:size,height:size,display:'inline-block',overflow:'hidden'},style),children:[jsx("svg",{"aria-hidden":true,style:{position:'absolute',width:0,height:0,overflow:'hidden'},children:jsx("defs",{children:jsx("mask",{id:maskId,maskUnits:"userSpaceOnUse",x:"0",y:"0",width:canvasSize,height:canvasSize,children:jsx("g",{transform:`translate(${offset}, ${offset}) scale(${size/vbW}, ${size/vbH})`,children:children})})})}),jsx("div",{ref:containerRef,style:{position:'absolute',top:-offset,left:-offset,mask:`url(#${maskId})`,WebkitMask:`url(#${maskId})`}})]});}function parseViewBoxSize(viewBox,dim){var parts=viewBox.trim().split(/[\s,]+/);var val=dim==='w'?parseFloat(parts[2]):parseFloat(parts[3]);return val>0?val:24;}
export { FluidGradient };
//# sourceMappingURL=FluidGradient.js.map