@mateosuarezdev/react-ui 1.0.3 → 1.0.4

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.
Files changed (6) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.ts +31 -0
  4. package/dist/index.js +57 -54
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),D=require("clsx"),I=require("tailwind-merge"),c=require("react"),T=require("react-dom"),W=require("@mateosuarezdev/atoms"),j=({children:e,size:r=24,strokeWidth:t=2,viewBox:s="0 0 24 24",className:o,...l})=>i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:r,height:r,viewBox:s,className:o,...l,children:e}),m=(...e)=>I.twMerge(D.clsx(e));function E(e,r=100){let t=null,s=null;return function(...o){const l=Date.now();t===null||l-t>=r?(e.apply(this,o),t=l):(s&&clearTimeout(s),s=setTimeout(()=>{e.apply(this,o),t=Date.now()},r-(l-t)))}}function q(e,r=500){let t=null;return function(...s){t&&clearTimeout(t),t=setTimeout(()=>{e.apply(this,s),t=null},r)}}function k(e){if(!e)return"";const t=e.trim().replace(/\s+/g," ").split(" ");return t.length===0||t[0]===""?"":t.length===1?t[0].charAt(0).toUpperCase():(t[0].charAt(0)+t[1].charAt(0)).toUpperCase()}const v={xs:"w-8 h-8",sm:"w-10 h-10 text-lg",md:"w-14 h-14 text-xl",lg:"h-20 w-20 text-2xl",xl:"h-24 w-24 text-2xl"},O=({src:e,name:r,size:t="md",className:s})=>e?i.jsx("img",{alt:"avatar",src:e,className:m("rounded-full bg-base-3",v[t])}):r?i.jsx("p",{className:m("rounded-full font-medium dark-theme:bg-base-3 border border-base-6 dark-theme:border-base-4 flex items-center justify-center",v[t],s),children:k(r)}):i.jsx("div",{className:m("rounded-full text-2xl font-medium flex items-center justify-center","bg-base-2 dark-theme:bg-base-3 border border-base-4","lg:hover:bg-base-3 max-lg:active:bg-base-4 transition-colors",v[t],s),children:i.jsxs(j,{size:t==="xs"?16:t==="sm"?20:24,fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsx("path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}),i.jsx("circle",{cx:"12",cy:"7",r:"4"})]})});function $({className:e,children:r,animate:t=!1,...s}){return i.jsx("div",{className:m("flex -space-x-3 rtl:space-x-reverse",e),...s,children:r})}function X(e){return c.useSyncExternalStore(r=>e.subscribe(r),()=>e.get(),()=>e.get())}const y=W.atom(!0);let w=!1;const S=E(()=>{y.set(window.innerWidth>1024)});typeof window<"u"&&(w&&(window.removeEventListener("resize",S),w=!1),window.addEventListener("resize",S),w=!0);const z=()=>(c.useEffect(()=>{y.set(window.innerWidth>1024)},[]),X(y));function F(...e){return r=>{e.forEach(t=>{typeof t=="function"?t(r):t!=null&&(t.current=r)})}}const G=(e=!0,r)=>{const t=z(),s=c.useRef(null),o=c.useCallback(l=>{if(!e||t)return;const p=s.current;if(!p)return;const n=p.getBoundingClientRect(),a=Math.max(n.width,n.height),u=l.clientX-n.left-a/2,d=l.clientY-n.top-a/2,b=document.createElement("span");b.classList.add("ripple-wrapper");const g=document.createElement("span");g.classList.add("ripple"),g.style.backgroundColor=r?"var(--ripple-contrast)":"var(--ripple-main)",g.style.width=`${a}px`,g.style.height=`${a}px`,g.style.left=`${u}px`,g.style.top=`${d}px`,b.appendChild(g);const f=p.getElementsByClassName("ripple-wrapper");if(f?.length)for(const x of f)x.remove();p.appendChild(b),setTimeout(()=>{b.remove()},700)},[e,t,r]);return{ref:s,ripple:o,styles:{position:"relative"}}},U="relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center",Y={xs:"text-xs px-1 gap-x-0.5 py-1",sm:"text-sm px-2.5 gap-x-1 py-1.5",mdsm:"text-sm px-3 gap-x-1.5 py-2.5",md:"text-base px-4 gap-x-1.5 py-2.5",lg:"text-base px-4 gap-x-1.5 py-3.5",picker:"text-base px-2 py-2 gap-x-1.5",iconXs:"text-xs p-1",iconSm:"text-sm p-2",iconMd:"text-base p-3",iconLg:"text-base p-4"},H={all:"focus:ring-1",desktop:"lg:focus:ring-1",mobile:"focus:ring-1 lg:focus-ring-0",none:""},_={light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},J={none:"rounded-none",1:"rounded-1",2:"rounded-2",3:"rounded-3",4:"rounded-4",5:"rounded-5",6:"rounded-6",7:"rounded-7",8:"rounded-8",9:"rounded-9",10:"rounded-10",11:"rounded-11",12:"rounded-12",full:"rounded-full"},Q={transparent:"text-base-12 lg:hover:bg-base-4 focus:ring-base-6",transparentinactive:"text-base-11 lg:hover:bg-base-4",brand:"bg-brand text-brand-text lg:hover:bg-brand-hover focus:ring-base-6 border border-transparent",accent:"bg-accent text-accent-text lg:hover:bg-accent-hover",contrast:"bg-base-12 text-base-1 lg:hover:bg-base-11 focus:ring-base-6",solid:"bg-base-3 dark-theme:bg-base-3 lg:hover:bg-base-4 border border-base-4 focus:ring-base-5",solidhybrid:"border border-base-5 dark-theme:border-base-4 dark-theme:bg-base-3 lg:hover:bg-base-4 focus:ring-base-6",outline:"border border-base-6 lg:hover:bg-base-3 focus:ring-base-6",info:"bg-blue-3 text-blue-9 lg:hover:bg-blue-4 lg:active:bg-blue-5 focus:ring-blue-9 border border-transparent",success:"bg-green-4 text-green-9 lg:hover:bg-green-5 lg:active:bg-green-6 focus:ring-green-9 border border-transparent",warning:"bg-yellow-4 text-yellow-9 lg:hover:bg-yellow-5 lg:active:bg-yellow-6 focus:ring-yellow-9 border border-transparent",danger:"bg-red-4 text-red-9 lg:hover:bg-red-5 focus:ring-red-9 border border-transparent",dangersolid:"bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus:ring-base-6 border border-transparent",disabled:"bg-base-3 text-base-11 border border-transparent"},V={enabled:"",disabled:"opacity-75",loading:""},C=c.forwardRef(({color:e="transparent",size:r="mdsm",fontWeight:t="normal",rounded:s="6",state:o="enabled",onClick:l,className:p,children:n,withRipple:a=!0,contrastRipple:u,showFocus:d="desktop",withDisabledDelay:b=!1,type:g="button",...f},x)=>{const[N,A]=c.useState(!1),P=h=>{o==="enabled"&&(b?(A(!0),l&&l(h),setTimeout(()=>A(!1),1e3)):l&&l(h))},{ref:K,ripple:L}=G(a,e==="contrast"||u),B=F(K,x);return i.jsx("button",{ref:B,type:g,disabled:f.disabled?f.disabled:o==="disabled"||o==="loading",onMouseDown:L,onClick:h=>N?null:P(h),className:m(U,Y[r],_[t],J[s],H[d],Q[e],V[o],f.disabled&&"opacity-50",p),...f,children:n})});C.displayName="Button";const Z=({className:e})=>i.jsx("div",{className:m("w-full h-px bg-base-4",e)}),R=c.createContext(null),ee=({children:e,value:r})=>i.jsx(R.Provider,{value:r,children:e}),te=()=>{const e=c.useContext(R);if(!e)throw new Error("useAliveScope must be wrapped within AliveScopeProvider");return e},re=({children:e})=>{const[r,t]=c.useState({}),s=c.useRef({}),o=c.useRef({}),l=(n,a,u)=>{if(!r[n]){const d=document.createElement("div");return n&&(d.id=n),u&&(d.className=u),t(b=>({...b,[n]:{children:a,element:d}})),s.current[n]=[],o.current[n]=[],s.current&&s.current[n]&&s.current[n].forEach(b=>b(n)),d}return s.current&&s.current[n]&&s.current[n].forEach(d=>d(n)),r[n].element},p=n=>{t(a=>{const u={...a};return delete u[n],u}),o.current&&o.current[n]&&o.current[n].forEach(a=>a(n))};return i.jsxs(ee,{value:{getPortalElement:l,dropPortalElement:p},children:[e,Object.entries(r).map(([n,{children:a,element:u}])=>i.jsx(se,{id:n,onMountCallbacks:s,onDropCallbacks:o,children:a,element:u},n))]})},M=c.createContext(null),ne=({children:e,value:r})=>i.jsx(M.Provider,{value:r,children:e}),se=c.memo(({id:e,onMountCallbacks:r,onDropCallbacks:t,children:s,element:o})=>{const l=(n,a={runOnFirstMount:!1})=>{c.useEffect(()=>{const u=()=>{if(document.getElementById(e))n(e);else{const b=new MutationObserver((g,f)=>{document.getElementById(e)&&(n(e),f.disconnect())});return b.observe(document.body,{childList:!0,subtree:!0}),()=>b.disconnect()}};return a?.runOnFirstMount&&u(),r.current[e].push(u),()=>{r.current[e]=r.current[e].filter(d=>d!==u)}},[])},p=n=>{c.useEffect(()=>(t.current[e].push(n),()=>{t.current[e]=t.current[e].filter(a=>a!==n)}),[])};return i.jsx(ne,{value:{keepAliveId:e,onKeepAliveMount:l,onKeepAliveDrop:p},children:T.createPortal(s,o,e)})}),oe=()=>{const e=c.useContext(M);if(!e)throw new Error("useKeepAlive must be used within KeepAliveProvider");return e},le=({aliveKey:e,children:r,enabled:t=!0,...s})=>{const o=c.useRef(null),{getPortalElement:l}=te();return c.useEffect(()=>{const p=l(e,r,s.className);return t&&o.current&&o.current.replaceWith(p),()=>{}},[e,r,t,s]),i.jsx("div",{...s,ref:o})};exports.AliveScope=re;exports.Avatar=O;exports.AvatarsGroup=$;exports.Button=C;exports.Icon=j;exports.KeepAlive=le;exports.Separator=Z;exports.cn=m;exports.debounce=q;exports.generateInitials=k;exports.throttle=E;exports.useKeepAlive=oe;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("clsx"),q=require("tailwind-merge"),i=require("react/jsx-runtime"),c=require("react"),O=require("react-dom"),$=require("@mateosuarezdev/atoms"),m=(...e)=>q.twMerge(W.clsx(e));function j(e,r=100){let t=null,s=null;return function(...o){const l=Date.now();t===null||l-t>=r?(e.apply(this,o),t=l):(s&&clearTimeout(s),s=setTimeout(()=>{e.apply(this,o),t=Date.now()},r-(l-t)))}}function X(e,r=500){let t=null;return function(...s){t&&clearTimeout(t),t=setTimeout(()=>{e.apply(this,s),t=null},r)}}function E(e){if(!e)return"";const t=e.trim().replace(/\s+/g," ").split(" ");return t.length===0||t[0]===""?"":t.length===1?t[0].charAt(0).toUpperCase():(t[0].charAt(0)+t[1].charAt(0)).toUpperCase()}const v={xs:"w-8 h-8",sm:"w-10 h-10 text-lg",md:"w-14 h-14 text-xl",lg:"h-20 w-20 text-2xl",xl:"h-24 w-24 text-2xl"},z=({src:e,name:r,size:t="md",className:s})=>e?i.jsx("img",{alt:"avatar",src:e,className:m("rounded-full bg-base-3",v[t])}):r?i.jsx("p",{className:m("rounded-full font-medium dark-theme:bg-base-3 border border-base-6 dark-theme:border-base-4 flex items-center justify-center",v[t],s),children:E(r)}):i.jsx("div",{className:m("rounded-full text-2xl font-medium flex items-center justify-center","bg-base-2 dark-theme:bg-base-3 border border-base-4","lg:hover:bg-base-3 max-lg:active:bg-base-4 transition-colors",v[t],s),children:i.jsxs(N,{size:t==="xs"?16:t==="sm"?20:24,fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsx("path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}),i.jsx("circle",{cx:"12",cy:"7",r:"4"})]})});function F({className:e,children:r,animate:t=!1,...s}){return i.jsx("div",{className:m("flex -space-x-3 rtl:space-x-reverse",e),...s,children:r})}function G(e){return c.useSyncExternalStore(r=>e.subscribe(r),()=>e.get(),()=>e.get())}const y=$.atom(!0);let w=!1;const S=j(()=>{y.set(window.innerWidth>1024)});typeof window<"u"&&(w&&(window.removeEventListener("resize",S),w=!1),window.addEventListener("resize",S),w=!0);const k=()=>(c.useEffect(()=>{y.set(window.innerWidth>1024)},[]),G(y));function R(...e){return r=>{e.forEach(t=>{typeof t=="function"?t(r):t!=null&&(t.current=r)})}}const C=(e=!0,r)=>{const t=k(),s=c.useRef(null),o=c.useCallback(l=>{if(!e||t)return;const p=s.current;if(!p)return;const n=p.getBoundingClientRect(),a=Math.max(n.width,n.height),u=l.clientX-n.left-a/2,d=l.clientY-n.top-a/2,b=document.createElement("span");b.classList.add("ripple-wrapper");const g=document.createElement("span");g.classList.add("ripple"),g.style.backgroundColor=r?"var(--ripple-contrast)":"var(--ripple-main)",g.style.width=`${a}px`,g.style.height=`${a}px`,g.style.left=`${u}px`,g.style.top=`${d}px`,b.appendChild(g);const f=p.getElementsByClassName("ripple-wrapper");if(f?.length)for(const x of f)x.remove();p.appendChild(b),setTimeout(()=>{b.remove()},700)},[e,t,r]);return{ref:s,ripple:o,styles:{position:"relative"}}},U="relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center",Y={xs:"text-xs px-1 gap-x-0.5 py-1",sm:"text-sm px-2.5 gap-x-1 py-1.5",mdsm:"text-sm px-3 gap-x-1.5 py-2.5",md:"text-base px-4 gap-x-1.5 py-2.5",lg:"text-base px-4 gap-x-1.5 py-3.5",picker:"text-base px-2 py-2 gap-x-1.5",iconXs:"text-xs p-1",iconSm:"text-sm p-2",iconMd:"text-base p-3",iconLg:"text-base p-4"},H={all:"focus:ring-1",desktop:"lg:focus:ring-1",mobile:"focus:ring-1 lg:focus-ring-0",none:""},_={light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},J={none:"rounded-none",1:"rounded-1",2:"rounded-2",3:"rounded-3",4:"rounded-4",5:"rounded-5",6:"rounded-6",7:"rounded-7",8:"rounded-8",9:"rounded-9",10:"rounded-10",11:"rounded-11",12:"rounded-12",full:"rounded-full"},Q={transparent:"text-base-12 lg:hover:bg-base-4 focus:ring-base-6",transparentinactive:"text-base-11 lg:hover:bg-base-4",brand:"bg-brand text-brand-text lg:hover:bg-brand-hover focus:ring-base-6 border border-transparent",accent:"bg-accent text-accent-text lg:hover:bg-accent-hover",contrast:"bg-base-12 text-base-1 lg:hover:bg-base-11 focus:ring-base-6",solid:"bg-base-3 dark-theme:bg-base-3 lg:hover:bg-base-4 border border-base-4 focus:ring-base-5",solidhybrid:"border border-base-5 dark-theme:border-base-4 dark-theme:bg-base-3 lg:hover:bg-base-4 focus:ring-base-6",outline:"border border-base-6 lg:hover:bg-base-3 focus:ring-base-6",info:"bg-blue-3 text-blue-9 lg:hover:bg-blue-4 lg:active:bg-blue-5 focus:ring-blue-9 border border-transparent",success:"bg-green-4 text-green-9 lg:hover:bg-green-5 lg:active:bg-green-6 focus:ring-green-9 border border-transparent",warning:"bg-yellow-4 text-yellow-9 lg:hover:bg-yellow-5 lg:active:bg-yellow-6 focus:ring-yellow-9 border border-transparent",danger:"bg-red-4 text-red-9 lg:hover:bg-red-5 focus:ring-red-9 border border-transparent",dangersolid:"bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus:ring-base-6 border border-transparent",disabled:"bg-base-3 text-base-11 border border-transparent"},V={enabled:"",disabled:"opacity-75",loading:""},M=c.forwardRef(({color:e="transparent",size:r="mdsm",fontWeight:t="normal",rounded:s="6",state:o="enabled",onClick:l,className:p,children:n,withRipple:a=!0,contrastRipple:u,showFocus:d="desktop",withDisabledDelay:b=!1,type:g="button",...f},x)=>{const[K,A]=c.useState(!1),B=h=>{o==="enabled"&&(b?(A(!0),l&&l(h),setTimeout(()=>A(!1),1e3)):l&&l(h))},{ref:D,ripple:I}=C(a,e==="contrast"||u),T=R(D,x);return i.jsx("button",{ref:T,type:g,disabled:f.disabled?f.disabled:o==="disabled"||o==="loading",onMouseDown:I,onClick:h=>K?null:B(h),className:m(U,Y[r],_[t],J[s],H[d],Q[e],V[o],f.disabled&&"opacity-50",p),...f,children:n})});M.displayName="Button";const Z=({className:e})=>i.jsx("div",{className:m("w-full h-px bg-base-4",e)}),N=({children:e,size:r=24,strokeWidth:t=2,viewBox:s="0 0 24 24",className:o,...l})=>i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:r,height:r,viewBox:s,className:o,...l,children:e}),P=c.createContext(null),ee=({children:e,value:r})=>i.jsx(P.Provider,{value:r,children:e}),te=()=>{const e=c.useContext(P);if(!e)throw new Error("useAliveScope must be wrapped within AliveScopeProvider");return e},re=({children:e})=>{const[r,t]=c.useState({}),s=c.useRef({}),o=c.useRef({}),l=(n,a,u)=>{if(!r[n]){const d=document.createElement("div");return n&&(d.id=n),u&&(d.className=u),t(b=>({...b,[n]:{children:a,element:d}})),s.current[n]=[],o.current[n]=[],s.current&&s.current[n]&&s.current[n].forEach(b=>b(n)),d}return s.current&&s.current[n]&&s.current[n].forEach(d=>d(n)),r[n].element},p=n=>{t(a=>{const u={...a};return delete u[n],u}),o.current&&o.current[n]&&o.current[n].forEach(a=>a(n))};return i.jsxs(ee,{value:{getPortalElement:l,dropPortalElement:p},children:[e,Object.entries(r).map(([n,{children:a,element:u}])=>i.jsx(se,{id:n,onMountCallbacks:s,onDropCallbacks:o,children:a,element:u},n))]})},L=c.createContext(null),ne=({children:e,value:r})=>i.jsx(L.Provider,{value:r,children:e}),se=c.memo(({id:e,onMountCallbacks:r,onDropCallbacks:t,children:s,element:o})=>{const l=(n,a={runOnFirstMount:!1})=>{c.useEffect(()=>{const u=()=>{if(document.getElementById(e))n(e);else{const b=new MutationObserver((g,f)=>{document.getElementById(e)&&(n(e),f.disconnect())});return b.observe(document.body,{childList:!0,subtree:!0}),()=>b.disconnect()}};return a?.runOnFirstMount&&u(),r.current[e].push(u),()=>{r.current[e]=r.current[e].filter(d=>d!==u)}},[])},p=n=>{c.useEffect(()=>(t.current[e].push(n),()=>{t.current[e]=t.current[e].filter(a=>a!==n)}),[])};return i.jsx(ne,{value:{keepAliveId:e,onKeepAliveMount:l,onKeepAliveDrop:p},children:O.createPortal(s,o,e)})}),oe=()=>{const e=c.useContext(L);if(!e)throw new Error("useKeepAlive must be used within KeepAliveProvider");return e},le=({aliveKey:e,children:r,enabled:t=!0,...s})=>{const o=c.useRef(null),{getPortalElement:l}=te();return c.useEffect(()=>{const p=l(e,r,s.className);return t&&o.current&&o.current.replaceWith(p),()=>{}},[e,r,t,s]),i.jsx("div",{...s,ref:o})};exports.AliveScope=re;exports.Avatar=z;exports.AvatarsGroup=F;exports.Button=M;exports.Icon=N;exports.KeepAlive=le;exports.Separator=Z;exports.cn=m;exports.debounce=X;exports.generateInitials=E;exports.throttle=j;exports.useKeepAlive=oe;exports.useLargeScreen=k;exports.useMergedRef=R;exports.useRipple=C;
2
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../src/icons/index.tsx","../src/utils/index.ts","../src/components/Avatar.tsx","../src/components/AvatarsGroup.tsx","../../../node_modules/@mateosuarezdev/atoms/dist/react.js","../src/hooks/use-large-screen.tsx","../src/hooks/use-merged-ref.tsx","../src/hooks/use-ripple.tsx","../src/components/Button.tsx","../src/components/Separator.tsx","../src/components/KeepAlive.tsx"],"sourcesContent":["/**\r\n * Props for the base Icon component that provides a consistent SVG wrapper.\r\n */\r\ninterface IconProps extends React.SVGProps<SVGSVGElement> {\r\n /** Width and height of the icon in pixels (default: 24) */\r\n size?: number | string;\r\n /** Stroke width for outlined icons (default: 2) */\r\n strokeWidth?: number;\r\n /** SVG viewBox attribute defining the coordinate system (default: \"0 0 24 24\") */\r\n viewBox?: \"0 0 24 24\" | \"0 0 48 48\" | \"0 0 512 512\";\r\n /** CSS class names for styling */\r\n className?: string;\r\n /** SVG elements (paths, circles, etc.) that define the icon shape */\r\n children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Base Icon component that provides a consistent SVG wrapper for creating custom icons.\r\n * Handles common SVG properties while allowing full customization through standard SVG props.\r\n *\r\n * @example\r\n * // Creating a reusable icon component\r\n * export const CustomIcon = ({ size, className, ...props }: IndividualIconProps) => {\r\n * return (\r\n * <Icon size={size} className={className} fill=\"currentColor\" {...props}>\r\n * <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\" />\r\n * </Icon>\r\n * );\r\n * };\r\n *\r\n * @example\r\n * // Creating a custom icon\r\n * <Icon size={32} strokeWidth={1.5}>\r\n * <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\" />\r\n * </Icon>\r\n *\r\n * @example\r\n * // Using with custom viewBox for different icon sets\r\n * <Icon viewBox=\"0 0 512 512\" size={48}>\r\n * <circle cx=\"256\" cy=\"256\" r=\"200\" />\r\n * </Icon>\r\n */\r\nexport const Icon: React.FC<IconProps> = ({\r\n children,\r\n size = 24,\r\n strokeWidth = 2,\r\n viewBox = \"0 0 24 24\",\r\n className,\r\n ...props\r\n}) => {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={size}\r\n height={size}\r\n viewBox={viewBox}\r\n className={className}\r\n {...props}\r\n >\r\n {children}\r\n </svg>\r\n );\r\n};\r\n\r\n// Define props for individual icons\r\nexport type IndividualIconProps = Omit<IconProps, \"children\">;\r\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\n//Custom ClassName\r\nexport type { ClassValue };\r\n\r\n/**Tailwind Merge + Clsx */\r\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\r\n\r\n/**\r\n * Creates a throttled function that only invokes func at most once per every limit milliseconds.\r\n * The first call executes immediately, subsequent calls are rate-limited, and the last call\r\n * during rapid firing is guaranteed to execute with the most recent arguments.\r\n *\r\n * @param func - The function to throttle\r\n * @param limit - The number of milliseconds to throttle invocations to (default: 100)\r\n * @returns A throttled version of the function\r\n *\r\n * @example\r\n * const handleScroll = throttle(() => {\r\n * console.log('Scrolled!');\r\n * }, 200);\r\n *\r\n * window.addEventListener('scroll', handleScroll);\r\n */\r\nexport function throttle<T extends (...args: any[]) => any>(\r\n func: T,\r\n limit: number = 100\r\n): (...args: Parameters<T>) => void {\r\n let lastRan: number | null = null;\r\n let timeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n return function (this: any, ...args: Parameters<T>) {\r\n const now = Date.now();\r\n\r\n if (lastRan === null || now - lastRan >= limit) {\r\n func.apply(this, args);\r\n lastRan = now;\r\n } else {\r\n if (timeout) clearTimeout(timeout);\r\n timeout = setTimeout(() => {\r\n func.apply(this, args);\r\n lastRan = Date.now();\r\n }, limit - (now - lastRan));\r\n }\r\n };\r\n}\r\n\r\n/**\r\n * Creates a debounced function that delays invoking func until after delay milliseconds\r\n * have elapsed since the last time the debounced function was invoked. Each call resets\r\n * the timer, ensuring func only executes after activity has stopped.\r\n *\r\n * @param func - The function to debounce\r\n * @param delay - The number of milliseconds to delay (default: 300)\r\n * @returns A debounced version of the function\r\n *\r\n * @example\r\n * const handleSearch = debounce((query) => {\r\n * fetchResults(query);\r\n * }, 300);\r\n *\r\n * input.addEventListener('input', (e) => handleSearch(e.target.value));\r\n */\r\nexport function debounce<T extends (...args: any[]) => any>(\r\n func: T,\r\n delay: number = 500\r\n): (...args: Parameters<T>) => void {\r\n let timeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n return function (this: any, ...args: Parameters<T>) {\r\n if (timeout) clearTimeout(timeout);\r\n\r\n timeout = setTimeout(() => {\r\n func.apply(this, args);\r\n timeout = null;\r\n }, delay);\r\n };\r\n}\r\n\r\nexport function generateInitials(name: string) {\r\n if (!name) return \"\";\r\n\r\n // Trim and remove extra spaces\r\n const trimmedName = name.trim().replace(/\\s+/g, \" \");\r\n\r\n // Split by space to get words\r\n const words = trimmedName.split(\" \");\r\n\r\n // If no words (empty string), return empty\r\n if (words.length === 0 || words[0] === \"\") {\r\n return \"\";\r\n }\r\n\r\n // If only one word, return first letter\r\n if (words.length === 1) {\r\n return words[0].charAt(0).toUpperCase();\r\n }\r\n\r\n // If two or more words, return first letter of first two words\r\n return (words[0].charAt(0) + words[1].charAt(0)).toUpperCase();\r\n}\r\n","import { Icon } from \"../icons\";\r\nimport { cn } from \"../utils\";\r\nimport { generateInitials } from \"../utils\";\r\n\r\nconst sizes = {\r\n xs: \"w-8 h-8\",\r\n sm: \"w-10 h-10 text-lg\",\r\n md: \"w-14 h-14 text-xl\",\r\n lg: \"h-20 w-20 text-2xl\",\r\n xl: \"h-24 w-24 text-2xl\",\r\n};\r\n\r\nconst Avatar = ({\r\n src,\r\n name,\r\n size = \"md\",\r\n className,\r\n}: {\r\n src?: string;\r\n name?: string;\r\n size?: keyof typeof sizes;\r\n className?: string;\r\n}) => {\r\n if (src) {\r\n return (\r\n <img\r\n alt=\"avatar\"\r\n src={src}\r\n className={cn(\"rounded-full bg-base-3\", sizes[size])}\r\n />\r\n );\r\n }\r\n\r\n if (name) {\r\n return (\r\n <p\r\n className={cn(\r\n \"rounded-full font-medium dark-theme:bg-base-3 border border-base-6 dark-theme:border-base-4 flex items-center justify-center\",\r\n sizes[size],\r\n className\r\n )}\r\n >\r\n {generateInitials(name)}\r\n </p>\r\n );\r\n }\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"rounded-full text-2xl font-medium flex items-center justify-center\",\r\n \"bg-base-2 dark-theme:bg-base-3 border border-base-4\",\r\n \"lg:hover:bg-base-3 max-lg:active:bg-base-4 transition-colors\",\r\n sizes[size],\r\n className\r\n )}\r\n >\r\n <Icon\r\n size={size === \"xs\" ? 16 : size === \"sm\" ? 20 : 24}\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth={2}\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n >\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" />\r\n </Icon>\r\n </div>\r\n );\r\n};\r\n\r\nexport { Avatar };\r\n","import { ComponentPropsWithoutRef } from \"react\";\r\nimport { cn } from \"../utils\";\r\n\r\nfunction AvatarsGroup({\r\n className,\r\n children,\r\n animate = false,\r\n ...props\r\n}: ComponentPropsWithoutRef<\"div\"> & { animate?: boolean }) {\r\n return (\r\n <div\r\n className={cn(\"flex -space-x-3 rtl:space-x-reverse\", className)}\r\n {...props}\r\n >\r\n {children}\r\n </div>\r\n );\r\n}\r\n\r\nexport { AvatarsGroup };\r\n","import { useSyncExternalStore as s, useCallback as o, useRef as i, useEffect as l } from \"react\";\nimport { computed as p, effect as b } from \"./index.js\";\nfunction A(e) {\n const t = s(\n (u) => e.subscribe(u),\n () => e.get(),\n () => e.get()\n ), r = o(\n (u) => {\n e.set(u);\n },\n [e]\n );\n return [t, r];\n}\nfunction f(e) {\n return s(\n (t) => e.subscribe(t),\n () => e.get(),\n () => e.get()\n );\n}\nfunction d(e) {\n return o(\n (t) => {\n e.set(t);\n },\n [e]\n );\n}\nfunction E(e) {\n const t = i(null);\n return t.current || (t.current = p(e)), f(t.current);\n}\nfunction S(e) {\n l(() => b(e), []);\n}\nfunction h(e, ...t) {\n const r = t.length > 0 ? t : Object.keys(e), u = {};\n return r.forEach((c) => {\n const n = e[c];\n n && typeof n == \"object\" && \"get\" in n ? u[c] = f(n) : u[c] = n;\n }), u;\n}\nexport {\n A as useAtom,\n S as useAtomEffect,\n f as useAtomValue,\n E as useComputed,\n d as useSetAtom,\n h as useStore\n};\n//# sourceMappingURL=react.js.map\n","import { throttle } from \"../utils\";\r\nimport { useEffect } from \"react\";\r\nimport { atom } from \"@mateosuarezdev/atoms\";\r\nimport { useAtomValue } from \"@mateosuarezdev/atoms/react\";\r\n\r\n/**\r\n * Standard breakpoints for responsive design.\r\n */\r\n// export const mediaQueries = {\r\n// sm: 640,\r\n// md: 768,\r\n// lg: 1024,\r\n// xl: 1280,\r\n// \"2xl\": 1536,\r\n// };\r\n\r\n/**\r\n * Observable state tracking whether the screen is larger than the 'lg' breakpoint.\r\n * Default to true on server (assumes desktop), update on client.\r\n */\r\n// const largeObservable = observable(\r\n// typeof window !== \"undefined\" ? window.innerWidth > mediaQueries.lg : true\r\n// );\r\nconst largeAtom = atom(true);\r\n\r\nlet listening = false;\r\n\r\n/**\r\n * Throttled resize handler to update screen size state.\r\n * Only updates the observable when the viewport crosses the large screen threshold.\r\n * Throttled to improve performance by limiting update frequency.\r\n */\r\nconst handleResize = throttle(() => {\r\n largeAtom.set(window.innerWidth > 1024);\r\n}); // Throttle to once per 100ms\r\n\r\n// Only set up listeners on client\r\nif (typeof window !== \"undefined\") {\r\n if (listening) {\r\n window.removeEventListener(\"resize\", handleResize);\r\n listening = false;\r\n }\r\n\r\n // Attach resize listener to update state when window is resized\r\n window.addEventListener(\"resize\", handleResize);\r\n listening = true;\r\n}\r\n\r\n/**\r\n * Custom hook that returns whether the current viewport is larger than the 'lg' breakpoint.\r\n *\r\n * @example\r\n * function MyComponent() {\r\n * const lg = useLargeScreen();\r\n *\r\n * return (\r\n * <div>\r\n * {lg\r\n * ? <DesktopLayout />\r\n * : <MobileLayout />\r\n * }\r\n * </div>\r\n * );\r\n * }\r\n *\r\n * @returns {boolean} True if the current viewport width is larger than the 'lg' breakpoint\r\n */\r\nconst useLargeScreen = (): boolean => {\r\n useEffect(() => {\r\n largeAtom.set(window.innerWidth > 1024);\r\n }, []);\r\n return useAtomValue(largeAtom);\r\n};\r\n\r\nexport { useLargeScreen };\r\n","function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\r\n return (value) => {\r\n refs.forEach((ref) => {\r\n if (typeof ref === \"function\") {\r\n ref(value);\r\n } else if (ref != null) {\r\n (ref as React.MutableRefObject<T | null>).current = value;\r\n }\r\n });\r\n };\r\n}\r\n\r\nexport { useMergedRef };\r\n","import { CSSProperties, useCallback, useRef } from \"react\";\r\nimport { useLargeScreen } from \"./use-large-screen\";\r\n\r\n// new ripple uses a wrapper so the parent doesn't need overflow-hidden\r\nconst useRipple = <T extends HTMLElement>(\r\n enabled: boolean = true,\r\n contrastRipple?: boolean\r\n) => {\r\n const lg = useLargeScreen();\r\n const ref = useRef<T>(null);\r\n\r\n const ripple = useCallback(\r\n (event: React.MouseEvent<T>) => {\r\n if (!enabled || lg) return;\r\n\r\n const button = ref.current;\r\n if (!button) return;\r\n\r\n // Get button's position and dimensions\r\n const buttonRect = button.getBoundingClientRect();\r\n const rippleSize = Math.max(buttonRect.width, buttonRect.height);\r\n const offsetX = event.clientX - buttonRect.left - rippleSize / 2;\r\n const offsetY = event.clientY - buttonRect.top - rippleSize / 2;\r\n\r\n // Create the ripple wrapper (this element holds the ripple)\r\n const rippleWrapper = document.createElement(\"span\");\r\n rippleWrapper.classList.add(\"ripple-wrapper\");\r\n\r\n // Create the ripple element (circle)\r\n const rippleEl = document.createElement(\"span\");\r\n rippleEl.classList.add(\"ripple\");\r\n rippleEl.style.backgroundColor = contrastRipple\r\n ? \"var(--ripple-contrast)\"\r\n : \"var(--ripple-main)\";\r\n\r\n // Set the position and size of the ripple\r\n rippleEl.style.width = `${rippleSize}px`;\r\n rippleEl.style.height = `${rippleSize}px`;\r\n rippleEl.style.left = `${offsetX}px`;\r\n rippleEl.style.top = `${offsetY}px`;\r\n\r\n rippleWrapper.appendChild(rippleEl);\r\n\r\n const ripples = button.getElementsByClassName(\"ripple-wrapper\");\r\n if (ripples?.length) {\r\n for (const ripple of ripples) {\r\n ripple.remove();\r\n }\r\n }\r\n\r\n // Append the ripple wrapper to the button\r\n button.appendChild(rippleWrapper);\r\n\r\n // Remove the ripple wrapper after animation\r\n setTimeout(() => {\r\n rippleWrapper.remove();\r\n }, 700); // Match the animation duration\r\n },\r\n [enabled, lg, contrastRipple]\r\n );\r\n\r\n return {\r\n ref,\r\n ripple,\r\n styles: {\r\n position: \"relative\",\r\n } as CSSProperties,\r\n };\r\n};\r\n\r\nexport { useRipple };\r\n\r\n// ios like fade effect\r\n// const useRipple = (enabled = true, contrastRipple?: boolean) => {\r\n// const lg = useLargeScreen();\r\n// const ref = useRef<HTMLElement>(null);\r\n\r\n// const ripple = useCallback(\r\n// (event: React.MouseEvent<HTMLElement>) => {\r\n// if (!enabled || lg) return;\r\n\r\n// const rippleEl = document.createElement(\"span\");\r\n// rippleEl.classList.add(\"simple-ripple\");\r\n// rippleEl.style.backgroundColor = contrastRipple\r\n// ? \"var(--ripple-contrast)\"\r\n// : \"var(--ripple-main)\";\r\n\r\n// const target = ref.current;\r\n// if (!target) return;\r\n\r\n// target.appendChild(rippleEl);\r\n\r\n// // Remove after animation\r\n// setTimeout(() => {\r\n// rippleEl.remove();\r\n// }, 400); // Match animation duration\r\n// },\r\n// [enabled, lg, contrastRipple]\r\n// );\r\n\r\n// return { ref, ripple };\r\n// };\r\n\r\n// export default useRipple;\r\n\r\n// old ripple requires parent with overflow-hidden\r\n// const useRipple = (enabled: boolean = true, contrastRipple?: boolean) => {\r\n// const lg = useLargeScreen();\r\n// const ref = useRef<HTMLElement>(null);\r\n// const ripple = useCallback(\r\n// (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\r\n// if (!lg && enabled) {\r\n// const rippleContainer = event.currentTarget.getBoundingClientRect();\r\n// const circle = document.createElement(\"span\");\r\n// const diameter = Math.max(\r\n// rippleContainer.width,\r\n// rippleContainer.height\r\n// );\r\n// const radius = diameter / 2;\r\n\r\n// circle.style.width = circle.style.height = `${diameter}px`;\r\n// circle.style.left = `${\r\n// event.clientX - (rippleContainer.left + radius)\r\n// }px`;\r\n// circle.style.top = `${\r\n// event.clientY - (rippleContainer.top + radius)\r\n// }px`;\r\n// circle.style.backgroundColor = `${\r\n// contrastRipple ? \"var(--ripple-contrast)\" : \"var(--ripple-main)\"\r\n// }`;\r\n// circle.style.pointerEvents = \"none\";\r\n// circle.classList.add(\"ripple\");\r\n\r\n// const ripples = ref.current?.getElementsByClassName(\"ripple\");\r\n// if (ripples?.length) {\r\n// for (const ripple of ripples) {\r\n// ripple.remove();\r\n// }\r\n// }\r\n\r\n// ref.current?.appendChild(circle);\r\n\r\n// (async () => {\r\n// //await sleep(750);\r\n// setTimeout(\r\n// () => ref.current?.getElementsByClassName(\"ripple\")[0]?.remove(),\r\n// 750\r\n// );\r\n// })();\r\n// }\r\n// },\r\n// [contrastRipple, lg, enabled]\r\n// );\r\n\r\n// return {\r\n// ref: ref,\r\n// ripple: ripple,\r\n// classNames: \"relative overflow-hidden inline-block\",\r\n// };\r\n// };\r\n\r\n// export default useRipple;\r\n","import { forwardRef, useState, ForwardedRef } from \"react\";\r\nimport { cn } from \"../utils\";\r\nimport { useMergedRef } from \"../hooks\";\r\nimport { useRipple } from \"../hooks/use-ripple\";\r\n\r\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\r\n color?: keyof typeof colorStyles;\r\n size?: keyof typeof sizeStyles;\r\n fontWeight?: keyof typeof fontWeightStyles;\r\n rounded?: keyof typeof borderRadiusStyles;\r\n state?: \"enabled\" | \"disabled\" | \"loading\";\r\n onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\r\n className?: string;\r\n withRipple?: boolean;\r\n contrastRipple?: boolean;\r\n showFocus?: \"all\" | \"desktop\" | \"mobile\" | \"none\";\r\n withDisabledDelay?: boolean;\r\n type?: \"button\" | \"submit\" | \"reset\";\r\n children?: React.ReactNode;\r\n};\r\n\r\n// Base button styles that apply to all variants\r\nconst baseStyles =\r\n \"relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center\"; //was pl-1.5 and rounded-lg\r\n\r\nconst sizeStyles = {\r\n xs: \"text-xs px-1 gap-x-0.5 py-1\",\r\n sm: \"text-sm px-2.5 gap-x-1 py-1.5\",\r\n mdsm: \"text-sm px-3 gap-x-1.5 py-2.5\",\r\n md: \"text-base px-4 gap-x-1.5 py-2.5\",\r\n lg: \"text-base px-4 gap-x-1.5 py-3.5\",\r\n picker: \"text-base px-2 py-2 gap-x-1.5\",\r\n iconXs: \"text-xs p-1\",\r\n iconSm: \"text-sm p-2\",\r\n iconMd: \"text-base p-3\",\r\n iconLg: \"text-base p-4\",\r\n};\r\n\r\n// Focus styles based on showFocus prop\r\nconst focusStyles = {\r\n all: \"focus:ring-1\",\r\n desktop: \"lg:focus:ring-1\",\r\n mobile: \"focus:ring-1 lg:focus-ring-0\",\r\n none: \"\",\r\n};\r\n\r\nconst fontWeightStyles = {\r\n light: \"font-light\",\r\n normal: \"font-normal\",\r\n medium: \"font-medium\",\r\n semibold: \"font-semibold\",\r\n bold: \"font-bold\",\r\n};\r\n\r\nconst borderRadiusStyles = {\r\n none: \"rounded-none\",\r\n \"1\": \"rounded-1\",\r\n \"2\": \"rounded-2\",\r\n \"3\": \"rounded-3\",\r\n \"4\": \"rounded-4\",\r\n \"5\": \"rounded-5\",\r\n \"6\": \"rounded-6\",\r\n \"7\": \"rounded-7\",\r\n \"8\": \"rounded-8\",\r\n \"9\": \"rounded-9\",\r\n \"10\": \"rounded-10\",\r\n \"11\": \"rounded-11\",\r\n \"12\": \"rounded-12\",\r\n full: \"rounded-full\",\r\n};\r\n\r\n// Color variant styles\r\nconst colorStyles = {\r\n transparent: \"text-base-12 lg:hover:bg-base-4 focus:ring-base-6\",\r\n transparentinactive: \"text-base-11 lg:hover:bg-base-4\",\r\n brand:\r\n \"bg-brand text-brand-text lg:hover:bg-brand-hover focus:ring-base-6 border border-transparent\",\r\n accent: \"bg-accent text-accent-text lg:hover:bg-accent-hover\",\r\n contrast: \"bg-base-12 text-base-1 lg:hover:bg-base-11 focus:ring-base-6\",\r\n solid:\r\n \"bg-base-3 dark-theme:bg-base-3 lg:hover:bg-base-4 border border-base-4 focus:ring-base-5\",\r\n solidhybrid:\r\n \"border border-base-5 dark-theme:border-base-4 dark-theme:bg-base-3 lg:hover:bg-base-4 focus:ring-base-6\",\r\n outline: \"border border-base-6 lg:hover:bg-base-3 focus:ring-base-6\",\r\n info: \"bg-blue-3 text-blue-9 lg:hover:bg-blue-4 lg:active:bg-blue-5 focus:ring-blue-9 border border-transparent\",\r\n success:\r\n \"bg-green-4 text-green-9 lg:hover:bg-green-5 lg:active:bg-green-6 focus:ring-green-9 border border-transparent\",\r\n warning:\r\n \"bg-yellow-4 text-yellow-9 lg:hover:bg-yellow-5 lg:active:bg-yellow-6 focus:ring-yellow-9 border border-transparent\",\r\n danger:\r\n \"bg-red-4 text-red-9 lg:hover:bg-red-5 focus:ring-red-9 border border-transparent\",\r\n dangersolid:\r\n \"bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus:ring-base-6 border border-transparent\",\r\n disabled: \"bg-base-3 text-base-11 border border-transparent\",\r\n};\r\n\r\n// State based styles\r\nconst stateStyles = {\r\n enabled: \"\",\r\n disabled: \"opacity-75\",\r\n loading: \"\",\r\n};\r\n\r\nconst Button = forwardRef(\r\n (\r\n {\r\n color = \"transparent\",\r\n size = \"mdsm\",\r\n fontWeight = \"normal\",\r\n rounded = \"6\",\r\n state = \"enabled\",\r\n onClick,\r\n className,\r\n children,\r\n withRipple = true,\r\n contrastRipple,\r\n showFocus = \"desktop\",\r\n withDisabledDelay = false,\r\n type = \"button\",\r\n ...others\r\n }: ButtonProps,\r\n forwardedRef: ForwardedRef<HTMLButtonElement>\r\n ) => {\r\n const [disabledDelay, setDisabledDelay] = useState(false);\r\n\r\n const handleClick = (\r\n e: React.MouseEvent<HTMLButtonElement, MouseEvent>\r\n ) => {\r\n if (state === \"enabled\") {\r\n if (withDisabledDelay) {\r\n setDisabledDelay(true);\r\n onClick && onClick(e);\r\n setTimeout(() => setDisabledDelay(false), 1000);\r\n } else {\r\n onClick && onClick(e);\r\n }\r\n }\r\n };\r\n\r\n const { ref: rippleRef, ripple } = useRipple(\r\n withRipple,\r\n color === \"contrast\" || contrastRipple\r\n );\r\n\r\n // Merge the ripple ref with forwarded ref\r\n const ref = useMergedRef(rippleRef, forwardedRef);\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n type={type}\r\n disabled={\r\n others.disabled\r\n ? others.disabled\r\n : state === \"disabled\" || state === \"loading\"\r\n }\r\n onMouseDown={ripple}\r\n onClick={(e) => (!disabledDelay ? handleClick(e) : null)}\r\n className={cn(\r\n baseStyles,\r\n sizeStyles[size],\r\n fontWeightStyles[fontWeight],\r\n borderRadiusStyles[rounded],\r\n focusStyles[showFocus],\r\n colorStyles[color],\r\n stateStyles[state],\r\n others.disabled && \"opacity-50\",\r\n className\r\n )}\r\n {...others}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button };\r\n","import { cn } from \"../utils\";\r\n\r\nconst Separator = ({ className }: { className?: string }) => {\r\n return <div className={cn(\"w-full h-px bg-base-4\", className)} />;\r\n};\r\n\r\nexport { Separator };\r\n","import {\n createContext,\n memo,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\n//============================\n// #region AliveScope\n//============================\ntype AliveScopeContextType = {\n getPortalElement: (\n id: string,\n children: React.ReactNode,\n className?: string\n ) => HTMLElement;\n dropPortalElement: (id: string) => void;\n};\n\nconst AliveScopeContext = createContext<AliveScopeContextType | null>(null);\n\nconst AliveScopeProvider = ({\n children,\n value,\n}: {\n children: React.ReactNode;\n value: AliveScopeContextType;\n}) => {\n return (\n <AliveScopeContext.Provider value={value}>\n {children}\n </AliveScopeContext.Provider>\n );\n};\n\nconst useAliveScope = () => {\n const context = useContext(AliveScopeContext);\n\n if (!context)\n throw new Error(\"useAliveScope must be wrapped within AliveScopeProvider\");\n\n return context;\n};\n\ntype AliveScopeProps = {\n children?: React.ReactNode;\n};\n\nconst AliveScope: React.FC<AliveScopeProps> = ({ children }) => {\n const [nodes, setNodes] = useState<{\n [id: string]: { children: React.ReactNode; element: HTMLElement };\n }>({});\n\n const onMountCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n {}\n );\n const onDropCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n {}\n );\n\n const getPortalElement = (\n id: string,\n children: React.ReactNode,\n className?: string\n ) => {\n if (!nodes[id]) {\n const element = document.createElement(\"div\");\n if (id) {\n element.id = id;\n }\n if (className) {\n element.className = className;\n }\n setNodes((prevNodes) => ({\n ...prevNodes,\n [id]: { children, element },\n }));\n onMountCallbacks.current[id] = [];\n onDropCallbacks.current[id] = [];\n if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n onMountCallbacks.current[id].forEach((callback) => callback(id));\n }\n return element;\n }\n if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n onMountCallbacks.current[id].forEach((callback) => callback(id));\n }\n return nodes[id].element;\n };\n\n const dropPortalElement = (id: string) => {\n setNodes((prevNodes) => {\n const copy = { ...prevNodes };\n delete copy[id];\n return copy;\n });\n //console.log(\"dropped\", id);\n if (onDropCallbacks.current && onDropCallbacks.current[id]) {\n onDropCallbacks.current[id].forEach((callback) => callback(id));\n }\n };\n\n return (\n <AliveScopeProvider\n value={{\n getPortalElement,\n dropPortalElement,\n }}\n >\n {children}\n {Object.entries(nodes).map(([id, { children, element }]) => (\n <Component\n key={id}\n id={id}\n onMountCallbacks={onMountCallbacks}\n onDropCallbacks={onDropCallbacks}\n children={children}\n element={element}\n />\n ))}\n </AliveScopeProvider>\n );\n};\n//============================\n// #endregion AliveScope\n//============================\n\n//============================\n// #region KeepAlive\n//============================\ntype KeepAliveContextType = {\n keepAliveId: string;\n onKeepAliveMount: (\n callback: (id: string) => void,\n options?: { runOnFirstMount?: boolean }\n ) => void;\n onKeepAliveDrop: (callback: (id: string) => void) => void;\n};\n\nexport const KeepAliveContext = createContext<KeepAliveContextType | null>(\n null\n);\n\nexport const KeepAliveProvider = ({\n children,\n value,\n}: {\n children: React.ReactNode;\n value: KeepAliveContextType;\n}) => {\n return (\n <KeepAliveContext.Provider value={value}>\n {children}\n </KeepAliveContext.Provider>\n );\n};\n\nconst Component = memo<{\n id: string;\n onMountCallbacks: React.MutableRefObject<{\n [id: string]: ((id: string) => void)[];\n }>;\n onDropCallbacks: React.MutableRefObject<{\n [id: string]: ((id: string) => void)[];\n }>;\n children: React.ReactNode;\n element: HTMLElement;\n}>(({ id, onMountCallbacks, onDropCallbacks, children, element }) => {\n const onKeepAliveMount = (\n callback: (id: string) => void,\n options: { runOnFirstMount?: boolean } = { runOnFirstMount: false }\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n const runCallback = () => {\n const el = document.getElementById(id);\n if (el) {\n callback(id);\n } else {\n // If element is not found, use MutationObserver to wait for it\n const observer = new MutationObserver((_mutations, obs) => {\n const el = document.getElementById(id);\n if (el) {\n callback(id);\n obs.disconnect(); // Stop observing once element is found\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n\n // Cleanup function to disconnect the observer if component unmounts\n return () => observer.disconnect();\n }\n };\n\n if (options?.runOnFirstMount) {\n runCallback();\n }\n\n onMountCallbacks.current[id].push(runCallback);\n return () => {\n onMountCallbacks.current[id] = onMountCallbacks.current[id].filter(\n (cb) => cb !== runCallback\n );\n };\n }, []);\n };\n\n const onKeepAliveDrop = (callback: (id: string) => void) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n onDropCallbacks.current[id].push(callback);\n return () => {\n onDropCallbacks.current[id] = onDropCallbacks.current[id].filter(\n (cb) => cb !== callback\n );\n };\n }, []);\n };\n\n return (\n <KeepAliveProvider\n value={{ keepAliveId: id, onKeepAliveMount, onKeepAliveDrop }}\n >\n {createPortal(children, element, id)}\n </KeepAliveProvider>\n );\n});\n\nconst useKeepAlive = () => {\n const context = useContext(KeepAliveContext);\n\n if (!context)\n throw new Error(\"useKeepAlive must be used within KeepAliveProvider\");\n\n return context;\n};\n\ntype KeepAliveProps = React.HTMLAttributes<HTMLDivElement> & {\n aliveKey: string;\n children: React.ReactNode;\n enabled?: boolean;\n};\n\nconst KeepAlive: React.FC<KeepAliveProps> = ({\n aliveKey,\n children,\n enabled = true,\n ...others\n}) => {\n const keepAliveRef = useRef<HTMLDivElement | null>(null);\n const { getPortalElement } = useAliveScope();\n\n useEffect(() => {\n const element = getPortalElement(aliveKey, children, others.className);\n\n if (enabled) {\n if (keepAliveRef.current) {\n keepAliveRef.current.replaceWith(element);\n }\n }\n\n return () => {\n //TODO\n //callUnmountCallbacks(aliveKey)\n };\n }, [aliveKey, children, enabled, others]);\n\n return <div {...others} ref={keepAliveRef} />;\n};\n//============================\n// #endregion KeepAlive\n//============================\n\nexport { AliveScope, KeepAlive, useKeepAlive };\n"],"names":["Icon","children","size","strokeWidth","viewBox","className","props","jsx","cn","inputs","twMerge","clsx","throttle","func","limit","lastRan","timeout","args","now","debounce","delay","generateInitials","name","words","sizes","Avatar","src","jsxs","AvatarsGroup","animate","f","s","t","largeAtom","atom","listening","handleResize","useLargeScreen","useEffect","useAtomValue","useMergedRef","refs","value","ref","useRipple","enabled","contrastRipple","lg","useRef","ripple","useCallback","event","button","buttonRect","rippleSize","offsetX","offsetY","rippleWrapper","rippleEl","ripples","baseStyles","sizeStyles","focusStyles","fontWeightStyles","borderRadiusStyles","colorStyles","stateStyles","Button","forwardRef","color","fontWeight","rounded","state","onClick","withRipple","showFocus","withDisabledDelay","type","others","forwardedRef","disabledDelay","setDisabledDelay","useState","handleClick","e","rippleRef","Separator","AliveScopeContext","createContext","AliveScopeProvider","useAliveScope","context","useContext","AliveScope","nodes","setNodes","onMountCallbacks","onDropCallbacks","getPortalElement","id","element","prevNodes","callback","dropPortalElement","copy","Component","KeepAliveContext","KeepAliveProvider","memo","onKeepAliveMount","options","runCallback","observer","_mutations","obs","cb","onKeepAliveDrop","createPortal","useKeepAlive","KeepAlive","aliveKey","keepAliveRef"],"mappings":"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","x_google_ignoreList":[4]}
1
+ {"version":3,"file":"index.cjs","sources":["../src/utils/index.ts","../src/components/Avatar.tsx","../src/components/AvatarsGroup.tsx","../../../node_modules/@mateosuarezdev/atoms/dist/react.js","../src/hooks/use-large-screen.tsx","../src/hooks/use-merged-ref.tsx","../src/hooks/use-ripple.tsx","../src/components/Button.tsx","../src/components/Separator.tsx","../src/components/Icon.tsx","../src/components/KeepAlive.tsx"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\n//Custom ClassName\r\nexport type { ClassValue };\r\n\r\n/**Tailwind Merge + Clsx */\r\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\r\n\r\n/**\r\n * Creates a throttled function that only invokes func at most once per every limit milliseconds.\r\n * The first call executes immediately, subsequent calls are rate-limited, and the last call\r\n * during rapid firing is guaranteed to execute with the most recent arguments.\r\n *\r\n * @param func - The function to throttle\r\n * @param limit - The number of milliseconds to throttle invocations to (default: 100)\r\n * @returns A throttled version of the function\r\n *\r\n * @example\r\n * const handleScroll = throttle(() => {\r\n * console.log('Scrolled!');\r\n * }, 200);\r\n *\r\n * window.addEventListener('scroll', handleScroll);\r\n */\r\nexport function throttle<T extends (...args: any[]) => any>(\r\n func: T,\r\n limit: number = 100\r\n): (...args: Parameters<T>) => void {\r\n let lastRan: number | null = null;\r\n let timeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n return function (this: any, ...args: Parameters<T>) {\r\n const now = Date.now();\r\n\r\n if (lastRan === null || now - lastRan >= limit) {\r\n func.apply(this, args);\r\n lastRan = now;\r\n } else {\r\n if (timeout) clearTimeout(timeout);\r\n timeout = setTimeout(() => {\r\n func.apply(this, args);\r\n lastRan = Date.now();\r\n }, limit - (now - lastRan));\r\n }\r\n };\r\n}\r\n\r\n/**\r\n * Creates a debounced function that delays invoking func until after delay milliseconds\r\n * have elapsed since the last time the debounced function was invoked. Each call resets\r\n * the timer, ensuring func only executes after activity has stopped.\r\n *\r\n * @param func - The function to debounce\r\n * @param delay - The number of milliseconds to delay (default: 300)\r\n * @returns A debounced version of the function\r\n *\r\n * @example\r\n * const handleSearch = debounce((query) => {\r\n * fetchResults(query);\r\n * }, 300);\r\n *\r\n * input.addEventListener('input', (e) => handleSearch(e.target.value));\r\n */\r\nexport function debounce<T extends (...args: any[]) => any>(\r\n func: T,\r\n delay: number = 500\r\n): (...args: Parameters<T>) => void {\r\n let timeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n return function (this: any, ...args: Parameters<T>) {\r\n if (timeout) clearTimeout(timeout);\r\n\r\n timeout = setTimeout(() => {\r\n func.apply(this, args);\r\n timeout = null;\r\n }, delay);\r\n };\r\n}\r\n\r\nexport function generateInitials(name: string) {\r\n if (!name) return \"\";\r\n\r\n // Trim and remove extra spaces\r\n const trimmedName = name.trim().replace(/\\s+/g, \" \");\r\n\r\n // Split by space to get words\r\n const words = trimmedName.split(\" \");\r\n\r\n // If no words (empty string), return empty\r\n if (words.length === 0 || words[0] === \"\") {\r\n return \"\";\r\n }\r\n\r\n // If only one word, return first letter\r\n if (words.length === 1) {\r\n return words[0].charAt(0).toUpperCase();\r\n }\r\n\r\n // If two or more words, return first letter of first two words\r\n return (words[0].charAt(0) + words[1].charAt(0)).toUpperCase();\r\n}\r\n","import { Icon } from \".\";\r\nimport { cn } from \"../utils\";\r\nimport { generateInitials } from \"../utils\";\r\n\r\nconst sizes = {\r\n xs: \"w-8 h-8\",\r\n sm: \"w-10 h-10 text-lg\",\r\n md: \"w-14 h-14 text-xl\",\r\n lg: \"h-20 w-20 text-2xl\",\r\n xl: \"h-24 w-24 text-2xl\",\r\n};\r\n\r\nconst Avatar = ({\r\n src,\r\n name,\r\n size = \"md\",\r\n className,\r\n}: {\r\n src?: string;\r\n name?: string;\r\n size?: keyof typeof sizes;\r\n className?: string;\r\n}) => {\r\n if (src) {\r\n return (\r\n <img\r\n alt=\"avatar\"\r\n src={src}\r\n className={cn(\"rounded-full bg-base-3\", sizes[size])}\r\n />\r\n );\r\n }\r\n\r\n if (name) {\r\n return (\r\n <p\r\n className={cn(\r\n \"rounded-full font-medium dark-theme:bg-base-3 border border-base-6 dark-theme:border-base-4 flex items-center justify-center\",\r\n sizes[size],\r\n className\r\n )}\r\n >\r\n {generateInitials(name)}\r\n </p>\r\n );\r\n }\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"rounded-full text-2xl font-medium flex items-center justify-center\",\r\n \"bg-base-2 dark-theme:bg-base-3 border border-base-4\",\r\n \"lg:hover:bg-base-3 max-lg:active:bg-base-4 transition-colors\",\r\n sizes[size],\r\n className\r\n )}\r\n >\r\n <Icon\r\n size={size === \"xs\" ? 16 : size === \"sm\" ? 20 : 24}\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth={2}\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n >\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" />\r\n </Icon>\r\n </div>\r\n );\r\n};\r\n\r\nexport { Avatar };\r\n","import { ComponentPropsWithoutRef } from \"react\";\r\nimport { cn } from \"../utils\";\r\n\r\nfunction AvatarsGroup({\r\n className,\r\n children,\r\n animate = false,\r\n ...props\r\n}: ComponentPropsWithoutRef<\"div\"> & { animate?: boolean }) {\r\n return (\r\n <div\r\n className={cn(\"flex -space-x-3 rtl:space-x-reverse\", className)}\r\n {...props}\r\n >\r\n {children}\r\n </div>\r\n );\r\n}\r\n\r\nexport { AvatarsGroup };\r\n","import { useSyncExternalStore as s, useCallback as o, useRef as i, useEffect as l } from \"react\";\nimport { computed as p, effect as b } from \"./index.js\";\nfunction A(e) {\n const t = s(\n (u) => e.subscribe(u),\n () => e.get(),\n () => e.get()\n ), r = o(\n (u) => {\n e.set(u);\n },\n [e]\n );\n return [t, r];\n}\nfunction f(e) {\n return s(\n (t) => e.subscribe(t),\n () => e.get(),\n () => e.get()\n );\n}\nfunction d(e) {\n return o(\n (t) => {\n e.set(t);\n },\n [e]\n );\n}\nfunction E(e) {\n const t = i(null);\n return t.current || (t.current = p(e)), f(t.current);\n}\nfunction S(e) {\n l(() => b(e), []);\n}\nfunction h(e, ...t) {\n const r = t.length > 0 ? t : Object.keys(e), u = {};\n return r.forEach((c) => {\n const n = e[c];\n n && typeof n == \"object\" && \"get\" in n ? u[c] = f(n) : u[c] = n;\n }), u;\n}\nexport {\n A as useAtom,\n S as useAtomEffect,\n f as useAtomValue,\n E as useComputed,\n d as useSetAtom,\n h as useStore\n};\n//# sourceMappingURL=react.js.map\n","import { throttle } from \"../utils\";\r\nimport { useEffect } from \"react\";\r\nimport { atom } from \"@mateosuarezdev/atoms\";\r\nimport { useAtomValue } from \"@mateosuarezdev/atoms/react\";\r\n\r\n/**\r\n * Standard breakpoints for responsive design.\r\n */\r\n// export const mediaQueries = {\r\n// sm: 640,\r\n// md: 768,\r\n// lg: 1024,\r\n// xl: 1280,\r\n// \"2xl\": 1536,\r\n// };\r\n\r\n/**\r\n * Observable state tracking whether the screen is larger than the 'lg' breakpoint.\r\n * Default to true on server (assumes desktop), update on client.\r\n */\r\n// const largeObservable = observable(\r\n// typeof window !== \"undefined\" ? window.innerWidth > mediaQueries.lg : true\r\n// );\r\nconst largeAtom = atom(true);\r\n\r\nlet listening = false;\r\n\r\n/**\r\n * Throttled resize handler to update screen size state.\r\n * Only updates the observable when the viewport crosses the large screen threshold.\r\n * Throttled to improve performance by limiting update frequency.\r\n */\r\nconst handleResize = throttle(() => {\r\n largeAtom.set(window.innerWidth > 1024);\r\n}); // Throttle to once per 100ms\r\n\r\n// Only set up listeners on client\r\nif (typeof window !== \"undefined\") {\r\n if (listening) {\r\n window.removeEventListener(\"resize\", handleResize);\r\n listening = false;\r\n }\r\n\r\n // Attach resize listener to update state when window is resized\r\n window.addEventListener(\"resize\", handleResize);\r\n listening = true;\r\n}\r\n\r\n/**\r\n * Custom hook that returns whether the current viewport is larger than the 'lg' breakpoint.\r\n *\r\n * @example\r\n * function MyComponent() {\r\n * const lg = useLargeScreen();\r\n *\r\n * return (\r\n * <div>\r\n * {lg\r\n * ? <DesktopLayout />\r\n * : <MobileLayout />\r\n * }\r\n * </div>\r\n * );\r\n * }\r\n *\r\n * @returns {boolean} True if the current viewport width is larger than the 'lg' breakpoint\r\n */\r\nconst useLargeScreen = (): boolean => {\r\n useEffect(() => {\r\n largeAtom.set(window.innerWidth > 1024);\r\n }, []);\r\n return useAtomValue(largeAtom);\r\n};\r\n\r\nexport { useLargeScreen };\r\n","function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\r\n return (value) => {\r\n refs.forEach((ref) => {\r\n if (typeof ref === \"function\") {\r\n ref(value);\r\n } else if (ref != null) {\r\n (ref as React.MutableRefObject<T | null>).current = value;\r\n }\r\n });\r\n };\r\n}\r\n\r\nexport { useMergedRef };\r\n","import { CSSProperties, useCallback, useRef } from \"react\";\r\nimport { useLargeScreen } from \"./use-large-screen\";\r\n\r\n// new ripple uses a wrapper so the parent doesn't need overflow-hidden\r\nconst useRipple = <T extends HTMLElement>(\r\n enabled: boolean = true,\r\n contrastRipple?: boolean\r\n) => {\r\n const lg = useLargeScreen();\r\n const ref = useRef<T>(null);\r\n\r\n const ripple = useCallback(\r\n (event: React.MouseEvent<T>) => {\r\n if (!enabled || lg) return;\r\n\r\n const button = ref.current;\r\n if (!button) return;\r\n\r\n // Get button's position and dimensions\r\n const buttonRect = button.getBoundingClientRect();\r\n const rippleSize = Math.max(buttonRect.width, buttonRect.height);\r\n const offsetX = event.clientX - buttonRect.left - rippleSize / 2;\r\n const offsetY = event.clientY - buttonRect.top - rippleSize / 2;\r\n\r\n // Create the ripple wrapper (this element holds the ripple)\r\n const rippleWrapper = document.createElement(\"span\");\r\n rippleWrapper.classList.add(\"ripple-wrapper\");\r\n\r\n // Create the ripple element (circle)\r\n const rippleEl = document.createElement(\"span\");\r\n rippleEl.classList.add(\"ripple\");\r\n rippleEl.style.backgroundColor = contrastRipple\r\n ? \"var(--ripple-contrast)\"\r\n : \"var(--ripple-main)\";\r\n\r\n // Set the position and size of the ripple\r\n rippleEl.style.width = `${rippleSize}px`;\r\n rippleEl.style.height = `${rippleSize}px`;\r\n rippleEl.style.left = `${offsetX}px`;\r\n rippleEl.style.top = `${offsetY}px`;\r\n\r\n rippleWrapper.appendChild(rippleEl);\r\n\r\n const ripples = button.getElementsByClassName(\"ripple-wrapper\");\r\n if (ripples?.length) {\r\n for (const ripple of ripples) {\r\n ripple.remove();\r\n }\r\n }\r\n\r\n // Append the ripple wrapper to the button\r\n button.appendChild(rippleWrapper);\r\n\r\n // Remove the ripple wrapper after animation\r\n setTimeout(() => {\r\n rippleWrapper.remove();\r\n }, 700); // Match the animation duration\r\n },\r\n [enabled, lg, contrastRipple]\r\n );\r\n\r\n return {\r\n ref,\r\n ripple,\r\n styles: {\r\n position: \"relative\",\r\n } as CSSProperties,\r\n };\r\n};\r\n\r\nexport { useRipple };\r\n\r\n// ios like fade effect\r\n// const useRipple = (enabled = true, contrastRipple?: boolean) => {\r\n// const lg = useLargeScreen();\r\n// const ref = useRef<HTMLElement>(null);\r\n\r\n// const ripple = useCallback(\r\n// (event: React.MouseEvent<HTMLElement>) => {\r\n// if (!enabled || lg) return;\r\n\r\n// const rippleEl = document.createElement(\"span\");\r\n// rippleEl.classList.add(\"simple-ripple\");\r\n// rippleEl.style.backgroundColor = contrastRipple\r\n// ? \"var(--ripple-contrast)\"\r\n// : \"var(--ripple-main)\";\r\n\r\n// const target = ref.current;\r\n// if (!target) return;\r\n\r\n// target.appendChild(rippleEl);\r\n\r\n// // Remove after animation\r\n// setTimeout(() => {\r\n// rippleEl.remove();\r\n// }, 400); // Match animation duration\r\n// },\r\n// [enabled, lg, contrastRipple]\r\n// );\r\n\r\n// return { ref, ripple };\r\n// };\r\n\r\n// export default useRipple;\r\n\r\n// old ripple requires parent with overflow-hidden\r\n// const useRipple = (enabled: boolean = true, contrastRipple?: boolean) => {\r\n// const lg = useLargeScreen();\r\n// const ref = useRef<HTMLElement>(null);\r\n// const ripple = useCallback(\r\n// (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\r\n// if (!lg && enabled) {\r\n// const rippleContainer = event.currentTarget.getBoundingClientRect();\r\n// const circle = document.createElement(\"span\");\r\n// const diameter = Math.max(\r\n// rippleContainer.width,\r\n// rippleContainer.height\r\n// );\r\n// const radius = diameter / 2;\r\n\r\n// circle.style.width = circle.style.height = `${diameter}px`;\r\n// circle.style.left = `${\r\n// event.clientX - (rippleContainer.left + radius)\r\n// }px`;\r\n// circle.style.top = `${\r\n// event.clientY - (rippleContainer.top + radius)\r\n// }px`;\r\n// circle.style.backgroundColor = `${\r\n// contrastRipple ? \"var(--ripple-contrast)\" : \"var(--ripple-main)\"\r\n// }`;\r\n// circle.style.pointerEvents = \"none\";\r\n// circle.classList.add(\"ripple\");\r\n\r\n// const ripples = ref.current?.getElementsByClassName(\"ripple\");\r\n// if (ripples?.length) {\r\n// for (const ripple of ripples) {\r\n// ripple.remove();\r\n// }\r\n// }\r\n\r\n// ref.current?.appendChild(circle);\r\n\r\n// (async () => {\r\n// //await sleep(750);\r\n// setTimeout(\r\n// () => ref.current?.getElementsByClassName(\"ripple\")[0]?.remove(),\r\n// 750\r\n// );\r\n// })();\r\n// }\r\n// },\r\n// [contrastRipple, lg, enabled]\r\n// );\r\n\r\n// return {\r\n// ref: ref,\r\n// ripple: ripple,\r\n// classNames: \"relative overflow-hidden inline-block\",\r\n// };\r\n// };\r\n\r\n// export default useRipple;\r\n","import { forwardRef, useState, ForwardedRef } from \"react\";\r\nimport { cn } from \"../utils\";\r\nimport { useMergedRef } from \"../hooks\";\r\nimport { useRipple } from \"../hooks/use-ripple\";\r\n\r\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\r\n color?: keyof typeof colorStyles;\r\n size?: keyof typeof sizeStyles;\r\n fontWeight?: keyof typeof fontWeightStyles;\r\n rounded?: keyof typeof borderRadiusStyles;\r\n state?: \"enabled\" | \"disabled\" | \"loading\";\r\n onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\r\n className?: string;\r\n withRipple?: boolean;\r\n contrastRipple?: boolean;\r\n showFocus?: \"all\" | \"desktop\" | \"mobile\" | \"none\";\r\n withDisabledDelay?: boolean;\r\n type?: \"button\" | \"submit\" | \"reset\";\r\n children?: React.ReactNode;\r\n};\r\n\r\n// Base button styles that apply to all variants\r\nconst baseStyles =\r\n \"relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center\"; //was pl-1.5 and rounded-lg\r\n\r\nconst sizeStyles = {\r\n xs: \"text-xs px-1 gap-x-0.5 py-1\",\r\n sm: \"text-sm px-2.5 gap-x-1 py-1.5\",\r\n mdsm: \"text-sm px-3 gap-x-1.5 py-2.5\",\r\n md: \"text-base px-4 gap-x-1.5 py-2.5\",\r\n lg: \"text-base px-4 gap-x-1.5 py-3.5\",\r\n picker: \"text-base px-2 py-2 gap-x-1.5\",\r\n iconXs: \"text-xs p-1\",\r\n iconSm: \"text-sm p-2\",\r\n iconMd: \"text-base p-3\",\r\n iconLg: \"text-base p-4\",\r\n};\r\n\r\n// Focus styles based on showFocus prop\r\nconst focusStyles = {\r\n all: \"focus:ring-1\",\r\n desktop: \"lg:focus:ring-1\",\r\n mobile: \"focus:ring-1 lg:focus-ring-0\",\r\n none: \"\",\r\n};\r\n\r\nconst fontWeightStyles = {\r\n light: \"font-light\",\r\n normal: \"font-normal\",\r\n medium: \"font-medium\",\r\n semibold: \"font-semibold\",\r\n bold: \"font-bold\",\r\n};\r\n\r\nconst borderRadiusStyles = {\r\n none: \"rounded-none\",\r\n \"1\": \"rounded-1\",\r\n \"2\": \"rounded-2\",\r\n \"3\": \"rounded-3\",\r\n \"4\": \"rounded-4\",\r\n \"5\": \"rounded-5\",\r\n \"6\": \"rounded-6\",\r\n \"7\": \"rounded-7\",\r\n \"8\": \"rounded-8\",\r\n \"9\": \"rounded-9\",\r\n \"10\": \"rounded-10\",\r\n \"11\": \"rounded-11\",\r\n \"12\": \"rounded-12\",\r\n full: \"rounded-full\",\r\n};\r\n\r\n// Color variant styles\r\nconst colorStyles = {\r\n transparent: \"text-base-12 lg:hover:bg-base-4 focus:ring-base-6\",\r\n transparentinactive: \"text-base-11 lg:hover:bg-base-4\",\r\n brand:\r\n \"bg-brand text-brand-text lg:hover:bg-brand-hover focus:ring-base-6 border border-transparent\",\r\n accent: \"bg-accent text-accent-text lg:hover:bg-accent-hover\",\r\n contrast: \"bg-base-12 text-base-1 lg:hover:bg-base-11 focus:ring-base-6\",\r\n solid:\r\n \"bg-base-3 dark-theme:bg-base-3 lg:hover:bg-base-4 border border-base-4 focus:ring-base-5\",\r\n solidhybrid:\r\n \"border border-base-5 dark-theme:border-base-4 dark-theme:bg-base-3 lg:hover:bg-base-4 focus:ring-base-6\",\r\n outline: \"border border-base-6 lg:hover:bg-base-3 focus:ring-base-6\",\r\n info: \"bg-blue-3 text-blue-9 lg:hover:bg-blue-4 lg:active:bg-blue-5 focus:ring-blue-9 border border-transparent\",\r\n success:\r\n \"bg-green-4 text-green-9 lg:hover:bg-green-5 lg:active:bg-green-6 focus:ring-green-9 border border-transparent\",\r\n warning:\r\n \"bg-yellow-4 text-yellow-9 lg:hover:bg-yellow-5 lg:active:bg-yellow-6 focus:ring-yellow-9 border border-transparent\",\r\n danger:\r\n \"bg-red-4 text-red-9 lg:hover:bg-red-5 focus:ring-red-9 border border-transparent\",\r\n dangersolid:\r\n \"bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus:ring-base-6 border border-transparent\",\r\n disabled: \"bg-base-3 text-base-11 border border-transparent\",\r\n};\r\n\r\n// State based styles\r\nconst stateStyles = {\r\n enabled: \"\",\r\n disabled: \"opacity-75\",\r\n loading: \"\",\r\n};\r\n\r\nconst Button = forwardRef(\r\n (\r\n {\r\n color = \"transparent\",\r\n size = \"mdsm\",\r\n fontWeight = \"normal\",\r\n rounded = \"6\",\r\n state = \"enabled\",\r\n onClick,\r\n className,\r\n children,\r\n withRipple = true,\r\n contrastRipple,\r\n showFocus = \"desktop\",\r\n withDisabledDelay = false,\r\n type = \"button\",\r\n ...others\r\n }: ButtonProps,\r\n forwardedRef: ForwardedRef<HTMLButtonElement>\r\n ) => {\r\n const [disabledDelay, setDisabledDelay] = useState(false);\r\n\r\n const handleClick = (\r\n e: React.MouseEvent<HTMLButtonElement, MouseEvent>\r\n ) => {\r\n if (state === \"enabled\") {\r\n if (withDisabledDelay) {\r\n setDisabledDelay(true);\r\n onClick && onClick(e);\r\n setTimeout(() => setDisabledDelay(false), 1000);\r\n } else {\r\n onClick && onClick(e);\r\n }\r\n }\r\n };\r\n\r\n const { ref: rippleRef, ripple } = useRipple(\r\n withRipple,\r\n color === \"contrast\" || contrastRipple\r\n );\r\n\r\n // Merge the ripple ref with forwarded ref\r\n const ref = useMergedRef(rippleRef, forwardedRef);\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n type={type}\r\n disabled={\r\n others.disabled\r\n ? others.disabled\r\n : state === \"disabled\" || state === \"loading\"\r\n }\r\n onMouseDown={ripple}\r\n onClick={(e) => (!disabledDelay ? handleClick(e) : null)}\r\n className={cn(\r\n baseStyles,\r\n sizeStyles[size],\r\n fontWeightStyles[fontWeight],\r\n borderRadiusStyles[rounded],\r\n focusStyles[showFocus],\r\n colorStyles[color],\r\n stateStyles[state],\r\n others.disabled && \"opacity-50\",\r\n className\r\n )}\r\n {...others}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button };\r\n","import { cn } from \"../utils\";\r\n\r\nconst Separator = ({ className }: { className?: string }) => {\r\n return <div className={cn(\"w-full h-px bg-base-4\", className)} />;\r\n};\r\n\r\nexport { Separator };\r\n","/**\r\n * Props for the base Icon component that provides a consistent SVG wrapper.\r\n */\r\ninterface IconProps extends React.SVGProps<SVGSVGElement> {\r\n /** Width and height of the icon in pixels (default: 24) */\r\n size?: number | string;\r\n /** Stroke width for outlined icons (default: 2) */\r\n strokeWidth?: number;\r\n /** SVG viewBox attribute defining the coordinate system (default: \"0 0 24 24\") */\r\n viewBox?: \"0 0 24 24\" | \"0 0 48 48\" | \"0 0 512 512\";\r\n /** CSS class names for styling */\r\n className?: string;\r\n /** SVG elements (paths, circles, etc.) that define the icon shape */\r\n children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Base Icon component that provides a consistent SVG wrapper for creating custom icons.\r\n * Handles common SVG properties while allowing full customization through standard SVG props.\r\n *\r\n * @example\r\n * // Creating a reusable icon component\r\n * export const CustomIcon = ({ size, className, ...props }: IndividualIconProps) => {\r\n * return (\r\n * <Icon size={size} className={className} fill=\"currentColor\" {...props}>\r\n * <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\" />\r\n * </Icon>\r\n * );\r\n * };\r\n *\r\n * @example\r\n * // Creating a custom icon\r\n * <Icon size={32} strokeWidth={1.5}>\r\n * <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\" />\r\n * </Icon>\r\n *\r\n * @example\r\n * // Using with custom viewBox for different icon sets\r\n * <Icon viewBox=\"0 0 512 512\" size={48}>\r\n * <circle cx=\"256\" cy=\"256\" r=\"200\" />\r\n * </Icon>\r\n */\r\nexport const Icon: React.FC<IconProps> = ({\r\n children,\r\n size = 24,\r\n strokeWidth = 2,\r\n viewBox = \"0 0 24 24\",\r\n className,\r\n ...props\r\n}) => {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={size}\r\n height={size}\r\n viewBox={viewBox}\r\n className={className}\r\n {...props}\r\n >\r\n {children}\r\n </svg>\r\n );\r\n};\r\n\r\n// Define props for individual icons\r\nexport type IndividualIconProps = Omit<IconProps, \"children\">;\r\n\r\n// just here as example\r\n//ri:home-fill\r\n// export const HomeFill = ({\r\n// size,\r\n// className,\r\n// ...props\r\n// }: IndividualIconProps) => {\r\n// return (\r\n// <Icon size={size} className={className} fill=\"currentColor\" {...props}>\r\n// <path d=\"M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.223a1 1 0 0 1 1.228 0l8 6.223a1 1 0 0 1 .386.79z\" />\r\n// </Icon>\r\n// );\r\n// };\r\n","import {\n createContext,\n memo,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\n//============================\n// #region AliveScope\n//============================\ntype AliveScopeContextType = {\n getPortalElement: (\n id: string,\n children: React.ReactNode,\n className?: string\n ) => HTMLElement;\n dropPortalElement: (id: string) => void;\n};\n\nconst AliveScopeContext = createContext<AliveScopeContextType | null>(null);\n\nconst AliveScopeProvider = ({\n children,\n value,\n}: {\n children: React.ReactNode;\n value: AliveScopeContextType;\n}) => {\n return (\n <AliveScopeContext.Provider value={value}>\n {children}\n </AliveScopeContext.Provider>\n );\n};\n\nconst useAliveScope = () => {\n const context = useContext(AliveScopeContext);\n\n if (!context)\n throw new Error(\"useAliveScope must be wrapped within AliveScopeProvider\");\n\n return context;\n};\n\ntype AliveScopeProps = {\n children?: React.ReactNode;\n};\n\nconst AliveScope: React.FC<AliveScopeProps> = ({ children }) => {\n const [nodes, setNodes] = useState<{\n [id: string]: { children: React.ReactNode; element: HTMLElement };\n }>({});\n\n const onMountCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n {}\n );\n const onDropCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n {}\n );\n\n const getPortalElement = (\n id: string,\n children: React.ReactNode,\n className?: string\n ) => {\n if (!nodes[id]) {\n const element = document.createElement(\"div\");\n if (id) {\n element.id = id;\n }\n if (className) {\n element.className = className;\n }\n setNodes((prevNodes) => ({\n ...prevNodes,\n [id]: { children, element },\n }));\n onMountCallbacks.current[id] = [];\n onDropCallbacks.current[id] = [];\n if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n onMountCallbacks.current[id].forEach((callback) => callback(id));\n }\n return element;\n }\n if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n onMountCallbacks.current[id].forEach((callback) => callback(id));\n }\n return nodes[id].element;\n };\n\n const dropPortalElement = (id: string) => {\n setNodes((prevNodes) => {\n const copy = { ...prevNodes };\n delete copy[id];\n return copy;\n });\n //console.log(\"dropped\", id);\n if (onDropCallbacks.current && onDropCallbacks.current[id]) {\n onDropCallbacks.current[id].forEach((callback) => callback(id));\n }\n };\n\n return (\n <AliveScopeProvider\n value={{\n getPortalElement,\n dropPortalElement,\n }}\n >\n {children}\n {Object.entries(nodes).map(([id, { children, element }]) => (\n <Component\n key={id}\n id={id}\n onMountCallbacks={onMountCallbacks}\n onDropCallbacks={onDropCallbacks}\n children={children}\n element={element}\n />\n ))}\n </AliveScopeProvider>\n );\n};\n//============================\n// #endregion AliveScope\n//============================\n\n//============================\n// #region KeepAlive\n//============================\ntype KeepAliveContextType = {\n keepAliveId: string;\n onKeepAliveMount: (\n callback: (id: string) => void,\n options?: { runOnFirstMount?: boolean }\n ) => void;\n onKeepAliveDrop: (callback: (id: string) => void) => void;\n};\n\nexport const KeepAliveContext = createContext<KeepAliveContextType | null>(\n null\n);\n\nexport const KeepAliveProvider = ({\n children,\n value,\n}: {\n children: React.ReactNode;\n value: KeepAliveContextType;\n}) => {\n return (\n <KeepAliveContext.Provider value={value}>\n {children}\n </KeepAliveContext.Provider>\n );\n};\n\nconst Component = memo<{\n id: string;\n onMountCallbacks: React.MutableRefObject<{\n [id: string]: ((id: string) => void)[];\n }>;\n onDropCallbacks: React.MutableRefObject<{\n [id: string]: ((id: string) => void)[];\n }>;\n children: React.ReactNode;\n element: HTMLElement;\n}>(({ id, onMountCallbacks, onDropCallbacks, children, element }) => {\n const onKeepAliveMount = (\n callback: (id: string) => void,\n options: { runOnFirstMount?: boolean } = { runOnFirstMount: false }\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n const runCallback = () => {\n const el = document.getElementById(id);\n if (el) {\n callback(id);\n } else {\n // If element is not found, use MutationObserver to wait for it\n const observer = new MutationObserver((_mutations, obs) => {\n const el = document.getElementById(id);\n if (el) {\n callback(id);\n obs.disconnect(); // Stop observing once element is found\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n\n // Cleanup function to disconnect the observer if component unmounts\n return () => observer.disconnect();\n }\n };\n\n if (options?.runOnFirstMount) {\n runCallback();\n }\n\n onMountCallbacks.current[id].push(runCallback);\n return () => {\n onMountCallbacks.current[id] = onMountCallbacks.current[id].filter(\n (cb) => cb !== runCallback\n );\n };\n }, []);\n };\n\n const onKeepAliveDrop = (callback: (id: string) => void) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n onDropCallbacks.current[id].push(callback);\n return () => {\n onDropCallbacks.current[id] = onDropCallbacks.current[id].filter(\n (cb) => cb !== callback\n );\n };\n }, []);\n };\n\n return (\n <KeepAliveProvider\n value={{ keepAliveId: id, onKeepAliveMount, onKeepAliveDrop }}\n >\n {createPortal(children, element, id)}\n </KeepAliveProvider>\n );\n});\n\nconst useKeepAlive = () => {\n const context = useContext(KeepAliveContext);\n\n if (!context)\n throw new Error(\"useKeepAlive must be used within KeepAliveProvider\");\n\n return context;\n};\n\ntype KeepAliveProps = React.HTMLAttributes<HTMLDivElement> & {\n aliveKey: string;\n children: React.ReactNode;\n enabled?: boolean;\n};\n\nconst KeepAlive: React.FC<KeepAliveProps> = ({\n aliveKey,\n children,\n enabled = true,\n ...others\n}) => {\n const keepAliveRef = useRef<HTMLDivElement | null>(null);\n const { getPortalElement } = useAliveScope();\n\n useEffect(() => {\n const element = getPortalElement(aliveKey, children, others.className);\n\n if (enabled) {\n if (keepAliveRef.current) {\n keepAliveRef.current.replaceWith(element);\n }\n }\n\n return () => {\n //TODO\n //callUnmountCallbacks(aliveKey)\n };\n }, [aliveKey, children, enabled, others]);\n\n return <div {...others} ref={keepAliveRef} />;\n};\n//============================\n// #endregion KeepAlive\n//============================\n\nexport { AliveScope, KeepAlive, useKeepAlive };\n"],"names":["cn","inputs","twMerge","clsx","throttle","func","limit","lastRan","timeout","args","now","debounce","delay","generateInitials","name","words","sizes","Avatar","src","size","className","jsx","jsxs","Icon","AvatarsGroup","children","animate","props","f","s","t","largeAtom","atom","listening","handleResize","useLargeScreen","useEffect","useAtomValue","useMergedRef","refs","value","ref","useRipple","enabled","contrastRipple","lg","useRef","ripple","useCallback","event","button","buttonRect","rippleSize","offsetX","offsetY","rippleWrapper","rippleEl","ripples","baseStyles","sizeStyles","focusStyles","fontWeightStyles","borderRadiusStyles","colorStyles","stateStyles","Button","forwardRef","color","fontWeight","rounded","state","onClick","withRipple","showFocus","withDisabledDelay","type","others","forwardedRef","disabledDelay","setDisabledDelay","useState","handleClick","e","rippleRef","Separator","strokeWidth","viewBox","AliveScopeContext","createContext","AliveScopeProvider","useAliveScope","context","useContext","AliveScope","nodes","setNodes","onMountCallbacks","onDropCallbacks","getPortalElement","id","element","prevNodes","callback","dropPortalElement","copy","Component","KeepAliveContext","KeepAliveProvider","memo","onKeepAliveMount","options","runCallback","observer","_mutations","obs","cb","onKeepAliveDrop","createPortal","useKeepAlive","KeepAlive","aliveKey","keepAliveRef"],"mappings":"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","x_google_ignoreList":[3]}
package/dist/index.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  import { ButtonHTMLAttributes } from 'react';
2
2
  import { ClassValue } from 'clsx';
3
3
  import { ComponentPropsWithoutRef } from 'react';
4
+ import { CSSProperties } from 'react';
4
5
  import { ForwardRefExoticComponent } from 'react';
5
6
  import { JSX } from 'react/jsx-runtime';
6
7
  import { RefAttributes } from 'react';
8
+ import { RefObject } from 'react';
7
9
 
8
10
  export declare const AliveScope: React.FC<AliveScopeProps>;
9
11
 
@@ -228,4 +230,33 @@ export declare function throttle<T extends (...args: any[]) => any>(func: T, lim
228
230
 
229
231
  export declare const useKeepAlive: () => KeepAliveContextType;
230
232
 
233
+ /**
234
+ * Custom hook that returns whether the current viewport is larger than the 'lg' breakpoint.
235
+ *
236
+ * @example
237
+ * function MyComponent() {
238
+ * const lg = useLargeScreen();
239
+ *
240
+ * return (
241
+ * <div>
242
+ * {lg
243
+ * ? <DesktopLayout />
244
+ * : <MobileLayout />
245
+ * }
246
+ * </div>
247
+ * );
248
+ * }
249
+ *
250
+ * @returns {boolean} True if the current viewport width is larger than the 'lg' breakpoint
251
+ */
252
+ export declare const useLargeScreen: () => boolean;
253
+
254
+ export declare function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T>;
255
+
256
+ export declare const useRipple: <T extends HTMLElement>(enabled?: boolean, contrastRipple?: boolean) => {
257
+ ref: RefObject<T | null>;
258
+ ripple: (event: React.MouseEvent<T>) => void;
259
+ styles: CSSProperties;
260
+ };
261
+
231
262
  export { }
package/dist/index.js CHANGED
@@ -1,29 +1,11 @@
1
- import { jsx as c, jsxs as k } from "react/jsx-runtime";
2
1
  import { clsx as B } from "clsx";
3
2
  import { twMerge as T } from "tailwind-merge";
3
+ import { jsx as c, jsxs as k } from "react/jsx-runtime";
4
4
  import { useSyncExternalStore as I, useEffect as x, useRef as v, useCallback as O, forwardRef as $, useState as C, memo as X, useContext as P, createContext as N } from "react";
5
5
  import { createPortal as z } from "react-dom";
6
6
  import { atom as F } from "@mateosuarezdev/atoms";
7
- const U = ({
8
- children: e,
9
- size: r = 24,
10
- strokeWidth: t = 2,
11
- viewBox: o = "0 0 24 24",
12
- className: s,
13
- ...a
14
- }) => /* @__PURE__ */ c(
15
- "svg",
16
- {
17
- xmlns: "http://www.w3.org/2000/svg",
18
- width: r,
19
- height: r,
20
- viewBox: o,
21
- className: s,
22
- ...a,
23
- children: e
24
- }
25
- ), f = (...e) => T(B(e));
26
- function Y(e, r = 100) {
7
+ const f = (...e) => T(B(e));
8
+ function U(e, r = 100) {
27
9
  let t = null, o = null;
28
10
  return function(...s) {
29
11
  const a = Date.now();
@@ -40,7 +22,7 @@ function fe(e, r = 500) {
40
22
  }, r);
41
23
  };
42
24
  }
43
- function G(e) {
25
+ function Y(e) {
44
26
  if (!e) return "";
45
27
  const t = e.trim().replace(/\s+/g, " ").split(" ");
46
28
  return t.length === 0 || t[0] === "" ? "" : t.length === 1 ? t[0].charAt(0).toUpperCase() : (t[0].charAt(0) + t[1].charAt(0)).toUpperCase();
@@ -71,7 +53,7 @@ const w = {
71
53
  w[t],
72
54
  o
73
55
  ),
74
- children: G(r)
56
+ children: Y(r)
75
57
  }
76
58
  ) : /* @__PURE__ */ c(
77
59
  "div",
@@ -84,7 +66,7 @@ const w = {
84
66
  o
85
67
  ),
86
68
  children: /* @__PURE__ */ k(
87
- U,
69
+ oe,
88
70
  {
89
71
  size: t === "xs" ? 16 : t === "sm" ? 20 : 24,
90
72
  fill: "none",
@@ -115,7 +97,7 @@ function he({
115
97
  }
116
98
  );
117
99
  }
118
- function H(e) {
100
+ function G(e) {
119
101
  return I(
120
102
  (r) => e.subscribe(r),
121
103
  () => e.get(),
@@ -124,22 +106,22 @@ function H(e) {
124
106
  }
125
107
  const A = F(!0);
126
108
  let y = !1;
127
- const S = Y(() => {
109
+ const S = U(() => {
128
110
  A.set(window.innerWidth > 1024);
129
111
  });
130
112
  typeof window < "u" && (y && (window.removeEventListener("resize", S), y = !1), window.addEventListener("resize", S), y = !0);
131
- const _ = () => (x(() => {
113
+ const H = () => (x(() => {
132
114
  A.set(window.innerWidth > 1024);
133
- }, []), H(A));
134
- function q(...e) {
115
+ }, []), G(A));
116
+ function _(...e) {
135
117
  return (r) => {
136
118
  e.forEach((t) => {
137
119
  typeof t == "function" ? t(r) : t != null && (t.current = r);
138
120
  });
139
121
  };
140
122
  }
141
- const J = (e = !0, r) => {
142
- const t = _(), o = v(null), s = O(
123
+ const q = (e = !0, r) => {
124
+ const t = H(), o = v(null), s = O(
143
125
  (a) => {
144
126
  if (!e || t) return;
145
127
  const b = o.current;
@@ -165,7 +147,7 @@ const J = (e = !0, r) => {
165
147
  position: "relative"
166
148
  }
167
149
  };
168
- }, Q = "relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center", V = {
150
+ }, J = "relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center", Q = {
169
151
  xs: "text-xs px-1 gap-x-0.5 py-1",
170
152
  sm: "text-sm px-2.5 gap-x-1 py-1.5",
171
153
  mdsm: "text-sm px-3 gap-x-1.5 py-2.5",
@@ -176,18 +158,18 @@ const J = (e = !0, r) => {
176
158
  iconSm: "text-sm p-2",
177
159
  iconMd: "text-base p-3",
178
160
  iconLg: "text-base p-4"
179
- }, Z = {
161
+ }, V = {
180
162
  all: "focus:ring-1",
181
163
  desktop: "lg:focus:ring-1",
182
164
  mobile: "focus:ring-1 lg:focus-ring-0",
183
165
  none: ""
184
- }, ee = {
166
+ }, Z = {
185
167
  light: "font-light",
186
168
  normal: "font-normal",
187
169
  medium: "font-medium",
188
170
  semibold: "font-semibold",
189
171
  bold: "font-bold"
190
- }, te = {
172
+ }, ee = {
191
173
  none: "rounded-none",
192
174
  1: "rounded-1",
193
175
  2: "rounded-2",
@@ -202,7 +184,7 @@ const J = (e = !0, r) => {
202
184
  11: "rounded-11",
203
185
  12: "rounded-12",
204
186
  full: "rounded-full"
205
- }, re = {
187
+ }, te = {
206
188
  transparent: "text-base-12 lg:hover:bg-base-4 focus:ring-base-6",
207
189
  transparentinactive: "text-base-11 lg:hover:bg-base-4",
208
190
  brand: "bg-brand text-brand-text lg:hover:bg-brand-hover focus:ring-base-6 border border-transparent",
@@ -217,11 +199,11 @@ const J = (e = !0, r) => {
217
199
  danger: "bg-red-4 text-red-9 lg:hover:bg-red-5 focus:ring-red-9 border border-transparent",
218
200
  dangersolid: "bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus:ring-base-6 border border-transparent",
219
201
  disabled: "bg-base-3 text-base-11 border border-transparent"
220
- }, ne = {
202
+ }, re = {
221
203
  enabled: "",
222
204
  disabled: "opacity-75",
223
205
  loading: ""
224
- }, oe = $(
206
+ }, ne = $(
225
207
  ({
226
208
  color: e = "transparent",
227
209
  size: r = "mdsm",
@@ -240,10 +222,10 @@ const J = (e = !0, r) => {
240
222
  }, m) => {
241
223
  const [K, E] = C(!1), L = (h) => {
242
224
  s === "enabled" && (d ? (E(!0), a && a(h), setTimeout(() => E(!1), 1e3)) : a && a(h));
243
- }, { ref: j, ripple: D } = J(
225
+ }, { ref: j, ripple: D } = q(
244
226
  l,
245
227
  e === "contrast" || i
246
- ), W = q(j, m);
228
+ ), W = _(j, m);
247
229
  return /* @__PURE__ */ c(
248
230
  "button",
249
231
  {
@@ -253,13 +235,13 @@ const J = (e = !0, r) => {
253
235
  onMouseDown: D,
254
236
  onClick: (h) => K ? null : L(h),
255
237
  className: f(
256
- Q,
257
- V[r],
258
- ee[t],
259
- te[o],
260
- Z[u],
261
- re[e],
262
- ne[s],
238
+ J,
239
+ Q[r],
240
+ Z[t],
241
+ ee[o],
242
+ V[u],
243
+ te[e],
244
+ re[s],
263
245
  g.disabled && "opacity-50",
264
246
  b
265
247
  ),
@@ -269,8 +251,26 @@ const J = (e = !0, r) => {
269
251
  );
270
252
  }
271
253
  );
272
- oe.displayName = "Button";
273
- const xe = ({ className: e }) => /* @__PURE__ */ c("div", { className: f("w-full h-px bg-base-4", e) }), M = N(null), se = ({
254
+ ne.displayName = "Button";
255
+ const xe = ({ className: e }) => /* @__PURE__ */ c("div", { className: f("w-full h-px bg-base-4", e) }), oe = ({
256
+ children: e,
257
+ size: r = 24,
258
+ strokeWidth: t = 2,
259
+ viewBox: o = "0 0 24 24",
260
+ className: s,
261
+ ...a
262
+ }) => /* @__PURE__ */ c(
263
+ "svg",
264
+ {
265
+ xmlns: "http://www.w3.org/2000/svg",
266
+ width: r,
267
+ height: r,
268
+ viewBox: o,
269
+ className: s,
270
+ ...a,
271
+ children: e
272
+ }
273
+ ), M = N(null), se = ({
274
274
  children: e,
275
275
  value: r
276
276
  }) => /* @__PURE__ */ c(M.Provider, { value: r, children: e }), le = () => {
@@ -381,14 +381,17 @@ export {
381
381
  ve as AliveScope,
382
382
  me as Avatar,
383
383
  he as AvatarsGroup,
384
- oe as Button,
385
- U as Icon,
384
+ ne as Button,
385
+ oe as Icon,
386
386
  ye as KeepAlive,
387
387
  xe as Separator,
388
388
  f as cn,
389
389
  fe as debounce,
390
- G as generateInitials,
391
- Y as throttle,
392
- we as useKeepAlive
390
+ Y as generateInitials,
391
+ U as throttle,
392
+ we as useKeepAlive,
393
+ H as useLargeScreen,
394
+ _ as useMergedRef,
395
+ q as useRipple
393
396
  };
394
397
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/icons/index.tsx","../src/utils/index.ts","../src/components/Avatar.tsx","../src/components/AvatarsGroup.tsx","../../../node_modules/@mateosuarezdev/atoms/dist/react.js","../src/hooks/use-large-screen.tsx","../src/hooks/use-merged-ref.tsx","../src/hooks/use-ripple.tsx","../src/components/Button.tsx","../src/components/Separator.tsx","../src/components/KeepAlive.tsx"],"sourcesContent":["/**\r\n * Props for the base Icon component that provides a consistent SVG wrapper.\r\n */\r\ninterface IconProps extends React.SVGProps<SVGSVGElement> {\r\n /** Width and height of the icon in pixels (default: 24) */\r\n size?: number | string;\r\n /** Stroke width for outlined icons (default: 2) */\r\n strokeWidth?: number;\r\n /** SVG viewBox attribute defining the coordinate system (default: \"0 0 24 24\") */\r\n viewBox?: \"0 0 24 24\" | \"0 0 48 48\" | \"0 0 512 512\";\r\n /** CSS class names for styling */\r\n className?: string;\r\n /** SVG elements (paths, circles, etc.) that define the icon shape */\r\n children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Base Icon component that provides a consistent SVG wrapper for creating custom icons.\r\n * Handles common SVG properties while allowing full customization through standard SVG props.\r\n *\r\n * @example\r\n * // Creating a reusable icon component\r\n * export const CustomIcon = ({ size, className, ...props }: IndividualIconProps) => {\r\n * return (\r\n * <Icon size={size} className={className} fill=\"currentColor\" {...props}>\r\n * <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\" />\r\n * </Icon>\r\n * );\r\n * };\r\n *\r\n * @example\r\n * // Creating a custom icon\r\n * <Icon size={32} strokeWidth={1.5}>\r\n * <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\" />\r\n * </Icon>\r\n *\r\n * @example\r\n * // Using with custom viewBox for different icon sets\r\n * <Icon viewBox=\"0 0 512 512\" size={48}>\r\n * <circle cx=\"256\" cy=\"256\" r=\"200\" />\r\n * </Icon>\r\n */\r\nexport const Icon: React.FC<IconProps> = ({\r\n children,\r\n size = 24,\r\n strokeWidth = 2,\r\n viewBox = \"0 0 24 24\",\r\n className,\r\n ...props\r\n}) => {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={size}\r\n height={size}\r\n viewBox={viewBox}\r\n className={className}\r\n {...props}\r\n >\r\n {children}\r\n </svg>\r\n );\r\n};\r\n\r\n// Define props for individual icons\r\nexport type IndividualIconProps = Omit<IconProps, \"children\">;\r\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\n//Custom ClassName\r\nexport type { ClassValue };\r\n\r\n/**Tailwind Merge + Clsx */\r\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\r\n\r\n/**\r\n * Creates a throttled function that only invokes func at most once per every limit milliseconds.\r\n * The first call executes immediately, subsequent calls are rate-limited, and the last call\r\n * during rapid firing is guaranteed to execute with the most recent arguments.\r\n *\r\n * @param func - The function to throttle\r\n * @param limit - The number of milliseconds to throttle invocations to (default: 100)\r\n * @returns A throttled version of the function\r\n *\r\n * @example\r\n * const handleScroll = throttle(() => {\r\n * console.log('Scrolled!');\r\n * }, 200);\r\n *\r\n * window.addEventListener('scroll', handleScroll);\r\n */\r\nexport function throttle<T extends (...args: any[]) => any>(\r\n func: T,\r\n limit: number = 100\r\n): (...args: Parameters<T>) => void {\r\n let lastRan: number | null = null;\r\n let timeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n return function (this: any, ...args: Parameters<T>) {\r\n const now = Date.now();\r\n\r\n if (lastRan === null || now - lastRan >= limit) {\r\n func.apply(this, args);\r\n lastRan = now;\r\n } else {\r\n if (timeout) clearTimeout(timeout);\r\n timeout = setTimeout(() => {\r\n func.apply(this, args);\r\n lastRan = Date.now();\r\n }, limit - (now - lastRan));\r\n }\r\n };\r\n}\r\n\r\n/**\r\n * Creates a debounced function that delays invoking func until after delay milliseconds\r\n * have elapsed since the last time the debounced function was invoked. Each call resets\r\n * the timer, ensuring func only executes after activity has stopped.\r\n *\r\n * @param func - The function to debounce\r\n * @param delay - The number of milliseconds to delay (default: 300)\r\n * @returns A debounced version of the function\r\n *\r\n * @example\r\n * const handleSearch = debounce((query) => {\r\n * fetchResults(query);\r\n * }, 300);\r\n *\r\n * input.addEventListener('input', (e) => handleSearch(e.target.value));\r\n */\r\nexport function debounce<T extends (...args: any[]) => any>(\r\n func: T,\r\n delay: number = 500\r\n): (...args: Parameters<T>) => void {\r\n let timeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n return function (this: any, ...args: Parameters<T>) {\r\n if (timeout) clearTimeout(timeout);\r\n\r\n timeout = setTimeout(() => {\r\n func.apply(this, args);\r\n timeout = null;\r\n }, delay);\r\n };\r\n}\r\n\r\nexport function generateInitials(name: string) {\r\n if (!name) return \"\";\r\n\r\n // Trim and remove extra spaces\r\n const trimmedName = name.trim().replace(/\\s+/g, \" \");\r\n\r\n // Split by space to get words\r\n const words = trimmedName.split(\" \");\r\n\r\n // If no words (empty string), return empty\r\n if (words.length === 0 || words[0] === \"\") {\r\n return \"\";\r\n }\r\n\r\n // If only one word, return first letter\r\n if (words.length === 1) {\r\n return words[0].charAt(0).toUpperCase();\r\n }\r\n\r\n // If two or more words, return first letter of first two words\r\n return (words[0].charAt(0) + words[1].charAt(0)).toUpperCase();\r\n}\r\n","import { Icon } from \"../icons\";\r\nimport { cn } from \"../utils\";\r\nimport { generateInitials } from \"../utils\";\r\n\r\nconst sizes = {\r\n xs: \"w-8 h-8\",\r\n sm: \"w-10 h-10 text-lg\",\r\n md: \"w-14 h-14 text-xl\",\r\n lg: \"h-20 w-20 text-2xl\",\r\n xl: \"h-24 w-24 text-2xl\",\r\n};\r\n\r\nconst Avatar = ({\r\n src,\r\n name,\r\n size = \"md\",\r\n className,\r\n}: {\r\n src?: string;\r\n name?: string;\r\n size?: keyof typeof sizes;\r\n className?: string;\r\n}) => {\r\n if (src) {\r\n return (\r\n <img\r\n alt=\"avatar\"\r\n src={src}\r\n className={cn(\"rounded-full bg-base-3\", sizes[size])}\r\n />\r\n );\r\n }\r\n\r\n if (name) {\r\n return (\r\n <p\r\n className={cn(\r\n \"rounded-full font-medium dark-theme:bg-base-3 border border-base-6 dark-theme:border-base-4 flex items-center justify-center\",\r\n sizes[size],\r\n className\r\n )}\r\n >\r\n {generateInitials(name)}\r\n </p>\r\n );\r\n }\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"rounded-full text-2xl font-medium flex items-center justify-center\",\r\n \"bg-base-2 dark-theme:bg-base-3 border border-base-4\",\r\n \"lg:hover:bg-base-3 max-lg:active:bg-base-4 transition-colors\",\r\n sizes[size],\r\n className\r\n )}\r\n >\r\n <Icon\r\n size={size === \"xs\" ? 16 : size === \"sm\" ? 20 : 24}\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth={2}\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n >\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" />\r\n </Icon>\r\n </div>\r\n );\r\n};\r\n\r\nexport { Avatar };\r\n","import { ComponentPropsWithoutRef } from \"react\";\r\nimport { cn } from \"../utils\";\r\n\r\nfunction AvatarsGroup({\r\n className,\r\n children,\r\n animate = false,\r\n ...props\r\n}: ComponentPropsWithoutRef<\"div\"> & { animate?: boolean }) {\r\n return (\r\n <div\r\n className={cn(\"flex -space-x-3 rtl:space-x-reverse\", className)}\r\n {...props}\r\n >\r\n {children}\r\n </div>\r\n );\r\n}\r\n\r\nexport { AvatarsGroup };\r\n","import { useSyncExternalStore as s, useCallback as o, useRef as i, useEffect as l } from \"react\";\nimport { computed as p, effect as b } from \"./index.js\";\nfunction A(e) {\n const t = s(\n (u) => e.subscribe(u),\n () => e.get(),\n () => e.get()\n ), r = o(\n (u) => {\n e.set(u);\n },\n [e]\n );\n return [t, r];\n}\nfunction f(e) {\n return s(\n (t) => e.subscribe(t),\n () => e.get(),\n () => e.get()\n );\n}\nfunction d(e) {\n return o(\n (t) => {\n e.set(t);\n },\n [e]\n );\n}\nfunction E(e) {\n const t = i(null);\n return t.current || (t.current = p(e)), f(t.current);\n}\nfunction S(e) {\n l(() => b(e), []);\n}\nfunction h(e, ...t) {\n const r = t.length > 0 ? t : Object.keys(e), u = {};\n return r.forEach((c) => {\n const n = e[c];\n n && typeof n == \"object\" && \"get\" in n ? u[c] = f(n) : u[c] = n;\n }), u;\n}\nexport {\n A as useAtom,\n S as useAtomEffect,\n f as useAtomValue,\n E as useComputed,\n d as useSetAtom,\n h as useStore\n};\n//# sourceMappingURL=react.js.map\n","import { throttle } from \"../utils\";\r\nimport { useEffect } from \"react\";\r\nimport { atom } from \"@mateosuarezdev/atoms\";\r\nimport { useAtomValue } from \"@mateosuarezdev/atoms/react\";\r\n\r\n/**\r\n * Standard breakpoints for responsive design.\r\n */\r\n// export const mediaQueries = {\r\n// sm: 640,\r\n// md: 768,\r\n// lg: 1024,\r\n// xl: 1280,\r\n// \"2xl\": 1536,\r\n// };\r\n\r\n/**\r\n * Observable state tracking whether the screen is larger than the 'lg' breakpoint.\r\n * Default to true on server (assumes desktop), update on client.\r\n */\r\n// const largeObservable = observable(\r\n// typeof window !== \"undefined\" ? window.innerWidth > mediaQueries.lg : true\r\n// );\r\nconst largeAtom = atom(true);\r\n\r\nlet listening = false;\r\n\r\n/**\r\n * Throttled resize handler to update screen size state.\r\n * Only updates the observable when the viewport crosses the large screen threshold.\r\n * Throttled to improve performance by limiting update frequency.\r\n */\r\nconst handleResize = throttle(() => {\r\n largeAtom.set(window.innerWidth > 1024);\r\n}); // Throttle to once per 100ms\r\n\r\n// Only set up listeners on client\r\nif (typeof window !== \"undefined\") {\r\n if (listening) {\r\n window.removeEventListener(\"resize\", handleResize);\r\n listening = false;\r\n }\r\n\r\n // Attach resize listener to update state when window is resized\r\n window.addEventListener(\"resize\", handleResize);\r\n listening = true;\r\n}\r\n\r\n/**\r\n * Custom hook that returns whether the current viewport is larger than the 'lg' breakpoint.\r\n *\r\n * @example\r\n * function MyComponent() {\r\n * const lg = useLargeScreen();\r\n *\r\n * return (\r\n * <div>\r\n * {lg\r\n * ? <DesktopLayout />\r\n * : <MobileLayout />\r\n * }\r\n * </div>\r\n * );\r\n * }\r\n *\r\n * @returns {boolean} True if the current viewport width is larger than the 'lg' breakpoint\r\n */\r\nconst useLargeScreen = (): boolean => {\r\n useEffect(() => {\r\n largeAtom.set(window.innerWidth > 1024);\r\n }, []);\r\n return useAtomValue(largeAtom);\r\n};\r\n\r\nexport { useLargeScreen };\r\n","function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\r\n return (value) => {\r\n refs.forEach((ref) => {\r\n if (typeof ref === \"function\") {\r\n ref(value);\r\n } else if (ref != null) {\r\n (ref as React.MutableRefObject<T | null>).current = value;\r\n }\r\n });\r\n };\r\n}\r\n\r\nexport { useMergedRef };\r\n","import { CSSProperties, useCallback, useRef } from \"react\";\r\nimport { useLargeScreen } from \"./use-large-screen\";\r\n\r\n// new ripple uses a wrapper so the parent doesn't need overflow-hidden\r\nconst useRipple = <T extends HTMLElement>(\r\n enabled: boolean = true,\r\n contrastRipple?: boolean\r\n) => {\r\n const lg = useLargeScreen();\r\n const ref = useRef<T>(null);\r\n\r\n const ripple = useCallback(\r\n (event: React.MouseEvent<T>) => {\r\n if (!enabled || lg) return;\r\n\r\n const button = ref.current;\r\n if (!button) return;\r\n\r\n // Get button's position and dimensions\r\n const buttonRect = button.getBoundingClientRect();\r\n const rippleSize = Math.max(buttonRect.width, buttonRect.height);\r\n const offsetX = event.clientX - buttonRect.left - rippleSize / 2;\r\n const offsetY = event.clientY - buttonRect.top - rippleSize / 2;\r\n\r\n // Create the ripple wrapper (this element holds the ripple)\r\n const rippleWrapper = document.createElement(\"span\");\r\n rippleWrapper.classList.add(\"ripple-wrapper\");\r\n\r\n // Create the ripple element (circle)\r\n const rippleEl = document.createElement(\"span\");\r\n rippleEl.classList.add(\"ripple\");\r\n rippleEl.style.backgroundColor = contrastRipple\r\n ? \"var(--ripple-contrast)\"\r\n : \"var(--ripple-main)\";\r\n\r\n // Set the position and size of the ripple\r\n rippleEl.style.width = `${rippleSize}px`;\r\n rippleEl.style.height = `${rippleSize}px`;\r\n rippleEl.style.left = `${offsetX}px`;\r\n rippleEl.style.top = `${offsetY}px`;\r\n\r\n rippleWrapper.appendChild(rippleEl);\r\n\r\n const ripples = button.getElementsByClassName(\"ripple-wrapper\");\r\n if (ripples?.length) {\r\n for (const ripple of ripples) {\r\n ripple.remove();\r\n }\r\n }\r\n\r\n // Append the ripple wrapper to the button\r\n button.appendChild(rippleWrapper);\r\n\r\n // Remove the ripple wrapper after animation\r\n setTimeout(() => {\r\n rippleWrapper.remove();\r\n }, 700); // Match the animation duration\r\n },\r\n [enabled, lg, contrastRipple]\r\n );\r\n\r\n return {\r\n ref,\r\n ripple,\r\n styles: {\r\n position: \"relative\",\r\n } as CSSProperties,\r\n };\r\n};\r\n\r\nexport { useRipple };\r\n\r\n// ios like fade effect\r\n// const useRipple = (enabled = true, contrastRipple?: boolean) => {\r\n// const lg = useLargeScreen();\r\n// const ref = useRef<HTMLElement>(null);\r\n\r\n// const ripple = useCallback(\r\n// (event: React.MouseEvent<HTMLElement>) => {\r\n// if (!enabled || lg) return;\r\n\r\n// const rippleEl = document.createElement(\"span\");\r\n// rippleEl.classList.add(\"simple-ripple\");\r\n// rippleEl.style.backgroundColor = contrastRipple\r\n// ? \"var(--ripple-contrast)\"\r\n// : \"var(--ripple-main)\";\r\n\r\n// const target = ref.current;\r\n// if (!target) return;\r\n\r\n// target.appendChild(rippleEl);\r\n\r\n// // Remove after animation\r\n// setTimeout(() => {\r\n// rippleEl.remove();\r\n// }, 400); // Match animation duration\r\n// },\r\n// [enabled, lg, contrastRipple]\r\n// );\r\n\r\n// return { ref, ripple };\r\n// };\r\n\r\n// export default useRipple;\r\n\r\n// old ripple requires parent with overflow-hidden\r\n// const useRipple = (enabled: boolean = true, contrastRipple?: boolean) => {\r\n// const lg = useLargeScreen();\r\n// const ref = useRef<HTMLElement>(null);\r\n// const ripple = useCallback(\r\n// (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\r\n// if (!lg && enabled) {\r\n// const rippleContainer = event.currentTarget.getBoundingClientRect();\r\n// const circle = document.createElement(\"span\");\r\n// const diameter = Math.max(\r\n// rippleContainer.width,\r\n// rippleContainer.height\r\n// );\r\n// const radius = diameter / 2;\r\n\r\n// circle.style.width = circle.style.height = `${diameter}px`;\r\n// circle.style.left = `${\r\n// event.clientX - (rippleContainer.left + radius)\r\n// }px`;\r\n// circle.style.top = `${\r\n// event.clientY - (rippleContainer.top + radius)\r\n// }px`;\r\n// circle.style.backgroundColor = `${\r\n// contrastRipple ? \"var(--ripple-contrast)\" : \"var(--ripple-main)\"\r\n// }`;\r\n// circle.style.pointerEvents = \"none\";\r\n// circle.classList.add(\"ripple\");\r\n\r\n// const ripples = ref.current?.getElementsByClassName(\"ripple\");\r\n// if (ripples?.length) {\r\n// for (const ripple of ripples) {\r\n// ripple.remove();\r\n// }\r\n// }\r\n\r\n// ref.current?.appendChild(circle);\r\n\r\n// (async () => {\r\n// //await sleep(750);\r\n// setTimeout(\r\n// () => ref.current?.getElementsByClassName(\"ripple\")[0]?.remove(),\r\n// 750\r\n// );\r\n// })();\r\n// }\r\n// },\r\n// [contrastRipple, lg, enabled]\r\n// );\r\n\r\n// return {\r\n// ref: ref,\r\n// ripple: ripple,\r\n// classNames: \"relative overflow-hidden inline-block\",\r\n// };\r\n// };\r\n\r\n// export default useRipple;\r\n","import { forwardRef, useState, ForwardedRef } from \"react\";\r\nimport { cn } from \"../utils\";\r\nimport { useMergedRef } from \"../hooks\";\r\nimport { useRipple } from \"../hooks/use-ripple\";\r\n\r\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\r\n color?: keyof typeof colorStyles;\r\n size?: keyof typeof sizeStyles;\r\n fontWeight?: keyof typeof fontWeightStyles;\r\n rounded?: keyof typeof borderRadiusStyles;\r\n state?: \"enabled\" | \"disabled\" | \"loading\";\r\n onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\r\n className?: string;\r\n withRipple?: boolean;\r\n contrastRipple?: boolean;\r\n showFocus?: \"all\" | \"desktop\" | \"mobile\" | \"none\";\r\n withDisabledDelay?: boolean;\r\n type?: \"button\" | \"submit\" | \"reset\";\r\n children?: React.ReactNode;\r\n};\r\n\r\n// Base button styles that apply to all variants\r\nconst baseStyles =\r\n \"relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center\"; //was pl-1.5 and rounded-lg\r\n\r\nconst sizeStyles = {\r\n xs: \"text-xs px-1 gap-x-0.5 py-1\",\r\n sm: \"text-sm px-2.5 gap-x-1 py-1.5\",\r\n mdsm: \"text-sm px-3 gap-x-1.5 py-2.5\",\r\n md: \"text-base px-4 gap-x-1.5 py-2.5\",\r\n lg: \"text-base px-4 gap-x-1.5 py-3.5\",\r\n picker: \"text-base px-2 py-2 gap-x-1.5\",\r\n iconXs: \"text-xs p-1\",\r\n iconSm: \"text-sm p-2\",\r\n iconMd: \"text-base p-3\",\r\n iconLg: \"text-base p-4\",\r\n};\r\n\r\n// Focus styles based on showFocus prop\r\nconst focusStyles = {\r\n all: \"focus:ring-1\",\r\n desktop: \"lg:focus:ring-1\",\r\n mobile: \"focus:ring-1 lg:focus-ring-0\",\r\n none: \"\",\r\n};\r\n\r\nconst fontWeightStyles = {\r\n light: \"font-light\",\r\n normal: \"font-normal\",\r\n medium: \"font-medium\",\r\n semibold: \"font-semibold\",\r\n bold: \"font-bold\",\r\n};\r\n\r\nconst borderRadiusStyles = {\r\n none: \"rounded-none\",\r\n \"1\": \"rounded-1\",\r\n \"2\": \"rounded-2\",\r\n \"3\": \"rounded-3\",\r\n \"4\": \"rounded-4\",\r\n \"5\": \"rounded-5\",\r\n \"6\": \"rounded-6\",\r\n \"7\": \"rounded-7\",\r\n \"8\": \"rounded-8\",\r\n \"9\": \"rounded-9\",\r\n \"10\": \"rounded-10\",\r\n \"11\": \"rounded-11\",\r\n \"12\": \"rounded-12\",\r\n full: \"rounded-full\",\r\n};\r\n\r\n// Color variant styles\r\nconst colorStyles = {\r\n transparent: \"text-base-12 lg:hover:bg-base-4 focus:ring-base-6\",\r\n transparentinactive: \"text-base-11 lg:hover:bg-base-4\",\r\n brand:\r\n \"bg-brand text-brand-text lg:hover:bg-brand-hover focus:ring-base-6 border border-transparent\",\r\n accent: \"bg-accent text-accent-text lg:hover:bg-accent-hover\",\r\n contrast: \"bg-base-12 text-base-1 lg:hover:bg-base-11 focus:ring-base-6\",\r\n solid:\r\n \"bg-base-3 dark-theme:bg-base-3 lg:hover:bg-base-4 border border-base-4 focus:ring-base-5\",\r\n solidhybrid:\r\n \"border border-base-5 dark-theme:border-base-4 dark-theme:bg-base-3 lg:hover:bg-base-4 focus:ring-base-6\",\r\n outline: \"border border-base-6 lg:hover:bg-base-3 focus:ring-base-6\",\r\n info: \"bg-blue-3 text-blue-9 lg:hover:bg-blue-4 lg:active:bg-blue-5 focus:ring-blue-9 border border-transparent\",\r\n success:\r\n \"bg-green-4 text-green-9 lg:hover:bg-green-5 lg:active:bg-green-6 focus:ring-green-9 border border-transparent\",\r\n warning:\r\n \"bg-yellow-4 text-yellow-9 lg:hover:bg-yellow-5 lg:active:bg-yellow-6 focus:ring-yellow-9 border border-transparent\",\r\n danger:\r\n \"bg-red-4 text-red-9 lg:hover:bg-red-5 focus:ring-red-9 border border-transparent\",\r\n dangersolid:\r\n \"bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus:ring-base-6 border border-transparent\",\r\n disabled: \"bg-base-3 text-base-11 border border-transparent\",\r\n};\r\n\r\n// State based styles\r\nconst stateStyles = {\r\n enabled: \"\",\r\n disabled: \"opacity-75\",\r\n loading: \"\",\r\n};\r\n\r\nconst Button = forwardRef(\r\n (\r\n {\r\n color = \"transparent\",\r\n size = \"mdsm\",\r\n fontWeight = \"normal\",\r\n rounded = \"6\",\r\n state = \"enabled\",\r\n onClick,\r\n className,\r\n children,\r\n withRipple = true,\r\n contrastRipple,\r\n showFocus = \"desktop\",\r\n withDisabledDelay = false,\r\n type = \"button\",\r\n ...others\r\n }: ButtonProps,\r\n forwardedRef: ForwardedRef<HTMLButtonElement>\r\n ) => {\r\n const [disabledDelay, setDisabledDelay] = useState(false);\r\n\r\n const handleClick = (\r\n e: React.MouseEvent<HTMLButtonElement, MouseEvent>\r\n ) => {\r\n if (state === \"enabled\") {\r\n if (withDisabledDelay) {\r\n setDisabledDelay(true);\r\n onClick && onClick(e);\r\n setTimeout(() => setDisabledDelay(false), 1000);\r\n } else {\r\n onClick && onClick(e);\r\n }\r\n }\r\n };\r\n\r\n const { ref: rippleRef, ripple } = useRipple(\r\n withRipple,\r\n color === \"contrast\" || contrastRipple\r\n );\r\n\r\n // Merge the ripple ref with forwarded ref\r\n const ref = useMergedRef(rippleRef, forwardedRef);\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n type={type}\r\n disabled={\r\n others.disabled\r\n ? others.disabled\r\n : state === \"disabled\" || state === \"loading\"\r\n }\r\n onMouseDown={ripple}\r\n onClick={(e) => (!disabledDelay ? handleClick(e) : null)}\r\n className={cn(\r\n baseStyles,\r\n sizeStyles[size],\r\n fontWeightStyles[fontWeight],\r\n borderRadiusStyles[rounded],\r\n focusStyles[showFocus],\r\n colorStyles[color],\r\n stateStyles[state],\r\n others.disabled && \"opacity-50\",\r\n className\r\n )}\r\n {...others}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button };\r\n","import { cn } from \"../utils\";\r\n\r\nconst Separator = ({ className }: { className?: string }) => {\r\n return <div className={cn(\"w-full h-px bg-base-4\", className)} />;\r\n};\r\n\r\nexport { Separator };\r\n","import {\n createContext,\n memo,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\n//============================\n// #region AliveScope\n//============================\ntype AliveScopeContextType = {\n getPortalElement: (\n id: string,\n children: React.ReactNode,\n className?: string\n ) => HTMLElement;\n dropPortalElement: (id: string) => void;\n};\n\nconst AliveScopeContext = createContext<AliveScopeContextType | null>(null);\n\nconst AliveScopeProvider = ({\n children,\n value,\n}: {\n children: React.ReactNode;\n value: AliveScopeContextType;\n}) => {\n return (\n <AliveScopeContext.Provider value={value}>\n {children}\n </AliveScopeContext.Provider>\n );\n};\n\nconst useAliveScope = () => {\n const context = useContext(AliveScopeContext);\n\n if (!context)\n throw new Error(\"useAliveScope must be wrapped within AliveScopeProvider\");\n\n return context;\n};\n\ntype AliveScopeProps = {\n children?: React.ReactNode;\n};\n\nconst AliveScope: React.FC<AliveScopeProps> = ({ children }) => {\n const [nodes, setNodes] = useState<{\n [id: string]: { children: React.ReactNode; element: HTMLElement };\n }>({});\n\n const onMountCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n {}\n );\n const onDropCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n {}\n );\n\n const getPortalElement = (\n id: string,\n children: React.ReactNode,\n className?: string\n ) => {\n if (!nodes[id]) {\n const element = document.createElement(\"div\");\n if (id) {\n element.id = id;\n }\n if (className) {\n element.className = className;\n }\n setNodes((prevNodes) => ({\n ...prevNodes,\n [id]: { children, element },\n }));\n onMountCallbacks.current[id] = [];\n onDropCallbacks.current[id] = [];\n if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n onMountCallbacks.current[id].forEach((callback) => callback(id));\n }\n return element;\n }\n if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n onMountCallbacks.current[id].forEach((callback) => callback(id));\n }\n return nodes[id].element;\n };\n\n const dropPortalElement = (id: string) => {\n setNodes((prevNodes) => {\n const copy = { ...prevNodes };\n delete copy[id];\n return copy;\n });\n //console.log(\"dropped\", id);\n if (onDropCallbacks.current && onDropCallbacks.current[id]) {\n onDropCallbacks.current[id].forEach((callback) => callback(id));\n }\n };\n\n return (\n <AliveScopeProvider\n value={{\n getPortalElement,\n dropPortalElement,\n }}\n >\n {children}\n {Object.entries(nodes).map(([id, { children, element }]) => (\n <Component\n key={id}\n id={id}\n onMountCallbacks={onMountCallbacks}\n onDropCallbacks={onDropCallbacks}\n children={children}\n element={element}\n />\n ))}\n </AliveScopeProvider>\n );\n};\n//============================\n// #endregion AliveScope\n//============================\n\n//============================\n// #region KeepAlive\n//============================\ntype KeepAliveContextType = {\n keepAliveId: string;\n onKeepAliveMount: (\n callback: (id: string) => void,\n options?: { runOnFirstMount?: boolean }\n ) => void;\n onKeepAliveDrop: (callback: (id: string) => void) => void;\n};\n\nexport const KeepAliveContext = createContext<KeepAliveContextType | null>(\n null\n);\n\nexport const KeepAliveProvider = ({\n children,\n value,\n}: {\n children: React.ReactNode;\n value: KeepAliveContextType;\n}) => {\n return (\n <KeepAliveContext.Provider value={value}>\n {children}\n </KeepAliveContext.Provider>\n );\n};\n\nconst Component = memo<{\n id: string;\n onMountCallbacks: React.MutableRefObject<{\n [id: string]: ((id: string) => void)[];\n }>;\n onDropCallbacks: React.MutableRefObject<{\n [id: string]: ((id: string) => void)[];\n }>;\n children: React.ReactNode;\n element: HTMLElement;\n}>(({ id, onMountCallbacks, onDropCallbacks, children, element }) => {\n const onKeepAliveMount = (\n callback: (id: string) => void,\n options: { runOnFirstMount?: boolean } = { runOnFirstMount: false }\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n const runCallback = () => {\n const el = document.getElementById(id);\n if (el) {\n callback(id);\n } else {\n // If element is not found, use MutationObserver to wait for it\n const observer = new MutationObserver((_mutations, obs) => {\n const el = document.getElementById(id);\n if (el) {\n callback(id);\n obs.disconnect(); // Stop observing once element is found\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n\n // Cleanup function to disconnect the observer if component unmounts\n return () => observer.disconnect();\n }\n };\n\n if (options?.runOnFirstMount) {\n runCallback();\n }\n\n onMountCallbacks.current[id].push(runCallback);\n return () => {\n onMountCallbacks.current[id] = onMountCallbacks.current[id].filter(\n (cb) => cb !== runCallback\n );\n };\n }, []);\n };\n\n const onKeepAliveDrop = (callback: (id: string) => void) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n onDropCallbacks.current[id].push(callback);\n return () => {\n onDropCallbacks.current[id] = onDropCallbacks.current[id].filter(\n (cb) => cb !== callback\n );\n };\n }, []);\n };\n\n return (\n <KeepAliveProvider\n value={{ keepAliveId: id, onKeepAliveMount, onKeepAliveDrop }}\n >\n {createPortal(children, element, id)}\n </KeepAliveProvider>\n );\n});\n\nconst useKeepAlive = () => {\n const context = useContext(KeepAliveContext);\n\n if (!context)\n throw new Error(\"useKeepAlive must be used within KeepAliveProvider\");\n\n return context;\n};\n\ntype KeepAliveProps = React.HTMLAttributes<HTMLDivElement> & {\n aliveKey: string;\n children: React.ReactNode;\n enabled?: boolean;\n};\n\nconst KeepAlive: React.FC<KeepAliveProps> = ({\n aliveKey,\n children,\n enabled = true,\n ...others\n}) => {\n const keepAliveRef = useRef<HTMLDivElement | null>(null);\n const { getPortalElement } = useAliveScope();\n\n useEffect(() => {\n const element = getPortalElement(aliveKey, children, others.className);\n\n if (enabled) {\n if (keepAliveRef.current) {\n keepAliveRef.current.replaceWith(element);\n }\n }\n\n return () => {\n //TODO\n //callUnmountCallbacks(aliveKey)\n };\n }, [aliveKey, children, enabled, others]);\n\n return <div {...others} ref={keepAliveRef} />;\n};\n//============================\n// #endregion KeepAlive\n//============================\n\nexport { AliveScope, KeepAlive, useKeepAlive };\n"],"names":["Icon","children","size","strokeWidth","viewBox","className","props","jsx","cn","inputs","twMerge","clsx","throttle","func","limit","lastRan","timeout","args","now","debounce","delay","generateInitials","name","words","sizes","Avatar","src","jsxs","AvatarsGroup","animate","f","s","t","largeAtom","atom","listening","handleResize","useLargeScreen","useEffect","useAtomValue","useMergedRef","refs","value","ref","useRipple","enabled","contrastRipple","lg","useRef","ripple","useCallback","event","button","buttonRect","rippleSize","offsetX","offsetY","rippleWrapper","rippleEl","ripples","baseStyles","sizeStyles","focusStyles","fontWeightStyles","borderRadiusStyles","colorStyles","stateStyles","Button","forwardRef","color","fontWeight","rounded","state","onClick","withRipple","showFocus","withDisabledDelay","type","others","forwardedRef","disabledDelay","setDisabledDelay","useState","handleClick","e","rippleRef","Separator","AliveScopeContext","createContext","AliveScopeProvider","useAliveScope","context","useContext","AliveScope","nodes","setNodes","onMountCallbacks","onDropCallbacks","id","element","prevNodes","callback","copy","Component","KeepAliveContext","KeepAliveProvider","memo","options","runCallback","observer","_mutations","obs","cb","createPortal","useKeepAlive","KeepAlive","aliveKey","keepAliveRef","getPortalElement"],"mappings":"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","x_google_ignoreList":[4]}
1
+ {"version":3,"file":"index.js","sources":["../src/utils/index.ts","../src/components/Avatar.tsx","../src/components/AvatarsGroup.tsx","../../../node_modules/@mateosuarezdev/atoms/dist/react.js","../src/hooks/use-large-screen.tsx","../src/hooks/use-merged-ref.tsx","../src/hooks/use-ripple.tsx","../src/components/Button.tsx","../src/components/Separator.tsx","../src/components/Icon.tsx","../src/components/KeepAlive.tsx"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\n//Custom ClassName\r\nexport type { ClassValue };\r\n\r\n/**Tailwind Merge + Clsx */\r\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\r\n\r\n/**\r\n * Creates a throttled function that only invokes func at most once per every limit milliseconds.\r\n * The first call executes immediately, subsequent calls are rate-limited, and the last call\r\n * during rapid firing is guaranteed to execute with the most recent arguments.\r\n *\r\n * @param func - The function to throttle\r\n * @param limit - The number of milliseconds to throttle invocations to (default: 100)\r\n * @returns A throttled version of the function\r\n *\r\n * @example\r\n * const handleScroll = throttle(() => {\r\n * console.log('Scrolled!');\r\n * }, 200);\r\n *\r\n * window.addEventListener('scroll', handleScroll);\r\n */\r\nexport function throttle<T extends (...args: any[]) => any>(\r\n func: T,\r\n limit: number = 100\r\n): (...args: Parameters<T>) => void {\r\n let lastRan: number | null = null;\r\n let timeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n return function (this: any, ...args: Parameters<T>) {\r\n const now = Date.now();\r\n\r\n if (lastRan === null || now - lastRan >= limit) {\r\n func.apply(this, args);\r\n lastRan = now;\r\n } else {\r\n if (timeout) clearTimeout(timeout);\r\n timeout = setTimeout(() => {\r\n func.apply(this, args);\r\n lastRan = Date.now();\r\n }, limit - (now - lastRan));\r\n }\r\n };\r\n}\r\n\r\n/**\r\n * Creates a debounced function that delays invoking func until after delay milliseconds\r\n * have elapsed since the last time the debounced function was invoked. Each call resets\r\n * the timer, ensuring func only executes after activity has stopped.\r\n *\r\n * @param func - The function to debounce\r\n * @param delay - The number of milliseconds to delay (default: 300)\r\n * @returns A debounced version of the function\r\n *\r\n * @example\r\n * const handleSearch = debounce((query) => {\r\n * fetchResults(query);\r\n * }, 300);\r\n *\r\n * input.addEventListener('input', (e) => handleSearch(e.target.value));\r\n */\r\nexport function debounce<T extends (...args: any[]) => any>(\r\n func: T,\r\n delay: number = 500\r\n): (...args: Parameters<T>) => void {\r\n let timeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n return function (this: any, ...args: Parameters<T>) {\r\n if (timeout) clearTimeout(timeout);\r\n\r\n timeout = setTimeout(() => {\r\n func.apply(this, args);\r\n timeout = null;\r\n }, delay);\r\n };\r\n}\r\n\r\nexport function generateInitials(name: string) {\r\n if (!name) return \"\";\r\n\r\n // Trim and remove extra spaces\r\n const trimmedName = name.trim().replace(/\\s+/g, \" \");\r\n\r\n // Split by space to get words\r\n const words = trimmedName.split(\" \");\r\n\r\n // If no words (empty string), return empty\r\n if (words.length === 0 || words[0] === \"\") {\r\n return \"\";\r\n }\r\n\r\n // If only one word, return first letter\r\n if (words.length === 1) {\r\n return words[0].charAt(0).toUpperCase();\r\n }\r\n\r\n // If two or more words, return first letter of first two words\r\n return (words[0].charAt(0) + words[1].charAt(0)).toUpperCase();\r\n}\r\n","import { Icon } from \".\";\r\nimport { cn } from \"../utils\";\r\nimport { generateInitials } from \"../utils\";\r\n\r\nconst sizes = {\r\n xs: \"w-8 h-8\",\r\n sm: \"w-10 h-10 text-lg\",\r\n md: \"w-14 h-14 text-xl\",\r\n lg: \"h-20 w-20 text-2xl\",\r\n xl: \"h-24 w-24 text-2xl\",\r\n};\r\n\r\nconst Avatar = ({\r\n src,\r\n name,\r\n size = \"md\",\r\n className,\r\n}: {\r\n src?: string;\r\n name?: string;\r\n size?: keyof typeof sizes;\r\n className?: string;\r\n}) => {\r\n if (src) {\r\n return (\r\n <img\r\n alt=\"avatar\"\r\n src={src}\r\n className={cn(\"rounded-full bg-base-3\", sizes[size])}\r\n />\r\n );\r\n }\r\n\r\n if (name) {\r\n return (\r\n <p\r\n className={cn(\r\n \"rounded-full font-medium dark-theme:bg-base-3 border border-base-6 dark-theme:border-base-4 flex items-center justify-center\",\r\n sizes[size],\r\n className\r\n )}\r\n >\r\n {generateInitials(name)}\r\n </p>\r\n );\r\n }\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"rounded-full text-2xl font-medium flex items-center justify-center\",\r\n \"bg-base-2 dark-theme:bg-base-3 border border-base-4\",\r\n \"lg:hover:bg-base-3 max-lg:active:bg-base-4 transition-colors\",\r\n sizes[size],\r\n className\r\n )}\r\n >\r\n <Icon\r\n size={size === \"xs\" ? 16 : size === \"sm\" ? 20 : 24}\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth={2}\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n >\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" />\r\n </Icon>\r\n </div>\r\n );\r\n};\r\n\r\nexport { Avatar };\r\n","import { ComponentPropsWithoutRef } from \"react\";\r\nimport { cn } from \"../utils\";\r\n\r\nfunction AvatarsGroup({\r\n className,\r\n children,\r\n animate = false,\r\n ...props\r\n}: ComponentPropsWithoutRef<\"div\"> & { animate?: boolean }) {\r\n return (\r\n <div\r\n className={cn(\"flex -space-x-3 rtl:space-x-reverse\", className)}\r\n {...props}\r\n >\r\n {children}\r\n </div>\r\n );\r\n}\r\n\r\nexport { AvatarsGroup };\r\n","import { useSyncExternalStore as s, useCallback as o, useRef as i, useEffect as l } from \"react\";\nimport { computed as p, effect as b } from \"./index.js\";\nfunction A(e) {\n const t = s(\n (u) => e.subscribe(u),\n () => e.get(),\n () => e.get()\n ), r = o(\n (u) => {\n e.set(u);\n },\n [e]\n );\n return [t, r];\n}\nfunction f(e) {\n return s(\n (t) => e.subscribe(t),\n () => e.get(),\n () => e.get()\n );\n}\nfunction d(e) {\n return o(\n (t) => {\n e.set(t);\n },\n [e]\n );\n}\nfunction E(e) {\n const t = i(null);\n return t.current || (t.current = p(e)), f(t.current);\n}\nfunction S(e) {\n l(() => b(e), []);\n}\nfunction h(e, ...t) {\n const r = t.length > 0 ? t : Object.keys(e), u = {};\n return r.forEach((c) => {\n const n = e[c];\n n && typeof n == \"object\" && \"get\" in n ? u[c] = f(n) : u[c] = n;\n }), u;\n}\nexport {\n A as useAtom,\n S as useAtomEffect,\n f as useAtomValue,\n E as useComputed,\n d as useSetAtom,\n h as useStore\n};\n//# sourceMappingURL=react.js.map\n","import { throttle } from \"../utils\";\r\nimport { useEffect } from \"react\";\r\nimport { atom } from \"@mateosuarezdev/atoms\";\r\nimport { useAtomValue } from \"@mateosuarezdev/atoms/react\";\r\n\r\n/**\r\n * Standard breakpoints for responsive design.\r\n */\r\n// export const mediaQueries = {\r\n// sm: 640,\r\n// md: 768,\r\n// lg: 1024,\r\n// xl: 1280,\r\n// \"2xl\": 1536,\r\n// };\r\n\r\n/**\r\n * Observable state tracking whether the screen is larger than the 'lg' breakpoint.\r\n * Default to true on server (assumes desktop), update on client.\r\n */\r\n// const largeObservable = observable(\r\n// typeof window !== \"undefined\" ? window.innerWidth > mediaQueries.lg : true\r\n// );\r\nconst largeAtom = atom(true);\r\n\r\nlet listening = false;\r\n\r\n/**\r\n * Throttled resize handler to update screen size state.\r\n * Only updates the observable when the viewport crosses the large screen threshold.\r\n * Throttled to improve performance by limiting update frequency.\r\n */\r\nconst handleResize = throttle(() => {\r\n largeAtom.set(window.innerWidth > 1024);\r\n}); // Throttle to once per 100ms\r\n\r\n// Only set up listeners on client\r\nif (typeof window !== \"undefined\") {\r\n if (listening) {\r\n window.removeEventListener(\"resize\", handleResize);\r\n listening = false;\r\n }\r\n\r\n // Attach resize listener to update state when window is resized\r\n window.addEventListener(\"resize\", handleResize);\r\n listening = true;\r\n}\r\n\r\n/**\r\n * Custom hook that returns whether the current viewport is larger than the 'lg' breakpoint.\r\n *\r\n * @example\r\n * function MyComponent() {\r\n * const lg = useLargeScreen();\r\n *\r\n * return (\r\n * <div>\r\n * {lg\r\n * ? <DesktopLayout />\r\n * : <MobileLayout />\r\n * }\r\n * </div>\r\n * );\r\n * }\r\n *\r\n * @returns {boolean} True if the current viewport width is larger than the 'lg' breakpoint\r\n */\r\nconst useLargeScreen = (): boolean => {\r\n useEffect(() => {\r\n largeAtom.set(window.innerWidth > 1024);\r\n }, []);\r\n return useAtomValue(largeAtom);\r\n};\r\n\r\nexport { useLargeScreen };\r\n","function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {\r\n return (value) => {\r\n refs.forEach((ref) => {\r\n if (typeof ref === \"function\") {\r\n ref(value);\r\n } else if (ref != null) {\r\n (ref as React.MutableRefObject<T | null>).current = value;\r\n }\r\n });\r\n };\r\n}\r\n\r\nexport { useMergedRef };\r\n","import { CSSProperties, useCallback, useRef } from \"react\";\r\nimport { useLargeScreen } from \"./use-large-screen\";\r\n\r\n// new ripple uses a wrapper so the parent doesn't need overflow-hidden\r\nconst useRipple = <T extends HTMLElement>(\r\n enabled: boolean = true,\r\n contrastRipple?: boolean\r\n) => {\r\n const lg = useLargeScreen();\r\n const ref = useRef<T>(null);\r\n\r\n const ripple = useCallback(\r\n (event: React.MouseEvent<T>) => {\r\n if (!enabled || lg) return;\r\n\r\n const button = ref.current;\r\n if (!button) return;\r\n\r\n // Get button's position and dimensions\r\n const buttonRect = button.getBoundingClientRect();\r\n const rippleSize = Math.max(buttonRect.width, buttonRect.height);\r\n const offsetX = event.clientX - buttonRect.left - rippleSize / 2;\r\n const offsetY = event.clientY - buttonRect.top - rippleSize / 2;\r\n\r\n // Create the ripple wrapper (this element holds the ripple)\r\n const rippleWrapper = document.createElement(\"span\");\r\n rippleWrapper.classList.add(\"ripple-wrapper\");\r\n\r\n // Create the ripple element (circle)\r\n const rippleEl = document.createElement(\"span\");\r\n rippleEl.classList.add(\"ripple\");\r\n rippleEl.style.backgroundColor = contrastRipple\r\n ? \"var(--ripple-contrast)\"\r\n : \"var(--ripple-main)\";\r\n\r\n // Set the position and size of the ripple\r\n rippleEl.style.width = `${rippleSize}px`;\r\n rippleEl.style.height = `${rippleSize}px`;\r\n rippleEl.style.left = `${offsetX}px`;\r\n rippleEl.style.top = `${offsetY}px`;\r\n\r\n rippleWrapper.appendChild(rippleEl);\r\n\r\n const ripples = button.getElementsByClassName(\"ripple-wrapper\");\r\n if (ripples?.length) {\r\n for (const ripple of ripples) {\r\n ripple.remove();\r\n }\r\n }\r\n\r\n // Append the ripple wrapper to the button\r\n button.appendChild(rippleWrapper);\r\n\r\n // Remove the ripple wrapper after animation\r\n setTimeout(() => {\r\n rippleWrapper.remove();\r\n }, 700); // Match the animation duration\r\n },\r\n [enabled, lg, contrastRipple]\r\n );\r\n\r\n return {\r\n ref,\r\n ripple,\r\n styles: {\r\n position: \"relative\",\r\n } as CSSProperties,\r\n };\r\n};\r\n\r\nexport { useRipple };\r\n\r\n// ios like fade effect\r\n// const useRipple = (enabled = true, contrastRipple?: boolean) => {\r\n// const lg = useLargeScreen();\r\n// const ref = useRef<HTMLElement>(null);\r\n\r\n// const ripple = useCallback(\r\n// (event: React.MouseEvent<HTMLElement>) => {\r\n// if (!enabled || lg) return;\r\n\r\n// const rippleEl = document.createElement(\"span\");\r\n// rippleEl.classList.add(\"simple-ripple\");\r\n// rippleEl.style.backgroundColor = contrastRipple\r\n// ? \"var(--ripple-contrast)\"\r\n// : \"var(--ripple-main)\";\r\n\r\n// const target = ref.current;\r\n// if (!target) return;\r\n\r\n// target.appendChild(rippleEl);\r\n\r\n// // Remove after animation\r\n// setTimeout(() => {\r\n// rippleEl.remove();\r\n// }, 400); // Match animation duration\r\n// },\r\n// [enabled, lg, contrastRipple]\r\n// );\r\n\r\n// return { ref, ripple };\r\n// };\r\n\r\n// export default useRipple;\r\n\r\n// old ripple requires parent with overflow-hidden\r\n// const useRipple = (enabled: boolean = true, contrastRipple?: boolean) => {\r\n// const lg = useLargeScreen();\r\n// const ref = useRef<HTMLElement>(null);\r\n// const ripple = useCallback(\r\n// (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\r\n// if (!lg && enabled) {\r\n// const rippleContainer = event.currentTarget.getBoundingClientRect();\r\n// const circle = document.createElement(\"span\");\r\n// const diameter = Math.max(\r\n// rippleContainer.width,\r\n// rippleContainer.height\r\n// );\r\n// const radius = diameter / 2;\r\n\r\n// circle.style.width = circle.style.height = `${diameter}px`;\r\n// circle.style.left = `${\r\n// event.clientX - (rippleContainer.left + radius)\r\n// }px`;\r\n// circle.style.top = `${\r\n// event.clientY - (rippleContainer.top + radius)\r\n// }px`;\r\n// circle.style.backgroundColor = `${\r\n// contrastRipple ? \"var(--ripple-contrast)\" : \"var(--ripple-main)\"\r\n// }`;\r\n// circle.style.pointerEvents = \"none\";\r\n// circle.classList.add(\"ripple\");\r\n\r\n// const ripples = ref.current?.getElementsByClassName(\"ripple\");\r\n// if (ripples?.length) {\r\n// for (const ripple of ripples) {\r\n// ripple.remove();\r\n// }\r\n// }\r\n\r\n// ref.current?.appendChild(circle);\r\n\r\n// (async () => {\r\n// //await sleep(750);\r\n// setTimeout(\r\n// () => ref.current?.getElementsByClassName(\"ripple\")[0]?.remove(),\r\n// 750\r\n// );\r\n// })();\r\n// }\r\n// },\r\n// [contrastRipple, lg, enabled]\r\n// );\r\n\r\n// return {\r\n// ref: ref,\r\n// ripple: ripple,\r\n// classNames: \"relative overflow-hidden inline-block\",\r\n// };\r\n// };\r\n\r\n// export default useRipple;\r\n","import { forwardRef, useState, ForwardedRef } from \"react\";\r\nimport { cn } from \"../utils\";\r\nimport { useMergedRef } from \"../hooks\";\r\nimport { useRipple } from \"../hooks/use-ripple\";\r\n\r\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\r\n color?: keyof typeof colorStyles;\r\n size?: keyof typeof sizeStyles;\r\n fontWeight?: keyof typeof fontWeightStyles;\r\n rounded?: keyof typeof borderRadiusStyles;\r\n state?: \"enabled\" | \"disabled\" | \"loading\";\r\n onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\r\n className?: string;\r\n withRipple?: boolean;\r\n contrastRipple?: boolean;\r\n showFocus?: \"all\" | \"desktop\" | \"mobile\" | \"none\";\r\n withDisabledDelay?: boolean;\r\n type?: \"button\" | \"submit\" | \"reset\";\r\n children?: React.ReactNode;\r\n};\r\n\r\n// Base button styles that apply to all variants\r\nconst baseStyles =\r\n \"relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center\"; //was pl-1.5 and rounded-lg\r\n\r\nconst sizeStyles = {\r\n xs: \"text-xs px-1 gap-x-0.5 py-1\",\r\n sm: \"text-sm px-2.5 gap-x-1 py-1.5\",\r\n mdsm: \"text-sm px-3 gap-x-1.5 py-2.5\",\r\n md: \"text-base px-4 gap-x-1.5 py-2.5\",\r\n lg: \"text-base px-4 gap-x-1.5 py-3.5\",\r\n picker: \"text-base px-2 py-2 gap-x-1.5\",\r\n iconXs: \"text-xs p-1\",\r\n iconSm: \"text-sm p-2\",\r\n iconMd: \"text-base p-3\",\r\n iconLg: \"text-base p-4\",\r\n};\r\n\r\n// Focus styles based on showFocus prop\r\nconst focusStyles = {\r\n all: \"focus:ring-1\",\r\n desktop: \"lg:focus:ring-1\",\r\n mobile: \"focus:ring-1 lg:focus-ring-0\",\r\n none: \"\",\r\n};\r\n\r\nconst fontWeightStyles = {\r\n light: \"font-light\",\r\n normal: \"font-normal\",\r\n medium: \"font-medium\",\r\n semibold: \"font-semibold\",\r\n bold: \"font-bold\",\r\n};\r\n\r\nconst borderRadiusStyles = {\r\n none: \"rounded-none\",\r\n \"1\": \"rounded-1\",\r\n \"2\": \"rounded-2\",\r\n \"3\": \"rounded-3\",\r\n \"4\": \"rounded-4\",\r\n \"5\": \"rounded-5\",\r\n \"6\": \"rounded-6\",\r\n \"7\": \"rounded-7\",\r\n \"8\": \"rounded-8\",\r\n \"9\": \"rounded-9\",\r\n \"10\": \"rounded-10\",\r\n \"11\": \"rounded-11\",\r\n \"12\": \"rounded-12\",\r\n full: \"rounded-full\",\r\n};\r\n\r\n// Color variant styles\r\nconst colorStyles = {\r\n transparent: \"text-base-12 lg:hover:bg-base-4 focus:ring-base-6\",\r\n transparentinactive: \"text-base-11 lg:hover:bg-base-4\",\r\n brand:\r\n \"bg-brand text-brand-text lg:hover:bg-brand-hover focus:ring-base-6 border border-transparent\",\r\n accent: \"bg-accent text-accent-text lg:hover:bg-accent-hover\",\r\n contrast: \"bg-base-12 text-base-1 lg:hover:bg-base-11 focus:ring-base-6\",\r\n solid:\r\n \"bg-base-3 dark-theme:bg-base-3 lg:hover:bg-base-4 border border-base-4 focus:ring-base-5\",\r\n solidhybrid:\r\n \"border border-base-5 dark-theme:border-base-4 dark-theme:bg-base-3 lg:hover:bg-base-4 focus:ring-base-6\",\r\n outline: \"border border-base-6 lg:hover:bg-base-3 focus:ring-base-6\",\r\n info: \"bg-blue-3 text-blue-9 lg:hover:bg-blue-4 lg:active:bg-blue-5 focus:ring-blue-9 border border-transparent\",\r\n success:\r\n \"bg-green-4 text-green-9 lg:hover:bg-green-5 lg:active:bg-green-6 focus:ring-green-9 border border-transparent\",\r\n warning:\r\n \"bg-yellow-4 text-yellow-9 lg:hover:bg-yellow-5 lg:active:bg-yellow-6 focus:ring-yellow-9 border border-transparent\",\r\n danger:\r\n \"bg-red-4 text-red-9 lg:hover:bg-red-5 focus:ring-red-9 border border-transparent\",\r\n dangersolid:\r\n \"bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus:ring-base-6 border border-transparent\",\r\n disabled: \"bg-base-3 text-base-11 border border-transparent\",\r\n};\r\n\r\n// State based styles\r\nconst stateStyles = {\r\n enabled: \"\",\r\n disabled: \"opacity-75\",\r\n loading: \"\",\r\n};\r\n\r\nconst Button = forwardRef(\r\n (\r\n {\r\n color = \"transparent\",\r\n size = \"mdsm\",\r\n fontWeight = \"normal\",\r\n rounded = \"6\",\r\n state = \"enabled\",\r\n onClick,\r\n className,\r\n children,\r\n withRipple = true,\r\n contrastRipple,\r\n showFocus = \"desktop\",\r\n withDisabledDelay = false,\r\n type = \"button\",\r\n ...others\r\n }: ButtonProps,\r\n forwardedRef: ForwardedRef<HTMLButtonElement>\r\n ) => {\r\n const [disabledDelay, setDisabledDelay] = useState(false);\r\n\r\n const handleClick = (\r\n e: React.MouseEvent<HTMLButtonElement, MouseEvent>\r\n ) => {\r\n if (state === \"enabled\") {\r\n if (withDisabledDelay) {\r\n setDisabledDelay(true);\r\n onClick && onClick(e);\r\n setTimeout(() => setDisabledDelay(false), 1000);\r\n } else {\r\n onClick && onClick(e);\r\n }\r\n }\r\n };\r\n\r\n const { ref: rippleRef, ripple } = useRipple(\r\n withRipple,\r\n color === \"contrast\" || contrastRipple\r\n );\r\n\r\n // Merge the ripple ref with forwarded ref\r\n const ref = useMergedRef(rippleRef, forwardedRef);\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n type={type}\r\n disabled={\r\n others.disabled\r\n ? others.disabled\r\n : state === \"disabled\" || state === \"loading\"\r\n }\r\n onMouseDown={ripple}\r\n onClick={(e) => (!disabledDelay ? handleClick(e) : null)}\r\n className={cn(\r\n baseStyles,\r\n sizeStyles[size],\r\n fontWeightStyles[fontWeight],\r\n borderRadiusStyles[rounded],\r\n focusStyles[showFocus],\r\n colorStyles[color],\r\n stateStyles[state],\r\n others.disabled && \"opacity-50\",\r\n className\r\n )}\r\n {...others}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button };\r\n","import { cn } from \"../utils\";\r\n\r\nconst Separator = ({ className }: { className?: string }) => {\r\n return <div className={cn(\"w-full h-px bg-base-4\", className)} />;\r\n};\r\n\r\nexport { Separator };\r\n","/**\r\n * Props for the base Icon component that provides a consistent SVG wrapper.\r\n */\r\ninterface IconProps extends React.SVGProps<SVGSVGElement> {\r\n /** Width and height of the icon in pixels (default: 24) */\r\n size?: number | string;\r\n /** Stroke width for outlined icons (default: 2) */\r\n strokeWidth?: number;\r\n /** SVG viewBox attribute defining the coordinate system (default: \"0 0 24 24\") */\r\n viewBox?: \"0 0 24 24\" | \"0 0 48 48\" | \"0 0 512 512\";\r\n /** CSS class names for styling */\r\n className?: string;\r\n /** SVG elements (paths, circles, etc.) that define the icon shape */\r\n children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Base Icon component that provides a consistent SVG wrapper for creating custom icons.\r\n * Handles common SVG properties while allowing full customization through standard SVG props.\r\n *\r\n * @example\r\n * // Creating a reusable icon component\r\n * export const CustomIcon = ({ size, className, ...props }: IndividualIconProps) => {\r\n * return (\r\n * <Icon size={size} className={className} fill=\"currentColor\" {...props}>\r\n * <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\" />\r\n * </Icon>\r\n * );\r\n * };\r\n *\r\n * @example\r\n * // Creating a custom icon\r\n * <Icon size={32} strokeWidth={1.5}>\r\n * <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\" />\r\n * </Icon>\r\n *\r\n * @example\r\n * // Using with custom viewBox for different icon sets\r\n * <Icon viewBox=\"0 0 512 512\" size={48}>\r\n * <circle cx=\"256\" cy=\"256\" r=\"200\" />\r\n * </Icon>\r\n */\r\nexport const Icon: React.FC<IconProps> = ({\r\n children,\r\n size = 24,\r\n strokeWidth = 2,\r\n viewBox = \"0 0 24 24\",\r\n className,\r\n ...props\r\n}) => {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={size}\r\n height={size}\r\n viewBox={viewBox}\r\n className={className}\r\n {...props}\r\n >\r\n {children}\r\n </svg>\r\n );\r\n};\r\n\r\n// Define props for individual icons\r\nexport type IndividualIconProps = Omit<IconProps, \"children\">;\r\n\r\n// just here as example\r\n//ri:home-fill\r\n// export const HomeFill = ({\r\n// size,\r\n// className,\r\n// ...props\r\n// }: IndividualIconProps) => {\r\n// return (\r\n// <Icon size={size} className={className} fill=\"currentColor\" {...props}>\r\n// <path d=\"M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.223a1 1 0 0 1 1.228 0l8 6.223a1 1 0 0 1 .386.79z\" />\r\n// </Icon>\r\n// );\r\n// };\r\n","import {\n createContext,\n memo,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\n//============================\n// #region AliveScope\n//============================\ntype AliveScopeContextType = {\n getPortalElement: (\n id: string,\n children: React.ReactNode,\n className?: string\n ) => HTMLElement;\n dropPortalElement: (id: string) => void;\n};\n\nconst AliveScopeContext = createContext<AliveScopeContextType | null>(null);\n\nconst AliveScopeProvider = ({\n children,\n value,\n}: {\n children: React.ReactNode;\n value: AliveScopeContextType;\n}) => {\n return (\n <AliveScopeContext.Provider value={value}>\n {children}\n </AliveScopeContext.Provider>\n );\n};\n\nconst useAliveScope = () => {\n const context = useContext(AliveScopeContext);\n\n if (!context)\n throw new Error(\"useAliveScope must be wrapped within AliveScopeProvider\");\n\n return context;\n};\n\ntype AliveScopeProps = {\n children?: React.ReactNode;\n};\n\nconst AliveScope: React.FC<AliveScopeProps> = ({ children }) => {\n const [nodes, setNodes] = useState<{\n [id: string]: { children: React.ReactNode; element: HTMLElement };\n }>({});\n\n const onMountCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n {}\n );\n const onDropCallbacks = useRef<{ [id: string]: ((id: string) => void)[] }>(\n {}\n );\n\n const getPortalElement = (\n id: string,\n children: React.ReactNode,\n className?: string\n ) => {\n if (!nodes[id]) {\n const element = document.createElement(\"div\");\n if (id) {\n element.id = id;\n }\n if (className) {\n element.className = className;\n }\n setNodes((prevNodes) => ({\n ...prevNodes,\n [id]: { children, element },\n }));\n onMountCallbacks.current[id] = [];\n onDropCallbacks.current[id] = [];\n if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n onMountCallbacks.current[id].forEach((callback) => callback(id));\n }\n return element;\n }\n if (onMountCallbacks.current && onMountCallbacks.current[id]) {\n onMountCallbacks.current[id].forEach((callback) => callback(id));\n }\n return nodes[id].element;\n };\n\n const dropPortalElement = (id: string) => {\n setNodes((prevNodes) => {\n const copy = { ...prevNodes };\n delete copy[id];\n return copy;\n });\n //console.log(\"dropped\", id);\n if (onDropCallbacks.current && onDropCallbacks.current[id]) {\n onDropCallbacks.current[id].forEach((callback) => callback(id));\n }\n };\n\n return (\n <AliveScopeProvider\n value={{\n getPortalElement,\n dropPortalElement,\n }}\n >\n {children}\n {Object.entries(nodes).map(([id, { children, element }]) => (\n <Component\n key={id}\n id={id}\n onMountCallbacks={onMountCallbacks}\n onDropCallbacks={onDropCallbacks}\n children={children}\n element={element}\n />\n ))}\n </AliveScopeProvider>\n );\n};\n//============================\n// #endregion AliveScope\n//============================\n\n//============================\n// #region KeepAlive\n//============================\ntype KeepAliveContextType = {\n keepAliveId: string;\n onKeepAliveMount: (\n callback: (id: string) => void,\n options?: { runOnFirstMount?: boolean }\n ) => void;\n onKeepAliveDrop: (callback: (id: string) => void) => void;\n};\n\nexport const KeepAliveContext = createContext<KeepAliveContextType | null>(\n null\n);\n\nexport const KeepAliveProvider = ({\n children,\n value,\n}: {\n children: React.ReactNode;\n value: KeepAliveContextType;\n}) => {\n return (\n <KeepAliveContext.Provider value={value}>\n {children}\n </KeepAliveContext.Provider>\n );\n};\n\nconst Component = memo<{\n id: string;\n onMountCallbacks: React.MutableRefObject<{\n [id: string]: ((id: string) => void)[];\n }>;\n onDropCallbacks: React.MutableRefObject<{\n [id: string]: ((id: string) => void)[];\n }>;\n children: React.ReactNode;\n element: HTMLElement;\n}>(({ id, onMountCallbacks, onDropCallbacks, children, element }) => {\n const onKeepAliveMount = (\n callback: (id: string) => void,\n options: { runOnFirstMount?: boolean } = { runOnFirstMount: false }\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n const runCallback = () => {\n const el = document.getElementById(id);\n if (el) {\n callback(id);\n } else {\n // If element is not found, use MutationObserver to wait for it\n const observer = new MutationObserver((_mutations, obs) => {\n const el = document.getElementById(id);\n if (el) {\n callback(id);\n obs.disconnect(); // Stop observing once element is found\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n\n // Cleanup function to disconnect the observer if component unmounts\n return () => observer.disconnect();\n }\n };\n\n if (options?.runOnFirstMount) {\n runCallback();\n }\n\n onMountCallbacks.current[id].push(runCallback);\n return () => {\n onMountCallbacks.current[id] = onMountCallbacks.current[id].filter(\n (cb) => cb !== runCallback\n );\n };\n }, []);\n };\n\n const onKeepAliveDrop = (callback: (id: string) => void) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n onDropCallbacks.current[id].push(callback);\n return () => {\n onDropCallbacks.current[id] = onDropCallbacks.current[id].filter(\n (cb) => cb !== callback\n );\n };\n }, []);\n };\n\n return (\n <KeepAliveProvider\n value={{ keepAliveId: id, onKeepAliveMount, onKeepAliveDrop }}\n >\n {createPortal(children, element, id)}\n </KeepAliveProvider>\n );\n});\n\nconst useKeepAlive = () => {\n const context = useContext(KeepAliveContext);\n\n if (!context)\n throw new Error(\"useKeepAlive must be used within KeepAliveProvider\");\n\n return context;\n};\n\ntype KeepAliveProps = React.HTMLAttributes<HTMLDivElement> & {\n aliveKey: string;\n children: React.ReactNode;\n enabled?: boolean;\n};\n\nconst KeepAlive: React.FC<KeepAliveProps> = ({\n aliveKey,\n children,\n enabled = true,\n ...others\n}) => {\n const keepAliveRef = useRef<HTMLDivElement | null>(null);\n const { getPortalElement } = useAliveScope();\n\n useEffect(() => {\n const element = getPortalElement(aliveKey, children, others.className);\n\n if (enabled) {\n if (keepAliveRef.current) {\n keepAliveRef.current.replaceWith(element);\n }\n }\n\n return () => {\n //TODO\n //callUnmountCallbacks(aliveKey)\n };\n }, [aliveKey, children, enabled, others]);\n\n return <div {...others} ref={keepAliveRef} />;\n};\n//============================\n// #endregion KeepAlive\n//============================\n\nexport { AliveScope, KeepAlive, useKeepAlive };\n"],"names":["cn","inputs","twMerge","clsx","throttle","func","limit","lastRan","timeout","args","now","debounce","delay","generateInitials","name","words","sizes","Avatar","src","size","className","jsx","jsxs","Icon","AvatarsGroup","children","animate","props","f","s","t","largeAtom","atom","listening","handleResize","useLargeScreen","useEffect","useAtomValue","useMergedRef","refs","value","ref","useRipple","enabled","contrastRipple","lg","useRef","ripple","useCallback","event","button","buttonRect","rippleSize","offsetX","offsetY","rippleWrapper","rippleEl","ripples","baseStyles","sizeStyles","focusStyles","fontWeightStyles","borderRadiusStyles","colorStyles","stateStyles","Button","forwardRef","color","fontWeight","rounded","state","onClick","withRipple","showFocus","withDisabledDelay","type","others","forwardedRef","disabledDelay","setDisabledDelay","useState","handleClick","e","rippleRef","Separator","strokeWidth","viewBox","AliveScopeContext","createContext","AliveScopeProvider","useAliveScope","context","useContext","AliveScope","nodes","setNodes","onMountCallbacks","onDropCallbacks","id","element","prevNodes","callback","copy","Component","KeepAliveContext","KeepAliveProvider","memo","options","runCallback","observer","_mutations","obs","cb","createPortal","useKeepAlive","KeepAlive","aliveKey","keepAliveRef","getPortalElement"],"mappings":"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","x_google_ignoreList":[3]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mateosuarezdev/react-ui",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "Dynamic React UI library designed to work alongside @mateosuarezdev/react-router",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",