open-index/open-npm huggingface dataset:
npm package: @oppulence/design-system
Description: Design system for Oppulence - shadcn-style components with Tailwind CSS v4
Latest version: 1.1.14

# @oppulence/design-system

A shadcn-style design system with Tailwind CSS v4. Ships raw TypeScript/TSX source files that your app compiles directly.

## Installation

```bash
npm install @oppulence/design-system
# or
bun add @oppulence/design-system
```

## Setup in Next.js

### 1. Configure Tailwind CSS

Add the design system to your `tailwind.config.ts` content paths:

```ts
// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    // Include the design system components
    "./node_modules/@oppulence/design-system/src/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of your config
};

export default config;
```

### 2. Import Global Styles

Import the design system's CSS in your root layout:

```tsx
// app/layout.tsx
import "@oppulence/design-system/globals.css";
// or import alongside your own globals
import "./globals.css";
```

### 3. Configure Next.js to Transpile

Add the package to `transpilePackages` in your `next.config.ts`:

```ts
// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@oppulence/design-system"],
};

export default nextConfig;
```

## Usage

Import components directly:

```tsx
import {
  Button,
  Card,
  CardHeader,
  CardContent,
} from "@oppulence/design-system";

export function MyComponent() {
  return (
    <Card>
      <CardHeader>Hello</CardHeader>
      <CardContent>
        <Button variant="outline">Click me</Button>
      </CardContent>
    </Card>
  );
}
```

## Available Exports

| Export                                     | Description                        |
| ------------------------------------------ | ---------------------------------- |
| `@oppulence/design-system`                 | All components                     |
| `@oppulence/design-system/cn`              | `cn()` utility for merging classes |
| `@oppulence/design-system/globals.css`     | Global CSS with theme variables    |
| `@oppulence/design-system/tailwind.config` | Tailwind configuration             |

## Components

The design system includes:

- **Layout**: `Container`, `Stack`, `Grid`, `PageLayout`, `Section`
- **Typography**: `Heading`, `Text`
- **Forms**: `Button`, `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroup`, `Switch`, `Label`, `Field`
- **Data Display**: `Card`, `Badge`, `Avatar`, `Table`, `Progress`
- **Feedback**: `Alert`, `AlertDialog`, `Dialog`, `Sheet`, `Drawer`, `Tooltip`, `Popover`
- **Navigation**: `Tabs`, `Breadcrumb`, `Pagination`, `NavigationMenu`, `DropdownMenu`
- **Utility**: `Separator`, `Skeleton`, `Spinner`, `ScrollArea`, `Collapsible`

## Design Principles

- **No className prop**: Components use variants and props, not className overrides
- **Semantic tokens**: Uses CSS variables for consistent theming
- **Dark mode**: Full dark mode support via `next-themes`
- **Accessible**: Built on Radix UI primitives

## License

MIT
npm package: @oppulence/stripe-sync-engine-sdk
Description: TypeScript SDK for Stripe Sync Engine - REST API for managing Stripe data synchronization and tenant operations
Author: Oppulence Engineering
Latest version: 1.18.3

# @oppulence/stripe-sync-sdk

TypeScript SDK for Stripe Sync Engine - REST API for managing Stripe data synchronization and tenant operations.

## Installation

```bash
npm install @oppulence/stripe-sync-sdk
# or
yarn add @oppulence/stripe-sync-sdk
# or
pnpm add @oppulence/stripe-sync-sdk
```

## Usage

```typescript
import { Configuration, TenantsApi, StripeCustomersApi } from '@oppulence/stripe-sync-sdk'

// Configure the API client
const config = new Configuration({
  basePath: 'https://your-api-endpoint.com',
  apiKey: 'your-api-key',
})

// Use the Tenants API
const tenantsApi = new TenantsApi(config)
const tenants = await tenantsApi.listTenants()

// Use the Stripe Customers API
const customersApi = new StripeCustomersApi(config)
const customers = await customersApi.apiV1StripeCustomersGet()
```

## Available APIs

