# @designsystem_test/vue

Vue 3 component library for the design system.

> **Note**: This package contains Vue 3 implementations of all 36 design system components, matching the React package functionality.

## Installation

```bash
npm install @designsystem_test/vue @designsystem_test/tokens
```

## Usage

```vue
<script setup lang="ts">
import { TextButton, Navigation } from '@designsystem_test/vue';
import '@designsystem_test/tokens/styles.css';
</script>

<template>
  <div>
    <Navigation>
      <template #logo>
        <div>My App</div>
      </template>
    </Navigation>
    
    <TextButton variant="filled" size="medium">
      Click Me
    </TextButton>
  </div>
</template>
```

## Design Tokens

This package depends on `@designsystem_test/tokens` for design tokens (colors, typography, spacing).

## Components

This package includes all 36 production-ready Vue 3 components:

### Buttons (8)
- TextButton
- IconTextButton
- DynamicStateButton
- SelectableButton
- IconButton
- IconButtonWithStroke
- IconButtonOnImage
- OptionsButton

### Forms (9)
- Input
- Checkbox
- RadioField
- SwitchField
- SelectField
- TextareaField
- InputField
- CheckboxField
- TagInputField

### Navigation (2)
- Navigation
- NaviMenuItem

### Cards (2)
- PlatformInfoCard
- ProductInfoCard

### Feedback (4)
- Toast
- Tooltip
- Notification
- InfoMessage

### Dialog (1)
- DialogBody

### Media (2)
- Avatar
- ImageUploadButton

### Branding (2)
- PartnerLogo
- Talk

### Data Display (5)
- Tag
- Table
- Pagination
- Options
- ReservationStatus

## Development

```bash
# Build the package
npm run build
```

## License

MIT