{"version":3,"file":"DataTableSimple.1zbsASik.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/0LFjYPsaAvSTV9tGxxzM/ZhWpshfG4PFOhz9mv97m/DataTableSimple.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";// Default data inspired by your image\nconst defaultData=[{feature:\"AI-Native or Add-on?\",productA:\"AI-Native platform built from the ground up\",productB:\"Add-on to legacy ticketing system\"},{feature:\"Knowledge & Sources\",productA:\"Domain-level crawl, Google Docs & Sheets, unlimited sources\",productB:\"Manual sub-page entry only, capped at 10 URLs\"},{feature:\"Persona tailoring\",productA:\"Multiple agent personas per channel with rich tone and style\",productB:\"Single agent persona with limited tone presets\"}];// Default columns matching the data structure\nconst defaultColumns=[{key:\"feature\",header:\"Feature\"},{key:\"productA\",header:\"SIENA AI\"},{key:\"productB\",header:\"GORGIAS AI SUITE\"}];/**\n * A simple table that becomes a stacked list on smaller screens.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function ResponsiveTable(props){const{data=defaultData,columns=defaultColumns,striped,bordered,backgroundColor,borderColor,headerBackgroundColor,textColor,headerTextColor,font,headerFont,featureFont,borderRadius,padding,breakpoint,headerAlignment,contentAlignment,highlightColor,showCheckmarks,checkmarkIcon,style}=props;const[containerWidth,setContainerWidth]=useState(0);const containerRef=useRef(null);// Check if the component's width is below the breakpoint\nconst isMobile=containerWidth>0&&containerWidth<breakpoint;// This effect watches the component's container and updates the width\nuseEffect(()=>{if(typeof window===\"undefined\")return;const observer=new ResizeObserver(entries=>{if(entries[0]){startTransition(()=>{setContainerWidth(entries[0].contentRect.width);});}});const currentRef=containerRef.current;if(currentRef){observer.observe(currentRef);}return()=>{if(currentRef){observer.unobserve(currentRef);}};},[]);// --- Common Styles (defined inside component to access props) ---\nconst thStyle={padding,textAlign:headerAlignment,backgroundColor:headerBackgroundColor,color:headerTextColor,...headerFont,borderBottom:`1px solid ${borderColor}`};const tdStyle={padding,textAlign:contentAlignment,color:textColor,...font,borderBottom:`1px solid ${borderColor}`,verticalAlign:\"top\"};const rowStyle=index=>({backgroundColor:striped&&index%2!==0?`${borderColor}40`:\"transparent\"});const featureColumnKey=columns[0]?.key// Get the key of the first column\n;// --- New logic: Map alignment prop to flexbox justify-content ---\nconst flexAlignment=contentAlignment===\"left\"?\"flex-start\":contentAlignment===\"right\"?\"flex-end\":\"center\";// --- Desktop Table Layout ---\nconst renderDesktopTable=()=>/*#__PURE__*/_jsxs(\"table\",{style:{width:\"100%\",borderCollapse:\"collapse\",backgroundColor,borderRadius,overflow:\"hidden\",border:bordered?`1px solid ${borderColor}`:\"none\",tableLayout:\"fixed\",...style},children:[/*#__PURE__*/_jsx(\"thead\",{children:/*#__PURE__*/_jsx(\"tr\",{children:columns.map((col,colIndex)=>{const isHighlightCol=colIndex===1// Always highlight 2nd column\n    ;return /*#__PURE__*/_jsx(\"th\",{style:{...thStyle,...isHighlightCol&&{backgroundColor:highlightColor}},children:col.header},col.key);})})}),/*#__PURE__*/_jsx(\"tbody\",{children:data.map((row,rowIndex)=>/*#__PURE__*/_jsx(\"tr\",{style:rowStyle(rowIndex),children:columns.map((col,colIndex)=>{// Apply special styles\n        const isFeatureCol=col.key===featureColumnKey;const isHighlightCol=colIndex===1// Always highlight 2nd column\n        ;const cellStyle={...tdStyle,...isFeatureCol&&{...featureFont},...isHighlightCol&&{backgroundColor:highlightColor}};// --- New logic: If highlight col, remove textAlign for flex ---\n        if(isHighlightCol&&showCheckmarks&&checkmarkIcon){delete cellStyle.textAlign;}return /*#__PURE__*/_jsx(\"td\",{style:cellStyle,children:isHighlightCol&&showCheckmarks&&checkmarkIcon?/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"flex-start\",gap:8,justifyContent:flexAlignment},children:[/*#__PURE__*/_jsx(\"img\",{src:checkmarkIcon,alt:\"Check\",style:{width:20,height:20,flexShrink:0,marginTop:3}}),/*#__PURE__*/_jsx(\"span\",{style:{textAlign:\"left\"},children:String(row[col.key]??\"\")})]}):String(row[col.key]??\"\")},col.key);})},rowIndex))})]});// --- Mobile Stacked Layout ---\nconst renderMobileTable=()=>/*#__PURE__*/_jsx(\"div\",{style:{backgroundColor,borderRadius,overflow:\"hidden\",border:bordered?`1px solid ${borderColor}`:\"none\",...style},children:data.map((row,rowIndex)=>/*#__PURE__*/_jsx(\"div\",{style:{padding,borderBottom:rowIndex<data.length-1?`1px solid ${borderColor}`:\"none\",...rowStyle(rowIndex)},children:columns.map((col,colIndex)=>{// Apply special styles\n        const isFeatureCol=col.key===featureColumnKey;const isHighlightCol=colIndex===1// Always highlight 2nd column\n        ;const mobileCellStyle={display:\"flex\",flexDirection:\"column\",marginBottom:colIndex<columns.length-1?padding// <-- Set spacing\n        :0,...isHighlightCol&&{backgroundColor:highlightColor,padding:padding/2,borderRadius:borderRadius>0?borderRadius/2:4,// --- THE FIX IS HERE ---\n        // Use specific margins so marginBottom is not overwritten\n        marginLeft:-padding/2,marginRight:-padding/2}};// --- THIS IS NO LONGER NEEDED ---\n        // if (isHighlightCol && colIndex < columns.length - 1) {\n        //     mobileCellStyle.marginBottom = padding\n        // }\n        const headerStyle={color:headerTextColor,...headerFont,opacity:.8,fontSize:Math.max(12,(headerFont.fontSize||16)*.8),marginBottom:4,textAlign:headerAlignment};const contentStyle={color:textColor,...font,...isFeatureCol&&{...featureFont},textAlign:contentAlignment};return /*#__PURE__*/_jsxs(\"div\",{style:mobileCellStyle,children:[/*#__PURE__*/_jsx(\"span\",{style:headerStyle,children:col.header}),isHighlightCol&&showCheckmarks&&checkmarkIcon?/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"flex-start\",gap:8,justifyContent:flexAlignment,width:\"100%\"},children:[/*#__PURE__*/_jsx(\"img\",{src:checkmarkIcon,alt:\"Check\",style:{width:20,height:20,flexShrink:0,marginTop:3}}),/*#__PURE__*/_jsx(\"span\",{style:{...contentStyle,textAlign:\"left\"},children:String(row[col.key]??\"\")})]}):/*#__PURE__*/_jsx(\"span\",{style:contentStyle,children:String(row[col.key]??\"\")})]},col.key);})},rowIndex))});// Render the correct layout based on width\nreturn /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"auto\"},children:isMobile?renderMobileTable():renderDesktopTable()});}// --- Property Controls ---\naddPropertyControls(ResponsiveTable,{data:{type:ControlType.Array,title:\"Data\",control:{type:ControlType.Object,controls:{feature:{type:ControlType.String,defaultValue:\"Feature\"},productA:{type:ControlType.String,defaultValue:\"Product A Value\"},productB:{type:ControlType.String,defaultValue:\"Product B Value\"}}},defaultValue:defaultData},columns:{type:ControlType.Array,title:\"Columns\",control:{type:ControlType.Object,controls:{key:{type:ControlType.String,defaultValue:\"feature\"},header:{type:ControlType.String,defaultValue:\"Feature\"}}},defaultValue:defaultColumns},breakpoint:{type:ControlType.Number,title:\"Breakpoint (px)\",defaultValue:600,min:300,max:1200,step:10,displayStepper:true,description:\"The width where the table switches to a stacked layout.\"},// --- Alignment Controls ---\nheaderAlignment:{type:ControlType.Enum,title:\"Header Alignment\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",displaySegmentedControl:true},contentAlignment:{type:ControlType.Enum,title:\"Content Alignment\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",displaySegmentedControl:true},// --- Style Controls ---\nhighlightColor:{type:ControlType.Color,title:\"Highlight Color\",defaultValue:\"#F0F8FF\"},// --- New Controls ---\nshowCheckmarks:{type:ControlType.Boolean,title:\"Show Checkmarks\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},checkmarkIcon:{type:ControlType.Image,title:\"Checkmark Icon\",hidden:({showCheckmarks})=>!showCheckmarks},// ---\nstriped:{type:ControlType.Boolean,title:\"Striped Rows\",defaultValue:false},bordered:{type:ControlType.Boolean,title:\"Bordered\",defaultValue:false},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#EEEEEE\"},headerBackgroundColor:{type:ControlType.Color,title:\"Header Background\",defaultValue:\"transparent\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#333333\"},headerTextColor:{type:ControlType.Color,title:\"Header Text\",defaultValue:\"#555555\"},// --- Font Controls ---\nfont:{type:ControlType.Font,title:\"Body Font\",defaultValue:{fontFamily:\"Inter\",fontWeight:\"400\",fontSize:16},controls:\"extended\"},headerFont:{type:ControlType.Font,title:\"Header Font\",defaultValue:{fontFamily:\"Inter\",fontWeight:\"600\",fontSize:16},controls:\"extended\"},featureFont:{type:ControlType.Font,title:\"Feature Font\",defaultValue:{fontFamily:\"Inter\",fontWeight:\"600\",fontSize:16},controls:\"extended\"},// --- Layout Controls ---\nborderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:50},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:16,min:0,max:50}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ResponsiveTable\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DataTableSimple.map"],"mappings":"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"}