npm package: @rmanor/gc-dash
Description: Modern React component library inspired by Anthropic and Perplexity design systems. Built with Emotion, TypeScript, and designed for Next.js and Vite applications.
Author: GenC Team
Latest version: 0.1.0

# GC Dash Components

A modern, production-ready React component library inspired by Anthropic's Claude and Perplexity's design systems. Built with TypeScript, Emotion CSS-in-JS, and optimized for both Next.js and Vite applications.

## ✨ Features

- **27 Production-Ready Components** - Buttons, Cards, Forms, Grids, and more
- **Next.js Compatible** - Proper Client/Server Component separation
- **TypeScript First** - Full type safety with comprehensive type definitions
- **Emotion Styling** - CSS-in-JS with excellent performance
- **Tree-Shakeable** - Import only what you need
- **Accessible** - ARIA compliant with keyboard navigation support
- **Responsive** - Mobile-first design with adaptive layouts

## 📦 Installation

```bash
npm install @rmanor/gc-dash @emotion/react clsx
# or
yarn add @genc/gc-dash @emotion/react clsx
# or
pnpm add @genc/gc-dash @emotion/react clsx
```

### Peer Dependencies

```json
{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "@emotion/react": "^11.0.0",
  "clsx": "^2.0.0"
}
```

### Optional Dependencies

```bash
# For icon support
npm install lucide-react @atlaskit/icon
```

## 🚀 Quick Start

### Basic Usage

```tsx
import { GcDashButton, GcDashCard } from '@genc/gc-dash'

function App() {
  return (
    <GcDashCard>
      <h2>Welcome to GC Dash</h2>
      <GcDashButton variant="primary">Get Started</GcDashButton>
    </GcDashCard>
  )
}
```

### Next.js Setup

#### 1. Configure Emotion

```js
// next.config.js
module.exports = {
  compiler: {
    emotion: true
  }
}
```

#### 2. Import Components

```tsx
// Client components (interactive)
'use client'
import { GcDashTabs, GcDashDropdown } from '@genc/gc-dash'

// Server components (no 'use client' needed)
import { GcDashButton, GcDashCard } from '@genc/gc-dash'
```

### Vite Setup

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin']
      }
    })
  ]
})
```

## 📚 Components

### Actions

- **GcDashButton** - Primary UI button with multiple variants
- **GcDashIconButton** - Icon-only button for compact UIs
- **GcDashAddContentButton** - Specialized button for adding content
- **GcDashModelButton** - AI model selection button

### Layout & Surfaces

- **GcDashCard** - Flexible card container with header, body, footer
- **GcDashMetricCard** - Display metrics with trends
- **GcDashBlankSlate** - Empty state component
- **GcDashFeatureCard** - Showcase features with icons

### Forms & Inputs

- **GcDashInput** - Text input with validation states
- **GcDashTextArea** - Multi-line text input
- **GcDashSelect** - Dropdown selection
- **GcDashCheckbox** - Checkbox input
- **GcDashRadio** - Radio button input
- **GcDashToggle** - Toggle switch
- **GcDashFormField** - Form field wrapper with label and validation
- **GcDashDropdown** - Advanced dropdown with search

### Navigation

- **GcDashTabs** - Tabbed navigation (underline, pill, segmented variants)
- **GcDashHeader** - Page header with search and actions
- **GcDashNavButtons** - Navigation button group
- **GcDashPlanChip** - Plan/status indicator chip

### Data Display

- **GcDashVideoGrid** - Grid layout for video content
- **GcDashCollectionGrid** - Grid for collections
- **GcDashCreatorGrid** - Grid for creator profiles
- **GcDashProjectCard** - Project display card
- **GcDashAvatar** - User avatar with status indicators
- **GcDashLabel** - Status/category labels

### Communication

- **GcDashChat** - Chat interface components
  - GcDashChatThread
  - GcDashChatMessageBubble
  - GcDashChatComposer

### Utilities

- **GcDashLoadingSpinner** - Loading indicator
- **GcDashSearchBar** - Search input with filters

## 🎨 Styling & Theming

### CSS Variables

The components use CSS variables for theming. Define these in your global styles:

```css
:root {
  /* Colors */
  --color-primary-500: #0b5cff;
  --color-primary-600: #0a52e0;
  --color-primary-700: #0948c7;
  
  --color-text-primary: #172b4d;
  --color-text-secondary: #42526e;
  --color-text-subtle: #5e6c84;
  
  --color-surface: #ffffff;
  --color-surface-raised: #f6f8fb;
  
  --color-error-500: #de350b;
  --color-warning-500: #ff991f;
  --color-success-500: #00875a;
  
  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-6: 16px;
  --space-8: 24px;
  
  /* Typography */
  --font-family-primary: 'Inter', system-ui, sans-serif;
}
```

### Style Utils

Access design tokens directly:

```tsx
import { gcDashColor, gcDashSpacing, gcDashShape } from '@genc/gc-dash'
```

## 📖 Component Examples

### Button Variants

```tsx
<GcDashButton variant="primary">Primary Action</GcDashButton>
<GcDashButton variant="secondary">Secondary</GcDashButton>
<GcDashButton variant="ghost">Ghost</GcDashButton>
<GcDashButton variant="danger">Delete</GcDashButton>
<GcDashButton variant="link">Link Style</GcDashButton>
```

### Card with All Sections

```tsx
import {
  GcDashCard,
  GcDashCardHeader,
  GcDashCardTitle,
  GcDashCardSubtitle,
  GcDashCardBody,
  GcDashCardFooter,
  GcDashButton
} from '@genc/gc-dash'

