{"_id":"@foi/design-system","_rev":"26-4e269a0375c8bf1dd4644cbb2984f0ba","name":"@foi/design-system","dist-tags":{"latest":"0.0.26"},"versions":{"0.0.0":{"name":"@foi/design-system","version":"0.0.0","_id":"@foi/design-system@0.0.0","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"081797b7822882fbde97ea28821d43e1965e1267","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.0.tgz","fileCount":6,"integrity":"sha512-65EEoe7TTkmAzEVR55SxK7rSRHq96iSO9B9xnwdnVvD6hllz+m+qhx0bgMgFD60HXS0n0PrOiJa/n1W9VtuFaw==","signatures":[{"sig":"MEQCIC36CqRBn+phX2GhExYNJYYYWZPx0wCe01dAf71/vVigAiAkNKZkThLqde64sG21JzjFxFGEJ22YbRa73abzurmP+A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1032985},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"}},"gitHead":"a47f83d0be7dbb40a786c7e03be390b45aa2f034","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"tsc -p tsconfig.lib.json && cross-env BUILD_MODE=lib vite build","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@mui/material":"^9.0.1","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.0_1778816498012_0.22384133096694314","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"name":"@foi/design-system","version":"0.0.1","_id":"@foi/design-system@0.0.1","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"6fa21529e23453b1bc29969c3ecb00facb8032a5","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.1.tgz","fileCount":121,"integrity":"sha512-mVdVl+K/ErfDvJThTk8vKYFb8jiFvx5NB2wmeAqN3gYzm1rtdRWsHftcCD+Zx89D4t9g02jo3ufBBlNNAGAREA==","signatures":[{"sig":"MEYCIQDSBCJ+eiYx1JzK6lUDsBUgWinTpJq2vzeIPnB0wXEftAIhAJicpz71lvum/RxzSB3S60gYyCvPdbASWr2lrKNeQZXX","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1209203},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"}},"gitHead":"9dcccda367a8462ebc75014d76ea36cad2edc71e","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@mui/material":"^9.0.1","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.1_1779572800242_0.934166516833314","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@foi/design-system","version":"0.0.2","_id":"@foi/design-system@0.0.2","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"9eac3352636bb0e5765d4050049e54b3c8ea9107","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.2.tgz","fileCount":121,"integrity":"sha512-gpih5KW704FAsdQcEwNz1HmYIIgwapX+sKfTPrhGADnKNJ10SSX8319ugtSsxSgZttmLk+EY4P96kmP2hwgLdQ==","signatures":[{"sig":"MEQCIAp7u78o+j4Rr6667P8pNMZf5z+7I2KRcZnCWsyost+zAiACDcMJY8rxBuoKKiSeBtZlG/5SkV9hTmyaK5/8LdHBzQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1088226},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"}},"gitHead":"3579cb555d2c4a66aa0f11be2aea62fd982275ec","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@mui/material":"^9.0.1","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.2_1779574017273_0.9649945407767768","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@foi/design-system","version":"0.0.3","_id":"@foi/design-system@0.0.3","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"923f3d60178d0e577061f82b8bf506af6fa53895","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.3.tgz","fileCount":121,"integrity":"sha512-4FfkIANB4kLwtbE01E/eiYTvBZ1LkVGO+NgTl/x9pQc5Q/hG2grP2jqXA3gO56PWPhgGGPaxB3AhGnJsEgnkZg==","signatures":[{"sig":"MEUCIQDUgFYw32OIZ9A6KVzlsqgGMtoDGCddIZxHCBHxKhghCgIgMJ7/ujywcWvrMyOBdLlwrVLtlfd+L/x3+LCGbpRQQas=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1088226},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"}},"gitHead":"2cd0bc0e6d04baef1ec9990582e2fb06909e0ecc","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@mui/material":"^9.0.1","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.3_1779576665367_0.19083822545565066","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@foi/design-system","version":"0.0.4","_id":"@foi/design-system@0.0.4","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"34d4ae309da72b08a22f38ede2944d6dc40bf326","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.4.tgz","fileCount":122,"integrity":"sha512-QxEwI0cReYLoiTQDqoNFT2fmW3WZ3QG3JCmCXS27w+NSJWobOscCszTFXY/7HxM/afAPM4Nb9kcNmjEG1bjs0g==","signatures":[{"sig":"MEYCIQDIBdwdcZJvDmuy/Yp/u02cCKYG1ydXkoLC9RyPOxcVzgIhAP4WFdozMLUCMVOzaXPZGbnLM+TskLwjs9wvQ64nd5UV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2566384},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"}},"gitHead":"d1fdd20b5620217e56ab9f3753f0ed91b4e74eda","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@mui/material":"^9.0.1","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.4_1779577542558_0.3659085966990243","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@foi/design-system","version":"0.0.5","_id":"@foi/design-system@0.0.5","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"113a100f72822fa0cd2a3574087cf7fbd586a9ef","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.5.tgz","fileCount":157,"integrity":"sha512-hP9lB4eKeJcPY3i1M311nremoI7L63XlxmwPd1rc3YhbKQmKN2uFU8+FtfRYBoi6NilvadvtZB4kmPIbrazXCQ==","signatures":[{"sig":"MEUCIG+WxZve8YQXEtLPf4FSLI9+1T8XaFs2GT1IEcNE2tKdAiEAlYCpF3mIiSM6Cg1J5Y6clsTj7NUgv9E9dhRuAqPazkk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2580022},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"f408db6f039e8d43068d75bb07849ee382aacfa1","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@mui/material":"^9.0.1","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.5_1779582992721_0.12486808562908047","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@foi/design-system","version":"0.0.7","_id":"@foi/design-system@0.0.7","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"c0b77eabe9947a5ae5881c74870c83697209246c","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.7.tgz","fileCount":157,"integrity":"sha512-35YXmNzxPrJvGC2knsN7HCga4aslLh6nMw46ayg9m7FSbXeNyDDhaVX2IoOtlvsDodZzOepf6gOq42u3NAfHmA==","signatures":[{"sig":"MEYCIQDRaFxI2+swwTvgKqBZMs9450hmW8KWoAkrUAZaVj4sQwIhAPLaZ2DDUa2/rZ9jAMlvm+MxhwLzO3cgQ/x67bHXKwq9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2581276},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"dd9942c6cb9deadeab919df79bf64cd13f030924","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@mui/material":"^9.0.1","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.7_1779599051732_0.35072735297674207","host":"s3://npm-registry-packages-npm-production"}},"0.0.8":{"name":"@foi/design-system","version":"0.0.8","_id":"@foi/design-system@0.0.8","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"d12a9acfb60b34e2623c781d095ff747bd78ba1b","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.8.tgz","fileCount":157,"integrity":"sha512-HdfxkgssVJRHoQB1/QYMbgPKZb+lHN6W2hsfcNyfPooE/6KH2xUUJJHcXreL6SukEqLTBU3NY8fYiOpG4LMVWg==","signatures":[{"sig":"MEUCIHPZxGvt2dLWCQ1gDoi52ZC2JSRcSLvtkf70O+tLs7wiAiEAnDyrC/eMcZArJrN5qNwIK4XSJbHrD82d3QcUbn51tSQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2581438},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"758f2264992a348b7b1134cfe11f9717692757ef","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@mui/material":"^9.0.1","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.8_1779600485642_0.00126917970623186","host":"s3://npm-registry-packages-npm-production"}},"0.0.9":{"name":"@foi/design-system","version":"0.0.9","_id":"@foi/design-system@0.0.9","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"85448b30099929bdd5a275d56b8cd4744b760cfb","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.9.tgz","fileCount":157,"integrity":"sha512-YxqBuY6LsMIb6rYHNCZI3CSaL4Bu/1RY7WqCW88cz2ailbgnd0av5OSZM8286o4k9GTlOSwc40erbZ+jgnazug==","signatures":[{"sig":"MEYCIQCK4GbSE1CUN1mjIyofqkLqsBVzLUDzlH46yFXnrHMAWwIhALapE8/GeD5cfWTnz4r69gB0qhAwN8xx3992AaBUFq9v","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2581471},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"d997d30a85c52bd4d49c9e5cf444225178be36d6","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@mui/material":"^9.0.1","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.9_1779666599174_0.9400825268019879","host":"s3://npm-registry-packages-npm-production"}},"0.0.10":{"name":"@foi/design-system","version":"0.0.10","_id":"@foi/design-system@0.0.10","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"32872af462c5551001266b163364e535e6f0fad6","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.10.tgz","fileCount":161,"integrity":"sha512-5c9GP4Fw1/Jc/aOYQocYmSQm0Oa0QCFcR8/bPhCx/iGSMUsqPJJmUCbQGZlyHhWslbotZw1mnPd0/HbAc7zQ5Q==","signatures":[{"sig":"MEUCIQDCY9GGLZYCs8wxH5M+ZBHAEhD1iUNGyPnzDpfv4tNQlwIgeEylTVezXtX3GtZZG/2sW9mzyfx98xounoIH0HJkVZU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9684265},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"2101feda06da466d6dfc4aacdbe0dcf1d739198b","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.10_1779676535353_0.036704668351047465","host":"s3://npm-registry-packages-npm-production"}},"0.0.11":{"name":"@foi/design-system","version":"0.0.11","_id":"@foi/design-system@0.0.11","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"daf8524c28547932a15c4fd7a0804cd1246f937b","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.11.tgz","fileCount":161,"integrity":"sha512-x/s8gbF9V+m4Ctfd0HfUhqgM6CUrynfQInbR4SbDFHL1ndF/Ck8OLzPaSfrmBq/xy0tygIiT3vsNksBZiTrX6w==","signatures":[{"sig":"MEUCIQCHEhHdlKnOKoRMhMKjeGNaQNxgJcb/jPN+NazgJhQKOQIgGvfS5au+N4Yvc0swiEac1DUDrJPv/otNYRr5jSAQ244=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9695178},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"17b3638fe2c76a50d504574908f4cf18a8bd1980","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.11_1780543189658_0.12825689903979653","host":"s3://npm-registry-packages-npm-production"}},"0.0.12":{"name":"@foi/design-system","version":"0.0.12","_id":"@foi/design-system@0.0.12","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"aed25c7fbf7a75b8aa4ed5b1e7c179aaa4dd4c77","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.12.tgz","fileCount":161,"integrity":"sha512-Y1+hd6yJGEYZlYG1V5757yI21t1RjX7E8VXHvTMkBqHLicj7ofLcxE40tkXCm/GaVsg6+h4WtYqzOc+lACGUNg==","signatures":[{"sig":"MEQCID9eHWfUpBE8xT8JRwr543FNamOv4xn6AFk3x8YlAbbMAiBMPnE123HDEycenHo0alVNqjT8QNCAjbi3aHxMSBHAug==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9697286},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"8517ec25ac4f13052c3c6f1629cbef6f21c5ed4d","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.12_1780549677967_0.8360961981515656","host":"s3://npm-registry-packages-npm-production"}},"0.0.13":{"name":"@foi/design-system","version":"0.0.13","_id":"@foi/design-system@0.0.13","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"fcf6cbd19905092576074f3b515493142808cdf9","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.13.tgz","fileCount":200,"integrity":"sha512-3Z/QNrl1AISdlwnzxXCotJxt7BWBavfa1zDxSh2nfrZhBEC0koDizkXH7Z8qtdzw0aGDTWrLk0B8ttSjL0cPiA==","signatures":[{"sig":"MEYCIQDIQTR9ogj4VNDKVetGgcTrZbCa8fEdi8mbfQGUmbYkCAIhAI1B3rTwqW4nSphxrY9u6+M9y3Jth5icBr9ztIzsCUea","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9851005},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"525efb5ed110d956fe7c25f8d713aa15f36bf488","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.13_1781493978526_0.2946041379408191","host":"s3://npm-registry-packages-npm-production"}},"0.0.14":{"name":"@foi/design-system","version":"0.0.14","_id":"@foi/design-system@0.0.14","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"1b37f02bb7ff5d68602bfbde878a7e8b6d375a41","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.14.tgz","fileCount":200,"integrity":"sha512-Cn/o1gUxeYpclsZD7/DCkO+2QSe4tSNpLvRpfN4P3gQxXyMhN4In+QnvSyzWt/uTJepoC9URThd4f59JayXYMw==","signatures":[{"sig":"MEYCIQDH3HrjJaKYWqCGJOElgTrzQjBfFe8CX/arX8X5P+Fu1gIhAMlctppr24zoTYPwaMRO2lrztWVhps6qMedmYSKE9/jY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9851387},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"9f185e6edf617a25b990a9c2b58cc49b1f7dcad9","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.14_1781561223206_0.1884439910484912","host":"s3://npm-registry-packages-npm-production"}},"0.0.15":{"name":"@foi/design-system","version":"0.0.15","_id":"@foi/design-system@0.0.15","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"34b91dd16f97ecc40377efe0839aae259fd2fef3","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.15.tgz","fileCount":206,"integrity":"sha512-E8ah1m3Lm7/ake6q0dPScGcm/3zhz4AW6JInKU+whODcGJ/6iXOLWX7IovC5MIFvZGELhEBRUrwIPFMOcD5RRQ==","signatures":[{"sig":"MEUCIFl3/u9p/OOvtNVKJ4+tlu1bOamWxLlgoyQxaMMe+MYAAiEA+4/8SEummdebWgzPvLpvh/coCdgHa5cN27ia0LQ6R14=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9905341},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"d68e3fa6f934bdabccf9698f2785c98bf80590e6","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.15_1781584735591_0.6736319346470601","host":"s3://npm-registry-packages-npm-production"}},"0.0.16":{"name":"@foi/design-system","version":"0.0.16","_id":"@foi/design-system@0.0.16","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"08fec1f0e22dab416dcd475205695b62badfd894","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.16.tgz","fileCount":206,"integrity":"sha512-1W4vRroL/LUdeDTx1cDIc6mHSUTSh1Qrp5SvbdrelNw1YLLE2GDr369YVgbh+ISZLUCzrDarQ3YroyiGry1PnQ==","signatures":[{"sig":"MEQCIFB6/nQoiH3bzjUe+/Pr9Zd75w3762o0+K8/4ybgQ9WBAiBAAmE3a/gHbe32vUvfNqEc+cGwaGoWsdw4qo0gTiHlHQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9910731},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"4ec0c5e0705a43b27396cdc27d043f4c9580da44","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.16_1781656143619_0.14346827830151954","host":"s3://npm-registry-packages-npm-production"}},"0.0.17":{"name":"@foi/design-system","version":"0.0.17","_id":"@foi/design-system@0.0.17","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"ed967e3d73de4019b10a56cf5e90e7b5596e2a57","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.17.tgz","fileCount":206,"integrity":"sha512-ZTdJZQz6EWUR2hDW3n3Ja3NBiTfTTZCwnyL5yT7CWKTIhDzdA4zAbZq3y2K7az7sVmbPQk5sowzQOEJ2YrV6KQ==","signatures":[{"sig":"MEUCIHS+Q9GAIpRnw5zKOBnT0wx/NBe7kICVxGsJI646NUcpAiEA6dTThdVpCPpUuHHhevPdhOPK14a6SiCbHRncsl4hqN4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9921801},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"332ad485570f996c667b60692262d290cca25a50","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.17_1781668076119_0.4520194972044267","host":"s3://npm-registry-packages-npm-production"}},"0.0.18":{"name":"@foi/design-system","version":"0.0.18","_id":"@foi/design-system@0.0.18","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"97e2c44a916e8bf5f66d43d7a6d81b8eacb5beca","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.18.tgz","fileCount":206,"integrity":"sha512-aLN5xVplCik+KNPlJgj4MRsEFonnVWFeiPXU9DFe2/zD/cMrWiuIpC5bcN4NDwUFmsru5yvE63IPlN9pjEPlcQ==","signatures":[{"sig":"MEQCIEULqLJ0Jw7WXaP03kBKSX9OiIFCN1T1ScsZPqpRUkaSAiB6uobQt59qyc7XV/TYcNpe8/64gOWL2EKCnfDGpslQSA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9920957},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"57c299dee8cded8641abf0bc1a325089574d3be3","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.18_1781671483648_0.3722065760612858","host":"s3://npm-registry-packages-npm-production"}},"0.0.19":{"name":"@foi/design-system","version":"0.0.19","_id":"@foi/design-system@0.0.19","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"d71802f7a254434bbbeb264d8d1c31ac329480e3","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.19.tgz","fileCount":223,"integrity":"sha512-9Rh9OD2Fta0/uJBu0JKqcRfk7+IiyPmJNd30KUCmveBZ8UZXyXHnEOflfxFeJIND1iJQ+E8LnOYLqhOethAtzA==","signatures":[{"sig":"MEQCIH9NBGYGPwFumIRaqGcT1LIVU/SfMhqORlIQQr4mJ1DWAiAEAZb13G9ivhP23A1NoUdAjZsQDJCqwNA1N2oXT2dv4A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9977672},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hocs":{"types":"./dist/hocs.d.ts","import":"./dist/hocs.mjs"},"./atoms":{"types":"./dist/atoms.d.ts","import":"./dist/atoms.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./molecules":{"types":"./dist/molecules.d.ts","import":"./dist/molecules.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"66f758afefde6f1b90dce3e134edcf6a74173d11","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.19_1782256310116_0.7959127422999155","host":"s3://npm-registry-packages-npm-production"}},"0.0.20":{"name":"@foi/design-system","version":"0.0.20","_id":"@foi/design-system@0.0.20","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"bafa1b568700531b8989875c57dfb4c589003a63","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.20.tgz","fileCount":205,"integrity":"sha512-PkUeQ1m0OinYXD+wjQkV6J/LU0Zmy3PLAm9Q7Cq/PraRurpH5N1AWs5kAujE1dApShTzZLFUImHJJF50Nag89g==","signatures":[{"sig":"MEYCIQChKaFAHzyTLMjmtJ0vgjnGAvueYpkPGRzDndlLYb3H8QIhAOMQF/X01dnRW3HKwjjxtoAc66vQWV3m0gsoY6suoYqt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9976545},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"6ae62e963d1a87eb61f7ca7260b76d4246b97088","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.20_1782258822030_0.24345700699918416","host":"s3://npm-registry-packages-npm-production"}},"0.0.21":{"name":"@foi/design-system","version":"0.0.21","_id":"@foi/design-system@0.0.21","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"72ef922c9767456f48d04cf55fde73dbf5e80b96","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.21.tgz","fileCount":211,"integrity":"sha512-FqspifyRcrSXfvL/Fs0I8HndPSA56fFn4Q8WExLpBwsd1j+76h1SaHeGjiypH8kzBEaFz2IpU8TtRgalzVJ2Pg==","signatures":[{"sig":"MEUCIH/MQPxuY4k41NTskAJRiaL7Pt7HVJj0fewKReUBDCpQAiEA853mym1gm7j2JUyQibfE8Ji3fFw6t8ZDEVmEMUzzNQA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9991505},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"6024934ed6009dce67a1b7d1cb79262460382443","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.21_1782265779748_0.0917751580014492","host":"s3://npm-registry-packages-npm-production"}},"0.0.22":{"name":"@foi/design-system","version":"0.0.22","_id":"@foi/design-system@0.0.22","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"1f3e4e31cd7902defe473844df4e224ae73faa0a","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.22.tgz","fileCount":211,"integrity":"sha512-KLITznLct/TXjnqL7ZE13p1cvBC6ewWrEudlGWxMQDvWK2Ukpd8fVmIRjf9nIqiq6EE5PNU5YZ6OUYATScXWPw==","signatures":[{"sig":"MEQCIGEFM0RA+YAweFs82rP4olV9ns/1QVZu/vOQRy25yfg4AiAvXko2Kf3aCMreTUVURqoK9BOBau7Ss4FmC19xg+lpUw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10000715},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"ce852fe7fad8e6eea737119e6781f4032ab620b1","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.22_1782356154649_0.9817834224825996","host":"s3://npm-registry-packages-npm-production"}},"0.0.23":{"name":"@foi/design-system","version":"0.0.23","_id":"@foi/design-system@0.0.23","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"fcc321d37dbdecb2a5424681ced1a027113b015b","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.23.tgz","fileCount":211,"integrity":"sha512-Hwu941PYXuAZFwAhLaAgh91UtnUECK5L80OO2f4U+t7Ff03vVAeK/vc4RT1hDuJ4BPEv7Dfi0dGzwpQ49IHZHA==","signatures":[{"sig":"MEYCIQCjmRtOUD+cCIs7xB+geX7JC+33ga7jTQWPQUyCZ89vqwIhALXcntDZfhIH8fuf8qsfclt2zebIh9g8tj88NKD5/leZ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10000167},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"7b683970b7cbfbe2a4ba536689ec37d688e2cf7d","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.23_1782359952446_0.6226615367051895","host":"s3://npm-registry-packages-npm-production"}},"0.0.24":{"name":"@foi/design-system","version":"0.0.24","_id":"@foi/design-system@0.0.24","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"083477a66f99cd9ad5f7be17fdf7ab5e980256bf","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.24.tgz","fileCount":224,"integrity":"sha512-igqvqzQHwhaDxex15Te/nBrbcViPvzTX25IMX73gyNgY5NfP0srj1eHdeZZawMq1scwRKZ8pzmLdspBbbQKx9w==","signatures":[{"sig":"MEQCIA+NQNZvQgOe5z/vRLTRpkaCE3fYOdFZIb9dFNFLANyyAiAERJuXpnAu118Fqbr7rudmVbUpUW6cWZMiHt/z/0ECeQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10116799},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"00115229277389f81e6844d29d23b39a972e8171","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.24_1782597756936_0.6366396043127958","host":"s3://npm-registry-packages-npm-production"}},"0.0.25":{"name":"@foi/design-system","version":"0.0.25","_id":"@foi/design-system@0.0.25","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"dist":{"shasum":"23657a0f5fa77be4856c548f21099174473cdb9f","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.25.tgz","fileCount":224,"integrity":"sha512-rJC/1XsmrZoQKlz6ZFY3cnKcF9jEKMXFxSlDSmWHaeIOxWrZY7uJuq7lxQjohf0dTtrC7qt5cdxe15v8eOqbbg==","signatures":[{"sig":"MEUCIAp1uYopdo61lBLSKPaYgGoY1usBhRHSLKiopUkVSdAZAiEA2JkbuyWD5UvKAtE8UZfv1cScdBuVadJWBk9lMCWPGAM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10117838},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./hooks":{"types":"./dist/hooks.d.ts","import":"./dist/hooks.mjs"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.mjs"},"./utilities":{"types":"./dist/utilities.d.ts","import":"./dist/utilities.mjs"}},"gitHead":"62a18b1e1475c2ee38e24f9c72f57da38a22657e","scripts":{"dev":"vite","test":"vitest --ui","build":"tsc -b && vite build","eslint":"eslint --fix .","preview":"vite preview","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"_npmVersion":"11.2.0","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","directories":{},"_nodeVersion":"22.14.0","dependencies":{"zod":"^4.4.3","react":"^19.0.0","zustand":"^5.0.13","date-fns":"^4.1.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","@hookform/resolvers":"^5.0.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.99.0","vite":"^8.0.10","eslint":"^10.3.0","vitest":"^4.1.5","globals":"^17.5.0","prettier":"^3.8.3","cross-env":"^10.1.0","happy-dom":"^20.9.0","storybook":"^10.3.6","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.5","typescript":"~6.0.2","@babel/core":"^7.29.0","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@types/babel__core":"^7.20.5","@vitejs/plugin-react":"^6.0.1","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@rolldown/plugin-babel":"^0.2.3","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-storybook":"^10.3.6","eslint-plugin-react-hooks":"^7.1.1","babel-plugin-react-compiler":"^1.0.0","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@emotion/react":"^11.0.0","react-hook-form":"^7.0.0","@hookform/resolvers":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.0.25_1782854520739_0.38195015225146167","host":"s3://npm-registry-packages-npm-production"}},"0.0.26":{"name":"@foi/design-system","version":"0.0.26","type":"module","main":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","types":"./dist/index.d.ts"},"./hooks":{"import":"./dist/hooks.mjs","types":"./dist/hooks.d.ts"},"./utilities":{"import":"./dist/utilities.mjs","types":"./dist/utilities.d.ts"},"./theme":{"import":"./dist/theme.mjs","types":"./dist/theme.d.ts"}},"scripts":{"dev":"vite","build":"tsc -b && vite build","build:lib":"cross-env BUILD_MODE=lib vite build && tsc -p tsconfig.lib.json","prettier":"prettier --write \"./**/*.{js,jsx,ts,tsx,json,scss,css}\"","eslint":"eslint --fix .","preview":"vite preview","test":"vitest --ui","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"peerDependencies":{"@emotion/react":"^11.0.0","@hookform/resolvers":"^5.0.0","react":"^19.0.0","react-dom":"^19.0.0","react-hook-form":"^7.0.0"},"dependencies":{"@emotion/react":"^11.0.0","@emotion/styled":"^11.14.1","@hookform/resolvers":"^5.0.0","date-fns":"^4.1.0","react":"^19.0.0","react-dom":"^19.0.0","react-hook-form":"^7.0.0","react-router-dom":"^7.15.0","zod":"^4.4.3","zustand":"^5.0.13"},"devDependencies":{"@babel/core":"^7.29.0","@eslint/js":"^10.0.1","@rolldown/plugin-babel":"^0.2.3","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@testing-library/react":"^16.3.2","@types/babel__core":"^7.20.5","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","@vitest/ui":"^4.1.5","babel-plugin-react-compiler":"^1.0.0","cross-env":"^10.1.0","eslint":"^10.3.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.2","eslint-plugin-storybook":"^10.3.6","globals":"^17.5.0","happy-dom":"^20.9.0","prettier":"^3.8.3","sass":"^1.99.0","storybook":"^10.3.6","typescript":"~6.0.2","typescript-eslint":"^8.58.2","vite":"^8.0.10","vitest":"^4.1.5"},"_id":"@foi/design-system@0.0.26","gitHead":"b2b222c05291da14b28ca322137270c600a57ddc","description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","_nodeVersion":"22.14.0","_npmVersion":"11.2.0","dist":{"integrity":"sha512-twrz1oqpwiW/lS6G339ZRnRMnXM4CMkHSOfzkg57kTEooKGAsYZlzHtbvqhwRX+AxG40LsLpqsmN6nqNO+uEvA==","shasum":"750cafe6af6cbe0e7098e05d19276f539859be18","tarball":"https://registry.npmjs.org/@foi/design-system/-/design-system-0.0.26.tgz","fileCount":224,"unpackedSize":10119741,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGBzn3m2bpA6uc7bSHFfBI51kpYGg5Rf661XzQx9haymAiAblT4V4eCRM4LT4PlL/t4MDZ9CQ23SWPlPmxvte5oNpw=="}]},"_npmUser":{"name":"foi","email":"f.orregoibarra@outlook.com"},"directories":{},"maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.0.26_1782866893036_0.14214251503283615"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-15T03:41:37.873Z","modified":"2026-07-01T00:48:13.413Z","0.0.0":"2026-05-15T03:41:38.231Z","0.0.1":"2026-05-23T21:46:40.411Z","0.0.2":"2026-05-23T22:06:57.440Z","0.0.3":"2026-05-23T22:51:05.556Z","0.0.4":"2026-05-23T23:05:42.765Z","0.0.5":"2026-05-24T00:36:32.934Z","0.0.7":"2026-05-24T05:04:11.931Z","0.0.8":"2026-05-24T05:28:05.860Z","0.0.9":"2026-05-24T23:49:59.331Z","0.0.10":"2026-05-25T02:35:35.611Z","0.0.11":"2026-06-04T03:19:49.921Z","0.0.12":"2026-06-04T05:07:58.347Z","0.0.13":"2026-06-15T03:26:19.006Z","0.0.14":"2026-06-15T22:07:03.524Z","0.0.15":"2026-06-16T04:38:55.892Z","0.0.16":"2026-06-17T00:29:03.923Z","0.0.17":"2026-06-17T03:47:56.410Z","0.0.18":"2026-06-17T04:44:43.991Z","0.0.19":"2026-06-23T23:11:50.344Z","0.0.20":"2026-06-23T23:53:42.316Z","0.0.21":"2026-06-24T01:49:40.088Z","0.0.22":"2026-06-25T02:55:54.935Z","0.0.23":"2026-06-25T03:59:12.714Z","0.0.24":"2026-06-27T22:02:37.251Z","0.0.25":"2026-06-30T21:22:01.053Z","0.0.26":"2026-07-01T00:48:13.297Z"},"description":"A component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a control","maintainers":[{"name":"foi","email":"f.orregoibarra@outlook.com"}],"readme":"# Design System\n\nA component library built with React 19 and TypeScript. Components are designed as first-class citizens of [React Hook Form](https://react-hook-form.com/) — pass `name` + `control` and validation is handled for you. Every component also supports a controlled mode (no RHF) and a theme override mechanism via the `ThemeProvider` HOC.\n\n## Tech stack\n\n| Tool            | Version | Purpose                 |\n| --------------- | ------- | ----------------------- |\n| React           | 19      | UI runtime              |\n| TypeScript      | 6       | Type safety             |\n| Vite            | 8       | Dev server & bundler    |\n| Emotion         | 11      | CSS-in-JS styling       |\n| React Hook Form | 7       | Form state & validation |\n| Zod             | 4       | Schema validation       |\n| Storybook       | 10      | Component explorer      |\n| Vitest          | 4       | Unit tests              |\n\n## Commands\n\n```bash\nnpm run dev              # Start dev server (Vite, HMR)\nnpm run build            # Type-check + production build\nnpm run preview          # Preview the production build locally\n\nnpm run storybook        # Open Storybook component explorer (port 6006)\nnpm run build-storybook  # Build Storybook as a static site\n\nnpm run test             # Run unit tests with Vitest UI\nnpm run pretty           # Format all files with Prettier\nnpm run eslint           # Lint and auto-fix with ESLint\n```\n\n## Publishing to npm\n\n```bash\nnpm run build:lib        # Build the library (JS + type declarations)\nnpm version patch        # Bump version: 0.0.x → 0.0.x+1\nnpm publish --access public\n```\n\n## Components\n\n### Atoms\n\n| Component     | Description                                                                                |\n| ------------- | ------------------------------------------------------------------------------------------ |\n| `Badge`       | Notification indicator that wraps any element — shows a count, overflow cap, or dot        |\n| `Button`      | Primary action button with variant/size/color support                                      |\n| `Checkbox`    | Single checkbox — standalone, RHF, or inside a group                                       |\n| `Chip`        | Compact inline label for statuses and tags — themed variants, accepts text or ReactNode    |\n| `ColorField`  | Color picker field with HEX/RGB/HSL display formats, swatch preview, and RHF integration   |\n| `DatePicker`  | Date input with calendar menu, integrates with RHF                                         |\n| `Icon`        | Font-based icon using Material Symbols Rounded — pass a `name` prop                        |\n| `IconButton`  | Clickable icon with button semantics                                                       |\n| `NumberField` | Numeric input with increment/decrement buttons, min/max/step support, and two layout modes |\n| `Pagination`  | Page navigation bar with first/prev/next/last buttons and optional rows-per-page selector  |\n| `Radio`       | Single radio button — used inside `RadioGroup`                                             |\n| `Select`      | Dropdown select with RHF integration                                                       |\n| `Skeleton`    | Animated placeholder shown while content is loading — rectangular or circular              |\n| `Slider`      | Range slider with RHF integration                                                          |\n| `Switch`      | Toggle switch — boolean RHF field                                                          |\n| `TextField`   | Text input (text, password, email) with label, helper text, and error state                |\n\n### Molecules\n\n| Component       | Description                                                                       |\n| --------------- | --------------------------------------------------------------------------------- |\n| `CheckboxGroup` | Manages a set of `Checkbox` children as a `string[]` RHF field                    |\n| `CheckboxTree`  | Hierarchical checkbox group with parent/child selection logic                     |\n| `Modal`         | Overlay dialog rendered via React portal — closes on ×, backdrop click, or Escape |\n| `RadioGroup`    | Manages a set of `Radio` children as a single RHF field                           |\n| `Toast`         | Notification system — push transient messages from anywhere via `useToast`        |\n\n### Organisms\n\n| Component  | Description                                                                                                                                                                |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `DataGrid` | Async data table with server-side sorting, filtering (search / multiselect), pagination or infinite scroll, skeleton loading state, and custom action columns via `render` |\n\n## Usage with React Hook Form\n\nAll field components share the same integration pattern. Define a Zod schema, pass `control` down, and let the component handle registration, value sync, and error display.\n\n```tsx\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { z } from 'zod';\nimport { TextField, NumberField, Button } from '@foi/design-system';\n\nconst schema = z.object({\n  email: z.string().email('Invalid email'),\n  age: z.number({ message: 'Required' }).min(18, 'Must be 18 or older'),\n});\n\ntype FormValues = z.infer<typeof schema>;\n\nconst MyForm = () => {\n  const { control, handleSubmit } = useForm<FormValues>({\n    resolver: zodResolver(schema),\n  });\n\n  return (\n    <form onSubmit={handleSubmit(console.log)}>\n      <TextField name='email' control={control} label='Email' />\n      <NumberField name='age' control={control} label='Age' min={18} />\n      <Button type='submit' label='Submit' />\n    </form>\n  );\n};\n```\n\n### Multi-select with CheckboxGroup\n\nThe form value is `string[]` — the `value` props of every checked child.\n\n```tsx\nconst schema = z.object({\n  skills: z.array(z.string()).min(1, 'Select at least one'),\n});\n\n<CheckboxGroup name='skills' control={control} label='Skills'>\n  <Checkbox value='react' label='React' />\n  <Checkbox value='vue' label='Vue' />\n  <Checkbox value='svelte' label='Svelte' />\n</CheckboxGroup>;\n```\n\n### Controlled mode (no RHF)\n\nPass `checked` + `onChecked` instead of `name`/`control`.\n\n```tsx\nconst [agreed, setAgreed] = useState(false);\n\n<Checkbox checked={agreed} onChecked={setAgreed} label='I agree to the terms' />;\n```\n\n## TextField\n\nA text input field with a floating label, helper text, and full error state integration. Only accepts `text`, `password`, and `email` as input types. For numeric input use `NumberField`.\n\n### Props\n\n| Prop             | Type                                       | Default     | Description                                               |\n| ---------------- | ------------------------------------------ | ----------- | --------------------------------------------------------- |\n| `name`           | `string`                                   | —           | Field name, used by RHF                                   |\n| `label`          | `string`                                   | —           | Floating label text                                       |\n| `control`        | `Control`                                  | —           | RHF control object; omit for uncontrolled mode            |\n| `value`          | `string`                                   | —           | Value in uncontrolled mode                                |\n| `onValueChange`  | `(value: string) => void`                  | —           | Change handler in uncontrolled mode                       |\n| `type`           | `'text' \\| 'password' \\| 'email'`          | `'text'`    | HTML input type                                           |\n| `width`          | `'small' \\| 'medium' \\| 'large' \\| 'full'` | —           | Preset width                                              |\n| `helperText`     | `string`                                   | —           | Hint text shown below the field when there is no error    |\n| `showErrorText`  | `boolean`                                  | `true`      | Show the validation error message below the field         |\n| `hasPadding`     | `boolean`                                  | `false`     | Add bottom padding to reserve space for helper/error text |\n| `startAdornment` | `JSX.Element`                              | —           | Element rendered to the left of the input                 |\n| `endAdornment`   | `JSX.Element`                              | —           | Element rendered to the right of the input                |\n| `regex`          | `RegExp`                                   | —           | Block keystrokes that don't match the pattern             |\n| `format`         | `(value: string) => string`                | —           | Transform the value before it is stored                   |\n| `disabled`       | `boolean`                                  | `false`     | Disable the field                                         |\n| `theme`          | `EVENTS`                                   | —           | One-off token override for this instance                  |\n| `variant`        | `string`                                   | `'default'` | Theme variant name                                        |\n\n### Example\n\n```tsx\nimport { TextField, Icon } from '@foi/design-system';\n\n<TextField\n  name='email'\n  control={control}\n  label='Email'\n  type='email'\n  startAdornment={<Icon name='mail' />}\n  helperText='We will never share your email'\n/>;\n```\n\n## NumberField\n\nA numeric input that stores a `number` in RHF (or `undefined` when empty). The field always renders increment/decrement buttons; their position depends on the `display` prop.\n\n### Props\n\nAll `TextField` props apply except `type`, `endAdornment`, and `startAdornment` (in `spinner` mode). The following props are specific to `NumberField`:\n\n| Prop      | Type                      | Default      | Description                                                                            |\n| --------- | ------------------------- | ------------ | -------------------------------------------------------------------------------------- |\n| `min`     | `number`                  | —            | Minimum allowed value; decrement button disables at this bound                         |\n| `max`     | `number`                  | —            | Maximum allowed value; increment button disables at this bound                         |\n| `step`    | `number`                  | `1`          | Amount added or subtracted on each button click                                        |\n| `display` | `'standard' \\| 'spinner'` | `'standard'` | `standard`: both buttons on the right; `spinner`: remove left, input centre, add right |\n\n### Display modes\n\n**`standard`** (default) — both buttons grouped on the right:\n\n```\n[startAdornment?]  [    input    ]  [− +]\n```\n\n**`spinner`** — decrement on the left, input centred, increment on the right:\n\n```\n[−]  [    input    ]  [+]\n```\n\n### Example\n\n```tsx\nimport { NumberField } from '@foi/design-system';\n\n// Standard — quantity picker with bounds\n<NumberField\n  name='quantity'\n  control={control}\n  label='Quantity'\n  min={1}\n  max={99}\n  step={1}\n/>\n\n// Spinner layout\n<NumberField\n  name='quantity'\n  control={control}\n  label='Quantity'\n  display='spinner'\n  min={0}\n  max={100}\n/>\n```\n\n## Theming\n\nWrap your app in `ThemeProvider` and pass one or more named themes. The active theme is selected by the `theme` prop and its tokens are injected as CSS custom properties that every component consumes.\n\n```tsx\nimport { ThemeProvider } from '@foi/design-system';\nimport { darkTheme } from '@foi/design-system/theme';\n\n<ThemeProvider themes={[darkTheme]} theme='dark'>\n  <App />\n</ThemeProvider>;\n```\n\n### Theme structure\n\nA theme is a plain object with a `name`, an optional `fonts` map, and a `components` map. Each component key holds one or more **variants**. The `DEFAULT` variant is the fallback used at runtime when no other variant is selected — define it in any theme that will be used standalone. When adding extra variants to an existing theme (from another project), `DEFAULT` is optional.\n\nEach variant contains:\n\n- `ROOT` — static styles applied unconditionally (e.g. `border-radius`, `background-color`)\n- `EVENTS` — styles scoped to interaction states. The complete set of possible states is:\n\n| State            | Description                                                                     |\n| ---------------- | ------------------------------------------------------------------------------- |\n| `ENABLED`        | Default resting state — element is interactive and fully visible                |\n| `VALUE`          | The filled or selected part of the element (e.g. track fill, typed text colour) |\n| `HOVER`          | While the pointer is over the element                                           |\n| `ACTIVE`         | While the element is being pressed                                              |\n| `FOCUS`          | When the element has keyboard focus                                             |\n| `ERROR`          | Container styles when validation fails                                          |\n| `ERROR_VALUE`    | Value part when in error state                                                  |\n| `ERROR_HOVER`    | Hover while in error state                                                      |\n| `ERROR_ACTIVE`   | Press while in error state                                                      |\n| `ERROR_FOCUS`    | Focus while in error state                                                      |\n| `DISABLED`       | When the element is not interactive                                             |\n| `DISABLED_VALUE` | Value part when disabled                                                        |\n| `LOADING`        | During a pending async operation                                                |\n| `LOADING_VALUE`  | Value part during loading                                                       |\n\nNot every component uses all states — each component defines only the states relevant to its interaction model. The TypeScript type exported from the component's theme file tells you exactly which states are available:\n\n```ts\nimport type { BUTTON } from '@foi/design-system/theme';\n// BUTTON includes the EVENTS type — autocomplete shows only the states Button supports\n```\n\n```ts\nimport type { BUTTON } from '@foi/design-system/theme';\n\nconst component = {\n  BUTTON: {\n    DEFAULT: {\n      ROOT: {\n        'border-radius': '8px',\n      },\n      EVENTS: {\n        ENABLED: {\n          'background-color': '#0070f3',\n          'color-primary': '#ffffff',\n        },\n        HOVER: {\n          'background-color': '#005bb5',\n        },\n        FOCUS: {\n          'outline-color': '#93c5fd',\n          'outline-width': '2px',\n          'outline-style': 'solid',\n          'outline-offset': '2px',\n        },\n        DISABLED: {\n          'background-color': '#e5e7eb',\n          'color-primary': '#9ca3af',\n        },\n      },\n    },\n    DANGER: {\n      EVENTS: {\n        ENABLED: {\n          'background-color': '#dc2626',\n          'color-primary': '#ffffff',\n        },\n        HOVER: {\n          'background-color': '#b91c1c',\n        },\n      },\n    },\n  },\n} as const satisfies BUTTON;\n```\n\nThe `satisfies BUTTON` check enforces that every token key is valid for that component — TypeScript reports an error if a token name is misspelled. `DEFAULT` is optional, so you can use the same type whether you are authoring a full theme or just adding extra variants.\n\n#### Adding variants from another project\n\nIf you only want to extend an existing theme with new variants, omit `DEFAULT` — the DS base theme already provides it as a runtime fallback:\n\n```ts\nimport type { BUTTON } from '@foi/design-system/theme';\n\nconst myVariants = {\n  BUTTON: {\n    DANGER: {\n      EVENTS: {\n        ENABLED: { 'background-color': '#dc2626', 'color-primary': '#ffffff' },\n        HOVER: { 'background-color': '#b91c1c' },\n      },\n    },\n    GHOST: {\n      EVENTS: {\n        ENABLED: { 'background-color': 'transparent', 'color-primary': '#111827' },\n        HOVER: { 'background-color': '#f3f4f6' },\n      },\n    },\n  },\n} as const satisfies BUTTON;\n```\n\n### Selecting a variant\n\nPass the `variant` prop to a component to switch between the variants you defined in the theme. The default is always `'default'`.\n\n```tsx\n<Button label='Delete' variant='danger' />\n```\n\n### One-off theme override\n\nAny component also accepts a `theme` prop — a partial `EVENTS` object — to override tokens for that single instance without touching the global theme.\n\n```tsx\n<Button label='Special' theme={{ ENABLED: { 'background-color': '#7c3aed' } }} />\n```\n\n## DataGrid\n\nAn async data table that delegates all data operations to the server via `onFetch`.\n\n### Defining columns\n\n```tsx\nimport { DataGrid } from '@foi/design-system';\nimport type { DataGridColumn } from '@foi/design-system';\n\ninterface Product {\n  id: number;\n  name: string;\n  price: number;\n}\n\nconst columns: DataGridColumn<Product>[] = [\n  {\n    key: 'name',\n    label: 'Product', // string → wrapped in the themed --DATAGRID-thLabel span\n    type: 'text',\n    filter: { type: 'search' },\n  },\n  {\n    key: 'price',\n    label: 'Price',\n    type: 'number',\n    render: value => `$${Number(value).toLocaleString('es-CL')}`,\n  },\n];\n```\n\n`label` accepts any `ReactNode`. A plain string is automatically wrapped in the themed `--DATAGRID-thLabel` span so it inherits the header typography. Pass a custom node to render icons, badges, or anything else without that wrapper:\n\n```tsx\nimport { Icon } from '@foi/design-system';\n\n{\n  key: 'price',\n  label: (\n    <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>\n      <Icon name='payments' size='sm' />\n      Price\n    </span>\n  ),\n  type: 'number',\n}\n```\n\n### The `onFetch` contract\n\n`onFetch` receives `{ page, pageSize, sort?, filters? }` and must return `{ data, total }`. It is called automatically whenever the page, sort, or any filter changes.\n\n```tsx\nconst onFetch = async ({ page, pageSize, sort, filters }) => {\n  const response = await api.getProducts({ page, pageSize, sort, filters });\n  return { data: response.items, total: response.total };\n};\n\n<DataGrid<Product> columns={columns} onFetch={onFetch} />;\n```\n\n### Action columns\n\nAdd a column with `type: 'options'` and a `render` prop to define row-level actions. The `render` receives `(value, row)` — use `row` to call your handlers or control Modal state.\n\n```tsx\nconst [pendingDelete, setPendingDelete] = useState<Product | null>(null);\n\nconst columnsWithActions: DataGridColumn<Product>[] = [\n  ...columns,\n  {\n    key: 'actions',\n    label: '',\n    type: 'options',\n    sortable: false,\n    render: (_value, row) => (\n      <>\n        <IconButton icon={<Icon name='edit' size='sm' />} onClick={() => onEdit(row)} aria-label='Edit' />\n        <IconButton icon={<Icon name='delete' size='sm' />} onClick={() => setPendingDelete(row)} aria-label='Delete' />\n      </>\n    ),\n  },\n];\n```\n\n### Pagination modes\n\n| Prop              | Value          | Behaviour                                              |\n| ----------------- | -------------- | ------------------------------------------------------ |\n| `paginationType`  | `'pagination'` | Renders a `<Pagination>` bar below the table (default) |\n| `paginationType`  | `'scroll'`     | Appends rows as the user scrolls down                  |\n| `pageSizeOptions` | `number[]`     | Shows a rows-per-page selector in the bar              |\n\n## Modal\n\nA portal-based overlay dialog. Renders into `document.body` so it sits above all other content regardless of DOM nesting.\n\n### Basic usage\n\n```tsx\nimport { Modal, Button, Icon } from '@foi/design-system';\n\nconst [open, setOpen] = useState(false);\n\n<Modal\n  open={open}\n  onClose={() => setOpen(false)}\n  header={\n    <>\n      <Icon name='info' />\n      <span className='--MODAL-title'>Información</span>\n    </>\n  }\n  footer={\n    <>\n      <Button onClick={() => setOpen(false)} variant='ghost'>\n        Cancelar\n      </Button>\n      <Button onClick={() => setOpen(false)}>Aceptar</Button>\n    </>\n  }\n>\n  Contenido del modal.\n</Modal>;\n```\n\nApply `--MODAL-title` to the title element inside `header` to receive the themed font and colour styles.\n\n### Props\n\n| Prop              | Type           | Default | Description                                       |\n| ----------------- | -------------- | ------- | ------------------------------------------------- |\n| `open`            | `boolean`      | —       | Controls visibility                               |\n| `onClose`         | `() => void`   | —       | Called when the modal requests to close           |\n| `header`          | `ReactNode`    | —       | Full header bar content (rendered before ×)       |\n| `showCloseButton` | `boolean`      | `true`  | Whether to render the × icon button               |\n| `size`            | `'md' \\| 'lg'` | `'md'`  | `'md'` = 480 px, `'lg'` = 720 px                  |\n| `children`        | `ReactNode`    | —       | Main body content                                 |\n| `footer`          | `ReactNode`    | —       | Footer row content (typically action buttons)     |\n| `staticBackdrop`  | `boolean`      | `false` | When `true`, backdrop click and Escape do nothing |\n| `className`       | `string`       | —       | Extra CSS class on the modal panel                |\n\n### Close triggers\n\n| Trigger        | `staticBackdrop=false` | `staticBackdrop=true` |\n| -------------- | ---------------------- | --------------------- |\n| × button       | ✓                      | ✓                     |\n| Backdrop click | ✓                      | —                     |\n| Escape key     | ✓                      | —                     |\n\n## Badge\n\nWraps any element and overlays a small indicator at one of its corners. Renders a numeric count, a capped overflow label (`max+`), or a plain dot.\n\n### Props\n\n| Prop       | Type                                                           | Default       | Description                                       |\n| ---------- | -------------------------------------------------------------- | ------------- | ------------------------------------------------- |\n| `children` | `ReactNode`                                                    | —             | Element to wrap                                   |\n| `count`    | `number`                                                       | —             | Number to display; hidden when `0` or `undefined` |\n| `max`      | `number`                                                       | —             | Cap value — shows `max+` when `count` exceeds it  |\n| `dot`      | `boolean`                                                      | `false`       | Show a small dot instead of a number              |\n| `position` | `'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left'` | `'top-right'` | Corner where the indicator is placed              |\n| `variant`  | `string`                                                       | `'default'`   | Theme variant                                     |\n| `theme`    | `EVENTS`                                                       | —             | One-off token override                            |\n\nThe indicator animates in with a spring-scale effect on mount. The animation direction adapts automatically to the chosen `position`.\n\n### Example\n\n```tsx\nimport { Badge, IconButton, Icon } from '@foi/design-system';\n\n// Count\n<Badge count={5}>\n  <IconButton icon={<Icon name='notifications' />} onClick={openNotifications} />\n</Badge>\n\n// Overflow cap — displays \"999+\"\n<Badge count={1200} max={999}>\n  <IconButton icon={<Icon name='mail' />} onClick={openMail} />\n</Badge>\n\n// Dot — no number\n<Badge dot position='bottom-right'>\n  <IconButton icon={<Icon name='settings' />} onClick={openSettings} />\n</Badge>\n```\n\n### Theming\n\n```ts\nimport type { BADGE } from '@foi/design-system/theme';\n\nconst badge = {\n  BADGE: {\n    DEFAULT: {\n      EVENTS: {\n        ENABLED: {\n          'background-color': '#ef4444',\n          'color-primary': '#ffffff',\n        },\n      },\n    },\n  },\n} as const satisfies BADGE;\n```\n\n## Button\n\nThe primary interactive element. Accepts any `ReactNode` as children and natively supports all standard `<button>` HTML attributes.\n\n### Props\n\n| Prop        | Type                   | Default     | Description                                     |\n| ----------- | ---------------------- | ----------- | ----------------------------------------------- |\n| `children`  | `ReactNode`            | —           | Button label or content                         |\n| `type`      | `'button' \\| 'submit'` | `'button'`  | HTML button type                                |\n| `iconStart` | `JSX.Element`          | —           | Icon rendered before the label                  |\n| `iconEnd`   | `JSX.Element`          | —           | Icon rendered after the label                   |\n| `loading`   | `boolean`              | `false`     | Shows a loading indicator; button stays mounted |\n| `disabled`  | `boolean`              | `false`     | Prevents interaction                            |\n| `className` | `string`               | —           | Extra CSS class                                 |\n| `variant`   | `string`               | `'default'` | Theme variant                                   |\n| `theme`     | `EVENTS`               | —           | One-off token override                          |\n\n### Example\n\n```tsx\nimport { Button, Icon } from '@foi/design-system';\n\n<Button onClick={handleSave}>Guardar</Button>\n<Button type='submit' iconStart={<Icon name='send' />}>Enviar</Button>\n<Button loading={isSaving} disabled={isSaving}>Guardando…</Button>\n<Button variant='danger' onClick={handleDelete}>Eliminar</Button>\n```\n\n## Icon\n\nRenders a single icon from the [Material Symbols Rounded](https://fonts.google.com/icons) font. The font is loaded automatically by `ThemeProvider`.\n\n### Props\n\n| Prop        | Type                           | Default | Description                        |\n| ----------- | ------------------------------ | ------- | ---------------------------------- |\n| `name`      | `string`                       | —       | Material Symbols ligature name     |\n| `fill`      | `boolean`                      | `false` | Use the filled variant of the icon |\n| `size`      | `'sm' \\| 'md' \\| 'lg' \\| 'xl'` | `'md'`  | Icon size                          |\n| `className` | `string`                       | —       | Extra CSS class                    |\n| `style`     | `CSSProperties`                | —       | Inline styles                      |\n\n### Example\n\n```tsx\nimport { Icon } from '@foi/design-system';\n\n<Icon name='home' />\n<Icon name='search' size='lg' />\n<Icon name='favorite' fill />\n```\n\n## IconButton\n\nA button that renders a single icon with no visible text. Accepts all standard `<button>` HTML attributes.\n\n### Props\n\n| Prop        | Type          | Default     | Description                                       |\n| ----------- | ------------- | ----------- | ------------------------------------------------- |\n| `icon`      | `JSX.Element` | —           | Icon element to render (use `<Icon />`)           |\n| `onClick`   | `function`    | —           | Click handler                                     |\n| `isFlipped` | `boolean`     | `false`     | Mirrors the icon horizontally (useful for arrows) |\n| `disabled`  | `boolean`     | `false`     | Prevents interaction                              |\n| `className` | `string`      | —           | Extra CSS class                                   |\n| `variant`   | `string`      | `'default'` | Theme variant                                     |\n| `theme`     | `EVENTS`      | —           | One-off token override                            |\n\n### Example\n\n```tsx\nimport { IconButton, Icon } from '@foi/design-system';\n\n<IconButton icon={<Icon name='close' />} onClick={() => setOpen(false)} />\n<IconButton icon={<Icon name='arrow_forward' />} isFlipped onClick={goBack} />\n```\n\n## Checkbox\n\nA single checkbox. Can be used standalone (controlled or RHF), or as a child of `CheckboxGroup` / `CheckboxTree`.\n\n### Props\n\n| Prop            | Type                         | Default     | Description                                      |\n| --------------- | ---------------------------- | ----------- | ------------------------------------------------ |\n| `name`          | `string`                     | —           | RHF field name (required in standalone RHF mode) |\n| `control`       | `Control`                    | —           | RHF control object                               |\n| `checked`       | `boolean`                    | —           | Controlled mode value (use with `onChecked`)     |\n| `onChecked`     | `(checked: boolean) => void` | —           | Controlled mode change handler                   |\n| `label`         | `string`                     | —           | Text label next to the checkbox                  |\n| `icon`          | `JSX.Element`                | checkmark   | Custom icon shown when checked                   |\n| `disabled`      | `boolean`                    | `false`     | Prevents interaction                             |\n| `helperText`    | `string`                     | —           | Hint text below the checkbox                     |\n| `showErrorText` | `boolean`                    | `true`      | Show validation error message                    |\n| `variant`       | `string`                     | `'default'` | Theme variant                                    |\n| `theme`         | `EVENTS`                     | —           | One-off token override                           |\n\n### Example\n\n```tsx\nimport { Checkbox } from '@foi/design-system';\n\n// RHF\n<Checkbox name='agree' control={control} label='Acepto los términos' />;\n\n// Controlled\nconst [checked, setChecked] = useState(false);\n<Checkbox checked={checked} onChecked={setChecked} label='Recordarme' />;\n```\n\n## Radio\n\nA single radio button. Always used inside `RadioGroup` — it receives its state from the group context automatically.\n\n### Props\n\n| Prop       | Type          | Default     | Description                                  |\n| ---------- | ------------- | ----------- | -------------------------------------------- |\n| `value`    | `string`      | —           | The value this option represents             |\n| `label`    | `string`      | —           | Text label next to the radio                 |\n| `icon`     | `JSX.Element` | filled dot  | Custom icon shown when selected              |\n| `disabled` | `boolean`     | `false`     | Overrides the group `disabled` for this item |\n| `variant`  | `string`      | `'default'` | Theme variant                                |\n| `theme`    | `EVENTS`      | —           | One-off token override                       |\n\n## Select\n\nA dropdown select field backed by a virtual-scroll list. Integrates with RHF and stores the selected `value` string.\n\n### Props\n\n| Prop               | Type           | Default     | Description                                         |\n| ------------------ | -------------- | ----------- | --------------------------------------------------- |\n| `name`             | `string`       | —           | RHF field name                                      |\n| `label`            | `string`       | —           | Floating label                                      |\n| `control`          | `Control`      | —           | RHF control object                                  |\n| `options`          | `OptionProp[]` | —           | List of `{ value, label, description? }` items      |\n| `disabled`         | `boolean`      | `false`     | Prevents interaction                                |\n| `range`            | `number`       | `100`       | Options per page (virtual scroll activates above 3) |\n| `hasSearch`        | `boolean`      | `false`     | Shows a search input — filters after 3 characters   |\n| `hasDescription`   | `boolean`      | `false`     | Renders a secondary description line per option     |\n| `hasStaticOptions` | `boolean`      | `false`     | Renders dropdown inline (no absolute positioning)   |\n| `helperText`       | `string`       | —           | Hint text below the field                           |\n| `showErrorText`    | `boolean`      | `true`      | Show validation error message                       |\n| `hasPadding`       | `boolean`      | `false`     | Add bottom padding for helper/error text            |\n| `variant`          | `string`       | `'default'` | Theme variant                                       |\n| `theme`            | `EVENTS`       | —           | One-off token override                              |\n\n### Example\n\n```tsx\nimport { Select } from '@foi/design-system';\n\nconst options = [\n  { value: 'cl', label: 'Chile' },\n  { value: 'ar', label: 'Argentina', description: 'Buenos Aires' },\n];\n\n<Select name='country' control={control} label='País' options={options} hasSearch />;\n```\n\n## ColorField\n\nA color picker field with a floating label and a swatch preview. The RHF value is always a `#RRGGBB` hex string. The color can be chosen via a gradient picker, a hue slider, or by typing directly in the HEX / RGB / HSL inputs inside the picker menu. The display format of the trigger (the text visible in the closed field) is controlled by the `format` prop; the format can also be cycled interactively from inside the menu.\n\n### Props\n\n| Prop            | Type                      | Default     | Description                                                       |\n| --------------- | ------------------------- | ----------- | ----------------------------------------------------------------- |\n| `name`          | `string`                  | —           | RHF field name. The stored value is always a `#RRGGBB` hex string |\n| `label`         | `string`                  | —           | Floating label text                                               |\n| `control`       | `Control`                 | —           | RHF control object                                                |\n| `format`        | `'HEX' \\| 'RGB' \\| 'HSL'` | `'HEX'`     | Format used to display the color value in the closed trigger      |\n| `disabled`      | `boolean`                 | `false`     | Prevents all interaction                                          |\n| `helperText`    | `string`                  | —           | Hint text shown below the field when there is no error            |\n| `showErrorText` | `boolean`                 | `true`      | Show the validation error message below the field                 |\n| `hasPadding`    | `boolean`                 | `false`     | Add bottom padding to reserve space for helper/error text         |\n| `className`     | `string`                  | —           | Extra CSS class on the root element                               |\n| `variant`       | `string`                  | `'default'` | Theme variant name                                                |\n| `theme`         | `EVENTS`                  | —           | One-off token override for this instance                          |\n\n### Example\n\n```tsx\nimport { ColorField } from '@foi/design-system';\nimport { z } from 'zod';\n\nconst schema = z.object({\n  brandColor: z.string().regex(/^#[0-9A-Fa-f]{6}$/, 'Select a valid color'),\n});\n\n<ColorField\n  name='brandColor'\n  control={control}\n  label='Brand color'\n  format='HEX'\n  helperText='Used for headers and buttons'\n/>;\n```\n\n### Format display\n\n| `format` | Trigger value example |\n| -------- | --------------------- |\n| `'HEX'`  | `#3B82F6`             |\n| `'RGB'`  | `rgb(59, 130, 246)`   |\n| `'HSL'`  | `hsl(217, 91%, 60%)`  |\n\nThe format can also be changed interactively from inside the picker menu using the up/down arrow buttons next to the color inputs, without affecting the stored hex value.\n\n### Theming\n\n```ts\nimport type { COLORFIELD } from '@foi/design-system/theme';\n\nconst colorField = {\n  COLORFIELD: {\n    DEFAULT: {\n      ROOT: { 'border-radius': '8px' },\n      EVENTS: {\n        ENABLED: {\n          'background-color': '#ffffff',\n          'border-color': '#d1d5db',\n          'border-width': '1px',\n          'border-style': 'solid',\n          'color-primary': '#111827',\n          'color-secondary': '#6b7280',\n        },\n        HOVER: { 'border-color': '#9ca3af' },\n        FOCUS: { 'border-color': '#3b82f6' },\n        VALUE: { 'border-color': '#3b82f6' },\n        ERROR: { 'border-color': '#ef4444' },\n        DISABLED: { 'background-color': '#f9fafb', 'color-primary': '#9ca3af' },\n      },\n    },\n  },\n} as const satisfies COLORFIELD;\n```\n\n## DatePicker\n\nA date input field with an inline or floating calendar. Stores a `Date` value in RHF.\n\n### Props\n\n| Prop               | Type           | Default     | Description                                           |\n| ------------------ | -------------- | ----------- | ----------------------------------------------------- |\n| `name`             | `string`       | —           | RHF field name                                        |\n| `label`            | `string`       | —           | Floating label                                        |\n| `control`          | `Control`      | —           | RHF control object                                    |\n| `language`         | `'es' \\| 'en'` | browser     | Date format and labels (`DD/MM/YYYY` vs `MM/DD/YYYY`) |\n| `minDate`          | `Date`         | —           | Earliest selectable date                              |\n| `maxDate`          | `Date`         | —           | Latest selectable date                                |\n| `disablePast`      | `boolean`      | `false`     | Disables all dates before today                       |\n| `disableFuture`    | `boolean`      | `false`     | Disables all dates after today                        |\n| `hasStaticOptions` | `boolean`      | `false`     | Renders calendar inline instead of floating           |\n| `disabled`         | `boolean`      | `false`     | Prevents interaction                                  |\n| `helperText`       | `string`       | —           | Hint text below the field                             |\n| `showErrorText`    | `boolean`      | `true`      | Show validation error message                         |\n| `hasPadding`       | `boolean`      | `false`     | Add bottom padding for helper/error text              |\n| `variant`          | `string`       | `'default'` | Theme variant                                         |\n| `theme`            | `EVENTS`       | —           | One-off token override                                |\n\n### Example\n\n```tsx\nimport { DatePicker } from '@foi/design-system';\n\n<DatePicker\n  name='birthDate'\n  control={control}\n  label='Fecha de nacimiento'\n  language='es'\n  disableFuture\n  maxDate={new Date('2005-01-01')}\n/>;\n```\n\n## Switch\n\nA toggle switch that stores a `boolean` value in RHF.\n\n### Props\n\n| Prop         | Type          | Default     | Description                   |\n| ------------ | ------------- | ----------- | ----------------------------- |\n| `name`       | `string`      | —           | RHF field name                |\n| `control`    | `Control`     | —           | RHF control object            |\n| `label`      | `string`      | —           | Text label next to the switch |\n| `iconOn`     | `JSX.Element` | —           | Icon on the thumb when on     |\n| `iconOff`    | `JSX.Element` | —           | Icon on the thumb when off    |\n| `disabled`   | `boolean`     | `false`     | Prevents interaction          |\n| `helperText` | `string`      | —           | Hint text below the switch    |\n| `variant`    | `string`      | `'default'` | Theme variant                 |\n| `theme`      | `EVENTS`      | —           | One-off token override        |\n\n### Example\n\n```tsx\nimport { Switch, Icon } from '@foi/design-system';\n\n<Switch\n  name='notifications'\n  control={control}\n  label='Activar notificaciones'\n  iconOn={<Icon name='notifications' />}\n  iconOff={<Icon name='notifications_off' />}\n/>;\n```\n\n## Slider\n\nA range slider that stores a `number[]` value in RHF. Single-thumb mode uses a 1-element array; range mode uses a 2-element array.\n\n### Props\n\n| Prop         | Type                         | Default        | Description                                       |\n| ------------ | ---------------------------- | -------------- | ------------------------------------------------- |\n| `name`       | `string`                     | —              | RHF field name                                    |\n| `control`    | `Control`                    | —              | RHF control object                                |\n| `min`        | `number`                     | —              | Minimum value                                     |\n| `max`        | `number`                     | —              | Maximum value (`Infinity` disables click-to-seek) |\n| `step`       | `number`                     | `1`            | Snap granularity                                  |\n| `distance`   | `number`                     | `0`            | Minimum gap between thumbs (range mode only)      |\n| `direction`  | `'horizontal' \\| 'vertical'` | `'horizontal'` | Slider orientation                                |\n| `track`      | `'normal' \\| 'inverted'`     | `'normal'`     | Fill direction of the track                       |\n| `showMarks`  | `boolean`                    | `false`        | Show a dot at every `step` position               |\n| `iconMin`    | `JSX.Element`                | —              | Icon inside the min/single thumb                  |\n| `iconMax`    | `JSX.Element`                | —              | Icon inside the max thumb (range mode only)       |\n| `helperText` | `string`                     | —              | Hint text below the slider                        |\n| `disabled`   | `boolean`                    | `false`        | Prevents interaction                              |\n| `variant`    | `string`                     | `'default'`    | Theme variant                                     |\n| `theme`      | `EVENTS`                     | —              | One-off token override                            |\n\n### Example\n\n```tsx\nimport { Slider } from '@foi/design-system';\n\n// Single thumb — value is [number]\n<Slider name='volume' control={control} min={0} max={100} />\n\n// Range — value is [number, number]\n<Slider name='priceRange' control={control} min={0} max={10000} step={100} distance={500} showMarks />\n```\n\n## Skeleton\n\nAn animated placeholder rendered while content is loading. Has no logic — simply swap it out once your data arrives.\n\n### Props\n\n| Prop        | Type                          | Default         | Description                |\n| ----------- | ----------------------------- | --------------- | -------------------------- |\n| `variant`   | `'rectangular' \\| 'circular'` | `'rectangular'` | Shape of the placeholder   |\n| `width`     | `string \\| number`            | —               | CSS width or pixel number  |\n| `height`    | `string \\| number`            | —               | CSS height or pixel number |\n| `className` | `string`                      | —               | Extra CSS class            |\n\n### Example\n\n```tsx\nimport { Skeleton } from '@foi/design-system';\n\n// While loading a user avatar\n{\n  isLoading ? <Skeleton variant='circular' width={40} height={40} /> : <Avatar src={user.photo} />;\n}\n\n// While loading a text block\n{\n  isLoading ? <Skeleton width='100%' height={20} /> : <p>{content}</p>;\n}\n```\n\n## Pagination\n\nA standalone page-navigation bar. `DataGrid` uses this internally, but it can also be used independently.\n\n### Props\n\n| Prop               | Type                     | Default | Description                                       |\n| ------------------ | ------------------------ | ------- | ------------------------------------------------- |\n| `page`             | `number`                 | —       | Zero-based current page index                     |\n| `total`            | `number`                 | —       | Total row count (used to compute page count)      |\n| `pageSize`         | `number`                 | —       | Rows per page                                     |\n| `onPageChange`     | `(page: number) => void` | —       | Fired when the user navigates to a different page |\n| `pageSizeOptions`  | `number[]`               | —       | Shows a rows-per-page selector with these options |\n| `onPageSizeChange` | `(size: number) => void` | —       | Fired when the user changes the page size         |\n| `loading`          | `boolean`                | `false` | Disables all controls while data is fetching      |\n\n### Example\n\n```tsx\nimport { Pagination } from '@foi/design-system';\n\n<Pagination\n  page={page}\n  total={total}\n  pageSize={pageSize}\n  onPageChange={setPage}\n  pageSizeOptions={[10, 25, 50]}\n  onPageSizeChange={setPageSize}\n/>;\n```\n\n## CheckboxGroup\n\nManages a set of `Checkbox` children as a `string[]` RHF field. The group value is the array of `value` props of all checked children.\n\n### Props\n\n| Prop            | Type                         | Default      | Description                                    |\n| --------------- | ---------------------------- | ------------ | ---------------------------------------------- |\n| `name`          | `string`                     | —            | RHF field name                                 |\n| `control`       | `Control`                    | —            | RHF control object                             |\n| `children`      | `ReactNode`                  | —            | `<Checkbox>` elements (each must have `value`) |\n| `label`         | `string`                     | —            | Group label above the checkboxes               |\n| `direction`     | `'vertical' \\| 'horizontal'` | `'vertical'` | Layout direction of the items                  |\n| `disabled`      | `boolean`                    | `false`      | Disables all children                          |\n| `helperText`    | `string`                     | —            | Hint text below the group                      |\n| `showErrorText` | `boolean`                    | `true`       | Show validation error message                  |\n| `variant`       | `string`                     | `'default'`  | Theme variant                                  |\n| `theme`         | `EVENTS`                     | —            | One-off token override                         |\n\n### Example\n\n```tsx\nimport { CheckboxGroup, Checkbox } from '@foi/design-system';\n\nconst schema = z.object({\n  skills: z.array(z.string()).min(1, 'Selecciona al menos una'),\n});\n\n<CheckboxGroup name='skills' control={control} label='Habilidades' direction='horizontal'>\n  <Checkbox value='react' label='React' />\n  <Checkbox value='vue' label='Vue' />\n  <Checkbox value='svelte' label='Svelte' />\n</CheckboxGroup>;\n```\n\n## CheckboxTree\n\nA hierarchical checkbox group. The parent checkbox controls all children simultaneously and shows an indeterminate state when some (but not all) children are checked.\n\n### Props\n\n| Prop                | Type          | Default     | Description                                       |\n| ------------------- | ------------- | ----------- | ------------------------------------------------- |\n| `name`              | `string`      | —           | RHF field name                                    |\n| `control`           | `Control`     | —           | RHF control object                                |\n| `children`          | `ReactNode`   | —           | `<Checkbox>` elements (each must have `value`)    |\n| `label`             | `string`      | —           | Label on the parent (select-all) checkbox         |\n| `iconChecked`       | `JSX.Element` | checkmark   | Icon on the parent when all children are checked  |\n| `iconIndeterminate` | `JSX.Element` | dash        | Icon on the parent when some children are checked |\n| `disabled`          | `boolean`     | `false`     | Disables the parent and all children              |\n| `helperText`        | `string`      | —           | Hint text below the tree                          |\n| `showErrorText`     | `boolean`     | `true`      | Show validation error message                     |\n| `variant`           | `string`      | `'default'` | Theme variant                                     |\n| `theme`             | `EVENTS`      | —           | One-off token override                            |\n\n### Example\n\n```tsx\nimport { CheckboxTree, Checkbox } from '@foi/design-system';\n\n<CheckboxTree name='permissions' control={control} label='Seleccionar todo'>\n  <Checkbox value='read' label='Leer' />\n  <Checkbox value='write' label='Escribir' />\n  <Checkbox value='delete' label='Eliminar' />\n</CheckboxTree>;\n```\n\n## RadioGroup\n\nManages a set of `Radio` children as a single `string` RHF field. The value is the `value` prop of the selected child.\n\n### Props\n\n| Prop            | Type                         | Default      | Description                                 |\n| --------------- | ---------------------------- | ------------ | ------------------------------------------- |\n| `name`          | `string`                     | —            | RHF field name                              |\n| `control`       | `Control`                    | —            | RHF control object                          |\n| `children`      | `ReactNode`                  | —            | `<Radio>` elements (each must have `value`) |\n| `label`         | `string`                     | —            | Group label above the radios                |\n| `direction`     | `'vertical' \\| 'horizontal'` | `'vertical'` | Layout direction of the items               |\n| `disabled`      | `boolean`                    | `false`      | Disables all children                       |\n| `helperText`    | `string`                     | —            | Hint text below the group                   |\n| `showErrorText` | `boolean`                    | `true`       | Show validation error message               |\n| `variant`       | `string`                     | `'default'`  | Theme variant                               |\n| `theme`         | `EVENTS`                     | —            | One-off token override                      |\n\n### Example\n\n```tsx\nimport { RadioGroup, Radio } from '@foi/design-system';\n\nconst schema = z.object({\n  plan: z.string().min(1, 'Selecciona un plan'),\n});\n\n<RadioGroup name='plan' control={control} label='Plan' direction='horizontal'>\n  <Radio value='free' label='Gratis' />\n  <Radio value='pro' label='Pro' />\n  <Radio value='enterprise' label='Enterprise' />\n</RadioGroup>;\n```\n\n## Chip\n\nA compact inline label for displaying statuses, tags, or categories. Height is fixed at 24px and width adapts to its content. Can optionally render as an interactive button.\n\n### Props\n\n| Prop        | Type         | Default     | Description                                                  |\n| ----------- | ------------ | ----------- | ------------------------------------------------------------ |\n| `children`  | `ReactNode`  | —           | Label text, number, or custom content                        |\n| `onClick`   | `() => void` | —           | When provided, renders as `<button>` with interactive states |\n| `disabled`  | `boolean`    | `false`     | Disables the button (only applies when `onClick` is set)     |\n| `variant`   | `string`     | `'default'` | Theme variant — any key defined under `CHIP` in your theme   |\n| `className` | `string`     | —           | Extra CSS class                                              |\n| `theme`     | `EVENTS`     | —           | One-off token override                                       |\n\nWhen `children` is a `string` or `number` it is wrapped in a `span.--CHIP-label` that applies horizontal padding. Pass any other `ReactNode` to render custom content (e.g. icon + text) directly inside the chip.\n\nWhen `onClick` is provided the chip renders as a `<button type=\"button\">` and the theme's `HOVER`, `ACTIVE`, `FOCUS`, and `DISABLED` states become active. Without `onClick` the chip is a non-interactive `<div>` and those states are ignored.\n\n### Example\n\n```tsx\nimport { Chip, Icon } from '@foi/design-system';\n\n// Decorative — string or number, wrapped in padded span automatically\n<Chip>Activo</Chip>\n<Chip variant='myVariant'>{42}</Chip>\n\n// Decorative — custom ReactNode renders directly inside the chip\n<Chip variant='myVariant'>\n  <Icon name='star' />\n  <span>Destacado</span>\n</Chip>\n\n// Clickable — renders as <button>, hover/active/focus states apply\n<Chip onClick={() => setFilter('react')}>React</Chip>\n<Chip onClick={handleSelect} disabled>Deshabilitado</Chip>\n```\n\n## Toast\n\nA notification system built around a React context. `ThemeProvider` automatically includes the provider — no additional setup required. Call `useToast` from anywhere inside the tree to push transient messages.\n\n### Setup\n\n`ThemeProvider` includes `ToastProvider` internally. Optionally configure position and default duration via the `toast` prop:\n\n```tsx\n<ThemeProvider themes={[darkTheme]} theme='dark' toast={{ position: 'top-right', duration: 4000 }}>\n  <App />\n</ThemeProvider>\n```\n\n### `useToast`\n\n```tsx\nimport { useToast } from '@foi/design-system/hooks';\n\nconst { push } = useToast();\n\npush('Archivo guardado', { variant: 'success', icon: 'check_circle' });\n```\n\n### `push` options\n\n| Option     | Type      | Default     | Description                                        |\n| ---------- | --------- | ----------- | -------------------------------------------------- |\n| `variant`  | `string`  | `'default'` | Theme variant (maps to a key defined in the theme) |\n| `icon`     | `string`  | —           | Material Symbols icon name rendered on the left    |\n| `duration` | `number`  | `3000`      | Milliseconds before the toast auto-dismisses       |\n| `closable` | `boolean` | `false`     | Render a × button so the user can dismiss manually |\n\n### `ToastPosition`\n\n| Value             | Description   |\n| ----------------- | ------------- |\n| `'bottom-right'`  | Default       |\n| `'bottom-center'` | Bottom center |\n| `'bottom-left'`   | Bottom left   |\n| `'top-right'`     | Top right     |\n| `'top-center'`    | Top center    |\n| `'top-left'`      | Top left      |\n\n### Example\n\n```tsx\nimport { useToast } from '@foi/design-system/hooks';\n\nconst Notifier = () => {\n  const { push } = useToast();\n\n  const save = async () => {\n    try {\n      await api.save();\n      push('Guardado correctamente', { icon: 'check_circle' });\n    } catch {\n      push('No se pudo guardar', { icon: 'error', closable: true, duration: 8000 });\n    }\n  };\n\n  return <Button onClick={save}>Guardar</Button>;\n};\n```\n\n### Defining toast variants in the theme\n\nToast variants are defined in the theme under the `TOAST` key. Each variant must be self-contained (all tokens, not just overrides) because `useCreateComponentStyles` loads only the requested variant:\n\n```ts\nimport type { TOAST } from '@foi/design-system/theme';\n\nconst toast = {\n  TOAST: {\n    DEFAULT: {\n      ROOT: { 'background-color': '#1e293b', 'border-radius': '6px' },\n      EVENTS: {\n        ENABLED: {\n          'color-primary': '#f8fafc',\n          'border-color': '#334155',\n          'icon-color': '#94a3b8',\n        },\n      },\n    },\n    // Add as many named variants as your design requires\n    MY_VARIANT: {\n      ROOT: { 'background-color': '#1e293b', 'border-radius': '6px' },\n      EVENTS: {\n        ENABLED: {\n          'color-primary': '#f8fafc',\n          'border-color': '#10b981',\n          'icon-color': '#10b981',\n        },\n      },\n    },\n  },\n} as const satisfies TOAST;\n```\n\n## Project structure\n\n```\nsrc/\n├── components/\n│   ├── atoms/       # Primitive UI components\n│   ├── molecules/   # Composed components built from atoms\n│   └── organisms/   # Complex components composed from molecules and atoms\n├── hocs/\n│   ├── ThemeProvider/   # Global theme context and CSS-variable injection\n│   ├── MarginPage/      # Page layout wrapper\n│   ├── OutsideEvent/    # Click-outside detection\n│   └── ScrollToTop/     # Scroll restoration on navigation\n└── pages/\n    └── Playground/      # Dev sandbox for manual testing\n```\n","readmeFilename":"README.md"}