open-index/open-npm huggingface dataset:
npm package: @progressdb/js
Description: ProgressDB frontend TypeScript SDK (compile to JS for npm)
Latest version: 0.2.3

# @progressdb/js

ProgressDB TypeScript SDK for frontend applications.

## Installation

```bash
npm install @progressdb/js
```

## Quick Start

```ts
import ProgressDBClient from '@progressdb/js';

const client = new ProgressDBClient({
  baseUrl: 'https://api.example.com',
  apiKey: 'FRONTEND_API_KEY',
  defaultUserId: 'user123',
  defaultUserSignature: 'signature-from-backend'
});

// List messages in a thread
const messages = await client.listThreadMessages('t1', { limit: 50 });
```

## Authentication

- Frontend API key via `X-API-Key` header
- User operations require `X-User-ID` and `X-User-Signature` headers
- Use the backend SDK or sign endpoint to securely generate signatures for your users

## API

### Client
```ts
new ProgressDBClient(options: SDKOptions)
```

### Messages
- `listThreadMessages(threadKey, query)` - List messages in thread
- `createThreadMessage(threadKey, message)` - Create message
- `getThreadMessage(threadKey, messageKey)` - Get message
- `updateThreadMessage(threadKey, messageKey, message)` - Update message
- `deleteThreadMessage(threadKey, messageKey)` - Delete message

### Threads
- `createThread(thread)` - Create thread
- `listThreads(query)` - List threads
- `getThread(threadKey)` - Get thread
- `updateThread(threadKey, thread)` - Update thread
- `deleteThread(threadKey)` - Delete thread

### Health
- `healthz()` - Basic health check
- `readyz()` - Readiness check with version
npm package: @progressdb/node
Description: ProgressDB backend SDK (Node.js, TypeScript) - wraps frontend SDK with automatic signature generation and caching
Latest version: 0.2.0

# @progressdb/node

Node.js TypeScript SDK for backend callers of ProgressDB. Wraps frontend SDK with automatic signature generation.

## Installation

```bash
npm install @progressdb/node
```

## Quick Start

```ts
import ProgressDB from '@progressdb/node'
const db = ProgressDB({ 
  baseUrl: 'https://api.example.com', 
  apiKey: process.env.PROGRESSDB_KEY 
})

await db.createThread({ title: 'General' }, 'user-123')
```

## API

### Client
```ts
ProgressDB(options: BackendClientOptions)
```

### Messages
- `listThreadMessages(threadKey, query, userId)` - List messages in thread
- `createThreadMessage(threadKey, message, userId)` - Create message
- `getThreadMessage(threadKey, messageKey, userId)` - Get message
- `updateThreadMessage(threadKey, messageKey, message, userId)` - Update message
- `deleteThreadMessage(threadKey, messageKey, userId)` - Delete message

### Threads
- `createThread(thread, userId)` - Create thread
- `listThreads(query, userId)` - List threads
- `getThread(threadKey, userId)` - Get thread
- `updateThread(threadKey, thread, userId)` - Update thread
- `deleteThread(threadKey, userId)` - Delete thread

### Health
- `healthz()` - Basic health check
- `readyz()` - Readiness check with version

### Signature
- `signUser(userId)` - Generate signature for user
- `clearSignatureCache(userId?)` - Clear signature cache
- `getCacheStats()` - Get cache statistics
npm package: @progressdb/react
Description: React hooks and provider for ProgressDB frontend SDK
Latest version: 0.2.1

# @progressdb/react

ProgressDB React SDK with provider and hooks.

## Installation

```bash
npm install @progressdb/react @progressdb/js
```

## Quick Start

```tsx
import React from 'react';
import ProgressDBProvider, { useMessages } from '@progressdb/react';

function MessagesView({ threadId }: { threadId: string }){
  const { messages, loading, refresh, create } = useMessages(threadId);
  // ... render messages
}

export default function App(){
  return (
    <ProgressDBProvider
      options={{ baseUrl: 'https://api.example.com', apiKey: 'FRONTEND_API_KEY' }}
      getUserSignature={async () => ({ userId: 'user123', signature: 'signature' })}
    >
      <MessagesView threadId="t1" />
    </ProgressDBProvider>
  );
}
```

