open-index/open-npm huggingface dataset:
npm package: @stagecraft/react-clippy
Description: Simple copy to clipboard component
Author: Marcus Lindfeldt
Latest version: 1.0.1

# react-clippy
[![npm](https://img.shields.io/npm/v/react-web-tabs.svg?style=flat-square)](https://www.npmjs.com/package/@stagecraft/react-clippy)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/stagecraft/react-clippy/master/LICENCE)

A Simple Copy to Clipboard React component.

## Installation
> Note! This package depends on [React](https://facebook.github.io/react/) ^16

Using [npm](https://www.npmjs.com/):
```bash
npm install --save @stagecraft/react-clippy
```
Using [yarn](https://yarnpkg.com/en/):
```bash
yarn add @stagecraft/react-clippy
```

## Usage
Clippy is just a [Render Prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) with
two functions `setTarget` and `setTrigger`. Simply pass in your trigger and target elements and thats it.
```
import React from 'react';
import Clippy from 'react-clippy';

const App = () => (
  <Clippy>
    {(setTrigger, setTarget) => (
      <div>
        <span ref={el => setTarget(el)}>Revive clippy!</span>
        <button ref={el => setTrigger(el)}>Copy</button>
      </div>
    )}
  </Clippy>
);

export default App;
```


# API
`<Clippy>`

| Prop        | Type | Description                                        |
| ----------- |:----:| :--------------------------------------------------|
| onCopy      | func | callback that fires when text has been copied      |
| noSelection | bool | Disable selection of the copied text               |
| children    | func | The render prop that should return a React element |
npm package: @stagehq/ui
Description: Design System for Stage Extensions
Latest version: 0.1.34

<p align="center">
  <img src="images/logo.png" height="128">
  <h1 align="center">Design System for Stage</h1>
</p>

<p align="center">
  <a aria-label="Sign up for Stage Beta" href="https://tally.so/r/w4a70o">
    <img alt="" src="https://img.shields.io/badge/Sign%20up%20for%20Stage%20(beta)-black.svg?style=for-the-badge">
  </a>
  <!-- <a aria-label="Join the community on Discord" href="https://getstage.app/community">
    <img alt="" src="https://img.shields.io/badge/Join%20the%20community-black.svg?style=for-the-badge&logo=Discord">
  </a> -->
</p>

[Stage](https://getstage.app/) lets you build your next-gen professional website fast. This Design System provides you with the building blocks which let you build extensions with simple & well-designed components. It also includes documentation and examples of how to extend Stage using React.

![Header](images/header.png)

## Getting Started

⚠️ Currently under construction – Visit [https://developers.getstage.app](https://developers.getstage.app) to get started with our API. If you want to discover and install extensions, check out [our extension collection](https://getstage.app/) (soon online).

## Feedback

Stage wouldn't be where it is without the feedback from our community, so we would be happy to hear what you think of the API / Developer Experience and how we can improve. Please use [GitHub issues](https://github.com/stagehq/ui/issues/new/choose) for everything API related (bugs, improvements suggestions, developer experience, docs, etc). We have a overview [templates](https://developers.getstage.app/api-reference/overview) that should help you get started.

## Sign up for Stage Beta

We are currently in beta and would love to have you onboard. [Sign up here](https://tally.so/r/w4a70o) to get early access.
npm package: @stagen-leadership-academy/ui
Description: Stagen OS UI Library - A comprehensive TailwindCSS-based design system for rapid prototyping
Author: Stagen
Latest version: 1.0.2

# Stagen OS UI Library

A comprehensive TailwindCSS-based design system for rapid prototyping at Stagen. Built with TypeScript, Radix UI, and class-variance-authority (CVA).

## Installation

\`\`\`bash
npm install @stagen/ui
# or
yarn add @stagen/ui
# or
pnpm add @stagen/ui
\`\`\`

### Peer Dependencies

\`\`\`bash
npm install @radix-ui/react-slot class-variance-authority clsx lucide-react tailwind-merge tailwindcss
\`\`\`

## Quick Start

### 1. Configure Tailwind CSS

In your \`tailwind.config.ts\`:

\`\`\`typescript
import { stagenPreset } from '@stagen/ui/preset'

export default {
  presets: [stagenPreset],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@stagen/ui/**/*.{js,ts,jsx,tsx}', // Important for proper purging
  ],
}
\`\`\`

### 2. Import Styles

In your main CSS file (e.g., \`app.css\` or \`globals.css\`):

\`\`\`css
@import '@stagen/ui/styles';
\`\`\`

### 3. Use Components

\`\`\`tsx
import { buttonVariants } from '@stagen/ui/components'
import { cn } from '@stagen/ui/lib'
import { Mail } from '@stagen/ui/icons'

export function MyButton() {
  return (
    <button className={cn(buttonVariants({ variant: 'default', size: 'lg' }))}>
      <Mail />
      Send Email
    </button>
  )
}
\`\`\`

## Features

### 🎨 Complete Theme System
- **OKLCH Color Space** - Modern color system with better perceptual uniformity
- **Dark Mode Support** - Fully themed for light and dark modes
- **CSS Variables** - Easy customization through CSS custom properties
- **Comprehensive Tokens** - Primary, secondary, muted, accent, destructive, and more

### 🧩 Component Variants (CVA)
Pre-built variant configurations for consistent styling:

- **Button** - 6 variants × 4 sizes (24 combinations)
- **Badge** - 4 variants
- **Banner** - 4 variants (info, info-blue, error, checked)
- **Input, Select, Textarea** - Consistent form styling
- **Dialog, Card** - Layout components

### 🎯 Icon System
Curated Lucide React icons with utility classes

### 🛠️ Utilities
Helper functions for common tasks: cn, formatDate, truncate, debounce, isEmpty

## License

MIT
npm package: @stagepass/loader
Description: Universal loader for Stagepass - injects local files into Webflow projects
Latest version: 1.2.0

# `@stagepass/loader`

Universal browser runtime for Stagepass.

The loader reads Stagepass session state and swaps tagged production assets with local `.sp` assets during development. It also exposes a runtime API via `sp` / `stagepass`.

## Install

```bash
npm install @stagepass/loader
```

## CDN Usage

```html
<script src="https://cdn.jsdelivr.net/npm/@stagepass/loader@1/dist/loader.min.js"></script>
```

## What it does

- Processes `script[data-stagepass]` and `link[rel="stylesheet"][data-stagepass]`.
- Uses `data-src` / `data-href` as source URL.
- Uses `data-stagepass-path` as optional local path override.
- Adds cache busting in local mode via `?_cb=<timestamp>`.
- Optional production cache busting with `data-stagepass-cachebust="true"`.

## Runtime API

Preferred global is `sp` (aliases: `stagepass`, `window.stagepass`).

- `sp.vars.isLocal`
- `sp.vars.env`
- `sp.vars.domain`
- `sp.vars.timestamp`
- `sp.vars.version`
- `sp.vars.client.*` (theme/browser/os/device/viewport/locale/capabilities)
- `sp.resolveLocalUrl(relativePath)`
- `sp.log(...)`, `sp.warn(...)`, `sp.error(...)`

Deprecated aliases (still available): `splog`, `spwarn`, `sperror`.

## URL Modes

- `?stagepass=my-project.sp` - activate local swapping.
- `?stagepass=debug` - logging only.
- `?stagepass=off` - deactivate session.

## Related Packages

- `@stagepass/cli` - creates and manages `.sp` infrastructure.
- `@stagepass/modules` - optional modules that extend the loader.

## Repository

- Full docs and examples: [stagepass repository](https://github.com/arobertherz/stagepass)