{"_id":"@elktrumelk/components","_rev":"8-0adad6ab6ad0c10f418f6f891dea8d2f","name":"@elktrumelk/components","dist-tags":{"latest":"1.2.1"},"versions":{"1.0.0":{"name":"@elktrumelk/components","version":"1.0.0","keywords":["react","components","ui","framework","class-based","render-props","auto-import","vite-plugin"],"license":"MIT","_id":"@elktrumelk/components@1.0.0","maintainers":[{"name":"elktrumelk","email":"festinacole373@gmail.com"}],"dist":{"shasum":"0afc006ed358cd811336d945839e9ec072ce1763","tarball":"https://registry.npmjs.org/@elktrumelk/components/-/components-1.0.0.tgz","fileCount":603,"integrity":"sha512-aTZNYOG9AF5Ayrozshd+7iq41W1chfHKZMAmRt17+DlJ9vH0BcpW7g0qwdTSb+kYIX6bdD+gHzRyGL8mej/3AA==","signatures":[{"sig":"MEYCIQDSyifUK3a0ANlnF4Q3PR+LUI1gXM+jd96Ccz6r8f7tjAIhAJ7o1CG1McQ9WyY+XJSzDnSbTPgsVTCJKkphtPyE5CKh","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":517860},"main":"./dist/index.js","type":"module","types":"./dist/components.d.ts","exports":{".":{"types":"./dist/components.d.ts","import":"./dist/index.js"},"./hooks":{"types":"./dist/hooks/index.d.ts","import":"./dist/hooks/index.js"},"./icons":{"types":"./dist/icons/index.d.ts","import":"./dist/icons.js"},"./plugin":{"types":"./dist/plugin.d.ts","import":"./dist/plugin.js"}},"gitHead":"aa17973227df40c1429ac5a62d36ce9cc2ca91f4","scripts":{"dev":"vite","lint":"oxlint","test":"vitest run","build":"vite build && tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --outDir dist","prepare":"npm run build","preview":"vite preview","test:watch":"vitest"},"_npmUser":{"name":"elktrumelk","email":"festinacole373@gmail.com"},"_npmVersion":"11.7.0","description":"A lightweight React component framework with class-based architecture, render props, and 205+ icons","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"^19.2.7","react-dom":"^19.2.7"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.1","jsdom":"^29.1.1","oxlint":"^1.71.0","vitest":"^4.1.10","typescript":"~6.0.2","@types/node":"^24.13.2","@types/react":"^19.2.17","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.3","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^7.0.0","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components_1.0.0_1784913942945_0.6047220509675444","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to elk-components. Install with: npm install elk-components"},"1.0.1":{"name":"@elktrumelk/components","version":"1.0.1","keywords":["react","components","ui","framework","class-based","render-props","auto-import","vite-plugin"],"license":"MIT","_id":"@elktrumelk/components@1.0.1","maintainers":[{"name":"elktrumelk","email":"festinacole373@gmail.com"}],"dist":{"shasum":"71ea01b4686b9eba0cced6fce7cf0cbfb38911a0","tarball":"https://registry.npmjs.org/@elktrumelk/components/-/components-1.0.1.tgz","fileCount":603,"integrity":"sha512-ky9rmqvcj+7EF3zgvmxgSNMLW6V+kj/HZ/v6FIaWbvJAI8t7zhfPu6+IBYttfAmZkAFdJztdCaJIA9gIYY7xLA==","signatures":[{"sig":"MEYCIQD5YTuNrGavXxsZvBcLhLP9nrHLndzZg8kJt4Juw+SDlAIhAI8+M8o4yr+IDdj1Itgesb8zVIm/41O3MPQod0l1jPxB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":517990},"main":"./dist/index.js","type":"module","types":"./dist/components.d.ts","exports":{".":{"types":"./dist/components.d.ts","import":"./dist/index.js"},"./hooks":{"types":"./dist/hooks/index.d.ts","import":"./dist/hooks/index.js"},"./icons":{"types":"./dist/icons/index.d.ts","import":"./dist/icons.js"},"./plugin":{"types":"./dist/plugin.d.ts","import":"./dist/plugin.js"}},"gitHead":"aa17973227df40c1429ac5a62d36ce9cc2ca91f4","scripts":{"dev":"vite","lint":"oxlint","test":"vitest run","build":"vite build && tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --outDir dist","prepare":"npm run build","preview":"vite preview","test:watch":"vitest"},"_npmUser":{"name":"elktrumelk","email":"festinacole373@gmail.com"},"_npmVersion":"11.7.0","description":"A lightweight React component framework with class-based architecture, render props, and 205+ icons","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"^19.2.7","react-dom":"^19.2.7"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.1","jsdom":"^29.1.1","oxlint":"^1.71.0","vitest":"^4.1.10","typescript":"~6.0.2","@types/node":"^24.13.2","@types/react":"^19.2.17","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.3","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^7.0.0","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components_1.0.1_1784914904278_0.7419222257270668","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to elk-components. Install with: npm install elk-components"},"1.0.2":{"name":"@elktrumelk/components","version":"1.0.2","keywords":["react","components","ui","framework","class-based","render-props","auto-import","vite-plugin"],"license":"MIT","_id":"@elktrumelk/components@1.0.2","maintainers":[{"name":"elktrumelk","email":"festinacole373@gmail.com"}],"dist":{"shasum":"f6f7d24a24538292c63116a36f69599353b45b59","tarball":"https://registry.npmjs.org/@elktrumelk/components/-/components-1.0.2.tgz","fileCount":603,"integrity":"sha512-H08B6GSW2QtrPQfPWH1n87+gFhkXXUG1aDswMSJf/OnoclzbbFQJh8OzLY9vGdrJyrGLXdfbCIRoGFuvmnHCWw==","signatures":[{"sig":"MEUCIQDai5ePrtrwhKTwNw+zyxzeU2HPEkUAezXnfHvri6uLSwIgKd6epQHIIqmroqrSf+cRZJDBekSHqjjXWA8mN138TCg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":517990},"main":"./dist/index.js","type":"module","types":"./dist/components.d.ts","exports":{".":{"types":"./dist/components.d.ts","import":"./dist/index.js"},"./hooks":{"types":"./dist/hooks/index.d.ts","import":"./dist/hooks/index.js"},"./icons":{"types":"./dist/icons/index.d.ts","import":"./dist/icons.js"},"./plugin":{"types":"./dist/plugin.d.ts","import":"./dist/plugin.js"}},"gitHead":"aa17973227df40c1429ac5a62d36ce9cc2ca91f4","scripts":{"dev":"vite","lint":"oxlint","test":"vitest run","build":"vite build && tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --outDir dist","prepare":"npm run build","preview":"vite preview","test:watch":"vitest"},"_npmUser":{"name":"elktrumelk","email":"festinacole373@gmail.com"},"_npmVersion":"11.7.0","description":"A lightweight React component framework with class-based architecture, render props, and 205+ icons","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"^19.2.7","react-dom":"^19.2.7"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.1","jsdom":"^29.1.1","oxlint":"^1.71.0","vitest":"^4.1.10","typescript":"~6.0.2","@types/node":"^24.13.2","@types/react":"^19.2.17","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.3","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^7.0.0","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components_1.0.2_1784915654652_0.20076226044006074","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to elk-components. Install with: npm install elk-components"},"1.0.3":{"name":"@elktrumelk/components","version":"1.0.3","keywords":["react","components","ui","framework","class-based","render-props","auto-import","vite-plugin"],"license":"MIT","_id":"@elktrumelk/components@1.0.3","maintainers":[{"name":"elktrumelk","email":"festinacole373@gmail.com"}],"dist":{"shasum":"cca93a699ef2d130e293e5e3ca9a7fdcd2260f3b","tarball":"https://registry.npmjs.org/@elktrumelk/components/-/components-1.0.3.tgz","fileCount":603,"integrity":"sha512-ujlvwwnSiKcW8ZBhB78JOSd7cWOTHv931xEzh+i2+kg2ZjYHlLZ7hXGvrLOB45+w65jwUqM/Ififwt/QnDyB1Q==","signatures":[{"sig":"MEYCIQDRWCALD3e7WBG9ujAdc8n8HBV6dIRRT/jPzi57416W3wIhAK2zn9Hsn/tKabp1zWYNpUF7eG0UyTwEHql8rLsJkuQH","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":518159},"main":"./dist/index.js","type":"module","types":"./dist/components.d.ts","exports":{".":{"types":"./dist/components.d.ts","import":"./dist/index.js"},"./hooks":{"types":"./dist/hooks/index.d.ts","import":"./dist/hooks/index.js"},"./icons":{"types":"./dist/icons/index.d.ts","import":"./dist/icons.js"},"./plugin":{"types":"./dist/plugin.d.ts","import":"./dist/plugin.js"}},"gitHead":"60379445e6741873e576f9ec91459d15c2181ba3","scripts":{"dev":"vite","lint":"oxlint","test":"vitest run","build":"vite build && tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --outDir dist","prepare":"npm run build","preview":"vite preview","test:watch":"vitest"},"_npmUser":{"name":"elktrumelk","email":"festinacole373@gmail.com"},"_npmVersion":"11.7.0","description":"A lightweight React component framework with class-based architecture, render props, and 205+ icons","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"^19.2.7","react-dom":"^19.2.7"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.1","jsdom":"^29.1.1","oxlint":"^1.71.0","vitest":"^4.1.10","typescript":"~6.0.2","@types/node":"^24.13.2","@types/react":"^19.2.17","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.3","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^7.0.0","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components_1.0.3_1784929623738_0.27396780904436135","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to elk-components. Install with: npm install elk-components"},"1.1.0":{"name":"@elktrumelk/components","version":"1.1.0","keywords":["react","components","ui","framework","class-based","render-props","auto-import","vite-plugin"],"license":"MIT","_id":"@elktrumelk/components@1.1.0","maintainers":[{"name":"elktrumelk","email":"festinacole373@gmail.com"}],"dist":{"shasum":"18a1860ccef9dc4c7cd5914c0f1eb4bd1e9dd991","tarball":"https://registry.npmjs.org/@elktrumelk/components/-/components-1.1.0.tgz","fileCount":615,"integrity":"sha512-Bj2OcYUz7z79pm84laIEPF8Y354qD/eweIlHciwaq1QRHFRFjPpHUEeDlQT8zDbePigL13cSBjz/sQpyYvr9fw==","signatures":[{"sig":"MEQCICjsZrf2CIZBgvWjRx7OQ4ES3svWeRqwDKl+qJCpOIO8AiBzCOYX0OSSRD/XnL+FGTqMv6jPZjQUyjX0d4bFGAgEJw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":527853},"main":"./dist/index.js","type":"module","types":"./dist/components.d.ts","exports":{".":{"types":"./dist/components.d.ts","import":"./dist/index.js"},"./hooks":{"types":"./dist/hooks/index.d.ts","import":"./dist/hooks/index.js"},"./icons":{"types":"./dist/icons/index.d.ts","import":"./dist/icons.js"},"./plugin":{"types":"./dist/plugin.d.ts","import":"./dist/plugin.js"}},"gitHead":"cd33bb5ea327cee42bd4af0bda24dbef62dc891f","scripts":{"dev":"vite","lint":"oxlint","test":"vitest run","build":"vite build && tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --outDir dist","prepare":"npm run build","preview":"vite preview","test:watch":"vitest"},"_npmUser":{"name":"elktrumelk","email":"festinacole373@gmail.com"},"_npmVersion":"11.7.0","description":"A lightweight React component framework with class-based architecture, render props, and 205+ icons","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"^19.2.7","react-dom":"^19.2.7"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.1","jsdom":"^29.1.1","oxlint":"^1.71.0","vitest":"^4.1.10","typescript":"~6.0.2","@types/node":"^24.13.2","@types/react":"^19.2.17","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.3","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^7.0.0","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components_1.1.0_1785018609027_0.9068391573489176","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to elk-components. Install with: npm install elk-components"},"1.2.0":{"name":"@elktrumelk/components","version":"1.2.0","keywords":["react","components","ui","framework","class-based","render-props","auto-import","vite-plugin"],"license":"MIT","_id":"@elktrumelk/components@1.2.0","maintainers":[{"name":"elktrumelk","email":"festinacole373@gmail.com"}],"dist":{"shasum":"69f9b311e2a24c5f3e29e34f0622ece1f610cd15","tarball":"https://registry.npmjs.org/@elktrumelk/components/-/components-1.2.0.tgz","fileCount":619,"integrity":"sha512-QtgEvuaT/w3eTB10kMiI1103Hz6CpMbqaqOGgU6PcArJ3Ent2BX3om3ugfzE9Txbj+dfnOFIlyLqEtRpxiorvQ==","signatures":[{"sig":"MEQCIH6kbaC7uUNt1Fi/pR2jl4VnoI3Dp67nYs0NFKV2aK3MAiBRlc8UdtUgl0/TcR820lsySCg7Xy4sqg6nT2eIrBMxAA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":614283},"main":"./dist/index.js","type":"module","types":"./dist/components.d.ts","exports":{".":{"types":"./dist/components.d.ts","import":"./dist/index.js"},"./hooks":{"types":"./dist/hooks/index.d.ts","import":"./dist/hooks/index.js"},"./icons":{"types":"./dist/icons/index.d.ts","import":"./dist/icons.js"},"./plugin":{"types":"./dist/plugin.d.ts","import":"./dist/plugin.js"}},"gitHead":"04fcaf8a4311bcc8187d6ef1c96bfcdf11a0dd06","scripts":{"dev":"vite","lint":"oxlint","test":"vitest run","build":"vite build && tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --outDir dist","prepare":"npm run build","preview":"vite preview","test:watch":"vitest"},"_npmUser":{"name":"elktrumelk","email":"festinacole373@gmail.com"},"_npmVersion":"11.7.0","description":"A lightweight React component framework with class-based architecture, render props, and 205+ icons","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"^19.2.7","react-dom":"^19.2.7"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.1","jsdom":"^29.1.1","oxlint":"^1.71.0","vitest":"^4.1.10","typescript":"~6.0.2","@types/node":"^24.13.2","@types/react":"^19.2.17","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.3","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^7.0.0","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components_1.2.0_1785021118040_0.4810146008141454","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to elk-components. Install with: npm install elk-components"},"1.2.1":{"name":"@elktrumelk/components","version":"1.2.1","keywords":["react","components","ui","framework","class-based","render-props","auto-import","vite-plugin"],"license":"MIT","_id":"@elktrumelk/components@1.2.1","maintainers":[{"name":"elktrumelk","email":"festinacole373@gmail.com"}],"dist":{"shasum":"f9ce2a0ce82c9f05b213893b2142de83aeec759d","tarball":"https://registry.npmjs.org/@elktrumelk/components/-/components-1.2.1.tgz","fileCount":619,"integrity":"sha512-/6ruSv8vfuQloEMoPwfsaMbqWkY65xUxGl/HYYvS8nzUBCsOKLI7WNwii1KnbaFbKVmZLOKHUj2UH4oywTNrSg==","signatures":[{"sig":"MEUCIGJj75jJKYsjUAxAn9RKK+hpOzx6H2tAnPYV53gZJSkyAiEAkZ670L4hOQMYjo99SwHd3Wr3ZS2h5rz+UPj+M1DgT50=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":615523},"main":"./dist/index.js","type":"module","types":"./dist/components.d.ts","exports":{".":{"types":"./dist/components.d.ts","import":"./dist/index.js"},"./hooks":{"types":"./dist/hooks/index.d.ts","import":"./dist/hooks/index.js"},"./icons":{"types":"./dist/icons/index.d.ts","import":"./dist/icons.js"},"./plugin":{"types":"./dist/plugin.d.ts","import":"./dist/plugin.js"}},"gitHead":"0e8dcdba9937b654146cf420614c02b41849e969","scripts":{"dev":"vite","lint":"oxlint","test":"vitest run","build":"vite build && tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --outDir dist","prepare":"npm run build","preview":"vite preview","test:watch":"vitest"},"_npmUser":{"name":"elktrumelk","email":"festinacole373@gmail.com"},"_npmVersion":"11.7.0","description":"A lightweight React component framework with class-based architecture, render props, and 205+ icons","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"^19.2.7","react-dom":"^19.2.7"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.1","jsdom":"^29.1.1","oxlint":"^1.71.0","vitest":"^4.1.10","typescript":"~6.0.2","@types/node":"^24.13.2","@types/react":"^19.2.17","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.3","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^7.0.0","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components_1.2.1_1785022250190_0.28022151853615607","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to elk-components. Install with: npm install elk-components"}},"time":{"created":"2026-07-24T17:25:42.825Z","modified":"2026-07-26T00:54:43.678Z","1.0.0":"2026-07-24T17:25:43.088Z","1.0.1":"2026-07-24T17:41:44.417Z","1.0.2":"2026-07-24T17:54:14.797Z","1.0.3":"2026-07-24T21:47:03.868Z","1.1.0":"2026-07-25T22:30:09.185Z","1.2.0":"2026-07-25T23:11:58.175Z","1.2.1":"2026-07-25T23:30:50.346Z"},"license":"MIT","keywords":["react","components","ui","framework","class-based","render-props","auto-import","vite-plugin"],"description":"A lightweight React component framework with class-based architecture, render props, and 205+ icons","maintainers":[{"name":"elktrumelk","email":"festinacole373@gmail.com"}],"readme":"# Component Framework\n\nA higher-level React component framework built on class-based state management with render props. All components follow a consistent **class + wrapper** architecture.\n\n---\n\n## Conventions\n\n### Render Props (`child`, `header`, `body`, etc.)\n\nEvery slot that accepts content uses `React.JSX.ElementType` — pass an **arrow function returning JSX**, not raw JSX children:\n\n```tsx\n// Correct\n<Center child={() => <Text text=\"Hello\" type=\"p\" />} />\n\n// Wrong\n<Center child={<Text text=\"Hello\" type=\"p\" />} />\n```\n\n### Gestures (`gest`)\n\nNative DOM events and attributes are passed via the `gest` prop, typed to the underlying HTML element:\n\n```tsx\n<Button gest={{ onClick: () => alert(\"clicked\") }} />\n<Container gest={{ onMouseEnter: () => console.log(\"hover\") }} />\n<Input gest={{ onChange: (e) => console.log(e.target.value) }} />\n```\n\n### Instance Access (`onFunc`)\n\nComponents that expose imperative control accept `onFunc`, which receives the internal class instance:\n\n```tsx\n<Button onFunc={(self) => { self.build?.({...}) }} />\n```\n\n---\n\n## Components\n\n### Page\n\nTop-level layout section. Wraps header, body, and footer.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `header` | `ElementType` | No | — | Header slot |\n| `body` | `ElementType` | Yes | — | Body slot |\n| `footer` | `ElementType` | No | — | Footer slot |\n| `className` | `string` | No | `\"page\"` | CSS class |\n| `style` | `CSSProperties` | No | `{}` | Inline styles |\n| `atrib` | `HTMLAttributes<HTMLElement>` | No | — | Native HTML attributes |\n\n```tsx\n<Page\n  header={() => <Header ... />}\n  body={() => <Center child={() => <Text text=\"Content\" type=\"h1\" />} />}\n  footer={() => <Text text=\"Footer\" type=\"p\" />}\n/>\n```\n\n---\n\n### Header\n\nApp bar with leading element, title/subtitle, and action slot.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `leading` | `ElementType` | No | — | Left-side element (avatar, icon) |\n| `title` | `ElementType` | Yes | — | Title content |\n| `subTitle` | `ElementType` | No | — | Subtitle below title |\n| `action` | `ElementType` | No | — | Right-side actions |\n| `titleGap` | `string` | No | — | Gap between title and subtitle. Typed: `${string}rem` / `${string}px` / `${string}em` |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Override default flex layout |\n\n```tsx\n<Header\n  leading={() => <Avatar size=\"sm\" />}\n  title={() => <Text text=\"Dashboard\" type=\"h1\" />}\n  subTitle={() => <Text text=\"Overview\" type=\"p\" />}\n  titleGap=\".3rem\"\n  action={() => <Button child={() => <Text text=\"Settings\" type=\"p\" />} />}\n/>\n```\n\n---\n\n### Text\n\nPolymorphic text element. Renders any heading or paragraph tag.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `text` | `string` | Yes | — | Text content |\n| `type` | `'h1'\\|'h2'\\|'h3'\\|'h4'\\|'h5'\\|'h6'\\|'p'\\|'pre'` | Yes | — | HTML tag to render |\n| `size` | `string` | No | — | Font size (e.g. `\"1rem\"`, `\"14px\"`) |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `className` | `string` | No | — | CSS class |\n\n```tsx\n<Text text=\"Title\" type=\"h2\" size=\"1.5rem\" />\n<Text text=\"Body text\" type=\"p\" style={{ color: \"grey\" }} />\n```\n\n---\n\n### Container\n\nGeneric div wrapper with layout props.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `child` | `ElementType` | No | — | Content slot |\n| `width` | `string` | No | `\"auto\"` | Width |\n| `height` | `string` | No | `\"auto\"` | Height |\n| `padding` | `string` | No | `\"1rem\"` | Padding |\n| `color` | `string` | No | — | Background color |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `gest` | `HTMLAttributes<HTMLDivElement>` | No | — | Native div attributes |\n| `onFunc` | `(self: _Container) => void` | No | — | Instance callback |\n\n```tsx\n<Container color=\"grey\" width=\"50px\" height=\"50px\" padding=\".5rem\">\n  <Text text=\"Box\" type=\"p\" />\n</Container>\n```\n\n---\n\n### Button\n\nClickable button with content slot.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `child` | `ElementType` | No | — | Button content |\n| `border` | `string` | No | — | Border |\n| `borderRadius` | `string` | No | — | Border radius |\n| `color` | `string` | No | — | Text color |\n| `padding` | `string` | No | — | Padding |\n| `width` | `string` | No | — | Width |\n| `height` | `string` | No | — | Height |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `gest` | `HTMLAttributes<HTMLButtonElement>` | No | — | Native button attributes |\n| `onFunc` | `(self: _Button) => void` | No | — | Instance callback |\n\n```tsx\n<Button\n  borderRadius=\"1rem\"\n  padding=\".4rem 1rem\"\n  child={() => <Text text=\"Click me\" type=\"p\" />}\n  gest={{ onClick: () => alert(\"clicked\") }}\n/>\n```\n\n---\n\n### IconButton\n\nButton that renders an icon instead of text content. Extends Button.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `icon` | `ElementType` | No | — | Icon component to render |\n| `borderRadius` | `string` | No | — | Border radius |\n| `width` | `string` | No | — | Width |\n| `height` | `string` | No | — | Height |\n| `color` | `string` | No | — | Icon color |\n| `border` | `string` | No | `\"none\"` | Border |\n| `className` | `string` | No | `\"icon-btn\"` | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `gest` | `HTMLAttributes<HTMLButtonElement>` | No | — | Native button attributes |\n| `onFunc` | `(self: _Button) => void` | No | — | Instance callback |\n\n```tsx\n<IconButton borderRadius=\"4rem\" icon={() => <Lock />} />\n```\n\n---\n\n### Center\n\nCenters content both vertically and horizontally. Uses fixed flex styles.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `child` | `ElementType` | Yes | — | Content to center |\n\n```tsx\n<Center child={() => <Text text=\"Centered\" type=\"h2\" />} />\n```\n\n---\n\n### Stack\n\nFlex container with full direction/alignment/gap control.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `child` | `ElementType` | No | — | Stacked content |\n| `direction` | `'column'\\|'row'\\|'row-reverse'\\|'column-reverse'` | No | `\"column\"` | Flex direction |\n| `gap` | `string` | No | `\"0\"` | Gap between items. Typed: `${string}rem` / `${string}px` / `${string}em` |\n| `align` | `'stretch'\\|'flex-start'\\|'flex-end'\\|'center'\\|'baseline'` | No | `\"stretch\"` | Cross-axis alignment |\n| `justify` | `'flex-start'\\|'flex-end'\\|'center'\\|'space-between'\\|'space-around'\\|'space-evenly'` | No | `\"flex-start\"` | Main-axis alignment |\n| `wrap` | `boolean` | No | — | Enable flex-wrap |\n| `width` | `string` | No | — | Width |\n| `height` | `string` | No | — | Height |\n| `padding` | `string` | No | — | Padding |\n| `margin` | `string` | No | — | Margin |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `gest` | `HTMLAttributes<HTMLDivElement>` | No | — | Native div attributes |\n| `onFunc` | `(self: _Stack) => void` | No | — | Instance callback |\n\n```tsx\n<Stack direction=\"row\" gap=\".75rem\" align=\"center\" justify=\"space-between\" wrap child={() => (\n  <>\n    <Button child={() => <Text text=\"A\" type=\"p\" />} />\n    <Button child={() => <Text text=\"B\" type=\"p\" />} />\n  </>\n)} />\n```\n\n---\n\n### Divider\n\nHorizontal or vertical separator line.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `direction` | `'horizontal'\\|'vertical'` | No | `\"horizontal\"` | Separator orientation |\n| `size` | `'xs'\\|'sm'\\|'md'\\|'lg'` | No | `\"sm\"` | Thickness: xs=1px, sm=2px, md=4px, lg=8px |\n| `color` | `string` | No | `\"rgba(255,255,255,0.1)\"` | Line color |\n| `margin` | `string` | No | auto (direction-aware) | Margin |\n| `child` | `ElementType` | No | — | Optional center content (e.g. \"or\") |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `gest` | `HTMLAttributes<HTMLDivElement>` | No | — | Native div attributes |\n\n```tsx\n<Divider direction=\"horizontal\" size=\"sm\" color=\"rgba(255,255,255,0.2)\" />\n<Divider direction=\"vertical\" size=\"xs\" />\n```\n\n---\n\n### Input\n\nText input with optional prefix/suffix slots.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `type` | `'text'\\|'password'\\|'email'\\|'number'\\|'tel'\\|'url'\\|'search'` | No | `\"text\"` | Input type |\n| `placeholder` | `string` | No | — | Placeholder text |\n| `value` | `string` | No | — | Default value |\n| `disabled` | `boolean` | No | — | Disabled state |\n| `readOnly` | `boolean` | No | — | Read-only state |\n| `prefix` | `ElementType` | No | — | Element before input (icon, label) |\n| `suffix` | `ElementType` | No | — | Element after input (icon, button) |\n| `width` | `string` | No | `\"100%\"` | Width |\n| `height` | `string` | No | `\"2.5rem\"` | Height |\n| `borderRadius` | `string` | No | `\".5rem\"` | Border radius |\n| `backgroundColor` | `string` | No | `\"transparent\"` | Background |\n| `color` | `string` | No | `\"inherit\"` | Text color |\n| `borderColor` | `string` | No | `\"rgba(255,255,255,0.15)\"` | Border color |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `gest` | `InputHTMLAttributes<HTMLInputElement>` | No | — | Native input attributes |\n| `onFunc` | `(self: _Input) => void` | No | — | Instance callback |\n\n```tsx\n<Input\n  type=\"email\"\n  placeholder=\"you@example.com\"\n  borderRadius=\".5rem\"\n  borderColor=\"rgba(255,255,255,0.2)\"\n  gest={{ onChange: (e) => console.log(e.target.value) }}\n/>\n```\n\n---\n\n### Image\n\nImage with lazy loading, aspect ratio, and error fallback.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `src` | `string` | No | — | Image URL |\n| `alt` | `string` | No | `\"\"` | Alt text |\n| `width` | `string` | No | `\"100%\"` | Width |\n| `height` | `string` | No | `\"auto\"` | Height |\n| `aspectRatio` | `${number}/${number}` | No | — | CSS aspect-ratio (e.g. `\"16/9\"`) |\n| `objectFit` | `'cover'\\|'contain'\\|'fill'\\|'none'\\|'scale-down'` | No | `\"cover\"` | Object-fit |\n| `borderRadius` | `string` | No | — | Border radius |\n| `placeholder` | `string` | No | `\"rgba(255,255,255,0.05)\"` | Placeholder background color |\n| `loading` | `'lazy'\\|'eager'` | No | `\"lazy\"` | Loading strategy |\n| `fallback` | `ElementType` | No | — | Component shown on error |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `gest` | `HTMLAttributes<HTMLDivElement>` | No | — | Native div attributes |\n| `onFunc` | `(self: _Image) => void` | No | — | Instance callback |\n\n```tsx\n<Image\n  src=\"/photo.jpg\"\n  alt=\"Photo\"\n  width=\"200px\"\n  height=\"150px\"\n  borderRadius=\".5rem\"\n  objectFit=\"cover\"\n  fallback={() => <Text text=\"No image\" type=\"p\" />}\n/>\n```\n\n---\n\n### Badge\n\nStatus or label indicator with variant and size options.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `text` | `string` | No | — | Badge text (used when no `child`) |\n| `child` | `ElementType` | No | — | Custom content slot |\n| `variant` | `'filled'\\|'outlined'\\|'soft'` | No | `\"soft\"` | Visual variant |\n| `size` | `'xs'\\|'sm'\\|'md'\\|'lg'` | No | `\"sm\"` | Size preset |\n| `color` | `string` | No | `\"#fff\"` | Text color |\n| `backgroundColor` | `string` | No | `\"rgba(255,255,255,0.1)\"` | Background (filled/soft) |\n| `borderColor` | `string` | No | uses `color` | Border color (outlined variant) |\n| `borderRadius` | `string` | No | `\"9999px\"` | Border radius (pill by default) |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `gest` | `HTMLAttributes<HTMLDivElement>` | No | — | Native div attributes |\n| `onFunc` | `(self: _Badge) => void` | No | — | Instance callback |\n\n**Variants:**\n- `filled` — solid background\n- `outlined` — transparent background with border\n- `soft` — tinted background (default)\n\n```tsx\n<Badge text=\"Online\" variant=\"filled\" size=\"sm\" backgroundColor=\"green\" />\n<Badge text=\"Away\" variant=\"outlined\" size=\"sm\" color=\"yellow\" borderColor=\"yellow\" />\n<Badge text=\"Busy\" variant=\"soft\" size=\"sm\" backgroundColor=\"red\" />\n```\n\n---\n\n### Card\n\nContent container with header, body, and footer sections.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `header` | `ElementType` | No | — | Header slot (separated by border) |\n| `body` | `ElementType` | No | — | Body slot |\n| `footer` | `ElementType` | No | — | Footer slot (separated by border) |\n| `padding` | `'none'\\|'sm'\\|'md'\\|'lg'` | No | `\"md\"` | Padding preset: none=0, sm=.5rem, md=1rem, lg=1.5rem |\n| `radius` | `'none'\\|'sm'\\|'md'\\|'lg'\\|'xl'` | No | `\"md\"` | Border radius preset |\n| `backgroundColor` | `string` | No | `\"rgba(255,255,255,0.05)\"` | Background |\n| `borderColor` | `string` | No | `\"rgba(255,255,255,0.08)\"` | Border color |\n| `width` | `string` | No | — | Width |\n| `height` | `string` | No | — | Height |\n| `shadow` | `boolean` | No | — | Add drop shadow |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `gest` | `HTMLAttributes<HTMLDivElement>` | No | — | Native div attributes |\n| `onFunc` | `(self: _Card) => void` | No | — | Instance callback |\n\n```tsx\n<Card padding=\"md\" radius=\"lg\" shadow\n  header={() => <Text text=\"Title\" type=\"h3\" />}\n  body={() => <Text text=\"Content goes here\" type=\"p\" />}\n  footer={() => <Text text=\"Action\" type=\"p\" />}\n/>\n```\n\n---\n\n### Avatar\n\nCircular image with size presets, icon support, and fallback. Content priority: `src` > `icon` > `fallback`.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `src` | `string` | No | — | Image URL (highest priority) |\n| `alt` | `string` | No | `\"\"` | Alt text |\n| `icon` | `ElementType` | No | — | SVG icon component (used when no `src`) |\n| `size` | `'xs'\\|'sm'\\|'md'\\|'lg'\\|'xl'` | No | `\"md\"` | Size preset: xs=1.5rem, sm=2rem, md=2.5rem, lg=3.5rem, xl=5rem |\n| `borderRadius` | `string` | No | `\"50%\"` | Border radius (circular by default) |\n| `backgroundColor` | `string` | No | `\"rgba(255,255,255,0.1)\"` | Background |\n| `fallback` | `ElementType` | No | — | Component shown when no src and no icon |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `gest` | `HTMLAttributes<HTMLDivElement>` | No | — | Native div attributes |\n| `onFunc` | `(self: _Avatar) => void` | No | — | Instance callback |\n\n```tsx\n<Avatar src=\"/user.jpg\" alt=\"User\" size=\"lg\" />\n<Avatar icon={Lock} size=\"md\" backgroundColor=\"rgba(255,255,255,0.05)\" />\n<Avatar size=\"sm\" fallback={() => <Text text=\"JD\" type=\"p\" />} />\n```\n\n---\n\n### Icon\n\nWraps any SVG icon component, forwarding `size` and `color` props. Pass the component reference directly (not wrapped in an arrow function) so props forward correctly.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `icon` | `ElementType` | Yes | — | SVG icon component (e.g. `Lock`, `Search`) |\n| `size` | `'xs'\\|'sm'\\|'md'\\|'lg'\\|'xl' \\| number` | No | `\"md\"` | Size preset: xs=12, sm=16, md=24, lg=32, xl=48. Or raw number. |\n| `color` | `string` | No | — | Icon color |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `onFunc` | `(self: _Icon) => void` | No | — | Instance callback |\n\n```tsx\nimport { Lock, Search, Heart } from \"./icons\";\n\n<Icon icon={Lock} size=\"lg\" color=\"white\" />\n<Icon icon={Search} size={40} />\n<Icon icon={Heart} size=\"sm\" color=\"red\" />\n```\n\n---\n\n### IconNetwork\n\nLoads an image from a URL as an icon-sized element. Useful for favicons, CDN-hosted icons, or external brand images.\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `src` | `string` | Yes | — | Image URL |\n| `alt` | `string` | No | `\"\"` | Alt text |\n| `size` | `'xs'\\|'sm'\\|'md'\\|'lg'\\|'xl' \\| string` | No | `\"md\"` | Size preset: xs=12px, sm=16px, md=24px, lg=32px, xl=48px. Or custom string. |\n| `borderRadius` | `string` | No | `\"50%\"` | Border radius |\n| `backgroundColor` | `string` | No | `\"transparent\"` | Background |\n| `fallback` | `ElementType` | No | — | Component shown on error |\n| `loading` | `'lazy'\\|'eager'` | No | `\"lazy\"` | Loading strategy |\n| `className` | `string` | No | — | CSS class |\n| `style` | `CSSProperties` | No | — | Inline styles |\n| `onFunc` | `(self: _IconNetwork) => void` | No | — | Instance callback |\n\n```tsx\n<IconNetwork src=\"https://cdn.example.com/logo.png\" size=\"lg\" />\n<IconNetwork src=\"/favicon.ico\" size=\"16px\" borderRadius=\".25rem\" />\n<IconNetwork src=\"https://brand.com/icon.svg\" fallback={() => <Icon icon={Globe} />} />\n```\n\n---\n\n## Built-in SVG Icons\n\nThe framework includes **205 built-in SVG icons** in `src/icons/`. All icons follow the same `IconProps` interface (`size`, `color`, `className`) and use stroke-based rendering.\n\n### Usage\n\n```tsx\nimport { Lock, Heart, ShoppingCart, Search } from \"./icons\";\n\n// With the Icon component (recommended):\n<Icon icon={Lock} size=\"lg\" color=\"white\" />\n\n// Directly as a component:\n<Lock size={24} color=\"currentColor\" />\n\n// In IconButton:\n<IconButton borderRadius=\"4rem\" icon={() => <Search />} />\n\n// In Avatar:\n<Avatar icon={Heart} size=\"md\" />\n```\n\n### Icon Categories\n\n**Navigation (25)**\n`ArrowDown` `ArrowDownLeft` `ArrowDownRight` `ArrowLeft` `ArrowRight` `ArrowUp` `ArrowUpLeft` `ArrowUpRight` `ChevronDown` `ChevronLeft` `ChevronRight` `ChevronUp` `Compass` `ExternalLink` `HambuggerMenu` `Home` `MapPin` `Maximize` `Minimize` `MoreHorizontal` `MoreVertical` `Move` `Navigation` `Refresh` `RotateLeft` `RotateRight`\n\n**Actions (25)**\n`Add` `Bug` `Camera` `Clipboard` `ClipboardCheck` `Code` `Code2` `Edit` `Edit2` `Minus` `Mic` `Pencil` `Power` `Printer` `Redo` `Reload` `Repeat` `Save` `Scissors` `Sync` `Terminal` `Trash` `Trash2` `Undo` `Zap`\n\n**Communication (20)**\n`Airplay` `AtSign` `Bell` `BellOff` `Bluetooth` `Cast` `Hash` `Headphones` `Inbox` `Mail` `MailOpen` `MessageCircle` `MessageSquare` `Mic` `MicOff` `Phone` `PhoneCall` `Radio` `Send` `Signal` `Voicemail` `Wifi` `WifiOff`\n\n**Social (20)**\n`Award` `Bookmark` `BookmarkFill` `Dislike` `Droplet` `Flame` `Gift` `Heart` `HeartFill` `Leaf` `Like` `Medal` `PartyPopper` `Sparkles` `Star` `StarFill` `ThumbsDown` `ThumbsUp` `Tree` `Trophy`\n\n**Media (25)**\n`Airplay` `Camera` `Disc` `FastBackward` `FastForward` `Film` `Headphones` `Image` `Image2` `Mic` `MicOff` `Music` `Pause` `Play` `Podcast` `Radio` `ScreenShare` `SkipBack` `SkipForward` `Stop` `Video` `Volume` `Volume1` `Volume2` `VolumeX`\n\n**Status (15)**\n`AlertCircle` `AlertOctagon` `AlertTriangle` `Ban` `CheckCircle` `Eye` `EyeOff` `Fingerprint` `HelpCircle` `Info` `Key` `Shield` `ShieldCheck` `ShieldOff` `Unlock` `XCircle`\n\n**Commerce (10)**\n`Banknote` `CreditCard` `DollarSign` `Percent` `Receipt` `ShoppingBag` `ShoppingCart` `Tag` `Tags` `Wallet`\n\n**Time (9)**\n`AlarmClock` `Calendar` `CalendarDays` `Clock` `Hourglass` `Sunrise` `Sunset` `Timer` `Watch`\n\n**Users (14)**\n`Accessibility` `Baby` `Contact` `Crown` `Group` `User` `UserCheck` `UserCog` `UserMinus` `UserPlus` `Users` `Users2` `UserSearch` `UserX`\n\n**Layout (9)**\n`AlignCenter` `AlignLeft` `AlignRight` `Columns` `Layout` `Layers` `PanelLeft` `Rows` `Sidebar`\n\n**Code (7)**\n`Cpu` `Database` `GitBranch` `GitCommit` `GitMerge` `Server`\n\n**Misc (22)**\n`Cloud` `CloudDownload` `CloudUpload` `Copy` `Download` `ExternalLink` `File` `Filter` `Flag` `Folder` `Globe` `GridView` `Key` `Link` `ListView` `Lock` `Map` `Moon` `Paperclip` `Search` `Settings` `ShareButton` `ShareLogo` `Sun` `Upload` `UploadImage` `UploadVideo` `Wind`\n\n---\n\n## Advanced Prop Patterns\n\n### Typed CSS Units\n\nProps like `gap`, `titleGap`, and `borderRadius` use template literal types for autocomplete on valid CSS length values:\n\n```tsx\n// TypeScript autocompletes these patterns:\ngap=\".5rem\"\ngap=\"10px\"\ngap=\"1.5em\"\n```\n\n### Enum-based Sizing\n\nComponents like `Badge`, `Card`, `Avatar`, `Divider`, `Icon`, and `IconNetwork` use enum props that map to internal size dictionaries. This avoids raw CSS values:\n\n```tsx\n// Instead of passing raw values:\n<Badge size=\"sm\" />          // maps to padding: .15rem .5rem, fontSize: .75rem\n<Card padding=\"lg\" />        // maps to 1.5rem\n<Avatar size=\"xl\" />         // maps to 5rem\n<Divider size=\"xs\" />        // maps to 1px\n<Icon size=\"lg\" />           // maps to 32px\n<IconNetwork size=\"sm\" />    // maps to 16px\n```\n\n### Render Props vs Children\n\nThe framework uses `ElementType` render props instead of React `children`. This enables:\n- Lazy evaluation of slot content\n- Class-based state management of slot references\n- Consistent API across all components\n\n```tsx\n// Every slot uses () => JSX pattern\n<Card\n  header={() => <Text text=\"Title\" type=\"h2\" />}\n  body={() => <Text text=\"Body\" type=\"p\" />}\n/>\n```\n\n### Gesture Passthrough\n\nThe `gest` prop accepts the full type definition for the underlying HTML element, so any native event handler or attribute works without the component needing to explicitly support it:\n\n```tsx\n// All of these work via gest:\n<Input gest={{ onChange: (e) => setSearch(e.target.value) }} />\n<Container gest={{ onMouseEnter: () => setHover(true), tabIndex: 0 }} />\n<Button gest={{ onClick: submit, disabled: isLoading }} />\n```\n\n### Avatar Content Priority\n\nAvatar supports three content sources with a clear priority chain:\n\n```tsx\n// 1. Network image (highest priority)\n<Avatar src=\"/user.jpg\" alt=\"User\" />\n\n// 2. SVG icon component (used when no src)\n<Avatar icon={Lock} size=\"md\" />\n\n// 3. Fallback (used when no src and no icon)\n<Avatar fallback={() => <Text text=\"JD\" type=\"p\" />} />\n\n// All three together — src takes priority\n<Avatar src=\"/user.jpg\" icon={Lock} fallback={() => <Text text=\"JD\" type=\"p\" />} />\n```\n","readmeFilename":"README.md"}