open-index/open-npm huggingface dataset:
npm package: @shared-cms/alert
Description: A reusable alert component built with Lit, TypeScript, and TailwindCSS. Perfect for user feedback and notifications.
Latest version: 1.0.10

# @shared-cms/alert

A reusable alert component built with Lit, TypeScript, and TailwindCSS. Perfect for displaying important information and user feedback.

## Installation

```bash
npm install @shared-cms/alert
```

## Usage

### React/Remix/Next.js

```jsx
import SharedAlert from '@shared-cms/alert/react';
import '@shared-cms/alert/dist/style.css';

function App() {
  const [visible, setVisible] = useState(true);

  return (
    <SharedAlert
      variant="info"
      dismissible
      visible={visible}
      onDismiss={() => setVisible(false)}
    >
      This is an informational message!
    </SharedAlert>
  );
}
```

### Angular/Vanilla JS

```typescript
import '@shared-cms/alert/dist/style.css';

// HTML Template
<shared-alert
  variant="info"
  dismissible
  (dismiss)="handleDismiss($event)"
>
  This is an informational message!
</shared-alert>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'info' | 'success' | 'warning' | 'error'` | `'info'` | Alert style variant |
| `dismissible` | `boolean` | `false` | Show dismiss button |
| `visible` | `boolean` | `true` | Control visibility |
| `className` | `string` | `''` | Additional CSS classes |
| `onDismiss` | `() => void` | - | Dismiss event handler |
| `onAction` | `() => void` | - | Action event handler |

## Variants

- **info**: Blue background for informational messages
- **success**: Green background for success messages
- **warning**: Yellow background for warning messages
- **error**: Red background for error messages

## Accessibility

- Proper ARIA `role="alert"` attribute
- Keyboard navigation support
- Screen reader friendly
- Focus management for dismiss button

## Styling

Since Shadow DOM is disabled, you can override styles:

```css
.shared-cms-alert {
  border-radius: 8px !important;
}

.shared-cms-info {
  background-color: #eff6ff !important;
}
```

## License

MIT License
npm package: @shared-cms/button-react-standalone-ssr-safe
Description: SSR-safe Button React component from Shared CMS UI library
Latest version: 1.0.14

# React UI Components Standalone Bundle

This is a standalone bundle that includes all Shared CMS UI components in a single package. No external dependencies required for the components themselves.

## Installation

```bash
npm install @shared-cms/ui-react-standalone
```

## Usage

### For React Bundle (Selected)
```tsx
import { ReactSharedAlert, ReactSharedButton, ReactSharedBadge } from "@shared-cms/ui-react-standalone";
import "@shared-cms/ui-react-standalone/style.css";

function App() {
  return (
    <div>
      <ReactSharedAlert message="Hello from React!" variant="info" />
      <ReactSharedButton variant="primary">Click me</ReactSharedButton>
      <ReactSharedBadge variant="success">New</ReactSharedBadge>
    </div>
  );
}
```

### For Lit Bundle (Not this package)
```tsx
import { SharedAlert, SharedButton, SharedBadge } from "@shared-cms/ui-react-standalone";
import "@shared-cms/ui-react-standalone/style.css";

// Use in any framework or vanilla JavaScript
const alert = document.createElement('shared-alert');
alert.message = 'Hello from Lit!';
alert.variant = 'info';
document.body.appendChild(alert);
```

## Available Components

- **Alert**: Display alert messages with different variants (info, success, warning, error)
- **Button**: Customizable buttons with various styles and states
- **Badge**: Small status indicators and labels

## Features

- 🚀 **All components included** - No need to install individual packages
- 💨 **Zero dependencies** - Components are fully self-contained
- 🎨 **Styled with TailwindCSS** - Consistent design system
- 📱 **Responsive design** - Works on all screen sizes
- 🔧 **TypeScript support** - Full type definitions included
- 🎯 **Framework agnostic** - Lit components work with any framework

## Styling

Include the CSS file in your application:

```bash
import "@shared-cms/ui-react-standalone/style.css";
```

The bundle includes all necessary styles for all components.

## Peer Dependencies


- React >= 16.8.0
- React-DOM >= 16.8.0