## API

### Provider
- `ProgressDBProvider` - Wrap app with provider

### Hooks
- `useProgressClient()` - Get client instance
- `useUserSignature()` - Get user signature
- `useMessages(threadKey, query)` - List messages in thread
- `useMessage(threadKey, messageKey)` - Get single message
- `useThreads(query)` - List threads
- `useHealthz()` - Basic health check
- `useReadyz()` - Readiness check with version
npm package: @progressdb/react-native
Description: React Native hooks and provider for ProgressDB frontend SDK
Latest version: 0.2.5

# @progressdb/react-native

ProgressDB React Native SDK with provider and hooks.

## Installation

```bash
npm install @progressdb/react-native @progressdb/js @react-native-async-storage/async-storage
```

## Quick Start

```tsx
import React from 'react';
import { View, Text } from 'react-native';
import ProgressDBProvider, { useMessages } from '@progressdb/react-native';

function MessagesView({ threadId }: { threadId: string }){
  const { messages, loading, refresh, create } = useMessages(threadId);
  
  if (loading) {
    return <Text>Loading messages...</Text>;
  }
  
  return (
    <View>
      {messages?.map(message => (
        <Text key={message.key}>{message.content}</Text>
      ))}
    </View>
  );
}

export default function App(){
  return (
    <ProgressDBProvider
      options={{ baseUrl: 'https://api.example.com', apiKey: 'FRONTEND_API_KEY' }}
      getUserSignature={async () => ({ userId: 'user123', signature: 'signature' })}
    >
      <MessagesView threadId="t1" />
    </ProgressDBProvider>
  );
}
```

## API

### Provider
- `ProgressDBProvider` - Wrap app with provider

### Hooks
- `useProgressClient()` - Get client instance
- `useUserSignature()` - Get user signature
- `useMessages(threadKey, query)` - List messages in thread
- `useMessage(threadKey, messageKey)` - Get single message
- `useThreads(query)` - List threads
- `useHealthz()` - Basic health check
- `useReadyz()` - Readiness check with version
npm package: @progressive-development/pd-calendar
Description: Webcomponent for calendar
Author: PD Progressive Development
Latest version: 1.1.4

