{"_id":"@capg/capg-ui-lib","_rev":"6-db85d111c70942f9c42d63b74a27bf25","name":"@capg/capg-ui-lib","dist-tags":{"latest":"0.9.5"},"versions":{"0.9.0":{"name":"@capg/capg-ui-lib","version":"0.9.0","author":{"name":"Camilo Andrés Páez Gallo"},"license":"ISC","_id":"@capg/capg-ui-lib@0.9.0","maintainers":[{"name":"camiloapaezg","email":"camiloapaezg@gmail.com"}],"dist":{"shasum":"b7269c9ca78973016ddf95f3d704ba73039051c8","tarball":"https://registry.npmjs.org/@capg/capg-ui-lib/-/capg-ui-lib-0.9.0.tgz","fileCount":69,"integrity":"sha512-V6cqkKunepEXzleeoHZlpw29QDcdZ4iVVDtqDoHeCRNi/Qb0gzj7oTfxONWcYM4R9x2A7HL8XnQ2fQ7jIM7q+Q==","signatures":[{"sig":"MEQCIAhpCY0qBPIHCAim5EHuCcBdqo2cT9p/AMagQcPYx0IdAiAEO6qxbp00IUETsooH+B7Vo4PlyMNiqwG0KdQb8G7Kmw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1175742},"main":"./dist/main.umd.cjs","type":"module","types":"./dist/main.d.ts","module":"./dist/main.js","exports":{".":{"import":"./dist/main.js","require":"./dist/main.umd.cjs"}},"gitHead":"1f22ee9cd639f2c471612ee6c17b029c5a14397b","scripts":{"lint":"eslint .","build":"tsc -b && vite build","start":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"camiloapaezg","email":"camiloapaezg@gmail.com"},"_npmVersion":"11.19.0","description":"This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.","directories":{},"_nodeVersion":"26.8.1","dependencies":{"clsx":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","eslint":"^10.9.1","vitest":"^4.1.11","globals":"^17.11.0","storybook":"^10.6.0","@eslint/js":"^10.0.1","playwright":"^1.62.1","typescript":"~6.0.2","@types/node":"^26.4.0","@types/react":"^19.2.18","vite-plugin-dts":"^5.0.3","@types/react-dom":"^19.2.5","typescript-eslint":"^8.68.0","@iconify-icon/react":"^3.0.3","@vitest/coverage-v8":"^4.1.11","@vitejs/plugin-react":"^6.1.1","@storybook/addon-a11y":"^10.6.0","@storybook/addon-docs":"^10.6.0","@storybook/react-vite":"^10.6.0","@storybook/addon-vitest":"^10.6.0","eslint-plugin-storybook":"^10.6.0","@chromatic-com/storybook":"^5.3.1","eslint-plugin-react-hooks":"^7.1.1","@vitest/browser-playwright":"^4.1.11","@storybook/addon-onboarding":"^10.6.0","eslint-plugin-react-refresh":"^0.5.5","@vanilla-extract/vite-plugin":"^5.2.6"},"peerDependencies":{"react":"^19.2.5","react-dom":"^19.2.5","@ark-ui/react":"^5.39.0","@vanilla-extract/css":"^1.21.2"},"_npmOperationalInternal":{"tmp":"tmp/capg-ui-lib_0.9.0_1788963308776_0.9238207524992017","host":"s3://npm-registry-packages-npm-production"}},"0.9.1":{"name":"@capg/capg-ui-lib","version":"0.9.1","author":{"name":"Camilo Andrés Páez Gallo"},"license":"ISC","_id":"@capg/capg-ui-lib@0.9.1","maintainers":[{"name":"camiloapaezg","email":"camiloapaezg@gmail.com"}],"homepage":"https://github.com/camiloapaezg/capg-ui-lib#readme","bugs":{"url":"https://github.com/camiloapaezg/capg-ui-lib/issues"},"dist":{"shasum":"b7b1b7dac198ecb5cae2407283a6f578f973e5ea","tarball":"https://registry.npmjs.org/@capg/capg-ui-lib/-/capg-ui-lib-0.9.1.tgz","fileCount":69,"integrity":"sha512-gtMZXFPKx8ZYLQBWmgIvgfXyrWcf2LZJeVLTwjkHylGBN/DAxIv0D4DQE2Cg/uvbs37JyOujiPjuleFlHOVrUA==","signatures":[{"sig":"MEQCIASFahBFuZMVXX2IfFX6Abr09ZTN230k2mT0SybPglNMAiBHoTeNbDfiWiJ/QgtZh8gIj8xkIYRidnyfPI+OBCyA5Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@capg%2fcapg-ui-lib@0.9.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1205888},"main":"./dist/main.umd.cjs","type":"module","types":"./dist/main.d.ts","module":"./dist/main.js","exports":{".":{"import":"./dist/main.js","require":"./dist/main.umd.cjs"}},"gitHead":"65fc2e9f161dce12dc961e3ec73fa6c15016c416","scripts":{"lint":"eslint .","build":"tsc -b && vite build","start":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:b6a919b7-aa69-4d3e-b3af-0fc69e280d57"}},"repository":{"url":"git+https://github.com/camiloapaezg/capg-ui-lib.git","type":"git"},"_npmVersion":"11.19.0","description":"A React component library built with **Ark UI**, **vanilla-extract**, and **TypeScript**.","directories":{},"_nodeVersion":"26.8.1","dependencies":{"clsx":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","eslint":"^10.9.1","vitest":"^4.1.11","globals":"^17.11.0","storybook":"^10.6.0","@eslint/js":"^10.0.1","playwright":"^1.62.1","typescript":"~6.0.2","@types/node":"^26.4.0","@types/react":"^19.2.18","vite-plugin-dts":"^5.0.3","@types/react-dom":"^19.2.5","typescript-eslint":"^8.68.0","@iconify-icon/react":"^3.0.3","@vitest/coverage-v8":"^4.1.11","@vitejs/plugin-react":"^6.1.1","@storybook/addon-a11y":"^10.6.0","@storybook/addon-docs":"^10.6.0","@storybook/react-vite":"^10.6.0","@storybook/addon-vitest":"^10.6.0","eslint-plugin-storybook":"^10.6.0","@chromatic-com/storybook":"^5.3.1","eslint-plugin-react-hooks":"^7.1.1","@vitest/browser-playwright":"^4.1.11","@storybook/addon-onboarding":"^10.6.0","eslint-plugin-react-refresh":"^0.5.5","@vanilla-extract/vite-plugin":"^5.2.6"},"peerDependencies":{"react":"^19.2.5","react-dom":"^19.2.5","@ark-ui/react":"^5.39.0","@vanilla-extract/css":"^1.21.2"},"_npmOperationalInternal":{"tmp":"tmp/capg-ui-lib_0.9.1_1788971196424_0.20655040340339226","host":"s3://npm-registry-packages-npm-production"}},"0.9.2":{"name":"@capg/capg-ui-lib","version":"0.9.2","author":{"name":"Camilo Andrés Páez Gallo"},"license":"ISC","_id":"@capg/capg-ui-lib@0.9.2","maintainers":[{"name":"camiloapaezg","email":"camiloapaezg@gmail.com"}],"homepage":"https://github.com/camiloapaezg/capg-ui-lib#readme","bugs":{"url":"https://github.com/camiloapaezg/capg-ui-lib/issues"},"dist":{"shasum":"5ca37693fbbb41c3aee03a5f41e7017b5f9313f4","tarball":"https://registry.npmjs.org/@capg/capg-ui-lib/-/capg-ui-lib-0.9.2.tgz","fileCount":69,"integrity":"sha512-cK2Bw6vXA6w6cpiNbQMongeP293vqb9h4Lz4gycOnsteSTorOCExmP5iEfhGQqFtpJXSzgibk/fjCoy58NvUdg==","signatures":[{"sig":"MEUCIQDPseQ7I2aoAJsrFglOZIodn1Ucib++JV8S9IwOLP0ReAIgH9YBSz1Y9TBRtD/70rO1Ez4K9ATY4JCiT5rAtHzvjW0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@capg%2fcapg-ui-lib@0.9.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1207508},"main":"./dist/main.umd.cjs","type":"module","types":"./dist/main.d.ts","module":"./dist/main.js","exports":{".":{"import":"./dist/main.js","require":"./dist/main.umd.cjs"}},"gitHead":"9893b67ced95f3915fbe12c5f3d69547424753e0","scripts":{"lint":"eslint .","build":"tsc -b && vite build","start":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:b6a919b7-aa69-4d3e-b3af-0fc69e280d57"}},"repository":{"url":"git+https://github.com/camiloapaezg/capg-ui-lib.git","type":"git"},"_npmVersion":"11.19.0","description":"A React component library built with **Ark UI**, **vanilla-extract**, and **TypeScript**.","directories":{},"_nodeVersion":"24.20.0","dependencies":{"clsx":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","eslint":"^10.9.1","vitest":"^4.1.11","globals":"^17.11.0","storybook":"^10.6.0","@eslint/js":"^10.0.1","playwright":"^1.62.1","typescript":"~6.0.2","@types/node":"^26.4.0","@types/react":"^19.2.18","vite-plugin-dts":"^5.0.3","@types/react-dom":"^19.2.5","typescript-eslint":"^8.68.0","@iconify-icon/react":"^3.0.3","@vitest/coverage-v8":"^4.1.11","@vitejs/plugin-react":"^6.1.1","@storybook/addon-a11y":"^10.6.0","@storybook/addon-docs":"^10.6.0","@storybook/react-vite":"^10.6.0","@storybook/addon-vitest":"^10.6.0","eslint-plugin-storybook":"^10.6.0","@chromatic-com/storybook":"^5.3.1","eslint-plugin-react-hooks":"^7.1.1","@vitest/browser-playwright":"^4.1.11","@storybook/addon-onboarding":"^10.6.0","eslint-plugin-react-refresh":"^0.5.5","@vanilla-extract/vite-plugin":"^5.2.6"},"peerDependencies":{"react":"^19.2.5","react-dom":"^19.2.5","@ark-ui/react":"^5.39.0","@vanilla-extract/css":"^1.21.2"},"_npmOperationalInternal":{"tmp":"tmp/capg-ui-lib_0.9.2_1789057587785_0.5763198314398594","host":"s3://npm-registry-packages-npm-production"}},"0.9.3":{"name":"@capg/capg-ui-lib","version":"0.9.3","author":{"name":"Camilo Andrés Páez Gallo"},"license":"ISC","_id":"@capg/capg-ui-lib@0.9.3","maintainers":[{"name":"camiloapaezg","email":"camiloapaezg@gmail.com"}],"homepage":"https://github.com/camiloapaezg/capg-ui-lib#readme","bugs":{"url":"https://github.com/camiloapaezg/capg-ui-lib/issues"},"dist":{"shasum":"d2c3e6819e346f83f99f05b2187bd79912562cc7","tarball":"https://registry.npmjs.org/@capg/capg-ui-lib/-/capg-ui-lib-0.9.3.tgz","fileCount":69,"integrity":"sha512-C3GnHy3igoYI3mwi9N/yTthwjsEmqr4+xbROou0Mq2sZepVK3/qNhyMypRce91AjekkISBaLmd1t+5qXOlQopg==","signatures":[{"sig":"MEUCIQCQS6DbBoyhNqMVm9r9sd6lx9h70SeyfqeH9x7otE6EKQIgIyELUPJI4Q5L3/oD0QdWPLDQZE4Z07db2Um6/8yDfYo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@capg%2fcapg-ui-lib@0.9.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1210310},"main":"./dist/main.umd.cjs","type":"module","types":"./dist/main.d.ts","module":"./dist/main.js","exports":{".":{"import":"./dist/main.js","require":"./dist/main.umd.cjs"},"./styles.css":"./dist/main.css"},"gitHead":"635f4306339d60c63f3c21536fe2b56e0e23af1c","scripts":{"lint":"eslint .","build":"tsc -b && vite build","start":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:b6a919b7-aa69-4d3e-b3af-0fc69e280d57"}},"repository":{"url":"git+https://github.com/camiloapaezg/capg-ui-lib.git","type":"git"},"_npmVersion":"11.19.0","description":"A React component library built with **Ark UI**, **vanilla-extract**, and **TypeScript**.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.20.0","dependencies":{"clsx":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","eslint":"^10.9.1","vitest":"^4.1.11","globals":"^17.11.0","storybook":"^10.6.0","@eslint/js":"^10.0.1","playwright":"^1.62.1","typescript":"~6.0.2","@types/node":"^26.4.0","@types/react":"^19.2.18","vite-plugin-dts":"^5.0.3","@types/react-dom":"^19.2.5","typescript-eslint":"^8.68.0","@iconify-icon/react":"^3.0.3","@vitest/coverage-v8":"^4.1.11","@vitejs/plugin-react":"^6.1.1","@storybook/addon-a11y":"^10.6.0","@storybook/addon-docs":"^10.6.0","@storybook/react-vite":"^10.6.0","@storybook/addon-vitest":"^10.6.0","eslint-plugin-storybook":"^10.6.0","@chromatic-com/storybook":"^5.3.1","eslint-plugin-react-hooks":"^7.1.1","@vitest/browser-playwright":"^4.1.11","@storybook/addon-onboarding":"^10.6.0","eslint-plugin-react-refresh":"^0.5.5","@vanilla-extract/vite-plugin":"^5.2.6"},"peerDependencies":{"react":"^19.2.5","react-dom":"^19.2.5","@ark-ui/react":"^5.39.0","@vanilla-extract/css":"^1.21.2"},"_npmOperationalInternal":{"tmp":"tmp/capg-ui-lib_0.9.3_1789297888884_0.6748208245792848","host":"s3://npm-registry-packages-npm-production"}},"0.9.4":{"name":"@capg/capg-ui-lib","version":"0.9.4","author":{"name":"Camilo Andrés Páez Gallo"},"license":"ISC","_id":"@capg/capg-ui-lib@0.9.4","maintainers":[{"name":"camiloapaezg","email":"camiloapaezg@gmail.com"}],"homepage":"https://github.com/camiloapaezg/capg-ui-lib#readme","bugs":{"url":"https://github.com/camiloapaezg/capg-ui-lib/issues"},"dist":{"shasum":"7ff490852cdd5d007f2839fb57d085e16ad1f61d","tarball":"https://registry.npmjs.org/@capg/capg-ui-lib/-/capg-ui-lib-0.9.4.tgz","fileCount":69,"integrity":"sha512-2w+LJoPPkPCE8m2hJQtaQD25SJB5g/OAuCauJ9tEG9MLeGiCh1+bVlb/BI7mhNR71LX7bpx3Hb9OZq29aEciGA==","signatures":[{"sig":"MEUCIAQb8/ERZatHy/q2wl6fyCHub2aA1TrPL2fAybBZG5LSAiEA3Hazhid26t2xoROBOcf7YCXdHT8Yv6v4sE+trkCoS0A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@capg%2fcapg-ui-lib@0.9.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1212493},"main":"./dist/main.umd.cjs","type":"module","types":"./dist/main.d.ts","module":"./dist/main.js","exports":{".":{"import":"./dist/main.js","require":"./dist/main.umd.cjs"},"./styles.css":"./dist/main.css"},"gitHead":"433a2e4047e2268304f2c626eb538778eb31300c","scripts":{"lint":"eslint .","build":"tsc -b && vite build","start":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:b6a919b7-aa69-4d3e-b3af-0fc69e280d57"}},"repository":{"url":"git+https://github.com/camiloapaezg/capg-ui-lib.git","type":"git"},"_npmVersion":"11.19.0","description":"A React components library built with **Ark UI**, **vanilla-extract**, and **TypeScript**.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.20.0","dependencies":{"clsx":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","eslint":"^10.9.1","vitest":"^4.1.11","globals":"^17.11.0","storybook":"^10.6.0","@eslint/js":"^10.0.1","playwright":"^1.62.1","typescript":"~6.0.2","@types/node":"^26.4.0","@types/react":"^19.2.18","vite-plugin-dts":"^5.0.3","@types/react-dom":"^19.2.5","typescript-eslint":"^8.68.0","@iconify-icon/react":"^3.0.3","@vitest/coverage-v8":"^4.1.11","@vitejs/plugin-react":"^6.1.1","@storybook/addon-a11y":"^10.6.0","@storybook/addon-docs":"^10.6.0","@storybook/react-vite":"^10.6.0","@storybook/addon-vitest":"^10.6.0","eslint-plugin-storybook":"^10.6.0","@chromatic-com/storybook":"^5.3.1","eslint-plugin-react-hooks":"^7.1.1","@vitest/browser-playwright":"^4.1.11","@storybook/addon-onboarding":"^10.6.0","eslint-plugin-react-refresh":"^0.5.5","@vanilla-extract/vite-plugin":"^5.2.6"},"peerDependencies":{"react":"^19.2.5","react-dom":"^19.2.5","@ark-ui/react":"^5.39.0","@vanilla-extract/css":"^1.21.2"},"_npmOperationalInternal":{"tmp":"tmp/capg-ui-lib_0.9.4_1789317163934_0.28884901041216704","host":"s3://npm-registry-packages-npm-production"}},"0.9.5":{"_id":"@capg/capg-ui-lib@0.9.5","bugs":{"url":"https://github.com/camiloapaezg/capg-ui-lib/issues"},"dist":{"shasum":"cf1b40748af2aafe01e871b9d9aa3c52e0962df9","tarball":"https://registry.npmjs.org/@capg/capg-ui-lib/-/capg-ui-lib-0.9.5.tgz","fileCount":71,"integrity":"sha512-7MpE6Vgb63XOp5/QeLsL3vveSX+IJOdaUwGIDzk6Qr/Tn2eI9u8co+3+hP6rnkjJNBPdR5r+s+njpOrPKNoF7A==","signatures":[{"sig":"MEYCIQDwbY6ghQGzl/9N9+xClVLicPZePcKw4V/B/emGPG5N5AIhAM7A8VhtCu83gvbXcgEekcPvaHXGXPE6H1yebVvLvSB6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBWmCMRDKqLGIVkuaYvoH7s/6bNDWZpcZr6lqltQjVs6AiEAmld7I+o+J5fxo4pqnzPqJOkQyLvLEUomKbY+WXbWXW4="}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@capg%2fcapg-ui-lib@0.9.5","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1216637},"main":"./dist/main.umd.cjs","name":"@capg/capg-ui-lib","type":"module","types":"./dist/main.d.ts","author":{"name":"Camilo Andrés Páez Gallo"},"module":"./dist/main.js","exports":{".":{"import":"./dist/main.js","require":"./dist/main.umd.cjs"},"./styles.css":"./dist/main.css"},"gitHead":"8026e394b92ab234f9c1499515abb674d5dead90","license":"ISC","scripts":{"lint":"eslint .","build":"tsc -b && vite build","start":"storybook dev -p 6006","build-storybook":"storybook build"},"version":"0.9.5","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:b6a919b7-aa69-4d3e-b3af-0fc69e280d57"}},"homepage":"https://github.com/camiloapaezg/capg-ui-lib#readme","repository":{"url":"git+https://github.com/camiloapaezg/capg-ui-lib.git","type":"git"},"_npmVersion":"11.19.0","description":"A React components library built with **Ark UI**, **vanilla-extract**, and **TypeScript**.","directories":{},"maintainers":[{"name":"camiloapaezg","email":"camiloapaezg@gmail.com"}],"sideEffects":["**/*.css"],"_nodeVersion":"24.20.0","dependencies":{"clsx":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","eslint":"^10.9.1","vitest":"^4.1.11","globals":"^17.11.0","storybook":"^10.6.0","@eslint/js":"^10.0.1","playwright":"^1.62.1","typescript":"~6.0.2","@types/node":"^26.4.0","@types/react":"^19.2.18","vite-plugin-dts":"^5.0.3","@types/react-dom":"^19.2.5","typescript-eslint":"^8.68.0","@iconify-icon/react":"^3.0.3","@vitest/coverage-v8":"^4.1.11","@vitejs/plugin-react":"^6.1.1","@storybook/addon-a11y":"^10.6.0","@storybook/addon-docs":"^10.6.0","@storybook/react-vite":"^10.6.0","@storybook/addon-vitest":"^10.6.0","eslint-plugin-storybook":"^10.6.0","@chromatic-com/storybook":"^5.3.1","eslint-plugin-react-hooks":"^7.1.1","@vitest/browser-playwright":"^4.1.11","@storybook/addon-onboarding":"^10.6.0","eslint-plugin-react-refresh":"^0.5.5","@vanilla-extract/vite-plugin":"^5.2.6"},"peerDependencies":{"react":"^19.2.5","react-dom":"^19.2.5","@ark-ui/react":"^5.39.0","@vanilla-extract/css":"^1.21.2"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/capg-ui-lib_0.9.5_1790001806374_0.42517604755845895"}}},"time":{"created":"2026-09-09T14:15:08.627Z","modified":"2026-09-21T14:43:26.893Z","0.9.0":"2026-09-09T14:15:08.903Z","0.9.1":"2026-09-09T16:26:36.631Z","0.9.2":"2026-09-10T16:26:27.930Z","0.9.3":"2026-09-13T11:11:29.031Z","0.9.4":"2026-09-13T16:32:44.104Z","0.9.5":"2026-09-21T14:43:26.474Z"},"bugs":{"url":"https://github.com/camiloapaezg/capg-ui-lib/issues"},"author":{"name":"Camilo Andrés Páez Gallo"},"license":"ISC","homepage":"https://github.com/camiloapaezg/capg-ui-lib#readme","repository":{"url":"git+https://github.com/camiloapaezg/capg-ui-lib.git","type":"git"},"description":"A React components library built with **Ark UI**, **vanilla-extract**, and **TypeScript**.","maintainers":[{"name":"camiloapaezg","email":"camiloapaezg@gmail.com"}],"readme":"# CAPG UI Components Library\n\nA React components library built with **Ark UI**, **vanilla-extract**, and **TypeScript**.\n\n`@capg/capg-ui-lib` provides accessible, reusable UI components with a consistent visual language, TypeScript support, and built-in light/dark theme support.\n\n## Features\n\n- React 19 support\n- TypeScript-first API\n- Accessible primitives powered by [Ark UI](https://ark-ui.com/)\n- Type-safe styling with [vanilla-extract](https://vanilla-extract.style/)\n- Light and dark theme support\n- Storybook development environment\n- Reusable form and interaction components\n- Components exported from a single package entry point\n\n## Installation\n\n```bash\nnpm install @capg/capg-ui-lib\n```\n\n### Peer dependencies\n\nThe library requires:\n\n```text\nreact ^19.2.5\nreact-dom ^19.2.5\n@ark-ui/react ^5.39.0\n@vanilla-extract/css ^1.21.2\n```\n\nIf these dependencies are not already installed:\n\n```bash\nnpm install react react-dom @ark-ui/react @vanilla-extract/css\n```\n\n## Styling & Theming\n\nTo apply styles and themes the following steps must be completed:\n\n1. The library styles must be imported in the root component as follows:\n\n```tsx\nimport \"@capg/capg-ui-lib/styles.css\";\n```\n\n2. The [ThemeProvider](#ThemeProvider) wrapper must be added at the top of the hierarchy so that the styles are applied to all children elements.\n\nComponents include their own predefined styles while allowing consumers to provide additional `className` values where supported.\n\nExample:\n\n```tsx\nimport { ThemeProvider, useTheme } from \"@capg/capg-ui-lib\";\n\nfunction App() {\n  const { className, onToggleTheme } = useTheme();\n\n  return (\n    <div className={className}>\n      <button onClick={() => onToggleTheme?.(true)}>Dark</button>\n      <button onClick={() => onToggleTheme?.(false)}>Light</button>\n      <Application />\n    </div>\n  );\n}\n\nexport default function Root() {\n  return (\n    <ThemeProvider>\n      <App />\n    </ThemeProvider>\n  );\n}\n```\n\nThe design theme tokens might be accessed via the `tokens` TypeScript object or the corresponding `var(--tokens-...)` element in the CSS file. Please find below all available tokens:\n\n```json\n{\n  \"primary\": {\n    \"lighter\": \"tokens-primary-lighter\",\n    \"light\": \"tokens-primary-light\",\n    \"default\": \"tokens-primary-default\",\n    \"dark\": \"tokens-primary-dark\",\n    \"darker\": \"tokens-primary-darker\"\n  },\n  \"secondary\": {\n    \"default\": \"tokens-secondary-default\",\n    \"dark\": \"tokens-secondary-dark\",\n    \"darker\": \"tokens-secondary-darker\"\n  },\n  \"surface\": {\n    \"default\": \"tokens-surface-default\",\n    \"light\": \"tokens-surface-light\",\n    \"backdrop\": \"tokens-surface-backdrop\"\n  },\n  \"text\": {\n    \"primary\": \"tokens-text-primary\",\n    \"secondary\": \"tokens-text-secondary\"\n  },\n  \"border\": {\n    \"default\": \"tokens-border-default\",\n    \"strong\": \"tokens-border-strong\"\n  },\n  \"semantic\": {\n    \"info\": \"tokens-semantic-info\",\n    \"success\": \"tokens-semantic-success\",\n    \"warning\": \"tokens-semantic-warning\",\n    \"error\": \"tokens-semantic-error\"\n  },\n  \"shadows\": {\n    \"xs\": \"tokens-shadows-xs\",\n    \"sm\": \"tokens-shadows-sm\",\n    \"md\": \"tokens-shadows-md\",\n    \"lg\": \"tokens-shadows-lg\",\n    \"xl\": \"tokens-shadows-xl\",\n    \"xxl\": \"tokens-shadows-xxl\"\n  }\n}\n```\n\n## Basic usage\n\nComponents can be imported directly from the package:\n\n```tsx\nimport { Button, TextInput, Dropdown, Toggle } from \"@capg/capg-ui-lib\";\n\nexport function Example() {\n  return (\n    <div>\n      <Button\n        appearance=\"Primary\"\n        label=\"Save\"\n        onClick={() => console.log(\"Saved\")}\n      />\n\n      <TextInput\n        placeholder=\"Enter your name\"\n        onValueChange={(_, value) => console.log(value)}\n      />\n\n      <Toggle label=\"Enable notifications\" />\n    </div>\n  );\n}\n```\n\n---\n\n# Components\n\nThe library currently exports the following components:\n\n| Component            | Description                                                        |\n| -------------------- | ------------------------------------------------------------------ |\n| `BasicDialog`        | Modal dialog with trigger, title and content                       |\n| `Button`             | Styled button with multiple appearances and optional icon          |\n| `CollapsibleSection` | Accordion-style collapsible sections                               |\n| `ContextMenu`        | Context or standard menu with buttons, checkboxes and custom items |\n| `DateSelector`       | Date, multiple-date and date-range selector                        |\n| `Dropdown`           | Select/dropdown with optional grouping                             |\n| `FormField`          | Field wrapper providing label, helper and error text               |\n| `NumericInput`       | Numeric input with increment/decrement controls                    |\n| `OptionsGroup`       | Radio-button group                                                 |\n| `PaginationControl`  | Pagination control with customizable item rendering                |\n| `ProgressIndicator`  | Linear or circular progress indicator                              |\n| `ProtectedInput`     | Password input with visibility toggle                              |\n| `QRCode`             | QR code with optional image overlay                                |\n| `RangeSlider`        | Slider supporting single values and ranges                         |\n| `ScrollableArea`     | Styled scrollable container                                        |\n| `SelectionBox`       | Checkbox-style selection control                                   |\n| `Stepper`            | Multi-step navigation component                                    |\n| `TabsGroup`          | Tab navigation with associated content                             |\n| `TextArea`           | Styled textarea with value-change callback                         |\n| `TextInput`          | Styled text input with value-change callback                       |\n| `ThemeProvider`      | Light/dark theme context                                           |\n| `Toggle`             | Switch/toggle control                                              |\n| `UploadFile`         | File upload/drop zone with previews                                |\n| `UserImage`          | Avatar/image with fallback                                         |\n\n---\n\n# Button\n\nA styled HTML button supporting several visual appearances and optional icons.\n\n```tsx\nimport { Button } from \"@capg/capg-ui-lib\";\n\n<Button appearance=\"Primary\" label=\"Save\" onClick={handleSave} />;\n```\n\n### Props\n\n`Button` extends the native `ButtonHTMLAttributes<HTMLButtonElement>`.\n\n| Prop         | Type                                               | Required | Description                      |\n| ------------ | -------------------------------------------------- | -------: | -------------------------------- |\n| `appearance` | `\"Primary\" \\| \"Secondary\" \\| \"Outline\" \\| \"Ghost\"` |      Yes | Visual appearance                |\n| `label`      | `string`                                           |       No | Button text                      |\n| `icon`       | `JSX.Element`                                      |       No | Icon displayed inside the button |\n| `className`  | `string`                                           |       No | Additional CSS class             |\n| `...rest`    | `ButtonHTMLAttributes<HTMLButtonElement>`          |       No | Native button properties         |\n\n### Appearances\n\n```tsx\n<Button appearance=\"Primary\" label=\"Primary\" />\n<Button appearance=\"Secondary\" label=\"Secondary\" />\n<Button appearance=\"Outline\" label=\"Outline\" />\n<Button appearance=\"Ghost\" label=\"Ghost\" />\n```\n\nWhen `label` is omitted, the button receives the icon-button styling:\n\n```tsx\n<Button appearance=\"Ghost\" icon={<MyIcon />} />\n```\n\n---\n\n# BasicDialog\n\nA modal dialog built on top of Ark UI's dialog primitive.\n\n```tsx\nimport { BasicDialog, Button } from \"@capg/capg-ui-lib\";\n\n<BasicDialog\n  title=\"Delete item\"\n  trigger={<Button appearance=\"Outline\" label=\"Delete\" />}\n>\n  <p>Are you sure you want to delete this item?</p>\n</BasicDialog>;\n```\n\n### Props\n\n`BasicDialog` extends `Dialog.RootProps`.\n\n| Prop            | Type                   | Description                     |\n| --------------- | ---------------------- | ------------------------------- |\n| `trigger`       | `JSX.Element`          | Element used to open the dialog |\n| `title`         | `string`               | Dialog title                    |\n| `portalProps`   | `PortalProps`          | Props forwarded to the portal   |\n| `backdropProps` | `Dialog.BackdropProps` | Props forwarded to the backdrop |\n| `titleProps`    | `Dialog.TitleProps`    | Props forwarded to the title    |\n| `contentProps`  | `Dialog.ContentProps`  | Props forwarded to the content  |\n| `children`      | `React.ReactNode`      | Dialog content                  |\n| `...rest`       | `Dialog.RootProps`     | Ark UI dialog properties        |\n\nThe dialog includes a built-in close button.\n\n---\n\n# CollapsibleSection\n\nAccordion-style collapsible content.\n\n```tsx\nimport { CollapsibleSection } from \"@capg/capg-ui-lib\";\n\n<CollapsibleSection\n  items={[\n    {\n      value: \"general\",\n      title: \"General\",\n      content: \"General configuration options.\",\n    },\n    {\n      value: \"advanced\",\n      title: \"Advanced\",\n      content: \"Advanced configuration options.\",\n    },\n  ]}\n/>;\n```\n\n### Props\n\n`CollapsibleSection` extends `Accordion.RootProps`.\n\n| Prop          | Type                         | Required |\n| ------------- | ---------------------------- | -------: |\n| `items`       | `CollapsibleItem[]`          |      Yes |\n| `orientation` | Ark UI accordion orientation |       No |\n| `className`   | `string`                     |       No |\n| `...rest`     | `Accordion.RootProps`        |       No |\n\n### Item\n\n```ts\ntype CollapsibleItem = {\n  value: string;\n  title: string;\n  content: string;\n};\n```\n\nAdditional Ark UI item properties are also supported.\n\n---\n\n# ContextMenu\n\nA context menu supporting regular menu items, checkbox items, groups, and custom-rendered items.\n\n```tsx\nimport { ContextMenu } from \"@capg/capg-ui-lib\";\n\n<ContextMenu\n  trigger={<div>Right click me</div>}\n  items={[\n    {\n      category: \"button\",\n      value: \"edit\",\n      text: \"Edit\",\n    },\n    {\n      category: \"button\",\n      value: \"delete\",\n      text: \"Delete\",\n    },\n  ]}\n/>;\n```\n\n### Props\n\n`ContextMenu` extends Ark UI's `MenuRootProps`.\n\n| Prop             | Type                | Description                                      |\n| ---------------- | ------------------- | ------------------------------------------------ |\n| `items`          | `ContextMenuItem[]` | Menu items                                       |\n| `trigger`        | `JSX.Element`       | Menu trigger                                     |\n| `customTrigger`  | `boolean`           | Use the trigger without wrapping it              |\n| `asStandardMenu` | `boolean`           | Render a standard menu instead of a context menu |\n| `contentProps`   | `Menu.ContentProps` | Content customization                            |\n| `...rest`        | `MenuRootProps`     | Ark UI menu properties                           |\n\n### Button item\n\n```tsx\n{\n  category: \"button\",\n  value: \"edit\",\n  text: \"Edit\"\n}\n```\n\n### Checkbox item\n\n```tsx\n{\n  category: \"checkbox\",\n  value: \"show-grid\",\n  text: \"Show grid\"\n}\n```\n\n### Custom item\n\n```tsx\n{\n  category: \"custom\",\n  value: \"custom-action\",\n  onRenderItem: () => <MyCustomMenuItem />\n}\n```\n\nItems can optionally be grouped:\n\n```tsx\n{\n  category: \"button\",\n  value: \"copy\",\n  text: \"Copy\",\n  group: \"Clipboard\"\n}\n```\n\n---\n\n# DateSelector\n\nDate picker supporting:\n\n- Single date selection\n- Multiple date selection\n- Date ranges\n- Day/month/year navigation\n- Clear action\n\n```tsx\nimport { DateSelector } from \"@capg/capg-ui-lib\";\n\n<DateSelector label=\"Date\" selectionMode=\"single\" />;\n```\n\n### Single date\n\n```tsx\n<DateSelector label=\"Date\" selectionMode=\"single\" />\n```\n\n### Date range\n\n```tsx\n<DateSelector label=\"Period\" selectionMode=\"range\" />\n```\n\n### Multiple dates\n\n```tsx\n<DateSelector label=\"Dates\" selectionMode=\"multiple\" />\n```\n\n### Props\n\n`DateSelector` extends `DatePicker.RootProps`.\n\n| Prop              | Type                                | Description                   |\n| ----------------- | ----------------------------------- | ----------------------------- |\n| `label`           | `string`                            | Optional field label          |\n| `clearLabel`      | `string`                            | Text for clear button         |\n| `selectionMode`   | `\"single\" \\| \"multiple\" \\| \"range\"` | Selection mode                |\n| `positionerProps` | `DatePicker.PositionerProps`        | Positioner customization      |\n| `disabled`        | `boolean`                           | Disables the selector         |\n| `className`       | `string`                            | Additional class              |\n| `...rest`         | `DatePicker.RootProps`              | Ark UI date picker properties |\n\nThe default clear label is `\"Clear\"`.\n\n---\n\n# Dropdown\n\nSelect/dropdown component with optional grouping.\n\n```tsx\nimport { Dropdown } from \"@capg/capg-ui-lib\";\n\n<Dropdown\n  label=\"Country\"\n  options={{\n    items: [\n      { label: \"Germany\", value: \"de\" },\n      { label: \"Spain\", value: \"es\" },\n      { label: \"France\", value: \"fr\" },\n    ],\n  }}\n/>;\n```\n\n### Option\n\n```ts\ntype DropdownOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  group?: string;\n};\n```\n\n### Grouped options\n\n```tsx\n<Dropdown\n  label=\"Country\"\n  group\n  options={{\n    items: [\n      {\n        label: \"Germany\",\n        value: \"de\",\n        group: \"Europe\",\n      },\n      {\n        label: \"Japan\",\n        value: \"jp\",\n        group: \"Asia\",\n      },\n    ],\n  }}\n/>\n```\n\n### Props\n\n| Prop              | Type                       | Description              |\n| ----------------- | -------------------------- | ------------------------ |\n| `options`         | `DropdownOptions`          | Collection options       |\n| `label`           | `string`                   | Optional label           |\n| `group`           | `boolean`                  | Enable grouping          |\n| `valueTextProps`  | `Select.ValueTextProps`    | Value text customization |\n| `positionerProps` | `Select.PositionerProps`   | Positioner customization |\n| `contentProps`    | `Select.ContentProps`      | Content customization    |\n| `...rest`         | `SelectRootComponentProps` | Ark UI select properties |\n\nWhen there are no items, the component displays `\"No items to display\"`.\n\n---\n\n# FormField\n\nGeneric form-field wrapper providing label, helper text, and validation error text.\n\n```tsx\nimport { FormField, TextInput } from \"@capg/capg-ui-lib\";\n\n<FormField label=\"Username\" helperText=\"Enter your public username.\">\n  <TextInput placeholder=\"Username\" />\n</FormField>;\n```\n\n### Props\n\n`FormField` extends `Field.RootProps`.\n\n| Prop         | Type              | Description             |\n| ------------ | ----------------- | ----------------------- |\n| `label`      | `string`          | Field label             |\n| `helperText` | `string`          | Supporting text         |\n| `errorText`  | `string`          | Validation error        |\n| `children`   | `React.ReactNode` | Field control           |\n| `...rest`    | `Field.RootProps` | Ark UI field properties |\n\n---\n\n# NumericInput\n\nNumeric input with increment and decrement controls.\n\n```tsx\nimport { NumericInput } from \"@capg/capg-ui-lib\";\n\n<NumericInput label=\"Quantity\" min={0} max={100} defaultValue={10} />;\n```\n\n### Props\n\n`NumericInput` extends `NumberInput.RootProps`.\n\n| Prop      | Type                    | Description                    |\n| --------- | ----------------------- | ------------------------------ |\n| `label`   | `string`                | Optional label                 |\n| `...rest` | `NumberInput.RootProps` | Ark UI number-input properties |\n\nArk UI properties such as `min`, `max`, `step`, `defaultValue`, `value`, and change handlers can therefore be used.\n\n---\n\n# OptionsGroup\n\nRadio-button group for selecting one option.\n\n```tsx\nimport { OptionsGroup } from \"@capg/capg-ui-lib\";\n\n<OptionsGroup\n  label=\"Size\"\n  items={[\n    {\n      value: \"small\",\n      text: \"Small\",\n    },\n    {\n      value: \"medium\",\n      text: \"Medium\",\n    },\n    {\n      value: \"large\",\n      text: \"Large\",\n    },\n  ]}\n/>;\n```\n\n### Item\n\n```ts\ntype OptionsGroupItem = {\n  value: string;\n  text: string;\n};\n```\n\nThe item also supports Ark UI `RadioGroup.ItemProps`.\n\n### Props\n\n| Prop      | Type                   | Required |\n| --------- | ---------------------- | -------: |\n| `items`   | `OptionsGroupItem[]`   |      Yes |\n| `label`   | `string`               |       No |\n| `...rest` | `RadioGroup.RootProps` |       No |\n\n---\n\n# PaginationControl\n\nPagination component with optional rendering of the items associated with the current page.\n\n```tsx\nimport { PaginationControl } from \"@capg/capg-ui-lib\";\n\n<PaginationControl\n  count={100}\n  pageSize={10}\n  items={data}\n  onRenderItem={(item) => <div>{String(item)}</div>}\n/>;\n```\n\n### Props\n\n`PaginationControl` extends `Pagination.RootProps`.\n\n| Prop            | Type                                | Description                       |\n| --------------- | ----------------------------------- | --------------------------------- |\n| `items`         | `unknown[]`                         | Items to paginate                 |\n| `onRenderItems` | `(pagination) => React.ReactNode`   | Custom rendering before the items |\n| `onRenderItem`  | `(item, pagination) => JSX.Element` | Custom rendering for each item    |\n| `className`     | `string`                            | Additional class                  |\n| `...rest`       | `Pagination.RootProps`              | Ark UI pagination properties      |\n\nThe component automatically renders:\n\n- Previous button\n- Page buttons\n- Ellipsis\n- Next button\n\n---\n\n# ProgressIndicator\n\nProgress indicator supporting circular and linear appearances.\n\n```tsx\nimport { ProgressIndicator } from \"@capg/capg-ui-lib\";\n\n<ProgressIndicator appearance=\"Circular\" value={65} label=\"Uploading\" />;\n```\n\n### Circular\n\n```tsx\n<ProgressIndicator appearance=\"Circular\" value={65} label=\"Progress\" />\n```\n\n### Linear\n\n```tsx\n<ProgressIndicator appearance=\"Linear\" value={65} label=\"Progress\" />\n```\n\n### Props\n\n`ProgressIndicator` extends `Progress.RootProps`.\n\n| Prop         | Type                     | Required |\n| ------------ | ------------------------ | -------: |\n| `appearance` | `\"Linear\" \\| \"Circular\"` |      Yes |\n| `label`      | `string`                 |       No |\n| `...rest`    | `Progress.RootProps`     |       No |\n\n---\n\n# ProtectedInput\n\nPassword input with a built-in visibility toggle.\n\n```tsx\nimport { ProtectedInput } from \"@capg/capg-ui-lib\";\n\n<ProtectedInput label=\"Password\" placeholder=\"Enter your password\" />;\n```\n\n### Props\n\n`ProtectedInput` extends `PasswordInput.RootProps`.\n\n| Prop      | Type                      | Description                      |\n| --------- | ------------------------- | -------------------------------- |\n| `label`   | `string`                  | Optional label                   |\n| `...rest` | `PasswordInput.RootProps` | Ark UI password-input properties |\n\nThe component automatically renders eye/eye-off icons for the visibility control.\n\n---\n\n# QRCode\n\nQR code component based on Ark UI's QR code primitive.\n\n```tsx\nimport { QRCode } from \"@capg/capg-ui-lib\";\n\n<QRCode value=\"https://example.com\" size={200} />;\n```\n\n### Image overlay\n\n```tsx\n<QRCode\n  value=\"https://example.com\"\n  overlayProps={{\n    src: \"/logo.png\",\n    alt: \"Logo\",\n  }}\n/>\n```\n\n### Props\n\n`QRCode` extends `QrCode.RootProps`.\n\n| Prop           | Type                                  | Description                               |\n| -------------- | ------------------------------------- | ----------------------------------------- |\n| `overlayProps` | `ImgHTMLAttributes<HTMLImageElement>` | Optional image displayed over the QR code |\n| `className`    | `string`                              | Additional class                          |\n| `...rest`      | `QrCode.RootProps`                    | Ark UI QR-code properties                 |\n\n---\n\n# RangeSlider\n\nSlider supporting both single values and ranges.\n\n```tsx\nimport { RangeSlider } from \"@capg/capg-ui-lib\";\n\n<RangeSlider label=\"Volume\" min={0} max={100} defaultValue={[50]} />;\n```\n\n### Range\n\n```tsx\n<RangeSlider label=\"Price\" min={0} max={1000} defaultValue={[200, 800]} />\n```\n\nWhen `defaultValue` contains two values, the component renders two slider thumbs.\n\n### Marks\n\n```tsx\n<RangeSlider\n  label=\"Price\"\n  min={0}\n  max={100}\n  defaultValue={[50]}\n  marks={[0, 25, 50, 75, 100]}\n/>\n```\n\n### Props\n\n`RangeSlider` extends `Slider.RootProps`.\n\n| Prop           | Type               | Description              |\n| -------------- | ------------------ | ------------------------ |\n| `label`        | `string`           | Optional label           |\n| `marks`        | `number[]`         | Optional slider marks    |\n| `orientation`  | Slider orientation | Horizontal or vertical   |\n| `defaultValue` | `number[]`         | Initial value/range      |\n| `...rest`      | `Slider.RootProps` | Ark UI slider properties |\n\n---\n\n# ScrollableArea\n\nStyled scrollable container supporting vertical and horizontal scrolling.\n\n```tsx\nimport { ScrollableArea } from \"@capg/capg-ui-lib\";\n\n<ScrollableArea>\n  <div>Large amount of content...</div>\n</ScrollableArea>;\n```\n\n### Horizontal scrolling\n\n```tsx\n<ScrollableArea orientation=\"horizontal\">\n  <div>Wide content...</div>\n</ScrollableArea>\n```\n\n### Props\n\n`ScrollableArea` extends `ScrollArea.RootProps`.\n\n| Prop          | Type                         | Description                   |\n| ------------- | ---------------------------- | ----------------------------- |\n| `orientation` | `\"vertical\" \\| \"horizontal\"` | Scrollbar orientation         |\n| `children`    | `React.ReactNode`            | Scrollable content            |\n| `className`   | `string`                     | Additional class              |\n| `...rest`     | `ScrollArea.RootProps`       | Ark UI scroll-area properties |\n\nIf no orientation is specified, both vertical and horizontal scrollbars are available.\n\n---\n\n# SelectionBox\n\nCheckbox-style selection control.\n\n```tsx\nimport { SelectionBox } from \"@capg/capg-ui-lib\";\n\n<SelectionBox\n  label=\"I agree to the terms\"\n  checked={accepted}\n  onCheckedChange={(details) => {\n    setAccepted(details.checked);\n  }}\n/>;\n```\n\n### Props\n\n`SelectionBox` extends `Checkbox.RootProps`.\n\n| Prop      | Type                         | Required |\n| --------- | ---------------------------- | -------: |\n| `label`   | `string`                     |      Yes |\n| `checked` | `boolean \\| \"indeterminate\"` |       No |\n| `...rest` | `Checkbox.RootProps`         |       No |\n\nThe component displays a checkmark for a checked state and a horizontal line for an indeterminate state.\n\n---\n\n# Stepper\n\nMulti-step navigation component.\n\n```tsx\nimport { Stepper } from \"@capg/capg-ui-lib\";\n\n<Stepper\n  items={[\n    {\n      value: \"account\",\n      title: \"Account\",\n      content: <AccountStep />,\n    },\n    {\n      value: \"profile\",\n      title: \"Profile\",\n      content: <ProfileStep />,\n    },\n    {\n      value: \"confirmation\",\n      title: \"Confirmation\",\n      content: <ConfirmationStep />,\n    },\n  ]}\n  completedContent={<p>Completed!</p>}\n/>;\n```\n\n### Item\n\n```ts\ntype StepperItem = {\n  value: string;\n  title: string;\n  content?: React.ReactNode;\n};\n```\n\n### Props\n\n| Prop               | Type                                | Required |\n| ------------------ | ----------------------------------- | -------: |\n| `items`            | `StepperItem[]`                     |      Yes |\n| `completedContent` | `JSX.Element`                       |      Yes |\n| `contentProps`     | `Steps.ContentProps`                |       No |\n| `...rest`          | `Steps.RootProps` excluding `count` |       No |\n\nThe component automatically calculates the step count from `items`.\n\nIt also provides built-in:\n\n- Back button\n- Next button\n- Completed content\n- Step indicators\n- Step separators\n\n---\n\n# TabsGroup\n\nTab navigation with associated content.\n\n```tsx\nimport { TabsGroup } from \"@capg/capg-ui-lib\";\n\n<TabsGroup\n  defaultValue=\"overview\"\n  items={[\n    {\n      value: \"overview\",\n      title: \"Overview\",\n      content: <Overview />,\n    },\n    {\n      value: \"settings\",\n      title: \"Settings\",\n      content: <Settings />,\n    },\n  ]}\n/>;\n```\n\n### Item\n\n```ts\ntype TabsGroupItem = {\n  value: string;\n  title: string;\n  content: React.ReactNode;\n  triggerProps?: Tabs.TriggerProps;\n  contentProps?: Tabs.ContentProps;\n};\n```\n\n### Props\n\n| Prop      | Type              | Required |\n| --------- | ----------------- | -------: |\n| `items`   | `TabsGroupItem[]` |      Yes |\n| `...rest` | `Tabs.RootProps`  |       No |\n\nIndividual tab triggers and content areas can be customized through `triggerProps` and `contentProps`.\n\n---\n\n# TextInput\n\nStyled text input with a simplified value-change callback.\n\n```tsx\nimport { TextInput } from \"@capg/capg-ui-lib\";\n\n<TextInput\n  placeholder=\"Enter your name\"\n  onValueChange={(event, value) => {\n    console.log(value);\n  }}\n/>;\n```\n\n### Props\n\n`TextInput` is based on Ark UI's `Field.InputProps`.\n\nThe native `onChange` prop is replaced by:\n\n```ts\nonValueChange?: (\n  event: React.ChangeEvent<HTMLInputElement>,\n  newValue?: string,\n) => void;\n```\n\nOther supported input properties are inherited from Ark UI.\n\n---\n\n# TextArea\n\nStyled textarea with a simplified value-change callback.\n\n```tsx\nimport { TextArea } from \"@capg/capg-ui-lib\";\n\n<TextArea\n  placeholder=\"Write a description...\"\n  rows={5}\n  onValueChange={(event, value) => {\n    console.log(value);\n  }}\n/>;\n```\n\n### Props\n\n`TextArea` is based on Ark UI's `Field.TextareaProps`.\n\nThe native `onChange` prop is replaced by:\n\n```ts\nonValueChange?: (\n  event: React.ChangeEvent<HTMLTextAreaElement>,\n  newValue?: string,\n) => void;\n```\n\n---\n\n# ThemeProvider\n\nProvides access to the library's light/dark theme classes through React context. It wraps its children into a `<div>` element which class name corresponds to the current applied theme.\n\n```tsx\nimport { ThemeProvider, useTheme } from \"@capg/capg-ui-lib\";\nimport type { ThemeProviderProps } from \"@capg/capg-ui-lib\";\n\nfunction App({ ...rest }: ThemeProviderProps) {\n  return (\n    <ThemeProvider {...rest}>\n      <Application />\n    </ThemeProvider>\n  );\n}\n```\n\nThe provider starts with the light theme but it might be toggled to the dark theme through the `useTheme` hook.\n\n### useTheme\n\n```tsx\nfunction ThemeToggle() {\n  const { className, onToggleTheme } = useTheme();\n\n  return (\n    <button className={className} onClick={() => onToggleTheme?.(true)}>\n      Dark mode\n    </button>\n  );\n}\n```\n\nThe theme context provides:\n\n```ts\ntype ThemeProviderState = {\n  className: string;\n  onToggleTheme?: (dark: boolean) => void;\n};\n```\n\n### Important\n\n`ThemeProvider` provides a `<div>` which receives the library's theme class and exposes it via Context. Consumers can use the returned `className` on the application/container element that should receive the theme.\n\nFor example:\n\n```tsx\nfunction Application() {\n  const { className } = useTheme();\n\n  return (\n    <div className={className}>\n      <YourApplication />\n    </div>\n  );\n}\n```\n\n---\n\n# Toggle\n\nSwitch/toggle control.\n\n```tsx\nimport { Toggle } from \"@capg/capg-ui-lib\";\n\n<Toggle\n  label=\"Enable notifications\"\n  checked={enabled}\n  onCheckedChange={(details) => {\n    setEnabled(details.checked);\n  }}\n/>;\n```\n\n### Props\n\n`Toggle` extends `Switch.RootProps`.\n\n| Prop      | Type               | Description              |\n| --------- | ------------------ | ------------------------ |\n| `label`   | `string`           | Optional label           |\n| `...rest` | `Switch.RootProps` | Ark UI switch properties |\n\n---\n\n# UploadFile\n\nFile upload component supporting drag-and-drop, file selection, previews, and deletion.\n\n```tsx\nimport { UploadFile } from \"@capg/capg-ui-lib\";\n\n<UploadFile label=\"Documents\" accept=\"application/pdf,image/*\" maxFiles={5} />;\n```\n\nBy default, the component displays a drag-and-drop area.\n\n### Custom trigger\n\n```tsx\n<UploadFile trigger={<Button appearance=\"Outline\" label=\"Select files\" />} />\n```\n\n### Custom drop-zone text\n\n```tsx\n<UploadFile title=\"Upload documents\" description=\"PDF files up to 10 MB\" />\n```\n\n### Compact mode\n\n```tsx\n<UploadFile compact />\n```\n\nCompact mode removes the file preview and file-size display.\n\n### Props\n\n`UploadFile` extends `FileUpload.RootProps`.\n\n| Prop          | Type                   | Description                   |\n| ------------- | ---------------------- | ----------------------------- |\n| `label`       | `string`               | Optional field label          |\n| `trigger`     | `JSX.Element`          | Custom upload trigger         |\n| `title`       | `string`               | Drop-zone title               |\n| `description` | `string`               | Drop-zone description         |\n| `compact`     | `boolean`              | Compact selected-file display |\n| `...rest`     | `FileUpload.RootProps` | Ark UI file-upload properties |\n\nDefault drop-zone text:\n\n```text\nDrag and drop files here\nor click to browse\n```\n\nThe component provides previews for:\n\n- Images\n- Videos\n- PDF documents\n- Generic files\n\n---\n\n# UserImage\n\nAvatar/image component with fallback content.\n\n```tsx\nimport { UserImage } from \"@capg/capg-ui-lib\";\n\n<UserImage\n  fallback=\"CA\"\n  shape=\"circular\"\n  imageProps={{\n    src: \"/avatar.jpg\",\n    alt: \"Camilo Páez\",\n  }}\n/>;\n```\n\n### Props\n\n`UserImage` extends `Avatar.RootProps`.\n\n| Prop         | Type                | Required | Description                                                                                   |\n| ------------ | ------------------- | -------: | --------------------------------------------------------------------------------------------- |\n| `fallback`   | `string`            |      Yes | Fallback content                                                                              |\n| `shape`      | `AvatarShape`       |       No | Indicates the shape of the user image. The options are \"circular\" (default) or \"rectangular\". |\n| `imageProps` | `Avatar.ImageProps` |       No | Image properties                                                                              |\n| `className`  | `string`            |       No | Additional class                                                                              |\n| `...rest`    | `Avatar.RootProps`  |       No | Ark UI avatar properties                                                                      |\n\n---\n\n# TypeScript\n\nThe library is written in TypeScript and exports component prop types.\n\nFor example:\n\n```tsx\nimport { Button, type ButtonProps } from \"@capg/capg-ui-lib\";\n\nconst props: ButtonProps = {\n  appearance: \"Primary\",\n  label: \"Save\",\n};\n```\n\nThe component-specific types are also available from the package's main export.\n\n---\n\n# Accessibility\n\nThe components are built on top of Ark UI primitives, which provide the behavioral and accessibility foundation for many of the interactive components.\n\nExamples include:\n\n- Dialog\n- Accordion\n- Menu\n- Date picker\n- Select\n- Number input\n- Radio group\n- Pagination\n- Progress\n- Password input\n- Slider\n- Checkbox\n- Steps\n- Tabs\n- Switch\n- File upload\n- Avatar\n\nApplications should still provide appropriate labels, accessible names, descriptions, and other application-specific accessibility information.\n\nFor example:\n\n```tsx\n<QRCode\n  value=\"https://example.com\"\n  overlayProps={{\n    src: \"/logo.png\",\n    alt: \"Company logo\",\n  }}\n/>\n```\n\n---\n\n# Development\n\nClone the repository:\n\n```bash\ngit clone https://github.com/camiloapaezg/capg-ui-lib.git\ncd capg-ui-lib\n```\n\nInstall dependencies:\n\n```bash\nnpm install\n```\n\n## Build\n\n```bash\nnpm run build\n```\n\n## Lint\n\n```bash\nnpm run lint\n```\n\n## Storybook\n\nStart Storybook:\n\n```bash\nnpm run start\n```\n\nStorybook will run on:\n\n```text\nhttp://localhost:6006\n```\n\n## Build Storybook\n\n```bash\nnpm run build-storybook\n```\n\n---\n\n# Project structure\n\nThe components are organized under:\n\n```text\nsrc/\n├── components/\n│   ├── BasicDialog/\n│   ├── Button/\n│   ├── CollapsibleSection/\n│   ├── ContextMenu/\n│   ├── DateSelector/\n│   ├── Dropdown/\n│   ├── FormField/\n│   ├── NumericInput/\n│   ├── OptionsGroup/\n│   ├── PaginationControl/\n│   ├── ProgressIndicator/\n│   ├── ProtectedInput/\n│   ├── QRCode/\n│   ├── RangeSlider/\n│   ├── ScrollableArea/\n│   ├── SelectionBox/\n│   ├── Stepper/\n│   ├── TabsGroup/\n│   ├── TextArea/\n│   ├── TextInput/\n│   ├── ThemeProvider/\n│   ├── Toggle/\n│   ├── UploadFile/\n│   └── UserImage/\n├── styles/\n└── main.ts\n```\n\nAll components are re-exported from:\n\n```text\nsrc/components/index.ts\n```\n\nand the package entry point exports the component collection through:\n\n```text\nsrc/main.ts\n```\n\nTherefore consumers can use:\n\n```tsx\nimport { Button, Dropdown, TextInput, DateSelector } from \"@capg/capg-ui-lib\";\n```\n\nrather than importing components from internal paths.\n\n---\n\n# Dependencies\n\nThe library uses:\n\n- [React](https://react.dev/)\n- [Ark UI](https://ark-ui.com/)\n- [vanilla-extract](https://vanilla-extract.style/)\n- [clsx](https://github.com/lukeed/clsx)\n- [Iconify](https://iconify.design/)\n\nArk UI provides the behavioral primitives, while vanilla-extract provides the styling layer.\n\n---\n\n# Package information\n\n```json\n{\n  \"name\": \"@capg/capg-ui-lib\",\n  \"version\": \"0.9.0\",\n  \"license\": \"ISC\"\n}\n```\n\nThe package exposes both ESM and CommonJS builds as well as TypeScript declarations.\n\n---\n\n# License\n\nISC License.\n\n---\n\n# Repository\n\nSource code and development information:\n\nhttps://github.com/camiloapaezg/capg-ui-lib\n\n```\n\n\nThis is based on the **actual exported components and their current TypeScript APIs**, including the component-specific types rather than just their names.\n\nOne thing I would **strongly recommend before putting this into the repository**: I can make a second pass specifically over the **Storybook stories** and turn the README into a more polished npm-quality documentation page, with the actual examples from your stories, a component API table, installation instructions, theme setup, and a component index. That would make it considerably more useful to someone consuming `@capg/capg-ui-lib`.\n```\n","readmeFilename":"README.md"}