npm package: @sigmoid-hq/design-system-v1
Description: Sigmoid Design System V1 - A comprehensive React component library
Author: Juan Lee
Latest version: 1.2.2

# @sigmoid-hq/design-system-v1

Sigmoid Design System V1 - A comprehensive React component library built with TypeScript and vanilla-extract.

## Installation

```bash
npm install @sigmoid-hq/design-system-v1
# or
yarn add @sigmoid-hq/design-system-v1
# or
pnpm add @sigmoid-hq/design-system-v1
```

## Peer Dependencies

This package requires React 19+:

```bash
npm install react@^19.0.0 react-dom@^19.0.0
```

## Usage

### Basic Example

```tsx
import { Button, Card, Input } from '@sigmoid-hq/design-system-v1';

function App() {
  return (
    <Card headline="Welcome" description="Get started with Sigmoid DS">
      <Input label="Email" placeholder="Enter your email" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}
```

### Import Styles

The design system uses vanilla-extract for styling. Import the global styles in your app entry point:

```tsx
import '@sigmoid-hq/design-system-v1/styles';
```

### Using Design Tokens

```tsx
import { vars } from '@sigmoid-hq/design-system-v1';

const customStyle = {
  color: vars.colors.primary,
  fontSize: vars.fontSizes.base,
  padding: vars.spacing["4"],
};
```

## Components

### Foundation
- `Button` - Primary action buttons with variants
- `Accordion` - Collapsible content sections
- `Stepper` - Step-by-step progress indicator
- `DateTimePicker` - Date and time selection
- `FadeInSection` - Animated fade-in sections

### Layout
- `Card` - Content container with header and actions
- `Container` - Responsive container wrapper
- `Divider` - Visual separator
- `Grid` - Flexible grid layout system
- `Stack` - Vertical/horizontal stacking

### Form
- `Input` - Text input with label and validation
- `SearchInput` - Search input with clear button
- `Textarea` - Multi-line text input
- `Checkbox` - Checkbox input
- `Radio` - Radio button group
- `Switch` - Toggle switch
- `Dropdown` - Select dropdown
- `ComboBox` - Autocomplete combobox
- `ColorPicker` - Color selection with presets and palette
- `Checklist` - Multi-select checklist

### DataDisplay
- `Avatar` - User avatar display
- `Tag` - Label/tag component
- `Table` - Data table with columns
- `List` - List component
- `EmptyState` - Empty state placeholder
- `Skeleton` - Loading skeleton
- `ProgressBar` - Progress indicator
- `BarChart` - Bar chart visualization
- `LineChart` - Line chart visualization
- `CodeBox` - Code display with syntax highlighting

### Feedback
- `Alert` - Alert messages
- `Badge` - Status badges
- `Loading` - Loading indicators
- `Modal` - Modal dialogs
- `Popover` - Popover tooltips
- `Toast` - Toast notifications
- `Tooltip` - Tooltip component

### Navigation
- `Breadcrumb` - Breadcrumb navigation
- `Menu` - Navigation menu
- `Pagination` - Page pagination
- `Tabs` - Tab navigation
- `PageIndicator` - Page indicator dots

## Storybook

View all components and their documentation in Storybook:

```bash
yarn dev
```

Then open [http://localhost:6006](http://localhost:6006)

Or visit the hosted Storybook: [https://design.sigmoid.us](https://design.sigmoid.us)

## Development

### Setup

```bash
# Install dependencies
yarn install

# Start Storybook development server
yarn dev

# Build library
yarn build:lib

# Build Storybook
yarn build:storybook
```

### Project Structure

```
src/
├── components/        # All React components
│   ├── Foundation/   # Core foundation components
│   ├── Layout/       # Layout components
│   ├── Form/         # Form input components
│   ├── DataDisplay/  # Data visualization components
│   ├── Feedback/     # User feedback components
│   └── Navigation/   # Navigation components
├── styles/            # Design tokens and global styles
│   ├── theme.css.ts  # Design system tokens
│   └── global.css.ts # Global styles and keyframes
└── index.ts          # Main export file
```

## Design Tokens

The design system provides comprehensive design tokens:

- **Colors**: Primary, accent colors, text colors, borders, backgrounds
- **Typography**: Font families (Geist, Inter, JetBrains Mono), sizes, weights, line heights
- **Spacing**: Consistent spacing scale
- **Border Radius**: Rounded corner values
- **Shadows**: Elevation shadows
- **Transitions**: Animation timing

Access tokens via `vars`:

```tsx
import { vars } from '@sigmoid-hq/design-system-v1';

// Colors
vars.colors.primary
vars.colors.accent.orange
vars.colors.text.primary

// Typography
vars.fonts.geist
vars.fontSizes.base
vars.fontWeights.medium

// Spacing
vars.spacing["4"]
vars.spacing["8"]

// Border Radius
vars.radii.md
vars.radii["2xl"]

// Shadows
vars.shadows.subtle
vars.shadows.card

// Transitions
vars.transitions.fast
vars.transitions.normal
```

## TypeScript

This package is written in TypeScript and includes type definitions. All components are fully typed.

## License

MIT

## Repository

[https://github.com/sigmoid-hq/design-system-v1](https://github.com/sigmoid-hq/design-system-v1)

## Author

**Juan Lee**
- Email: juan.lee@sigmoid.us

---

Built with ❤️ by [Sigmoid](https://sigmoid.us)