# @progressive-development/pd-calendar

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-calendar.svg)](https://www.npmjs.com/package/@progressive-development/pd-calendar)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Calendar and datepicker components for date selection and event display.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **FullCalendar Integration** – Complete wrapper for FullCalendar with dayGrid, timeGrid, and list views
- **Dual View System** – Switch between calendar grid and list view with custom date range support
- **Flexible Datepicker** – Single date, date range, and date+time selection with min/max constraints
- **Touch & Keyboard Navigation** – Swipe gestures, mouse wheel, and full keyboard support (Arrow keys, Home/End)

## Installation

```bash
npm install @progressive-development/pd-calendar
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-calendar';
</script>

<pd-datepicker label="Select date"></pd-datepicker>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-calendar>` | Month view calendar with day selection |
| `<pd-datepicker>` | Date picker input with popup calendar |
| `<pd-fullcalendar>` | Full-featured event calendar (FullCalendar wrapper) |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-development/pd-composite
Description: Progressive Development composite form components
Author: PD Progressive Development
Latest version: 1.2.2

# @progressive-development/pd-contact

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-contact.svg)](https://www.npmjs.com/package/@progressive-development/pd-contact)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Contact form and address display component for managing personal and business contacts.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Dual Contact Types** – Switch between personal and business contacts with automatic field adaptation
- **Flexible Field Configuration** – Control visible and required fields via simple arrays
- **Smart Phone Normalization** – Auto-transforms local phone numbers to international format based on country
- **Edit & View Modes** – Same component for form input and formatted address display with clickable links

## Installation

```bash
npm install @progressive-development/pd-contact
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-contact';
</script>

<pd-contact></pd-contact>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-contact>` | Contact form with edit and view modes |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-development/pd-contact
Description: Progressive Development Contact component
Author: PD Progressive Development
Latest version: 1.0.4

# @progressive-development/pd-contact

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-contact.svg)](https://www.npmjs.com/package/@progressive-development/pd-contact)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Contact form and address display component for managing personal and business contacts.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Dual Contact Types** – Switch between personal and business contacts with automatic field adaptation
- **Flexible Field Configuration** – Control visible and required fields via simple arrays
- **Smart Phone Normalization** – Auto-transforms local phone numbers to international format based on country
- **Edit & View Modes** – Same component for form input and formatted address display with clickable links

## Installation

```bash
npm install @progressive-development/pd-contact
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-contact';
</script>

<pd-contact></pd-contact>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-contact>` | Contact form with edit and view modes |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-development/pd-content
Description: Progressive Development content components. 
Author: PD Progressive Development
Latest version: 1.1.4

# @progressive-development/pd-content

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-content.svg)](https://www.npmjs.com/package/@progressive-development/pd-content)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Content layout components for collapsible sections, tabs, panels, and timelines.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Touch Gesture Support** – Swipe navigation for panels via HammerJS integration
- **Smooth Animations** – GPU-accelerated expand/collapse with cubic-bezier easing
- **Accordion Pattern** – Collapse groups with mutual exclusion (only one open at a time)
- **Responsive Content Switching** – Auto-switch between inline and popup mode based on viewport

## Installation

```bash
npm install @progressive-development/pd-content
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-content';
</script>

<pd-collapse title="Section 1">
  <p>Collapsible content here</p>
</pd-collapse>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-collapse>` | Expandable/collapsible content section |
| `<pd-collapse-group>` | Accordion container for collapse elements |
| `<pd-tab>` | Tabbed content navigation |
| `<pd-panel>` | Content panel |
| `<pd-panel-viewer>` | Swipeable panel carousel |
| `<pd-box-view>` | Card-style content box |
| `<pd-more-info>` | Expandable info section |
| `<pd-edit-content>` | Inline editable content |
| `<pd-resize-content>` | Responsive content with popup fallback |
| `<pd-timeline>` | Vertical timeline display |
| `<pd-timeline-wizard>` | Timeline with step progression |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-development/pd-dialog
Description: Progressive Development dialog components.
Author: PD Progressive Development
Latest version: 1.1.4

# @progressive-development/pd-dialog

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-dialog.svg)](https://www.npmjs.com/package/@progressive-development/pd-dialog)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Dialog and popup components for modals, confirmations, and form submissions.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Flexible Close Strategies** – Close via Escape key, backdrop click, or programmatically
- **Multi-State Submit Dialog** – Visual progression through send, success, and error states
- **Configurable Buttons** – Typed button arrays with primary/disabled states and event delegation
- **Full ARIA Support** – Proper dialog roles, modal behavior, and focus management

## Installation

```bash
npm install @progressive-development/pd-dialog
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-dialog';
</script>

<pd-popup-dialog title="Confirm">
  <p>Are you sure?</p>
</pd-popup-dialog>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-popup>` | Basic popup container |
| `<pd-popup-dialog>` | Modal dialog with header, content, and footer |
| `<pd-submit-dialog>` | Form submission dialog with loading/success/error states |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-development/pd-forms
Description: Webcomponents library 'pd-forms' for form input elements.
Author: PD Progressive Development
Latest version: 1.1.4

# @progressive-development/pd-forms

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-forms.svg)](https://www.npmjs.com/package/@progressive-development/pd-forms)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Accessible, themeable form components built with Lit.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Complete Form Toolkit** – All form elements covered: inputs, selects, checkboxes, radios, file uploads, ranges, and autocomplete
- **Flexible Layout System** – Nested containers, rows, fieldsets, and form-fields with 12-column grid alignment
- **Async Validation** – Promise-based validators for backend checks like email uniqueness
- **Centralized Form State** – Auto-tracked validity, dirty/pristine, and touched states via `<pd-form-container>`
- **Consistent Cross-Browser UI** – Custom-styled checkboxes, radios, and selects that look identical everywhere
- **Rich Helper Text** – Descriptions, hints, error messages, and character counts per field

## Installation

```bash
npm install @progressive-development/pd-forms
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-forms';
</script>

<pd-form-container>
  <pd-input label="Name" required></pd-input>
  <pd-button type="submit">Submit</pd-button>
</pd-form-container>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-button>` | Button with variants and states |
| `<pd-button-group>` | Group multiple buttons |
| `<pd-button-select-group>` | Toggle button selection group |
| `<pd-panel-button>` | Large panel-style button |
| `<pd-checkbox>` | Checkbox with label |
| `<pd-radio-group>` | Radio button group |
| `<pd-input>` | Text input with validation |
| `<pd-input-area>` | Multi-line text input |
| `<pd-input-file>` | File upload input |
| `<pd-input-time>` | Time picker input |
| `<pd-select>` | Dropdown select |
| `<pd-range>` | Range slider |
| `<pd-suggestion-box>` | Autocomplete input |
| `<pd-form-container>` | Form layout container |
| `<pd-form-field>` | Form field wrapper |
| `<pd-form-row>` | Form row layout |
| `<pd-hover-box>` | Hover-triggered content box |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-development/pd-icon
Description: Webcomponents library 'pd-icon' for rendering dynamic and static SVG icons using Lit.
Author: PD Progressive Development
Latest version: 1.1.4

# @progressive-development/pd-icon

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-icon.svg)](https://www.npmjs.com/package/@progressive-development/pd-icon)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

SVG icon component with built-in icon set and smooth state animations.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **SVG State Animations** – Smooth polygon morphing between active/inactive states using SMIL
- **Hybrid Icon System** – Static polygons, animated icons, and custom SVG templates
- **Extensive Styling API** – 15+ CSS Custom Properties for colors, backgrounds, and states
- **Semantic Status Icons** – Built-in error, warning, info, and help icons with outline/filled modes

## Installation

```bash
npm install @progressive-development/pd-icon
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-icon';
</script>

<pd-icon icon="check"></pd-icon>
<pd-icon icon="arrow-right" class="primary"></pd-icon>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-icon>` | SVG icon with animation support |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-development/pd-icon-brands
Description: Tree-shakeable Social Media & Brand SVG icons as Lit SVGTemplateResult exports
Latest version: 1.1.4

# pd-icon-brands

Tree-shakeable Social Media & Brand Icons für die PD Web Components Library.

Jedes Icon ist ein Lit `SVGTemplateResult` mit `viewBox="0 0 24 24"` und `fill="currentColor"`.
Größe und Farbe werden über das Elternelement gesteuert.

## Installation

```bash
pnpm add @progressive-development/pd-icon-brands
```

## Usage

### Direkter Import (empfohlen — Tree-Shaking)

```typescript
import { linkedinIcon, githubIcon } from "@progressive-development/pd-icon-brands";
import { html, css, LitElement } from "lit";

// Im Template
html`
  <a href="https://linkedin.com/in/..." class="social-link" aria-label="LinkedIn">
    ${linkedinIcon}
  </a>
  <a href="https://github.com/..." class="social-link" aria-label="GitHub">
    ${githubIcon}
  </a>
`;
```

Nur die importierten Icons landen im Bundle — alle anderen werden vom Bundler entfernt.

### Dynamischer Lookup (wenn Icon-Name aus Config kommt)

```typescript
import { brandIconMap, type BrandIconName } from "@progressive-development/pd-icon-brands";

// z.B. in pd-socialmedia oder Footer-Links
const iconName: BrandIconName = "linkedin";
const icon = brandIconMap.get(iconName);

html`${icon ? html`<span class="social-icon">${icon}</span>` : nothing}`;
```

**Hinweis:** `brandIconMap` importiert alle Icons. Für Apps mit nur 2–3 Social-Icons ist der direkte Import performanter.

### Einzelner Icon-Import

```typescript
// Nur ein Icon importieren
import { linkedinIcon } from "@progressive-development/pd-icon-brands/icons/linkedin";
```

## Styling

Die Icons nutzen `fill="currentColor"` — die Farbe wird vom CSS des Elternelements geerbt:

```css
.social-link {
  color: var(--pd-default-col);      /* Icon-Farbe */
  width: 24px;                        /* Icon-Größe */
  height: 24px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.social-link:hover {
  color: var(--pd-secondary-col);
}

.social-link svg {
  width: 100%;
  height: 100%;
}
```

## Verfügbare Icons

| Export | Name | Plattform |
|--------|------|-----------|
| `linkedinIcon` | `linkedin` | LinkedIn |
| `githubIcon` | `github` | GitHub |
| `xTwitterIcon` | `x-twitter` | X (ehem. Twitter) |
| `instagramIcon` | `instagram` | Instagram |
| `facebookIcon` | `facebook` | Facebook |
| `youtubeIcon` | `youtube` | YouTube |
| `tiktokIcon` | `tiktok` | TikTok |
| `xingIcon` | `xing` | Xing |
| `whatsappIcon` | `whatsapp` | WhatsApp |
| `telegramIcon` | `telegram` | Telegram |
| `stackoverflowIcon` | `stackoverflow` | Stack Overflow |
| `dribbbleIcon` | `dribbble` | Dribbble |
| `behanceIcon` | `behance` | Behance |

## Neues Icon hinzufügen

1. Neue Datei `src/icons/<name>.ts` anlegen (Muster: bestehende Icons)
2. In `src/icons/index.ts` exportieren
3. In `src/index.ts` exportieren
4. In `src/brand-icon-map.ts` zur Map hinzufügen + `BrandIconName` Type erweitern

**Konvention:** Alle SVGs nutzen `viewBox="0 0 24 24"`, `fill="currentColor"`, `aria-hidden="true"`.
npm package: @progressive-development/pd-order
Description: Progressive Development Order Component
Author: PD Progressive Development
Latest version: 1.1.8

# @progressive-development/pd-order

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-order.svg)](https://www.npmjs.com/package/@progressive-development/pd-order)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Order flow components for multi-address management and order summaries.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Multi-Address Management** – Handle customer, billing, property, and manager addresses with smart fallbacks
- **Property Owner Scenarios** – Specialized fields for landlord workflows with conditional address sections
- **Dual Display Modes** – Switch between full edit form and compact summary view
- **Order Summary with Terms** – Price table integration, tax display, and legal consent checkbox with modal

## Installation

```bash
npm install @progressive-development/pd-order
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-order';
</script>

<pd-order-contacts></pd-order-contacts>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-order-contacts>` | Multi-address contact management |
| `<pd-order-summary>` | Order overview with pricing and terms |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-development/pd-page
Description: Progressive development page helper, teaser, menu, footer.
Author: PD Progressive Development
Latest version: 1.3.0

# @progressive-development/pd-page

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-page.svg)](https://www.npmjs.com/package/@progressive-development/pd-page)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Page layout components for navigation, footer, and contact sections.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Smart Scroll Navigation** – Auto-highlight menu items based on scroll position with smooth scrolling
- **Responsive Menu** – Desktop navigation with automatic burger menu on mobile
- **Dual-Mode Social Media** – View mode for icon links, edit mode for managing profiles
- **Integrated Contact Form** – Split layout with company address and validated contact form

## Installation

```bash
npm install @progressive-development/pd-page
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-page';
</script>

<pd-menu .menuItems=${items}></pd-menu>
<pd-footer></pd-footer>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-menu>` | Responsive navigation menu with scroll tracking |
| `<pd-footer>` | Page footer |
| `<pd-contact-us>` | Contact section with form and address |
| `<pd-socialmedia>` | Social media links (view and edit modes) |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-development/pd-price
Description: Progressive Development Price and Pricetable Component.
Author: PD Progressive Development
Latest version: 1.0.6

# @progressive-development/pd-price

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-price.svg)](https://www.npmjs.com/package/@progressive-development/pd-price)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Price display and pricing table components with tax calculation.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Multi-Tax Support** – Display prices with multiple tax rates (e.g., 7% and 19%) simultaneously
- **Localized Tax Information** – Context-aware tax labels for different countries and building types
- **Discount Banners** – Visual discount display with percentage and promotional text
- **Auto-Calculating Price Tables** – Automatic sum and tax calculation in table footer

## Installation

```bash
npm install @progressive-development/pd-price
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-price';
</script>

<pd-price value="99.00" currency="EUR"></pd-price>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-price>` | Single price display with optional discount |
| `<pd-pricetable>` | Price table with line items and totals |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-development/pd-wizard
Description: Webcomponent pd-wizard following open-wc recommendations
Author: PD Progressive Development
Latest version: 1.1.4

# @progressive-development/pd-wizard

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-wizard.svg)](https://www.npmjs.com/package/@progressive-development/pd-wizard)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Multi-step wizard component for guided workflows and forms.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Event-Driven Navigation** – Back/Next/Submit events for external validation between steps
- **Clickable Progress Indicator** – Visual step tracker with navigation to completed steps only
- **Flexible Styling** – CSS Custom Properties and CSS Parts for full control
- **Flexible Step Configuration** – Up to 6 steps with dynamic titles and optional next-button control

## Installation

```bash
npm install @progressive-development/pd-wizard
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-wizard';
</script>

<pd-wizard .wizardSteps=${steps}>
  <div slot="step-1">Step 1 content</div>
  <div slot="step-2">Step 2 content</div>
</pd-wizard>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-wizard>` | Multi-step wizard container |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)
npm package: @progressive-victory/client
Description: Modified Discord.js client for discord bots
Author: Okami
Latest version: 0.3.6

