{"version":3,"file":"ModernTwoColumnTable.V3rOzepa.mjs","names":["useMemo","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/jAOHYp8KUGnr78LByclN/Fp2YIFEAFnEhyOgwch60/ModernTwoColumnTable.js"],"sourcesContent":["// a modern table that shows: Role, Team, Timeline, Tools, Responsibilities and Outcome on the left and on the right the according informations\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{startTransition,useCallback,useMemo,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerIntrinsicWidth 640\n * @framerIntrinsicHeight 320\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function ModernTwoColumnTable(props){const{rows=[{label:\"Role\",value:\"Product Designer\"},{label:\"Team\",value:\"Design Systems\"},{label:\"Timeline\",value:\"6 weeks\"},{label:\"Tools\",value:\"Figma, Framer, Notion\"},{label:\"Responsibilities\",value:\"Research, UX, UI, Prototyping\"},{label:\"Outcome\",value:\"Launched v1 with +18% conversion\"}],backgroundColor=\"#FFFFFF\",borderColor=\"#EEEEEE\",labelColor=\"#000000\",valueColor=\"#000000\",rowBackground=\"#FFFFFF\",alternateRowBackground=\"#F5F5F5\",useAlternatingRows=true,showDividers=true,dividerColor=\"#EEEEEE\",radius=\"12px\",padding=\"16px\",gap=12,labelWidth=160,labelFont,valueFont,style}=props;const safeRows=useMemo(()=>{if(!Array.isArray(rows)||rows.length===0)return[];return rows.filter(Boolean).map(r=>({label:typeof r?.label===\"string\"?r.label:\"\",value:typeof r?.value===\"string\"?r.value:\"\"}));},[rows]);const isFixedWidth=!!style&&style.width===\"100%\";const[hoveredIndex,setHoveredIndex]=useState(null);const onEnterRow=useCallback(index=>{startTransition(()=>setHoveredIndex(index));},[]);const onLeaveRow=useCallback(()=>{startTransition(()=>setHoveredIndex(null));},[]);return /*#__PURE__*/_jsx(\"section\",{\"aria-label\":\"Role overview\",style:{position:\"relative\",width:\"100%\",...isFixedWidth?{}:{minWidth:\"max-content\"},background:backgroundColor,border:`1px solid ${borderColor}`,borderRadius:radius,overflow:\"hidden\",...style},children:/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",padding,display:\"flex\",flexDirection:\"column\",gap:0,boxSizing:\"border-box\"},role:\"table\",children:[safeRows.map((row,index)=>{const isAlt=useAlternatingRows&&index%2===1;const isHovered=hoveredIndex===index;return /*#__PURE__*/_jsxs(\"div\",{role:\"row\",onMouseEnter:()=>onEnterRow(index),onMouseLeave:onLeaveRow,style:{position:\"relative\",display:\"grid\",gridTemplateColumns:`${labelWidth}px 1fr`,alignItems:\"start\",gap,padding:\"14px 12px\",borderRadius:10,background:isHovered?\"rgba(0,0,0,0.03)\":isAlt?alternateRowBackground:rowBackground,transition:\"background 120ms ease\",boxSizing:\"border-box\"},children:[/*#__PURE__*/_jsx(\"div\",{role:\"cell\",style:{position:\"relative\",color:labelColor,opacity:.72,...labelFont,minWidth:\"max-content\",whiteSpace:\"nowrap\"},children:row.label}),/*#__PURE__*/_jsx(\"div\",{role:\"cell\",style:{position:\"relative\",color:valueColor,...valueFont,wordBreak:\"break-word\",overflowWrap:\"anywhere\",minWidth:0},children:row.value}),showDividers&&index!==safeRows.length-1&&/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",left:12,right:12,bottom:-1,height:1,background:dividerColor,opacity:.8}})]},`${index}-${row.label}`);}),safeRows.length===0&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",padding:\"14px 12px\",borderRadius:10,background:rowBackground,color:valueColor,...valueFont},children:\"No rows.\"})]})});}addPropertyControls(ModernTwoColumnTable,{rows:{type:ControlType.Array,title:\"Rows\",maxCount:20,defaultValue:[{label:\"Role\",value:\"Product Designer\"},{label:\"Team\",value:\"Design Systems\"},{label:\"Timeline\",value:\"6 weeks\"},{label:\"Tools\",value:\"Figma, Framer, Notion\"},{label:\"Responsibilities\",value:\"Research, UX, UI, Prototyping\"},{label:\"Outcome\",value:\"Launched v1 with +18% conversion\"}],control:{type:ControlType.Object,controls:{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Label\"},value:{type:ControlType.String,title:\"Value\",defaultValue:\"Value\",displayTextArea:true}}}},labelWidth:{type:ControlType.Number,title:\"Label Width\",defaultValue:160,min:80,max:320,step:1,unit:\"px\"},gap:{type:ControlType.Number,title:\"Column Gap\",defaultValue:12,min:6,max:40,step:1,unit:\"px\"},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"16px\"},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"12px\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"#EEEEEE\"},rowBackground:{type:ControlType.Color,title:\"Row\",defaultValue:\"#FFFFFF\"},alternateRowBackground:{type:ControlType.Color,title:\"Row Alt\",defaultValue:\"#F5F5F5\",hidden:({useAlternatingRows})=>!useAlternatingRows},useAlternatingRows:{type:ControlType.Boolean,title:\"Alternating\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},showDividers:{type:ControlType.Boolean,title:\"Dividers\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},dividerColor:{type:ControlType.Color,title:\"Divider\",defaultValue:\"#EEEEEE\",hidden:({showDividers})=>!showDividers},labelColor:{type:ControlType.Color,title:\"Label Color\",defaultValue:\"#000000\"},valueColor:{type:ControlType.Color,title:\"Value Color\",defaultValue:\"#000000\"},labelFont:{type:ControlType.Font,title:\"Label Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"13px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},valueFont:{type:ControlType.Font,title:\"Value Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"15px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ModernTwoColumnTable\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"320\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"640\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ModernTwoColumnTable.map"],"mappings":"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"}