open-index/open-npm huggingface dataset:
npm package: @simpleapps-com/augur-config
Description: Shared tooling configuration presets for Augur ecommerce sites
Latest version: 2.2.29

# @simpleapps-com/augur-config

> Shared tooling configuration presets for Augur ecommerce sites

> Auto-generated. Do not edit manually. Regenerate with: `pnpm run generate-exports`

Part of the **@simpleapps-com/augur-\*** platform. All packages use fixed versioning (same version number).

## Install

```bash
pnpm add @simpleapps-com/augur-config
```

## Presets

| Import | Type |
|--------|------|
| `@simpleapps-com/augur-config/eslint` | config preset |
| `@simpleapps-com/augur-config/eslint/next` | config preset |
| `@simpleapps-com/augur-config/prettier` | config preset |
| `@simpleapps-com/augur-config/prettier/next` | config preset |
| `@simpleapps-com/augur-config/tsconfig/base` | tsconfig preset |
| `@simpleapps-com/augur-config/tsconfig/react` | tsconfig preset |
| `@simpleapps-com/augur-config/tsconfig/react-native` | tsconfig preset |
| `@simpleapps-com/augur-config/tsconfig/next` | tsconfig preset |
| `@simpleapps-com/augur-config/lighthouse` | config preset |

## Related Packages

All packages use fixed versioning -- same version number across the platform.

| Package | Description |
|---------|-------------|
| `@simpleapps-com/augur-core` | Universal foundation for Augur packages — proxy infrastructure, cache keys, method classification, shared types |
| `@simpleapps-com/augur-hooks` | Cross-platform React Query hooks and Zustand stores for Augur ecommerce sites |
| `@simpleapps-com/augur-mobile` | React Native/Expo adapters for Augur ecommerce apps (offline sync, biometrics, push) |
| `@simpleapps-com/augur-server` | Server-side utilities for Augur ecommerce sites (Redis caching, SDK helpers, auth) |
| `@simpleapps-com/augur-tailwind` | Shared Tailwind CSS v4 theme with HSL variables for Augur ecommerce sites |
| `@simpleapps-com/augur-utils` | Shared types, cache configuration, and utility functions for Augur ecommerce sites |
| `@simpleapps-com/augur-web` | Shared React UI components for Augur ecommerce sites (Radix + Tailwind) |
npm package: @simpleapps-com/augur-mobile
Description: React Native/Expo adapters for Augur ecommerce apps (offline sync, biometrics, push)
Latest version: 2.2.29

# @simpleapps-com/augur-mobile

> React Native/Expo adapters for Augur ecommerce apps (offline sync, biometrics, push)

> Auto-generated. Do not edit manually. Regenerate with: `pnpm run generate-exports`

Part of the **@simpleapps-com/augur-\*** platform. All packages use fixed versioning (same version number).

## Install

```bash
pnpm add @simpleapps-com/augur-mobile
```

### Peer Dependencies

`react`, `react-native`, `expo`, `@tanstack/react-query`, `@react-native-async-storage/async-storage`, `@simpleapps-com/augur-api`

## Entry Points

| Import | Description |
|--------|-------------|
| `@simpleapps-com/augur-mobile` | 0 exports, 0 types |


## Related Packages

All packages use fixed versioning -- same version number across the platform.

| Package | Description |
|---------|-------------|
| `@simpleapps-com/augur-config` | Shared tooling configuration presets for Augur ecommerce sites |
| `@simpleapps-com/augur-core` | Universal foundation for Augur packages — proxy infrastructure, cache keys, method classification, shared types |
| `@simpleapps-com/augur-hooks` | Cross-platform React Query hooks and Zustand stores for Augur ecommerce sites |
| `@simpleapps-com/augur-server` | Server-side utilities for Augur ecommerce sites (Redis caching, SDK helpers, auth) |
| `@simpleapps-com/augur-tailwind` | Shared Tailwind CSS v4 theme with HSL variables for Augur ecommerce sites |
| `@simpleapps-com/augur-utils` | Shared types, cache configuration, and utility functions for Augur ecommerce sites |
| `@simpleapps-com/augur-web` | Shared React UI components for Augur ecommerce sites (Radix + Tailwind) |
npm package: @simpleapps-com/augur-tailwind
Description: Shared Tailwind CSS v4 theme with HSL variables for Augur ecommerce sites
Latest version: 2.2.29

