@mikeheinrich/adobe-xd-design-system/README.md

Adobe XD-based design system with React components and Tailwind CSS

# Adobe XD Design System Components

A production-ready React component library based on Adobe XD specifications, featuring consistent design tokens, TypeScript support, and Tailwind CSS integration.

## Features

- ✅ **Adobe XD Compliant**: Exact color values (#d6002a, #006d89) and 2px border radius
- ✅ **TypeScript Support**: Full type safety with IntelliSense
- ✅ **Tailwind CSS Ready**: Pre-configured with design tokens
- ✅ **Production Ready**: Built with Radix UI primitives for accessibility
- ✅ **Tree Shakeable**: Import only the components you need

## Installation

```bash
npm install @adobe-xd-design-system/components
```

## Quick Start

### 1. Import Components

```tsx
import { Button, ButtonGroup } from '@adobe-xd-design-system/components';
import '@adobe-xd-design-system/components/styles.css';
```

### 2. Configure Tailwind (Optional)

Extend your `tailwind.config.js`:

```javascript
const designSystemConfig = require('@adobe-xd-design-system/components/tailwind.config');

module.exports = {
  ...designSystemConfig,
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@adobe-xd-design-system/components/dist/**/*.js'
  ],
}
```

### 3. Use Components

```tsx
import { useState } from 'react';
import { Button, ButtonGroup } from '@adobe-xd-design-system/components';

function App() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <div className="p-6">
      {/* Buttons with brand colors */}
      <div className="space-x-3 mb-6">
        <Button>Primary Action</Button>
        <Button variant="outline">Secondary</Button>
        <Button variant="attention">Important</Button>
      </div>

      {/* Tab navigation */}
      <ButtonGroup 
        items={[
          { id: 'home', label: 'Home' },
          { id: 'about', label: 'About' },
          { id: 'contact', label: 'Contact' },
        ]}
        defaultActiveId={activeTab}
        onTabChange={(id) => setActiveTab(id)}
      />
    </div>
  );
}
```

## Components

### Button

Multi-variant button component with Adobe XD specifications:

```tsx
// Primary button (brand color #006d89)
<Button>Primary Action</Button>

// Outline variant
<Button variant="outline">Secondary Action</Button>

// Link variant
<Button variant="link">Link Text</Button>

// Attention variant (brand color #d6002a)
<Button variant="attention">Important Action</Button>

// With icons
<Button>
  <PlusIcon className="h-4 w-4 mr-2" />
  Add Item
</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon">⚙</Button>
```

**Props:**
- `variant`: `"default" | "outline" | "link" | "attention"`
- `size`: `"sm" | "default" | "lg" | "icon"`
- All standard HTML button attributes

### ButtonGroup

Tab-style navigation with active state styling:

```tsx
<ButtonGroup 
  items={[
    { id: 'dashboard', label: 'Dashboard' },
    { id: 'settings', label: 'Settings' },
  ]}
  defaultActiveId="dashboard"
  onTabChange={(id) => console.log('Active:', id)}
/>

// With icons
<ButtonGroup 
  items={[
    { 
      id: 'home', 
      label: 'Home', 
      icon: <HomeIcon className="h-4 w-4" /> 
    },
  ]}
/>
```

**Props:**
- `items`: Array of `{ id: string, label: ReactNode, icon?: ReactNode }`
- `defaultActiveId`: Initial active tab ID
- `onTabChange`: Callback when tab changes

## Design Tokens

The system includes consistent design tokens:

```typescript
const DESIGN_TOKENS = {
  BRAND_COLOR: '#d6002a',        // Headlines, accents
  PRIMARY_ACTION: '#006d89',     // Buttons, interactive elements
  PRIMARY_HOVER: '#00495b',      // Hover states
  BORDER_RADIUS: '2px',          // Consistent corners
  COMPONENT_HEIGHT: '30px',      // Standard button height
};
```

## CSS Variables

The package includes CSS custom properties for easy theming:

```css
:root {
  --brand-color: #d6002a;
  --primary-action: #006d89;
  --primary-hover: #00495b;
  --border-radius: 2px;
}
```

## TypeScript

Full TypeScript support with exported types:

```typescript
import type { ButtonProps, ButtonGroupProps } from '@adobe-xd-design-system/components';
```

## Peer Dependencies

- React >=16.8.0
- React DOM >=16.8.0
- Tailwind CSS >=3.0.0

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT

## Support

For issues and questions, please visit our [GitHub repository](https://github.com/your-org/adobe-xd-design-system).