@khyxer/fastyui 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fastyui.css +1341 -1
- package/dist/index.cjs.js +1770 -6
- package/dist/index.es.js +1101 -966
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,6 +1,1770 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
<%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require(`react`),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),m=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=f():t.exports=p()}))();function h({text:e,variant:t=`primary`,size:n=`lg`,onClick:r,icon:i,disabled:a=!1,className:o,...s}){let c=(0,l.useRef)(null);return(0,m.jsxs)(`button`,{ref:c,onClick:()=>{a||r?.()},onMouseDown:()=>{a||!c.current||u.gsap.to(c.current,{scale:.96,duration:.1,ease:`power2.in`})},onMouseUp:()=>{a||!c.current||u.gsap.to(c.current,{scale:1,duration:.2,ease:`back.out(1.7)`})},disabled:a,className:`${d.button} ${d[t]} ${n?d[n]:``} ${a?d.disabled:``} ${o||``}`,...s,children:[i&&(0,m.jsx)(`span`,{className:d.icon,children:i}),e&&(0,m.jsx)(`span`,{className:d.text,children:e})]})}var g={input:`_input_1ddpd_1`,inputWrapper:`_inputWrapper_1ddpd_19`,icon:`_icon_1ddpd_37`,eyeButton:`_eyeButton_1ddpd_46`,inputWithIcon:`_inputWithIcon_1ddpd_63`,sm:`_sm_1ddpd_72`,lg:`_lg_1ddpd_92`,xl:`_xl_1ddpd_112`};function _({size:e=`lg`,icon:t,password:n=!1,className:r,...i}){let[a,o]=(0,l.useState)(!1),s=e?g[e]:``,c=n?a?`text`:`password`:i.type||`text`;return t||n?(0,m.jsxs)(`div`,{className:`${g.inputWrapper}`,children:[t&&(0,m.jsx)(`span`,{className:g.icon,children:t}),(0,m.jsx)(`input`,{type:c,className:`${g.inputWithIcon} ${s} ${r||``}`,...i}),n&&(0,m.jsx)(`button`,{type:`button`,className:g.eyeButton,onClick:()=>o(!a),"aria-label":a?`Ocultar contraseña`:`Mostrar contraseña`,children:a?(0,m.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,m.jsx)(`path`,{d:`M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24`}),(0,m.jsx)(`line`,{x1:`2`,y1:`2`,x2:`22`,y2:`22`})]}):(0,m.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,m.jsx)(`path`,{d:`M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z`}),(0,m.jsx)(`circle`,{cx:`12`,cy:`12`,r:`3`})]})})]}):(0,m.jsx)(`input`,{type:c,className:`${g.input} ${s} ${r||``}`,...i})}var v={card:`_card_w8zkq_1`,dashed:`_dashed_w8zkq_9`};function y({children:e,dashed:t=!1,className:n,...r}){return(0,m.jsx)(`div`,{className:`${v.card} ${t?v.dashed:``} ${n||``}`,...r,children:e})}var b={overlay:`_overlay_1qbeq_1`,sheet:`_sheet_1qbeq_8`,right:`_right_1qbeq_18`,left:`_left_1qbeq_25`,top:`_top_1qbeq_32`,bottom:`_bottom_1qbeq_39`,sm:`_sm_1qbeq_46`,md:`_md_1qbeq_52`,lg:`_lg_1qbeq_58`,xl:`_xl_1qbeq_64`,full:`_full_1qbeq_70`,closeButton:`_closeButton_1qbeq_109`},x={header:`_header_1pbdy_1`,content:`_content_1pbdy_9`,title:`_title_1pbdy_15`,description:`_description_1pbdy_23`,closeButton:`_closeButton_1pbdy_30`},S=(0,l.createContext)(null);function C({title:e,description:t,showCloseButton:n=!1,className:r,...i}){let a=(0,l.useContext)(S);if(!a)throw Error(`HeroSheet must be used within a Sheet component`);return(0,m.jsx)(`div`,{className:`${x.heroSheet} ${r||``}`,...i,children:(0,m.jsxs)(`div`,{className:x.header,children:[(0,m.jsxs)(`div`,{className:x.content,children:[(0,m.jsx)(`h2`,{className:x.title,children:e}),t&&(0,m.jsx)(`p`,{className:x.description,children:t})]}),n&&(0,m.jsx)(`button`,{className:x.closeButton,onClick:a.onClose,"aria-label":`Close`,children:(0,m.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,className:`lucide lucide-x-icon lucide-x`,children:[(0,m.jsx)(`path`,{d:`M18 6 6 18`}),(0,m.jsx)(`path`,{d:`m6 6 12 12`})]})})]})})}function w({children:e,side:t=`right`,width:n=`md`,className:r,...i}){let[a,o]=(0,l.useState)(!1),s=(0,l.useRef)(null),c=(0,l.useRef)(null);(0,l.useEffect)(()=>(a?(document.body.style.overflow=`hidden`,d()):document.body.style.overflow=`unset`,()=>{document.body.style.overflow=`unset`}),[a]);let d=()=>{!s.current||!c.current||(u.default.fromTo(s.current,{opacity:0},{opacity:1,duration:.2,ease:`power2.out`}),u.default.fromTo(c.current,{right:{x:`100%`},left:{x:`-100%`},top:{y:`-100%`},bottom:{y:`100%`}}[t],{x:0,y:0,duration:.3,ease:`power2.out`}))},f=()=>{!s.current||!c.current||(u.default.to(s.current,{opacity:0,duration:.3,ease:`power2.in`}),u.default.to(c.current,{...{right:{x:`100%`},left:{x:`-100%`},top:{y:`-100%`},bottom:{y:`100%`}}[t],duration:.3,ease:`power2.in`,onComplete:()=>o(!1)}))},p=()=>{f()},h=l.Children.toArray(e),g=h[0],_=h.slice(1);return(0,m.jsxs)(m.Fragment,{children:[(0,l.isValidElement)(g)?(0,l.cloneElement)(g,{onClick:()=>o(!0)}):g,a&&(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`div`,{ref:s,className:b.overlay,onClick:p}),(0,m.jsx)(`div`,{ref:c,className:`${b.sheet} ${b[t]} ${b[n]} ${r||``}`,...i,children:(0,m.jsx)(S.Provider,{value:{onClose:p},children:_})})]})]})}var T={content:`_content_n86ez_1`};function E({children:e,className:t,...n}){return(0,m.jsx)(`div`,{className:`${T.content} ${t||``}`,...n,children:e})}var D={footer:`_footer_e6jod_1`};function O({children:e,className:t,...n}){return(0,m.jsx)(`div`,{className:`${D.footer} ${t||``}`,...n,children:e})}var k={overlay:`_overlay_160jk_1`,modal:`_modal_160jk_11`},A=(0,l.createContext)(null);function j({children:e,className:t,...n}){let[r,i]=(0,l.useState)(!1),a=(0,l.useRef)(null),o=(0,l.useRef)(null);(0,l.useEffect)(()=>(r?(document.body.style.overflow=`hidden`,s()):document.body.style.overflow=`unset`,()=>{document.body.style.overflow=`unset`}),[r]);let s=()=>{!a.current||!o.current||(u.default.fromTo(a.current,{opacity:0},{opacity:1,duration:.3,ease:`power2.out`}),u.default.fromTo(o.current,{opacity:0,scale:.9,y:20},{opacity:1,scale:1,y:0,duration:.4,ease:`back.out(1.7)`}))},c=()=>{!a.current||!o.current||(u.default.to(a.current,{opacity:0,duration:.25,ease:`power2.in`}),u.default.to(o.current,{opacity:0,scale:.95,y:10,duration:.25,ease:`power2.in`,onComplete:()=>i(!1)}))},d=()=>{c()},f=l.Children.toArray(e),p=f[0],h=f.slice(1);return(0,m.jsxs)(m.Fragment,{children:[(0,l.isValidElement)(p)?(0,l.cloneElement)(p,{onClick:()=>i(!0)}):p,r&&(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`div`,{ref:a,className:k.overlay,onClick:d}),(0,m.jsx)(`div`,{ref:o,className:`${k.modal} ${t||``}`,...n,children:(0,m.jsx)(A.Provider,{value:{onClose:d},children:h})})]})]})}var M={header:`_header_52hw4_1`,content:`_content_52hw4_10`,title:`_title_52hw4_16`,description:`_description_52hw4_24`,closeButton:`_closeButton_52hw4_31`};function N({title:e,description:t,showCloseButton:n=!0,className:r,...i}){let a=(0,l.useContext)(A);if(!a)throw Error(`ModalHeader must be used within a Modal component`);return(0,m.jsxs)(`div`,{className:`${M.header} ${r||``}`,...i,children:[(0,m.jsxs)(`div`,{className:M.content,children:[(0,m.jsx)(`h2`,{className:M.title,children:e}),t&&(0,m.jsx)(`p`,{className:M.description,children:t})]}),n&&(0,m.jsx)(`button`,{className:M.closeButton,onClick:a.onClose,"aria-label":`Close`,children:(0,m.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,m.jsx)(`path`,{d:`M18 6 6 18`}),(0,m.jsx)(`path`,{d:`m6 6 12 12`})]})})]})}var P={body:`_body_6i5xc_1`};function F({children:e,className:t,...n}){return(0,m.jsx)(`div`,{className:`${P.body} ${t||``}`,...n,children:e})}var I={content:`_content_5wshu_1`,sm:`_sm_5wshu_7`,md:`_md_5wshu_12`,lg:`_lg_5wshu_17`,xl:`_xl_5wshu_22`};function L({children:e,width:t=`md`,className:n,...r}){return(0,m.jsx)(`div`,{className:`${I.content} ${I[t]} ${n||``}`,...r,children:e})}var R={footer:`_footer_1hqi4_1`};function ee({children:e,className:t,...n}){return(0,m.jsx)(`div`,{className:`${R.footer} ${t||``}`,...n,children:e})}var z={"toast-container":`_toast-container_1rucc_1`,"toast-container--top-left":`_toast-container--top-left_1rucc_7`,"toast-container--top-center":`_toast-container--top-center_1rucc_12`,"toast-container--top-right":`_toast-container--top-right_1rucc_17`,"toast-container--bottom-left":`_toast-container--bottom-left_1rucc_22`,"toast-container--bottom-center":`_toast-container--bottom-center_1rucc_27`,"toast-container--bottom-right":`_toast-container--bottom-right_1rucc_32`,toast:`_toast_1rucc_1`,toast__icon:`_toast__icon_1rucc_81`,toast__message:`_toast__message_1rucc_90`,toast__close:`_toast__close_1rucc_97`,"toast--success":`_toast--success_1rucc_119`,"toast--error":`_toast--error_1rucc_128`,"toast--warning":`_toast--warning_1rucc_137`,"toast--info":`_toast--info_1rucc_146`},te=({id:e,message:t,type:n,duration:r=3e3,onClose:i,isGlobalPaused:a,onHoverChange:o,position:s,zIndex:c})=>{let d=(0,l.useRef)(null),f=(0,l.useRef)(null),p=(0,l.useRef)(Date.now()),h=(0,l.useRef)(r),g=()=>s.includes(`right`)?{from:{x:400,y:0},to:{x:400,y:0}}:s.includes(`left`)?{from:{x:-400,y:0},to:{x:-400,y:0}}:s.includes(`top`)?{from:{x:0,y:-100},to:{x:0,y:-100}}:{from:{x:0,y:100},to:{x:0,y:100}},_=()=>{if(d.current){let t=g();u.default.to(d.current,{x:t.to.x,y:t.to.y,opacity:0,duration:.3,ease:`power2.in`,onComplete:()=>{i(e)}})}};(0,l.useEffect)(()=>{if(d.current){let e=g();u.default.fromTo(d.current,{x:e.from.x,y:e.from.y,opacity:0},{x:0,y:0,opacity:1,duration:.3,ease:`power2.out`})}},[]),(0,l.useEffect)(()=>{if(a){if(f.current){clearTimeout(f.current),f.current=null;let e=Date.now()-p.current;h.current=Math.max(0,h.current-e)}}else p.current=Date.now(),f.current=setTimeout(()=>{_()},h.current);return()=>{f.current&&clearTimeout(f.current)}},[a]);let v={success:(0,m.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,className:`lucide lucide-circle-check-icon lucide-circle-check`,children:[(0,m.jsx)(`circle`,{cx:`12`,cy:`12`,r:`10`}),(0,m.jsx)(`path`,{d:`m9 12 2 2 4-4`})]}),error:(0,m.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,className:`lucide lucide-circle-x-icon lucide-circle-x`,children:[(0,m.jsx)(`circle`,{cx:`12`,cy:`12`,r:`10`}),(0,m.jsx)(`path`,{d:`m15 9-6 6`}),(0,m.jsx)(`path`,{d:`m9 9 6 6`})]}),warning:(0,m.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,className:`lucide lucide-alert-triangle-icon lucide-alert-triangle`,children:[(0,m.jsx)(`path`,{d:`m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z`}),(0,m.jsx)(`path`,{d:`M12 9v4`}),(0,m.jsx)(`path`,{d:`M12 17h.01`})]}),info:(0,m.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,className:`lucide lucide-info-icon lucide-info`,children:[(0,m.jsx)(`circle`,{cx:`12`,cy:`12`,r:`10`}),(0,m.jsx)(`path`,{d:`M12 16v-4`}),(0,m.jsx)(`path`,{d:`M12 8h.01`})]})};return(0,m.jsxs)(`div`,{ref:d,className:`${z.toast} ${z[`toast--${n}`]}`,role:`alert`,style:{zIndex:c},onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),children:[(0,m.jsx)(`span`,{className:z.toast__icon,children:v[n]}),(0,m.jsx)(`span`,{className:z.toast__message,children:t}),(0,m.jsx)(`button`,{className:z.toast__close,onClick:_,"aria-label":`Close`,children:(0,m.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,className:`lucide lucide-x-icon lucide-x`,children:[(0,m.jsx)(`path`,{d:`M18 6 6 18`}),(0,m.jsx)(`path`,{d:`m6 6 12 12`})]})})]})},B=new class{constructor(){this.listeners=[]}on(e,t){this.listeners.push(t)}off(e,t){this.listeners=this.listeners.filter(e=>e!==t)}emit(e,t){this.listeners.forEach(e=>e(t))}},ne=0,V=(e,t,n)=>{let r=`toast-${Date.now()}-${ne++}`;B.emit(`show`,{id:r,message:e,type:t,duration:n})},H={success:(e,t)=>V(e,`success`,t),error:(e,t)=>V(e,`error`,t),warning:(e,t)=>V(e,`warning`,t),info:(e,t)=>V(e,`info`,t)},re=({position:e=`top-right`})=>{let[t,n]=(0,l.useState)([]),[r,i]=(0,l.useState)(!1),a=(0,l.useRef)(null),o=e.startsWith(`bottom`);(0,l.useEffect)(()=>{let e=e=>{n(t=>o?[...t,e]:[e,...t])};return B.on(`show`,e),()=>{B.off(`show`,e)}},[o]),(0,l.useEffect)(()=>{if(!a.current)return;let e=a.current.querySelectorAll(`.${z.toast}`);e.forEach((t,n)=>{let r=t,i;i=o?-(e.length-1-n)*76:n*76,u.default.getProperty(r,`y`)!==i&&u.default.to(r,{y:i,duration:.3,ease:`power2.out`})})},[t,o]);let s=e=>{n(t=>t.filter(t=>t.id!==e))},c=z[`toast-container--${e}`];return(0,m.jsx)(`div`,{ref:a,className:`${z[`toast-container`]} ${c}`,children:t.map((n,a)=>(0,m.jsx)(te,{id:n.id,message:n.message,type:n.type,duration:n.duration,onClose:s,isGlobalPaused:r,onHoverChange:i,position:e,zIndex:t.length-a},n.id))})},U={otpContainer:`_otpContainer_vqdff_1`,otpInput:`_otpInput_vqdff_8`,filled:`_filled_vqdff_31`,disabled:`_disabled_vqdff_36`,sm:`_sm_vqdff_43`,lg:`_lg_vqdff_54`,xl:`_xl_vqdff_65`};function ie({length:e=6,type:t=`number`,onChange:n,onComplete:r,size:i=`lg`,disabled:a=!1,autoFocus:o=!1,value:s,className:c,...u}){let[d,f]=(0,l.useState)(Array(e).fill(``)),p=(0,l.useRef)([]);(0,l.useEffect)(()=>{if(s!==void 0){let t=s.split(``).slice(0,e);f([...t,...Array(e-t.length).fill(``)])}},[s,e]),(0,l.useEffect)(()=>{o&&p.current[0]&&p.current[0].focus()},[o]);let h=e=>t===`number`?/^\d$/.test(e):t===`text`?/^[a-zA-Z]$/.test(e):t===`alphanumeric`?/^[a-zA-Z0-9]$/.test(e):!1,g=(t,i)=>{if(a)return;let o=i.slice(-1);if(i===``||h(o)){let i=[...d];i[t]=o.toUpperCase(),f(i);let a=i.join(``);n?.(a),o&&t<e-1&&p.current[t+1]?.focus(),a.length===e&&i.every(e=>e!==``)&&r?.(a)}},_=(t,r)=>{if(!a){if(r.key===`Backspace`){r.preventDefault();let e=[...d];d[t]?(e[t]=``,f(e),n?.(e.join(``))):t>0&&(e[t-1]=``,f(e),n?.(e.join(``)),p.current[t-1]?.focus())}else if(r.key===`ArrowLeft`&&t>0)r.preventDefault(),p.current[t-1]?.focus();else if(r.key===`ArrowRight`&&t<e-1)r.preventDefault(),p.current[t+1]?.focus();else if(r.key===`Delete`){r.preventDefault();let e=[...d];e[t]=``,f(e),n?.(e.join(``))}}},v=t=>{if(t.preventDefault(),a)return;let i=t.clipboardData.getData(`text/plain`).slice(0,e),o=[...d],s=0;for(let e=0;e<i.length;e++)h(i[e])&&(o[e]=i[e].toUpperCase(),s++);f(o),n?.(o.join(``));let c=Math.min(s,e-1);p.current[c]?.focus(),o.every(e=>e!==``)&&r?.(o.join(``))},y=e=>{p.current[e]?.select()},b=i?U[i]:``;return(0,m.jsx)(`div`,{className:`${U.otpContainer} ${b} ${c||``}`,...u,children:d.map((n,r)=>(0,m.jsx)(`input`,{ref:e=>{p.current[r]=e},type:`text`,inputMode:t===`number`?`numeric`:`text`,maxLength:1,value:n,onChange:e=>g(r,e.target.value),onKeyDown:e=>_(r,e),onPaste:v,onFocus:()=>y(r),disabled:a,className:`${U.otpInput} ${n?U.filled:``} ${a?U.disabled:``}`,"aria-label":`Dígito ${r+1} de ${e}`},r))})}var W={accordion:`_accordion_p5xc9_1`,accordionItem:`_accordionItem_p5xc9_8`,open:`_open_p5xc9_16`,accordionTrigger:`_accordionTrigger_p5xc9_21`,triggerText:`_triggerText_p5xc9_46`,triggerIcon:`_triggerIcon_p5xc9_50`,accordionContent:`_accordionContent_p5xc9_59`,accordionContentInner:`_accordionContentInner_p5xc9_64`,sm:`_sm_p5xc9_71`,lg:`_lg_p5xc9_89`,xl:`_xl_p5xc9_103`},G=(0,l.createContext)(void 0);function ae({children:e,multiple:t=!1,defaultValue:n,size:r=`lg`,className:i,...a}){let[o,s]=(0,l.useState)(()=>n?Array.isArray(n)?n:[n]:[]),c=e=>{s(n=>n.includes(e)?n.filter(t=>t!==e):t?[...n,e]:[e])},u=r?W[r]:``;return(0,m.jsx)(G.Provider,{value:{openItems:o,toggleItem:c,multiple:t},children:(0,m.jsx)(`div`,{className:`${W.accordion} ${u} ${i||``}`,...a,children:e})})}function K(){let e=(0,l.useContext)(G);if(!e)throw Error(`Accordion components must be used within an Accordion`);return e}function oe({value:e,children:t,className:n,...r}){let{openItems:i}=K(),a=i.includes(e);return(0,m.jsx)(`div`,{className:`${W.accordionItem} ${a?W.open:``} ${n||``}`,"data-value":e,...r,children:t})}function se({children:e,icon:t,className:n,...r}){let{openItems:i,toggleItem:a}=K(),o=(0,l.useRef)(null),s=(0,l.useRef)(null),c=o.current?.closest(`[data-value]`)?.getAttribute(`data-value`)||``,d=i.includes(c);return(0,l.useEffect)(()=>{s.current&&u.gsap.to(s.current,{rotation:d?180:0,duration:.3,ease:`power2.out`})},[d]),(0,m.jsxs)(`button`,{ref:o,className:`${W.accordionTrigger} ${n||``}`,onClick:()=>{let e=o.current?.closest(`[data-value]`)?.getAttribute(`data-value`);e&&a(e)},type:`button`,...r,children:[(0,m.jsx)(`span`,{className:W.triggerText,children:e}),(0,m.jsx)(`span`,{ref:s,className:W.triggerIcon,children:t||(0,m.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,m.jsx)(`polyline`,{points:`6 9 12 15 18 9`})})})]})}function ce({children:e,className:t,...n}){let{openItems:r}=K(),i=(0,l.useRef)(null),a=(0,l.useRef)(null),[o,s]=(0,l.useState)(!1),c=(0,l.useRef)(!0);return(0,l.useEffect)(()=>{let e=i.current,t=a.current;if(!e||!t)return;let n=e.closest(`[data-value]`)?.getAttribute(`data-value`)||``,l=r.includes(n);if(c.current){c.current=!1,s(l),l?(e.style.height=`auto`,e.style.overflow=`visible`,u.gsap.set(t,{opacity:1,y:0})):(e.style.height=`0`,u.gsap.set(t,{opacity:0,y:-10}));return}l!==o&&(s(l),l?(u.gsap.to(e,{height:`auto`,duration:.4,ease:`power2.out`,onStart:()=>{e.style.overflow=`hidden`},onComplete:()=>{e.style.overflow=`visible`}}),u.gsap.fromTo(t,{opacity:0,y:-10},{opacity:1,y:0,duration:.3,delay:.1,ease:`power2.out`})):(u.gsap.to(e,{height:0,duration:.3,ease:`power2.in`,onStart:()=>{e.style.overflow=`hidden`}}),u.gsap.to(t,{opacity:0,y:-10,duration:.2,ease:`power2.in`})))},[r,o]),(0,m.jsx)(`div`,{ref:i,className:`${W.accordionContent} ${t||``}`,...n,children:(0,m.jsx)(`div`,{ref:a,className:W.accordionContentInner,children:e})})}var q={badge:`_badge_1p9t7_1`,default:`_default_1p9t7_15`,secondary:`_secondary_1p9t7_21`,destructive:`_destructive_1p9t7_27`};function le({children:e,variant:t=`default`,className:n,...r}){let i=t?q[t]:``;return(0,m.jsx)(`span`,{className:`${q.badge} ${i} ${n||``}`,...r,children:e})}var J={hoverCardWrapper:`_hoverCardWrapper_1cb8v_1`,trigger:`_trigger_1cb8v_7`,bridge:`_bridge_1cb8v_11`,bottom:`_bottom_1cb8v_19`,top:`_top_1cb8v_24`,hoverCard:`_hoverCard_1cb8v_1`};function ue({children:e,trigger:t,delay:n=200,className:r,...i}){let[a,o]=(0,l.useState)(!1),[s,c]=(0,l.useState)(!1),[d,f]=(0,l.useState)(`bottom`),[p,h]=(0,l.useState)(0),g=(0,l.useRef)(null),_=(0,l.useRef)(null),v=(0,l.useRef)(null),y=(0,l.useRef)(null),b=()=>{if(!g.current||!_.current)return{position:`bottom`,offset:0};let e=g.current.getBoundingClientRect(),t=_.current.offsetWidth,n=_.current.offsetHeight,r=window.innerHeight,i=window.innerWidth,a=r-e.bottom,o=e.top,s=`bottom`;s=a>=n+10?`bottom`:o>=n+10?`top`:`bottom`;let c=e.left+e.width/2,l=t/2,u=0,d=c-l,f=c+l;return d<10?u=10-d:f>i-10&&(u=i-10-f),{position:s,offset:u}};return(0,l.useEffect)(()=>{if(a&&_.current){let{position:e,offset:t}=b();f(e),h(t),u.gsap.fromTo(_.current,{opacity:0,y:e===`bottom`?-10:10,scale:.95},{opacity:1,y:0,scale:1,duration:.2,ease:`power2.out`})}else !a&&_.current&&u.gsap.to(_.current,{opacity:0,y:d===`bottom`?-10:10,scale:.95,duration:.15,ease:`power2.in`,onComplete:()=>{c(!1)}})},[a,d]),(0,l.useEffect)(()=>()=>{v.current&&clearTimeout(v.current),y.current&&clearTimeout(y.current)},[]),(0,m.jsxs)(`div`,{className:`${J.hoverCardWrapper} ${r||``}`,onMouseEnter:()=>{y.current&&=(clearTimeout(y.current),null),v.current=setTimeout(()=>{c(!0),o(!0)},n)},onMouseLeave:()=>{v.current&&=(clearTimeout(v.current),null),o(!1)},...i,children:[(0,m.jsx)(`div`,{ref:g,className:J.trigger,children:t}),s&&(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`div`,{className:`${J.bridge} ${J[d]}`}),(0,m.jsx)(`div`,{ref:_,className:`${J.hoverCard} ${J[d]}`,style:{transform:`translateX(calc(-50% + ${p}px))`},role:`tooltip`,children:e})]})]})}var Y={checkboxWrapper:`_checkboxWrapper_1owy4_1`,hiddenInput:`_hiddenInput_1owy4_7`,checkboxLabel:`_checkboxLabel_1owy4_15`,checkbox:`_checkbox_1owy4_1`,checked:`_checked_1owy4_40`,checkmark:`_checkmark_1owy4_45`,labelText:`_labelText_1owy4_52`,disabled:`_disabled_1owy4_58`};function de({checked:e,defaultChecked:t=!1,onChange:n,label:r,disabled:i=!1,id:a,className:o,...s}){let[c,d]=(0,l.useState)(t),f=e!==void 0,p=f?e:c,h=(0,l.useRef)(null),g=(0,l.useRef)(null),_=(0,l.useRef)(null),v=()=>{if(i)return;let e=!p;f||d(e),n?.(e)};(0,l.useEffect)(()=>{!h.current||!g.current||!_.current||(p?(u.gsap.to(h.current,{scale:.9,duration:.1,ease:`power2.in`,onComplete:()=>{u.gsap.to(h.current,{scale:1,duration:.2,ease:`elastic.out(1, 0.5)`})}}),u.gsap.fromTo(g.current,{scale:0,rotation:-45},{scale:1,rotation:0,duration:.3,ease:`back.out(1.7)`}),u.gsap.fromTo(_.current,{strokeDasharray:100,strokeDashoffset:100},{strokeDashoffset:0,duration:.3,ease:`power2.out`})):(u.gsap.to(g.current,{scale:0,rotation:45,duration:.2,ease:`back.in(1.7)`}),u.gsap.to(h.current,{scale:1,duration:.2,ease:`power2.out`})))},[p]);let y=a||`checkbox-${Math.random().toString(36).substr(2,9)}`;return(0,m.jsxs)(`div`,{className:`${Y.checkboxWrapper} ${i?Y.disabled:``} ${o||``}`,children:[(0,m.jsx)(`input`,{type:`checkbox`,id:y,checked:p,onChange:v,disabled:i,className:Y.hiddenInput,...s}),(0,m.jsxs)(`label`,{htmlFor:y,className:Y.checkboxLabel,children:[(0,m.jsx)(`div`,{ref:h,className:`${Y.checkbox} ${p?Y.checked:``}`,children:(0,m.jsx)(`svg`,{ref:g,className:Y.checkmark,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,m.jsx)(`path`,{ref:_,d:`M5 13l4 4L19 7`,stroke:`currentColor`,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`})})}),r&&(0,m.jsx)(`span`,{className:Y.labelText,children:r})]})]})}var X={dropdownWrapper:`_dropdownWrapper_iqkch_1`,trigger:`_trigger_iqkch_7`,dropdownMenu:`_dropdownMenu_iqkch_11`,bottom:`_bottom_iqkch_24`,top:`_top_iqkch_28`,dropdownItem:`_dropdownItem_iqkch_32`,disabled:`_disabled_iqkch_50`,hasSubItems:`_hasSubItems_iqkch_56`,itemContent:`_itemContent_iqkch_60`,arrowIcon:`_arrowIcon_iqkch_64`,subMenu:`_subMenu_iqkch_70`,separator:`_separator_iqkch_84`},Z=(0,l.createContext)(void 0);function fe({children:e,trigger:t,className:n,...r}){let[i,a]=(0,l.useState)(!1),[o,s]=(0,l.useState)(!1),[c,d]=(0,l.useState)(`bottom`),f=(0,l.useRef)(null),p=(0,l.useRef)(null),h=()=>{if(!f.current||!p.current)return`bottom`;let e=f.current.getBoundingClientRect(),t=p.current.offsetHeight,n=window.innerHeight-e.bottom,r=e.top;return n>=t+10?`bottom`:r>=t+10?`top`:`bottom`},g=()=>{i?a(!1):(s(!0),a(!0))},_=()=>{a(!1)};return(0,l.useEffect)(()=>{if(i&&p.current){let e=h();d(e),u.gsap.fromTo(p.current,{opacity:0,y:e===`bottom`?-10:10,scale:.95},{opacity:1,y:0,scale:1,duration:.2,ease:`power2.out`})}else !i&&p.current&&u.gsap.to(p.current,{opacity:0,y:c===`bottom`?-10:10,scale:.95,duration:.15,ease:`power2.in`,onComplete:()=>{s(!1)}})},[i,c]),(0,l.useEffect)(()=>{let e=e=>{f.current&&p.current&&!f.current.contains(e.target)&&!p.current.contains(e.target)&&_()};return i&&document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[i]),(0,m.jsx)(Z.Provider,{value:{isOpen:i,closeMenu:_},children:(0,m.jsxs)(`div`,{className:`${X.dropdownWrapper} ${n||``}`,...r,children:[(0,m.jsx)(`div`,{ref:f,onClick:g,className:X.trigger,children:t}),o&&(0,m.jsx)(`div`,{ref:p,className:`${X.dropdownMenu} ${X[c]}`,children:e})]})})}function pe(){let e=(0,l.useContext)(Z);if(!e)throw Error(`Dropdown components must be used within DropdownMenu`);return e}function me({children:e,onClick:t,disabled:n=!1,subItems:r,className:i,...a}){let{closeMenu:o}=pe(),[s,c]=(0,l.useState)(!1),[d,f]=(0,l.useState)(!1),p=(0,l.useRef)(null),h=(0,l.useRef)(null),g=(0,l.useRef)(null);return(0,l.useEffect)(()=>{s&&h.current?u.gsap.fromTo(h.current,{opacity:0,x:-10,scale:.95},{opacity:1,x:0,scale:1,duration:.2,ease:`power2.out`}):!s&&h.current&&u.gsap.to(h.current,{opacity:0,x:-10,scale:.95,duration:.15,ease:`power2.in`,onComplete:()=>{f(!1)}})},[s]),(0,l.useEffect)(()=>()=>{g.current&&clearTimeout(g.current)},[]),(0,m.jsxs)(`div`,{ref:p,className:`${X.dropdownItem} ${n?X.disabled:``} ${r?X.hasSubItems:``} ${i||``}`,onClick:()=>{n||r||(t?.(),o())},onMouseEnter:()=>{r&&!n&&(g.current=setTimeout(()=>{f(!0),c(!0)},150))},onMouseLeave:()=>{g.current&&clearTimeout(g.current),c(!1)},...a,children:[(0,m.jsx)(`span`,{className:X.itemContent,children:e}),r&&(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`svg`,{className:X.arrowIcon,width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,m.jsx)(`polyline`,{points:`9 18 15 12 9 6`})}),d&&(0,m.jsx)(`div`,{ref:h,className:X.subMenu,children:r})]})]})}function he({}){return(0,m.jsx)(`div`,{className:X.separator})}var Q={tabsContainer:`_tabsContainer_bvqc3_1`,tabsList:`_tabsList_bvqc3_8`,tab:`_tab_bvqc3_1`,active:`_active_bvqc3_37`,indicator:`_indicator_bvqc3_41`};function ge({tabs:e,defaultValue:t,onChange:n,className:r,...i}){let[a,o]=(0,l.useState)(t||e[0]?.value),[s,c]=(0,l.useState)(!0),d=(0,l.useRef)(null),f=(0,l.useRef)(new Map),p=(0,l.useRef)(null),h=e=>{e!==a&&(o(e),n?.(e))};(0,l.useEffect)(()=>{let e=f.current.get(a);if(!e||!d.current)return;let{offsetLeft:t,offsetWidth:n}=e,r=t-6;s?(u.gsap.set(d.current,{x:r,width:n}),c(!1)):u.gsap.to(d.current,{x:r,width:n,duration:.3,ease:`power2.out`})},[a,s]),(0,l.useEffect)(()=>{p.current&&(s?u.gsap.set(p.current,{opacity:1,y:0}):u.gsap.fromTo(p.current,{opacity:0,y:10},{opacity:1,y:0,duration:.3,ease:`power2.out`}))},[a,s]);let g=e.find(e=>e.value===a)?.content;return(0,m.jsxs)(`div`,{className:`${Q.tabsContainer} ${r||``}`,...i,children:[(0,m.jsxs)(`div`,{className:Q.tabsList,children:[e.map(e=>(0,m.jsx)(`button`,{ref:t=>{t&&f.current.set(e.value,t)},className:`${Q.tab} ${a===e.value?Q.active:``}`,onClick:()=>h(e.value),children:e.label},e.value)),(0,m.jsx)(`div`,{ref:d,className:Q.indicator})]}),(0,m.jsx)(`div`,{ref:p,className:Q.tabContent,children:g})]})}var $={tooltipWrapper:`_tooltipWrapper_39a7p_1`,trigger:`_trigger_39a7p_7`,tooltip:`_tooltip_39a7p_1`,top:`_top_39a7p_28`,bottom:`_bottom_39a7p_34`,left:`_left_39a7p_40`,right:`_right_39a7p_46`,arrow:`_arrow_39a7p_52`,"arrow-top":`_arrow-top_39a7p_61`,"arrow-bottom":`_arrow-bottom_39a7p_69`,"arrow-left":`_arrow-left_39a7p_77`,"arrow-right":`_arrow-right_39a7p_85`};function _e({children:e,content:t,position:n=`top`,delay:r=200,className:i,...a}){let[o,s]=(0,l.useState)(!1),[c,d]=(0,l.useState)(!1),[f,p]=(0,l.useState)(n),h=(0,l.useRef)(null),g=(0,l.useRef)(null),_=(0,l.useRef)(null),v=(0,l.useRef)(null),y=()=>{if(!h.current||!g.current)return n;let e=h.current.getBoundingClientRect(),t=g.current.getBoundingClientRect(),r=window.innerWidth,i=window.innerHeight,a={top:{available:e.top>=t.height+12,priority:n===`top`?4:3},bottom:{available:i-e.bottom>=t.height+12,priority:n===`bottom`?4:2},left:{available:e.left>=t.width+12,priority:n===`left`?4:1},right:{available:r-e.right>=t.width+12,priority:n===`right`?4:0}};return Object.keys(a).filter(e=>a[e].available).sort((e,t)=>a[t].priority-a[e].priority)[0]||n};return(0,l.useEffect)(()=>{if(o&&g.current&&_.current){let e=y();p(e);let t=e===`top`||e===`bottom`,n=e===`top`||e===`left`?-1:1;u.gsap.fromTo(g.current,{opacity:0,scale:.8,y:t?n*15:0,x:t?0:n*15,rotateX:t?n*15:0,rotateY:t?0:n*15},{opacity:1,scale:1,y:0,x:0,rotateX:0,rotateY:0,duration:.4,ease:`back.out(1.7)`}),u.gsap.fromTo(_.current,{opacity:0,scale:0},{opacity:1,scale:1,duration:.3,delay:.1,ease:`back.out(2)`})}else if(!o&&g.current&&_.current){let e=f===`top`||f===`bottom`,t=f===`top`||f===`left`?-1:1;u.gsap.to(_.current,{opacity:0,scale:0,duration:.15,ease:`power2.in`}),u.gsap.to(g.current,{opacity:0,scale:.8,y:e?t*10:0,x:e?0:t*10,duration:.2,ease:`power2.in`,onComplete:()=>{d(!1)}})}},[o,f]),(0,l.useEffect)(()=>()=>{v.current&&clearTimeout(v.current)},[]),(0,m.jsxs)(`div`,{className:`${$.tooltipWrapper} ${i||``}`,onMouseEnter:()=>{v.current=setTimeout(()=>{d(!0),s(!0)},r)},onMouseLeave:()=>{v.current&&=(clearTimeout(v.current),null),s(!1)},...a,children:[(0,m.jsx)(`div`,{ref:h,className:$.trigger,children:e}),c&&(0,m.jsxs)(`div`,{ref:g,className:`${$.tooltip} ${$[f]}`,role:`tooltip`,children:[t,(0,m.jsx)(`div`,{ref:_,className:`${$.arrow} ${$[`arrow-${f}`]}`})]})]})}exports.Accordion=ae,exports.AccordionContent=ce,exports.AccordionItem=oe,exports.AccordionTrigger=se,exports.Badge=le,exports.Button=h,exports.Card=y,exports.Checkbox=de,exports.DropdownItem=me,exports.DropdownMenu=fe,exports.DropdownSeparator=he,exports.HeroSheet=C,exports.HoverCard=ue,exports.Input=_,exports.Modal=j,exports.ModalBody=F,exports.ModalContent=L,exports.ModalFooter=ee,exports.ModalHeader=N,exports.OTPInput=ie,exports.Sheet=w,exports.SheetContent=E,exports.SheetFooter=O,exports.Tabs=ge,exports.ToastContainer=re,exports.Tooltip=_e,exports.toast=H;
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
//#region \0rolldown/runtime.js
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
11
|
+
key = keys[i];
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
13
|
+
get: ((k) => from[k]).bind(null, key),
|
|
14
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
20
|
+
value: mod,
|
|
21
|
+
enumerable: true
|
|
22
|
+
}) : target, mod));
|
|
23
|
+
//#endregion
|
|
24
|
+
let react = require("react");
|
|
25
|
+
react = __toESM(react, 1);
|
|
26
|
+
let gsap = require("gsap");
|
|
27
|
+
gsap = __toESM(gsap, 1);
|
|
28
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
+
var Button_module_default = {
|
|
30
|
+
button: "_button_1xsg4_1",
|
|
31
|
+
primary: "_primary_1xsg4_18",
|
|
32
|
+
disabled: "_disabled_1xsg4_23",
|
|
33
|
+
secondary: "_secondary_1xsg4_34",
|
|
34
|
+
warning: "_warning_1xsg4_52",
|
|
35
|
+
error: "_error_1xsg4_68",
|
|
36
|
+
sm: "_sm_1xsg4_92",
|
|
37
|
+
lg: "_lg_1xsg4_103",
|
|
38
|
+
xl: "_xl_1xsg4_114"
|
|
39
|
+
};
|
|
40
|
+
//#endregion
|
|
41
|
+
//#region src/components/button/Button.tsx
|
|
42
|
+
function Button({ text, variant = "primary", size = "lg", onClick, icon, disabled = false, className, ...props }) {
|
|
43
|
+
const buttonRef = (0, react.useRef)(null);
|
|
44
|
+
const handleMouseDown = () => {
|
|
45
|
+
if (disabled || !buttonRef.current) return;
|
|
46
|
+
gsap.gsap.to(buttonRef.current, {
|
|
47
|
+
scale: .96,
|
|
48
|
+
duration: .1,
|
|
49
|
+
ease: "power2.in"
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
const handleMouseUp = () => {
|
|
53
|
+
if (disabled || !buttonRef.current) return;
|
|
54
|
+
gsap.gsap.to(buttonRef.current, {
|
|
55
|
+
scale: 1,
|
|
56
|
+
duration: .2,
|
|
57
|
+
ease: "back.out(1.7)"
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
const handleClick = () => {
|
|
61
|
+
if (disabled) return;
|
|
62
|
+
onClick?.();
|
|
63
|
+
};
|
|
64
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
|
|
65
|
+
ref: buttonRef,
|
|
66
|
+
onClick: handleClick,
|
|
67
|
+
onMouseDown: handleMouseDown,
|
|
68
|
+
onMouseUp: handleMouseUp,
|
|
69
|
+
disabled,
|
|
70
|
+
className: `${Button_module_default.button} ${Button_module_default[variant]} ${size ? Button_module_default[size] : ""} ${disabled ? Button_module_default.disabled : ""} ${className || ""}`,
|
|
71
|
+
...props,
|
|
72
|
+
children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
73
|
+
className: Button_module_default.icon,
|
|
74
|
+
children: icon
|
|
75
|
+
}), text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
76
|
+
className: Button_module_default.text,
|
|
77
|
+
children: text
|
|
78
|
+
})]
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
var Input_module_default = {
|
|
82
|
+
input: "_input_1ddpd_1",
|
|
83
|
+
inputWrapper: "_inputWrapper_1ddpd_19",
|
|
84
|
+
icon: "_icon_1ddpd_37",
|
|
85
|
+
eyeButton: "_eyeButton_1ddpd_46",
|
|
86
|
+
inputWithIcon: "_inputWithIcon_1ddpd_63",
|
|
87
|
+
sm: "_sm_1ddpd_72",
|
|
88
|
+
lg: "_lg_1ddpd_92",
|
|
89
|
+
xl: "_xl_1ddpd_112"
|
|
90
|
+
};
|
|
91
|
+
//#endregion
|
|
92
|
+
//#region src/components/input/Input.tsx
|
|
93
|
+
function Input({ size = "lg", icon, password = false, className, ...props }) {
|
|
94
|
+
const [showPassword, setShowPassword] = (0, react.useState)(false);
|
|
95
|
+
const sizeClass = size ? Input_module_default[size] : "";
|
|
96
|
+
const inputType = password ? showPassword ? "text" : "password" : props.type || "text";
|
|
97
|
+
if (icon || password) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
98
|
+
className: `${Input_module_default.inputWrapper}`,
|
|
99
|
+
children: [
|
|
100
|
+
icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
101
|
+
className: Input_module_default.icon,
|
|
102
|
+
children: icon
|
|
103
|
+
}),
|
|
104
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
|
|
105
|
+
type: inputType,
|
|
106
|
+
className: `${Input_module_default.inputWithIcon} ${sizeClass} ${className || ""}`,
|
|
107
|
+
...props
|
|
108
|
+
}),
|
|
109
|
+
password && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
110
|
+
type: "button",
|
|
111
|
+
className: Input_module_default.eyeButton,
|
|
112
|
+
onClick: () => setShowPassword(!showPassword),
|
|
113
|
+
"aria-label": showPassword ? "Ocultar contraseña" : "Mostrar contraseña",
|
|
114
|
+
children: showPassword ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
115
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
116
|
+
width: "20",
|
|
117
|
+
height: "20",
|
|
118
|
+
viewBox: "0 0 24 24",
|
|
119
|
+
fill: "none",
|
|
120
|
+
stroke: "currentColor",
|
|
121
|
+
strokeWidth: "2",
|
|
122
|
+
strokeLinecap: "round",
|
|
123
|
+
strokeLinejoin: "round",
|
|
124
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
|
|
125
|
+
x1: "2",
|
|
126
|
+
y1: "2",
|
|
127
|
+
x2: "22",
|
|
128
|
+
y2: "22"
|
|
129
|
+
})]
|
|
130
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
131
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
132
|
+
width: "20",
|
|
133
|
+
height: "20",
|
|
134
|
+
viewBox: "0 0 24 24",
|
|
135
|
+
fill: "none",
|
|
136
|
+
stroke: "currentColor",
|
|
137
|
+
strokeWidth: "2",
|
|
138
|
+
strokeLinecap: "round",
|
|
139
|
+
strokeLinejoin: "round",
|
|
140
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
141
|
+
cx: "12",
|
|
142
|
+
cy: "12",
|
|
143
|
+
r: "3"
|
|
144
|
+
})]
|
|
145
|
+
})
|
|
146
|
+
})
|
|
147
|
+
]
|
|
148
|
+
});
|
|
149
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
|
|
150
|
+
type: inputType,
|
|
151
|
+
className: `${Input_module_default.input} ${sizeClass} ${className || ""}`,
|
|
152
|
+
...props
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
var Card_module_default = {
|
|
156
|
+
card: "_card_w8zkq_1",
|
|
157
|
+
dashed: "_dashed_w8zkq_9"
|
|
158
|
+
};
|
|
159
|
+
//#endregion
|
|
160
|
+
//#region src/components/card/Card.tsx
|
|
161
|
+
function Card({ children, dashed = false, className, ...props }) {
|
|
162
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
163
|
+
className: `${Card_module_default.card} ${dashed ? Card_module_default.dashed : ""} ${className || ""}`,
|
|
164
|
+
...props,
|
|
165
|
+
children
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
var Sheet_module_default = {
|
|
169
|
+
overlay: "_overlay_1qbeq_1",
|
|
170
|
+
sheet: "_sheet_1qbeq_8",
|
|
171
|
+
right: "_right_1qbeq_18",
|
|
172
|
+
left: "_left_1qbeq_25",
|
|
173
|
+
top: "_top_1qbeq_32",
|
|
174
|
+
bottom: "_bottom_1qbeq_39",
|
|
175
|
+
sm: "_sm_1qbeq_46",
|
|
176
|
+
md: "_md_1qbeq_52",
|
|
177
|
+
lg: "_lg_1qbeq_58",
|
|
178
|
+
xl: "_xl_1qbeq_64",
|
|
179
|
+
full: "_full_1qbeq_70",
|
|
180
|
+
closeButton: "_closeButton_1qbeq_109"
|
|
181
|
+
};
|
|
182
|
+
var HeroSheet_module_default = {
|
|
183
|
+
header: "_header_1pbdy_1",
|
|
184
|
+
content: "_content_1pbdy_9",
|
|
185
|
+
title: "_title_1pbdy_15",
|
|
186
|
+
description: "_description_1pbdy_23",
|
|
187
|
+
closeButton: "_closeButton_1pbdy_30"
|
|
188
|
+
};
|
|
189
|
+
//#endregion
|
|
190
|
+
//#region src/components/sheet/HeroSheet.tsx
|
|
191
|
+
var SheetContext = (0, react.createContext)(null);
|
|
192
|
+
function HeroSheet({ title, description, showCloseButton = false, className, ...props }) {
|
|
193
|
+
const context = (0, react.useContext)(SheetContext);
|
|
194
|
+
if (!context) throw new Error("HeroSheet must be used within a Sheet component");
|
|
195
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
196
|
+
className: `${HeroSheet_module_default.heroSheet} ${className || ""}`,
|
|
197
|
+
...props,
|
|
198
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
199
|
+
className: HeroSheet_module_default.header,
|
|
200
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
201
|
+
className: HeroSheet_module_default.content,
|
|
202
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
|
|
203
|
+
className: HeroSheet_module_default.title,
|
|
204
|
+
children: title
|
|
205
|
+
}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
206
|
+
className: HeroSheet_module_default.description,
|
|
207
|
+
children: description
|
|
208
|
+
})]
|
|
209
|
+
}), showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
210
|
+
className: HeroSheet_module_default.closeButton,
|
|
211
|
+
onClick: context.onClose,
|
|
212
|
+
"aria-label": "Close",
|
|
213
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
214
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
215
|
+
width: "24",
|
|
216
|
+
height: "24",
|
|
217
|
+
viewBox: "0 0 24 24",
|
|
218
|
+
fill: "none",
|
|
219
|
+
stroke: "currentColor",
|
|
220
|
+
"stroke-width": "2",
|
|
221
|
+
"stroke-linecap": "round",
|
|
222
|
+
"stroke-linejoin": "round",
|
|
223
|
+
className: "lucide lucide-x-icon lucide-x",
|
|
224
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
|
|
225
|
+
})
|
|
226
|
+
})]
|
|
227
|
+
})
|
|
228
|
+
});
|
|
229
|
+
}
|
|
230
|
+
//#endregion
|
|
231
|
+
//#region src/components/sheet/Sheet.tsx
|
|
232
|
+
function Sheet({ children, side = "right", width = "md", className, ...props }) {
|
|
233
|
+
const [isOpen, setIsOpen] = (0, react.useState)(false);
|
|
234
|
+
const overlayRef = (0, react.useRef)(null);
|
|
235
|
+
const sheetRef = (0, react.useRef)(null);
|
|
236
|
+
(0, react.useEffect)(() => {
|
|
237
|
+
if (isOpen) {
|
|
238
|
+
document.body.style.overflow = "hidden";
|
|
239
|
+
animateIn();
|
|
240
|
+
} else document.body.style.overflow = "unset";
|
|
241
|
+
return () => {
|
|
242
|
+
document.body.style.overflow = "unset";
|
|
243
|
+
};
|
|
244
|
+
}, [isOpen]);
|
|
245
|
+
const animateIn = () => {
|
|
246
|
+
if (!overlayRef.current || !sheetRef.current) return;
|
|
247
|
+
gsap.default.fromTo(overlayRef.current, { opacity: 0 }, {
|
|
248
|
+
opacity: 1,
|
|
249
|
+
duration: .2,
|
|
250
|
+
ease: "power2.out"
|
|
251
|
+
});
|
|
252
|
+
gsap.default.fromTo(sheetRef.current, {
|
|
253
|
+
right: { x: "100%" },
|
|
254
|
+
left: { x: "-100%" },
|
|
255
|
+
top: { y: "-100%" },
|
|
256
|
+
bottom: { y: "100%" }
|
|
257
|
+
}[side], {
|
|
258
|
+
x: 0,
|
|
259
|
+
y: 0,
|
|
260
|
+
duration: .3,
|
|
261
|
+
ease: "power2.out"
|
|
262
|
+
});
|
|
263
|
+
};
|
|
264
|
+
const animateOut = () => {
|
|
265
|
+
if (!overlayRef.current || !sheetRef.current) return;
|
|
266
|
+
gsap.default.to(overlayRef.current, {
|
|
267
|
+
opacity: 0,
|
|
268
|
+
duration: .3,
|
|
269
|
+
ease: "power2.in"
|
|
270
|
+
});
|
|
271
|
+
gsap.default.to(sheetRef.current, {
|
|
272
|
+
...{
|
|
273
|
+
right: { x: "100%" },
|
|
274
|
+
left: { x: "-100%" },
|
|
275
|
+
top: { y: "-100%" },
|
|
276
|
+
bottom: { y: "100%" }
|
|
277
|
+
}[side],
|
|
278
|
+
duration: .3,
|
|
279
|
+
ease: "power2.in",
|
|
280
|
+
onComplete: () => setIsOpen(false)
|
|
281
|
+
});
|
|
282
|
+
};
|
|
283
|
+
const handleClose = () => {
|
|
284
|
+
animateOut();
|
|
285
|
+
};
|
|
286
|
+
const childrenArray = react.Children.toArray(children);
|
|
287
|
+
const trigger = childrenArray[0];
|
|
288
|
+
const content = childrenArray.slice(1);
|
|
289
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.isValidElement)(trigger) ? (0, react.cloneElement)(trigger, { onClick: () => setIsOpen(true) }) : trigger, isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
290
|
+
ref: overlayRef,
|
|
291
|
+
className: Sheet_module_default.overlay,
|
|
292
|
+
onClick: handleClose
|
|
293
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
294
|
+
ref: sheetRef,
|
|
295
|
+
className: `${Sheet_module_default.sheet} ${Sheet_module_default[side]} ${Sheet_module_default[width]} ${className || ""}`,
|
|
296
|
+
...props,
|
|
297
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetContext.Provider, {
|
|
298
|
+
value: { onClose: handleClose },
|
|
299
|
+
children: content
|
|
300
|
+
})
|
|
301
|
+
})] })] });
|
|
302
|
+
}
|
|
303
|
+
var SheetContent_module_default = { content: "_content_n86ez_1" };
|
|
304
|
+
//#endregion
|
|
305
|
+
//#region src/components/sheet/SheetContent.tsx
|
|
306
|
+
function SheetContent({ children, className, ...props }) {
|
|
307
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
308
|
+
className: `${SheetContent_module_default.content} ${className || ""}`,
|
|
309
|
+
...props,
|
|
310
|
+
children
|
|
311
|
+
});
|
|
312
|
+
}
|
|
313
|
+
var SheetFooter_module_default = { footer: "_footer_e6jod_1" };
|
|
314
|
+
//#endregion
|
|
315
|
+
//#region src/components/sheet/SheetFooter.tsx
|
|
316
|
+
function SheetFooter({ children, className, ...props }) {
|
|
317
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
318
|
+
className: `${SheetFooter_module_default.footer} ${className || ""}`,
|
|
319
|
+
...props,
|
|
320
|
+
children
|
|
321
|
+
});
|
|
322
|
+
}
|
|
323
|
+
var Modal_module_default = {
|
|
324
|
+
overlay: "_overlay_160jk_1",
|
|
325
|
+
modal: "_modal_160jk_11"
|
|
326
|
+
};
|
|
327
|
+
//#endregion
|
|
328
|
+
//#region src/components/modal/Modal.tsx
|
|
329
|
+
var ModalContext = (0, react.createContext)(null);
|
|
330
|
+
function Modal({ children, className, ...props }) {
|
|
331
|
+
const [isOpen, setIsOpen] = (0, react.useState)(false);
|
|
332
|
+
const overlayRef = (0, react.useRef)(null);
|
|
333
|
+
const modalRef = (0, react.useRef)(null);
|
|
334
|
+
(0, react.useEffect)(() => {
|
|
335
|
+
if (isOpen) {
|
|
336
|
+
document.body.style.overflow = "hidden";
|
|
337
|
+
animateIn();
|
|
338
|
+
} else document.body.style.overflow = "unset";
|
|
339
|
+
return () => {
|
|
340
|
+
document.body.style.overflow = "unset";
|
|
341
|
+
};
|
|
342
|
+
}, [isOpen]);
|
|
343
|
+
const animateIn = () => {
|
|
344
|
+
if (!overlayRef.current || !modalRef.current) return;
|
|
345
|
+
gsap.default.fromTo(overlayRef.current, { opacity: 0 }, {
|
|
346
|
+
opacity: 1,
|
|
347
|
+
duration: .3,
|
|
348
|
+
ease: "power2.out"
|
|
349
|
+
});
|
|
350
|
+
gsap.default.fromTo(modalRef.current, {
|
|
351
|
+
opacity: 0,
|
|
352
|
+
scale: .9,
|
|
353
|
+
y: 20
|
|
354
|
+
}, {
|
|
355
|
+
opacity: 1,
|
|
356
|
+
scale: 1,
|
|
357
|
+
y: 0,
|
|
358
|
+
duration: .4,
|
|
359
|
+
ease: "back.out(1.7)"
|
|
360
|
+
});
|
|
361
|
+
};
|
|
362
|
+
const animateOut = () => {
|
|
363
|
+
if (!overlayRef.current || !modalRef.current) return;
|
|
364
|
+
gsap.default.to(overlayRef.current, {
|
|
365
|
+
opacity: 0,
|
|
366
|
+
duration: .25,
|
|
367
|
+
ease: "power2.in"
|
|
368
|
+
});
|
|
369
|
+
gsap.default.to(modalRef.current, {
|
|
370
|
+
opacity: 0,
|
|
371
|
+
scale: .95,
|
|
372
|
+
y: 10,
|
|
373
|
+
duration: .25,
|
|
374
|
+
ease: "power2.in",
|
|
375
|
+
onComplete: () => setIsOpen(false)
|
|
376
|
+
});
|
|
377
|
+
};
|
|
378
|
+
const handleClose = () => {
|
|
379
|
+
animateOut();
|
|
380
|
+
};
|
|
381
|
+
const childrenArray = react.Children.toArray(children);
|
|
382
|
+
const trigger = childrenArray[0];
|
|
383
|
+
const content = childrenArray.slice(1);
|
|
384
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.isValidElement)(trigger) ? (0, react.cloneElement)(trigger, { onClick: () => setIsOpen(true) }) : trigger, isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
385
|
+
ref: overlayRef,
|
|
386
|
+
className: Modal_module_default.overlay,
|
|
387
|
+
onClick: handleClose
|
|
388
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
389
|
+
ref: modalRef,
|
|
390
|
+
className: `${Modal_module_default.modal} ${className || ""}`,
|
|
391
|
+
...props,
|
|
392
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContext.Provider, {
|
|
393
|
+
value: { onClose: handleClose },
|
|
394
|
+
children: content
|
|
395
|
+
})
|
|
396
|
+
})] })] });
|
|
397
|
+
}
|
|
398
|
+
var ModalHeader_module_default = {
|
|
399
|
+
header: "_header_52hw4_1",
|
|
400
|
+
content: "_content_52hw4_10",
|
|
401
|
+
title: "_title_52hw4_16",
|
|
402
|
+
description: "_description_52hw4_24",
|
|
403
|
+
closeButton: "_closeButton_52hw4_31"
|
|
404
|
+
};
|
|
405
|
+
//#endregion
|
|
406
|
+
//#region src/components/modal/ModalHeader.tsx
|
|
407
|
+
function ModalHeader({ title, description, showCloseButton = true, className, ...props }) {
|
|
408
|
+
const context = (0, react.useContext)(ModalContext);
|
|
409
|
+
if (!context) throw new Error("ModalHeader must be used within a Modal component");
|
|
410
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
411
|
+
className: `${ModalHeader_module_default.header} ${className || ""}`,
|
|
412
|
+
...props,
|
|
413
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
414
|
+
className: ModalHeader_module_default.content,
|
|
415
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
|
|
416
|
+
className: ModalHeader_module_default.title,
|
|
417
|
+
children: title
|
|
418
|
+
}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
419
|
+
className: ModalHeader_module_default.description,
|
|
420
|
+
children: description
|
|
421
|
+
})]
|
|
422
|
+
}), showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
423
|
+
className: ModalHeader_module_default.closeButton,
|
|
424
|
+
onClick: context.onClose,
|
|
425
|
+
"aria-label": "Close",
|
|
426
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
427
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
428
|
+
width: "24",
|
|
429
|
+
height: "24",
|
|
430
|
+
viewBox: "0 0 24 24",
|
|
431
|
+
fill: "none",
|
|
432
|
+
stroke: "currentColor",
|
|
433
|
+
strokeWidth: "2",
|
|
434
|
+
strokeLinecap: "round",
|
|
435
|
+
strokeLinejoin: "round",
|
|
436
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
|
|
437
|
+
})
|
|
438
|
+
})]
|
|
439
|
+
});
|
|
440
|
+
}
|
|
441
|
+
var ModalBody_module_default = { body: "_body_6i5xc_1" };
|
|
442
|
+
//#endregion
|
|
443
|
+
//#region src/components/modal/ModalBody.tsx
|
|
444
|
+
function ModalBody({ children, className, ...props }) {
|
|
445
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
446
|
+
className: `${ModalBody_module_default.body} ${className || ""}`,
|
|
447
|
+
...props,
|
|
448
|
+
children
|
|
449
|
+
});
|
|
450
|
+
}
|
|
451
|
+
var ModalContent_module_default = {
|
|
452
|
+
content: "_content_5wshu_1",
|
|
453
|
+
sm: "_sm_5wshu_7",
|
|
454
|
+
md: "_md_5wshu_12",
|
|
455
|
+
lg: "_lg_5wshu_17",
|
|
456
|
+
xl: "_xl_5wshu_22"
|
|
457
|
+
};
|
|
458
|
+
//#endregion
|
|
459
|
+
//#region src/components/modal/ModalContent.tsx
|
|
460
|
+
function ModalContent({ children, width = "md", className, ...props }) {
|
|
461
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
462
|
+
className: `${ModalContent_module_default.content} ${ModalContent_module_default[width]} ${className || ""}`,
|
|
463
|
+
...props,
|
|
464
|
+
children
|
|
465
|
+
});
|
|
466
|
+
}
|
|
467
|
+
var ModalFooter_module_default = { footer: "_footer_1hqi4_1" };
|
|
468
|
+
//#endregion
|
|
469
|
+
//#region src/components/modal/ModalFooter.tsx
|
|
470
|
+
function ModalFooter({ children, className, ...props }) {
|
|
471
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
472
|
+
className: `${ModalFooter_module_default.footer} ${className || ""}`,
|
|
473
|
+
...props,
|
|
474
|
+
children
|
|
475
|
+
});
|
|
476
|
+
}
|
|
477
|
+
var toast_module_default = {
|
|
478
|
+
"toast-container": "_toast-container_1rucc_1",
|
|
479
|
+
"toast-container--top-left": "_toast-container--top-left_1rucc_7",
|
|
480
|
+
"toast-container--top-center": "_toast-container--top-center_1rucc_12",
|
|
481
|
+
"toast-container--top-right": "_toast-container--top-right_1rucc_17",
|
|
482
|
+
"toast-container--bottom-left": "_toast-container--bottom-left_1rucc_22",
|
|
483
|
+
"toast-container--bottom-center": "_toast-container--bottom-center_1rucc_27",
|
|
484
|
+
"toast-container--bottom-right": "_toast-container--bottom-right_1rucc_32",
|
|
485
|
+
toast: "_toast_1rucc_1",
|
|
486
|
+
toast__icon: "_toast__icon_1rucc_81",
|
|
487
|
+
toast__message: "_toast__message_1rucc_90",
|
|
488
|
+
toast__close: "_toast__close_1rucc_97",
|
|
489
|
+
"toast--success": "_toast--success_1rucc_119",
|
|
490
|
+
"toast--error": "_toast--error_1rucc_128",
|
|
491
|
+
"toast--warning": "_toast--warning_1rucc_137",
|
|
492
|
+
"toast--info": "_toast--info_1rucc_146"
|
|
493
|
+
};
|
|
494
|
+
//#endregion
|
|
495
|
+
//#region src/components/toast/Toast.tsx
|
|
496
|
+
var Toast = ({ id, message, type, duration = 3e3, onClose, isGlobalPaused, onHoverChange, position, zIndex }) => {
|
|
497
|
+
const toastRef = (0, react.useRef)(null);
|
|
498
|
+
const timerRef = (0, react.useRef)(null);
|
|
499
|
+
const startTimeRef = (0, react.useRef)(Date.now());
|
|
500
|
+
const remainingTimeRef = (0, react.useRef)(duration);
|
|
501
|
+
const getAnimationValues = () => {
|
|
502
|
+
if (position.includes("right")) return {
|
|
503
|
+
from: {
|
|
504
|
+
x: 400,
|
|
505
|
+
y: 0
|
|
506
|
+
},
|
|
507
|
+
to: {
|
|
508
|
+
x: 400,
|
|
509
|
+
y: 0
|
|
510
|
+
}
|
|
511
|
+
};
|
|
512
|
+
else if (position.includes("left")) return {
|
|
513
|
+
from: {
|
|
514
|
+
x: -400,
|
|
515
|
+
y: 0
|
|
516
|
+
},
|
|
517
|
+
to: {
|
|
518
|
+
x: -400,
|
|
519
|
+
y: 0
|
|
520
|
+
}
|
|
521
|
+
};
|
|
522
|
+
else if (position.includes("top")) return {
|
|
523
|
+
from: {
|
|
524
|
+
x: 0,
|
|
525
|
+
y: -100
|
|
526
|
+
},
|
|
527
|
+
to: {
|
|
528
|
+
x: 0,
|
|
529
|
+
y: -100
|
|
530
|
+
}
|
|
531
|
+
};
|
|
532
|
+
else return {
|
|
533
|
+
from: {
|
|
534
|
+
x: 0,
|
|
535
|
+
y: 100
|
|
536
|
+
},
|
|
537
|
+
to: {
|
|
538
|
+
x: 0,
|
|
539
|
+
y: 100
|
|
540
|
+
}
|
|
541
|
+
};
|
|
542
|
+
};
|
|
543
|
+
const handleClose = () => {
|
|
544
|
+
if (toastRef.current) {
|
|
545
|
+
const animValues = getAnimationValues();
|
|
546
|
+
gsap.default.to(toastRef.current, {
|
|
547
|
+
x: animValues.to.x,
|
|
548
|
+
y: animValues.to.y,
|
|
549
|
+
opacity: 0,
|
|
550
|
+
duration: .3,
|
|
551
|
+
ease: "power2.in",
|
|
552
|
+
onComplete: () => {
|
|
553
|
+
onClose(id);
|
|
554
|
+
}
|
|
555
|
+
});
|
|
556
|
+
}
|
|
557
|
+
};
|
|
558
|
+
(0, react.useEffect)(() => {
|
|
559
|
+
if (toastRef.current) {
|
|
560
|
+
const animValues = getAnimationValues();
|
|
561
|
+
gsap.default.fromTo(toastRef.current, {
|
|
562
|
+
x: animValues.from.x,
|
|
563
|
+
y: animValues.from.y,
|
|
564
|
+
opacity: 0
|
|
565
|
+
}, {
|
|
566
|
+
x: 0,
|
|
567
|
+
y: 0,
|
|
568
|
+
opacity: 1,
|
|
569
|
+
duration: .3,
|
|
570
|
+
ease: "power2.out"
|
|
571
|
+
});
|
|
572
|
+
}
|
|
573
|
+
}, []);
|
|
574
|
+
(0, react.useEffect)(() => {
|
|
575
|
+
if (isGlobalPaused) {
|
|
576
|
+
if (timerRef.current) {
|
|
577
|
+
clearTimeout(timerRef.current);
|
|
578
|
+
timerRef.current = null;
|
|
579
|
+
const elapsed = Date.now() - startTimeRef.current;
|
|
580
|
+
remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
|
|
581
|
+
}
|
|
582
|
+
} else {
|
|
583
|
+
startTimeRef.current = Date.now();
|
|
584
|
+
timerRef.current = setTimeout(() => {
|
|
585
|
+
handleClose();
|
|
586
|
+
}, remainingTimeRef.current);
|
|
587
|
+
}
|
|
588
|
+
return () => {
|
|
589
|
+
if (timerRef.current) clearTimeout(timerRef.current);
|
|
590
|
+
};
|
|
591
|
+
}, [isGlobalPaused]);
|
|
592
|
+
const icons = {
|
|
593
|
+
success: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
594
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
595
|
+
width: "24",
|
|
596
|
+
height: "24",
|
|
597
|
+
viewBox: "0 0 24 24",
|
|
598
|
+
fill: "none",
|
|
599
|
+
stroke: "currentColor",
|
|
600
|
+
"stroke-width": "2",
|
|
601
|
+
"stroke-linecap": "round",
|
|
602
|
+
"stroke-linejoin": "round",
|
|
603
|
+
className: "lucide lucide-circle-check-icon lucide-circle-check",
|
|
604
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
605
|
+
cx: "12",
|
|
606
|
+
cy: "12",
|
|
607
|
+
r: "10"
|
|
608
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m9 12 2 2 4-4" })]
|
|
609
|
+
}),
|
|
610
|
+
error: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
611
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
612
|
+
width: "24",
|
|
613
|
+
height: "24",
|
|
614
|
+
viewBox: "0 0 24 24",
|
|
615
|
+
fill: "none",
|
|
616
|
+
stroke: "currentColor",
|
|
617
|
+
"stroke-width": "2",
|
|
618
|
+
"stroke-linecap": "round",
|
|
619
|
+
"stroke-linejoin": "round",
|
|
620
|
+
className: "lucide lucide-circle-x-icon lucide-circle-x",
|
|
621
|
+
children: [
|
|
622
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
623
|
+
cx: "12",
|
|
624
|
+
cy: "12",
|
|
625
|
+
r: "10"
|
|
626
|
+
}),
|
|
627
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m15 9-6 6" }),
|
|
628
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m9 9 6 6" })
|
|
629
|
+
]
|
|
630
|
+
}),
|
|
631
|
+
warning: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
632
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
633
|
+
width: "24",
|
|
634
|
+
height: "24",
|
|
635
|
+
viewBox: "0 0 24 24",
|
|
636
|
+
fill: "none",
|
|
637
|
+
stroke: "currentColor",
|
|
638
|
+
"stroke-width": "2",
|
|
639
|
+
"stroke-linecap": "round",
|
|
640
|
+
"stroke-linejoin": "round",
|
|
641
|
+
className: "lucide lucide-alert-triangle-icon lucide-alert-triangle",
|
|
642
|
+
children: [
|
|
643
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
|
|
644
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 9v4" }),
|
|
645
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
|
|
646
|
+
]
|
|
647
|
+
}),
|
|
648
|
+
info: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
649
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
650
|
+
width: "24",
|
|
651
|
+
height: "24",
|
|
652
|
+
viewBox: "0 0 24 24",
|
|
653
|
+
fill: "none",
|
|
654
|
+
stroke: "currentColor",
|
|
655
|
+
"stroke-width": "2",
|
|
656
|
+
"stroke-linecap": "round",
|
|
657
|
+
"stroke-linejoin": "round",
|
|
658
|
+
className: "lucide lucide-info-icon lucide-info",
|
|
659
|
+
children: [
|
|
660
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
661
|
+
cx: "12",
|
|
662
|
+
cy: "12",
|
|
663
|
+
r: "10"
|
|
664
|
+
}),
|
|
665
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 16v-4" }),
|
|
666
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 8h.01" })
|
|
667
|
+
]
|
|
668
|
+
})
|
|
669
|
+
};
|
|
670
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
671
|
+
ref: toastRef,
|
|
672
|
+
className: `${toast_module_default.toast} ${toast_module_default[`toast--${type}`]}`,
|
|
673
|
+
role: "alert",
|
|
674
|
+
style: { zIndex },
|
|
675
|
+
onMouseEnter: () => onHoverChange(true),
|
|
676
|
+
onMouseLeave: () => onHoverChange(false),
|
|
677
|
+
children: [
|
|
678
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
679
|
+
className: toast_module_default.toast__icon,
|
|
680
|
+
children: icons[type]
|
|
681
|
+
}),
|
|
682
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
683
|
+
className: toast_module_default.toast__message,
|
|
684
|
+
children: message
|
|
685
|
+
}),
|
|
686
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
687
|
+
className: toast_module_default.toast__close,
|
|
688
|
+
onClick: handleClose,
|
|
689
|
+
"aria-label": "Close",
|
|
690
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
691
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
692
|
+
width: "24",
|
|
693
|
+
height: "24",
|
|
694
|
+
viewBox: "0 0 24 24",
|
|
695
|
+
fill: "none",
|
|
696
|
+
stroke: "currentColor",
|
|
697
|
+
"stroke-width": "2",
|
|
698
|
+
"stroke-linecap": "round",
|
|
699
|
+
"stroke-linejoin": "round",
|
|
700
|
+
className: "lucide lucide-x-icon lucide-x",
|
|
701
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
|
|
702
|
+
})
|
|
703
|
+
})
|
|
704
|
+
]
|
|
705
|
+
});
|
|
706
|
+
};
|
|
707
|
+
//#endregion
|
|
708
|
+
//#region src/components/toast/toastService.ts
|
|
709
|
+
var ToastEmitter = class {
|
|
710
|
+
constructor() {
|
|
711
|
+
this.listeners = [];
|
|
712
|
+
}
|
|
713
|
+
on(event, listener) {
|
|
714
|
+
this.listeners.push(listener);
|
|
715
|
+
}
|
|
716
|
+
off(event, listener) {
|
|
717
|
+
this.listeners = this.listeners.filter((l) => l !== listener);
|
|
718
|
+
}
|
|
719
|
+
emit(event, toast) {
|
|
720
|
+
this.listeners.forEach((listener) => listener(toast));
|
|
721
|
+
}
|
|
722
|
+
};
|
|
723
|
+
var toastEmitter = new ToastEmitter();
|
|
724
|
+
var toastCounter = 0;
|
|
725
|
+
var showToast = (message, type, duration) => {
|
|
726
|
+
const id = `toast-${Date.now()}-${toastCounter++}`;
|
|
727
|
+
toastEmitter.emit("show", {
|
|
728
|
+
id,
|
|
729
|
+
message,
|
|
730
|
+
type,
|
|
731
|
+
duration
|
|
732
|
+
});
|
|
733
|
+
};
|
|
734
|
+
var toast = {
|
|
735
|
+
success: (message, duration) => showToast(message, "success", duration),
|
|
736
|
+
error: (message, duration) => showToast(message, "error", duration),
|
|
737
|
+
warning: (message, duration) => showToast(message, "warning", duration),
|
|
738
|
+
info: (message, duration) => showToast(message, "info", duration)
|
|
739
|
+
};
|
|
740
|
+
//#endregion
|
|
741
|
+
//#region src/components/toast/ToastContainer.tsx
|
|
742
|
+
var ToastContainer = ({ position = "top-right" }) => {
|
|
743
|
+
const [toasts, setToasts] = (0, react.useState)([]);
|
|
744
|
+
const [isGlobalPaused, setIsGlobalPaused] = (0, react.useState)(false);
|
|
745
|
+
const containerRef = (0, react.useRef)(null);
|
|
746
|
+
const toastHeightWithGap = 76;
|
|
747
|
+
const isBottom = position.startsWith("bottom");
|
|
748
|
+
(0, react.useEffect)(() => {
|
|
749
|
+
const handleToast = (toast) => {
|
|
750
|
+
setToasts((prev) => {
|
|
751
|
+
if (isBottom) return [...prev, toast];
|
|
752
|
+
return [toast, ...prev];
|
|
753
|
+
});
|
|
754
|
+
};
|
|
755
|
+
toastEmitter.on("show", handleToast);
|
|
756
|
+
return () => {
|
|
757
|
+
toastEmitter.off("show", handleToast);
|
|
758
|
+
};
|
|
759
|
+
}, [isBottom]);
|
|
760
|
+
(0, react.useEffect)(() => {
|
|
761
|
+
if (!containerRef.current) return;
|
|
762
|
+
const toastElements = containerRef.current.querySelectorAll(`.${toast_module_default.toast}`);
|
|
763
|
+
toastElements.forEach((element, index) => {
|
|
764
|
+
const htmlElement = element;
|
|
765
|
+
let targetY;
|
|
766
|
+
if (isBottom) targetY = -(toastElements.length - 1 - index) * toastHeightWithGap;
|
|
767
|
+
else targetY = index * toastHeightWithGap;
|
|
768
|
+
if (gsap.default.getProperty(htmlElement, "y") !== targetY) gsap.default.to(htmlElement, {
|
|
769
|
+
y: targetY,
|
|
770
|
+
duration: .3,
|
|
771
|
+
ease: "power2.out"
|
|
772
|
+
});
|
|
773
|
+
});
|
|
774
|
+
}, [toasts, isBottom]);
|
|
775
|
+
const handleClose = (id) => {
|
|
776
|
+
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
777
|
+
};
|
|
778
|
+
const positionClass = toast_module_default[`toast-container--${position}`];
|
|
779
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
780
|
+
ref: containerRef,
|
|
781
|
+
className: `${toast_module_default["toast-container"]} ${positionClass}`,
|
|
782
|
+
children: toasts.map((toast, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toast, {
|
|
783
|
+
id: toast.id,
|
|
784
|
+
message: toast.message,
|
|
785
|
+
type: toast.type,
|
|
786
|
+
duration: toast.duration,
|
|
787
|
+
onClose: handleClose,
|
|
788
|
+
isGlobalPaused,
|
|
789
|
+
onHoverChange: setIsGlobalPaused,
|
|
790
|
+
position,
|
|
791
|
+
zIndex: toasts.length - index
|
|
792
|
+
}, toast.id))
|
|
793
|
+
});
|
|
794
|
+
};
|
|
795
|
+
var OTPInput_module_default = {
|
|
796
|
+
otpContainer: "_otpContainer_vqdff_1",
|
|
797
|
+
otpInput: "_otpInput_vqdff_8",
|
|
798
|
+
filled: "_filled_vqdff_31",
|
|
799
|
+
disabled: "_disabled_vqdff_36",
|
|
800
|
+
sm: "_sm_vqdff_43",
|
|
801
|
+
lg: "_lg_vqdff_54",
|
|
802
|
+
xl: "_xl_vqdff_65"
|
|
803
|
+
};
|
|
804
|
+
//#endregion
|
|
805
|
+
//#region src/components/otp/OTPInput.tsx
|
|
806
|
+
function OTPInput({ length = 6, type = "number", onChange, onComplete, size = "lg", disabled = false, autoFocus = false, value: controlledValue, className, ...props }) {
|
|
807
|
+
const [otp, setOtp] = (0, react.useState)(Array(length).fill(""));
|
|
808
|
+
const inputRefs = (0, react.useRef)([]);
|
|
809
|
+
(0, react.useEffect)(() => {
|
|
810
|
+
if (controlledValue !== void 0) {
|
|
811
|
+
const newOtp = controlledValue.split("").slice(0, length);
|
|
812
|
+
setOtp([...newOtp, ...Array(length - newOtp.length).fill("")]);
|
|
813
|
+
}
|
|
814
|
+
}, [controlledValue, length]);
|
|
815
|
+
(0, react.useEffect)(() => {
|
|
816
|
+
if (autoFocus && inputRefs.current[0]) inputRefs.current[0].focus();
|
|
817
|
+
}, [autoFocus]);
|
|
818
|
+
const validateInput = (char) => {
|
|
819
|
+
if (type === "number") return /^\d$/.test(char);
|
|
820
|
+
else if (type === "text") return /^[a-zA-Z]$/.test(char);
|
|
821
|
+
else if (type === "alphanumeric") return /^[a-zA-Z0-9]$/.test(char);
|
|
822
|
+
return false;
|
|
823
|
+
};
|
|
824
|
+
const handleChange = (index, value) => {
|
|
825
|
+
if (disabled) return;
|
|
826
|
+
const char = value.slice(-1);
|
|
827
|
+
if (value === "" || validateInput(char)) {
|
|
828
|
+
const newOtp = [...otp];
|
|
829
|
+
newOtp[index] = char.toUpperCase();
|
|
830
|
+
setOtp(newOtp);
|
|
831
|
+
const otpValue = newOtp.join("");
|
|
832
|
+
onChange?.(otpValue);
|
|
833
|
+
if (char && index < length - 1) inputRefs.current[index + 1]?.focus();
|
|
834
|
+
if (otpValue.length === length && newOtp.every((digit) => digit !== "")) onComplete?.(otpValue);
|
|
835
|
+
}
|
|
836
|
+
};
|
|
837
|
+
const handleKeyDown = (index, e) => {
|
|
838
|
+
if (disabled) return;
|
|
839
|
+
if (e.key === "Backspace") {
|
|
840
|
+
e.preventDefault();
|
|
841
|
+
const newOtp = [...otp];
|
|
842
|
+
if (otp[index]) {
|
|
843
|
+
newOtp[index] = "";
|
|
844
|
+
setOtp(newOtp);
|
|
845
|
+
onChange?.(newOtp.join(""));
|
|
846
|
+
} else if (index > 0) {
|
|
847
|
+
newOtp[index - 1] = "";
|
|
848
|
+
setOtp(newOtp);
|
|
849
|
+
onChange?.(newOtp.join(""));
|
|
850
|
+
inputRefs.current[index - 1]?.focus();
|
|
851
|
+
}
|
|
852
|
+
} else if (e.key === "ArrowLeft" && index > 0) {
|
|
853
|
+
e.preventDefault();
|
|
854
|
+
inputRefs.current[index - 1]?.focus();
|
|
855
|
+
} else if (e.key === "ArrowRight" && index < length - 1) {
|
|
856
|
+
e.preventDefault();
|
|
857
|
+
inputRefs.current[index + 1]?.focus();
|
|
858
|
+
} else if (e.key === "Delete") {
|
|
859
|
+
e.preventDefault();
|
|
860
|
+
const newOtp = [...otp];
|
|
861
|
+
newOtp[index] = "";
|
|
862
|
+
setOtp(newOtp);
|
|
863
|
+
onChange?.(newOtp.join(""));
|
|
864
|
+
}
|
|
865
|
+
};
|
|
866
|
+
const handlePaste = (e) => {
|
|
867
|
+
e.preventDefault();
|
|
868
|
+
if (disabled) return;
|
|
869
|
+
const pastedData = e.clipboardData.getData("text/plain").slice(0, length);
|
|
870
|
+
const newOtp = [...otp];
|
|
871
|
+
let validChars = 0;
|
|
872
|
+
for (let i = 0; i < pastedData.length; i++) if (validateInput(pastedData[i])) {
|
|
873
|
+
newOtp[i] = pastedData[i].toUpperCase();
|
|
874
|
+
validChars++;
|
|
875
|
+
}
|
|
876
|
+
setOtp(newOtp);
|
|
877
|
+
onChange?.(newOtp.join(""));
|
|
878
|
+
const nextIndex = Math.min(validChars, length - 1);
|
|
879
|
+
inputRefs.current[nextIndex]?.focus();
|
|
880
|
+
if (newOtp.every((digit) => digit !== "")) onComplete?.(newOtp.join(""));
|
|
881
|
+
};
|
|
882
|
+
const handleFocus = (index) => {
|
|
883
|
+
inputRefs.current[index]?.select();
|
|
884
|
+
};
|
|
885
|
+
const sizeClass = size ? OTPInput_module_default[size] : "";
|
|
886
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
887
|
+
className: `${OTPInput_module_default.otpContainer} ${sizeClass} ${className || ""}`,
|
|
888
|
+
...props,
|
|
889
|
+
children: otp.map((digit, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
|
|
890
|
+
ref: (el) => {
|
|
891
|
+
inputRefs.current[index] = el;
|
|
892
|
+
},
|
|
893
|
+
type: "text",
|
|
894
|
+
inputMode: type === "number" ? "numeric" : "text",
|
|
895
|
+
maxLength: 1,
|
|
896
|
+
value: digit,
|
|
897
|
+
onChange: (e) => handleChange(index, e.target.value),
|
|
898
|
+
onKeyDown: (e) => handleKeyDown(index, e),
|
|
899
|
+
onPaste: handlePaste,
|
|
900
|
+
onFocus: () => handleFocus(index),
|
|
901
|
+
disabled,
|
|
902
|
+
className: `${OTPInput_module_default.otpInput} ${digit ? OTPInput_module_default.filled : ""} ${disabled ? OTPInput_module_default.disabled : ""}`,
|
|
903
|
+
"aria-label": `Dígito ${index + 1} de ${length}`
|
|
904
|
+
}, index))
|
|
905
|
+
});
|
|
906
|
+
}
|
|
907
|
+
var Accordion_module_default = {
|
|
908
|
+
accordion: "_accordion_p5xc9_1",
|
|
909
|
+
accordionItem: "_accordionItem_p5xc9_8",
|
|
910
|
+
open: "_open_p5xc9_16",
|
|
911
|
+
accordionTrigger: "_accordionTrigger_p5xc9_21",
|
|
912
|
+
triggerText: "_triggerText_p5xc9_46",
|
|
913
|
+
triggerIcon: "_triggerIcon_p5xc9_50",
|
|
914
|
+
accordionContent: "_accordionContent_p5xc9_59",
|
|
915
|
+
accordionContentInner: "_accordionContentInner_p5xc9_64",
|
|
916
|
+
sm: "_sm_p5xc9_71",
|
|
917
|
+
lg: "_lg_p5xc9_89",
|
|
918
|
+
xl: "_xl_p5xc9_103"
|
|
919
|
+
};
|
|
920
|
+
//#endregion
|
|
921
|
+
//#region src/components/accordion/Accordion.tsx
|
|
922
|
+
var AccordionContext = (0, react.createContext)(void 0);
|
|
923
|
+
function Accordion({ children, multiple = false, defaultValue, size = "lg", className, ...props }) {
|
|
924
|
+
const [openItems, setOpenItems] = (0, react.useState)(() => {
|
|
925
|
+
if (defaultValue) return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
|
|
926
|
+
return [];
|
|
927
|
+
});
|
|
928
|
+
const toggleItem = (value) => {
|
|
929
|
+
setOpenItems((prev) => {
|
|
930
|
+
if (prev.includes(value)) return prev.filter((item) => item !== value);
|
|
931
|
+
else return multiple ? [...prev, value] : [value];
|
|
932
|
+
});
|
|
933
|
+
};
|
|
934
|
+
const sizeClass = size ? Accordion_module_default[size] : "";
|
|
935
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionContext.Provider, {
|
|
936
|
+
value: {
|
|
937
|
+
openItems,
|
|
938
|
+
toggleItem,
|
|
939
|
+
multiple
|
|
940
|
+
},
|
|
941
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
942
|
+
className: `${Accordion_module_default.accordion} ${sizeClass} ${className || ""}`,
|
|
943
|
+
...props,
|
|
944
|
+
children
|
|
945
|
+
})
|
|
946
|
+
});
|
|
947
|
+
}
|
|
948
|
+
function useAccordionContext() {
|
|
949
|
+
const context = (0, react.useContext)(AccordionContext);
|
|
950
|
+
if (!context) throw new Error("Accordion components must be used within an Accordion");
|
|
951
|
+
return context;
|
|
952
|
+
}
|
|
953
|
+
//#endregion
|
|
954
|
+
//#region src/components/accordion/AccordionItem.tsx
|
|
955
|
+
function AccordionItem({ value, children, className, ...props }) {
|
|
956
|
+
const { openItems } = useAccordionContext();
|
|
957
|
+
const isOpen = openItems.includes(value);
|
|
958
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
959
|
+
className: `${Accordion_module_default.accordionItem} ${isOpen ? Accordion_module_default.open : ""} ${className || ""}`,
|
|
960
|
+
"data-value": value,
|
|
961
|
+
...props,
|
|
962
|
+
children
|
|
963
|
+
});
|
|
964
|
+
}
|
|
965
|
+
function AccordionTrigger({ children, icon, className, ...props }) {
|
|
966
|
+
const { openItems, toggleItem } = useAccordionContext();
|
|
967
|
+
const triggerRef = (0, react.useRef)(null);
|
|
968
|
+
const iconRef = (0, react.useRef)(null);
|
|
969
|
+
const value = triggerRef.current?.closest("[data-value]")?.getAttribute("data-value") || "";
|
|
970
|
+
const isOpen = openItems.includes(value);
|
|
971
|
+
(0, react.useEffect)(() => {
|
|
972
|
+
if (iconRef.current) gsap.gsap.to(iconRef.current, {
|
|
973
|
+
rotation: isOpen ? 180 : 0,
|
|
974
|
+
duration: .3,
|
|
975
|
+
ease: "power2.out"
|
|
976
|
+
});
|
|
977
|
+
}, [isOpen]);
|
|
978
|
+
const handleClick = () => {
|
|
979
|
+
const itemValue = triggerRef.current?.closest("[data-value]")?.getAttribute("data-value");
|
|
980
|
+
if (itemValue) toggleItem(itemValue);
|
|
981
|
+
};
|
|
982
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
|
|
983
|
+
ref: triggerRef,
|
|
984
|
+
className: `${Accordion_module_default.accordionTrigger} ${className || ""}`,
|
|
985
|
+
onClick: handleClick,
|
|
986
|
+
type: "button",
|
|
987
|
+
...props,
|
|
988
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
989
|
+
className: Accordion_module_default.triggerText,
|
|
990
|
+
children
|
|
991
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
992
|
+
ref: iconRef,
|
|
993
|
+
className: Accordion_module_default.triggerIcon,
|
|
994
|
+
children: icon || /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
995
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
996
|
+
width: "20",
|
|
997
|
+
height: "20",
|
|
998
|
+
viewBox: "0 0 24 24",
|
|
999
|
+
fill: "none",
|
|
1000
|
+
stroke: "currentColor",
|
|
1001
|
+
strokeWidth: "2",
|
|
1002
|
+
strokeLinecap: "round",
|
|
1003
|
+
strokeLinejoin: "round",
|
|
1004
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "6 9 12 15 18 9" })
|
|
1005
|
+
})
|
|
1006
|
+
})]
|
|
1007
|
+
});
|
|
1008
|
+
}
|
|
1009
|
+
function AccordionContent({ children, className, ...props }) {
|
|
1010
|
+
const { openItems } = useAccordionContext();
|
|
1011
|
+
const contentRef = (0, react.useRef)(null);
|
|
1012
|
+
const innerRef = (0, react.useRef)(null);
|
|
1013
|
+
const [isOpen, setIsOpen] = (0, react.useState)(false);
|
|
1014
|
+
const isFirstRender = (0, react.useRef)(true);
|
|
1015
|
+
(0, react.useEffect)(() => {
|
|
1016
|
+
const content = contentRef.current;
|
|
1017
|
+
const inner = innerRef.current;
|
|
1018
|
+
if (!content || !inner) return;
|
|
1019
|
+
const value = content.closest("[data-value]")?.getAttribute("data-value") || "";
|
|
1020
|
+
const newIsOpen = openItems.includes(value);
|
|
1021
|
+
if (isFirstRender.current) {
|
|
1022
|
+
isFirstRender.current = false;
|
|
1023
|
+
setIsOpen(newIsOpen);
|
|
1024
|
+
if (newIsOpen) {
|
|
1025
|
+
content.style.height = "auto";
|
|
1026
|
+
content.style.overflow = "visible";
|
|
1027
|
+
gsap.gsap.set(inner, {
|
|
1028
|
+
opacity: 1,
|
|
1029
|
+
y: 0
|
|
1030
|
+
});
|
|
1031
|
+
} else {
|
|
1032
|
+
content.style.height = "0";
|
|
1033
|
+
gsap.gsap.set(inner, {
|
|
1034
|
+
opacity: 0,
|
|
1035
|
+
y: -10
|
|
1036
|
+
});
|
|
1037
|
+
}
|
|
1038
|
+
return;
|
|
1039
|
+
}
|
|
1040
|
+
if (newIsOpen !== isOpen) {
|
|
1041
|
+
setIsOpen(newIsOpen);
|
|
1042
|
+
if (newIsOpen) {
|
|
1043
|
+
gsap.gsap.to(content, {
|
|
1044
|
+
height: "auto",
|
|
1045
|
+
duration: .4,
|
|
1046
|
+
ease: "power2.out",
|
|
1047
|
+
onStart: () => {
|
|
1048
|
+
content.style.overflow = "hidden";
|
|
1049
|
+
},
|
|
1050
|
+
onComplete: () => {
|
|
1051
|
+
content.style.overflow = "visible";
|
|
1052
|
+
}
|
|
1053
|
+
});
|
|
1054
|
+
gsap.gsap.fromTo(inner, {
|
|
1055
|
+
opacity: 0,
|
|
1056
|
+
y: -10
|
|
1057
|
+
}, {
|
|
1058
|
+
opacity: 1,
|
|
1059
|
+
y: 0,
|
|
1060
|
+
duration: .3,
|
|
1061
|
+
delay: .1,
|
|
1062
|
+
ease: "power2.out"
|
|
1063
|
+
});
|
|
1064
|
+
} else {
|
|
1065
|
+
gsap.gsap.to(content, {
|
|
1066
|
+
height: 0,
|
|
1067
|
+
duration: .3,
|
|
1068
|
+
ease: "power2.in",
|
|
1069
|
+
onStart: () => {
|
|
1070
|
+
content.style.overflow = "hidden";
|
|
1071
|
+
}
|
|
1072
|
+
});
|
|
1073
|
+
gsap.gsap.to(inner, {
|
|
1074
|
+
opacity: 0,
|
|
1075
|
+
y: -10,
|
|
1076
|
+
duration: .2,
|
|
1077
|
+
ease: "power2.in"
|
|
1078
|
+
});
|
|
1079
|
+
}
|
|
1080
|
+
}
|
|
1081
|
+
}, [openItems, isOpen]);
|
|
1082
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1083
|
+
ref: contentRef,
|
|
1084
|
+
className: `${Accordion_module_default.accordionContent} ${className || ""}`,
|
|
1085
|
+
...props,
|
|
1086
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1087
|
+
ref: innerRef,
|
|
1088
|
+
className: Accordion_module_default.accordionContentInner,
|
|
1089
|
+
children
|
|
1090
|
+
})
|
|
1091
|
+
});
|
|
1092
|
+
}
|
|
1093
|
+
var Badge_module_default = {
|
|
1094
|
+
badge: "_badge_1p9t7_1",
|
|
1095
|
+
"default": "_default_1p9t7_15",
|
|
1096
|
+
secondary: "_secondary_1p9t7_21",
|
|
1097
|
+
destructive: "_destructive_1p9t7_27"
|
|
1098
|
+
};
|
|
1099
|
+
//#endregion
|
|
1100
|
+
//#region src/components/badge/Badge.tsx
|
|
1101
|
+
function Badge({ children, variant = "default", className, ...props }) {
|
|
1102
|
+
const variantClass = variant ? Badge_module_default[variant] : "";
|
|
1103
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
1104
|
+
className: `${Badge_module_default.badge} ${variantClass} ${className || ""}`,
|
|
1105
|
+
...props,
|
|
1106
|
+
children
|
|
1107
|
+
});
|
|
1108
|
+
}
|
|
1109
|
+
var HoverCard_module_default = {
|
|
1110
|
+
hoverCardWrapper: "_hoverCardWrapper_1cb8v_1",
|
|
1111
|
+
trigger: "_trigger_1cb8v_7",
|
|
1112
|
+
bridge: "_bridge_1cb8v_11",
|
|
1113
|
+
bottom: "_bottom_1cb8v_19",
|
|
1114
|
+
top: "_top_1cb8v_24",
|
|
1115
|
+
hoverCard: "_hoverCard_1cb8v_1"
|
|
1116
|
+
};
|
|
1117
|
+
//#endregion
|
|
1118
|
+
//#region src/components/hovercard/HoverCard.tsx
|
|
1119
|
+
function HoverCard({ children, trigger, delay = 200, className, ...props }) {
|
|
1120
|
+
const [isOpen, setIsOpen] = (0, react.useState)(false);
|
|
1121
|
+
const [shouldRender, setShouldRender] = (0, react.useState)(false);
|
|
1122
|
+
const [position, setPosition] = (0, react.useState)("bottom");
|
|
1123
|
+
const [horizontalOffset, setHorizontalOffset] = (0, react.useState)(0);
|
|
1124
|
+
const triggerRef = (0, react.useRef)(null);
|
|
1125
|
+
const cardRef = (0, react.useRef)(null);
|
|
1126
|
+
const timeoutRef = (0, react.useRef)(null);
|
|
1127
|
+
const closeTimeoutRef = (0, react.useRef)(null);
|
|
1128
|
+
const calculatePosition = () => {
|
|
1129
|
+
if (!triggerRef.current || !cardRef.current) return {
|
|
1130
|
+
position: "bottom",
|
|
1131
|
+
offset: 0
|
|
1132
|
+
};
|
|
1133
|
+
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
1134
|
+
const cardWidth = cardRef.current.offsetWidth;
|
|
1135
|
+
const cardHeight = cardRef.current.offsetHeight;
|
|
1136
|
+
const viewportHeight = window.innerHeight;
|
|
1137
|
+
const viewportWidth = window.innerWidth;
|
|
1138
|
+
const spaceBelow = viewportHeight - triggerRect.bottom;
|
|
1139
|
+
const spaceAbove = triggerRect.top;
|
|
1140
|
+
let verticalPosition = "bottom";
|
|
1141
|
+
if (spaceBelow >= cardHeight + 10) verticalPosition = "bottom";
|
|
1142
|
+
else if (spaceAbove >= cardHeight + 10) verticalPosition = "top";
|
|
1143
|
+
else verticalPosition = "bottom";
|
|
1144
|
+
const triggerCenter = triggerRect.left + triggerRect.width / 2;
|
|
1145
|
+
const cardHalfWidth = cardWidth / 2;
|
|
1146
|
+
let offset = 0;
|
|
1147
|
+
const idealLeft = triggerCenter - cardHalfWidth;
|
|
1148
|
+
const idealRight = triggerCenter + cardHalfWidth;
|
|
1149
|
+
if (idealLeft < 10) offset = 10 - idealLeft;
|
|
1150
|
+
else if (idealRight > viewportWidth - 10) offset = viewportWidth - 10 - idealRight;
|
|
1151
|
+
return {
|
|
1152
|
+
position: verticalPosition,
|
|
1153
|
+
offset
|
|
1154
|
+
};
|
|
1155
|
+
};
|
|
1156
|
+
const handleMouseEnter = () => {
|
|
1157
|
+
if (closeTimeoutRef.current) {
|
|
1158
|
+
clearTimeout(closeTimeoutRef.current);
|
|
1159
|
+
closeTimeoutRef.current = null;
|
|
1160
|
+
}
|
|
1161
|
+
timeoutRef.current = setTimeout(() => {
|
|
1162
|
+
setShouldRender(true);
|
|
1163
|
+
setIsOpen(true);
|
|
1164
|
+
}, delay);
|
|
1165
|
+
};
|
|
1166
|
+
const handleMouseLeave = () => {
|
|
1167
|
+
if (timeoutRef.current) {
|
|
1168
|
+
clearTimeout(timeoutRef.current);
|
|
1169
|
+
timeoutRef.current = null;
|
|
1170
|
+
}
|
|
1171
|
+
setIsOpen(false);
|
|
1172
|
+
};
|
|
1173
|
+
(0, react.useEffect)(() => {
|
|
1174
|
+
if (isOpen && cardRef.current) {
|
|
1175
|
+
const { position: newPosition, offset } = calculatePosition();
|
|
1176
|
+
setPosition(newPosition);
|
|
1177
|
+
setHorizontalOffset(offset);
|
|
1178
|
+
gsap.gsap.fromTo(cardRef.current, {
|
|
1179
|
+
opacity: 0,
|
|
1180
|
+
y: newPosition === "bottom" ? -10 : 10,
|
|
1181
|
+
scale: .95
|
|
1182
|
+
}, {
|
|
1183
|
+
opacity: 1,
|
|
1184
|
+
y: 0,
|
|
1185
|
+
scale: 1,
|
|
1186
|
+
duration: .2,
|
|
1187
|
+
ease: "power2.out"
|
|
1188
|
+
});
|
|
1189
|
+
} else if (!isOpen && cardRef.current) gsap.gsap.to(cardRef.current, {
|
|
1190
|
+
opacity: 0,
|
|
1191
|
+
y: position === "bottom" ? -10 : 10,
|
|
1192
|
+
scale: .95,
|
|
1193
|
+
duration: .15,
|
|
1194
|
+
ease: "power2.in",
|
|
1195
|
+
onComplete: () => {
|
|
1196
|
+
setShouldRender(false);
|
|
1197
|
+
}
|
|
1198
|
+
});
|
|
1199
|
+
}, [isOpen, position]);
|
|
1200
|
+
(0, react.useEffect)(() => {
|
|
1201
|
+
return () => {
|
|
1202
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
1203
|
+
if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
|
|
1204
|
+
};
|
|
1205
|
+
}, []);
|
|
1206
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1207
|
+
className: `${HoverCard_module_default.hoverCardWrapper} ${className || ""}`,
|
|
1208
|
+
onMouseEnter: handleMouseEnter,
|
|
1209
|
+
onMouseLeave: handleMouseLeave,
|
|
1210
|
+
...props,
|
|
1211
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1212
|
+
ref: triggerRef,
|
|
1213
|
+
className: HoverCard_module_default.trigger,
|
|
1214
|
+
children: trigger
|
|
1215
|
+
}), shouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${HoverCard_module_default.bridge} ${HoverCard_module_default[position]}` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1216
|
+
ref: cardRef,
|
|
1217
|
+
className: `${HoverCard_module_default.hoverCard} ${HoverCard_module_default[position]}`,
|
|
1218
|
+
style: { transform: `translateX(calc(-50% + ${horizontalOffset}px))` },
|
|
1219
|
+
role: "tooltip",
|
|
1220
|
+
children
|
|
1221
|
+
})] })]
|
|
1222
|
+
});
|
|
1223
|
+
}
|
|
1224
|
+
var Checkbox_module_default = {
|
|
1225
|
+
checkboxWrapper: "_checkboxWrapper_1owy4_1",
|
|
1226
|
+
hiddenInput: "_hiddenInput_1owy4_7",
|
|
1227
|
+
checkboxLabel: "_checkboxLabel_1owy4_15",
|
|
1228
|
+
checkbox: "_checkbox_1owy4_1",
|
|
1229
|
+
checked: "_checked_1owy4_40",
|
|
1230
|
+
checkmark: "_checkmark_1owy4_45",
|
|
1231
|
+
labelText: "_labelText_1owy4_52",
|
|
1232
|
+
disabled: "_disabled_1owy4_58"
|
|
1233
|
+
};
|
|
1234
|
+
//#endregion
|
|
1235
|
+
//#region src/components/checkbox/Checkbox.tsx
|
|
1236
|
+
function Checkbox({ checked: controlledChecked, defaultChecked = false, onChange, label, disabled = false, id, className, ...props }) {
|
|
1237
|
+
const [internalChecked, setInternalChecked] = (0, react.useState)(defaultChecked);
|
|
1238
|
+
const isControlled = controlledChecked !== void 0;
|
|
1239
|
+
const checked = isControlled ? controlledChecked : internalChecked;
|
|
1240
|
+
const checkboxRef = (0, react.useRef)(null);
|
|
1241
|
+
const checkmarkRef = (0, react.useRef)(null);
|
|
1242
|
+
const pathRef = (0, react.useRef)(null);
|
|
1243
|
+
const reactId = (0, react.useId)();
|
|
1244
|
+
const handleChange = () => {
|
|
1245
|
+
if (disabled) return;
|
|
1246
|
+
const newChecked = !checked;
|
|
1247
|
+
if (!isControlled) setInternalChecked(newChecked);
|
|
1248
|
+
onChange?.(newChecked);
|
|
1249
|
+
};
|
|
1250
|
+
(0, react.useEffect)(() => {
|
|
1251
|
+
if (!checkboxRef.current || !checkmarkRef.current || !pathRef.current) return;
|
|
1252
|
+
if (checked) {
|
|
1253
|
+
gsap.gsap.to(checkboxRef.current, {
|
|
1254
|
+
scale: .9,
|
|
1255
|
+
duration: .1,
|
|
1256
|
+
ease: "power2.in",
|
|
1257
|
+
onComplete: () => {
|
|
1258
|
+
gsap.gsap.to(checkboxRef.current, {
|
|
1259
|
+
scale: 1,
|
|
1260
|
+
duration: .2,
|
|
1261
|
+
ease: "elastic.out(1, 0.5)"
|
|
1262
|
+
});
|
|
1263
|
+
}
|
|
1264
|
+
});
|
|
1265
|
+
gsap.gsap.fromTo(checkmarkRef.current, {
|
|
1266
|
+
scale: 0,
|
|
1267
|
+
rotation: -45
|
|
1268
|
+
}, {
|
|
1269
|
+
scale: 1,
|
|
1270
|
+
rotation: 0,
|
|
1271
|
+
duration: .3,
|
|
1272
|
+
ease: "back.out(1.7)"
|
|
1273
|
+
});
|
|
1274
|
+
gsap.gsap.fromTo(pathRef.current, {
|
|
1275
|
+
strokeDasharray: 100,
|
|
1276
|
+
strokeDashoffset: 100
|
|
1277
|
+
}, {
|
|
1278
|
+
strokeDashoffset: 0,
|
|
1279
|
+
duration: .3,
|
|
1280
|
+
ease: "power2.out"
|
|
1281
|
+
});
|
|
1282
|
+
} else {
|
|
1283
|
+
gsap.gsap.to(checkmarkRef.current, {
|
|
1284
|
+
scale: 0,
|
|
1285
|
+
rotation: 45,
|
|
1286
|
+
duration: .2,
|
|
1287
|
+
ease: "back.in(1.7)"
|
|
1288
|
+
});
|
|
1289
|
+
gsap.gsap.to(checkboxRef.current, {
|
|
1290
|
+
scale: 1,
|
|
1291
|
+
duration: .2,
|
|
1292
|
+
ease: "power2.out"
|
|
1293
|
+
});
|
|
1294
|
+
}
|
|
1295
|
+
}, [checked]);
|
|
1296
|
+
const checkboxId = id || `checkbox-${reactId}`;
|
|
1297
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1298
|
+
className: `${Checkbox_module_default.checkboxWrapper} ${disabled ? Checkbox_module_default.disabled : ""} ${className || ""}`,
|
|
1299
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
|
|
1300
|
+
type: "checkbox",
|
|
1301
|
+
id: checkboxId,
|
|
1302
|
+
checked,
|
|
1303
|
+
onChange: handleChange,
|
|
1304
|
+
disabled,
|
|
1305
|
+
className: Checkbox_module_default.hiddenInput,
|
|
1306
|
+
...props
|
|
1307
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
|
|
1308
|
+
htmlFor: checkboxId,
|
|
1309
|
+
className: Checkbox_module_default.checkboxLabel,
|
|
1310
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1311
|
+
ref: checkboxRef,
|
|
1312
|
+
className: `${Checkbox_module_default.checkbox} ${checked ? Checkbox_module_default.checked : ""}`,
|
|
1313
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
1314
|
+
ref: checkmarkRef,
|
|
1315
|
+
className: Checkbox_module_default.checkmark,
|
|
1316
|
+
viewBox: "0 0 24 24",
|
|
1317
|
+
fill: "none",
|
|
1318
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1319
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
1320
|
+
ref: pathRef,
|
|
1321
|
+
d: "M5 13l4 4L19 7",
|
|
1322
|
+
stroke: "currentColor",
|
|
1323
|
+
strokeWidth: "3",
|
|
1324
|
+
strokeLinecap: "round",
|
|
1325
|
+
strokeLinejoin: "round"
|
|
1326
|
+
})
|
|
1327
|
+
})
|
|
1328
|
+
}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
1329
|
+
className: Checkbox_module_default.labelText,
|
|
1330
|
+
children: label
|
|
1331
|
+
})]
|
|
1332
|
+
})]
|
|
1333
|
+
});
|
|
1334
|
+
}
|
|
1335
|
+
var DropdownMenu_module_default = {
|
|
1336
|
+
dropdownWrapper: "_dropdownWrapper_iqkch_1",
|
|
1337
|
+
trigger: "_trigger_iqkch_7",
|
|
1338
|
+
dropdownMenu: "_dropdownMenu_iqkch_11",
|
|
1339
|
+
bottom: "_bottom_iqkch_24",
|
|
1340
|
+
top: "_top_iqkch_28",
|
|
1341
|
+
dropdownItem: "_dropdownItem_iqkch_32",
|
|
1342
|
+
disabled: "_disabled_iqkch_50",
|
|
1343
|
+
hasSubItems: "_hasSubItems_iqkch_56",
|
|
1344
|
+
itemContent: "_itemContent_iqkch_60",
|
|
1345
|
+
arrowIcon: "_arrowIcon_iqkch_64",
|
|
1346
|
+
subMenu: "_subMenu_iqkch_70",
|
|
1347
|
+
separator: "_separator_iqkch_84"
|
|
1348
|
+
};
|
|
1349
|
+
//#endregion
|
|
1350
|
+
//#region src/components/dropdown/DropdownMenu.tsx
|
|
1351
|
+
var DropdownContext = (0, react.createContext)(void 0);
|
|
1352
|
+
function DropdownMenu({ children, trigger, className, ...props }) {
|
|
1353
|
+
const [isOpen, setIsOpen] = (0, react.useState)(false);
|
|
1354
|
+
const [shouldRender, setShouldRender] = (0, react.useState)(false);
|
|
1355
|
+
const [position, setPosition] = (0, react.useState)("bottom");
|
|
1356
|
+
const triggerRef = (0, react.useRef)(null);
|
|
1357
|
+
const menuRef = (0, react.useRef)(null);
|
|
1358
|
+
const calculatePosition = () => {
|
|
1359
|
+
if (!triggerRef.current || !menuRef.current) return "bottom";
|
|
1360
|
+
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
1361
|
+
const menuHeight = menuRef.current.offsetHeight;
|
|
1362
|
+
const spaceBelow = window.innerHeight - triggerRect.bottom;
|
|
1363
|
+
const spaceAbove = triggerRect.top;
|
|
1364
|
+
if (spaceBelow >= menuHeight + 10) return "bottom";
|
|
1365
|
+
else if (spaceAbove >= menuHeight + 10) return "top";
|
|
1366
|
+
else return "bottom";
|
|
1367
|
+
};
|
|
1368
|
+
const toggleMenu = () => {
|
|
1369
|
+
if (!isOpen) {
|
|
1370
|
+
setShouldRender(true);
|
|
1371
|
+
setIsOpen(true);
|
|
1372
|
+
} else setIsOpen(false);
|
|
1373
|
+
};
|
|
1374
|
+
const closeMenu = () => {
|
|
1375
|
+
setIsOpen(false);
|
|
1376
|
+
};
|
|
1377
|
+
(0, react.useEffect)(() => {
|
|
1378
|
+
if (isOpen && menuRef.current) {
|
|
1379
|
+
const newPosition = calculatePosition();
|
|
1380
|
+
setPosition(newPosition);
|
|
1381
|
+
gsap.gsap.fromTo(menuRef.current, {
|
|
1382
|
+
opacity: 0,
|
|
1383
|
+
y: newPosition === "bottom" ? -10 : 10,
|
|
1384
|
+
scale: .95
|
|
1385
|
+
}, {
|
|
1386
|
+
opacity: 1,
|
|
1387
|
+
y: 0,
|
|
1388
|
+
scale: 1,
|
|
1389
|
+
duration: .2,
|
|
1390
|
+
ease: "power2.out"
|
|
1391
|
+
});
|
|
1392
|
+
} else if (!isOpen && menuRef.current) gsap.gsap.to(menuRef.current, {
|
|
1393
|
+
opacity: 0,
|
|
1394
|
+
y: position === "bottom" ? -10 : 10,
|
|
1395
|
+
scale: .95,
|
|
1396
|
+
duration: .15,
|
|
1397
|
+
ease: "power2.in",
|
|
1398
|
+
onComplete: () => {
|
|
1399
|
+
setShouldRender(false);
|
|
1400
|
+
}
|
|
1401
|
+
});
|
|
1402
|
+
}, [isOpen, position]);
|
|
1403
|
+
(0, react.useEffect)(() => {
|
|
1404
|
+
const handleClickOutside = (event) => {
|
|
1405
|
+
if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) closeMenu();
|
|
1406
|
+
};
|
|
1407
|
+
if (isOpen) document.addEventListener("mousedown", handleClickOutside);
|
|
1408
|
+
return () => {
|
|
1409
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
1410
|
+
};
|
|
1411
|
+
}, [isOpen]);
|
|
1412
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownContext.Provider, {
|
|
1413
|
+
value: {
|
|
1414
|
+
isOpen,
|
|
1415
|
+
closeMenu
|
|
1416
|
+
},
|
|
1417
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1418
|
+
className: `${DropdownMenu_module_default.dropdownWrapper} ${className || ""}`,
|
|
1419
|
+
...props,
|
|
1420
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1421
|
+
ref: triggerRef,
|
|
1422
|
+
onClick: toggleMenu,
|
|
1423
|
+
className: DropdownMenu_module_default.trigger,
|
|
1424
|
+
children: trigger
|
|
1425
|
+
}), shouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1426
|
+
ref: menuRef,
|
|
1427
|
+
className: `${DropdownMenu_module_default.dropdownMenu} ${DropdownMenu_module_default[position]}`,
|
|
1428
|
+
children
|
|
1429
|
+
})]
|
|
1430
|
+
})
|
|
1431
|
+
});
|
|
1432
|
+
}
|
|
1433
|
+
function useDropdownContext() {
|
|
1434
|
+
const context = (0, react.useContext)(DropdownContext);
|
|
1435
|
+
if (!context) throw new Error("Dropdown components must be used within DropdownMenu");
|
|
1436
|
+
return context;
|
|
1437
|
+
}
|
|
1438
|
+
function DropdownItem({ children, onClick, disabled = false, subItems, className, ...props }) {
|
|
1439
|
+
const { closeMenu } = useDropdownContext();
|
|
1440
|
+
const [showSubMenu, setShowSubMenu] = (0, react.useState)(false);
|
|
1441
|
+
const [shouldRenderSub, setShouldRenderSub] = (0, react.useState)(false);
|
|
1442
|
+
const itemRef = (0, react.useRef)(null);
|
|
1443
|
+
const subMenuRef = (0, react.useRef)(null);
|
|
1444
|
+
const hoverTimeoutRef = (0, react.useRef)(null);
|
|
1445
|
+
const handleClick = () => {
|
|
1446
|
+
if (disabled) return;
|
|
1447
|
+
if (!subItems) {
|
|
1448
|
+
onClick?.();
|
|
1449
|
+
closeMenu();
|
|
1450
|
+
}
|
|
1451
|
+
};
|
|
1452
|
+
const handleMouseEnter = () => {
|
|
1453
|
+
if (subItems && !disabled) hoverTimeoutRef.current = setTimeout(() => {
|
|
1454
|
+
setShouldRenderSub(true);
|
|
1455
|
+
setShowSubMenu(true);
|
|
1456
|
+
}, 150);
|
|
1457
|
+
};
|
|
1458
|
+
const handleMouseLeave = () => {
|
|
1459
|
+
if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
|
|
1460
|
+
setShowSubMenu(false);
|
|
1461
|
+
};
|
|
1462
|
+
(0, react.useEffect)(() => {
|
|
1463
|
+
if (showSubMenu && subMenuRef.current) gsap.gsap.fromTo(subMenuRef.current, {
|
|
1464
|
+
opacity: 0,
|
|
1465
|
+
x: -10,
|
|
1466
|
+
scale: .95
|
|
1467
|
+
}, {
|
|
1468
|
+
opacity: 1,
|
|
1469
|
+
x: 0,
|
|
1470
|
+
scale: 1,
|
|
1471
|
+
duration: .2,
|
|
1472
|
+
ease: "power2.out"
|
|
1473
|
+
});
|
|
1474
|
+
else if (!showSubMenu && subMenuRef.current) gsap.gsap.to(subMenuRef.current, {
|
|
1475
|
+
opacity: 0,
|
|
1476
|
+
x: -10,
|
|
1477
|
+
scale: .95,
|
|
1478
|
+
duration: .15,
|
|
1479
|
+
ease: "power2.in",
|
|
1480
|
+
onComplete: () => {
|
|
1481
|
+
setShouldRenderSub(false);
|
|
1482
|
+
}
|
|
1483
|
+
});
|
|
1484
|
+
}, [showSubMenu]);
|
|
1485
|
+
(0, react.useEffect)(() => {
|
|
1486
|
+
return () => {
|
|
1487
|
+
if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
|
|
1488
|
+
};
|
|
1489
|
+
}, []);
|
|
1490
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1491
|
+
ref: itemRef,
|
|
1492
|
+
className: `${DropdownMenu_module_default.dropdownItem} ${disabled ? DropdownMenu_module_default.disabled : ""} ${subItems ? DropdownMenu_module_default.hasSubItems : ""} ${className || ""}`,
|
|
1493
|
+
onClick: handleClick,
|
|
1494
|
+
onMouseEnter: handleMouseEnter,
|
|
1495
|
+
onMouseLeave: handleMouseLeave,
|
|
1496
|
+
...props,
|
|
1497
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
1498
|
+
className: DropdownMenu_module_default.itemContent,
|
|
1499
|
+
children
|
|
1500
|
+
}), subItems && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
1501
|
+
className: DropdownMenu_module_default.arrowIcon,
|
|
1502
|
+
width: "16",
|
|
1503
|
+
height: "16",
|
|
1504
|
+
viewBox: "0 0 24 24",
|
|
1505
|
+
fill: "none",
|
|
1506
|
+
stroke: "currentColor",
|
|
1507
|
+
strokeWidth: "2",
|
|
1508
|
+
strokeLinecap: "round",
|
|
1509
|
+
strokeLinejoin: "round",
|
|
1510
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "9 18 15 12 9 6" })
|
|
1511
|
+
}), shouldRenderSub && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1512
|
+
ref: subMenuRef,
|
|
1513
|
+
className: DropdownMenu_module_default.subMenu,
|
|
1514
|
+
children: subItems
|
|
1515
|
+
})] })]
|
|
1516
|
+
});
|
|
1517
|
+
}
|
|
1518
|
+
function DropdownSeparator({}) {
|
|
1519
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: DropdownMenu_module_default.separator });
|
|
1520
|
+
}
|
|
1521
|
+
var Tabs_module_default = {
|
|
1522
|
+
tabsContainer: "_tabsContainer_bvqc3_1",
|
|
1523
|
+
tabsList: "_tabsList_bvqc3_8",
|
|
1524
|
+
tab: "_tab_bvqc3_1",
|
|
1525
|
+
active: "_active_bvqc3_37",
|
|
1526
|
+
indicator: "_indicator_bvqc3_41"
|
|
1527
|
+
};
|
|
1528
|
+
//#endregion
|
|
1529
|
+
//#region src/components/tabs/Tabs.tsx
|
|
1530
|
+
function Tabs({ tabs, defaultValue, onChange, className, ...props }) {
|
|
1531
|
+
const [activeTab, setActiveTab] = (0, react.useState)(defaultValue || tabs[0]?.value);
|
|
1532
|
+
const [isFirstRender, setIsFirstRender] = (0, react.useState)(true);
|
|
1533
|
+
const indicatorRef = (0, react.useRef)(null);
|
|
1534
|
+
const tabRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
|
|
1535
|
+
const contentRef = (0, react.useRef)(null);
|
|
1536
|
+
const handleTabClick = (value) => {
|
|
1537
|
+
if (value === activeTab) return;
|
|
1538
|
+
setActiveTab(value);
|
|
1539
|
+
onChange?.(value);
|
|
1540
|
+
};
|
|
1541
|
+
(0, react.useEffect)(() => {
|
|
1542
|
+
const activeTabElement = tabRefs.current.get(activeTab);
|
|
1543
|
+
if (!activeTabElement || !indicatorRef.current) return;
|
|
1544
|
+
const { offsetLeft, offsetWidth } = activeTabElement;
|
|
1545
|
+
const indicatorOffset = offsetLeft - 6;
|
|
1546
|
+
if (isFirstRender) {
|
|
1547
|
+
gsap.gsap.set(indicatorRef.current, {
|
|
1548
|
+
x: indicatorOffset,
|
|
1549
|
+
width: offsetWidth
|
|
1550
|
+
});
|
|
1551
|
+
setIsFirstRender(false);
|
|
1552
|
+
} else gsap.gsap.to(indicatorRef.current, {
|
|
1553
|
+
x: indicatorOffset,
|
|
1554
|
+
width: offsetWidth,
|
|
1555
|
+
duration: .3,
|
|
1556
|
+
ease: "power2.out"
|
|
1557
|
+
});
|
|
1558
|
+
}, [activeTab, isFirstRender]);
|
|
1559
|
+
(0, react.useEffect)(() => {
|
|
1560
|
+
if (!contentRef.current) return;
|
|
1561
|
+
if (isFirstRender) gsap.gsap.set(contentRef.current, {
|
|
1562
|
+
opacity: 1,
|
|
1563
|
+
y: 0
|
|
1564
|
+
});
|
|
1565
|
+
else gsap.gsap.fromTo(contentRef.current, {
|
|
1566
|
+
opacity: 0,
|
|
1567
|
+
y: 10
|
|
1568
|
+
}, {
|
|
1569
|
+
opacity: 1,
|
|
1570
|
+
y: 0,
|
|
1571
|
+
duration: .3,
|
|
1572
|
+
ease: "power2.out"
|
|
1573
|
+
});
|
|
1574
|
+
}, [activeTab, isFirstRender]);
|
|
1575
|
+
const activeTabContent = tabs.find((tab) => tab.value === activeTab)?.content;
|
|
1576
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1577
|
+
className: `${Tabs_module_default.tabsContainer} ${className || ""}`,
|
|
1578
|
+
...props,
|
|
1579
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1580
|
+
className: Tabs_module_default.tabsList,
|
|
1581
|
+
children: [tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
1582
|
+
ref: (el) => {
|
|
1583
|
+
if (el) tabRefs.current.set(tab.value, el);
|
|
1584
|
+
},
|
|
1585
|
+
className: `${Tabs_module_default.tab} ${activeTab === tab.value ? Tabs_module_default.active : ""}`,
|
|
1586
|
+
onClick: () => handleTabClick(tab.value),
|
|
1587
|
+
children: tab.label
|
|
1588
|
+
}, tab.value)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1589
|
+
ref: indicatorRef,
|
|
1590
|
+
className: Tabs_module_default.indicator
|
|
1591
|
+
})]
|
|
1592
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1593
|
+
ref: contentRef,
|
|
1594
|
+
className: Tabs_module_default.tabContent,
|
|
1595
|
+
children: activeTabContent
|
|
1596
|
+
})]
|
|
1597
|
+
});
|
|
1598
|
+
}
|
|
1599
|
+
var Tooltip_module_default = {
|
|
1600
|
+
tooltipWrapper: "_tooltipWrapper_39a7p_1",
|
|
1601
|
+
trigger: "_trigger_39a7p_7",
|
|
1602
|
+
tooltip: "_tooltip_39a7p_1",
|
|
1603
|
+
top: "_top_39a7p_28",
|
|
1604
|
+
bottom: "_bottom_39a7p_34",
|
|
1605
|
+
left: "_left_39a7p_40",
|
|
1606
|
+
right: "_right_39a7p_46",
|
|
1607
|
+
arrow: "_arrow_39a7p_52",
|
|
1608
|
+
"arrow-top": "_arrow-top_39a7p_61",
|
|
1609
|
+
"arrow-bottom": "_arrow-bottom_39a7p_69",
|
|
1610
|
+
"arrow-left": "_arrow-left_39a7p_77",
|
|
1611
|
+
"arrow-right": "_arrow-right_39a7p_85"
|
|
1612
|
+
};
|
|
1613
|
+
//#endregion
|
|
1614
|
+
//#region src/components/tooltip/Tooltip.tsx
|
|
1615
|
+
function Tooltip({ children, content, position: preferredPosition = "top", delay = 200, className, ...props }) {
|
|
1616
|
+
const [isVisible, setIsVisible] = (0, react.useState)(false);
|
|
1617
|
+
const [shouldRender, setShouldRender] = (0, react.useState)(false);
|
|
1618
|
+
const [finalPosition, setFinalPosition] = (0, react.useState)(preferredPosition);
|
|
1619
|
+
const triggerRef = (0, react.useRef)(null);
|
|
1620
|
+
const tooltipRef = (0, react.useRef)(null);
|
|
1621
|
+
const arrowRef = (0, react.useRef)(null);
|
|
1622
|
+
const timeoutRef = (0, react.useRef)(null);
|
|
1623
|
+
const calculateBestPosition = () => {
|
|
1624
|
+
if (!triggerRef.current || !tooltipRef.current) return preferredPosition;
|
|
1625
|
+
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
1626
|
+
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
1627
|
+
const viewportWidth = window.innerWidth;
|
|
1628
|
+
const viewportHeight = window.innerHeight;
|
|
1629
|
+
const spacing = 12;
|
|
1630
|
+
const positions = {
|
|
1631
|
+
top: {
|
|
1632
|
+
available: triggerRect.top >= tooltipRect.height + spacing,
|
|
1633
|
+
priority: preferredPosition === "top" ? 4 : 3
|
|
1634
|
+
},
|
|
1635
|
+
bottom: {
|
|
1636
|
+
available: viewportHeight - triggerRect.bottom >= tooltipRect.height + spacing,
|
|
1637
|
+
priority: preferredPosition === "bottom" ? 4 : 2
|
|
1638
|
+
},
|
|
1639
|
+
left: {
|
|
1640
|
+
available: triggerRect.left >= tooltipRect.width + spacing,
|
|
1641
|
+
priority: preferredPosition === "left" ? 4 : 1
|
|
1642
|
+
},
|
|
1643
|
+
right: {
|
|
1644
|
+
available: viewportWidth - triggerRect.right >= tooltipRect.width + spacing,
|
|
1645
|
+
priority: preferredPosition === "right" ? 4 : 0
|
|
1646
|
+
}
|
|
1647
|
+
};
|
|
1648
|
+
return Object.keys(positions).filter((pos) => positions[pos].available).sort((a, b) => positions[b].priority - positions[a].priority)[0] || preferredPosition;
|
|
1649
|
+
};
|
|
1650
|
+
const handleMouseEnter = () => {
|
|
1651
|
+
timeoutRef.current = setTimeout(() => {
|
|
1652
|
+
setShouldRender(true);
|
|
1653
|
+
setIsVisible(true);
|
|
1654
|
+
}, delay);
|
|
1655
|
+
};
|
|
1656
|
+
const handleMouseLeave = () => {
|
|
1657
|
+
if (timeoutRef.current) {
|
|
1658
|
+
clearTimeout(timeoutRef.current);
|
|
1659
|
+
timeoutRef.current = null;
|
|
1660
|
+
}
|
|
1661
|
+
setIsVisible(false);
|
|
1662
|
+
};
|
|
1663
|
+
(0, react.useEffect)(() => {
|
|
1664
|
+
if (isVisible && tooltipRef.current && arrowRef.current) {
|
|
1665
|
+
const position = calculateBestPosition();
|
|
1666
|
+
setFinalPosition(position);
|
|
1667
|
+
const isVertical = position === "top" || position === "bottom";
|
|
1668
|
+
const direction = position === "top" || position === "left" ? -1 : 1;
|
|
1669
|
+
gsap.gsap.fromTo(tooltipRef.current, {
|
|
1670
|
+
opacity: 0,
|
|
1671
|
+
scale: .8,
|
|
1672
|
+
y: isVertical ? direction * 15 : 0,
|
|
1673
|
+
x: !isVertical ? direction * 15 : 0,
|
|
1674
|
+
rotateX: isVertical ? direction * 15 : 0,
|
|
1675
|
+
rotateY: !isVertical ? direction * 15 : 0
|
|
1676
|
+
}, {
|
|
1677
|
+
opacity: 1,
|
|
1678
|
+
scale: 1,
|
|
1679
|
+
y: 0,
|
|
1680
|
+
x: 0,
|
|
1681
|
+
rotateX: 0,
|
|
1682
|
+
rotateY: 0,
|
|
1683
|
+
duration: .4,
|
|
1684
|
+
ease: "back.out(1.7)"
|
|
1685
|
+
});
|
|
1686
|
+
gsap.gsap.fromTo(arrowRef.current, {
|
|
1687
|
+
opacity: 0,
|
|
1688
|
+
scale: 0
|
|
1689
|
+
}, {
|
|
1690
|
+
opacity: 1,
|
|
1691
|
+
scale: 1,
|
|
1692
|
+
duration: .3,
|
|
1693
|
+
delay: .1,
|
|
1694
|
+
ease: "back.out(2)"
|
|
1695
|
+
});
|
|
1696
|
+
} else if (!isVisible && tooltipRef.current && arrowRef.current) {
|
|
1697
|
+
const isVertical = finalPosition === "top" || finalPosition === "bottom";
|
|
1698
|
+
const direction = finalPosition === "top" || finalPosition === "left" ? -1 : 1;
|
|
1699
|
+
gsap.gsap.to(arrowRef.current, {
|
|
1700
|
+
opacity: 0,
|
|
1701
|
+
scale: 0,
|
|
1702
|
+
duration: .15,
|
|
1703
|
+
ease: "power2.in"
|
|
1704
|
+
});
|
|
1705
|
+
gsap.gsap.to(tooltipRef.current, {
|
|
1706
|
+
opacity: 0,
|
|
1707
|
+
scale: .8,
|
|
1708
|
+
y: isVertical ? direction * 10 : 0,
|
|
1709
|
+
x: !isVertical ? direction * 10 : 0,
|
|
1710
|
+
duration: .2,
|
|
1711
|
+
ease: "power2.in",
|
|
1712
|
+
onComplete: () => {
|
|
1713
|
+
setShouldRender(false);
|
|
1714
|
+
}
|
|
1715
|
+
});
|
|
1716
|
+
}
|
|
1717
|
+
}, [isVisible, finalPosition]);
|
|
1718
|
+
(0, react.useEffect)(() => {
|
|
1719
|
+
return () => {
|
|
1720
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
1721
|
+
};
|
|
1722
|
+
}, []);
|
|
1723
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1724
|
+
className: `${Tooltip_module_default.tooltipWrapper} ${className || ""}`,
|
|
1725
|
+
onMouseEnter: handleMouseEnter,
|
|
1726
|
+
onMouseLeave: handleMouseLeave,
|
|
1727
|
+
...props,
|
|
1728
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1729
|
+
ref: triggerRef,
|
|
1730
|
+
className: Tooltip_module_default.trigger,
|
|
1731
|
+
children
|
|
1732
|
+
}), shouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1733
|
+
ref: tooltipRef,
|
|
1734
|
+
className: `${Tooltip_module_default.tooltip} ${Tooltip_module_default[finalPosition]}`,
|
|
1735
|
+
role: "tooltip",
|
|
1736
|
+
children: [content, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1737
|
+
ref: arrowRef,
|
|
1738
|
+
className: `${Tooltip_module_default.arrow} ${Tooltip_module_default[`arrow-${finalPosition}`]}`
|
|
1739
|
+
})]
|
|
1740
|
+
})]
|
|
1741
|
+
});
|
|
1742
|
+
}
|
|
1743
|
+
//#endregion
|
|
1744
|
+
exports.Accordion = Accordion;
|
|
1745
|
+
exports.AccordionContent = AccordionContent;
|
|
1746
|
+
exports.AccordionItem = AccordionItem;
|
|
1747
|
+
exports.AccordionTrigger = AccordionTrigger;
|
|
1748
|
+
exports.Badge = Badge;
|
|
1749
|
+
exports.Button = Button;
|
|
1750
|
+
exports.Card = Card;
|
|
1751
|
+
exports.Checkbox = Checkbox;
|
|
1752
|
+
exports.DropdownItem = DropdownItem;
|
|
1753
|
+
exports.DropdownMenu = DropdownMenu;
|
|
1754
|
+
exports.DropdownSeparator = DropdownSeparator;
|
|
1755
|
+
exports.HeroSheet = HeroSheet;
|
|
1756
|
+
exports.HoverCard = HoverCard;
|
|
1757
|
+
exports.Input = Input;
|
|
1758
|
+
exports.Modal = Modal;
|
|
1759
|
+
exports.ModalBody = ModalBody;
|
|
1760
|
+
exports.ModalContent = ModalContent;
|
|
1761
|
+
exports.ModalFooter = ModalFooter;
|
|
1762
|
+
exports.ModalHeader = ModalHeader;
|
|
1763
|
+
exports.OTPInput = OTPInput;
|
|
1764
|
+
exports.Sheet = Sheet;
|
|
1765
|
+
exports.SheetContent = SheetContent;
|
|
1766
|
+
exports.SheetFooter = SheetFooter;
|
|
1767
|
+
exports.Tabs = Tabs;
|
|
1768
|
+
exports.ToastContainer = ToastContainer;
|
|
1769
|
+
exports.Tooltip = Tooltip;
|
|
1770
|
+
exports.toast = toast;
|