{"_id":"@caeher/react-form-tokns","_rev":"7-be746b8c39a240d42bdc1370b9a2d6a7","name":"@caeher/react-form-tokns","dist-tags":{"latest":"1.5.0"},"versions":{"1.1.0":{"name":"@caeher/react-form-tokns","version":"1.1.0","keywords":["react","form","components","tailwindcss","typescript","ui"],"license":"MIT","_id":"@caeher/react-form-tokns@1.1.0","maintainers":[{"name":"caeher","email":"eh18010@ues.edu.sv"}],"dist":{"shasum":"e2cac6fe11ca5ba9eaac7a3bc4def28731390153","tarball":"https://registry.npmjs.org/@caeher/react-form-tokns/-/react-form-tokns-1.1.0.tgz","fileCount":31,"integrity":"sha512-Cqjc6lXHcf5g3nOqv8cALEJWBWydAGyn2Y3l1KRlQzOu6v5cbHr32kx/v0aDsSFkdOhUhTYM2fsOQZoSZRbwrw==","signatures":[{"sig":"MEQCIFNZyvonZIQjZJYJb11DYl2+Y3ViRIYgDHyOmMuqpvKrAiBebDZvXKXRjtT/eeGKhcJoLg+wMkV2Yko43PVWTtf44w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":469987},"main":"./dist/index.cjs","type":"module","types":"./dist/lib/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/lib/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"8c9e6e890141a22f1dca9b9eb106cd61e9619a50","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview","build:lib":"vite build --mode lib && tsc --project tsconfig.lib.json","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"caeher","email":"eh18010@ues.edu.sv"},"_npmVersion":"10.9.8","description":"A premium React form component library with Tailwind CSS v4","directories":{},"sideEffects":false,"_nodeVersion":"22.22.2","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","react":"^19.2.5","eslint":"^10.2.1","globals":"^17.5.0","react-dom":"^19.2.5","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/node":"^25.6.0","tailwindcss":"^4.2.4","@types/react":"^19.2.14","lucide-react":"^1.14.0","@types/react-dom":"^19.2.3","semantic-release":"^24.2.1","@tailwindcss/vite":"^4.2.4","typescript-eslint":"^8.59.1","@vitejs/plugin-react":"^6.0.1","@semantic-release/git":"^10.0.1","@internationalized/date":"^3.12.1","eslint-plugin-react-hooks":"^7.1.1","@semantic-release/changelog":"^6.0.3","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^4.0.0","lucide-react":"^0.300.0 || ^1.0.0","@internationalized/date":"^3.0.0"},"peerDependenciesMeta":{"lucide-react":{"optional":true},"@internationalized/date":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-form-tokns_1.1.0_1777763611678_0.18305056133024733","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@caeher/react-form-tokns","version":"1.2.0","keywords":["react","form","components","tailwindcss","typescript","ui"],"license":"MIT","_id":"@caeher/react-form-tokns@1.2.0","maintainers":[{"name":"caeher","email":"eh18010@ues.edu.sv"}],"dist":{"shasum":"3857dd200b14f2a4d5cf2467e05feae67b77dfb9","tarball":"https://registry.npmjs.org/@caeher/react-form-tokns/-/react-form-tokns-1.2.0.tgz","fileCount":31,"integrity":"sha512-ldJab+JjPQfPBcNMo52sqS0eHAmCymWLNgUO6XFDRH/JkNf8+4HxrW9HLNya5FPz1CZj8aYMK6sq9tJki5XW2g==","signatures":[{"sig":"MEUCIFsmeaCT761Hxit+ysPGsfiWYa6pbISPrWhR8wbSlSIFAiEAjaIZsyp/kXLmvIXtQaOIWpDG4j7oKYLo3nzn3QW/us0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":470036},"main":"./dist/index.cjs","type":"module","types":"./dist/lib/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/lib/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"5d06df14ebf745ea40fd664eb387e884c148411d","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview","build:lib":"vite build --mode lib && tsc --project tsconfig.lib.json","docs:merge":"node scripts/merge-docs.mjs","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"caeher","email":"eh18010@ues.edu.sv"},"_npmVersion":"10.9.8","description":"A premium React form component library with Tailwind CSS v4","directories":{},"sideEffects":false,"_nodeVersion":"22.22.2","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","react":"^19.2.5","eslint":"^10.2.1","globals":"^17.5.0","react-dom":"^19.2.5","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/node":"^25.6.0","tailwindcss":"^4.2.4","@types/react":"^19.2.14","lucide-react":"^1.14.0","@types/react-dom":"^19.2.3","semantic-release":"^24.2.1","@tailwindcss/vite":"^4.2.4","typescript-eslint":"^8.59.1","@vitejs/plugin-react":"^6.0.1","@semantic-release/git":"^10.0.1","@internationalized/date":"^3.12.1","eslint-plugin-react-hooks":"^7.1.1","@semantic-release/changelog":"^6.0.3","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^4.0.0","lucide-react":"^0.300.0 || ^1.0.0","@internationalized/date":"^3.0.0"},"peerDependenciesMeta":{"lucide-react":{"optional":true},"@internationalized/date":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-form-tokns_1.2.0_1777764403319_0.8911209340295758","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@caeher/react-form-tokns","version":"1.3.0","keywords":["react","form","components","tailwindcss","typescript","ui"],"license":"MIT","_id":"@caeher/react-form-tokns@1.3.0","maintainers":[{"name":"caeher","email":"eh18010@ues.edu.sv"}],"dist":{"shasum":"3083a7d65b48e89cada1f66ceaae959789a42e30","tarball":"https://registry.npmjs.org/@caeher/react-form-tokns/-/react-form-tokns-1.3.0.tgz","fileCount":38,"integrity":"sha512-XSOTrDty6/uWRSHKI5eC3M/iK1qcMFFNfMGNHDyZtfWcRORaAriqRBKhiosfQMuEs2HeZF7WcjFnkknZEKXi2w==","signatures":[{"sig":"MEUCIAhViFL/UJR0gHmZLiTm/ktsPdccDg24RD8xVu/b+cZ4AiEA7zZLEsy3iaQb5qoZ16hYN7sbykzXrsi7fAS2VLcJSL0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":594312},"main":"./dist/index.cjs","type":"module","types":"./dist/lib/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/lib/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"f1656361fb76bed41c6ed125742bd75781100b02","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview","build:lib":"vite build --mode lib && tsc --project tsconfig.lib.json","docs:merge":"node scripts/merge-docs.mjs","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"caeher","email":"eh18010@ues.edu.sv"},"_npmVersion":"10.9.8","description":"A premium React form component library with Tailwind CSS v4","directories":{},"sideEffects":false,"_nodeVersion":"22.22.2","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","react":"^19.2.5","eslint":"^10.2.1","globals":"^17.5.0","react-dom":"^19.2.5","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/node":"^25.6.0","tailwindcss":"^4.2.4","@types/react":"^19.2.14","lucide-react":"^1.14.0","@types/react-dom":"^19.2.3","semantic-release":"^24.2.1","@tailwindcss/vite":"^4.2.4","typescript-eslint":"^8.59.1","@vitejs/plugin-react":"^6.0.1","@semantic-release/git":"^10.0.1","@internationalized/date":"^3.12.1","eslint-plugin-react-hooks":"^7.1.1","@semantic-release/changelog":"^6.0.3","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^4.0.0","lucide-react":"^0.300.0 || ^1.0.0","@internationalized/date":"^3.0.0"},"peerDependenciesMeta":{"lucide-react":{"optional":true},"@internationalized/date":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-form-tokns_1.3.0_1777933673354_0.2831432499205313","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"name":"@caeher/react-form-tokns","version":"1.4.0","keywords":["react","form","components","tailwindcss","typescript","ui"],"license":"MIT","_id":"@caeher/react-form-tokns@1.4.0","maintainers":[{"name":"caeher","email":"eh18010@ues.edu.sv"}],"dist":{"shasum":"431dd8221b3e47683363e34462fa140b295130eb","tarball":"https://registry.npmjs.org/@caeher/react-form-tokns/-/react-form-tokns-1.4.0.tgz","fileCount":44,"integrity":"sha512-YI34k3BCi8DAANqRD0IwEyRIOXuUR7tYCNWlMjTLxu8/owMWuLHCR9UsoDDXbvoXU4puHot8v+E3CV5er+nqMQ==","signatures":[{"sig":"MEUCIQDRtAH45irZ+etLrr+s9R/3GGDHefa9WH6cuja/6sOyDwIgdByTBU/t1qWyGFm10nJs1BcaRUGGekwN2gNeGQBdAHM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":819376},"main":"./dist/index.cjs","type":"module","types":"./dist/lib/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/lib/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"40d15b2e6fb86c8c552f4495a46c49a487bddb37","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview","build:lib":"vite build --mode lib && tsc --project tsconfig.lib.json","docs:merge":"node scripts/merge-docs.mjs","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"caeher","email":"eh18010@ues.edu.sv"},"_npmVersion":"10.9.8","description":"A premium React form component library with Tailwind CSS v4","directories":{},"sideEffects":false,"_nodeVersion":"22.22.2","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","react":"^19.2.5","eslint":"^10.2.1","globals":"^17.5.0","react-dom":"^19.2.5","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/node":"^25.6.0","tailwindcss":"^4.2.4","@types/react":"^19.2.14","lucide-react":"^1.14.0","@types/react-dom":"^19.2.3","semantic-release":"^24.2.1","@tailwindcss/vite":"^4.2.4","typescript-eslint":"^8.59.1","@vitejs/plugin-react":"^6.0.1","@semantic-release/git":"^10.0.1","@internationalized/date":"^3.12.1","eslint-plugin-react-hooks":"^7.1.1","@semantic-release/changelog":"^6.0.3","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^4.0.0","lucide-react":"^0.300.0 || ^1.0.0","@internationalized/date":"^3.0.0"},"peerDependenciesMeta":{"lucide-react":{"optional":true},"@internationalized/date":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-form-tokns_1.4.0_1777958046017_0.6543478671764538","host":"s3://npm-registry-packages-npm-production"}},"1.4.1":{"name":"@caeher/react-form-tokns","version":"1.4.1","keywords":["react","form","components","tailwindcss","typescript","ui"],"license":"MIT","_id":"@caeher/react-form-tokns@1.4.1","maintainers":[{"name":"caeher","email":"eh18010@ues.edu.sv"}],"dist":{"shasum":"b3a6f013f772c18e158eaa90154866f288caed1c","tarball":"https://registry.npmjs.org/@caeher/react-form-tokns/-/react-form-tokns-1.4.1.tgz","fileCount":45,"integrity":"sha512-s7R1IRD7SucAKumbZ1R99l9parhDi+nEseNZkonGIwwNBoonNOrEx2DieUaOVoAh56F/ePF2ymdMAcio6ZMSAg==","signatures":[{"sig":"MEUCIQDjIcQ6pBwako5QoWvMborqgv1VeC8XtbbFEzt0wzIkxwIgMMPICMSsgNTpmtxodteQC0gcOoWKrJR4BOYzFJ33Rdo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":881123},"main":"./dist/index.cjs","type":"module","types":"./dist/lib/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/lib/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"aa978175d5b906b28d4b8a7b4af0a26fb34f6aef","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview","build:lib":"vite build --mode lib && tsc --project tsconfig.lib.json","docs:merge":"node scripts/merge-docs.mjs","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"caeher","email":"eh18010@ues.edu.sv"},"_npmVersion":"10.9.8","description":"A premium React form component library with Tailwind CSS v4","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.22.2","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","react":"^19.2.5","eslint":"^10.2.1","globals":"^17.5.0","react-dom":"^19.2.5","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/node":"^25.6.0","tailwindcss":"^4.2.4","@types/react":"^19.2.14","lucide-react":"^1.14.0","@types/react-dom":"^19.2.3","semantic-release":"^24.2.1","@tailwindcss/vite":"^4.2.4","typescript-eslint":"^8.59.1","@vitejs/plugin-react":"^6.0.1","@semantic-release/git":"^10.0.1","@internationalized/date":"^3.12.1","eslint-plugin-react-hooks":"^7.1.1","@semantic-release/changelog":"^6.0.3","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^4.0.0","lucide-react":"^0.300.0 || ^1.0.0","@internationalized/date":"^3.0.0"},"peerDependenciesMeta":{"lucide-react":{"optional":true},"@internationalized/date":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-form-tokns_1.4.1_1777974416850_0.7677415175010265","host":"s3://npm-registry-packages-npm-production"}},"1.4.2":{"name":"@caeher/react-form-tokns","version":"1.4.2","keywords":["react","form","components","tailwindcss","typescript","ui"],"license":"MIT","_id":"@caeher/react-form-tokns@1.4.2","maintainers":[{"name":"caeher","email":"eh18010@ues.edu.sv"}],"dist":{"shasum":"1295495493fcec16ba05036b9f9c679246466ce1","tarball":"https://registry.npmjs.org/@caeher/react-form-tokns/-/react-form-tokns-1.4.2.tgz","fileCount":44,"integrity":"sha512-BbfsszesiirXq12qNAgU3YprG04t3eHKi6hQ6JMPk/ZIziyesMDF1yR995XsPZfM0S4gfqf7YcIc4bKnUintDw==","signatures":[{"sig":"MEQCIG6tXQ5dP/Lg4LeqGfwveamI9tr/FVM64yVbfavftNukAiA4zqhoZJniqzrzf6dycAGc0k6TLUfnHJ2jZjhHLTLefA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":949437},"main":"./dist/index.cjs","type":"module","types":"./dist/lib/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/lib/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"a792dad1d4774b01edec227b3d34f1b628b2a03c","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview","build:lib":"vite build --mode lib && tsc --project tsconfig.lib.json","docs:merge":"node scripts/merge-docs.mjs","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"caeher","email":"eh18010@ues.edu.sv"},"_npmVersion":"10.9.8","description":"A premium React form component library with Tailwind CSS v4","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.22.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","react":"^19.2.5","eslint":"^10.2.1","globals":"^17.5.0","react-dom":"^19.2.5","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/node":"^25.6.0","tailwindcss":"^4.2.4","@types/react":"^19.2.14","lucide-react":"^1.14.0","@types/react-dom":"^19.2.3","semantic-release":"^24.2.1","@tailwindcss/vite":"^4.2.4","typescript-eslint":"^8.59.1","@vitejs/plugin-react":"^6.0.1","@semantic-release/git":"^10.0.1","@internationalized/date":"^3.12.1","eslint-plugin-react-hooks":"^7.1.1","@semantic-release/changelog":"^6.0.3","eslint-plugin-react-refresh":"^0.5.2","vite-plugin-css-injected-by-js":"^5.0.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^4.0.0","lucide-react":"^0.300.0 || ^1.0.0","@internationalized/date":"^3.0.0"},"peerDependenciesMeta":{"lucide-react":{"optional":true},"@internationalized/date":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-form-tokns_1.4.2_1777976075093_0.1413642222957805","host":"s3://npm-registry-packages-npm-production"}},"1.5.0":{"name":"@caeher/react-form-tokns","version":"1.5.0","type":"module","description":"A premium React form component library with Tailwind CSS v4","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/lib/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/lib/index.d.ts"}},"scripts":{"dev":"vite","playground":"vite","build":"tsc -b && vite build","build:lib":"vite build --mode lib && tsc --project tsconfig.lib.json","lint":"eslint .","preview":"vite preview","docs:merge":"node scripts/merge-docs.mjs","prepublishOnly":"npm run build:lib"},"peerDependencies":{"@internationalized/date":"^3.0.0","lucide-react":"^0.300.0 || ^1.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^4.0.0"},"peerDependenciesMeta":{"@internationalized/date":{"optional":true},"lucide-react":{"optional":true}},"devDependencies":{"@eslint/js":"^10.0.1","@internationalized/date":"^3.12.1","@semantic-release/changelog":"^6.0.3","@semantic-release/git":"^10.0.1","@tailwindcss/vite":"^4.2.4","@types/node":"^25.6.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint":"^10.2.1","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.2","globals":"^17.5.0","lucide-react":"^1.14.0","react":"^19.2.5","react-dom":"^19.2.5","semantic-release":"^24.2.1","tailwindcss":"^4.2.4","typescript":"^6.0.3","typescript-eslint":"^8.59.1","vite":"^8.0.10","vite-plugin-css-injected-by-js":"^5.0.1"},"keywords":["react","form","components","tailwindcss","typescript","ui"],"license":"MIT","publishConfig":{"access":"public"},"sideEffects":["**/*.css"],"packageManager":"pnpm@9.15.4","_id":"@caeher/react-form-tokns@1.5.0","gitHead":"b2805dfeeb70d193a00eee641430fa1b50228cbc","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-P2fVR93g5V4JNSIdflvU97Y/LkhjLJLklh7OYHlLwv9px8OrKgWKaOKbtd9gYQbpsEmXlgmOv8D6ZlqiENkPFw==","shasum":"d6eaf36d4191d6d451c02a266a67b779632dee07","tarball":"https://registry.npmjs.org/@caeher/react-form-tokns/-/react-form-tokns-1.5.0.tgz","fileCount":44,"unpackedSize":1011915,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGe5zyi/zmxt7XWVJbEliotgzp3SAE8mOIn6o8qwebetAiBIplzUUyieQZ9i0pVfjDNvWpYmsaS/dTU6bt8MZpfoig=="}]},"_npmUser":{"name":"caeher","email":"eh18010@ues.edu.sv"},"directories":{},"maintainers":[{"name":"caeher","email":"eh18010@ues.edu.sv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-form-tokns_1.5.0_1778890076767_0.11701999575188538"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-02T23:13:31.611Z","modified":"2026-05-16T00:07:57.331Z","1.1.0":"2026-05-02T23:13:31.819Z","1.2.0":"2026-05-02T23:26:43.461Z","1.3.0":"2026-05-04T22:27:53.507Z","1.4.0":"2026-05-05T05:14:06.257Z","1.4.1":"2026-05-05T09:46:57.014Z","1.4.2":"2026-05-05T10:14:35.288Z","1.5.0":"2026-05-16T00:07:57.218Z"},"license":"MIT","keywords":["react","form","components","tailwindcss","typescript","ui"],"description":"A premium React form component library with Tailwind CSS v4","maintainers":[{"name":"caeher","email":"eh18010@ues.edu.sv"}],"readme":"# Form Maker Design System\n\nA high-performance, accessible, and themeable form component library built with React 19, Vite 8, TypeScript 6, and Tailwind CSS v4.\n\n## Overview\n\nForm Maker is an evolution of standard form controls, focusing on deep accessibility (ARIA, focus management), robust data parsing (dates/times), and premium techno-industrial aesthetics. Every component follows a strict architectural pattern ensuring consistency across the entire system.\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm install @caeher/react-form-tokns\n```\n\n### Tailwind CSS Setup\n\nThis library is built with **Tailwind CSS v4**. To ensure the library's styles are correctly applied in your project, you must tell Tailwind to scan the package for utility classes.\n\nAdd the `@source` directive to your main CSS file (e.g., `app.css` or `index.css`):\n\n```css\n@import \"tailwindcss\";\n@source \"../node_modules/@caeher/react-form-tokns\";\n```\n\n### Library Usage\n\nThis library follows a **controlled component** pattern. Each field expects a `value` and an `onChange` handler that receives a synthetic event object. This allows for seamless integration with state management libraries or standard React state.\n\nThe library also supports **inline layouts** via the `inline` prop, allowing you to switch between vertical and horizontal alignments effortlessly.\n\n## Playground\n\nPut the library into practice with this comprehensive example. Copy and paste this into your project to see the components in action:\n\n```tsx\nimport { useState } from 'react';\nimport { \n  TextField, \n  SelectField, \n  CalendarField, \n  SwitchField, \n  PhoneField,\n  Mail,\n  User\n} from '@caeher/react-form-tokns';\n\nexport function RegistrationForm() {\n  const [formData, setFormData] = useState({\n    fullName: '',\n    email: '',\n    role: 'developer',\n    birthDate: '',\n    phone: '',\n    newsletter: true\n  });\n\n  const handleChange = (e: any) => {\n    const { name, value, type, checked } = e.target;\n    setFormData(prev => ({\n      ...prev,\n      [name]: type === 'checkbox' ? checked : value\n    }));\n  };\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    console.log('Form Submitted:', formData);\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"max-w-2xl mx-auto p-8 space-y-6 bg-slate-900 rounded-2xl border border-white/10\">\n      <h2 className=\"text-2xl font-bold text-white mb-6\">User Registration</h2>\n      \n      <div className=\"grid gap-6 sm:grid-cols-2\">\n        <TextField\n          label=\"Full Name\"\n          name=\"fullName\"\n          value={formData.fullName}\n          onChange={handleChange}\n          placeholder=\"John Doe\"\n          icon={User}\n          hint=\"As it appears on your ID\"\n        />\n        \n        <TextField\n          label=\"Email Address\"\n          name=\"email\"\n          type=\"email\"\n          value={formData.email}\n          onChange={handleChange}\n          placeholder=\"john@example.com\"\n          icon={Mail}\n        />\n      </div>\n\n      <SelectField\n        label=\"Primary Role\"\n        name=\"role\"\n        value={formData.role}\n        onChange={handleChange}\n        options={[\n          { label: 'Developer', value: 'developer' },\n          { label: 'Designer', value: 'designer' },\n          { label: 'Manager', value: 'manager' }\n        ]}\n      />\n\n      <div className=\"grid gap-6 sm:grid-cols-2\">\n        <CalendarField\n          label=\"Date of Birth\"\n          name=\"birthDate\"\n          value={formData.birthDate}\n          onChange={handleChange}\n        />\n        \n        <PhoneField\n          label=\"Phone Number\"\n          name=\"phone\"\n          value={formData.phone}\n          onChange={handleChange}\n        />\n      </div>\n\n      <SwitchField\n        inline\n        label=\"Subscribe to newsletter\"\n        name=\"newsletter\"\n        checked={formData.newsletter}\n        onChange={handleChange}\n      />\n\n      <button \n        type=\"submit\"\n        className=\"w-full py-3 bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-bold rounded-lg transition-colors\"\n      >\n        Complete Registration\n      </button>\n    </form>\n  );\n}\n```\n\n\n## Tech Stack\n\n- **Core:** React 19 (Functional Components, Hooks)\n- **Language:** TypeScript 6 (Strict Mode)\n- **Build Tool:** Vite 8\n- **Styling:** Tailwind CSS v4 (Vanilla CSS variables, Modern Tokens)\n- **Icons:** Lucide React\n- **Date/Time:** `@internationalized/date`\n\n## Project Structure\n\n```text\nform-maker/\n├── .github/workflows/\n│   ├── ci.yml              # Lint and Build on PRs\n│   └── release.yml         # Semantic Release on Main\n├── src/\n│   ├── components/\n│   │   ├── forms/          # Form-specific components\n│   │   │   ├── utils/      # Parsing and math helpers\n│   │   │   └── index.ts    # Barrel export for all fields\n│   │   └── ui/             # Primitive UI components (overlays, portals)\n│   ├── App.tsx             # Interactive preview gallery\n│   └── index.css           # Global design tokens and animations\n├── .releaserc.json         # Semantic release configuration\n└── package.json            # Dependencies and versioning\n```\n\n## Development and CI\n\nGitHub Actions runs the same checks as below on every push and pull request to `main` / `master` (see `.github/workflows/ci.yml`).\n\n**Requirements:** Node.js **22** (matches CI).\n\n**Reproduce CI locally** (recommended before pushing):\n\n```bash\nnpm ci\nnpm run lint\nnpm run build\n```\n\n`npm ci` installs exactly what is in `package-lock.json`. If you change `package.json`, refresh the lockfile with `npm install` and commit the updated `package-lock.json`; otherwise CI will fail at install time.\n\n## Architecture Conventions\n\nEvery component in this library MUST adhere to the following 8 rules:\n\n1. **ForwardRef:** All form fields must wrap their primary input element with `forwardRef` to allow parent access.\n2. **Accessibility (useId):** Every field must use the `useId` hook to generate unique IDs for connecting labels, hints, and error messages.\n3. **Synthetic Event Model:** Changes are emitted via an `onChange` prop using a synthetic event object: `{ target: { name, value }, persist: () => {} }`.\n4. **State Management:** Components should be \"controlled\" by default, using `value` and `onChange`.\n5. **Layout (inline prop):** All fields support an `inline` prop for switching between vertical (standard) and horizontal (aligned) layouts.\n6. **Consistent Prop Surface:** Every field includes `label`, `hint`, `error`, and `disabled`.\n7. **Tailwind Tokens:** Use Tailwind v4 classes (e.g., `bg-slate-900/50`, `border-white/10`, `text-cyan-400`).\n8. **Composition:** Complex fields (Calendar, Datetime) are composed of smaller, reusable primitives located in `utils/`.\n\n---\n\n## Form Component Catalog\n\n### TextField\nStandard single-line text input with optional icon integration.\n**Import:** `import { TextField } from './components/forms'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `label` | `string` | - | Floating or aligned label text |\n| `hint` | `string` | - | Helpful text shown below the input |\n| `error` | `string` | - | Error message that triggers red visual state |\n| `icon` | `ElementType` | - | Lucide icon to display |\n| `iconPosition`| `'left' \\| 'right'`| `'left'` | Placement of the icon |\n\n### SearchField\nDedicated search input with a leading icon, clear action, and optional loading state.\n**Import:** `import { SearchField } from './components/forms'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `value` | `string` | - | Current search query |\n| `loading` | `boolean` | `false` | Shows a trailing spinner |\n| `clearable` | `boolean` | `true` | Enables the clear button |\n\n### SelectField\nA premium custom dropdown replacing the native `<select>`, using a Popover overlay.\n**Import:** `import { SelectField } from './components/forms'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `options` | `SelectOption[]` | `[]` | Array of `{ label, value, icon?, image? }` |\n| `placeholder` | `string` | - | Text shown when no value is selected |\n\n### ComboboxField\nSearchable single-select field for larger or more descriptive option sets.\n**Import:** `import { ComboboxField } from './components/forms'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `options` | `ComboboxOption[]` | `[]` | Array of searchable options |\n| `searchPlaceholder` | `string` | `'Filter options...'` | Placeholder for the filter input |\n| `clearable` | `boolean` | `true` | Enables quick selection reset |\n\n### MultiSelectField\nSearchable multi-select with chip-style selected values in the trigger.\n**Import:** `import { MultiSelectField } from './components/forms'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `value` | `(string \\| number)[]` | `[]` | Current selected values |\n| `maxSelections` | `number` | - | Optional selection cap |\n| `clearable` | `boolean` | `true` | Enables quick clear-all |\n\n### CalendarField\nDate picker using `@internationalized/date`. Supports strings, nulls, and standard DB formats.\n**Import:** `import { CalendarField } from './components/forms'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `value` | `string` | - | Date string in ISO format (`YYYY-MM-DD`) |\n\n### ColorPickerField\nAdvanced color selection supporting Hex, RGB, HSL, and Alpha transparency.\n**Import:** `import { ColorPickerField } from './components/forms'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `format` | `ColorFormat` | `'hex'` | `'hex' \\| 'rgb' \\| 'hsl' \\| 'hex-alpha' \\| 'rgba' \\| 'hsla'` |\n| `presets` | `string[]` | (Default Palette) | Quick-select color swatches |\n\n### UploadField\nProfessional file uploader with drag-and-drop, image previews, removable items, and optional automatic server upload.\n**Import:** `import { UploadField } from './components/forms'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `value` | `UploadFieldItem[]` | `[]` | Current selected or uploaded files |\n| `uploadUrl` | `string` | - | Enables automatic server-side upload |\n| `multiple` | `boolean` | `false` | Allows multiple file selection |\n| `maxFiles` | `number` | - | Caps how many files can be stored |\n| `previewStrategy` | `'auto' \\| 'image-only' \\| 'none'` | `'auto'` | Controls preview rendering |\n\n### PhoneField\nInternational telephone input with country dial code selection.\n**Import:** `import { PhoneField } from './components/forms'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `value` | `string` | - | Full phone value including dial code |\n| `defaultCountry` | `string` | `'US'` | Starting country selection |\n| `countries` | `PhoneCountryOption[]` | Built-in list | Custom country presets |\n\n### CurrencyField\nLocale-aware currency input with formatted display on blur.\n**Import:** `import { CurrencyField } from './components/forms'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `value` | `number \\| null` | - | Numeric currency value |\n| `currency` | `string` | `'USD'` | ISO currency code |\n| `locale` | `string` | `'en-US'` | Locale used for display formatting |\n\n---\n\n## UI Primitives\n\n### Tooltip\nFloating contextual labels.\n**Import:** `import { Tooltip } from './components/ui/Tooltip'`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `content` | `ReactNode` | - | Content to show in the tooltip |\n| `side` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'top'` | Preferred side for placement |\n\n---\n\n## Release Process\n\nThis project uses **Semantic Release** to automate versioning and changelog generation.\n\n### Commit Conventions\nCommits must follow the [Conventional Commits](https://www.conventionalcommits.org/) specification:\n\n- `fix: ...` -> Patches (0.0.1)\n- `feat: ...` -> Features (0.1.0)\n- `perf: ...` -> Performance improvements\n- `chore: ...` -> Maintenance tasks\n\nOn every push to `main`, the `Release` GitHub Action will analyze commits, determine the next version, update `package.json`, generate a `CHANGELOG.md`, and create a GitHub Release.\n","readmeFilename":"README.md"}