{"version":3,"file":"NumberVisualization.DfxBwWQF.mjs","names":["useMemo"],"sources":["https:/framerusercontent.com/modules/cI2kcUhRkg5GHijDx4Fj/5XbONnisSomfEf8oX3u1/NumberVisualization.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useMemo}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Number Visualization - CMS Connected Progress Bar\n *\n * A segmented progress bar that visualizes a numeric value (1-100) with a gradient from red to green.\n * Connect the \"Value\" property to a CMS number field.\n *\n * @framerIntrinsicWidth 300\n * @framerIntrinsicHeight 40\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n */export default function NumberVisualization(props){const{value=5,maxValue=10,minValue=1,segments=10,activeColor=\"#34C759\",inactiveColor=\"#3A3A3A\",segmentGap=4,borderRadius=4,height=30}=props;// Normalize value between 0 and 1\nconst normalizedValue=useMemo(()=>{const clampedValue=Math.max(minValue,Math.min(maxValue,value));return(clampedValue-minValue)/(maxValue-minValue);},[value,minValue,maxValue]);// Calculate how many segments should be filled\nconst filledSegments=useMemo(()=>{return Math.round(normalizedValue*segments);},[normalizedValue,segments]);return /*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",gap:segmentGap,width:\"100%\",height:height,alignItems:\"stretch\"},children:Array.from({length:segments}).map((_,index)=>{const isFilled=index<filledSegments;return /*#__PURE__*/_jsx(\"div\",{style:{flex:1,backgroundColor:isFilled?activeColor:inactiveColor,borderRadius:borderRadius,transition:\"background-color 0.3s ease\"}},index);})});}addPropertyControls(NumberVisualization,{value:{type:ControlType.Number,title:\"Value\",defaultValue:5,min:0,max:100,step:1,description:\"Connect this to CMS. Number between min and max values.\"},minValue:{type:ControlType.Number,title:\"Min Value\",defaultValue:1,description:\"The minimum value of the range\"},maxValue:{type:ControlType.Number,title:\"Max Value\",defaultValue:10,description:\"The maximum value of the range\"},segments:{type:ControlType.Number,title:\"Segments\",defaultValue:10,min:1,max:20,step:1},activeColor:{type:ControlType.Color,title:\"Active Color\",defaultValue:\"#34C759\"},inactiveColor:{type:ControlType.Color,title:\"Inactive Color\",defaultValue:\"#3A3A3A\"},segmentGap:{type:ControlType.Number,title:\"Segment Gap\",defaultValue:4,min:0,max:20,step:1,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:4,min:0,max:20,step:1,unit:\"px\"},height:{type:ControlType.Number,title:\"Height\",defaultValue:30,min:10,max:100,step:1,unit:\"px\"}});NumberVisualization.displayName=\"Number Visualization\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"NumberVisualization\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"300\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"40\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./NumberVisualization.map"],"mappings":"2KAWG,SAAwB,EAAoB,EAAM,CAAC,GAAK,CAAC,QAAM,EAAE,WAAS,GAAG,WAAS,EAAE,WAAS,GAAG,cAAY,UAAU,gBAAc,UAAU,aAAW,EAAE,eAAa,EAAE,SAAO,IAAI,EACtL,EAAgBA,OAAgC,KAAK,IAAI,EAAS,KAAK,IAAI,EAAS,CAAK,CAAqB,EAAE,IAAW,EAAS,GAAY,CAAC,EAAM,EAAS,CAAQ,CAAC,EACzK,EAAeA,MAAoB,KAAK,MAAM,EAAgB,CAAQ,EAAI,CAAC,EAAgB,CAAQ,CAAC,EAAE,OAAoB,EAAK,MAAM,CAAC,MAAM,CAAC,QAAQ,OAAO,IAAI,EAAW,MAAM,OAAc,SAAO,WAAW,SAAS,EAAE,SAAS,MAAM,KAAK,CAAC,OAAO,CAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,IAAiE,EAAK,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,gBAAnE,EAAM,EAAsF,EAAY,EAA2B,eAAa,WAAW,4BAA4B,CAAC,EAAE,CAAK,CAAG,CAAC,CAAC,CAAE,iBAbpc,IAA2B,IAAoD,EAasX,EAAoB,EAAoB,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,EAAE,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,YAAY,yDAAyD,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,EAAE,YAAY,gCAAgC,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,GAAG,YAAY,gCAAgC,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,EAAE,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,SAAS,EAAE,cAAc,CAAC,KAAK,EAAY,MAAM,MAAM,iBAAiB,aAAa,SAAS,EAAE,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,GAAG,IAAI,GAAG,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC,EAAE,EAAoB,YAAY"}