## License

MIT License - see LICENSE file for details.
npm package: @shared-cms/tooltip
Description: A reusable tooltip component built with Lit, TypeScript, and TailwindCSS. Perfect for user feedback and notifications.
Latest version: 1.0.1

# @shared-cms/tooltip

A reusable tooltip component built with Lit, TypeScript, and TailwindCSS. Perfect for displaying important information and user feedback.

## Installation

```bash
npm install @shared-cms/tooltip
```

## Usage

### React/Remix/Next.js

```jsx
import SharedTooltip from '@shared-cms/tooltip/react';
import '@shared-cms/tooltip/dist/style.css';

function App() {
  const [visible, setVisible] = useState(true);

  return (
    <SharedTooltip
      variant="info"
      dismissible
      visible={visible}
      onDismiss={() => setVisible(false)}
    >
      This is an informational message!
    </SharedTooltip>
  );
}
```

### Angular/Vanilla JS

```typescript
import '@shared-cms/tooltip/dist/style.css';

// HTML Template
<shared-tooltip
  variant="info"
  dismissible
  (dismiss)="handleDismiss($event)"
>
  This is an informational message!
</shared-tooltip>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'info' | 'success' | 'warning' | 'error'` | `'info'` | Alert style variant |
| `dismissible` | `boolean` | `false` | Show dismiss button |
| `visible` | `boolean` | `true` | Control visibility |
| `className` | `string` | `''` | Additional CSS classes |
| `onDismiss` | `() => void` | - | Dismiss event handler |
| `onAction` | `() => void` | - | Action event handler |

## Variants

- **info**: Blue background for informational messages
- **success**: Green background for success messages
- **warning**: Yellow background for warning messages
- **error**: Red background for error messages

## Accessibility

- Proper ARIA `role="alert"` attribute
- Keyboard navigation support
- Screen reader friendly
- Focus management for dismiss button

## Styling

Since Shadow DOM is disabled, you can override styles:

```css
.shared-cms-tooltip {
  border-radius: 8px !important;
}

.shared-cms-info {
  background-color: #eff6ff !important;
}
```

## License

MIT License
npm package: @shared-cms/ui
Description: Complete UI component library with all Shared CMS Lit components
Latest version: 1.0.10

# Shared UI Components Monorepo

A monorepo for building **shared UI components** using **Lit**, **React wrappers**, and **TailwindCSS** that can be used across multiple frameworks.

## Quick Start

### Install Dependencies
```bash
npm install
```

### Build All Components
```bash
npm run build-all
```

### Update Versions
```bash
# Patch version (1.0.0 → 1.0.1)
npm run version-sync patch

# Minor version (1.0.0 → 1.1.0)
npm run version-sync minor

# Major version (1.0.0 → 2.0.0)
npm run version-sync major
```

### Publish All Packages
```bash
npm run publish-all
```

## Usage

### In React
```jsx
import { SharedButton as Button, SharedCard as Card } from '@shared-cms/ui';

function App() {
  const handleClick = () => alert('Button clicked!');

  return (
    <div>
      <Button
        label="Click me"
        variant="primary"
        onClick={handleClick}
      />
      <Card
        title="Card Title"
        onCardClick={(e) => console.log('Card clicked', e.detail)}
        footer={<Button label="Save" variant="primary" />}
      >
        <p>Card content goes here</p>
      </Card>
    </div>
  );
}
```

### In Angular/Vue (direct web components)
```html
<shared-button label="Click me" variant="primary"></shared-button>
<shared-card title="Card Title">
  <p>Card content goes here</p>
  <div slot="footer">
    <shared-button label="Save" variant="primary"></shared-button>
  </div>
</shared-card>
```

### Direct HTML
```html
<!DOCTYPE html>
<html>
<head>
    <script type="module" src="your-built-components.js"></script>
</head>
<body>
    <shared-button label="Click me" variant="primary"></shared-button>
    <shared-card title="Card Title" show-footer="true">
        <p>Card content goes here</p>
        <div slot="footer">
            <shared-button label="Save" variant="primary"></shared-button>
        </div>
    </shared-card>

    <script>
        document.addEventListener('button-click', (e) => console.log('Button clicked!', e.detail));
        document.addEventListener('card-click', (e) => console.log('Card clicked!', e.detail));
    </script>
</body>
</html>
```

