@nd-storybook/storybook 0.3.76 → 0.3.77

package/dist/index.cjs.js

@@ -101,7 +101,7 @@ Valid keys: `+JSON.stringify(Object.keys(f),null,"  "));var F=K(U,W,$,z,Y+"."+W,
 .ap-range::-moz-range-track {
     background: transparent;
 }
-`,M3=({src:e,label:t,className:s=""})=>{const n=m.useRef(null),a=m.useRef(1),[o,l]=m.useState(!1),[i,d]=m.useState(0),[C,u]=m.useState(0),[c,p]=m.useState(1),[v,h]=m.useState(1),[g,w]=m.useState(!1),j=m.useRef(null);m.useEffect(()=>{if(!g)return;const V=_=>{j.current&&!j.current.contains(_.target)&&w(!1)};return document.addEventListener("mousedown",V),()=>document.removeEventListener("mousedown",V)},[g]);const k=c===0?"speaker-x":c<.5?"speaker-low":"speaker-high",x=C>0?i/C*100:0,L=c*100,b=()=>{const V=n.current;V&&(V.paused?V.play():V.pause())},y=V=>{const _=n.current;if(!_)return;const B=Number(V.target.value);_.currentTime=B,d(B)},H=V=>{const _=n.current;if(!_)return;const B=Number(V.target.value);_.volume=B,p(B),B>0&&(a.current=B)},T=()=>{const V=n.current;if(!V)return;const _=c===0?a.current||1:0;V.volume=_,p(_)},D=V=>{const _=n.current;h(V),w(!1),_&&(_.playbackRate=V)};return r.jsxs("div",{className:`flex flex-col gap-xs ${s}`,children:[r.jsx("style",{children:U9}),t&&r.jsx("span",{className:"text-heading-m text-text-default",children:t}),r.jsx("audio",{ref:n,src:e,onPlay:()=>l(!0),onPause:()=>l(!1),onTimeUpdate:V=>d(V.currentTarget.currentTime),onLoadedMetadata:V=>u(V.currentTarget.duration),onEnded:()=>l(!1)}),r.jsxs("div",{className:"flex items-center gap-xs sm:gap-s w-full",children:[r.jsx("button",{type:"button",onClick:b,"aria-label":o?"Pauzeer":"Afspelen",className:"group shrink-0 inline-flex cursor-pointer",children:r.jsx(Q,{name:o?"pause-circle":"play-circle",variant:"fill",size:"l",color:"brand",className:"transition-colors duration-200 group-hover:text-text-brand-hover"})}),r.jsxs("div",{className:"flex flex-1 items-center gap-xs min-w-0",children:[r.jsx("input",{type:"range",min:0,max:C||0,step:.1,value:i,onChange:y,"aria-label":"Tijdbalk",className:"ap-range flex-1 min-w-0",style:{background:He(x)}}),r.jsxs("span",{className:"shrink-0 text-meta-light text-text-gray tabular-nums",children:[Se(i)," / ",Se(C)]})]}),r.jsxs("div",{ref:j,className:"shrink-0 relative",children:[r.jsxs("button",{type:"button",onClick:()=>w(V=>!V),"aria-haspopup":"listbox","aria-expanded":g,"aria-label":"Afspeelsnelheid",className:"inline-flex items-center px-xs py-xxs text-meta-regular text-text-gray border-s border-border-gray-subtle rounded-pill hover:bg-background-gray-subtle transition-colors cursor-pointer",children:[v,"x"]}),g&&r.jsx("ul",{role:"listbox",className:"absolute top-full right-0 mt-xxs bg-background-default border-s border-border-gray-subtle shadow-s z-10 py-xxs",children:q9.map(V=>r.jsx("li",{children:r.jsxs("button",{type:"button",role:"option","aria-selected":V===v,onClick:()=>D(V),className:`block w-full text-left px-s py-xxs whitespace-nowrap hover:bg-background-gray-subtle transition-colors ${V===v?"text-meta-regular text-text-brand":"text-meta-light text-text-default"}`,children:[V,"x"]})},V))})]}),r.jsxs("div",{className:"shrink-0 hidden sm:flex items-center gap-xxs",children:[r.jsx("button",{type:"button",onClick:T,"aria-label":c===0?"Geluid aanzetten":"Dempen",className:"inline-flex cursor-pointer",children:r.jsx(Q,{name:k,variant:"fill",size:"s",color:"gray"})}),r.jsx("input",{type:"range",min:0,max:1,step:.05,value:c,onChange:H,"aria-label":"Volume",className:"ap-range w-16",style:{background:He(L)}})]})]})]})},W9=({isOpen:e,onClose:t,remainingGifts:s=5,defaultMode:n="gift",onShareAsGift:a,onShareAsStandard:o})=>{const[l,i]=m.useState(e??!1),[d,C]=m.useState(n),[u,c]=m.useState(Math.max(0,s)),{toast:p,showToast:v,hideToast:h}=b3();m.useEffect(()=>{e!==void 0&&i(e)},[e]),m.useEffect(()=>(window.openArtikelCadeau=x=>{C(x),requestAnimationFrame(()=>{i(!0)})},()=>{window.openArtikelCadeau=void 0}),[]),m.useEffect(()=>{const x=()=>{C("gift"),i(!0)};return window.addEventListener("open-artikel-cadeau",x),()=>window.removeEventListener("open-artikel-cadeau",x)},[]),m.useEffect(()=>{const x=L=>{const b=Math.max(0,L.detail.remainingGifts);c(b);const y=document.querySelector(".bg-background-brand.text-text-inverse.size-m");y&&(y.textContent=b.toString())};return window.addEventListener("update-remaining-gifts",x),()=>window.removeEventListener("update-remaining-gifts",x)},[]),m.useEffect(()=>{const x=L=>{v(L.detail.message)};return window.addEventListener("artikel-cadeau-toast",x),()=>window.removeEventListener("artikel-cadeau-toast",x)},[v]);const g=m.useCallback(()=>{i(!1),t==null||t()},[t]);if(!l)return r.jsx(r.Fragment,{children:r.jsx(f1,{message:p.message,visible:p.visible,onClose:h})});const w=[{iconName:"link",label:"Kopieer link",platform:"copy"},{iconName:"mail",label:"E-mail",platform:"email"},{iconName:"whatsapp",label:"WhatsApp",platform:"whatsapp"},{iconName:"facebook",label:"Facebook",platform:"facebook"},{iconName:"x",label:"X",platform:"x"},{iconName:"linkedin",label:"LinkedIn",platform:"linkedin"},{iconName:"bluesky",label:"Bluesky",platform:"bluesky"}],j=d==="gift"&&u<=0,k=x=>{j||(d==="gift"?a?a(x):window.handleShareAsGift&&window.handleShareAsGift(x):o?o(x):window.handleShareAsStandard&&window.handleShareAsStandard(x))};return r.jsxs(r.Fragment,{children:[r.jsx("style",{children:`
+`,M3=({src:e,label:t,className:s=""})=>{const n=m.useRef(null),a=m.useRef(1),[o,l]=m.useState(!1),[i,d]=m.useState(0),[C,u]=m.useState(0),[c,p]=m.useState(1),[v,h]=m.useState(1),[g,w]=m.useState(!1),j=m.useRef(null);m.useEffect(()=>{if(!g)return;const V=_=>{j.current&&!j.current.contains(_.target)&&w(!1)};return document.addEventListener("mousedown",V),()=>document.removeEventListener("mousedown",V)},[g]);const k=c===0?"speaker-x":c<.5?"speaker-low":"speaker-high",x=C>0?i/C*100:0,L=c*100,b=()=>{const V=n.current;V&&(V.paused?V.play():V.pause())},y=V=>{const _=n.current;if(!_)return;const B=Number(V.target.value);_.currentTime=B,d(B)},H=V=>{const _=n.current;if(!_)return;const B=Number(V.target.value);_.volume=B,p(B),B>0&&(a.current=B)},T=()=>{const V=n.current;if(!V)return;const _=c===0?a.current||1:0;V.volume=_,p(_)},D=V=>{const _=n.current;h(V),w(!1),_&&(_.playbackRate=V)};return r.jsxs("div",{className:`flex flex-col gap-xs ${s}`,children:[r.jsx("style",{children:U9}),t&&r.jsx("span",{className:"text-heading-m text-text-default",children:t}),r.jsx("audio",{ref:n,src:e,onPlay:()=>l(!0),onPause:()=>l(!1),onTimeUpdate:V=>d(V.currentTarget.currentTime),onLoadedMetadata:V=>u(V.currentTarget.duration),onEnded:()=>l(!1)}),r.jsxs("div",{className:"flex items-center gap-xs sm:gap-s w-full p-xxs bg-background-default border-default border-border-gray-subtle",children:[r.jsx("button",{type:"button",onClick:b,"aria-label":o?"Pauzeer":"Afspelen",className:"group shrink-0 inline-flex cursor-pointer",children:r.jsx(Q,{name:o?"pause-circle":"play-circle",variant:"fill",size:"l",color:"brand",className:"transition-colors duration-200 group-hover:text-text-brand-hover"})}),r.jsxs("div",{className:"flex flex-1 items-center gap-xs min-w-0",children:[r.jsx("input",{type:"range",min:0,max:C||0,step:.1,value:i,onChange:y,"aria-label":"Tijdbalk",className:"ap-range flex-1 min-w-0",style:{background:He(x)}}),r.jsxs("span",{className:"shrink-0 text-meta-regular text-text-gray tabular-nums",children:[Se(i)," / ",Se(C)]})]}),r.jsxs("div",{ref:j,className:"shrink-0 relative",children:[r.jsxs("button",{type:"button",onClick:()=>w(V=>!V),"aria-haspopup":"listbox","aria-expanded":g,"aria-label":"Afspeelsnelheid",className:"inline-flex items-center px-xs py-xxs text-meta-regular text-text-gray border-s border-border-gray-subtle rounded-pill hover:bg-background-gray-subtle transition-colors cursor-pointer",children:[v,"x"]}),g&&r.jsx("ul",{role:"listbox",className:"absolute top-full right-0 mt-xxs bg-background-default border-s border-border-gray-subtle shadow-s z-10 py-xxs",children:q9.map(V=>r.jsx("li",{children:r.jsxs("button",{type:"button",role:"option","aria-selected":V===v,onClick:()=>D(V),className:`block w-full text-left px-s py-xxs whitespace-nowrap hover:bg-background-gray-subtle transition-colors ${V===v?"text-meta-regular text-text-brand":"text-meta-light text-text-default"}`,children:[V,"x"]})},V))})]}),r.jsxs("div",{className:"shrink-0 hidden sm:flex items-center gap-xxs",children:[r.jsx("button",{type:"button",onClick:T,"aria-label":c===0?"Geluid aanzetten":"Dempen",className:"inline-flex cursor-pointer",children:r.jsx(Q,{name:k,variant:"fill",size:"s",color:"gray"})}),r.jsx("input",{type:"range",min:0,max:1,step:.05,value:c,onChange:H,"aria-label":"Volume",className:"ap-range w-16",style:{background:He(L)}})]})]})]})},W9=({isOpen:e,onClose:t,remainingGifts:s=5,defaultMode:n="gift",onShareAsGift:a,onShareAsStandard:o})=>{const[l,i]=m.useState(e??!1),[d,C]=m.useState(n),[u,c]=m.useState(Math.max(0,s)),{toast:p,showToast:v,hideToast:h}=b3();m.useEffect(()=>{e!==void 0&&i(e)},[e]),m.useEffect(()=>(window.openArtikelCadeau=x=>{C(x),requestAnimationFrame(()=>{i(!0)})},()=>{window.openArtikelCadeau=void 0}),[]),m.useEffect(()=>{const x=()=>{C("gift"),i(!0)};return window.addEventListener("open-artikel-cadeau",x),()=>window.removeEventListener("open-artikel-cadeau",x)},[]),m.useEffect(()=>{const x=L=>{const b=Math.max(0,L.detail.remainingGifts);c(b);const y=document.querySelector(".bg-background-brand.text-text-inverse.size-m");y&&(y.textContent=b.toString())};return window.addEventListener("update-remaining-gifts",x),()=>window.removeEventListener("update-remaining-gifts",x)},[]),m.useEffect(()=>{const x=L=>{v(L.detail.message)};return window.addEventListener("artikel-cadeau-toast",x),()=>window.removeEventListener("artikel-cadeau-toast",x)},[v]);const g=m.useCallback(()=>{i(!1),t==null||t()},[t]);if(!l)return r.jsx(r.Fragment,{children:r.jsx(f1,{message:p.message,visible:p.visible,onClose:h})});const w=[{iconName:"link",label:"Kopieer link",platform:"copy"},{iconName:"mail",label:"E-mail",platform:"email"},{iconName:"whatsapp",label:"WhatsApp",platform:"whatsapp"},{iconName:"facebook",label:"Facebook",platform:"facebook"},{iconName:"x",label:"X",platform:"x"},{iconName:"linkedin",label:"LinkedIn",platform:"linkedin"},{iconName:"bluesky",label:"Bluesky",platform:"bluesky"}],j=d==="gift"&&u<=0,k=x=>{j||(d==="gift"?a?a(x):window.handleShareAsGift&&window.handleShareAsGift(x):o?o(x):window.handleShareAsStandard&&window.handleShareAsStandard(x))};return r.jsxs(r.Fragment,{children:[r.jsx("style",{children:`
                 .artikel-cadeau-badge-gray [class*="bg-background-brand"] {
                     background-color: #9ca3af !important;
                 }