# @simpleapps-com/augur-tailwind

> Shared Tailwind CSS v4 theme with HSL variables for Augur ecommerce sites

> Auto-generated. Do not edit manually. Regenerate with: `pnpm run generate-exports`

Part of the **@simpleapps-com/augur-\*** platform. All packages use fixed versioning (same version number).

## Install

```bash
pnpm add @simpleapps-com/augur-tailwind
```

### Peer Dependencies

`tailwindcss`, `tailwindcss-animate`

## Entry Points

| Import | Description |
|--------|-------------|
| `@simpleapps-com/augur-tailwind` | 2 exports, 0 types |
| `@simpleapps-com/augur-tailwind/base.css` | CSS stylesheet |

## Exports

### Other

| Export | Kind | Description |
|--------|------|-------------|
| `augurPlugin` | const | Augur Tailwind CSS v4 plugin. |
| `default` | value |  |


## Related Packages

All packages use fixed versioning -- same version number across the platform.

| Package | Description |
|---------|-------------|
| `@simpleapps-com/augur-config` | Shared tooling configuration presets for Augur ecommerce sites |
| `@simpleapps-com/augur-core` | Universal foundation for Augur packages — proxy infrastructure, cache keys, method classification, shared types |
| `@simpleapps-com/augur-hooks` | Cross-platform React Query hooks and Zustand stores for Augur ecommerce sites |
| `@simpleapps-com/augur-mobile` | React Native/Expo adapters for Augur ecommerce apps (offline sync, biometrics, push) |
| `@simpleapps-com/augur-server` | Server-side utilities for Augur ecommerce sites (Redis caching, SDK helpers, auth) |
| `@simpleapps-com/augur-utils` | Shared types, cache configuration, and utility functions for Augur ecommerce sites |
| `@simpleapps-com/augur-web` | Shared React UI components for Augur ecommerce sites (Radix + Tailwind) |
npm package: @simplebear/h5-ui
Description: Lightweight Mobile UI Components built on Vue
Author: h5
Latest version: 0.0.1

<h3 align="center" style="margin: 30px 0 35px;">轻量、可靠的移动端 Vue 组件库</h3>



## 特性

* 支持 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
* 支持 TypeScript
* 支持 SSR 

## 安装
```shell
yarn install
```

#### NPM

```shell
npm i h5-ui -S
```

#### YARN

```shell
yarn add h5-ui
```

## 快速上手

#### 方式一. 使用  [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)

`babel-plugin-import` 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

```bash
# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D
```

```js
// 在 .babelrc 或 babel-loader 中添加插件配置
// 注意：webpack 1 无需设置 libraryDirectory。
{
  "plugins": [
    ["import", {
      "libraryName": "h5-ui",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}
```

接着你可以在代码中直接引入 h5-ui 组件，插件会自动将代码转化为方式二中的按需引入形式。

```js
import { Button } from 'h5-ui';
```

> 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入

#### 方式二. 按需引入组件

在不使用插件的情况下，可以手动引入需要的组件

```js
import Button from 'h5-ui/lib/button';
import 'h5-ui/lib/button/style';
```

#### 方式三. 导入所有组件

```js
import Vue from 'vue';
import H5UI from 'h5-ui';
import 'h5-ui/lib/index.css';

Vue.use(H5UI);
```

> 注意：配置 babel-plugin-import 插件后将不允许导入所有组件

