{"_id":"@aruuri/design-system","_rev":"2-48cbd3c7d22b7cf503ad4238f2215613","name":"@aruuri/design-system","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@aruuri/design-system","version":"0.1.0","_id":"@aruuri/design-system@0.1.0","maintainers":[{"name":"abshir","email":"abshir.y.ahmed@gmail.com"},{"name":"aruuri-admin","email":"admin@aruuri.so"}],"dist":{"shasum":"2ae8b2657480a95092d70ad45486922d4402d85b","tarball":"https://registry.npmjs.org/@aruuri/design-system/-/design-system-0.1.0.tgz","fileCount":16,"integrity":"sha512-9JXRaWdzr4QD79B261S98P0NruLJg4zybYzz5n9ms+NMs4rrdehaLZW8puYZajw2MbpvLQltWcEFbMsadNJpew==","signatures":[{"sig":"MEYCIQD2RuhWeueV7Q1vYqHSjIC8jgAlMK7WK+N+fWITOQ/yVwIhAPalCcwGLjU/O9WZVI+eZWM1LlsEw4EfotD3jSQAbl+L","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":264100},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./src/styles.css","./tailwind.config":"./tailwind.config.ts"},"gitHead":"f2bedd87ffa40b16e3c9949955c0a6839dfee28f","scripts":{"dev":"vite build --watch","build":"vite build","clean":"rm -rf dist","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit","build-storybook":"storybook build"},"_npmUser":{"name":"abshir","email":"abshir.y.ahmed@gmail.com"},"_npmVersion":"10.9.2","description":"Aruuri design system components","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.14.0","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.3.1","@radix-ui/react-slot":"^1.2.3","@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-toast":"^1.2.15","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-select":"^2.2.6","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.9","react":"^19.2.0","postcss":"^8.5.6","chromatic":"^13.3.0","react-dom":"^19.2.0","storybook":"^9.1.10","typescript":"^5.9.3","tailwindcss":"^4.1.14","@types/react":"^19.2.0","autoprefixer":"^10.4.21","vite-plugin-dts":"^4.5.4","@storybook/react":"^9.1.10","@types/react-dom":"^19.2.0","@tailwindcss/postcss":"^4.1.14","@aruuri/design-tokens":"workspace:*","@storybook/react-vite":"^9.1.10"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.0_1759707560449_0.24820783063333507","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@aruuri/design-system","version":"0.3.0","description":"Aruuri design system components","type":"module","sideEffects":["*.css"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./src/styles.css","./tailwind.config":"./tailwind.config.ts"},"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"vite build","dev":"vite build --watch","clean":"rm -rf dist","typecheck":"tsc --noEmit","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"@aruuri/design-tokens":"workspace:*","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-icons":"^1.3.2","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slot":"^1.2.3","@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-toast":"^1.2.15","class-variance-authority":"^0.7.1","clsx":"^2.1.1","tailwind-merge":"^3.3.1"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@storybook/react":"^9.1.10","@storybook/react-vite":"^9.1.10","@tailwindcss/vite":"^4.1.14","@types/react":"^19.2.0","@types/react-dom":"^19.2.0","chromatic":"^13.3.0","react":"^19.2.0","react-dom":"^19.2.0","storybook":"^9.1.10","tailwindcss":"^4.1.14","typescript":"^5.9.3","vite":"^7.1.9","vite-plugin-dts":"^4.5.4"},"_id":"@aruuri/design-system@0.3.0","gitHead":"0bcf3206931866bdfe32089ddd57b051cb4f5715","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-HL5bOJTOb01FrXRVW3Yo3OHCWnEItm17lUeLd+hjtmtfLe3BcdVNVTPl2umgCKbl356yGuX9291Ln7o74Bluew==","shasum":"a25db5fc63a72004ee7d53768463ca92d2cf1ba1","tarball":"https://registry.npmjs.org/@aruuri/design-system/-/design-system-0.3.0.tgz","fileCount":18,"unpackedSize":997709,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDQ9AZjmYcNZkT8kOeI2hfb9RZ2jcdS7sF7fg3U2V6G5gIgI5oBp35Sg8TF7dO8OExiWBAvmlrtaoBSsoW2fxSyN4I="}]},"_npmUser":{"name":"abshir","email":"abshir.y.ahmed@gmail.com"},"directories":{},"maintainers":[{"name":"abshir","email":"abshir.y.ahmed@gmail.com"},{"name":"aruuri-admin","email":"admin@aruuri.so"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.3.0_1760219175585_0.6578626184241694"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-05T23:39:20.392Z","modified":"2025-10-11T21:46:16.051Z","0.1.0":"2025-10-05T23:39:20.688Z","0.3.0":"2025-10-11T21:46:15.832Z"},"description":"Aruuri design system components","maintainers":[{"name":"abshir","email":"abshir.y.ahmed@gmail.com"},{"name":"aruuri-admin","email":"admin@aruuri.so"}],"readme":"# @aruuri/design-system\n\nAruuri's component library built on Radix UI with shadcn/ui architecture, powered by design tokens from Figma.\n\n## Features\n\n- 🎨 **Design Token Integration**: All colors, spacing, and typography come from `@aruuri/design-tokens`\n- 🎭 **shadcn/ui Compatible**: Uses shadcn's theming system with Tailwind v4\n- ♿ **Accessible**: Built on Radix UI primitives with WCAG 2.2 AA compliance\n- 🌗 **Dark Mode Ready**: Full theme support with `.dark` class\n- 📚 **Documented**: Storybook with interactive examples\n- 🔧 **Type-Safe**: Full TypeScript support with exported types\n\n## Installation\n\n```bash\n# In your app's package.json\npnpm add @aruuri/design-system\n```\n\n## Usage\n\n### Basic Setup\n\nImport the styles in your app's root layout or `_app`:\n\n```tsx\n// app/layout.tsx or pages/_app.tsx\nimport '@aruuri/design-system/styles.css';\n```\n\n### Using Components\n\n```tsx\nimport { Button, Card, Input } from '@aruuri/design-system';\n\nexport default function Page() {\n  return (\n    <Card>\n      <h2>Welcome</h2>\n      <Input placeholder=\"Enter your email\" />\n      <Button variant=\"primary\">Subscribe</Button>\n    </Card>\n  );\n}\n```\n\n### Dark Mode\n\nAdd the `dark` class to your root element:\n\n```tsx\n<html className=\"dark\">{/* Your app */}</html>\n```\n\n## shadcn/ui Integration\n\nThis design system uses shadcn/ui's theming architecture. All Aruuri design tokens are mapped to shadcn's CSS variables:\n\n### Theme Variables\n\n| shadcn Variable | Aruuri Token                    |\n| --------------- | ------------------------------- |\n| `--primary`     | `--colors-primary-primary-base` |\n| `--destructive` | `--colors-red-error`            |\n| `--success`     | `--colors-green-success`        |\n| `--warning`     | `--colors-yellow-warning`       |\n| `--info`        | `--colors-blue-info`            |\n| `--background`  | `--colors-neutral-neutral-0`    |\n| `--foreground`  | `--text-text-black`             |\n| `--muted`       | `--background-bg-grey`          |\n\n### Using Themed Colors\n\nAll shadcn utilities work with Aruuri tokens:\n\n```tsx\n<div className=\"bg-primary text-primary-foreground\">\n  Primary color from Aruuri tokens\n</div>\n\n<div className=\"bg-success text-success-foreground\">\n  Success color from Aruuri tokens\n</div>\n\n<div className=\"border-border bg-muted text-muted-foreground\">\n  Muted background with border\n</div>\n```\n\n### Adding shadcn Components\n\nYou can manually copy shadcn components into `src/components/` and they'll automatically use Aruuri's design tokens:\n\n1. Visit [ui.shadcn.com](https://ui.shadcn.com)\n2. Pick a component (e.g., Dialog, Select, Dropdown)\n3. Copy the code to `src/components/[ComponentName].tsx`\n4. Import and use with Aruuri's theme\n\nExample adding a Dialog:\n\n```tsx\n// src/components/Dialog.tsx\n// (copy from shadcn/ui)\n\n// The component will automatically use:\n// - Aruuri's primary colors\n// - Aruuri's spacing tokens\n// - Aruuri's border radius\n// - Aruuri's font family\n```\n\n## Available Components\n\n### Core Components\n\n- **Button**: Primary, secondary, ghost, destructive variants\n- **Card**: Content containers with optional header/footer\n- **Input**: Text inputs with validation states\n\n### Coming Soon\n\n- Dialog\n- Select\n- Dropdown Menu\n- Tooltip\n- Tabs\n- Toast notifications\n\n## Theming\n\n### Color System\n\nThe design system uses Aruuri's color palette:\n\n- **Primary**: `#ed4961` (Brand pink)\n- **Success**: `#43a047` (Green)\n- **Warning**: `#fbc02d` (Yellow)\n- **Info**: `#4285f4` (Blue)\n- **Destructive**: `#e53935` (Red)\n- **Neutral**: 9-step scale from white to dark\n\n### Typography\n\nUses `Inter Tight` font family with:\n\n- **Weights**: 400 (Regular), 500 (Medium), 600 (Semibold)\n- **Sizes**: 12px to 64px via design tokens\n- **Line Heights**: Optimized for readability (1.2 to 1.6)\n\n### Spacing\n\nUses Aruuri's spacing scale from design tokens:\n\n```tsx\n// Examples\n<div className=\"p-4\">Padding from tokens</div>\n<div className=\"gap-2\">Gap from tokens</div>\n```\n\n## Development\n\n### Running Storybook\n\n```bash\ncd packages/design-system\npnpm run storybook\n```\n\nOpen http://localhost:6006\n\n### Building\n\n```bash\npnpm run build\n```\n\nOutputs:\n\n- `dist/index.js` - Component library\n- `dist/styles.css` - Compiled styles with tokens\n\n### File Structure\n\n```\nsrc/\n  components/\n    Button.tsx       # Component implementation\n    Button.stories.tsx  # Storybook stories\n  lib/\n    utils.ts        # Utility functions (cn, etc.)\n  styles.css        # Global styles + theme mapping\n  index.ts          # Package exports\n```\n\n## Design Tokens\n\nAll styling uses CSS variables from `@aruuri/design-tokens`:\n\n```css\n/* ✅ Good - uses tokens */\n.component {\n  color: var(--text-text-primary);\n  background: var(--background-bg-white);\n}\n\n/* ❌ Bad - hardcoded values */\n.component {\n  color: #ed4961;\n  background: #ffffff;\n}\n```\n\nWith shadcn integration, you can also use utility classes:\n\n```tsx\n/* ✅ Good - shadcn utilities with tokens */\n<div className=\"bg-primary text-primary-foreground\" />\n\n/* ✅ Good - direct token variables */\n<div style={{ color: 'var(--text-text-primary)' }} />\n```\n\n## Component API\n\n### Button\n\n```tsx\n<Button\n  variant=\"primary\" | \"secondary\" | \"ghost\" | \"destructive\"\n  size=\"sm\" | \"md\" | \"lg\"\n  asChild={boolean}\n  disabled={boolean}\n>\n  Click me\n</Button>\n```\n\n### Card\n\n```tsx\n<Card>\n  <h2>Card Title</h2>\n  <p>Card content</p>\n</Card>\n```\n\n### Input\n\n```tsx\n<Input\n  type=\"text\" | \"email\" | \"password\" | \"number\"\n  placeholder=\"Enter text\"\n  disabled={boolean}\n/>\n```\n\n## Contributing\n\nSee [CONTRIBUTING.md](../../CONTRIBUTING.md) for component development guidelines.\n\n### Component Checklist\n\nBefore submitting a new component:\n\n- [ ] Uses design tokens only (no hardcoded colors/spacing)\n- [ ] Props match Figma variants\n- [ ] Accessible (keyboard + screen reader)\n- [ ] Storybook stories added\n- [ ] TypeScript types exported\n- [ ] Works in dark mode\n\n## Resources\n\n- **Storybook**: Run locally with `pnpm run storybook` or view on [Chromatic](https://chromatic.com) (links in PR comments)\n- [shadcn/ui Docs](https://ui.shadcn.com)\n- [Radix UI Docs](https://www.radix-ui.com)\n- [Figma Design File](https://figma.com/aruuri) (team access required)\n\n## License\n\n[License TBD]\n","readmeFilename":"README.md"}