## Architecture

```
shared-ui/
├── packages/
│   ├── button/     # Individual button component
│   ├── card/       # Individual card component
│   └── index/      # Bundle of all components
├── scripts/        # Build and publish automation
├── dist/          # Build outputs
└── ...            # Configuration files
```

## Features

- ✅ **Cross-framework** compatible (React, Angular, Vue)
- 🎨 **TailwindCSS bundled** into Shadow DOM
- 🧩 **Modular** - build/publish individual components
- 🚀 **Version synchronization** across all packages
- ⚛️ **React wrappers** included
- 🧱 **Shadow DOM isolation** prevents CSS conflicts

## Development

### Individual Component Development
```bash
cd packages/button
npm run build
```

### Link for Local Testing
```bash
# In this repo
cd packages/button
npm link

# In consumer project
npm link @shared-cms/button
```
npm package: @shared-cms/ui-react
Description: Complete UI component library with all Shared CMS React components
Latest version: 1.0.17

# Shared UI Components Monorepo

A monorepo for building **shared UI components** using **Lit**, **React wrappers**, and **TailwindCSS** that can be used across multiple frameworks.

## Quick Start

### Install Dependencies
```bash
npm install
```

### Build All Components
```bash
npm run build-all
```

### Update Versions
```bash
# Patch version (1.0.0 → 1.0.1)
npm run version-sync patch

# Minor version (1.0.0 → 1.1.0)
npm run version-sync minor

# Major version (1.0.0 → 2.0.0)
npm run version-sync major
```

### Publish All Packages
```bash
npm run publish-all
```

## Usage

### In React
```jsx
import { SharedButton as Button, SharedCard as Card } from '@shared-cms/ui';

function App() {
  const handleClick = () => alert('Button clicked!');

  return (
    <div>
      <Button
        label="Click me"
        variant="primary"
        onClick={handleClick}
      />
      <Card
        title="Card Title"
        onCardClick={(e) => console.log('Card clicked', e.detail)}
        footer={<Button label="Save" variant="primary" />}
      >
        <p>Card content goes here</p>
      </Card>
    </div>
  );
}
```

### In Angular/Vue (direct web components)
```html
<shared-button label="Click me" variant="primary"></shared-button>
<shared-card title="Card Title">
  <p>Card content goes here</p>
  <div slot="footer">
    <shared-button label="Save" variant="primary"></shared-button>
  </div>
</shared-card>
```

### Direct HTML
```html
<!DOCTYPE html>
<html>
<head>
    <script type="module" src="your-built-components.js"></script>
</head>
<body>
    <shared-button label="Click me" variant="primary"></shared-button>
    <shared-card title="Card Title" show-footer="true">
        <p>Card content goes here</p>
        <div slot="footer">
            <shared-button label="Save" variant="primary"></shared-button>
        </div>
    </shared-card>

    <script>
        document.addEventListener('button-click', (e) => console.log('Button clicked!', e.detail));
        document.addEventListener('card-click', (e) => console.log('Card clicked!', e.detail));
    </script>
</body>
</html>
```

## Architecture

```
shared-ui/
├── packages/
│   ├── button/     # Individual button component
│   ├── card/       # Individual card component
│   └── index/      # Bundle of all components
├── scripts/        # Build and publish automation
├── dist/          # Build outputs
└── ...            # Configuration files
```

## Features

- ✅ **Cross-framework** compatible (React, Angular, Vue)
- 🎨 **TailwindCSS bundled** into Shadow DOM
- 🧩 **Modular** - build/publish individual components
- 🚀 **Version synchronization** across all packages
- ⚛️ **React wrappers** included
- 🧱 **Shadow DOM isolation** prevents CSS conflicts

## Development

### Individual Component Development
```bash
cd packages/button
npm run build
```

### Link for Local Testing
```bash
# In this repo
cd packages/button
npm link

# In consumer project
npm link @shared-cms/button
```
npm package: @shared-cms/ui-react-standalone
Description: Standalone React UI component library with all Shared CMS React components embedded
Latest version: 1.0.43