更多内容请参考 快速上手

## 浏览器支持

现代浏览器以及 Android 4.0+, iOS 6+.
npm package: @simplecrypto/relay-provider
Description: An provider for interacting with Relay infrastructure
Author: Sam Hatem
Latest version: 0.0.1

# TS Template

This template by default creates a cjs and ems build for the project.

## Getting Started

### Install dependencies

`yarn` or `npm i`

If you are getting a 404 error like `error An unexpected error occurred: "https://registry.yarnpkg.com/@slide-web3/multi-endpoint-provider/-/multi-endpoint-provider-0.0.1.tgz: Request failed \"404 Not Found\"".`, make sure you run `npm login` first.

### Build and watch for changes

`yarn start` or `npm run start`

### Create production bundle

`yarn build` or `npm run build`
npm package: @simpled/livelink
Description: A simple file syncing script that generates symbolic links of files and folders, allowing them to be synced to Dropbox and the like.
Latest version: 0.0.2

# livelink

A simple file syncing script that generates symbolic links of files and folders, allowing them to be synced to Dropbox and the like.

## Usage

Install `livelink` globally:

```
npm i -g @simpled/livelink
```

Create a `livelink.yml` file somewhere, preferrably in your sync directory, the same directory where you'd like to create your symbolic links. You can use the [sample file](/livelink.sample.yml) as your starting point. Then run:

```
livelink
```

Follow the prompts.
npm package: @simpledeliver/contracts
Description: simple deliver contracts for typescript
Author: Alexandas
Latest version: 0.0.13

