{"_id":"@aspireiq-design/design-system","name":"@aspireiq-design/design-system","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aspireiq-design/design-system","version":"0.1.0","private":false,"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css"},"sideEffects":["*.css","src/app/globals.css"],"scripts":{"dev":"next dev","build":"next build","start":"next start","lint":"eslint","test":"vitest","test:ui":"vitest --ui","typecheck":"tsc --noEmit","storybook":"storybook dev -p 6006","build-storybook":"storybook build","build:package":"tsup","prepublishOnly":"npm run build:package"},"dependencies":{"@hookform/resolvers":"^5.2.2","class-variance-authority":"^0.7.1","clsx":"^2.1.1","cmdk":"^1.1.1","date-fns":"^4.1.0","embla-carousel-react":"^8.6.0","lucide-react":"^0.574.0","next":"16.1.6","next-themes":"^0.4.6","radix-ui":"^1.4.3","react":"19.2.3","react-day-picker":"^9.13.2","react-dom":"19.2.3","react-hook-form":"^7.71.1","recharts":"^2.15.4","sonner":"^2.0.7","tailwind-merge":"^3.4.1","zod":"^4.3.6"},"devDependencies":{"@chromatic-com/storybook":"^5.0.1","@storybook/addon-a11y":"^10.2.9","@storybook/addon-docs":"^10.2.9","@storybook/addon-storysource":"^8.6.14","@storybook/addon-themes":"^10.2.9","@storybook/addon-vitest":"^10.2.9","@storybook/nextjs-vite":"^10.2.9","@tailwindcss/postcss":"^4","@testing-library/dom":"^10.4.1","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.3.0","@types/node":"^25.2.3","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^4.5.2","@vitest/browser-playwright":"^4.0.18","@vitest/coverage-v8":"^4.0.18","babel-plugin-react-compiler":"1.0.0","eslint":"^9","eslint-config-next":"16.1.6","eslint-plugin-storybook":"^10.2.9","jsdom":"^26.1.0","playwright":"^1.58.2","shadcn":"^3.8.5","storybook":"^10.2.9","tailwindcss":"^4","tw-animate-css":"^1.4.0","typescript":"^5.9.3","vite":"^7.3.1","vitest":"^4.0.18"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0"},"gitHead":"842f0e7de92bdac438d0a60b83b079199a611513","_id":"@aspireiq-design/design-system@0.1.0","description":"<div align=\"center\">   <img src=\"https://img.shields.io/badge/version-1.0.0-E3F1BB?style=for-the-badge&labelColor=16282D\" alt=\"version\" />   <img src=\"https://img.shields.io/badge/storybook-10.2.9-FF4785?style=for-the-badge&logo=storybook&logoColor=white\"","_nodeVersion":"24.13.1","_npmVersion":"11.8.0","dist":{"integrity":"sha512-+tbs3bt2V0e/EZeSfWqyTuNCrWrQGtn4CNGVu5NzojioLMNeUfDE63b8tL3BZz1S6ZZPAaUwduHKKWkqWzu+SA==","shasum":"08ba12df0e0680a5d1b96d64f4a47fb760eb63a5","tarball":"https://registry.npmjs.org/@aspireiq-design/design-system/-/design-system-0.1.0.tgz","fileCount":8,"unpackedSize":835219,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCXV9wtHBPfn3oyGtD1jHHYwcp+LglqSP/2dEwP6C3/hgIgajxED2IHzYqzaj7W5siBqf4LvO8b/5gY2PBYVq1ZNiA="}]},"_npmUser":{"name":"lokeshverma","email":"lokesh.verma@aspireiq.com"},"directories":{},"maintainers":[{"name":"lokeshverma","email":"lokesh.verma@aspireiq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.1.0_1771950386792_0.8394440661232547"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-24T16:26:26.672Z","0.1.0":"2026-02-24T16:26:27.055Z","modified":"2026-02-24T16:26:27.358Z"},"maintainers":[{"name":"lokeshverma","email":"lokesh.verma@aspireiq.com"}],"description":"<div align=\"center\">   <img src=\"https://img.shields.io/badge/version-1.0.0-E3F1BB?style=for-the-badge&labelColor=16282D\" alt=\"version\" />   <img src=\"https://img.shields.io/badge/storybook-10.2.9-FF4785?style=for-the-badge&logo=storybook&logoColor=white\"","readme":"# Aspire Design Story\n\n<div align=\"center\">\n  <img src=\"https://img.shields.io/badge/version-1.0.0-E3F1BB?style=for-the-badge&labelColor=16282D\" alt=\"version\" />\n  <img src=\"https://img.shields.io/badge/storybook-10.2.9-FF4785?style=for-the-badge&logo=storybook&logoColor=white\" alt=\"storybook\" />\n  <img src=\"https://img.shields.io/badge/react-19-61DAFB?style=for-the-badge&logo=react&logoColor=black\" alt=\"react\" />\n  <img src=\"https://img.shields.io/badge/typescript-5.x-3178C6?style=for-the-badge&logo=typescript&logoColor=white\" alt=\"typescript\" />\n  <img src=\"https://img.shields.io/badge/tailwind-v4-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white\" alt=\"tailwind\" />\n  <img src=\"https://img.shields.io/badge/shadcn%2Fui-latest-000000?style=for-the-badge\" alt=\"shadcn\" />\n</div>\n\n<br />\n\n<div align=\"center\">\n  <p>The official component library and design system for the <a href=\"https://aspire.io\">Aspire</a> influencer marketing platform.</p>\n  <p>Built for developers. Documented for AI agents.</p>\n</div>\n\n---\n\n## What's Inside\n\n60+ production-ready components, 80+ Storybook stories, and full design token coverage — everything a developer needs to build consistent Aspire product experiences.\n\n```\n225+ source files  ·  60+ components  ·  80+ stories  ·  5 feature domains\n```\n\n---\n\n## Quick Start\n\n```bash\n# Clone the repo\ngit clone https://github.com/aspireiq/aspire-design-story.git\ncd aspire-design-story\n\n# Install dependencies\nnpm install\n\n# Start Storybook\nnpm run storybook\n# → Opens at http://localhost:6006\n\n# Start Next.js dev server\nnpm run dev\n# → Opens at http://localhost:3000\n```\n\n---\n\n## Stack\n\n| Technology | Version | Purpose |\n|-----------|---------|---------|\n| [Next.js](https://nextjs.org) | 16.x | Framework |\n| [React](https://react.dev) | 19.x | UI library |\n| [TypeScript](https://typescriptlang.org) | 5.x | Type safety |\n| [Tailwind CSS](https://tailwindcss.com) | v4 | Styling |\n| [shadcn/ui](https://ui.shadcn.com) | latest | Component primitives |\n| [shadcn Studio](https://shadcnstudio.com) | Pro | Enhanced components & blocks |\n| [Storybook](https://storybook.js.org) | 10.2.9 | Component documentation |\n| [Lucide React](https://lucide.dev) | latest | Icons |\n| [Recharts](https://recharts.org) | latest | Data visualization |\n\n---\n\n## Project Structure\n\n```\naspire-design-story/\n├── .storybook/\n│   ├── main.js              # Storybook config, webpack aliases, addons\n│   ├── preview.tsx          # Global decorators, dark mode, theme\n│   └── manager.ts           # Aspire-branded sidebar theme\n│\n├── src/\n│   ├── app/\n│   │   ├── globals.css      # ← All design tokens live here (HSL CSS variables)\n│   │   └── layout.tsx       # Root layout\n│   │\n│   ├── components/\n│   │   ├── ui/              # shadcn/ui base primitives (43 components)\n│   │   ├── layout/          # AppShell, AppSidebar, PageHeader, AspireLogo\n│   │   ├── shared/          # Reusable Aspire components (DataTable, FilterBar, etc.)\n│   │   │   └── wizard/      # Reusable multi-step creation wizard\n│   │   ├── analytics/       # Analytics page + charts + MetricCard\n│   │   ├── campaigns/       # Campaigns page + CampaignCard + CreateCampaignWizard\n│   │   ├── contact-detail/  # 5-tab creator profile page\n│   │   ├── contacts/        # CRM contacts table page\n│   │   ├── inbox/           # Split-pane messaging\n│   │   ├── offers/          # Offers page + CreateOfferWizard\n│   │   └── settings/        # All settings sections (profile, billing, etc.)\n│   │\n│   ├── hooks/\n│   │   ├── use-sortable.ts       # Reusable table sorting\n│   │   ├── use-search-filter.ts  # Reusable search/filter\n│   │   └── use-pagination.ts     # Reusable pagination\n│   │\n│   ├── lib/\n│   │   ├── utils.ts              # cn() helper\n│   │   ├── formatters.ts         # formatK(), formatRelativeTime()\n│   │   └── constants/\n│   │       └── platforms.ts      # Platform type + color maps\n│   │\n│   └── stories/                  # Storybook stories (mirrors component structure)\n│       ├── 1. getting-started/\n│       ├── 2. foundations/\n│       ├── 3. primitives/\n│       ├── 4. components/\n│       ├── 5. layout/\n│       ├── 6. pages/\n│       └── 7. patterns/\n│\n├── CLAUDE.md                # AI agent instructions for this codebase\n├── components.json          # shadcn/ui config + studio registries\n└── package.json\n```\n\n---\n\n## Using Components\n\n### Import Pattern\n\n```tsx\n// shadcn/ui primitives → from @/components/ui/\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { Input } from '@/components/ui/input'\n\n// Aspire shared components → from @/components/shared/\nimport { DataTable } from '@/components/shared/DataTable'\nimport { FilterBar } from '@/components/shared/FilterBar'\nimport { EmptyState } from '@/components/shared/EmptyState'\nimport { StatusDot } from '@/components/shared/StatusDot'\nimport { MetricCard } from '@/components/analytics/MetricCard'\n\n// Layout → from @/components/layout/\nimport { AppShell } from '@/components/layout/AppShell'\nimport { PageHeader } from '@/components/layout/PageHeader'\n```\n\n### Common Patterns\n\n#### Page with Table\n\n```tsx\nimport { AppShell } from '@/components/layout/AppShell'\nimport { PageHeader } from '@/components/layout/PageHeader'\nimport { FilterBar } from '@/components/shared/FilterBar'\nimport { TableActionBar } from '@/components/shared/TableActionBar'\nimport { DataTable } from '@/components/shared/DataTable'\nimport { Pagination } from '@/components/shared/Pagination'\nimport { Button } from '@/components/ui/button'\n\nexport function ContactsPage() {\n  return (\n    <AppShell>\n      <PageHeader\n        title=\"Contacts\"\n        action={<Button>New Creator</Button>}\n      />\n      <FilterBar filters={filters} onFilterChange={setFilters} />\n      <TableActionBar actions={bulkActions} />\n      <DataTable data={creators} columns={columns} />\n      <Pagination\n        currentPage={currentPage}\n        totalPages={totalPages}\n        onPageChange={setCurrentPage}\n      />\n    </AppShell>\n  )\n}\n```\n\n#### Page with Cards + View Toggle\n\n```tsx\nimport { ViewToggle } from '@/components/shared/ViewToggle'\nimport { CampaignCard } from '@/components/campaigns/CampaignCard'\n\nexport function CampaignsPage() {\n  const [view, setView] = useState<'grid' | 'list'>('grid')\n\n  return (\n    <AppShell>\n      <PageHeader title=\"Campaigns\" action={<Button>Create Campaign</Button>} />\n      <div className=\"flex justify-end\">\n        <ViewToggle value={view} onChange={setView} />\n      </div>\n      {view === 'grid' ? (\n        <div className=\"grid grid-cols-3 gap-4\">\n          {campaigns.map(c => <CampaignCard key={c.id} campaign={c} />)}\n        </div>\n      ) : (\n        <DataTable data={campaigns} columns={campaignColumns} />\n      )}\n    </AppShell>\n  )\n}\n```\n\n#### Multi-Step Creation Wizard\n\n```tsx\nimport { CreationWizard } from '@/components/shared/wizard/CreationWizard'\nimport type { WizardStep } from '@/components/shared/wizard/CreationWizard'\n\nconst steps: WizardStep[] = [\n  { id: 'basics',   label: 'Campaign Basics',       component: CampaignBasicsStep   },\n  { id: 'creators', label: 'Creator Requirements',  component: CreatorRequirementsStep },\n  { id: 'terms',    label: 'Compensation & Terms',  component: CompensationStep     },\n  { id: 'advanced', label: 'Advanced Settings',     component: AdvancedStep         },\n  { id: 'review',   label: 'Review & Create',       component: ReviewStep           },\n]\n\nexport function CreateCampaignPage() {\n  return (\n    <CreationWizard\n      title=\"Create New Campaign\"\n      steps={steps}\n      onComplete={(data) => createCampaign(data)}\n      onCancel={() => router.back()}\n    />\n  )\n}\n```\n\n#### Status Indicators\n\n```tsx\nimport { StatusDot } from '@/components/shared/StatusDot'\n\n// Small colored dot with label — use this instead of Badge for row-level status\n<StatusDot status=\"active\" />      // green dot + \"Active\"\n<StatusDot status=\"paused\" />      // orange dot + \"Paused\"\n<StatusDot status=\"error\" />       // red dot + \"Error\"\n<StatusDot status=\"draft\" />       // gray dot + \"Draft\"\n<StatusDot status=\"completed\" />   // blue dot + \"Completed\"\n```\n\n#### Metric Cards\n\n```tsx\nimport { MetricCard } from '@/components/analytics/MetricCard'\n\n<MetricCard\n  label=\"Total Impressions\"\n  value=\"1.2M\"\n  trend={+12.5}          // positive = green ↑, negative = red ↓\n  sparklineData={weeklyData}\n/>\n```\n\n#### Tag Pills\n\n```tsx\nimport { TagPillGroup } from '@/components/shared/TagPillGroup'\n\n// Campaign tags (colored)\n<TagPillGroup\n  tags={['Petfluencer Perks', 'Summer Launch']}\n  variant=\"campaign\"\n/>\n\n// Group tags (colored, different palette)\n<TagPillGroup\n  tags={['Brand Ambassadors', 'VIP']}\n  variant=\"group\"\n/>\n\n// Generic tags (gray)\n<TagPillGroup\n  tags={['Partnership', 'Sponsored', 'Giveaway']}\n  variant=\"tag\"\n/>\n```\n\n#### Empty States\n\n```tsx\nimport { EmptyState } from '@/components/shared/EmptyState'\nimport { Tag } from 'lucide-react'\n\n<EmptyState\n  icon={Tag}\n  title=\"No Offers Yet\"\n  description=\"Create your first offer to start tracking affiliate performance.\"\n  action={{ label: 'Create Offer', onClick: handleCreate }}\n  learnMoreHref=\"https://help.aspire.io/offers\"\n/>\n```\n\n---\n\n## Design Tokens\n\nAll tokens are in `src/app/globals.css` as HSL CSS custom properties.\n\n### Colors\n\n```css\n/* Usage: hsl(var(--token-name)) */\n\n--background          /* Page background: white / dark: near-black     */\n--foreground          /* Primary text: warm stone dark                  */\n--primary             /* Deep dark teal #16282D — buttons, active states */\n--primary-foreground  /* White #ffffff — text on primary bg              */\n--accent              /* Lime green #E3F1BB — highlights, tags, active nav */\n--accent-foreground   /* Deep dark teal #16282D — text on accent bg      */\n--secondary           /* Subtle backgrounds                             */\n--muted               /* Muted text, disabled states                    */\n--border              /* Card borders, dividers: light gray             */\n--destructive         /* Error, delete: red #dc2626                     */\n--info                /* Informational: teal #0d9488                    */\n--success             /* Success: green #059669                         */\n--warning             /* Warning: amber #eab308                         */\n```\n\n### Typography\n\n```tsx\n// Font families\nfont-sans   → Inter\nfont-mono   → Geist Mono\n\n// Common text styles used across the system\ntext-xs     → 12px  (timestamps, helper text)\ntext-sm     → 14px  (body text, labels, table content)\ntext-base   → 16px  (card titles, nav labels)\ntext-lg     → 18px  (section headers)\ntext-xl     → 20px  (page sub-headings)\ntext-2xl    → 24px  (page titles)\ntext-3xl    → 30px  (hero headings)\n```\n\n### Border Radius\n\n```tsx\nrounded-sm   → 6px   (tags, small badges)\nrounded-md   → 8px   (inputs, buttons)\nrounded-lg   → 10px  (cards, dialogs, dropdowns)\nrounded-xl   → 14px  (large panels, sheets)\nrounded-full → 9999px (avatar circles, pill badges)\n```\n\n### Dark Mode\n\nDark mode is applied via the `.dark` class on the root element. All tokens automatically switch — no additional configuration needed.\n\n```tsx\n// In your story or component:\n<div className=\"dark\">\n  <YourComponent />\n</div>\n```\n\n---\n\n## Icons\n\nAll icons use [Lucide React](https://lucide.dev). Convention: `20px` size, `1.5px` stroke.\n\n```tsx\nimport { Users, Megaphone, BarChart3, Tag, Image, Settings } from 'lucide-react'\n\n// Standard usage\n<Users className=\"h-5 w-5\" />          // 20px\n<Megaphone className=\"h-4 w-4\" />      // 16px (inline / table)\n<Settings className=\"h-6 w-6\" />       // 24px (nav icons)\n\n// With color\n<Users className=\"h-5 w-5 text-muted-foreground\" />\n```\n\n---\n\n## Utility Functions\n\n```tsx\nimport { cn } from '@/lib/utils'\nimport { formatK, formatRelativeTime } from '@/lib/formatters'\nimport { PLATFORM_COLORS, Platform } from '@/lib/constants/platforms'\n\n// Merge classNames (handles conditional classes)\ncn('text-sm font-medium', isActive && 'text-primary')\n\n// Format large numbers\nformatK(1234567)   // → \"1.2M\"\nformatK(45300)     // → \"45.3K\"\nformatK(890)       // → \"890\"\n\n// Relative timestamps\nformatRelativeTime(new Date())             // → \"just now\"\nformatRelativeTime(new Date(Date.now() - 3600000))  // → \"1 hrs ago\"\n\n// Platform colors\nPLATFORM_COLORS['instagram']  // → \"#E1306C\"\nPLATFORM_COLORS['tiktok']     // → \"#000000\"\nPLATFORM_COLORS['youtube']    // → \"#FF0000\"\n```\n\n---\n\n## Custom Hooks\n\n```tsx\nimport { useSortable } from '@/hooks/use-sortable'\nimport { useSearchFilter } from '@/hooks/use-search-filter'\nimport { usePagination } from '@/hooks/use-pagination'\n\n// Sorting\nconst { sorted, sortKey, sortDirection, toggleSort } = useSortable(data)\n\n// Search + filter\nconst { filtered } = useSearchFilter(creators, ['name', 'handle', 'email'])\n\n// Pagination\nconst { paginated, currentPage, totalPages, setPage } = usePagination(data, 50)\n```\n\n---\n\n## Storybook Structure\n\n```\n1. Getting Started    → Welcome, How to Use, Component Index\n2. Foundations        → Design Tokens, Typography, Colors, Icons, Brand\n3. Primitives         → Button, Input, Badge, Avatar, Switch... (17 components)\n4. Components         → DataTable, FilterBar, Charts, EmptyState... (30+ components)\n   ├── Data Display\n   ├── Forms\n   ├── Feedback\n   ├── Navigation\n   ├── Tables\n   ├── Charts\n   └── Utilities\n5. Layout             → AppShell, AppSidebar, PageHeader, AspireLogo\n6. Pages              → Full page compositions with realistic data\n   ├── Contacts & Contact Detail\n   ├── Campaigns\n   ├── Offers\n   ├── Analytics\n   ├── Inbox\n   └── Settings (8 sections)\n7. Patterns           → Form Patterns, Table Patterns, Empty States\n```\n\nEach story has:\n- **Docs tab** — full JSDoc, props table, code snippets, usage guidelines\n- **Story tab** — interactive component with controls panel\n- **Source tab** — copy-paste ready component code\n\n---\n\n## For AI Agents\n\nSee `CLAUDE.md` in the project root for complete AI agent instructions, including component APIs, import paths, common patterns, and design token references.\n\n**Quick reference for agents:**\n\n```\nBase primitives:    @/components/ui/*\nAspire components:  @/components/shared/*\nLayout:             @/components/layout/*\nFeature pages:      @/components/[feature]/*\nUtilities:          @/lib/utils, @/lib/formatters, @/lib/constants/*\nHooks:              @/hooks/*\nTokens:             src/app/globals.css (CSS custom properties)\n```\n\n---\n\n## Development Scripts\n\n```bash\nnpm run dev          # Next.js dev server (port 3000)\nnpm run storybook    # Storybook (port 6006)\nnpm run build        # Production build\nnpm run build-storybook  # Build Storybook for deployment\nnpm run lint         # ESLint\nnpm run type-check   # TypeScript check (tsc --noEmit)\n```\n\n---\n\n## Adding a New Component\n\n1. Create the component in the appropriate directory:\n   ```bash\n   # For a new shared component\n   touch src/components/shared/MyComponent.tsx\n\n   # For a new feature component\n   touch src/components/campaigns/MyComponent.tsx\n   ```\n\n2. Add it to the barrel export (if one exists):\n   ```ts\n   // src/components/shared/index.ts\n   export { MyComponent } from './MyComponent'\n   ```\n\n3. Create the story:\n   ```bash\n   touch src/stories/4.\\ components/MyCategory/MyComponent.stories.tsx\n   ```\n\n4. Follow the story template in `src/stories/3. primitives/Button.stories.tsx`\n\n---\n\n## Adding New shadcn/ui Components\n\n```bash\n# Add a single component\nnpx shadcn@latest add [component-name]\n\n# From shadcn Studio Pro registry (requires .env with credentials)\nnpx shadcn@latest add @ss-components/[component-name]\nnpx shadcn@latest add @ss-blocks/[block-name]\n```\n\n---\n\n## Browser Support\n\n| Browser | Support |\n|---------|---------|\n| Chrome | Last 2 versions |\n| Firefox | Last 2 versions |\n| Safari | Last 2 versions |\n| Edge | Last 2 versions |\n\n---\n\n## Contributing\n\n1. Follow existing component patterns (see Button as reference)\n2. Write TypeScript — no `any` types\n3. Add a story for every new component\n4. Support dark mode with Tailwind `dark:` modifier\n5. Use Aspire CSS tokens, not raw hex values\n6. Test in both light and dark mode before submitting\n\n---\n\n<div align=\"center\">\n  <p>Built with ❤️ by Lokesh Verma (Product Designer)</p>\n  <p>\n    <a href=\"https://aspire.io\">aspire.io</a> ·\n    <a href=\"https://help.aspire.io\">Help Center</a> ·\n    <a href=\"mailto:lokesh.verma@aspireiq.com\">Contact</a>\n  </p>\n</div>\n","readmeFilename":"README.md","_rev":"1-e2c324e7f083705b481222014d02f999"}