{"version":3,"file":"Notificationstack.avbB7qDd.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/Y3HiIlrvrhmIB93Q4CQG/D2jG0YupVSesoefaUO2k/Notificationstack.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";// ============================================================\n// NotificationStack — \"01 · Bericht\"\n// Levende notificatie-tray: nieuwe berichten vallen binnen en\n// drukken de vorige zichtbaar de stapel in.\n// Transparante achtergrond: plaats op je eigen kaartvlak.\n// ============================================================\nconst DEFAULT_ITEMS=[{label:\"Template ready\",title:\"Your template is ready for review\",description:\"The template has been created based upon your input. Review the template to publish or discard.\",time:\"13:30\",unread:true},{label:\"New meeting available\",title:\"Voortgangsupdate project status\",description:\"\",time:\"08:59\",unread:false},{label:\"Sharepoint connection about to expire\",title:\"Re-authenticate required to establish connection to Sharepoint\",description:\"\",time:\"09:47\",unread:false}];/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n * @framerIntrinsicWidth 330\n */export default function NotificationStack(props){const items=Array.isArray(props.items)&&props.items.length>0?props.items:DEFAULT_ITEMS;const timing={interval:3200,...props.timing};const colors={card:\"#ffffff\",ink:\"#2e2e2e\",muted:\"#6f6f6c\",faint:\"#9b9891\",unread:\"#c2452e\",iconBg:\"rgba(46,46,46,0.08)\",...props.colors};const shadow={enabled:true,y:10,blur:28,spread:0,color:\"rgba(0,0,0,0.09)\",...props.shadow};const style={radius:12,visible:3,...props.style};const labelFont=props.labelFont||{};const titleFont=props.titleFont||{};const bodyFont=props.bodyFont||{};const boxShadow=shadow.enabled?`0 1px 2px rgba(0,0,0,.05), 0 ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${shadow.color}`:\"none\";const onCanvas=RenderTarget.current()===RenderTarget.canvas;const animate=props.animate!==false&&!onCanvas;// gen telt de cycli; de bovenste kaart toont items[gen % items.length]\nconst[gen,setGen]=useState(0);useEffect(()=>{if(!animate)return;const id=setInterval(()=>setGen(g=>g+1),timing.interval);return()=>clearInterval(id);},[animate,timing.interval]);const item=items[gen%items.length];const ghostCount=Math.max(0,Math.min(style.visible,3)-1);const wrapHeight=130+ghostCount*28;const ghostBase={position:\"absolute\",left:0,right:0,height:100,background:colors.card,borderRadius:style.radius,boxShadow,pointerEvents:\"none\"};return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",maxWidth:330,position:\"relative\",height:wrapHeight,fontFamily:\"'Inter', sans-serif\",letterSpacing:\"-0.01em\",color:colors.ink},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                @keyframes nsDrop {\n                    from { transform: translateY(-24px) scale(.97); opacity: 0 }\n                    to   { transform: translateY(0) scale(1); opacity: 1 }\n                }\n                @keyframes nsSettle {\n                    0%   { transform: var(--ns-base) translateY(0) }\n                    35%  { transform: var(--ns-base) translateY(7px) }\n                    100% { transform: var(--ns-base) translateY(0) }\n                }\n            `}),ghostCount>=2&&/*#__PURE__*/_jsx(\"div\",{style:{...ghostBase,top:62,opacity:.28,[\"--ns-base\"]:\"scale(.91)\",transform:\"scale(.91)\",animation:animate?\"nsSettle .6s cubic-bezier(.2,.8,.3,1)\":\"none\"}},\"g2-\"+gen),ghostCount>=1&&/*#__PURE__*/_jsx(\"div\",{style:{...ghostBase,top:38,opacity:.55,[\"--ns-base\"]:\"scale(.955)\",transform:\"scale(.955)\",animation:animate?\"nsSettle .6s cubic-bezier(.2,.8,.3,1)\":\"none\"}},\"g1-\"+gen),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",left:0,right:0,top:0,zIndex:3,background:colors.card,borderRadius:style.radius,boxShadow,padding:\"15px 17px\",animation:animate?\"nsDrop .6s cubic-bezier(.2,.8,.3,1)\":\"none\",pointerEvents:\"none\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",gap:9,marginBottom:item.title?7:0},children:[/*#__PURE__*/_jsx(\"span\",{style:{width:20,height:20,borderRadius:5,display:\"grid\",placeItems:\"center\",flex:\"none\",background:colors.iconBg},children:/*#__PURE__*/_jsxs(\"svg\",{viewBox:\"0 0 24 24\",style:{width:12,height:12,stroke:colors.ink,strokeWidth:1.8,fill:\"none\"},children:[/*#__PURE__*/_jsx(\"path\",{d:\"M4 5h16v11H4z\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M4 9h16\"})]})}),/*#__PURE__*/_jsx(\"span\",{style:{fontSize:12.5,fontWeight:500,...labelFont,color:colors.muted,whiteSpace:\"nowrap\",overflow:\"hidden\",textOverflow:\"ellipsis\",flex:1,minWidth:0},children:item.label}),item.unread&&/*#__PURE__*/_jsx(\"span\",{style:{fontSize:11.5,fontWeight:600,...labelFont,color:colors.unread,flex:\"none\"},children:\"Unread\"}),/*#__PURE__*/_jsx(\"span\",{style:{fontSize:11.5,marginLeft:6,fontVariantNumeric:\"tabular-nums\",...labelFont,color:colors.faint,flex:\"none\"},children:item.time})]}),item.title?/*#__PURE__*/_jsx(\"div\",{style:{fontSize:14.5,fontWeight:600,...titleFont,color:colors.ink},children:item.title}):null,item.description?/*#__PURE__*/_jsx(\"div\",{style:{fontSize:12.5,marginTop:4,lineHeight:1.5,...bodyFont,color:colors.muted},children:item.description}):null]},\"main-\"+gen)]});}addPropertyControls(NotificationStack,{animate:{type:ControlType.Boolean,title:\"Animeren\",defaultValue:true},items:{type:ControlType.Array,title:\"Notificaties\",control:{type:ControlType.Object,controls:{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Template ready\"},title:{type:ControlType.String,title:\"Titel\",defaultValue:\"\"},description:{type:ControlType.String,title:\"Omschrijving\",displayTextArea:true,defaultValue:\"\"},time:{type:ControlType.String,title:\"Tijd\",defaultValue:\"13:30\"},unread:{type:ControlType.Boolean,title:\"Unread\",defaultValue:false}}},defaultValue:DEFAULT_ITEMS},timing:{type:ControlType.Object,title:\"Animatie\",controls:{interval:{type:ControlType.Number,title:\"Interval\",defaultValue:3200,min:1200,max:1e4,step:100,unit:\"ms\"}}},labelFont:{type:ControlType.Font,title:\"Label-font\",controls:\"extended\",defaultValue:{fontFamily:\"Inter\",fontWeight:500,fontSize:12.5}},titleFont:{type:ControlType.Font,title:\"Titel-font\",controls:\"extended\",defaultValue:{fontFamily:\"Inter\",fontWeight:600,fontSize:14.5}},bodyFont:{type:ControlType.Font,title:\"Tekst-font\",controls:\"extended\",defaultValue:{fontFamily:\"Inter\",fontWeight:400,fontSize:12.5}},colors:{type:ControlType.Object,title:\"Kleuren\",controls:{card:{type:ControlType.Color,title:\"Kaart\",defaultValue:\"#ffffff\"},ink:{type:ControlType.Color,title:\"Tekst\",defaultValue:\"#2e2e2e\"},muted:{type:ControlType.Color,title:\"Gedempt\",defaultValue:\"#6f6f6c\"},faint:{type:ControlType.Color,title:\"Tijd\",defaultValue:\"#9b9891\"},unread:{type:ControlType.Color,title:\"Unread\",defaultValue:\"#c2452e\"},iconBg:{type:ControlType.Color,title:\"Icoon-vlak\",defaultValue:\"rgba(46,46,46,0.08)\"}}},shadow:{type:ControlType.Object,title:\"Schaduw\",controls:{enabled:{type:ControlType.Boolean,title:\"Schaduw\",defaultValue:true},y:{type:ControlType.Number,title:\"Verticale offset\",defaultValue:10,min:0,max:60,step:1,unit:\"px\"},blur:{type:ControlType.Number,title:\"Vervaging\",defaultValue:28,min:0,max:120,step:1,unit:\"px\"},spread:{type:ControlType.Number,title:\"Spreiding\",defaultValue:0,min:-40,max:40,step:1,unit:\"px\"},color:{type:ControlType.Color,title:\"Kleur\",defaultValue:\"rgba(0,0,0,0.09)\"}}},style:{type:ControlType.Object,title:\"Vormgeving\",controls:{radius:{type:ControlType.Number,title:\"Hoekradius\",defaultValue:12,min:0,max:30,step:1,unit:\"px\"},visible:{type:ControlType.Number,title:\"Kaarten zichtbaar\",defaultValue:3,min:1,max:3,step:1}}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"NotificationStack\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"auto\",\"framerIntrinsicWidth\":\"330\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Notificationstack.map"],"mappings":"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"}