@popgrids/ui v0.0.2

@popgrids/ui

A modern, reusable UI component library built with Lit for Popgrids applications.

Installation

npm install @popgrids/ui

Usage

Import the package to register all components:

import "@popgrids/ui";

Then use the components in your HTML:

<pop-button>Click me</pop-button>
<pop-icon name="star"></pop-icon>
<pop-toast message="Hello!"></pop-toast>

Available Components

The library includes the following components:

• <pop-button> - Standard button component
• <pop-button-vertical> - Vertical button variant
• <pop-button-link> - Button that acts as a link
• <pop-code-input-field> - Input field for code entry
• <pop-comment-avatar> - Avatar component for comments
• <pop-comment-icon> - Icon component for comments
• <pop-element> - Base element component
• <pop-focus-indicator> - Focus indicator component
• <pop-form-input-simple> - Simple form input component
• <pop-icon> - Icon component
• <pop-loader> - Loading indicator component
• <pop-logo> - Logo component
• <pop-sum> - Sum display component
• <pop-timestamp-countdown> - Countdown timer component
• <pop-toast> - Toast notification component

Development

Prerequisites

• Node.js
• npm

Scripts

• npm run build - Build the package
• npm run dev - Watch mode for development
• npm run clean - Clean build artifacts
• npm run lint - Run ESLint
• npm run test - Run tests
• npm run generate:component - Generate a new component
• npm run check-types - Check TypeScript types

Adding New Components

To add a new component, use the generator:

npm run generate:component

Dependencies

• Lit - Web Components library
• @popgrids/theme - Theme package

License

Private - All rights reserved