npm package: @gxp-dev/uikit
Description: Vue 3 UI component library for GXP platform applications.
Author: GxP Dev
Latest version: 0.1.0

# @gxp-dev/uikit

Vue 3 UI component library for GXP platform applications.

## Installation

```bash
npm install @gxp-dev/uikit
```

## Setup

### 1. Import Styles

Import the library styles in your application entry point:

```typescript
// main.ts
import '@gxp-dev/uikit/styles'
```

This includes the default GXP theme. For custom theming, see the [Theming](#theming) section.

### 2. Configure Tailwind (Optional)

If you want to extend the library styles with Tailwind in your application:

```javascript
// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{vue,ts}',
    './node_modules/@gxp-dev/uikit/**/*.js'
  ]
}
```

## Usage

```vue
<script setup lang="ts">
import { Button, Input } from '@gxp-dev/uikit'
</script>

<template>
  <div>
    <Input v-model="text" placeholder="Enter text" />
    <Button variant="default">Submit</Button>
  </div>
</template>
```

## Components

### Button

A versatile button component with multiple variants and sizes.

```vue
<script setup lang="ts">
import { Button } from '@gxp-dev/uikit'
</script>

<template>
  <!-- Variants -->
  <Button variant="default">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="link">Link</Button>

  <!-- Sizes -->
  <Button size="sm">Small</Button>
  <Button size="default">Default</Button>
  <Button size="lg">Large</Button>
  <Button size="icon">Icon</Button>
</template>
```

**Props:**
- `variant`: `'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'`
- `size`: `'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'`
- `as`: Render as a different element (default: `'button'`)
- `asChild`: Merge props onto child element

### Input

A text input component with v-model support.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Input } from '@gxp-dev/uikit'

const text = ref('')
</script>

<template>
  <Input v-model="text" placeholder="Enter text" />
  <Input type="email" placeholder="Email address" />
  <Input disabled placeholder="Disabled input" />
</template>
```

**Props:**
- `modelValue`: Bound value (v-model)
- `defaultValue`: Initial value when uncontrolled
- All standard HTML input attributes

## Theming

The library uses CSS variables for theming, compatible with the GXP platform theming system.

### Using the Default Theme

The default import includes the GXP theme:

```typescript
import '@gxp-dev/uikit/styles'
```

### Custom Theming

For custom themes, import only the base styles and define your own CSS variables:

```typescript
// Import base styles without theme
import '@gxp-dev/uikit/styles/base'
```

Then define the CSS variables in your application:

```css
:root {
  /* Core Platform Variables */
  --page_background_color: #ffffff;
  --page_text_color: #222222;
  --input_field_background_color: #f5f5f5;
  --input_field_text_color: #222222;
  --input_field_border_color: #cccccc;

  /* Primary Button */
  --primary_button_background_color: #0066cc;
  --primary_button_text_color: #ffffff;
  --primary_button_border_color: #0066cc;

  /* Secondary Button */
  --secondary_button_background_color: #f5f5f5;
  --secondary_button_text_color: #222222;
  --secondary_button_border_color: #cccccc;

  /* Shadcn/Tailwind mappings (auto-derived from above) */
  --background: var(--page_background_color);
  --foreground: var(--page_text_color);
  --primary: var(--primary_button_background_color);
  --primary-foreground: var(--primary_button_text_color);
  --secondary: var(--secondary_button_background_color);
  --secondary-foreground: var(--secondary_button_text_color);
  --border: var(--input_field_border_color);
  --input: var(--input_field_background_color);
  --ring: var(--primary_button_border_color);
  --radius: 0.5rem;
}
```

## Utilities

### cn()

A utility function for merging Tailwind CSS classes:

```typescript
import { cn } from '@gxp-dev/uikit'

const classes = cn(
  'base-class',
  condition && 'conditional-class',
  'override-class'
)
```

## Development

```bash
# Install dependencies
npm install

# Start dev server
npm run dev

# Run tests
npm run test

# Run tests with coverage
npm run test:coverage

# Build library
npm run build

# Start Storybook
npm run storybook

# Build Storybook
npm run storybook:build
```

## Exports

```typescript
// Components
export { Button, buttonVariants } from '@gxp-dev/uikit'
export { Input } from '@gxp-dev/uikit'

// Types
export type { ButtonVariants } from '@gxp-dev/uikit'

// Utilities
export { cn } from '@gxp-dev/uikit'
```

## Requirements

- Vue 3.4+
- Node.js 18+

## License

MIT