open-index/open-npm huggingface dataset:
npm package: @nevv-ui/components
Description: Complex UI components for Nevv UI - forms, tables, modals, and advanced components
Author: ESTENX LTD
Latest version: 2.0.0

# @nevv-ui/components

Complex UI components for Nevv UI - advanced functionality built on primitives.

## Installation

```bash
npm install @nevv-ui/components @nevv-ui/primitives @nevv-ui/styles
# or
pnpm add @nevv-ui/components @nevv-ui/primitives @nevv-ui/styles
```

## What are Components?

Components are complex, feature-rich UI elements composed of multiple primitives:
- **Sophisticated** - Advanced functionality and interactions
- **Integrated** - Built using primitives and utilities
- **Feature-Rich** - Multiple sub-components and options
- **Production-Ready** - Battle-tested in real applications

## Components

### Form & Data Entry
- **Form** / FormItem - Form validation and layout
- **DatePicker** / TimePicker - Date and time selection
- **ColorPicker** - Color selection with presets
- **Upload** - File upload with drag & drop
- **Mentions** - @mentions autocomplete
- **AutoComplete** - Input with suggestions
- **DynamicInput** / DynamicTags - Dynamic form fields
- **Cascader** - Nested selection

### Data Display
- **DataTable** - Advanced data grid with sorting, filtering, pagination
- **Tree** / TreeSelect - Hierarchical data display
- **List** - Structured list rendering
- **Descriptions** - Key-value data display
- **Timeline** - Event timeline
- **Statistic** - Statistical data display
- **Collapse** - Collapsible panels
- **Carousel** - Image/content carousel

### Navigation
- **Menu** - Navigation menus
- **Dropdown** - Dropdown menus
- **Pagination** - Page navigation
- **Steps** - Step-by-step navigation
- **Breadcrumb** - Navigation trail
- **Anchor** - Anchor navigation
- **Tabs** - Tabbed interfaces

### Feedback & Overlay
- **Modal** / Dialog - Modal dialogs
- **Notification** / Message - Toast notifications
- **Drawer** - Side panel
- **Popconfirm** - Confirmation popover

### Layout
- **Layout** - Page layout components

## Usage

```typescript
import { DataTable, Form, Modal } from '@nevv-ui/components'
import '@nevv-ui/styles'

// In your component
<DataTable :columns="columns" :data="data" />
```

### Import individual components

```typescript
import DataTable from '@nevv-ui/components/data-table'
import Form from '@nevv-ui/components/form'
```

## Dependencies

Components require:
- `@nevv-ui/primitives` - Base components
- `@nevv-ui/styles` - CSS styling

## TypeScript

Full TypeScript support with comprehensive type definitions.

## License

MIT © ESTENX LTD
npm package: @nevv-ui/primitives
Description: Primitive UI components for Nevv UI - buttons, inputs, and basic elements
Author: ESTENX LTD
Latest version: 2.0.0

# @nevv-ui/primitives

Primitive UI components for Nevv UI - the building blocks of modern interfaces.

## Installation

```bash
npm install @nevv-ui/primitives @nevv-ui/styles
# or
pnpm add @nevv-ui/primitives @nevv-ui/styles
```

## What are Primitives?

Primitives are fundamental, single-purpose UI components with minimal dependencies. They are:
- **Focused** - Each component does one thing well
- **Composable** - Easily combined to create complex UIs
- **Lightweight** - Minimal bundle size and dependencies
- **Accessible** - Built with ARIA best practices

## Components

### Form Controls
- **Button** / ButtonGroup - Actions and navigation
- **Input** / InputGroup - Text input with various types
- **Checkbox** / CheckboxGroup - Multiple selections
- **Radio** / RadioGroup - Single selection from options
- **Select** - Dropdown selection
- **Switch** - Boolean toggle

### Visual Elements
- **Icon** / IconWrapper - Icon display and styling
- **Avatar** / AvatarGroup - User representation
- **Badge** - Status indicators and counts
- **Tag** - Labels and categories
- **Divider** - Visual separation

### Feedback
- **Spin** - Loading indicator
- **Empty** - No data state
- **Skeleton** - Loading placeholder
- **Progress** - Task completion indicator
- **Alert** - Important messages

### Overlays
- **Tooltip** - Contextual help
- **Popover** - Floating content container

### Utilities
- **Scrollbar** - Custom scrollbars
- **Code** - Code display

## Usage

```typescript
import { Button } from '@nevv-ui/primitives'
import '@nevv-ui/styles/components/button.css'

// In your component
<Button type="primary">Click me</Button>
```

