\n Full-stack developer passionate about building great user experiences.\n
\n
\n React\n TypeScript\n Node.js\n
\n \n \n \n \n \n );\n}\n```\n\n## šØ Theming & Customization\n\n### Brand Colors (ACOMU)\n\nThe design system uses ACOMU brand colors by default:\n\n- **Primary**: `#F28C28` (Orange)\n- **Background**: `#fbfaf7` (Warm Beige)\n\n### Customizing Colors\n\nYou can override the default colors by modifying CSS variables in your app:\n\n```css\n/* In your app's global CSS */\n:root {\n --primary: 33 89% 55%; /* HSL values */\n --background: 40 25% 98%;\n /* ... other color tokens */\n}\n```\n\n### Dark Mode\n\nDark mode is supported out of the box. Use `next-themes` or a similar solution:\n\n```tsx\nimport { ThemeProvider } from 'next-themes';\n\nfunction App({ children }) {\n return (\n \n {children}\n \n );\n}\n```\n\n## š ļø Development\n\n### Prerequisites\n\n- Node.js 18.17+\n- pnpm 8+\n\n### Available Scripts\n\n```bash\n# Development\npnpm run storybook # Run Storybook dev server (http://localhost:6006)\npnpm run build:lib # Build library for production\npnpm run build-storybook # Build Storybook for deployment\npnpm run lint # Run ESLint\n\n# Build outputs\npnpm run build:lib # Creates dist/ with:\n # - index.js (CommonJS, 136 KB)\n # - index.mjs (ES Modules, 120 KB)\n # - index.d.ts (TypeScript definitions)\n```\n\n### Project Structure\n\n```\ndesign-system/\nāāā src/\nā āāā components/\nā ā āāā ui/ # 44 shadcn/ui components\nā āāā hooks/ # React hooks (useToast, etc.)\nā āāā lib/ # Utilities (cn helper)\nā āāā stories/ # 40 Storybook stories\nā āāā styles/ # Global CSS with brand colors\nā āāā index.ts # Main entry point (all exports)\nāāā dist/ # Built library (generated)\nāāā storybook-static/ # Built Storybook (generated)\nāāā .storybook/ # Storybook configuration\nāāā tsup.config.ts # Build configuration\nāāā package.json # Package metadata\n```\n\n### Adding New Components\n\n```bash\n# Add a shadcn component\nnpx shadcn@latest add [component-name]\n\n# Export it from src/index.ts\n# Create a Storybook story in src/stories/\n# Build and test\npnpm run build:lib && pnpm run storybook\n```\n\n## š Publishing\n\n```bash\n# 1. Update version\nnpm version patch|minor|major\n\n# 2. Build\npnpm run build:lib\n\n# 3. Publish\nnpm publish\n```\n\nThe `prepublishOnly` script automatically builds before publishing.\n\n## š¤ Contributing\n\n1. Add components using `npx shadcn@latest add [component-name]`\n2. Export new components from `src/index.ts`\n3. Create Storybook stories in `src/stories/`\n4. Build and test: `pnpm run build:lib && pnpm run storybook`\n5. Ensure all components work in both light and dark modes\n\n## š Documentation\n\n- **Storybook**: Run `pnpm run storybook` to view interactive component documentation\n- **Built Storybook**: Deploy `storybook-static/` folder for team documentation\n\n## š Links\n\n- [shadcn/ui](https://ui.shadcn.com/) - Component source\n- [Radix UI](https://www.radix-ui.com/) - Accessible primitives\n- [Tailwind CSS v4](https://tailwindcss.com/) - Styling framework\n- [Storybook](https://storybook.js.org/) - Component development\n\n## š License\n\nMIT License - See LICENSE file for details\n","readmeFilename":"README.md","_rev":"1-7b5f6d7c7fc2e26528cca5205916e604"}