open-index/open-npm huggingface dataset:
npm package: @lilara/ui-web
Description: Framework-agnostic web components built with Lit for the Hubtype design system.
Latest version: 0.5.0

# @hubtype/lilara-ui-web

Framework-agnostic web components built with Lit for the Hubtype design system.

## Features

- 🎨 **Design System Integration**: Uses tokens from `@lilara/foundations`
- ♿ **Accessible**: Full keyboard navigation and WAI-ARIA patterns
- 🎯 **Framework Agnostic**: Works with React, Angular, Vue, or vanilla JS
- 🔧 **Type Safe**: Full TypeScript support
- 📦 **Tree Shakeable**: ES modules for optimal bundle size

## Installation

```bash
pnpm install @hubtype/lilara-ui-web lit
```

**Note:** `lit` is a peer dependency. `@lilara/foundations` is automatically installed.

## Quick Start

```typescript
// 1. Import design tokens
import '@lilara/foundations/tokens.css'

// 2. Import components
import '@hubtype/lilara-ui-web'

// 3. Use in your app
<ht-button intent="primary">Click me</ht-button>
<ht-table .data=${data} .columns=${columns}></ht-table>
```

See [USAGE.md](./USAGE.md) for framework-specific examples (React, Angular, vanilla JS).

## Components

- **ht-button** - Button with loading states, multiple variants
- **ht-spinner** - Loading indicator
- **ht-table** - Data table with TanStack Table integration, selection, actions, keyboard navigation

**Full API reference:** See [Storybook](http://localhost:6006) autodocs for each component.

## Documentation

- **[USAGE.md](./USAGE.md)** - Framework setup, installation, basic usage
- **[ARCHITECTURE.md](./ARCHITECTURE.md)** - Component development patterns and best practices
- **[CSS_APPROACH.md](./CSS_APPROACH.md)** - Why we use `.css.ts` files with Lit
- **[PARTS_API.md](./PARTS_API.md)** - Customization guide using CSS Shadow Parts
- **[FIXES.md](./FIXES.md)** - Historical context on Shadow DOM issues and solutions
- **[Storybook](http://localhost:6006)** - Interactive component demos and API reference

## Development

```bash
# Build
pnpm nx build lilara-ui-web

# Test
pnpm nx test lilara-ui-web

# Storybook (port 6006)
pnpm nx storybook lilara-ui-web
```

## Contributing

When implementing new components, follow the patterns in [ARCHITECTURE.md](./ARCHITECTURE.md).

## License

MIT
npm package: @lilara/ui-web-react
Description: A comprehensive React UI component library with design tokens and base styles.
Latest version: 0.5.0

# @lilara/ui-web-react

A comprehensive React UI component library with design tokens and base styles.

## Installation

```bash
pnpm install @lilara/ui-web-react
```

## Usage

### Components

Import React components from the main package:

```typescript
import { Button, Modal, Card } from '@lilara/ui-web-react'
```

### CSS and Design Tokens

This package provides design tokens and base styles that should be imported in your application:

```typescript
// Import the complete design system (recommended)
import '@lilara/ui-web-react/base.css'

// Or import individual CSS files if needed
import '@lilara/ui-web-react/reset.css' // CSS reset
import '@lilara/foundations/tokens.css' // Design tokens (colors, spacing, etc.)
```

The `base.css` file includes both `reset.css` and the foundations design tokens, so you typically only need to import `base.css`.

### Design Tokens

The package includes CSS custom properties for:

- **Colors**: `--color-primary-500`, `--color-neutral-100`, etc.
- **Spacing**: `--spacing-xs`, `--spacing-sm`, `--spacing-md`, etc.
- **Typography**: `--font-size-sm`, `--font-weight-medium`, etc.
- **Borders**: `--border-width-sm`, `--radius-md`, etc.
- **Shadows**: `--shadow-sm`, `--shadow-lg`, etc.

## Development

### Releasing

To release a new version of this package:

```bash
# Dry run to see what would be released
pnpm run release-lilara-ui-web-react -- --dry-run

# Release new version
pnpm run release-lilara-ui-web-react

# Force a patch release
pnpm run release-lilara-ui-web-react -- --force-publish

# First release (for initial setup)
pnpm run release-lilara-ui-web-react -- --first-release
```

## Peer Dependencies

This package requires:

- `react >= 18.0.0`
- `react-dom >= 18.0.0`

## Used by

- `@botonic/webchat-ui` - Uses the design tokens and base styles
- Dashboard applications
- Bot applications