{"_id":"@ai-educademy/ai-ui-library","name":"@ai-educademy/ai-ui-library","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ai-educademy/ai-ui-library","version":"1.0.0","description":"Shared UI component library for AI Educademy — React, TypeScript, Tailwind CSS, Framer Motion","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"sideEffects":["**/*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint src/","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm run build","prepare":"tsup"},"repository":{"type":"git","url":"git+https://github.com/ai-educademy/ai-ui-library.git"},"keywords":["react","ui","components","tailwindcss","education","ai-educademy","design-system"],"author":{"name":"Ramesh Reddy Adutla","email":"rameshreddy.adutla@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/ai-educademy/ai-ui-library/issues"},"homepage":"https://github.com/ai-educademy/ai-ui-library#readme","peerDependencies":{"next":">=14.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@storybook/addon-essentials":"^8.6.14","@storybook/addon-interactions":"^8.6.14","@storybook/addon-themes":"^8.6.14","@storybook/react":"^8.6.14","@storybook/react-vite":"^8.6.14","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","eslint":"^9.39.3","next":"^16.1.6","react":"^19.2.4","react-dom":"^19.2.4","storybook":"^8.6.14","tsup":"^8.5.0","typescript":"^5.9.3","vite":"^7.3.1"},"dependencies":{"framer-motion":"^12.15.0","lucide-react":"^0.525.0","next-themes":"^0.4.6"},"_id":"@ai-educademy/ai-ui-library@1.0.0","gitHead":"6e90683f897137b0814741d03fd28164e393c111","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-TavikRZqMo/zBlOCZ8RSa3pcGZe7IgjGDo8omZtusFuU0QFwyliSndQTW647UwtOL3pFR0hmkA6gcDq+aHKWzw==","shasum":"f759298857d9e4e38894a63bd4ddc41d461a62da","tarball":"https://registry.npmjs.org/@ai-educademy/ai-ui-library/-/ai-ui-library-1.0.0.tgz","fileCount":9,"unpackedSize":201896,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA352nhjbR82kMehI5w1gHXPdwFOp/LRJ6huyrtxF8tmAiB1SE3/8pW2vTgeVL6IqqnhRtVNqpSAMop91s9lll0bsw=="}]},"_npmUser":{"name":"radutla","email":"ramesh.reddy01@gmail.com"},"directories":{},"maintainers":[{"name":"radutla","email":"ramesh.reddy01@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ai-ui-library_1.0.0_1772838215394_0.37132412406052295"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-06T23:03:35.293Z","1.0.0":"2026-03-06T23:03:35.536Z","modified":"2026-03-06T23:03:35.764Z"},"maintainers":[{"name":"radutla","email":"ramesh.reddy01@gmail.com"}],"description":"Shared UI component library for AI Educademy — React, TypeScript, Tailwind CSS, Framer Motion","homepage":"https://github.com/ai-educademy/ai-ui-library#readme","keywords":["react","ui","components","tailwindcss","education","ai-educademy","design-system"],"repository":{"type":"git","url":"git+https://github.com/ai-educademy/ai-ui-library.git"},"author":{"name":"Ramesh Reddy Adutla","email":"rameshreddy.adutla@gmail.com"},"bugs":{"url":"https://github.com/ai-educademy/ai-ui-library/issues"},"license":"MIT","readme":"<div align=\"center\">\n\n# 🎨 AI UI Library\n\n**The shared design system for [AI Educademy](https://openaischool.vercel.app)**\n\n[![npm version](https://img.shields.io/npm/v/@ai-educademy/ai-ui-library?color=6366f1&label=npm)](https://www.npmjs.com/package/@ai-educademy/ai-ui-library)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)\n[![Storybook](https://img.shields.io/badge/Storybook-FF4785?logo=storybook&logoColor=white)](https://ai-educademy.github.io/ai-ui-library/)\n[![CI](https://github.com/ai-educademy/ai-ui-library/actions/workflows/ci.yml/badge.svg)](https://github.com/ai-educademy/ai-ui-library/actions/workflows/ci.yml)\n[![npm downloads](https://img.shields.io/npm/dm/@ai-educademy/ai-ui-library?color=6366f1)](https://www.npmjs.com/package/@ai-educademy/ai-ui-library)\n\nA production-ready React component library built with TypeScript, Tailwind CSS, and Framer Motion. Designed as the single source of truth for UI across all AI Educademy programs.\n\nPublished via **OIDC Trusted Publishing** — zero tokens, fully automated CI/CD.\n\n[**📖 Live Storybook →**](https://ai-educademy.github.io/ai-ui-library/) · [**📦 npm →**](https://www.npmjs.com/package/@ai-educademy/ai-ui-library) · [**🚀 AI Educademy →**](https://openaischool.vercel.app)\n\n</div>\n\n---\n\n## ✨ Features\n\n- 🧩 **Composable components** — Button, Card, Badge, ThemeToggle, ScrollReveal, and more\n- 🎭 **Dark/light mode** — Built-in ThemeProvider with system preference detection\n- 🎬 **Smooth animations** — Framer Motion integration in every interactive component\n- 🎨 **Design tokens** — CSS custom properties for consistent theming\n- 📦 **Tree-shakeable** — ESM + CJS dual output via tsup\n- 🔒 **TypeScript strict** — Full type safety with exported interfaces\n- ♿ **Accessible** — Keyboard-navigable, ARIA-compliant\n- 📖 **Storybook** — Interactive component playground with docs\n\n## 📦 Installation\n\n```bash\nnpm install @ai-educademy/ai-ui-library\n```\n\n**Peer dependencies** (you likely already have these):\n\n```bash\nnpm install react react-dom next\n```\n\n## 🚀 Quick Start\n\n```tsx\nimport { Button, Card, Badge, ThemeProvider, ThemeToggle } from \"@ai-educademy/ai-ui-library\";\nimport \"@ai-educademy/ai-ui-library/styles.css\";\n\nexport default function App() {\n  return (\n    <ThemeProvider>\n      <div className=\"p-8 space-y-6\">\n        <ThemeToggle />\n\n        <Card variant=\"glass\" hover>\n          <Badge variant=\"success\">New</Badge>\n          <h2>Welcome to AI Educademy</h2>\n          <Button variant=\"primary\" size=\"lg\">\n            Start Learning →\n          </Button>\n        </Card>\n      </div>\n    </ThemeProvider>\n  );\n}\n```\n\n## 🧩 Components\n\n### `<Button />`\n\nAnimated button with multiple variants and sizes.\n\n| Prop      | Type                                                    | Default     | Description           |\n| --------- | ------------------------------------------------------- | ----------- | --------------------- |\n| `variant` | `\"primary\" \\| \"secondary\" \\| \"ghost\" \\| \"outline\" \\| \"accent\"` | `\"primary\"` | Visual style          |\n| `size`    | `\"sm\" \\| \"md\" \\| \"lg\"`                                 | `\"md\"`      | Size                  |\n| `loading` | `boolean`                                               | `false`     | Shows spinner         |\n\n### `<Card />`\n\nContainer with glassmorphism and hover effects.\n\n| Prop      | Type                                                | Default     | Description            |\n| --------- | --------------------------------------------------- | ----------- | ---------------------- |\n| `variant` | `\"default\" \\| \"elevated\" \\| \"glass\" \\| \"outline\"`  | `\"default\"` | Visual style           |\n| `hover`   | `boolean`                                           | `false`     | Enable hover animation |\n\n### `<Badge />`\n\nStatus indicator / label.\n\n| Prop      | Type                                                        | Default     | Description              |\n| --------- | ----------------------------------------------------------- | ----------- | ------------------------ |\n| `variant` | `\"default\" \\| \"success\" \\| \"warning\" \\| \"error\" \\| \"info\"` | `\"default\"` | Semantic color           |\n| `size`    | `\"sm\" \\| \"md\"`                                              | `\"sm\"`      | Size                     |\n| `color`   | `string`                                                    | —           | Custom hex color override|\n\n### `<ThemeProvider />` & `<ThemeToggle />`\n\nDark/light mode with system preference detection and localStorage persistence.\n\n### `<ScrollReveal />`\n\nIntersection Observer–powered entrance animations.\n\n### `<FloatingParticles />`\n\nAmbient animated background particles.\n\n### `<CourseProgress />` & `<WelcomeBanner />`\n\nEducation-specific components for progress tracking and personalized greetings.\n\n## 🎨 Design Tokens\n\nImport the CSS to get the full token system:\n\n```css\n@import \"@ai-educademy/ai-ui-library/styles.css\";\n```\n\n### Available tokens\n\n| Token                   | Light          | Dark           |\n| ----------------------- | -------------- | -------------- |\n| `--color-primary`       | `#6366f1`      | `#818cf8`      |\n| `--color-accent`        | `#f59e0b`      | `#fbbf24`      |\n| `--color-bg`            | `#f8fafc`      | `#0f172a`      |\n| `--color-bg-card`       | `#ffffff`      | `#1e293b`      |\n| `--color-text`          | `#0f172a`      | `#f1f5f9`      |\n| `--color-text-muted`    | `#64748b`      | `#94a3b8`      |\n| `--color-border`        | `#e2e8f0`      | `#334155`      |\n\nSee [`src/theme/tokens.css`](./src/theme/tokens.css) for the complete set.\n\n## 🏗️ Architecture\n\n```\nai-ui-library/\n├── src/\n│   ├── components/     # React components\n│   │   ├── Button.tsx\n│   │   ├── Card.tsx\n│   │   ├── Badge.tsx\n│   │   ├── ThemeProvider.tsx\n│   │   ├── ThemeToggle.tsx\n│   │   ├── ScrollReveal.tsx\n│   │   ├── FloatingParticles.tsx\n│   │   ├── CourseProgress.tsx\n│   │   └── WelcomeBanner.tsx\n│   ├── hooks/          # Custom hooks\n│   │   ├── useProgress.ts\n│   │   └── useGuestProfile.ts\n│   ├── theme/          # Design tokens\n│   │   └── tokens.css\n│   ├── utils/          # Shared utilities\n│   └── index.ts        # Public API (barrel export)\n├── .storybook/         # Storybook configuration\n├── tsup.config.ts      # Build configuration\n├── tsconfig.json       # TypeScript configuration\n└── package.json\n```\n\n## 🛠️ Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Start Storybook dev server\nnpm run storybook\n\n# Build the library\nnpm run build\n\n# Watch mode (rebuild on changes)\nnpm run dev\n```\n\n## 🌐 Used By\n\nThis library powers every repo in the [AI Educademy](https://github.com/ai-educademy) org:\n\n| Repo | Description |\n|------|-------------|\n| [`ai-platform`](https://github.com/ai-educademy/ai-platform) | Main Next.js app shell |\n| [`ai-seeds`](https://github.com/ai-educademy/ai-seeds) | 🌱 Level 1: Absolute beginners |\n| `ai-sprouts` | 🌿 Level 2: Foundations (coming soon) |\n| `ai-branches` | 🌳 Level 3: Applied AI (coming soon) |\n| `ai-canopy` | 🏕️ Level 4: Advanced (coming soon) |\n| `ai-forest` | 🌲 Level 5: Expert (coming soon) |\n\n## 🤝 Contributing\n\nWe welcome contributions! See our [Contributing Guide](CONTRIBUTING.md) for details.\n\n1. Fork the repo\n2. Create your feature branch: `git checkout -b feat/amazing-component`\n3. Add your component in `src/components/`\n4. Add a Storybook story\n5. Run `npm run build` to verify\n6. Submit a PR\n\n## 📄 License\n\nMIT © [AI Educademy](https://github.com/ai-educademy)\n","readmeFilename":"README.md","_rev":"1-88d46cb0e8558283a012dead1d302749"}