# @progressive-victory/client

`@progressive-victory/client` is a general use Discord bot client that extends [discord.js](https://github.com/discordjs/discord.js)

## Usage

Install of @progressive-victory/client:

```sh
npm install @progressive-victory/client
yarn add @progressive-victory/client
```

The client has a builting interation handler. and does not need the `interactionCreate` event to be added. The Client Does **NOT** support refix commands

## Files setup

Example index.ts for a bot:

```ts
import { Client } from '@progressive-victory/client';

export const client = new Client({
    receiveMessageComponents: true,
    receiveModals: true,
    receiveAutocomplete: true,
    replyOnError: true,
    splitCustomID: true,
    splitCustomIDOn: '_',
    useGuildCommands: false
});

async function start() {
    await client.init({
        eventPath: './events',
        buttonPath: './interactions/buttons',
        selectMenuPath: './interactions/select_menus',
        modalPath: './interactions/modals',
        commandPath: './commands/chat/builders',
        contextMenuPath: './commands/context_menu'
    });

    await client.login(process.env.TOKEN);

    await client.deploy();
};

start();
```

### How to use event objects

In a Dirctory path set in the `eventPath`
Example event for Discord client event `ready`

```ts
import { Events } from 'discord.js';
import { Event, logger } from '@progressive-victory/client';

export default new Event()
    .setName(Events.ClientReady)
    .setOnce(true)
    .setExecute((client) => {
        logger.info(`Ready! Logged in as ${client.user.username}`);
    });
```

### How to create command object

Command objects are a genaric and can be used for any object the following is the example of a button interaction. Button interactions should be placed in the Dirctory path set in the `commandPath` or `contextMenuPath`

```ts
import { ChatInputCommand } from '@progressive-victory/client';

export default new ChatInputCommand()
    .setBuilder(commandBuilder)
    .setGlobal(true)
    .setAutocomplete(autoCompletedFunction);
    .setExecute(executeFunction);
```

### How to create interaction object

Interaction objects are a genaric and can be used for any object the following is the example of a button interaction. Button interactions should be placed in the dirctory path set in the `buttonPath`

```ts
import { ButtonInteraction } from 'discord.js';
import { Interaction, logger } from '@progressive-victory/client';

export default new Interaction<ButtonInteraction>()
    .setName(buttonCustomId)
    .setExecute(async (interaction) => {
        logger.info('button has been pressed');
    });
```
npm package: @progressive-villager/react-inline-editable
Description: A React component for inline editing
Author: Subhash Malireddy
Latest version: 0.0.2

# react-inline-editable

A zero-dependency and unstyled React component library for inline editing with flexible composition patterns and sensible defaults.

## Features

- 🎯 **Zero Dependencies** - Pure React implementation
- ➰ **Flexible Composition** - Uses compound components pattern
- 🔄 **Controlled & Uncontrolled** - Support for both patterns
- 📝 **TypeScript** - Full type safety with polymorphic props
- 🎛️ **Customizable** - Configurable activation and deactivation modes

## Installation

```bash
npm install @progressive-villager/react-inline-editable
# or
pnpm add @progressive-villager/react-inline-editable
# or
yarn add @progressive-villager/react-inline-editable
```

## Quick Start

```tsx
import { InlineEditable } from "@progressive-villager/react-inline-editable";

function App() {
  const [value, setValue] = useState("Click to edit");

  return (
    <InlineEditable>
      <InlineEditable.Preview>{value}</InlineEditable.Preview>
      <InlineEditable.Write
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </InlineEditable>
  );
}
```

## Documentation

For complete documentation, examples, and API reference, visit the [documentation site](https://subhash-malireddy.github.io/react-inline-editable/).

## License

MIT
npm package: @progressivelabs/mendel
Description: Postgres migrations for Node
Author: Progressive Labs
Latest version: 1.4.3
Deprecated: Mendel has been moved to @anylabs/mendel. Please update your dependency

# Mendel

[![Build Status](https://secure.travis-ci.org/progressivelabs/mendel.svg?branch=master)](http://travis-ci.org/progressivelabs/mendel)
[![npm](https://img.shields.io/npm/v/@progressivelabs/mendel.svg)](https://www.npmjs.com/package/progressivelabs/mendel)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![license](https://img.shields.io/github/license/progressivelabs/mendel.svg)](https://github.com/progressivelabs/mendel/blob/master/LICENSE)

Simple Postgres migrations for Node.

## Install

```sh
$ npm install @progressivelabs/mendel
```

## Usage

Add the following snippet to your NPM scripts:

```json
{
  "migrations": "mendel"
}
```

Execute migrations using:

```sh
npm run migrations
```

## Support

Mendel is free software.  If you encounter a bug with the library please open an
issue on the [github repo](https://github.com/progressivelabs/mendel). If you
have questions unanswered by the documentation please open an issue pointing out
how the documentation was unclear & we will do our best to make it better!

When you open an issue please provide:
- version of node
- version of postgres
- smallest possible snippet of code to reproduce the problem

## License

Copyright (c) 2010-2017 Progressive Labs (contact@progressivelabs.co)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
npm package: @progressivestudio/browserlist-config
Description: Shared browserlist configuration
Latest version: 1.0.0

# `@progressivestudio/browserslist-config`

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](../../LICENSE.md) [![npm version](https://badge.fury.io/js/%40progressivestudio%2Fbrowserslist-config.svg)](https://badge.fury.io/js/%40progressivestudio%2Fbrowserslist-config.svg)

Shareable [browserslist](https://github.com/ai/browserslist) configuration.

## Supported Browsers

| Browser                     | Version |
| --------------------------- | ------- |
| Chrome & Chrome for Android | last 3  |
| Firefox                     | last 3  |
| Opera                       | last 3  |
| Edge                        | last 3  |
| Safari                      | last 3  |
| iOS                         | >= 13.4 |

You can list all supported browsers by running `pnpm dlx browserslist "last 1 firefoxandroid versions, last 3 chrome versions, last 3 chromeandroid versions, last 3 firefox versions, last 3 opera versions, last 3 edge versions, last 3 safari versions, ios >= 13.4"`

## Installation

Install the module.

```shell
$ yarn add @progressivestudio/browserslist-config
```

## Usage

### package.json

```json
{
  "browserslist": ["extends @progressivestudio/browserslist-config"]
}
```
npm package: @progressivestudio/prettier-config
Description: Shared prettier configuration
Latest version: 1.0.0

# `@progressivestudio/prettier-config`

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](../../LICENSE.md) [![npm version](https://badge.fury.io/js/%40progressivestudio%2Fprettier-config.svg)](https://badge.fury.io/js/%40progressivestudio%2Fprettier-config.svg)

Shared prettier configuration

## Installation

```bash
$ pnpm add --dev @progressivestudio/prettier-config
```

## Usage

Shared prettier config comes bundled in `@progressivestudio/prettier-config`. To enable these rules, add a `prettier` property in your `package.json` and reference this shared config as follows:

```
"prettier": "@progressivestudio/prettier-config"
```

Previously, rules had been defined directly in a `.prettierrc` or `package.json`

Any previous `.prettierrc` should be removed in favour of the shared config.
npm package: @progressivestudio/ts-config
Description: A set of typescript configuration files that can be extended.
Latest version: 1.0.1

# `@progressivestudio/ts-config`

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](../../LICENSE.md) [![npm version](https://badge.fury.io/js/%40progressivestudio%2Fts-config.svg)](https://badge.fury.io/js/%40progressivestudio%2Fts-config.svg)


In TypeScript, the configuration file can extend from a base file. This package provided a few common base configuration files to simplify TypeScript project setup.

To read more about how this extensibility works. See [typescript handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends).

Below are two documentation we have also found useful to have on hand while setting up a configuration file.

- [`tsconfig.json`](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
- [Compiler Options](https://www.typescriptlang.org/docs/handbook/compiler-options.html)

## Installation

```bash
$ pnpm add --dev @progressivestudio/ts-config
```

## Usage

### React Application Project

To start, create a `tsconfig.json` in the root of your project.

A typical setup where the application sit in `[project root]/app` folder is as follow:

```json
{
  "extends": "@progressivestudio/ts-config/application.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": ".",
    "paths": {"*": ["*", "app/*"]}
  },
  "include": ["./app/**/*", "./client/**/*", "./server/**/*", "./tests/**/*"]
}
```

#### React Library Project

Similarly for a react library project. Create a `tsconfig.json` in the root of your project with a setup below assuming the library code sit in `[project root]/src` folder.

```json
{
  "extends": "@progressivestudio/ts-config/library.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "rootDir": "."
  },
  "include": ["./src/**/*"]
}
```

#### Project that run in the browser

A configuration file is provided that included styles setup and a more conservative build target.

```json
{
  "extends": "@progressivestudio/ts-config/dom.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": "."
  }
}
```

#### All Other Project

A base configuration file is also provided if the above does not fit your need.

```json
{
  "extends": "@progressivestudio/ts-config/base.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": "."
  }
}
```

#### Common Got Ya

##### Type Checking does not honour `skipLibCheck: true` setting

There are times when the type failure occur inside of a library your project is consuming, and having `skipLibCheck: true` does not resolved it. In this scenario, add an `exclude` option to your `tsconfig.json`.

eg.

```json
{
  "extends": "@progressivestudio/ts-config/base.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": ".",
    "exclude": ["./node_modules/**/*"]
  }
}
```