{"_id":"@alperenjs/ui-library","_rev":"6-dc544601b9584892da70fa4d75fcf035","name":"@alperenjs/ui-library","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.0":{"name":"@alperenjs/ui-library","version":"0.1.0","keywords":["react","ui","components","shadcn","tailwind","vite"],"author":{"name":"alperenjs"},"license":"MIT","_id":"@alperenjs/ui-library@0.1.0","maintainers":[{"name":"alperenjs","email":"alperensozen96@gmail.com"}],"homepage":"https://github.com/alperenjs/ui-library#readme","bugs":{"url":"https://github.com/alperenjs/ui-library/issues"},"dist":{"shasum":"577c9e798c2b7dc846d7fe4dcea215bb61fed6cf","tarball":"https://registry.npmjs.org/@alperenjs/ui-library/-/ui-library-0.1.0.tgz","fileCount":6,"integrity":"sha512-tuRUbEGChYfDeNUNDhaVU3hUT1nCiXE9IYn4ENZ96OGkUhWqHXMaavQeBYlON2/VJyDmyMORn8dCMXJsvf4QJw==","signatures":[{"sig":"MEUCIHsl0LgsNSRie+x97EleKHLhSvZugzV8j/+ujhL6icMkAiEAlVSm4nK5az5Yn7MGBLkeSkTRgoAihiKYrEtX3TCWYiI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":158225},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"2c9cd82842454f0e40e1d40de3e29c1fdacae946","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","format":"prettier --write .","preview":"vite preview","typecheck":"tsc --noEmit"},"_npmUser":{"name":"alperenjs","email":"alperensozen96@gmail.com"},"repository":{"url":"git+https://github.com/alperenjs/ui-library.git","type":"git"},"_npmVersion":"10.9.3","description":"A modern React UI component library built with Vite, shadcn/ui, and Tailwind CSS","directories":{},"_nodeVersion":"22.19.0","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.4.0","@radix-ui/react-slot":"^1.2.4","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","react":"^19.2.1","eslint":"^9.0.0","prettier":"^3.5.3","react-dom":"^19.2.1","typescript":"^5.9.2","@types/node":"^22","tailwindcss":"^4.1.13","@types/react":"^19.2.7","tw-animate-css":"^1.4.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@tailwindcss/vite":"^4.1.13","typescript-eslint":"^8.43.0","vite-tsconfig-paths":"^5.1.4","@vitejs/plugin-react":"^5.1.2","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","prettier-plugin-tailwindcss":"^0.6.11"},"peerDependencies":{"react":"^19.2.1","react-dom":"^19.2.1"},"_npmOperationalInternal":{"tmp":"tmp/ui-library_0.1.0_1768091927045_0.43399270479187435","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@alperenjs/ui-library","version":"0.1.1","keywords":["react","ui","components","shadcn","tailwind","vite"],"author":{"name":"alperenjs"},"license":"MIT","_id":"@alperenjs/ui-library@0.1.1","maintainers":[{"name":"alperenjs","email":"alperensozen96@gmail.com"}],"homepage":"https://github.com/alperenjs/ui-library#readme","bugs":{"url":"https://github.com/alperenjs/ui-library/issues"},"dist":{"shasum":"95277f60e8383dbb6a89daff1499fe4a3fcb497d","tarball":"https://registry.npmjs.org/@alperenjs/ui-library/-/ui-library-0.1.1.tgz","fileCount":6,"integrity":"sha512-ZQZv9ml1gqMKhSbjoTD6jgcd4NxB34/yZoUjO5UlXm6bfZV1xwzHwn2QEo5t9XdvUSoGDl6VvLo/w00dOx6bCw==","signatures":[{"sig":"MEUCIHaARt/gQ9Ej2Opg9LW765qtzgKNzGwl0B1SGLpoYWLBAiEAysK5T81Xw1dUd7+x12g7z6qO1kMPTFQvhZ04JXZzluw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":158255},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"2c9cd82842454f0e40e1d40de3e29c1fdacae946","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","format":"prettier --write .","preview":"vite preview","typecheck":"tsc --noEmit"},"_npmUser":{"name":"alperenjs","email":"alperensozen96@gmail.com"},"repository":{"url":"git+https://github.com/alperenjs/ui-library.git","type":"git"},"_npmVersion":"10.9.3","description":"A modern React UI component library built with Vite, shadcn/ui, and Tailwind CSS","directories":{},"_nodeVersion":"22.19.0","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.4.0","@radix-ui/react-slot":"^1.2.4","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","react":"^19.2.1","eslint":"^9.0.0","prettier":"^3.5.3","react-dom":"^19.2.1","typescript":"^5.9.2","@types/node":"^22.0.0","tailwindcss":"^4.1.13","@types/react":"^19.2.7","tw-animate-css":"^1.4.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@tailwindcss/vite":"^4.1.13","typescript-eslint":"^8.43.0","vite-tsconfig-paths":"^5.1.4","@vitejs/plugin-react":"^5.1.2","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","prettier-plugin-tailwindcss":"^0.6.11"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-library_0.1.1_1768092498252_0.6504880734791818","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@alperenjs/ui-library","version":"0.1.2","keywords":["react","ui","components","shadcn","tailwind","vite"],"author":{"name":"alperenjs"},"license":"MIT","_id":"@alperenjs/ui-library@0.1.2","maintainers":[{"name":"alperenjs","email":"alperensozen96@gmail.com"}],"homepage":"https://github.com/alperenjs/ui-library#readme","bugs":{"url":"https://github.com/alperenjs/ui-library/issues"},"dist":{"shasum":"4470b187d776e07da624ed39a6c3a15954ca8234","tarball":"https://registry.npmjs.org/@alperenjs/ui-library/-/ui-library-0.1.2.tgz","fileCount":6,"integrity":"sha512-kVt+CLnhsEF8uFifdxluXfHua+POwyeDw/IpjNW0ZAX5xZFAycTfBLYK43DHsi6aMGA2rN43t2d/CN6X6y8xCg==","signatures":[{"sig":"MEQCICkXWT/tOOWj9VNalYU0ZAkYNWlu7XwzIfoyyJHx+rdiAiBYs0CTDGE3NAZxn5KD7oC3r1Mq1IqbH/rEvFXU+wOetw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":172222},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"2c9cd82842454f0e40e1d40de3e29c1fdacae946","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","format":"prettier --write .","preview":"vite preview","typecheck":"tsc --noEmit"},"_npmUser":{"name":"alperenjs","email":"alperensozen96@gmail.com"},"repository":{"url":"git+https://github.com/alperenjs/ui-library.git","type":"git"},"_npmVersion":"10.9.3","description":"A modern React UI component library built with Vite, shadcn/ui, and Tailwind CSS","directories":{},"_nodeVersion":"22.19.0","dependencies":{"clsx":"^2.1.1","lucide-react":"^0.468.0","tailwind-merge":"^3.4.0","@radix-ui/react-slot":"^1.2.4","@radix-ui/react-label":"^2.1.1","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","react":"^19.2.1","eslint":"^9.0.0","prettier":"^3.5.3","react-dom":"^19.2.1","typescript":"^5.9.2","@types/node":"^22.0.0","tailwindcss":"^4.1.13","@types/react":"^19.2.7","tw-animate-css":"^1.4.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@tailwindcss/vite":"^4.1.13","typescript-eslint":"^8.43.0","vite-tsconfig-paths":"^5.1.4","@vitejs/plugin-react":"^5.1.2","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","prettier-plugin-tailwindcss":"^0.6.11"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-library_0.1.2_1768155600555_0.5763778963868342","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@alperenjs/ui-library","version":"0.1.3","keywords":["react","ui","components","shadcn","tailwind","vite"],"author":{"name":"alperenjs"},"license":"MIT","_id":"@alperenjs/ui-library@0.1.3","maintainers":[{"name":"alperenjs","email":"alperensozen96@gmail.com"}],"homepage":"https://github.com/alperenjs/ui-library#readme","bugs":{"url":"https://github.com/alperenjs/ui-library/issues"},"dist":{"shasum":"672d0f761a8df10ce7c21f0cce3bf210e8edbd5d","tarball":"https://registry.npmjs.org/@alperenjs/ui-library/-/ui-library-0.1.3.tgz","fileCount":6,"integrity":"sha512-MxN7edWT1ZdSR0hA39BXUb2w3C60MZ3gLWZbr5Iuq4zAyGNe93tc/AoUVBXsbsLa+ewdwDZ5Gxdj0UkWhBBE7Q==","signatures":[{"sig":"MEUCIQDHp9sZcn1yUCfUNoL67rKERup+M2ynhYZPsQBkp2dk7QIgfHYwFW2ZzAE1884zrqo1ss3072T+qSDB8llGygTPlz4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":173418},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"2c9cd82842454f0e40e1d40de3e29c1fdacae946","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","format":"prettier --write .","preview":"vite preview","typecheck":"tsc --noEmit"},"_npmUser":{"name":"alperenjs","email":"alperensozen96@gmail.com"},"repository":{"url":"git+https://github.com/alperenjs/ui-library.git","type":"git"},"_npmVersion":"10.9.3","description":"A modern React UI component library built with Vite, shadcn/ui, and Tailwind CSS","directories":{},"_nodeVersion":"22.19.0","dependencies":{"clsx":"^2.1.1","lucide-react":"^0.468.0","tailwind-merge":"^3.4.0","@radix-ui/react-slot":"^1.2.4","@radix-ui/react-label":"^2.1.1","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","react":"^19.2.1","eslint":"^9.0.0","prettier":"^3.5.3","react-dom":"^19.2.1","typescript":"^5.9.2","@types/node":"^22.0.0","tailwindcss":"^4.1.13","@types/react":"^19.2.7","tw-animate-css":"^1.4.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@tailwindcss/vite":"^4.1.13","typescript-eslint":"^8.43.0","vite-tsconfig-paths":"^5.1.4","@vitejs/plugin-react":"^5.1.2","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","prettier-plugin-tailwindcss":"^0.6.11"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-library_0.1.3_1768163908173_0.9119329803618372","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@alperenjs/ui-library","version":"0.1.4","keywords":["react","ui","components","shadcn","tailwind","vite"],"author":{"name":"alperenjs"},"license":"MIT","_id":"@alperenjs/ui-library@0.1.4","maintainers":[{"name":"alperenjs","email":"alperensozen96@gmail.com"}],"homepage":"https://github.com/alperenjs/ui-library#readme","bugs":{"url":"https://github.com/alperenjs/ui-library/issues"},"dist":{"shasum":"e3159d82e183092cb26295bf35ee764b5a3bdb48","tarball":"https://registry.npmjs.org/@alperenjs/ui-library/-/ui-library-0.1.4.tgz","fileCount":22,"integrity":"sha512-SROJnCU59+09LAGgikoU/FLh61xBZ2d2i5ZqosqPd6ZhGtI/9yYwZIa3nXTXlHrZncfjJrXS1VUM87e27FsWBQ==","signatures":[{"sig":"MEUCIBAimmXfqriySUs16zrePf/QME73Eu2+GSKJgkAO7HYGAiEAsZgjJqoddDWtbNGnnCjgTZjNz4yVnCaWvX9fo4oEQgE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":163864},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"ba047aa3966bcc7a104a72941aa79a7d10174204","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","format":"prettier --write .","preview":"vite preview","typecheck":"tsc --noEmit"},"_npmUser":{"name":"alperenjs","email":"alperensozen96@gmail.com"},"repository":{"url":"git+https://github.com/alperenjs/ui-library.git","type":"git"},"_npmVersion":"10.9.3","description":"A modern React UI component library built with Vite, shadcn/ui, and Tailwind CSS","directories":{},"_nodeVersion":"22.19.0","dependencies":{"clsx":"^2.1.1","lucide-react":"^0.468.0","tailwind-merge":"^3.4.0","@radix-ui/react-slot":"^1.2.4","@radix-ui/react-label":"^2.1.1","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","react":"^19.2.1","eslint":"^9.0.0","prettier":"^3.5.3","react-dom":"^19.2.1","typescript":"^5.9.2","@types/node":"^22.0.0","tailwindcss":"^4.1.13","@types/react":"^19.2.7","tw-animate-css":"^1.4.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@tailwindcss/vite":"^4.1.13","typescript-eslint":"^8.43.0","vite-tsconfig-paths":"^5.1.4","@vitejs/plugin-react":"^5.1.2","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","prettier-plugin-tailwindcss":"^0.6.11"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-library_0.1.4_1768167551793_0.43863330545340884","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@alperenjs/ui-library","version":"0.1.5","description":"A modern React UI component library built with Vite, shadcn/ui, and Tailwind CSS","author":{"name":"alperenjs"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alperenjs/ui-library.git"},"keywords":["react","ui","components","shadcn","tailwind","vite"],"type":"module","main":"./dist/index.umd.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"},"./style.css":"./dist/style.css"},"scripts":{"build":"vite build","dev":"vite","preview":"vite preview","typecheck":"tsc --noEmit","lint":"eslint .","format":"prettier --write ."},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@radix-ui/react-label":"^2.1.1","@radix-ui/react-slot":"^1.2.4","class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^0.468.0","tailwind-merge":"^3.4.0"},"devDependencies":{"@tailwindcss/vite":"^4.1.13","@types/node":"^22.0.0","@types/react":"^19.2.7","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.2","eslint":"^9.0.0","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","prettier":"^3.5.3","prettier-plugin-tailwindcss":"^0.6.11","react":"^19.2.1","react-dom":"^19.2.1","tailwindcss":"^4.1.13","tw-animate-css":"^1.4.0","typescript":"^5.9.2","typescript-eslint":"^8.43.0","vite":"^7.1.7","vite-plugin-dts":"^4.5.4","vite-tsconfig-paths":"^5.1.4"},"_id":"@alperenjs/ui-library@0.1.5","gitHead":"a6a64f8588d6cefd194a4ac8a88bd9b2c137d167","bugs":{"url":"https://github.com/alperenjs/ui-library/issues"},"homepage":"https://github.com/alperenjs/ui-library#readme","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-ld/IUl3SG1Ri6Xq1weAaHe13r7s97cTDPkSAX+NORk5sTJIhlvvR3H4ARWCJ6g+LY6H/3zhKSLJzidPEBBgv6g==","shasum":"269e8df2ba4654a6aa38ec16328450f9c0ea501a","tarball":"https://registry.npmjs.org/@alperenjs/ui-library/-/ui-library-0.1.5.tgz","fileCount":22,"unpackedSize":183081,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDM9sXhGRPocll6X6bpu4YAD/qbh/D2up6Cs/TIwHpXeAIhALg013M7HbOBjtbZ14OzZob7Ir+YBnLN3TYXN20MbXS5"}]},"_npmUser":{"name":"alperenjs","email":"alperensozen96@gmail.com"},"directories":{},"maintainers":[{"name":"alperenjs","email":"alperensozen96@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-library_0.1.5_1768220004013_0.02165577866270052"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-11T00:38:46.982Z","modified":"2026-01-12T12:13:24.367Z","0.1.0":"2026-01-11T00:38:47.198Z","0.1.1":"2026-01-11T00:48:18.401Z","0.1.2":"2026-01-11T18:20:00.726Z","0.1.3":"2026-01-11T20:38:28.334Z","0.1.4":"2026-01-11T21:39:11.930Z","0.1.5":"2026-01-12T12:13:24.174Z"},"bugs":{"url":"https://github.com/alperenjs/ui-library/issues"},"author":{"name":"alperenjs"},"license":"MIT","homepage":"https://github.com/alperenjs/ui-library#readme","keywords":["react","ui","components","shadcn","tailwind","vite"],"repository":{"type":"git","url":"git+https://github.com/alperenjs/ui-library.git"},"description":"A modern React UI component library built with Vite, shadcn/ui, and Tailwind CSS","maintainers":[{"name":"alperenjs","email":"alperensozen96@gmail.com"}],"readme":"# UI Library\r\n\r\nA modern React UI component library built with Vite, shadcn/ui, and Tailwind CSS.\r\n\r\n## Features\r\n\r\n- ⚡️ Built with Vite for fast development and optimized builds\r\n- 🎨 shadcn/ui components with Tailwind CSS\r\n- 📦 Library mode with ES and UMD builds\r\n- 🔷 TypeScript support with type definitions\r\n- 🎯 React 18+ and 19+ compatible\r\n- 🌙 Dark mode support\r\n- ♿️ Accessible components\r\n- 📝 TanStack Form integration ready\r\n\r\n## Why shadcn/ui?\r\n\r\nThis library is built on **shadcn/ui** principles, which means:\r\n\r\n- **Copy-paste philosophy**: Components are yours to own and customize\r\n- **Radix UI primitives**: Built on accessible, unstyled UI primitives\r\n- **Tailwind CSS**: Utility-first styling with full customization\r\n- **TypeScript**: Full type safety out of the box\r\n- **No runtime dependencies**: Components are compiled into your bundle\r\n\r\nWe use shadcn/ui's proven patterns:\r\n- `class-variance-authority` (cva) for variant management\r\n- `clsx` + `tailwind-merge` for conditional class merging\r\n- Radix UI primitives for accessibility\r\n- React Context API for form state management\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @alperenjs/ui-library\r\n```\r\n\r\n## Usage\r\n\r\n**⚠️ IMPORTANT: You must import the CSS file for styles to work!**\r\n\r\n```tsx\r\nimport { Button, Input } from '@alperenjs/ui-library'\r\nimport '@alperenjs/ui-library/style.css'  // ⚠️ Don't forget this!\r\n\r\nfunction App() {\r\n  return (\r\n    <div>\r\n      <Button variant=\"default\">Click me</Button>\r\n      <Input placeholder=\"Enter text\" />\r\n    </div>\r\n  )\r\n}\r\n```\r\n\r\n## Form Fields\r\n\r\nThis library provides two ways to create form fields:\r\n\r\n### 1. TextField Component (Recommended for most cases)\r\n\r\n**TextField** is a composed component that combines all field parts into one easy-to-use component. Perfect for standard form fields.\r\n\r\n#### Advantages:\r\n- ✅ **Quick setup**: One component, fully configured\r\n- ✅ **Consistent**: Automatic spacing and layout\r\n- ✅ **Less code**: Fewer imports and boilerplate\r\n- ✅ **Error handling**: Built-in error state management\r\n- ✅ **Accessibility**: Automatic ARIA attributes\r\n\r\n#### Example with TanStack Form and Zod:\r\n\r\n```tsx\r\nimport { useForm } from '@tanstack/react-form'\r\nimport { TextField } from '@alperenjs/ui-library'\r\nimport '@alperenjs/ui-library/style.css'\r\nimport * as z from 'zod'\r\n\r\nconst formSchema = z.object({\r\n  email: z\r\n    .string()\r\n    .min(1, 'Email is required')\r\n    .email('Please enter a valid email'),\r\n  password: z\r\n    .string()\r\n    .min(8, 'Password must be at least 8 characters'),\r\n})\r\n\r\nfunction LoginForm() {\r\n  const form = useForm({\r\n    defaultValues: {\r\n      email: '',\r\n      password: '',\r\n    },\r\n    onSubmit: async ({ value }) => {\r\n      console.log('Form submitted:', value)\r\n    },\r\n    validators: {\r\n      onChange: formSchema,\r\n    },\r\n  })\r\n\r\n  return (\r\n    <form\r\n      onSubmit={(e) => {\r\n        e.preventDefault()\r\n        form.handleSubmit()\r\n      }}\r\n    >\r\n      <form.Field name=\"email\">\r\n        {(field) => (\r\n          <TextField\r\n            label=\"Email\"\r\n            type=\"email\"\r\n            name={field.name}\r\n            value={field.state.value}\r\n            onChange={(value) => field.handleChange(value)}\r\n            onBlur={field.handleBlur}\r\n            errors={field.state.meta.errors}\r\n            description=\"Enter your email address\"\r\n            placeholder=\"email@example.com\"\r\n          />\r\n        )}\r\n      </form.Field>\r\n\r\n      <form.Field name=\"password\">\r\n        {(field) => (\r\n          <TextField\r\n            label=\"Password\"\r\n            type=\"password\"\r\n            name={field.name}\r\n            value={field.state.value}\r\n            onChange={(value) => field.handleChange(value)}\r\n            onBlur={field.handleBlur}\r\n            errors={field.state.meta.errors}\r\n            description=\"Must be at least 8 characters\"\r\n            placeholder=\"Enter your password\"\r\n          />\r\n        )}\r\n      </form.Field>\r\n\r\n      <button type=\"submit\">Submit</button>\r\n    </form>\r\n  )\r\n}\r\n```\r\n\r\n### 2. Manual Field Parts (For custom layouts)\r\n\r\nFor maximum flexibility, you can compose fields manually using individual parts. This gives you full control over the layout and behavior.\r\n\r\n#### Advantages:\r\n- ✅ **Full control**: Customize every aspect of the field\r\n- ✅ **Flexible layout**: Arrange components however you need\r\n- ✅ **Custom components**: Use any input component, not just Input\r\n- ✅ **Advanced styling**: Apply custom classes to individual parts\r\n- ✅ **Conditional rendering**: Full control over when to show/hide parts\r\n\r\n#### Example with TanStack Form and Zod:\r\n\r\n```tsx\r\nimport { useForm } from '@tanstack/react-form'\r\nimport {\r\n  FormField,\r\n  FieldWrapper,\r\n  FieldLabel,\r\n  FieldDescription,\r\n  FieldError,\r\n  Input,\r\n} from '@alperenjs/ui-library'\r\nimport '@alperenjs/ui-library/style.css'\r\nimport * as z from 'zod'\r\n\r\nconst formSchema = z.object({\r\n  email: z\r\n    .string()\r\n    .min(1, 'Email is required')\r\n    .email('Please enter a valid email'),\r\n  password: z\r\n    .string()\r\n    .min(8, 'Password must be at least 8 characters'),\r\n})\r\n\r\nfunction LoginForm() {\r\n  const form = useForm({\r\n    defaultValues: {\r\n      email: '',\r\n      password: '',\r\n    },\r\n    onSubmit: async ({ value }) => {\r\n      console.log('Form submitted:', value)\r\n    },\r\n    validators: {\r\n      onChange: formSchema,\r\n    },\r\n  })\r\n\r\n  return (\r\n    <form\r\n      onSubmit={(e) => {\r\n        e.preventDefault()\r\n        form.handleSubmit()\r\n      }}\r\n    >\r\n      <form.Field name=\"email\">\r\n        {(field) => {\r\n          const hasError = field.state.meta.errors.length > 0\r\n          \r\n          return (\r\n            <FormField name={field.name} error={field.state.meta.errors[0]}>\r\n              <FieldWrapper>\r\n                <FieldLabel>Email</FieldLabel>\r\n                <Input\r\n                  type=\"email\"\r\n                  value={field.state.value}\r\n                  onChange={(e) => field.handleChange(e.target.value)}\r\n                  onBlur={field.handleBlur}\r\n                  placeholder=\"email@example.com\"\r\n                  aria-invalid={hasError}\r\n                />\r\n                {!hasError && (\r\n                  <FieldDescription>\r\n                    Enter your email address\r\n                  </FieldDescription>\r\n                )}\r\n                <FieldError errors={field.state.meta.errors} />\r\n              </FieldWrapper>\r\n            </FormField>\r\n          )\r\n        }}\r\n      </form.Field>\r\n\r\n      <form.Field name=\"password\">\r\n        {(field) => {\r\n          const hasError = field.state.meta.errors.length > 0\r\n          \r\n          return (\r\n            <FormField name={field.name} error={field.state.meta.errors[0]}>\r\n              <FieldWrapper className=\"custom-spacing\">\r\n                <FieldLabel>Password</FieldLabel>\r\n                <Input\r\n                  type=\"password\"\r\n                  value={field.state.value}\r\n                  onChange={(e) => field.handleChange(e.target.value)}\r\n                  onBlur={field.handleBlur}\r\n                  placeholder=\"Enter your password\"\r\n                  aria-invalid={hasError}\r\n                />\r\n                {!hasError && (\r\n                  <FieldDescription icon={<CustomIcon />}>\r\n                    Must be at least 8 characters\r\n                  </FieldDescription>\r\n                )}\r\n                <FieldError errors={field.state.meta.errors} />\r\n              </FieldWrapper>\r\n            </FormField>\r\n          )\r\n        }}\r\n      </form.Field>\r\n\r\n      <button type=\"submit\">Submit</button>\r\n    </form>\r\n  )\r\n}\r\n```\r\n\r\n### When to Use Which?\r\n\r\n| Use Case | Recommendation |\r\n|----------|---------------|\r\n| Standard form fields | **TextField** - Faster, less code |\r\n| Custom layouts | **Manual parts** - Full control |\r\n| Different input types | **Manual parts** - Use any component |\r\n| Advanced styling needs | **Manual parts** - Per-component styling |\r\n| Quick prototyping | **TextField** - Get started fast |\r\n\r\n## Components\r\n\r\n### Primitives\r\n\r\n#### Button\r\n\r\nA versatile button component with multiple variants and sizes.\r\n\r\n```tsx\r\nimport { Button } from '@alperenjs/ui-library'\r\nimport '@alperenjs/ui-library/style.css'\r\n\r\n<Button variant=\"default\" size=\"default\">Click me</Button>\r\n<Button variant=\"outline\" size=\"sm\">Small</Button>\r\n<Button variant=\"destructive\" size=\"lg\">Delete</Button>\r\n```\r\n\r\n#### Input\r\n\r\nA flexible input component with validation states.\r\n\r\n```tsx\r\nimport { Input } from '@alperenjs/ui-library'\r\nimport '@alperenjs/ui-library/style.css'\r\n\r\n<Input type=\"text\" placeholder=\"Enter text\" />\r\n<Input variant=\"outline\" size=\"sm\" />\r\n```\r\n\r\n#### Label\r\n\r\nAccessible label component built on Radix UI.\r\n\r\n```tsx\r\nimport { Label } from '@alperenjs/ui-library'\r\nimport '@alperenjs/ui-library/style.css'\r\n\r\n<Label htmlFor=\"input-id\">Email</Label>\r\n```\r\n\r\n### Form Components\r\n\r\n#### TextField\r\n\r\nComposed text input field with label, description, and error handling.\r\n\r\n```tsx\r\nimport { TextField } from '@alperenjs/ui-library'\r\n\r\n<TextField\r\n  label=\"Email\"\r\n  name=\"email\"\r\n  value={value}\r\n  onChange={(value) => setValue(value)}\r\n  errors={errors}\r\n  description=\"Enter your email\"\r\n/>\r\n```\r\n\r\n#### FormField\r\n\r\nContext provider for form field state management.\r\n\r\n```tsx\r\nimport { FormField } from '@alperenjs/ui-library'\r\n\r\n<FormField name=\"email\" error={error}>\r\n  {/* Field parts */}\r\n</FormField>\r\n```\r\n\r\n#### FieldWrapper\r\n\r\nContainer component for form field spacing.\r\n\r\n```tsx\r\nimport { FieldWrapper } from '@alperenjs/ui-library'\r\n\r\n<FieldWrapper>\r\n  {/* Label, Input, Description, Error */}\r\n</FieldWrapper>\r\n```\r\n\r\n#### FieldLabel\r\n\r\nLabel component that automatically connects to form field.\r\n\r\n```tsx\r\nimport { FieldLabel } from '@alperenjs/ui-library'\r\n\r\n<FieldLabel>Email</FieldLabel>\r\n```\r\n\r\n#### FieldDescription\r\n\r\nDescription text with optional icon.\r\n\r\n```tsx\r\nimport { FieldDescription } from '@alperenjs/ui-library'\r\n\r\n<FieldDescription icon={<InfoIcon />}>\r\n  Enter your email address\r\n</FieldDescription>\r\n```\r\n\r\n#### FieldError\r\n\r\nError message display component.\r\n\r\n```tsx\r\nimport { FieldError } from '@alperenjs/ui-library'\r\n\r\n<FieldError errors={errors} />\r\n```\r\n\r\n## Development\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n## Build\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\nThis will generate:\r\n- `dist/index.es.js` - ES module build\r\n- `dist/index.umd.js` - UMD build\r\n- `dist/index.d.ts` - TypeScript definitions\r\n- `dist/style.css` - Compiled CSS\r\n\r\n## Project Structure\r\n\r\n```\r\nui-library/\r\n├── src/\r\n│   ├── components/\r\n│   │   ├── primitives/\r\n│   │   │   ├── Button.tsx\r\n│   │   │   ├── Input.tsx\r\n│   │   │   ├── Label.tsx\r\n│   │   │   └── index.ts\r\n│   │   ├── composed/\r\n│   │   │   └── fields/\r\n│   │   │       ├── TextField.tsx\r\n│   │   │       ├── FieldContext.tsx\r\n│   │   │       └── parts/\r\n│   │   │           ├── FieldWrapper.tsx\r\n│   │   │           ├── FieldLabel.tsx\r\n│   │   │           ├── FieldDescription.tsx\r\n│   │   │           └── FieldError.tsx\r\n│   │   └── index.ts\r\n│   ├── lib/\r\n│   │   └── utils.ts\r\n│   └── index.ts\r\n├── package.json\r\n├── vite.config.ts\r\n└── tsconfig.json\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}