Hb Volt Lib

A Vue 3 component library that wraps PrimeVue 4 components with highly customizable styles using CSS design tokens.

Features

• 🎨 Design Token System: Highly customizable using CSS custom properties
• 🚀 Vue 3 Compatible: Built with Vue 3 Composition API
• 📦 Vite Build: Fast development and optimized production builds
• 🎯 TypeScript Ready: Full TypeScript support
• 🎪 Multiple Variants: 8 button variants with different styles
• 📏 Size Options: 5 different sizes from XS to XL
• 🔄 Loading States: Built-in loading spinner
• ♿ Accessible: WCAG compliant with proper focus management

Installation

npm install hb-volt-lib

Quick Start

1. Install Dependencies

npm install vue@^3.3.0 primevue@^4.0.0

2. Import and Use

import { createApp } from 'vue'
import HbVoltLib from 'hb-volt-lib'
import 'hb-volt-lib/dist/style.css'

const app = createApp(App)
app.use(HbVoltLib)
app.mount('#app')

3. Use Components

<template>
  <hb-button variant="primary" size="lg" @click="handleClick">
    Click Me
  </hb-button>
</template>

Button Component

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | String | 'primary' | Button style variant | | size | String | 'md' | Button size | | disabled | Boolean | false | Disable the button | | loading | Boolean | false | Show loading spinner | | type | String | 'button' | HTML button type | | rounded | Boolean | false | Use rounded corners | | fullWidth | Boolean | false | Make button full width |

Variants

• primary - Primary action button
• secondary - Secondary action button
• success - Success/positive action
• warning - Warning/caution action
• danger - Danger/destructive action
• info - Informational action
• outline - Outlined style
• ghost - Minimal ghost style

Sizes

• xs - Extra small
• sm - Small
• md - Medium (default)
• lg - Large
• xl - Extra large

Events

• click - Fired when button is clicked
• focus - Fired when button receives focus
• blur - Fired when button loses focus

Design Tokens

The library uses CSS custom properties (design tokens) for easy customization. You can override any token to match your design system:

:root {
  /* Colors */
  --hb-primary-color: #your-primary-color;
  --hb-primary-hover-color: #your-primary-hover;
  --hb-primary-active-color: #your-primary-active;
  
  /* Spacing */
  --hb-spacing-md: 0.75rem;
  --hb-spacing-lg: 1rem;
  
  /* Border Radius */
  --hb-border-radius-md: 0.375rem;
  --hb-border-radius-lg: 0.5rem;
  
  /* Typography */
  --hb-font-size-md: 1rem;
  --hb-font-weight-medium: 500;
  
  /* Shadows */
  --hb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --hb-transition-normal: 200ms ease-in-out;
}

Available Design Tokens

Colors

• --hb-primary-color - Primary button color
• --hb-secondary-color - Secondary button color
• --hb-success-color - Success button color
• --hb-warning-color - Warning button color
• --hb-danger-color - Danger button color
• --hb-info-color - Info button color
• --hb-text-color - Default text color
• --hb-text-color-on-primary - Text color on primary background
• --hb-bg-color - Default background color
• --hb-border-color - Default border color

Spacing

• --hb-spacing-xs - Extra small spacing (0.25rem)
• --hb-spacing-sm - Small spacing (0.5rem)
• --hb-spacing-md - Medium spacing (0.75rem)
• --hb-spacing-lg - Large spacing (1rem)
• --hb-spacing-xl - Extra large spacing (1.5rem)
• --hb-spacing-2xl - 2X large spacing (2rem)

Typography

• --hb-font-size-xs through --hb-font-size-2xl - Font sizes
• --hb-font-weight-normal through --hb-font-weight-bold - Font weights
• --hb-line-height-tight, --hb-line-height-normal, --hb-line-height-relaxed - Line heights

Border Radius

• --hb-border-radius-sm through --hb-border-radius-full - Border radius values

Shadows

• --hb-shadow-sm through --hb-shadow-xl - Shadow values

Transitions

• --hb-transition-fast - Fast transition (150ms)
• --hb-transition-normal - Normal transition (200ms)
• --hb-transition-slow - Slow transition (300ms)

Development

Setup

npm install

Development Server

npm run dev

Build

npm run build

Preview Build

npm run preview

Project Structure

hb-volt-lib/
├── src/
│   ├── components/
│   │   └── Button/
│   │       ├── Button.vue
│   │       └── index.js
│   ├── styles/
│   │   ├── tokens.css
│   │   └── index.css
│   └── index.js
├── demo/
│   └── index.html
├── dist/
├── package.json
├── vite.config.js
└── README.md

Browser Support

• Chrome >= 88
• Firefox >= 78
• Safari >= 14
• Edge >= 88

License

ISC

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Roadmap

• [ ] Add more PrimeVue component wrappers
• [ ] Add TypeScript definitions
• [ ] Add unit tests
• [ ] Add Storybook documentation
• [ ] Add more design token presets
• [ ] Add dark mode support