# React UI Components Standalone Bundle

This is a standalone bundle that includes all Shared CMS UI components in a single package. No external dependencies required for the components themselves.

## Installation

```bash
npm install @shared-cms/ui-react-standalone
```

## Usage

### For React Bundle (Selected)
```tsx
import { ReactSharedAlert, ReactSharedButton, ReactSharedBadge } from "@shared-cms/ui-react-standalone";
import "@shared-cms/ui-react-standalone/style.css";

function App() {
  return (
    <div>
      <ReactSharedAlert message="Hello from React!" variant="info" />
      <ReactSharedButton variant="primary">Click me</ReactSharedButton>
      <ReactSharedBadge variant="success">New</ReactSharedBadge>
    </div>
  );
}
```

### For Lit Bundle (Not this package)
```tsx
import { SharedAlert, SharedButton, SharedBadge } from "@shared-cms/ui-react-standalone";
import "@shared-cms/ui-react-standalone/style.css";

// Use in any framework or vanilla JavaScript
const alert = document.createElement('shared-alert');
alert.message = 'Hello from Lit!';
alert.variant = 'info';
document.body.appendChild(alert);
```

## Available Components

- **Alert**: Display alert messages with different variants (info, success, warning, error)
- **Button**: Customizable buttons with various styles and states
- **Badge**: Small status indicators and labels

## Features

- 🚀 **All components included** - No need to install individual packages
- 💨 **Zero dependencies** - Components are fully self-contained
- 🎨 **Styled with TailwindCSS** - Consistent design system
- 📱 **Responsive design** - Works on all screen sizes
- 🔧 **TypeScript support** - Full type definitions included
- 🎯 **Framework agnostic** - Lit components work with any framework

## Styling

Include the CSS file in your application:

```bash
import "@shared-cms/ui-react-standalone/style.css";
```

The bundle includes all necessary styles for all components.

## Peer Dependencies


- React >= 16.8.0
- React-DOM >= 16.8.0


## License

MIT License - see LICENSE file for details.
npm package: @shared-cms/ui-standalone
Description: Standalone Lit UI component library with all Shared CMS Lit components embedded
Latest version: 1.0.13

# Lit UI Components Standalone Bundle

This is a standalone bundle that includes all Shared CMS UI components in a single package. No external dependencies required for the components themselves.

## Installation

```bash
npm install @shared-cms/ui-standalone
```

## Usage

### For React Bundle (Not this package)
```tsx
import { ReactSharedAlert, ReactSharedButton, ReactSharedBadge } from "@shared-cms/ui-standalone";
import "@shared-cms/ui-standalone/style.css";

function App() {
  return (
    <div>
      <ReactSharedAlert message="Hello from React!" variant="info" />
      <ReactSharedButton variant="primary">Click me</ReactSharedButton>
      <ReactSharedBadge variant="success">New</ReactSharedBadge>
    </div>
  );
}
```

### For Lit Bundle (Selected)
```tsx
import { SharedAlert, SharedButton, SharedBadge } from "@shared-cms/ui-standalone";
import "@shared-cms/ui-standalone/style.css";

// Use in any framework or vanilla JavaScript
const alert = document.createElement('shared-alert');
alert.message = 'Hello from Lit!';
alert.variant = 'info';
document.body.appendChild(alert);
```

## Available Components

- **Alert**: Display alert messages with different variants (info, success, warning, error)
- **Button**: Customizable buttons with various styles and states
- **Badge**: Small status indicators and labels

## Features

- 🚀 **All components included** - No need to install individual packages
- 💨 **Zero dependencies** - Components are fully self-contained
- 🎨 **Styled with TailwindCSS** - Consistent design system
- 📱 **Responsive design** - Works on all screen sizes
- 🔧 **TypeScript support** - Full type definitions included
- 🎯 **Framework agnostic** - Lit components work with any framework

## Styling

Include the CSS file in your application:

```bash
import "@shared-cms/ui-standalone/style.css";
```

The bundle includes all necessary styles for all components.

## Peer Dependencies


- Lit >= 3.1.0


## License

MIT License - see LICENSE file for details.