### Import individual components

```typescript
import Button from '@nevv-ui/primitives/button'
import Input from '@nevv-ui/primitives/input'
```

### Import all primitives

```typescript
import { Button, Checkbox, Input } from '@nevv-ui/primitives'
```

## CSS Dependency

All primitives require `@nevv-ui/styles` for styling:

```typescript
// Import all styles
import ' @nevv-ui/styles'

// Or import individual component styles
import '@nevv-ui/styles/components/button.css'
import '@nevv-ui/styles/components/input.css'
```

## TypeScript

Full TypeScript support with type definitions included.

## License

MIT © ESTENX LTD
npm package: @nevv-ui/styles
Description: CSS system for Nevv UI - modern CSS custom properties based styling
Author: ESTENX LTD
Latest version: 2.0.0

# @nevv-ui/styles

Modern CSS system for Nevv UI - design tokens, component styles, and utilities.

## Installation

```bash
npm install @nevv-ui/styles
# or
pnpm add @nevv-ui/styles
```

## Usage

### Import All Styles

```css
@import '@nevv-ui/styles';
```

### Import Base System Only

```css
@import '@nevv-ui/styles/base';
```

This includes:
- CSS reset/normalize
- Design tokens (colors, spacing, typography, shadows)
- Light & dark theme definitions

### Import Component Styles

```css
/* All component styles */
@import '@nevv-ui/styles/components';

/* Individual components */
@import '@nevv-ui/styles/components/button.css';
@import '@nevv-ui/styles/components/input.css';
```

### Import Utilities

```css
@import '@nevv-ui/styles/utilities';
```

## Structure

```
@nevv-ui/styles/
├── base/               # Foundation styles
│   ├── reset.css       # CSS reset
│   ├── tokens.css      # Design tokens
│   ├── theme-light.css # Light theme
│   └── theme-dark.css  # Dark theme
├── components/         # Component styles
│   ├── button.css
│   ├── input.css
│   └── ...
└── utilities/          # Utility classes
    └── ...
```

## Design Tokens

All CSS custom properties use the `--nv-` prefix:

```css
/* Colors */
--nv-primary-color
--nv-primary-color-hover
--nv-primary-color-pressed

/* Spacing */
--nv-spacing-xs
--nv-spacing-sm
--nv-spacing-md

/* Typography */
--nv-font-size-sm
--nv-line-height-base

/* Effects */
--nv-box-shadow-sm
--nv-border-radius-md
```

## Theme System

Themes are applied via `data-theme` attribute:

```html
<div data-theme="light">...</div>
<div data-theme="dark">...</div>
```

## Component States

Components use data attributes for states:

```html
<button data-active="true" data-disabled="true">Button</button>
```

## License

MIT © ESTENX LTD
npm package: @nevv-ui/themes
Description: Theme system and presets for Nevv UI - customize colors and styles
Author: ESTENX LTD
Latest version: 2.0.0

# @nevv-ui/themes

Theme presets and builders for Nevv UI - customize colors and appearance.

## Installation

```bash
npm install @nevv-ui/themes @nevv-ui/styles
# or
pnpm add @nevv-ui/themes @nevv-ui/styles
```

## What are Themes?

Themes provide preset color palettes and configuration builders for consistent design:
- **Presets** - Ready-to-use color schemes
- **Customizable** - Build your own themes
- **CSS Variables** - Semantic color tokens
- **Dark Mode** - Built-in dark theme support

## Built-in Presets

### Default Theme
Modern, professional light theme (default)

```html
<link rel="stylesheet" href="@nevv-ui/themes/presets/default.css">
```

### Dark Theme
Professional dark color scheme

```html
<link rel="stylesheet" href="@nevv-ui/styles/base/theme-dark.css">
```

### Ocean Blue
Cool blue color palette

```html
<link rel="stylesheet" href="@nevv-ui/themes/presets/oceanblue.css">
```

### Forest
Natural green color palette

```html
<link rel="stylesheet" href="@nevv-ui/themes/presets/forest.css">
```

## Using Themes

### Global Theme

```html
<html data-theme="light">
  <head>
    <link rel="stylesheet" href="@nevv-ui/styles">
    <link rel="stylesheet" href="@nevv-ui/themes/presets/default.css">
  </head>
  <body>...</body>
</html>
```

### Component-level Theme

```html
<div data-theme="dark">
  <!-- Components inside will use dark theme -->
</div>
```