- `BillingApi` - Billing management
- `BusinessMetricsApi` - Business metrics and analytics
- `HealthApi` - Health check endpoints
- `RecurringTransactionsApi` - Recurring transaction management
- `StripeChargesApi` - Stripe charges data
- `StripeCustomersApi` - Stripe customers data
- `StripeInvoicesApi` - Stripe invoices data
- `StripePaymentIntentsApi` - Stripe payment intents
- `StripePricesApi` - Stripe prices data
- `StripeProductsApi` - Stripe products data
- `StripeSubscriptionsApi` - Stripe subscriptions data
- `StripeTransactionsApi` - Stripe transactions data
- `TenantsApi` - Multi-tenant management
- `TransactionsApi` - Transaction management
- `WebhooksApi` - Webhook management

## Authentication

The SDK supports multiple authentication methods:

```typescript
// API Key authentication
const config = new Configuration({
  apiKey: 'your-api-key',
})

// Bearer token authentication
const config = new Configuration({
  accessToken: 'your-bearer-token',
})

// Basic authentication
const config = new Configuration({
  username: 'your-username',
  password: 'your-password',
})
```

## License

MIT
npm package: @opqa/uiui
Description: [![NPM](https://img.shields.io/npm/v/@opqa/uiui.svg)](https://www.npmjs.com/package/@opqa/uiui) [![npm](https://img.shields.io/npm/dm/@opqa/uiui.svg)](https://www.npmjs.com/package/@opqa/uiui) ![GitHub](https://img.shields.io/github/license/qwertyopqa/uiu
Author: Goncalo Tavares
Latest version: 0.1.10

# UiUi

[![NPM](https://img.shields.io/npm/v/@opqa/uiui.svg)](https://www.npmjs.com/package/@opqa/uiui)
[![npm](https://img.shields.io/npm/dm/@opqa/uiui.svg)](https://www.npmjs.com/package/@opqa/uiui)
![GitHub](https://img.shields.io/github/license/qwertyopqa/uiui)

UiUi aims to provide the most minimalistic + small yet readable Gui.
It's highly dependent on glslcv a minimalistic implementation of 2D GLSL shader code into a canvas element.

What it does:
- Creates a GUI based on a config file that calls back any state update. Great for tweaking params and who know what more
- Parses a GLSL shader file w/ UiUi comments and displays it.

You can check it [Here](https://uiui-examples.vercel.app/)


It should/will support:
- extendable component (you should be able to define new components)
- component replacement (you can define a new slider codebase for the component type 'slider')
- theming (altering current css vars or/and the components css modules )

## Install
Unfortunatelly this proj is still highly dependent on the [react-typescript-library template](https://github.com/alioguzhan/react-typescript-library). So yarn...
```bash
yarn add uiui
```

## Usage

You can check the 'example' folder. But in basic terms:

@SomeReactTag.tsx
```tsx

  import { UiUi } from '@opqa/uiui';
  ...
  // Import a UiUi config file
  const uiuiData = require('{DATA-URL}.json');
  return (<UiUi.Root data={uiuiData}/>)
  ...
  // or, frag-shader (a-la-shadertoy) with UiUiComments
  return (<UiUi.Canvas url="{SHADER-URL}.glsl" />)

```

You can check the [Examples Json File](https://github.com/qwertyopqa/uiui-examples/blob/main/src/UiUi.testdata.b.json)
+ the UiUiComment Structure on a [sample shader](https://github.com/qwertyopqa/uiui-examples/blob/main/public/shader.frag.glsl)


## API / Props
TBC

## License
MIT © [Goncalo Tavares](https://github.com/qwertyopqa)
npm package: @opqrapp/sapling-mcp
Description: MCP Server for Sapling SCM - A Node.js implementation demonstrating custom tools integration
Author: Jaeho Lee
Latest version: 1.0.2

# Sapling MCP Server

A Node.js implementation of Model Context Protocol (MCP) server for Sapling SCM.

## Installation

```bash
npm install @opqrapp/sapling-mcp
```

## Usage

You can run the MCP server directly using npx:

```bash
npx @opqrapp/sapling-mcp
```

## Development

For local development:

1. Install dependencies:

```bash
npm install
```

2. Build the project:

```bash
npm run build
```

3. Run in development mode:

```bash
npm run dev
```

## Cursor Integration

```json
{
  "mcpServers": {
    "sapling": {
      "command": "npx",
      "args": ["-y", "@opqrapp/sapling-mcp"]
    }
  }
}
```

Now you can select "Sapling MCP" as your MCP server in Cursor settings.

## License

This MCP server is licensed under the MIT License. This means you are free to use, modify, and distribute the software, subject to the terms and conditions of the MIT License. For more details, please see the LICENSE file in the project repository.
npm package: @opra-app/mcp
Description: MCP server for OPRA's business and discount data
Author: OPRA
Latest version: 2.0.1

# OPRA MCP Server

This is a Model Context Protocol (MCP) server implementation that provides access to OPRA's business and discount data. The server exposes various tools that allow your client of choice to interact with OPRA's data programmatically.

## Setup Instructions

1. Generate an API key at https://opra.no/profil

2. Configure Claude Desktop:
   - Open Claude Desktop
   - Go to Settings > Developer
   - Click "Edit Config"
   - Paste in the following config:
```json
{
  "mcpServers": {
    "opra": {
      "command": "npx",
      "args": [
        "-y", "@opra-app/mcp"
      ],
      "env": {
        "OPRA_API_KEY": "<your api key>",
      }
    }
  }
}

   ```

3. Restart Claude Desktop to apply the changes

## Usage

The MCP server provides quite a few tools for you to explore discounts, businesses, dicounts in a given city and a lot more.

Restart your Claude Desktop app, and start asking away!

<details>
<summary>If you're a developer, here's how to get started</summary>
## Local Development

1. Clone the repository:
   ```bash
   git clone https://github.com/your-username/opra-mcp.git
   cd opra-mcp
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Build the project:
   ```bash
   npm run build
   ```

4. Make changes to the source code in the `src` directory

5. Rebuild after making changes:
   ```bash
   npm run build
   ```

## Project Structure

- `src/`: Source code directory
  - `tools/`: Individual tool implementations
  - `api.ts`: API client implementation
  - `env.ts`: Environment configuration
  - `index.ts`: Main entry point

## Dependencies

- `@modelcontextprotocol/sdk`: MCP SDK for implementing the protocol
- `zod`: Runtime type checking and validation

## License

MIT
</details>
npm package: @opral/markdown-wc-doc-elements
Description: --- imports:    - https://cdn.jsdelivr.net/npm/@opral/markdown-wc/dist/markdown-wc-embed.js ---
Latest version: 0.3.2

---
imports: 
  - https://cdn.jsdelivr.net/npm/@opral/markdown-wc/dist/markdown-wc-embed.js
---

# Markdown WC Doc Elements (Documentation Elements)

This package provides a set of custom elements that can be used to write documentation. 

## Usage

Import the custom elements from JSDelivr and use them in markdown-wc. Replace the dist/*.js with the custom element you want to use.

```markdown
---
imports:
  - https://cdn.jsdelivr.net/npm/@opral/markdown-wc-doc-elements/dist/doc-figure.js
---

<doc-figure src="https://example.com/image.png"></doc-figure>
```

## Elements

<markdown-wc-embed src="./src/doc-accordion.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-callout.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-comment.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-comments.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-copy.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-feature.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-features.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-figure.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-header.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-icon.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-link.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-links.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-slider.md"></markdown-wc-embed>
<markdown-wc-embed src="./src/doc-video.md"></markdown-wc-embed>
npm package: @oprdev/cloudflare-r2-storage
Description: Cloudflare R2 storage
Author: Oscar Perez Romero - @oscarprdev
Latest version: 1.0.3

# Cloudflare R2 storage

A simple way to manage files using Cloudflare R2 storage

## Features

- Upload files
- List files
- Delete files

## Documentation

First, start installing the package in your project:

```javascript
npm i @oprdev/cloudflare-r2-storage
```

Second, retrieve the variables to connect the package with Cloudflare storage.

> [!IMPORTANT]
> To start using the package you will need from Cloudflare the following variables:
>
> - Cloudflare_access_key_ID
> - Cloudflare_access_key
> - Bucket name
>
> Please check it out the [Cloudflare Documentation](https://developers.cloudflare.com/fundamentals/api/get-started/create-token/)

## How it works

> [!TIP]
> Key value is created from Project and Id

```javascript
const bucket = new Bucket({
  endpoint,
  accessKeyId,
  secretAccessKey,
  bucketName,
});

// Upload file
await bucket.uploadFile({
  file,
  id: 'your-file-id',
  contentType: 'image/webp',
  project: 'your-project-name',
});

// Get file by project
await bucket.getKeysByEntity({
  entity: 'your-project-name',
});

// Delete file
await bucket.deleteItemByKey({
  key: 'your-project-name/your-file-id',
});
```