@penaprieto/design-system/README.md

Multi-brand React design system with design tokens from Figma

# @penaprieto/design-system

> Multi-brand React design system with design tokens from Figma

[![npm version](https://img.shields.io/npm/v/@penaprieto/design-system.svg)](https://www.npmjs.com/package/@penaprieto/design-system)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 🎨 Features

- 🏢 **Multi-Brand Support** - Switch between Brand A and Brand B
- 🎯 **40+ Production-Ready Components**
- 🎨 **Design Tokens from Figma**
- ♿ **Accessibility First** - WCAG 2.1 AA compliant
- 🔧 **TypeScript Native**
- 🚀 **Tree-Shakeable**

## 📦 Installation

```bash
npm install @penaprieto/design-system
# or
yarn add @penaprieto/design-system
# or
pnpm add @penaprieto/design-system
```

## 🚀 Quick Start

### Basic Usage

```tsx
import { Button, Card, Badge } from '@penaprieto/design-system';
import '@penaprieto/design-system/BrandA.css'; // Import Brand A styles

function App() {
  return (
    <Card>
      <Badge variant="success">New</Badge>
      <h2>Welcome</h2>
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}
```

### Multi-Brand Usage

```tsx
// Brand A (Blue + Pink + Satoshi)
import '@penaprieto/design-system/BrandA.css';

// Or Brand B (Green + Orange + Outfit)
import '@penaprieto/design-system/BrandB.css';
```

### Using Design Tokens

```tsx
// Import tokens as JavaScript
import tokensA from '@penaprieto/design-system/tokens/BrandA.js';
import tokensB from '@penaprieto/design-system/tokens/BrandB.js';

// Or as JSON
import tokensJSON from '@penaprieto/design-system/tokens/BrandA.json';
```

## 📚 Available Components

### Core
- Button, Icon, Avatar, Badge, Tag, Pill

### Forms
- TextField, Textarea, Checkbox, Radio, RadioGroup, RadioCard, Switch, Select, Dropdown, Combobox, DatePicker, TimePicker, FileUpload, OTPInput

### Layout
- Card, Modal, Drawer, Accordion, Tabs, Divider

### Navigation
- Header, Footer, Breadcrumb, Pagination, Menu, Stepper

### Feedback
- Alert, Toast, Tooltip, Popover, Spinner, Skeleton, EmptyState

### Data Display
- List, ListItem, Image, Rating, Carousel

## 🎨 Brands

### Brand A
- **Primary Color:** Blue (#0059cd)
- **Accent Color:** Pink (#d32e58)
- **Typography:** Satoshi

### Brand B
- **Primary Color:** Green (#38d373)
- **Accent Color:** Orange (#ffba24)
- **Typography:** Outfit

## 📖 Documentation

- **Storybook:** [View Components](https://your-storybook-url.com)
- **GitHub:** [Repository](https://github.com/Penaprieto/designsystem)

## 🔧 TypeScript Support

All components are written in TypeScript and include type definitions.

```tsx
import { ButtonProps } from '@penaprieto/design-system';

const props: ButtonProps = {
  variant: 'primary',
  size: 'medium',
  onClick: () => console.log('Clicked!'),
};
```

## 📄 License

MIT © Penaprieto

## 🤝 Contributing

Contributions are welcome! Please read our [contributing guidelines](https://github.com/Penaprieto/designsystem/blob/main/CONTRIBUTING.md).

## 📞 Support

- **Issues:** [GitHub Issues](https://github.com/Penaprieto/designsystem/issues)
- **Discussions:** [GitHub Discussions](https://github.com/Penaprieto/designsystem/discussions)