{"version":3,"file":"DynamicTable.BkR9t0cd.mjs","names":["React.useRef","React.useState","React.Fragment"],"sources":["https:/framerusercontent.com/modules/MuqWWydNASGRif8rMVUK/9AFqHanaWInZVv79P9Rp/DynamicTable.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function ProfessionalTable(props){const{columns,rows,padding,fontSize,headerBg,headerText,rowBg,textColor,borderColor,borderWidth,radius,breakpoint,minTableWidth}=props;const containerRef=React.useRef(null);const[containerWidth,setContainerWidth]=React.useState(0);React.useLayoutEffect(()=>{const observer=new ResizeObserver(entries=>{for(let entry of entries){setContainerWidth(entry.contentRect.width);}});if(containerRef.current)observer.observe(containerRef.current);return()=>observer.disconnect();},[]);const isMobile=containerWidth>0&&containerWidth<breakpoint;// 1. BASE WRAPPER STYLES\nconst outerWrapper={width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"column\",overflow:isMobile?\"visible\":\"hidden\"};// 2. SCROLLABLE CONTAINER (The Tablet Fix)\nconst tableScrollContainer={width:\"100%\",overflowX:\"auto\",overflowY:\"hidden\",borderRadius:radius,border:isMobile?\"none\":`${borderWidth}px solid ${borderColor}`,WebkitOverflowScrolling:\"touch\"};// 3. INTERNAL GRID STYLES\nconst gridStyle={display:\"grid\",// Force minimum width on Tablet so text doesn't squish\nminWidth:isMobile?\"100%\":`${minTableWidth}px`,gridTemplateColumns:`repeat(${columns.length}, 1fr)`,backgroundColor:borderColor,gap:`${borderWidth}px`};const cellBase={padding:`${padding}px`,fontSize:`${fontSize}px`,lineHeight:\"1.4\",display:\"flex\",alignItems:\"center\",backgroundColor:rowBg,color:textColor};// --- RENDER MOBILE CARD VIEW ---\nif(isMobile){return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...outerWrapper,gap:12},children:rows.map((row,rowIndex)=>/*#__PURE__*/_jsx(\"div\",{style:{border:`${borderWidth}px solid ${borderColor}`,borderRadius:radius,overflow:\"hidden\"},children:columns.map((col,colIndex)=>/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",borderBottom:colIndex===columns.length-1?\"none\":`${borderWidth}px solid ${borderColor}`},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:\"40%\",padding:\"10px\",backgroundColor:headerBg,color:headerText,fontWeight:700,fontSize:fontSize-1,borderRight:`${borderWidth}px solid ${borderColor}`},children:col.title}),/*#__PURE__*/_jsx(\"div\",{style:{width:\"60%\",padding:\"10px\",backgroundColor:rowBg,color:textColor,fontSize},children:row[`c${colIndex+1}`]})]},colIndex))},rowIndex))});}// --- RENDER TABLE VIEW (Desktop & Tablet) ---\nreturn /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:outerWrapper,children:[/*#__PURE__*/_jsx(\"div\",{style:tableScrollContainer,children:/*#__PURE__*/_jsxs(\"div\",{style:gridStyle,children:[columns.map((col,i)=>/*#__PURE__*/_jsx(\"div\",{style:{...cellBase,backgroundColor:headerBg,color:headerText,fontWeight:700},children:col.title},i)),rows.map((row,rowIndex)=>/*#__PURE__*/_jsx(React.Fragment,{children:columns.map((_,colIndex)=>/*#__PURE__*/_jsx(\"div\",{style:cellBase,children:row[`c${colIndex+1}`]},colIndex))},rowIndex))]})}),!isMobile&&containerWidth<minTableWidth&&/*#__PURE__*/_jsx(\"div\",{style:{fontSize:\"10px\",textAlign:\"right\",marginTop:\"4px\",opacity:.5},children:\"Scroll →\"})]});}addPropertyControls(ProfessionalTable,{minTableWidth:{type:ControlType.Number,title:\"Table Min Width\",defaultValue:650,min:400,max:1200,description:\"Below this width, tablet view will scroll horizontally instead of squishing text.\"},breakpoint:{type:ControlType.Number,title:\"Mobile Break\",defaultValue:500},columns:{type:ControlType.Array,control:{type:ControlType.Object,controls:{title:{type:ControlType.String}}},defaultValue:[{title:\"Card Category\"},{title:\"Rate\"},{title:\"Per-Txn Fee\"},{title:\"Network\"}]},rows:{type:ControlType.Array,control:{type:ControlType.Object,controls:{c1:{type:ControlType.String,title:\"C1\"},c2:{type:ControlType.String,title:\"C2\"},c3:{type:ControlType.String,title:\"C3\"},c4:{type:ControlType.String,title:\"C4\"}}},defaultValue:[{c1:\"Standard Consumer\",c2:\"1.65% - 2.10%\",c3:\"$0.10\",c4:\"Visa/MC\"},{c1:\"Rewards/Premium\",c2:\"1.95% - 2.40%\",c3:\"$0.10\",c4:\"Visa/MC\"}]},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:16},fontSize:{type:ControlType.Number,title:\"Font Size\",defaultValue:13},radius:{type:ControlType.Number,title:\"Radius\",defaultValue:10},headerBg:{type:ControlType.Color,title:\"Header Bg\",defaultValue:\"#f1f1f1\"},headerText:{type:ControlType.Color,title:\"Header Text\",defaultValue:\"#000\"},rowBg:{type:ControlType.Color,title:\"Row Bg\",defaultValue:\"#ffffff\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#444\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#E5E5E5\"},borderWidth:{type:ControlType.Number,title:\"Border Width\",defaultValue:1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProfessionalTable\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DynamicTable.map"],"mappings":"uMAAyI,SAAwB,EAAkB,EAAM,CAAC,GAAK,CAAC,UAAQ,OAAK,UAAQ,WAAS,WAAS,aAAW,QAAM,YAAU,cAAY,cAAY,SAAO,aAAW,iBAAe,EAAY,EAAaA,EAAa,IAAI,EAAO,CAAC,EAAe,GAAmBC,EAAe,CAAC,EAAE,MAA0B,CAAC,IAAM,EAAS,IAAI,eAAe,GAAS,CAAC,IAAI,IAAI,KAAS,EAAS,EAAkB,EAAM,YAAY,KAAK,CAAG,CAAC,EAAiE,OAA5D,EAAa,SAAQ,EAAS,QAAQ,EAAa,OAAO,MAAY,EAAS,WAAW,CAAE,EAAE,CAAC,CAAC,EAAE,IAAM,EAAS,EAAe,GAAG,EAAe,EAChsB,EAAa,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,cAAc,SAAS,SAAS,EAAS,UAAU,QAAQ,EACnH,EAAqB,CAAC,MAAM,OAAO,UAAU,OAAO,UAAU,SAAS,aAAa,EAAO,OAAO,EAAS,OAAO,GAAG,EAAY,WAAW,IAAc,wBAAwB,OAAO,EACzL,EAAU,CAAC,QAAQ,OACzB,SAAS,EAAS,OAAO,GAAG,EAAc,IAAI,oBAAoB,UAAU,EAAQ,OAAO,QAAQ,gBAAgB,EAAY,IAAI,GAAG,EAAY,GAAG,EAAQ,EAAS,CAAC,QAAQ,GAAG,EAAQ,IAAI,SAAS,GAAG,EAAS,IAAI,WAAW,MAAM,QAAQ,OAAO,WAAW,SAAS,gBAAgB,EAAM,MAAM,CAAS,EAEhT,OADG,EAA8B,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,GAAG,EAAa,IAAI,EAAE,EAAE,SAAS,EAAK,KAAK,EAAI,IAAwB,EAAK,MAAM,CAAC,MAAM,CAAC,OAAO,GAAG,EAAY,WAAW,IAAc,aAAa,EAAO,SAAS,QAAQ,EAAE,SAAS,EAAQ,KAAK,EAAI,IAAwB,EAAM,MAAM,CAAC,MAAM,CAAC,QAAQ,OAAO,aAAa,IAAW,EAAQ,OAAO,EAAE,OAAO,GAAG,EAAY,WAAW,GAAa,EAAE,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,MAAM,QAAQ,OAAO,gBAAgB,EAAS,MAAM,EAAW,WAAW,IAAI,SAAS,EAAS,EAAE,YAAY,GAAG,EAAY,WAAW,GAAa,EAAE,SAAS,EAAI,KAAK,CAAC,EAAe,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,MAAM,QAAQ,OAAO,gBAAgB,EAAM,MAAM,EAAU,UAAQ,EAAE,SAAS,EAAI,IAAI,EAAS,IAAI,CAAC,CAAC,CAAC,EAAE,CAAQ,CAAC,CAAC,EAAE,CAAQ,CAAC,CAAC,CAAC,EAChxB,EAAM,MAAM,CAAC,IAAI,EAAa,MAAM,EAAa,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,EAAqB,SAAsB,EAAM,MAAM,CAAC,MAAM,EAAU,SAAS,CAAC,EAAQ,KAAK,EAAI,IAAiB,EAAK,MAAM,CAAC,MAAM,CAAC,GAAG,EAAS,gBAAgB,EAAS,MAAM,EAAW,WAAW,GAAG,EAAE,SAAS,EAAI,KAAK,EAAE,CAAC,CAAC,EAAE,EAAK,KAAK,EAAI,IAAwB,EAAKC,EAAe,CAAC,SAAS,EAAQ,KAAK,EAAE,IAAwB,EAAK,MAAM,CAAC,MAAM,EAAS,SAAS,EAAI,IAAI,EAAS,IAAI,EAAE,CAAQ,CAAC,CAAC,EAAE,CAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAU,EAAe,GAA4B,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,OAAO,UAAU,QAAQ,UAAU,MAAM,QAAQ,EAAE,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,CAAC,CAAE,iBAN7nB,IAA4B,IAAoD,EAM8iB,EAAoB,EAAkB,CAAC,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,kBAAkB,aAAa,IAAI,IAAI,IAAI,IAAI,KAAK,YAAY,mFAAmF,EAAE,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,GAAG,EAAE,QAAQ,CAAC,KAAK,EAAY,MAAM,QAAQ,CAAC,KAAK,EAAY,OAAO,SAAS,CAAC,MAAM,CAAC,KAAK,EAAY,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,MAAM,eAAe,EAAE,CAAC,MAAM,MAAM,EAAE,CAAC,MAAM,aAAa,EAAE,CAAC,MAAM,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,EAAY,MAAM,QAAQ,CAAC,KAAK,EAAY,OAAO,SAAS,CAAC,GAAG,CAAC,KAAK,EAAY,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,KAAK,EAAY,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,KAAK,EAAY,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,KAAK,EAAY,OAAO,MAAM,IAAI,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,GAAG,oBAAoB,GAAG,gBAAgB,GAAG,QAAQ,GAAG,SAAS,EAAE,CAAC,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,aAAa,EAAE,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,EAAE,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,EAAE,EAAE,SAAS,CAAC,KAAK,EAAY,MAAM,MAAM,YAAY,aAAa,SAAS,EAAE,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,MAAM,EAAE,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,SAAS,aAAa,SAAS,EAAE,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,MAAM,EAAE,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,SAAS,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,CAAC,CAAC,CAAC"}