@mateosuarezdev/react-ui 1.0.0 → 1.0.3

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),o=require("react"),h=require("react-dom"),a=o.createContext(null),P=({children:e,value:r})=>f.jsx(a.Provider,{value:r,children:e}),K=()=>{const e=o.useContext(a);if(!e)throw new Error("useAliveScope must be wrapped within AliveScopeProvider");return e},S=({children:e})=>{const[r,l]=o.useState({}),n=o.useRef({}),c=o.useRef({}),p=(t,u,s)=>{if(!r[t]){const i=document.createElement("div");return t&&(i.id=t),s&&(i.className=s),l(v=>({...v,[t]:{children:u,element:i}})),n.current[t]=[],c.current[t]=[],n.current&&n.current[t]&&n.current[t].forEach(v=>v(t)),i}return n.current&&n.current[t]&&n.current[t].forEach(i=>i(t)),r[t].element},m=t=>{l(u=>{const s={...u};return delete s[t],s}),c.current&&c.current[t]&&c.current[t].forEach(u=>u(t))};return f.jsxs(P,{value:{getPortalElement:p,dropPortalElement:m},children:[e,Object.entries(r).map(([t,{children:u,element:s}])=>f.jsx(j,{id:t,onMountCallbacks:n,onDropCallbacks:c,children:u,element:s},t))]})},A=o.createContext(null),x=({children:e,value:r})=>f.jsx(A.Provider,{value:r,children:e}),j=o.memo(({id:e,onMountCallbacks:r,onDropCallbacks:l,children:n,element:c})=>{const p=(t,u={runOnFirstMount:!1})=>{o.useEffect(()=>{const s=()=>{if(document.getElementById(e))t(e);else{const v=new MutationObserver((b,E)=>{document.getElementById(e)&&(t(e),E.disconnect())});return v.observe(document.body,{childList:!0,subtree:!0}),()=>v.disconnect()}};return u?.runOnFirstMount&&s(),r.current[e].push(s),()=>{r.current[e]=r.current[e].filter(i=>i!==s)}},[])},m=t=>{o.useEffect(()=>(l.current[e].push(t),()=>{l.current[e]=l.current[e].filter(u=>u!==t)}),[])};return f.jsx(x,{value:{keepAliveId:e,onKeepAliveMount:p,onKeepAliveDrop:m},children:h.createPortal(n,c,e)})}),w=()=>{const e=o.useContext(A);if(!e)throw new Error("useKeepAlive must be used within KeepAliveProvider");return e},C=({aliveKey:e,children:r,enabled:l=!0,...n})=>{const c=o.useRef(null),{getPortalElement:p}=K();return o.useEffect(()=>{const m=p(e,r,n.className);return l&&c.current&&c.current.replaceWith(m),()=>{}},[e,r,l,n]),f.jsx("div",{...n,ref:c})};exports.AliveScope=S;exports.KeepAlive=C;exports.KeepAliveContext=A;exports.KeepAliveProvider=x;exports.useKeepAlive=w;
+"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;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/components/keep-alive.tsx"],"sourcesContent":["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":["AliveScopeContext","createContext","AliveScopeProvider","children","value","jsx","useAliveScope","context","useContext","AliveScope","nodes","setNodes","useState","onMountCallbacks","useRef","onDropCallbacks","getPortalElement","id","className","element","prevNodes","callback","dropPortalElement","copy","jsxs","Component","KeepAliveContext","KeepAliveProvider","memo","onKeepAliveMount","options","useEffect","runCallback","observer","_mutations","obs","cb","onKeepAliveDrop","createPortal","useKeepAlive","KeepAlive","aliveKey","enabled","others","keepAliveRef"],"mappings":"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"}
+{"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]}

package/dist/index.d.ts

@@ -1,5 +1,9 @@
-import { Context } from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import { ClassValue } from 'clsx';
+import { ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent } from 'react';
 import { JSX } from 'react/jsx-runtime';
+import { RefAttributes } from 'react';
 
 export declare const AliveScope: React.FC<AliveScopeProps>;
 
@@ -7,9 +11,163 @@ declare type AliveScopeProps = {
     children?: React.ReactNode;
 };
 
-export declare const KeepAlive: React.FC<KeepAliveProps>;
+export declare const Avatar: ({ src, name, size, className, }: {
+    src?: string;
+    name?: string;
+    size?: keyof typeof sizes;
+    className?: string;
+}) => JSX.Element;
+
+export declare function AvatarsGroup({ className, children, animate, ...props }: ComponentPropsWithoutRef<"div"> & {
+    animate?: boolean;
+}): JSX.Element;
+
+declare const borderRadiusStyles: {
+    none: string;
+    "1": string;
+    "2": string;
+    "3": string;
+    "4": string;
+    "5": string;
+    "6": string;
+    "7": string;
+    "8": string;
+    "9": string;
+    "10": string;
+    "11": string;
+    "12": string;
+    full: string;
+};
+
+export declare const Button: ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+color?: keyof typeof colorStyles;
+size?: keyof typeof sizeStyles;
+fontWeight?: keyof typeof fontWeightStyles;
+rounded?: keyof typeof borderRadiusStyles;
+state?: "enabled" | "disabled" | "loading";
+onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+className?: string;
+withRipple?: boolean;
+contrastRipple?: boolean;
+showFocus?: "all" | "desktop" | "mobile" | "none";
+withDisabledDelay?: boolean;
+type?: "button" | "submit" | "reset";
+children?: React.ReactNode;
+} & RefAttributes<HTMLButtonElement>>;
+
+export declare type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    color?: keyof typeof colorStyles;
+    size?: keyof typeof sizeStyles;
+    fontWeight?: keyof typeof fontWeightStyles;
+    rounded?: keyof typeof borderRadiusStyles;
+    state?: "enabled" | "disabled" | "loading";
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    className?: string;
+    withRipple?: boolean;
+    contrastRipple?: boolean;
+    showFocus?: "all" | "desktop" | "mobile" | "none";
+    withDisabledDelay?: boolean;
+    type?: "button" | "submit" | "reset";
+    children?: React.ReactNode;
+};
+
+export { ClassValue }
+
+/**Tailwind Merge + Clsx */
+export declare const cn: (...inputs: ClassValue[]) => string;
+
+declare const colorStyles: {
+    transparent: string;
+    transparentinactive: string;
+    brand: string;
+    accent: string;
+    contrast: string;
+    solid: string;
+    solidhybrid: string;
+    outline: string;
+    info: string;
+    success: string;
+    warning: string;
+    danger: string;
+    dangersolid: string;
+    disabled: string;
+};
+
+/**
+ * Creates a debounced function that delays invoking func until after delay milliseconds
+ * have elapsed since the last time the debounced function was invoked. Each call resets
+ * the timer, ensuring func only executes after activity has stopped.
+ *
+ * @param func - The function to debounce
+ * @param delay - The number of milliseconds to delay (default: 300)
+ * @returns A debounced version of the function
+ *
+ * @example
+ * const handleSearch = debounce((query) => {
+ *   fetchResults(query);
+ * }, 300);
+ *
+ * input.addEventListener('input', (e) => handleSearch(e.target.value));
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, delay?: number): (...args: Parameters<T>) => void;
 
-export declare const KeepAliveContext: Context<KeepAliveContextType | null>;
+declare const fontWeightStyles: {
+    light: string;
+    normal: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+};
+
+export declare function generateInitials(name: string): string;
+
+/**
+ * Base Icon component that provides a consistent SVG wrapper for creating custom icons.
+ * Handles common SVG properties while allowing full customization through standard SVG props.
+ *
+ * @example
+ * // Creating a reusable icon component
+ * export const CustomIcon = ({ size, className, ...props }: IndividualIconProps) => {
+ *   return (
+ *     <Icon size={size} className={className} fill="currentColor" {...props}>
+ *       <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z" />
+ *     </Icon>
+ *   );
+ * };
+ *
+ * @example
+ * // Creating a custom icon
+ * <Icon size={32} strokeWidth={1.5}>
+ *   <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z" />
+ * </Icon>
+ *
+ * @example
+ * // Using with custom viewBox for different icon sets
+ * <Icon viewBox="0 0 512 512" size={48}>
+ *   <circle cx="256" cy="256" r="200" />
+ * </Icon>
+ */
+export declare const Icon: React.FC<IconProps>;
+
+/**
+ * Props for the base Icon component that provides a consistent SVG wrapper.
+ */
+declare interface IconProps extends React.SVGProps<SVGSVGElement> {
+    /** Width and height of the icon in pixels (default: 24) */
+    size?: number | string;
+    /** Stroke width for outlined icons (default: 2) */
+    strokeWidth?: number;
+    /** SVG viewBox attribute defining the coordinate system (default: "0 0 24 24") */
+    viewBox?: "0 0 24 24" | "0 0 48 48" | "0 0 512 512";
+    /** CSS class names for styling */
+    className?: string;
+    /** SVG elements (paths, circles, etc.) that define the icon shape */
+    children?: React.ReactNode;
+}
+
+export declare type IndividualIconProps = Omit<IconProps, "children">;
+
+export declare const KeepAlive: React.FC<KeepAliveProps>;
 
 declare type KeepAliveContextType = {
     keepAliveId: string;
@@ -25,11 +183,49 @@ declare type KeepAliveProps = React.HTMLAttributes<HTMLDivElement> & {
     enabled?: boolean;
 };
 
-export declare const KeepAliveProvider: ({ children, value, }: {
-    children: React.ReactNode;
-    value: KeepAliveContextType;
+export declare const Separator: ({ className }: {
+    className?: string;
 }) => JSX.Element;
 
+declare const sizes: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+
+declare const sizeStyles: {
+    xs: string;
+    sm: string;
+    mdsm: string;
+    md: string;
+    lg: string;
+    picker: string;
+    iconXs: string;
+    iconSm: string;
+    iconMd: string;
+    iconLg: string;
+};
+
+/**
+ * Creates a throttled function that only invokes func at most once per every limit milliseconds.
+ * The first call executes immediately, subsequent calls are rate-limited, and the last call
+ * during rapid firing is guaranteed to execute with the most recent arguments.
+ *
+ * @param func - The function to throttle
+ * @param limit - The number of milliseconds to throttle invocations to (default: 100)
+ * @returns A throttled version of the function
+ *
+ * @example
+ * const handleScroll = throttle(() => {
+ *   console.log('Scrolled!');
+ * }, 200);
+ *
+ * window.addEventListener('scroll', handleScroll);
+ */
+export declare function throttle<T extends (...args: any[]) => any>(func: T, limit?: number): (...args: Parameters<T>) => void;
+
 export declare const useKeepAlive: () => KeepAliveContextType;
 
 export { }

package/dist/index.js

@@ -1,118 +1,394 @@
-import { jsxs as K, jsx as p } from "react/jsx-runtime";
-import { createContext as a, useState as w, useRef as f, memo as S, useContext as E, useEffect as A } from "react";
-import { createPortal as g } from "react-dom";
-const h = a(null), b = ({
+import { jsx as c, jsxs as k } from "react/jsx-runtime";
+import { clsx as B } from "clsx";
+import { twMerge as T } from "tailwind-merge";
+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";
+import { createPortal as z } from "react-dom";
+import { atom as F } from "@mateosuarezdev/atoms";
+const U = ({
+  children: e,
+  size: r = 24,
+  strokeWidth: t = 2,
+  viewBox: o = "0 0 24 24",
+  className: s,
+  ...a
+}) => /* @__PURE__ */ c(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: r,
+    height: r,
+    viewBox: o,
+    className: s,
+    ...a,
+    children: e
+  }
+), f = (...e) => T(B(e));
+function Y(e, r = 100) {
+  let t = null, o = null;
+  return function(...s) {
+    const a = Date.now();
+    t === null || a - t >= r ? (e.apply(this, s), t = a) : (o && clearTimeout(o), o = setTimeout(() => {
+      e.apply(this, s), t = Date.now();
+    }, r - (a - t)));
+  };
+}
+function fe(e, r = 500) {
+  let t = null;
+  return function(...o) {
+    t && clearTimeout(t), t = setTimeout(() => {
+      e.apply(this, o), t = null;
+    }, r);
+  };
+}
+function G(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 w = {
+  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"
+}, me = ({
+  src: e,
+  name: r,
+  size: t = "md",
+  className: o
+}) => e ? /* @__PURE__ */ c(
+  "img",
+  {
+    alt: "avatar",
+    src: e,
+    className: f("rounded-full bg-base-3", w[t])
+  }
+) : r ? /* @__PURE__ */ c(
+  "p",
+  {
+    className: f(
+      "rounded-full font-medium dark-theme:bg-base-3 border border-base-6 dark-theme:border-base-4 flex items-center justify-center",
+      w[t],
+      o
+    ),
+    children: G(r)
+  }
+) : /* @__PURE__ */ c(
+  "div",
+  {
+    className: f(
+      "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",
+      w[t],
+      o
+    ),
+    children: /* @__PURE__ */ k(
+      U,
+      {
+        size: t === "xs" ? 16 : t === "sm" ? 20 : 24,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ c("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+          /* @__PURE__ */ c("circle", { cx: "12", cy: "7", r: "4" })
+        ]
+      }
+    )
+  }
+);
+function he({
+  className: e,
+  children: r,
+  animate: t = !1,
+  ...o
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: f("flex -space-x-3 rtl:space-x-reverse", e),
+      ...o,
+      children: r
+    }
+  );
+}
+function H(e) {
+  return I(
+    (r) => e.subscribe(r),
+    () => e.get(),
+    () => e.get()
+  );
+}
+const A = F(!0);
+let y = !1;
+const S = Y(() => {
+  A.set(window.innerWidth > 1024);
+});
+typeof window < "u" && (y && (window.removeEventListener("resize", S), y = !1), window.addEventListener("resize", S), y = !0);
+const _ = () => (x(() => {
+  A.set(window.innerWidth > 1024);
+}, []), H(A));
+function q(...e) {
+  return (r) => {
+    e.forEach((t) => {
+      typeof t == "function" ? t(r) : t != null && (t.current = r);
+    });
+  };
+}
+const J = (e = !0, r) => {
+  const t = _(), o = v(null), s = O(
+    (a) => {
+      if (!e || t) return;
+      const b = o.current;
+      if (!b) return;
+      const n = b.getBoundingClientRect(), l = Math.max(n.width, n.height), i = a.clientX - n.left - l / 2, u = a.clientY - n.top - l / 2, d = document.createElement("span");
+      d.classList.add("ripple-wrapper");
+      const p = document.createElement("span");
+      p.classList.add("ripple"), p.style.backgroundColor = r ? "var(--ripple-contrast)" : "var(--ripple-main)", p.style.width = `${l}px`, p.style.height = `${l}px`, p.style.left = `${i}px`, p.style.top = `${u}px`, d.appendChild(p);
+      const g = b.getElementsByClassName("ripple-wrapper");
+      if (g?.length)
+        for (const m of g)
+          m.remove();
+      b.appendChild(d), setTimeout(() => {
+        d.remove();
+      }, 700);
+    },
+    [e, t, r]
+  );
+  return {
+    ref: o,
+    ripple: s,
+    styles: {
+      position: "relative"
+    }
+  };
+}, Q = "relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center", V = {
+  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"
+}, Z = {
+  all: "focus:ring-1",
+  desktop: "lg:focus:ring-1",
+  mobile: "focus:ring-1 lg:focus-ring-0",
+  none: ""
+}, ee = {
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+}, te = {
+  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"
+}, re = {
+  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"
+}, ne = {
+  enabled: "",
+  disabled: "opacity-75",
+  loading: ""
+}, oe = $(
+  ({
+    color: e = "transparent",
+    size: r = "mdsm",
+    fontWeight: t = "normal",
+    rounded: o = "6",
+    state: s = "enabled",
+    onClick: a,
+    className: b,
+    children: n,
+    withRipple: l = !0,
+    contrastRipple: i,
+    showFocus: u = "desktop",
+    withDisabledDelay: d = !1,
+    type: p = "button",
+    ...g
+  }, m) => {
+    const [K, E] = C(!1), L = (h) => {
+      s === "enabled" && (d ? (E(!0), a && a(h), setTimeout(() => E(!1), 1e3)) : a && a(h));
+    }, { ref: j, ripple: D } = J(
+      l,
+      e === "contrast" || i
+    ), W = q(j, m);
+    return /* @__PURE__ */ c(
+      "button",
+      {
+        ref: W,
+        type: p,
+        disabled: g.disabled ? g.disabled : s === "disabled" || s === "loading",
+        onMouseDown: D,
+        onClick: (h) => K ? null : L(h),
+        className: f(
+          Q,
+          V[r],
+          ee[t],
+          te[o],
+          Z[u],
+          re[e],
+          ne[s],
+          g.disabled && "opacity-50",
+          b
+        ),
+        ...g,
+        children: n
+      }
+    );
+  }
+);
+oe.displayName = "Button";
+const xe = ({ className: e }) => /* @__PURE__ */ c("div", { className: f("w-full h-px bg-base-4", e) }), M = N(null), se = ({
   children: e,
   value: r
-}) => /* @__PURE__ */ p(h.Provider, { value: r, children: e }), C = () => {
-  const e = E(h);
+}) => /* @__PURE__ */ c(M.Provider, { value: r, children: e }), le = () => {
+  const e = P(M);
   if (!e)
     throw new Error("useAliveScope must be wrapped within AliveScopeProvider");
   return e;
-}, F = ({ children: e }) => {
-  const [r, s] = w({}), n = f(
+}, ve = ({ children: e }) => {
+  const [r, t] = C({}), o = v(
     {}
-  ), o = f(
+  ), s = v(
     {}
   );
-  return /* @__PURE__ */ K(
-    b,
+  return /* @__PURE__ */ k(
+    se,
     {
       value: {
-        getPortalElement: (t, c, u) => {
-          if (!r[t]) {
-            const l = document.createElement("div");
-            return t && (l.id = t), u && (l.className = u), s((i) => ({
-              ...i,
-              [t]: { children: c, element: l }
-            })), n.current[t] = [], o.current[t] = [], n.current && n.current[t] && n.current[t].forEach((i) => i(t)), l;
+        getPortalElement: (n, l, i) => {
+          if (!r[n]) {
+            const u = document.createElement("div");
+            return n && (u.id = n), i && (u.className = i), t((d) => ({
+              ...d,
+              [n]: { children: l, element: u }
+            })), o.current[n] = [], s.current[n] = [], o.current && o.current[n] && o.current[n].forEach((d) => d(n)), u;
           }
-          return n.current && n.current[t] && n.current[t].forEach((l) => l(t)), r[t].element;
+          return o.current && o.current[n] && o.current[n].forEach((u) => u(n)), r[n].element;
         },
-        dropPortalElement: (t) => {
-          s((c) => {
-            const u = { ...c };
-            return delete u[t], u;
-          }), o.current && o.current[t] && o.current[t].forEach((c) => c(t));
+        dropPortalElement: (n) => {
+          t((l) => {
+            const i = { ...l };
+            return delete i[n], i;
+          }), s.current && s.current[n] && s.current[n].forEach((l) => l(n));
         }
       },
       children: [
         e,
-        Object.entries(r).map(([t, { children: c, element: u }]) => /* @__PURE__ */ p(
-          O,
+        Object.entries(r).map(([n, { children: l, element: i }]) => /* @__PURE__ */ c(
+          ie,
           {
-            id: t,
-            onMountCallbacks: n,
-            onDropCallbacks: o,
-            children: c,
-            element: u
+            id: n,
+            onMountCallbacks: o,
+            onDropCallbacks: s,
+            children: l,
+            element: i
           },
-          t
+          n
         ))
       ]
     }
   );
-}, P = a(
+}, R = N(
   null
-), M = ({
+), ae = ({
   children: e,
   value: r
-}) => /* @__PURE__ */ p(P.Provider, { value: r, children: e }), O = S(({ id: e, onMountCallbacks: r, onDropCallbacks: s, children: n, element: o }) => /* @__PURE__ */ p(
-  M,
+}) => /* @__PURE__ */ c(R.Provider, { value: r, children: e }), ie = X(({ id: e, onMountCallbacks: r, onDropCallbacks: t, children: o, element: s }) => /* @__PURE__ */ c(
+  ae,
   {
-    value: { keepAliveId: e, onKeepAliveMount: (t, c = { runOnFirstMount: !1 }) => {
-      A(() => {
-        const u = () => {
+    value: { keepAliveId: e, onKeepAliveMount: (n, l = { runOnFirstMount: !1 }) => {
+      x(() => {
+        const i = () => {
           if (document.getElementById(e))
-            t(e);
+            n(e);
           else {
-            const i = new MutationObserver((d, x) => {
-              document.getElementById(e) && (t(e), x.disconnect());
+            const d = new MutationObserver((p, g) => {
+              document.getElementById(e) && (n(e), g.disconnect());
             });
-            return i.observe(document.body, {
+            return d.observe(document.body, {
               childList: !0,
               subtree: !0
-            }), () => i.disconnect();
+            }), () => d.disconnect();
           }
         };
-        return c?.runOnFirstMount && u(), r.current[e].push(u), () => {
+        return l?.runOnFirstMount && i(), r.current[e].push(i), () => {
           r.current[e] = r.current[e].filter(
-            (l) => l !== u
+            (u) => u !== i
           );
         };
       }, []);
-    }, onKeepAliveDrop: (t) => {
-      A(() => (s.current[e].push(t), () => {
-        s.current[e] = s.current[e].filter(
-          (c) => c !== t
+    }, onKeepAliveDrop: (n) => {
+      x(() => (t.current[e].push(n), () => {
+        t.current[e] = t.current[e].filter(
+          (l) => l !== n
         );
       }), []);
     } },
-    children: g(n, o, e)
+    children: z(o, s, e)
   }
-)), N = () => {
-  const e = E(P);
+)), we = () => {
+  const e = P(R);
   if (!e)
     throw new Error("useKeepAlive must be used within KeepAliveProvider");
   return e;
-}, R = ({
+}, ye = ({
   aliveKey: e,
   children: r,
-  enabled: s = !0,
-  ...n
+  enabled: t = !0,
+  ...o
 }) => {
-  const o = f(null), { getPortalElement: v } = C();
-  return A(() => {
-    const m = v(e, r, n.className);
-    return s && o.current && o.current.replaceWith(m), () => {
+  const s = v(null), { getPortalElement: a } = le();
+  return x(() => {
+    const b = a(e, r, o.className);
+    return t && s.current && s.current.replaceWith(b), () => {
     };
-  }, [e, r, s, n]), /* @__PURE__ */ p("div", { ...n, ref: o });
+  }, [e, r, t, o]), /* @__PURE__ */ c("div", { ...o, ref: s });
 };
 export {
-  F as AliveScope,
-  R as KeepAlive,
-  P as KeepAliveContext,
-  M as KeepAliveProvider,
-  N as useKeepAlive
+  ve as AliveScope,
+  me as Avatar,
+  he as AvatarsGroup,
+  oe as Button,
+  U as Icon,
+  ye as KeepAlive,
+  xe as Separator,
+  f as cn,
+  fe as debounce,
+  G as generateInitials,
+  Y as throttle,
+  we as useKeepAlive
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/keep-alive.tsx"],"sourcesContent":["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":["AliveScopeContext","createContext","AliveScopeProvider","children","value","jsx","useAliveScope","context","useContext","AliveScope","nodes","setNodes","useState","onMountCallbacks","useRef","onDropCallbacks","jsxs","id","className","element","prevNodes","callback","copy","Component","KeepAliveContext","KeepAliveProvider","memo","options","useEffect","runCallback","observer","_mutations","obs","cb","createPortal","useKeepAlive","KeepAlive","aliveKey","enabled","others","keepAliveRef","getPortalElement"],"mappings":"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"}
+{"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]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mateosuarezdev/react-ui",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Dynamic React UI library designed to work alongside @mateosuarezdev/react-router",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -63,6 +63,12 @@
     "react-dom": "^18.0.0"
   },
   "peerDependenciesMeta": {
+    "@mateosuarezdev/atoms": {
+      "optional": false
+    },
+    "clsx": {
+      "optional": false
+    },
     "framer-motion": {
       "optional": true
     },
@@ -74,20 +80,23 @@
     },
     "react-dom": {
       "optional": false
+    },
+    "tailwind-merge": {
+      "optional": false
     }
   },
-  "dependencies": {
-    "@mateosuarezdev/url-change-event": "^1.0.12"
-  },
   "devDependencies": {
+    "@mateosuarezdev/atoms": "^1.0.0",
     "@types/node": "^24.7.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
     "@vitejs/plugin-react": "^5.0.4",
+    "clsx": "^2.1.1",
     "motion": "^12.23.22",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rimraf": "^6.0.1",
+    "tailwind-merge": "^3.3.1",
     "typescript": "^5.9.3",
     "vite": "^7.1.9",
     "vite-bundle-visualizer": "^1.2.1",