# @ferris-wheel/design

Vue 3 components, styles, and utilities for Ferris Wheel applications.

## Installation

```bash
pnpm add @ferris-wheel/design
```

The package expects Vue and Vue Router to be provided by the consuming application. Its peer dependencies also include `@floating-ui/vue`, `@vueuse/core`, and `symbol-db`.

## Usage

Import components from the package and import the design stylesheet once in the application entrypoint:

```ts
import { FButton } from "@ferris-wheel/design";
import "@ferris-wheel/design/design.css";
```

```vue
<template>
    <FButton>Save</FButton>
</template>

<script setup lang="ts">
import { FButton } from "@ferris-wheel/design";
</script>
```

The main package export includes the component library and shared types. Components can also be imported from their individual subpath exports when needed, for example:

```ts
import FButton from "@ferris-wheel/design/FButton";
```

## Components

The library includes components for:

- Animation and transitions
- Charts and metrics
- Content, cards, alerts, and tooltips
- Data grids, tables, badges, tags, and pagination
- Forms and inputs
- Layout, menus, panels, and heroes
- Floating elements and popups
- Icons, themes, calendars, emoji pickers, and utilities

## Local development

From this package directory, start the Histoire component explorer:

```bash
pnpm run dev:story
```

Stories live next to their components in `src/components` and provide interactive examples for the library.

## Build

Build the distributable package with:

```bash
pnpm run build
```

The compiled JavaScript, declarations, and stylesheet are written to `dist/`. The package exposes the main library through `@ferris-wheel/design`, the stylesheet through `@ferris-wheel/design/design.css`, and individual components through subpath exports.