### Runtime Theme Switching

```typescript
document.documentElement.dataset.theme = 'dark'
```

## Building Custom Themes

Use the theme builder to create custom themes:

```typescript
import { createTheme } from '@nevv-ui/themes/builder'

const myTheme = createTheme({
  primary: '#007AFF',
  success: '#34C759',
  warning: '#FF9500',
  error: '#FF3B30',
  info: '#00B0FF'
})
```

## CSS Variables

All colors use `--nv-` prefix CSS variables:

```css
:root[data-theme="light"] {
  --nv-primary-color: #007AFF;
  --nv-primary-color-hover: #0051D5;
  --nv-primary-color-pressed: #003D99;
  --nv-primary-color-disabled: rgba(0, 122, 255, 0.5);
}
```

## License

MIT © ESTENX LTD
npm package: @nevware21/coverage-tools
Description: Tools for merging coverage reports.
Author: NevWare21 Solutions LLC
Latest version: 0.1.4

<h1 align="center">@nevware21/coverage-tools</h1>
<h2 align="center">Tools for merging coverage reports.</h2>

![GitHub Workflow Status (main)](https://img.shields.io/github/actions/workflow/status/nevware21/ts-build-tools/ci.yml?branch=main)
[![npm version](https://badge.fury.io/js/%40nevware21%2Fcoverage-tools.svg)](https://badge.fury.io/js/%40nevware21%2Fcoverage-tools)
[![downloads](https://img.shields.io/npm/dt/%40nevware21/coverage-tools.svg)](https://www.npmjs.com/package/%40nevware21/coverage-tools)
[![downloads](https://img.shields.io/npm/dm/%40nevware21/coverage-tools.svg)](https://www.npmjs.com/package/%40nevware21/coverage-tools)

## Description

Tools for merging coverage reports.

### Quick Start

Install the npm packare: `npm install @nevware21/coverage-tools --save-dev`

> It is suggested / recommended that you use the following definition in your `package.json` so that you are compatible with any future releases as they become available
> we do not intend to make ANY known breaking changes moving forward until v2.x 
> ```json
> "@nevware21/coverage-tools": ">= 0.1.4 < 2.x"
> ```

And then just used the helper in your package.json

```json
{
    "scripts": {
        "coverage": "merge-coverage"
    }
}
```
npm package: @nevware21/publish-npm
Description: Tools to automate the publishing packages to npm.
Author: NevWare21 Solutions LLC
Latest version: 0.1.4

<h1 align="center">@nevware21/publish-npm</h1>
<h2 align="center">Tools to automate the publishing packages to npm.</h2>

![GitHub Workflow Status (main)](https://img.shields.io/github/actions/workflow/status/nevware21/ts-build-tools/ci.yml?branch=main)
[![npm version](https://badge.fury.io/js/%40nevware21%2Fts-preproc.svg)](https://badge.fury.io/js/%40nevware21%2Fts-preproc)
[![downloads](https://img.shields.io/npm/dt/%40nevware21/ts-preproc.svg)](https://www.npmjs.com/package/%40nevware21/ts-preproc)
[![downloads](https://img.shields.io/npm/dm/%40nevware21/ts-preproc.svg)](https://www.npmjs.com/package/%40nevware21/ts-preproc)

## Description

Simple tools for automating the publishing of packages to npm.


### Quick Start

Install the npm packare: `npm install @nevware21/publish-npm --save-dev`

> It is suggested / recommended that you use the following definition in your `package.json` so that you are compatible with any future releases as they become available
> we do not intend to make ANY known breaking changes moving forward until v2.x 
> ```json
> "@nevware21/publish-npm": ">= 0.1.4 < 2.x"
> ```

Create a configuration file with your group settings, where the
- `default` identifies the default group when no group is passed on the command line
- each `group` identifies the path to the repo where the `package.json` will be loaded to obtain the `name`

```json
// ------------------------------
// NPM Publish group definitions
// ------------------------------
{
    "repoRoot": "../../..",
    "default": "all",
    "groups": {
        "all": [
            "./lib/pre-proc",
            "./lib/coverage-tools",
            "./lib/publish-npm"
        ],
        "preProc": [
            "./lib/pre-proc"
        ],
        "mergeCoverage": [
            "./lib/coverage-tools"
        ],
        "npmPublish": [
            "./lib/publish-npm"
        ]
    }
}
```
And then just used the helper in your package.json

```json
{
    "scripts": {
        "publish-npm": "publish-npm groupName"
    }
}
```