{"_id":"@ajinkyawankhade/rids","name":"@ajinkyawankhade/rids","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.5":{"name":"@ajinkyawankhade/rids","version":"0.0.5","description":"React India Design System - A modern, accessible component library built with React, TypeScript, Tailwind CSS v4, and Radix UI","type":"module","keywords":["react","react-india-workshop","design-system","component-library","tailwind","radix-ui","typescript","ui-components"],"author":{"name":"Ajinkya Wankhade"},"license":"MIT","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./base.css":"./dist/index.css"},"scripts":{"dev":"vite","build":"tsc -b && vite build","lint":"eslint .","preview":"vite preview","prepublishOnly":"pnpm build"},"peerDependencies":{"lucide-react":"^0.548.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@hookform/resolvers":"^5.2.2","@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-icons":"^1.3.2","@radix-ui/react-label":"^2.1.7","@radix-ui/react-separator":"^1.1.7","@radix-ui/react-slot":"^1.2.3","class-variance-authority":"^0.7.1","clsx":"^2.1.1","react-hook-form":"^7.65.0","tailwind-merge":"^3.3.1","zod":"^4.1.12"},"devDependencies":{"@tailwindcss/vite":"^4.1.16","@types/node":"^24.9.1","@types/react":"^19.1.16","@types/react-dom":"^19.1.9","@vitejs/plugin-react":"^5.0.4","lucide-react":"^0.548.0","react":"^19.1.1","react-dom":"^19.1.1","tailwindcss":"^4.1.16","tw-animate-css":"^1.4.0","vite":"^7.1.7","vite-plugin-dts":"^4.5.4","vite-plugin-static-copy":"^3.1.4"},"_id":"@ajinkyawankhade/rids@0.0.5","gitHead":"cbdb0a9877f1a14856ed56b9b918886c280fad44","_nodeVersion":"24.6.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-fRpRoNbOx4yqAa3o7d5W8aFVL4/60c0u5dzy9sqfIeM5tB00m0yUBYwhkjt2+6Lqvx9SRA6skRvaW0QFmKaEQQ==","shasum":"92dc22e0bd057d68f188274358386988e2270977","tarball":"https://registry.npmjs.org/@ajinkyawankhade/rids/-/rids-0.0.5.tgz","fileCount":82,"unpackedSize":82936,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCgW3Ri2vCPJAG9VcUY4SJRoBbqTJ+lkDtKF4wLxXs6agIhAIXs+NyMFSqUHqZLy8LEoBDAAaxprwHcqGQL1X1PeuTv"}]},"_npmUser":{"name":"ajinkyawankhade","email":"ajinkyawankhade90@gmail.com"},"directories":{},"maintainers":[{"name":"ajinkyawankhade","email":"ajinkyawankhade90@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rids_0.0.5_1761811958327_0.677175126643939"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-30T08:12:38.242Z","0.0.5":"2025-10-30T08:12:38.508Z","modified":"2025-10-30T08:12:38.824Z"},"maintainers":[{"name":"ajinkyawankhade","email":"ajinkyawankhade90@gmail.com"}],"description":"React India Design System - A modern, accessible component library built with React, TypeScript, Tailwind CSS v4, and Radix UI","keywords":["react","react-india-workshop","design-system","component-library","tailwind","radix-ui","typescript","ui-components"],"author":{"name":"Ajinkya Wankhade"},"license":"MIT","readme":"# @saurabhdaware/rids\n\nReact India Design System - A modern, accessible component library built with React, TypeScript, Tailwind CSS v4, and Radix UI.\n\n## Installation\n\n```bash\nnpm install @saurabhdaware/rids\n# or\npnpm add @saurabhdaware/rids\n# or\nyarn add @saurabhdaware/rids\n```\n\n## Peer Dependencies\n\nMake sure you have these installed in your project:\n\n```bash\nnpm install react react-dom\n```\n\n## Setup\n\n### Option 1: With Tailwind CSS (Recommended)\n\nThis is the recommended approach for optimal bundle size and customization.\n\n#### 1. Install Tailwind CSS v4\n\n```bash\nnpm install tailwindcss @tailwindcss/vite\n```\n\n#### 2. Configure Vite\n\n```typescript\n// vite.config.ts\nimport tailwindcss from \"@tailwindcss/vite\";\n\nexport default {\n  plugins: [\n    tailwindcss(),\n    // ... other plugins\n  ],\n};\n```\n\n#### 3. Import Tailwind and RIDS base.css in your CSS\n\n```css\n/* src/index.css */\n@import \"tailwindcss\";\n@import \"@saurabhdaware/rids/base.css\";\n```\n\n#### 4. Configure Tailwind to scan the library\n\n```javascript\n// tailwind.config.js\nexport default {\n  content: [\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n    \"./node_modules/@saurabhdaware/rids/dist/**/*.{js,mjs}\", // 👈 Scan RIDS components\n  ],\n};\n```\n\n#### 5. Use the components\n\n```tsx\n// Import from main entry (recommended for most use cases)\nimport { Button, Card, Input } from \"@saurabhdaware/rids\";\n\nfunction App() {\n  return (\n    <Card>\n      <Input placeholder=\"Enter text\" />\n      <Button variant=\"default\">Click me</Button>\n    </Card>\n  );\n}\n```\n\n### Utilities\n\n```tsx\nimport { cn } from \"@saurabhdaware/rids\";\n\n// Merge Tailwind classes intelligently\nconst className = cn(\"px-4 py-2\", \"bg-blue-500\", userClassName);\n```\n\n## Component Examples\n\n### Button\n\n```tsx\nimport { Button } from '@saurabhdaware/rids'\n\n<Button variant=\"default\">Default</Button>\n<Button variant=\"destructive\">Delete</Button>\n<Button variant=\"outline\">Outline</Button>\n<Button variant=\"ghost\">Ghost</Button>\n<Button size=\"sm\">Small</Button>\n<Button size=\"lg\">Large</Button>\n```\n\n### Input\n\n```tsx\nimport { Input, InputField, Label } from '@saurabhdaware/rids'\n\n// With separate Label\n<>\n  <Label htmlFor=\"email\">Email</Label>\n  <Input id=\"email\" type=\"email\" placeholder=\"Enter email\" />\n</>\n\n// Or use InputField (Label + Input combined)\n<InputField\n  label=\"Email\"\n  type=\"email\"\n  placeholder=\"Enter email\"\n/>\n```\n\n### Card\n\n```tsx\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n} from \"@saurabhdaware/rids\";\n\n<Card>\n  <CardHeader>\n    <CardTitle>Card Title</CardTitle>\n    <CardDescription>Card description goes here</CardDescription>\n  </CardHeader>\n  <CardContent>Your content here</CardContent>\n  <CardFooter>Footer content</CardFooter>\n</Card>;\n```\n\n## Import Strategies\n\n### Default Import (Recommended)\n\n```tsx\nimport { Button, Card, Input } from \"@saurabhdaware/rids\";\n```\n\nUse this for convenience. Modern bundlers will tree-shake unused components automatically.\n\n## Styling & Customization\n\nAll components accept a `className` prop for custom styling:\n\n```tsx\n<Button className=\"my-custom-class\">Custom Button</Button>\n```\n\nThe library uses `tailwind-merge` internally, so your custom classes will properly override default ones.\n\n## Development\n\nTo work on this library locally:\n\n```bash\n# Install dependencies\npnpm install\n\n# Run dev server (for testing components)\npnpm dev\n\n# Build library\npnpm build\n\n# Lint\npnpm lint\n```\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n","readmeFilename":"README.md","_rev":"1-fd63dfe2ebff5a7c428fc675f54bd937"}