npm package: @nslp/altitude
Description: React UI components for the Altitude design system
Author: North Slope Tech
Latest version: 1.0.1

# @altitude/ui

React UI components for the Altitude design system, built on top of [shadcn/ui](https://ui.shadcn.com/) and styled with Altitude design tokens.

## Installation

```bash
npm install @altitude/ui
# or
pnpm add @altitude/ui
```

## Architecture

This package combines the best of both worlds:

- **shadcn/ui**: Provides the foundation, accessibility, and component patterns
- **Altitude Design Tokens**: Replaces shadcn/ui's default colors and typography with our design system

Components are built using:
- **Radix UI**: For accessibility and behavior
- **class-variance-authority**: For type-safe variant management
- **Tailwind CSS**: For styling with Altitude design tokens

## Usage

### Button

The Button component is built on shadcn/ui's Button but styled with Altitude design tokens.

```tsx
import { Button } from '@altitude/ui';

function Example() {
  return (
    <div className="flex gap-2 flex-wrap">
      {/* Default variant */}
      <Button>Primary Button</Button>
      
      {/* Other variants */}
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
      <Button variant="destructive">Destructive</Button>
      
      {/* Different sizes */}
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra Large</Button>
      <Button size="icon">🎯</Button>
    </div>
  );
}
```

#### Button Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'link' \| 'destructive'` | `'default'` | Visual style variant |
| `size` | `'sm' \| 'default' \| 'lg' \| 'xl' \| 'icon'` | `'default'` | Size of the button |
| `asChild` | `boolean` | `false` | Render as child element (for composition) |

All standard HTML button attributes are also supported.

#### Design Token Integration

The Button component uses Altitude design tokens:

- **Colors**: `primary-*`, `neutral-*`, `semantic-error`, `base-white`
- **Typography**: `body-xs`, `body-sm`, `body-md`, `body-lg` font sizes
- **Focus states**: `primary-500` ring color
- **Hover states**: Consistent with design system color scales

### asChild Pattern

Use the `asChild` prop for composition with other components (powered by Radix UI Slot):

```tsx
import { Button } from '@altitude/ui';
import Link from 'next/link';

<Button asChild>
  <Link href="/dashboard">Go to Dashboard</Link>
</Button>
```

## shadcn/ui Integration

This package is configured to work with shadcn/ui:

- Uses the same component patterns and APIs
- Configured with `components.json` for CLI compatibility
- Can add more shadcn/ui components with: `npx shadcn@latest add [component]`
- All components are automatically styled with Altitude design tokens

## Development

```bash
# Build the package
pnpm build

# Watch for changes
pnpm dev

# Run linting
pnpm lint

# Type checking
pnpm check-types

# Add more shadcn/ui components
npx shadcn@latest add [component-name]
```

## Adding New Components

To add more shadcn/ui components:

1. Run `npx shadcn@latest add [component-name]`
2. Update the generated component to use Altitude design tokens
3. Export the component from `src/index.ts`
4. Update this README with usage examples