<GcDashCard interactive>
  <GcDashCardHeader>
    <div>
      <GcDashCardTitle>Project Kickoff</GcDashCardTitle>
      <GcDashCardSubtitle>Align on goals and timeline</GcDashCardSubtitle>
    </div>
    <GcDashButton variant="secondary">Edit</GcDashButton>
  </GcDashCardHeader>
  <GcDashCardBody>
    <p>Content goes here...</p>
  </GcDashCardBody>
  <GcDashCardFooter>
    <GcDashButton variant="ghost">Cancel</GcDashButton>
    <GcDashButton variant="primary">Save</GcDashButton>
  </GcDashCardFooter>
</GcDashCard>
```

### Tabs (Client Component)

```tsx
'use client'
import { GcDashTabs } from '@genc/gc-dash'

<GcDashTabs
  variant="underline"
  tabs={[
    { id: 'overview', label: 'Overview', content: <OverviewPanel /> },
    { id: 'details', label: 'Details', content: <DetailsPanel /> },
    { id: 'settings', label: 'Settings', content: <SettingsPanel /> }
  ]}
/>
```

### Form Example

```tsx
import {
  GcDashFormField,
  GcDashInput,
  GcDashTextArea,
  GcDashSelect,
  GcDashButton
} from '@genc/gc-dash'

<form>
  <GcDashFormField label="Project Name" required>
    <GcDashInput placeholder="Enter project name" />
  </GcDashFormField>
  
  <GcDashFormField label="Description">
    <GcDashTextArea rows={4} placeholder="Describe your project" />
  </GcDashFormField>
  
  <GcDashFormField label="Category">
    <GcDashSelect
      options={[
        { value: 'design', label: 'Design' },
        { value: 'dev', label: 'Development' },
        { value: 'marketing', label: 'Marketing' }
      ]}
    />
  </GcDashFormField>
  
  <GcDashButton variant="primary" type="submit">
    Create Project
  </GcDashButton>
</form>
```

## 🔧 Advanced Usage

### Custom Keyboard Navigation

```tsx
import { useGridKeyboardNavigation } from '@genc/gc-dash/hooks'

const MyGrid = () => {
  const {
    gridRef,
    focusedIndex,
    getItemProps
  } = useGridKeyboardNavigation({
    items: myItems,
    columns: 3,
    onItemActivate: (item) => console.log('Selected:', item)
  })
  
  return (
    <div ref={gridRef}>
      {myItems.map((item, index) => (
        <div key={item.id} {...getItemProps(index)}>
          {item.content}
        </div>
      ))}
    </div>
  )
}
```

## 🌐 Browser Support

- Chrome/Edge (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- iOS Safari (last 2 versions)
- Chrome Android (last 2 versions)

## 📊 Bundle Size

- **Full Library:** ~80KB (minified + gzipped)
- **Single Component:** ~5-15KB (with tree-shaking)
- **Core Utilities:** ~3KB

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

## 📄 License

MIT © GenC Team

## 🔗 Links

- [Documentation](https://github.com/genc/gc-dash)
- [Storybook](https://genc-gc-dash.vercel.app)
- [GitHub](https://github.com/genc/gc-dash)
- [NPM](https://www.npmjs.com/package/@genc/gc-dash)

## 💬 Support

- 📧 Email: support@gencapp.com
- 💬 Discord: [Join our community](https://discord.gg/genc)
- 🐛 Issues: [GitHub Issues](https://github.com/genc/gc-dash/issues)

---

**Built with ❤️ by the GenC team**