![License: GPL](https://img.shields.io/badge/license-GPLv3-blue)![Version Badge](https://img.shields.io/badge/version-0.0.1-lightgrey.svg)
# Deliver contracts

## Local development

create `.env` file and set your mnemonic as below

   `MNEMONIC="your mnemonic"`

`npm i`

`npm run build`

`npx hardhat node --no-deploy`

`npx hardhat deploy --tags ${deploymentTag}`

#### notice
Once the rpc url is unavailable, check it [here](https://chainlist.org/)
npm package: @simpledeliver/deliver-contracts
Description: simple deliver contracts for typescript
Author: Alexandas
Latest version: 0.0.19

![License: GPL](https://img.shields.io/badge/license-GPLv3-blue)![Version Badge](https://img.shields.io/badge/version-0.0.1-lightgrey.svg)
# Deliver contracts

## Local development

create `.env` file and set your mnemonic as below

   `MNEMONIC="your mnemonic"`

`npm i`

`npm run build`

`npx hardhat node --no-deploy`

`npx hardhat deploy --tags ${deploymentTag}`

#### notice
Once the rpc url is unavailable, check it [here](https://chainlist.org/)
npm package: @simpledigicreds/browser
Description: Part of a collection of TypeScript-first libraries for simpler Digital Credential presentation and verification. Pairs with @simpledigicreds/server
Author: Matthew Miller
Latest version: 0.0.1

## @simpledigicreds/browser

Part of a collection of TypeScript-first libraries for simpler Digital Credential presentation and
verification. Pairs with @simpledigicreds/server.

Coming Soon...
npm package: @simpledjs/framework
Description: A framework to make discord bot development easier
Author: JaronZ
Latest version: 0.7.0

<div align="center">
	<br>
	<p><img width="800" src="https://raw.githubusercontent.com/simpledjs/images/main/dos-full.png" alt="Discord Oversimplified Logo"></p>
	<br>
	<a href="https://discord.gg/AQwkmv7kA9"><img src="https://img.shields.io/discord/882085501694246982?color=5865F2&logo=discord&logoColor=white" alt="Discord Server"></a>
	<a href="https://npmjs.com/package/@simpledjs/framework"><img src="https://img.shields.io/npm/v/@simpledjs/framework.svg?maxAge=3600" alt="NPM Version"></a>
	<a href="https://npmjs.com/package/@simpledjs/framework"><img src="https://img.shields.io/npm/dt/@simpledjs/framework.svg?maxAge=3600" alt="NPM Downloads"></a>
</div>

## About

A framework built with discord.js and the sapphire framework to make discord bot development easier

## Installation

```sh-session
npm install @simpledjs/framework
yarn add @simpledjs/framework
pnpm add @simpledjs/framework
```

## Example usage

Install the required dependencies:

```sh-session
npm install @simpledjs/framework
yarn add @simpledjs/framework
pnpm add @simpledjs/framework
```

Making a client:

```js
const SDJS = require("@simpledjs/framework");

// Automatically logs in the client
const client = new SDJS.Client({
	intents: [], // required
	token: "BOT_TOKEN" // required
});
```

Making a command in the same file as the client:

```js
client.command(
	"example",
	`
	content.set("content text");
	embed();
	embed.description("embed");
	reply(true);
`
);
```

Making a command in a seperate directory:

```js
module.exports = {
	trigger: "example",
	code: `
		content.set("content text");
		embed();
		embed.description("embed");
		reply(true);
	`
};
```

## Links

- [Documentation](https://www.notion.so/Discord-Oversimplified-Documentation-8e528936c677448394641d5d4bdbbeac) (temporary docs)
- [simple.djs Discord Server](https://discord.gg/AQwkmv7kA9)
- [simple.djs GitHub](https://github.com/simpledjs/simple.djs)
- [NPM](https://npmjs.org/package/@simpledjs/framework)

## Contributing

Before you create an issue, please take a look if it has already been reported or suggested, also check the latest [documentation](https://www.notion.so/Discord-Oversimplified-Documentation-8e528936c677448394641d5d4bdbbeac).

## Help

If you are having problems with simple.djs, you are welcome to join the [simple.djs Server](https://discord.gg/AQwkmv7kA9)
npm package: @simpledotstudio/essentials
Description: Essential UI components bundle
Author: SimpleStudio
Latest version: 2.0.0-alpha.6

# @simpledotstudio/essentials

Essential UI components bundle

## Installation

```bash
npm install @simpledotstudio/essentials
```

## Included Components

This bundle includes the following components:

- @simpledotstudio/simple-button
- @simpledotstudio/simple-card
- @simpledotstudio/simple-checkbox
- @simpledotstudio/simple-icon
- @simpledotstudio/simple-image
- @simpledotstudio/simple-input
- @simpledotstudio/simple-loader
- @simpledotstudio/simple-switch
- @simpledotstudio/simple-text
- @simpledotstudio/simple-textarea

## Usage

Import components from the bundle:

```tsx
import { 
  SimpleButton, 
  SimpleInput, 
  SimpleCard,
  SimpleText,
  SimpleImage,
  // ... other components 
} from '@simpledotstudio/essentials';

function App() {
  return (
    <SimpleCard>
      <SimpleImage 
        src="/logo.png" 
        alt="Logo" 
        width={200} 
        height={100} 
      />
      <SimpleText as="h1" variant="primary">
        Welcome
      </SimpleText>
      <SimpleInput placeholder="Enter text..." />
      <SimpleButton variant="primary">Submit</SimpleButton>
    </SimpleCard>
  );
}
```

## Why Use This Bundle?

- **Single dependency**: Install once, use multiple components
- **Consistent versions**: All components work well together
- **Smaller install**: Shared dependencies are deduplicated
- **Tree-shakable**: Only the components you use are included in your application

## Individual Component Docs

For detailed documentation on each component, see their individual packages:

- [@simpledotstudio/simple-button](https://www.npmjs.com/package/@simpledotstudio/simple-button)
- [@simpledotstudio/simple-card](https://www.npmjs.com/package/@simpledotstudio/simple-card)
- [@simpledotstudio/simple-checkbox](https://www.npmjs.com/package/@simpledotstudio/simple-checkbox)
- [@simpledotstudio/simple-icon](https://www.npmjs.com/package/@simpledotstudio/simple-icon)
- [@simpledotstudio/simple-image](https://www.npmjs.com/package/@simpledotstudio/simple-image)
- [@simpledotstudio/simple-input](https://www.npmjs.com/package/@simpledotstudio/simple-input)
- [@simpledotstudio/simple-loader](https://www.npmjs.com/package/@simpledotstudio/simple-loader)
- [@simpledotstudio/simple-switch](https://www.npmjs.com/package/@simpledotstudio/simple-switch)
- [@simpledotstudio/simple-text](https://www.npmjs.com/package/@simpledotstudio/simple-text)
- [@simpledotstudio/simple-textarea](https://www.npmjs.com/package/@simpledotstudio/simple-textarea)

## License

MIT © SimpleStudio
npm package: @simpledotstudio/simple-avatar
Description: SimpleAvatar - A reusable React component
Author: SimpleStudio
Latest version: 2.0.0-alpha.2

# @simpledotstudio/simple-avatar

An avatar component with image support and fallback

## Installation

```bash
npm install @simpledotstudio/simple-avatar
```

## Usage

```tsx
import { SimpleAvatar } from '@simpledotstudio/simple-avatar';

function App() {
  return (
    <SimpleAvatar src="/avatar.jpg" alt="User" fallback="JD" />
  );
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies
- React >=16.8.0
- React DOM >=16.8.0

### Required Dependencies
- @radix-ui/react-avatar: ^1.1.10

## License

MIT © SimpleStudio
npm package: @simpledotstudio/simple-avatar-select
Description: SimpleAvatarSelect - A reusable React component
Author: SimpleStudio
Latest version: 2.0.0-alpha.5

# SimpleAvatarSelect

A reusable avatarselect component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-avatar-select
```

## Usage

```tsx
import { SimpleAvatarSelect } from '@simpledotstudio/simple-avatar-select';

function App() {
  return (
    <SimpleAvatarSelect variant="primary" size="medium">
      SimpleAvatarSelect Content
    </SimpleAvatarSelect>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleAvatarSelect variant="default">Default</SimpleAvatarSelect>
<SimpleAvatarSelect variant="primary">Primary</SimpleAvatarSelect>
<SimpleAvatarSelect variant="secondary">Secondary</SimpleAvatarSelect>
```

### Sizes

```tsx
<SimpleAvatarSelect size="small">Small</SimpleAvatarSelect>
<SimpleAvatarSelect size="medium">Medium</SimpleAvatarSelect>
<SimpleAvatarSelect size="large">Large</SimpleAvatarSelect>
```

### States

```tsx
<SimpleAvatarSelect disabled>Disabled</SimpleAvatarSelect>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To build the component:

```bash
npm run build
```
npm package: @simpledotstudio/simple-banner
Description: SimpleBanner - A reusable React component
Author: SimpleStudio
Latest version: 2.0.0-alpha.6

# SimpleBanner

A reusable banner component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-banner
```

## Usage

```tsx
import { SimpleBanner } from '@simpledotstudio/simple-banner';

function App() {
  return (
    <SimpleBanner variant="primary" size="medium">
      SimpleBanner Content
    </SimpleBanner>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleBanner variant="default">Default</SimpleBanner>
<SimpleBanner variant="primary">Primary</SimpleBanner>
<SimpleBanner variant="secondary">Secondary</SimpleBanner>
```

### Sizes

```tsx
<SimpleBanner size="small">Small</SimpleBanner>
<SimpleBanner size="medium">Medium</SimpleBanner>
<SimpleBanner size="large">Large</SimpleBanner>
```

### States

```tsx
<SimpleBanner disabled>Disabled</SimpleBanner>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To build the component:

```bash
npm run build
```
npm package: @simpledotstudio/simple-carousel
Description: SimpleCarousel - A reusable React component
Author: SimpleStudio
Latest version: 1.0.0-alpha.3

# SimpleCarousel

A reusable carousel component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-carousel
```

## Usage

```tsx
import { SimpleCarousel } from '@simpledotstudio/simple-carousel';

function App() {
  return (
    <SimpleCarousel variant="primary" size="medium">
      SimpleCarousel Content
    </SimpleCarousel>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleCarousel variant="default">Default</SimpleCarousel>
<SimpleCarousel variant="primary">Primary</SimpleCarousel>
<SimpleCarousel variant="secondary">Secondary</SimpleCarousel>
```

### Sizes

```tsx
<SimpleCarousel size="small">Small</SimpleCarousel>
<SimpleCarousel size="medium">Medium</SimpleCarousel>
<SimpleCarousel size="large">Large</SimpleCarousel>
```

### States

```tsx
<SimpleCarousel disabled>Disabled</SimpleCarousel>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @simpledotstudio/simple-conversation
Description: SimpleConversation - A reusable React component
Author: SimpleStudio
Latest version: 2.0.0-alpha.4

# SimpleConversation

A reusable conversation component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-conversation
```

## Usage

```tsx
import { SimpleConversation } from '@simpledotstudio/simple-conversation';

function App() {
  return (
    <SimpleConversation variant="primary" size="medium">
      SimpleConversation Content
    </SimpleConversation>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleConversation variant="default">Default</SimpleConversation>
<SimpleConversation variant="primary">Primary</SimpleConversation>
<SimpleConversation variant="secondary">Secondary</SimpleConversation>
```

### Sizes

```tsx
<SimpleConversation size="small">Small</SimpleConversation>
<SimpleConversation size="medium">Medium</SimpleConversation>
<SimpleConversation size="large">Large</SimpleConversation>
```

### States

```tsx
<SimpleConversation disabled>Disabled</SimpleConversation>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To build the component:

```bash
npm run build
```
npm package: @simpledotstudio/simple-data-card
Description: SimpleDataCard - A reusable React component
Author: SimpleStudio
Latest version: 2.0.0-alpha.4

# SimpleDataCard

A reusable datacard component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-data-card
```

## Usage

```tsx
import { SimpleDataCard } from '@simpledotstudio/simple-data-card';

function App() {
  return (
    <SimpleDataCard variant="primary" size="medium">
      SimpleDataCard Content
    </SimpleDataCard>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleDataCard variant="default">Default</SimpleDataCard>
<SimpleDataCard variant="primary">Primary</SimpleDataCard>
<SimpleDataCard variant="secondary">Secondary</SimpleDataCard>
```

### Sizes

```tsx
<SimpleDataCard size="small">Small</SimpleDataCard>
<SimpleDataCard size="medium">Medium</SimpleDataCard>
<SimpleDataCard size="large">Large</SimpleDataCard>
```

### States

```tsx
<SimpleDataCard disabled>Disabled</SimpleDataCard>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @simpledotstudio/simple-item-card
Description: SimpleItemCard - A reusable React component
Author: SimpleStudio
Latest version: 2.0.0-alpha.7

# SimpleItemCard

A reusable itemcard component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-item-card
```

## Usage

```tsx
import { SimpleItemCard } from '@simpledotstudio/simple-item-card';

function App() {
  return (
    <SimpleItemCard variant="primary" size="medium">
      SimpleItemCard Content
    </SimpleItemCard>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleItemCard variant="default">Default</SimpleItemCard>
<SimpleItemCard variant="primary">Primary</SimpleItemCard>
<SimpleItemCard variant="secondary">Secondary</SimpleItemCard>
```

### Sizes

```tsx
<SimpleItemCard size="small">Small</SimpleItemCard>
<SimpleItemCard size="medium">Medium</SimpleItemCard>
<SimpleItemCard size="large">Large</SimpleItemCard>
```

### States

```tsx
<SimpleItemCard disabled>Disabled</SimpleItemCard>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @simpledotstudio/simple-item-card-small
Description: SimpleItemCardSmall - A reusable React component
Author: SimpleStudio
Latest version: 2.0.0-alpha.4

# SimpleItemCardSmall

A reusable itemcardsmall component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-item-card-small
```

## Usage

```tsx
import { SimpleItemCardSmall } from '@simpledotstudio/simple-item-card-small';

function App() {
  return (
    <SimpleItemCardSmall variant="primary" size="medium">
      SimpleItemCardSmall Content
    </SimpleItemCardSmall>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleItemCardSmall variant="default">Default</SimpleItemCardSmall>
<SimpleItemCardSmall variant="primary">Primary</SimpleItemCardSmall>
<SimpleItemCardSmall variant="secondary">Secondary</SimpleItemCardSmall>
```

### Sizes

```tsx
<SimpleItemCardSmall size="small">Small</SimpleItemCardSmall>
<SimpleItemCardSmall size="medium">Medium</SimpleItemCardSmall>
<SimpleItemCardSmall size="large">Large</SimpleItemCardSmall>
```

### States

```tsx
<SimpleItemCardSmall disabled>Disabled</SimpleItemCardSmall>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @simpledotstudio/simple-item-page
Description: SimpleItemPage - A reusable React component
Author: SimpleStudio
Latest version: 1.0.0-alpha.4

# SimpleItemPage

A reusable itempage component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-item-page
```

## Usage

```tsx
import { SimpleItemPage } from '@simpledotstudio/simple-item-page';

function App() {
  return (
    <SimpleItemPage variant="primary" size="medium">
      SimpleItemPage Content
    </SimpleItemPage>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleItemPage variant="default">Default</SimpleItemPage>
<SimpleItemPage variant="primary">Primary</SimpleItemPage>
<SimpleItemPage variant="secondary">Secondary</SimpleItemPage>
```

### Sizes

```tsx
<SimpleItemPage size="small">Small</SimpleItemPage>
<SimpleItemPage size="medium">Medium</SimpleItemPage>
<SimpleItemPage size="large">Large</SimpleItemPage>
```

### States

```tsx
<SimpleItemPage disabled>Disabled</SimpleItemPage>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @simpledotstudio/simple-reaction-picker
Description: SimpleReactionPicker - A reusable React component
Author: SimpleStudio
Latest version: 1.0.0-alpha.3

# SimpleReactionPicker

A reusable reactionpicker component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-reaction-picker
```

## Usage

```tsx
import { SimpleReactionPicker } from '@simpledotstudio/simple-reaction-picker';

function App() {
  return (
    <SimpleReactionPicker variant="primary" size="medium">
      SimpleReactionPicker Content
    </SimpleReactionPicker>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleReactionPicker variant="default">Default</SimpleReactionPicker>
<SimpleReactionPicker variant="primary">Primary</SimpleReactionPicker>
<SimpleReactionPicker variant="secondary">Secondary</SimpleReactionPicker>
```

### Sizes

```tsx
<SimpleReactionPicker size="small">Small</SimpleReactionPicker>
<SimpleReactionPicker size="medium">Medium</SimpleReactionPicker>
<SimpleReactionPicker size="large">Large</SimpleReactionPicker>
```

### States

```tsx
<SimpleReactionPicker disabled>Disabled</SimpleReactionPicker>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @simpledotstudio/simple-scroll-list
Description: SimpleScrollList - A reusable React component
Author: SimpleStudio
Latest version: 1.0.0-alpha.4

# SimpleScrollList

A reusable scrolllist component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-scroll-list
```

## Usage

```tsx
import { SimpleScrollList } from '@simpledotstudio/simple-scroll-list';

function App() {
  return (
    <SimpleScrollList variant="primary" size="medium">
      SimpleScrollList Content
    </SimpleScrollList>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleScrollList variant="default">Default</SimpleScrollList>
<SimpleScrollList variant="primary">Primary</SimpleScrollList>
<SimpleScrollList variant="secondary">Secondary</SimpleScrollList>
```

### Sizes

```tsx
<SimpleScrollList size="small">Small</SimpleScrollList>
<SimpleScrollList size="medium">Medium</SimpleScrollList>
<SimpleScrollList size="large">Large</SimpleScrollList>
```

### States

```tsx
<SimpleScrollList disabled>Disabled</SimpleScrollList>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```
npm package: @simpledotstudio/simple-toast
Description: SimpleToast - A reusable React component
Author: SimpleStudio
Latest version: 2.0.0-alpha.2

# @simpledotstudio/simple-toast

A toast notification component with multiple variants

## Installation

```bash
npm install @simpledotstudio/simple-toast
```

## Usage

```tsx
import { SimpleToast } from '@simpledotstudio/simple-toast';

function App() {
  return (
    // First, get a ref to show the toast
const toastRef = useRef<SimpleToastHandle>(null);

// Show the toast
toastRef.current?.show();

// Render the toast
<SimpleToast
  ref={toastRef}
  title="Success!"
  description="Your action was completed"
  variant="success"
/>
  );
}
```

## Props

See the [TypeScript definitions](./src/index.ts) for detailed prop types.

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies
- React >=16.8.0
- React DOM >=16.8.0

### Required Dependencies
- @radix-ui/react-toast: ^1.2.14
- @simpledotstudio/simple-avatar: ^0.1.0-alpha.0
- @simpledotstudio/simple-icon: ^0.1.0-alpha.0

## License

MIT © SimpleStudio
npm package: @simpleerror/node
Description: SimpleError SDK — error tracking for Node.js and Next.js in 1 line
Latest version: 0.1.0

# @simpleerror/node

Error tracking for Node.js and Next.js — setup in 1 line.

```bash
npm install @simpleerror/node
# or
pnpm add @simpleerror/node
```

## Quick start

```ts
// index.ts / server.ts
import { init } from "@simpleerror/node";

init({ apiKey: process.env.SIMPLEERROR_API_KEY! });
```

That's it. All uncaught exceptions and unhandled promise rejections are now captured automatically.

## Manual capture

```ts
import { capture } from "@simpleerror/node";

try {
  await riskyOperation();
} catch (err) {
  await capture(err as Error, {
    userId: req.user.id,
    path:   req.url,
  });
}
```

## Next.js (App Router)

Add to `instrumentation.ts` at the root of your Next.js project:

```ts
// instrumentation.ts
import { register as seRegister } from "@simpleerror/node/nextjs";

export function register() {
  seRegister({
    apiKey:      process.env.SIMPLEERROR_API_KEY!,
    environment: process.env.NODE_ENV,
    release:     process.env.GIT_COMMIT_SHA,
  });
}
```

Enable instrumentation in `next.config.ts`:

```ts
const nextConfig = {
  experimental: { instrumentationHook: true },
};
export default nextConfig;
```

## Options

| Option        | Type     | Default                         | Description                              |
|---------------|----------|---------------------------------|------------------------------------------|
| `apiKey`      | `string` | —                               | **Required.** From your project settings |
| `environment` | `string` | `process.env.NODE_ENV`          | `production`, `staging`, etc.            |
| `release`     | `string` | `process.env.GIT_COMMIT_SHA`    | Commit SHA for deploy tracking           |
| `endpoint`    | `string` | `https://ingest.simpleerror.io` | Override for local dev or self-hosting   |

## Class API

```ts
import { SimpleErrorClient } from "@simpleerror/node";

const client = new SimpleErrorClient({ apiKey: "se_live_..." });
client.init(); // registers global handlers

await client.capture(error, { extra: "context" });
```

## License

MIT © [SimpleError](https://simpleerror.io)