open-index/open-npm huggingface dataset:
npm package: @reflexjs/babel-preset-style-props
Description: A babel preset to automatically enable reflejx style props
Latest version: 0.2.1

# @reflexjs/babel-preset-style-props

A babel preset to automatically enable reflexjs style props.

## Installation

```sh
npm i @reflexjs/babel-preset-style-props
```

## Usage

```json
// .babelrc
{
  "presets": ["@reflexjs/babel-preset-style-props"]
}
```
npm package: @reflexjs/codemod
Description: Migration helpers for reflexjs
Latest version: 0.1.1

# @reflexjs/codemod

Provides Codemod transformations to help with code upgrade and migration.

## Usage

```sh
npx @reflexjs/codemod <transform> <path
```

- `transform` - name of the transform
- `path` - files or directory to transform
- `--dry` - Performs a dry-run, no code changes
- `--print` - Prints the changes for comparison

## Codemods

### `to-reflexjs`

This Codemod migrates your `@reflexjs/componens` code to `reflexjs` code.

```js
npx @reflexjs/codemod to-reflexjs
```

Example:

```jsx
import { Div, H1, Button } from "@reflexjs/components"

export default function () {
  return (
    <Div d="flex">
      <H1>This is a heading</H1>
      <Button variant="primary lg">Button</Button>
    </Div>
  )
}
```

Will be transformed to:

```jsx
export default function () {
  return (
    <div display="flex">
      <h1 variant="heading.h1">This is a heading</h1>
      <button variant="button.primary.lg">Button</button>
    </div>
  )
}
```
npm package: @reflexjs/components
Description: React components that can be styled using style props and Theme UI.
Latest version: 0.5.1
Deprecated: This package is deprecated and will only receive security updates. No further development.

# @reflexjs/components

DEPRECATED: See https://reflexjs.org/docs/migrate

React components that can be styled using `style props` and [Theme UI](https://theme-ui.com).

Components are one of the most useful features of Reflex.

## Installation

Components are provided by the `@reflexjs/components` package.

```jsx
npm i @reflexjs/components
```

**Note: `@reflexjs/components` can be also used in any React project.**

## Example

```jsx
<Button
  bg="primary"
  color="text"
  px="2"
  py="1"
  fontSize="sm"
  hoverBg="secondary"
  hoverColor="white"
>
  Button
</Button>
```

## Documentation

Read the docs at [https://reflexjs.org/docs/components](https://reflexjs.org/docs/components).
npm package: @reflexjs/gatsby-plugin-search-algolia
Description: Algolia search integration for Reflex sites
Latest version: 0.5.4

# Algolia Search

Add Algolia search to your Gatsby site.

## Installation

```sh
npm i @reflexjs/gatsby-plugin-search-algolia
```

## Configuration

Create an account on [Algolia](https://algolia.com).

Go to [API keys](https://www.algolia.com/api-keys) and copy the following key to a `.env` file.

```sh
// .env
ALGOLIA_APP_ID = <--- Application ID
ALGOLIA_SEARCH_KEY = <--- Search-Only API key
ALGOLIA_ADMIN_KEY = <--- Admin API key
ALGOLIA_INDEX_NAME = <--- Index name
```

Configure `@reflexjs/gatsby-plugin-search-algolia` as follows:

```js
// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: "Reflex",
    ...
  },
  plugins: [
    `@reflexjs/gatsby-theme-base`,
    {
      resolve: `@reflexjs/gatsby-plugin-search-algolia`,
      options: {
        appId: process.env.ALGOLIA_APP_ID,
        adminKey: process.env.ALGOLIA_ADMIN_KEY,
        searchKey: process.env.ALGOLIA_SEARCH_KEY,
        indexName: process.env.ALGOLIA_INDEX_NAME,
        types: [`Page`, `Post`],
      },
    },
  ],
}
```

4. Run `gatsby build` to build your search index.

## Add a search box

Adding a search box your site is as easy as:

```jsx
import { Search } from "@reflexjs/gatsby-plugin-search-algolia"
```

and then render and style the Search box:

```jsx
<Search placeholder="Search site..." fontSize="md" />
```
npm package: @reflexjs/gatsby-theme-base
Description: A base theme that bundles other themes.
Latest version: 0.6.4

# @reflexjs/gatsby-theme-base

This is the base theme used by `@reflexjs/gatsby-starter-base`. It bundles `components`, `blocks`, `navs` and `pages`. This is a good starting point for your site.

This theme also include the `base` preset.

## Installation

```sh
npm i @reflexjs/gatsby-theme-base
```

## Configuration

```js
// gatsby-config.js

module.exports = {
  plugins: [`@reflexjs/gatsby-theme-base`],
}
```
npm package: @reflexjs/gatsby-theme-block
Description: Blocks are re-usable pieces of content that can be embedded on pages.
Latest version: 0.6.4

# @reflexjs/gatsby-theme-block

Blocks are re-usable pieces of content that can be embedded on pages.

## Installation

```sh
npm i @reflexjs/gatsby-theme-block
```

## Configuration

```js
// gatsby-config.js

module.exports = {
  plugins: [`@reflexjs/gatsby-theme-block`],
}
```

## Options

```js
// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `@reflexjs/gatsby-theme-block`,
      options: {
        contentPath: "content/blocks",
      },
    },
  ],
}
```

## Data models

### Block

```js
type Block implements Node @dontInfer {
  id: ID!
  src: String
  body: String
}
```

## Usage

Place your blocks inside `content/blocks` as follows:

```sh
site
  └── content
    └── blocks
      └── card.mdx
```

Then build your block using `MDX`:

```jsx
// content/blocks/card.mdx

<Div borderWidth="1px" rounded="5px">
  <Image src="placeholder.jpg" />
  <Div p="6">
    <H4 my="0">Heading</H4>
    <P mb="0">This is some text.</P>
  </Div>
</Div>
```

### Use the block on a page

To place a block, you use the `Block` component and the block name.

```jsx
<Block src="card" />
```

## Dynamic blocks

Blocks can accept props and this makes blocks really powerful.

Wrap the block in a named export.

```jsx
// content/blocks/card.mdx

export const Card = ({ heading, text, image }) => (
  <Div borderWidth="1px" rounded="5px">
    <Image src={image} />
    <Div p="6">
      <H4 my="0">{heading}</H4>
      <P mb="0">{text}</P>
    </Div>
  </Div>
)
```

### Using props with blocks

```jsx
<Grid col="2" gap="4">
  <Block src="card" heading="Heading One" text="This is the card one." />
  <Block src="card" heading="Heading One" text="This is the card two." />
</Grid>
```

Check out the [Blocks library](https://reflexjs.org/library/blocks) for pre-built blocks you can copy and drop into your site.

## Documentation

Read the docs at [https://reflexjs.org/docs/blocks](https://reflexjs.org/docs/blocks).
npm package: @reflexjs/gatsby-theme-core
Description: The core theme for Reflex. This adds a Page type.
Latest version: 0.8.4

# @reflexjs/gatsby-theme-core

The core theme for Reflex. This adds a `Page` type.

## Installation

```sh
npm i @reflexjs/gatsby-theme-core
```

## Configuration

```js
// gatsby-config.js

module.exports = {
  plugins: [`@reflexjs/gatsby-theme-core`],
}
```

## Options

```js
// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `@reflexjs/gatsby-theme-core`,
      options: {
        contentPath: `content/pages`,
        imagesPath: `content/images`,
        basePath: ``,
        mdxRemarkPlugins: [],
        gatsbyRemarkPlugins: [],
        remarkPlugins: [],
      },
    },
  ],
}
```

## Data models

### Page

```js
type Page implements Node @dontInfer {
  id: ID!
  title: String
  excerpt: String
  slug: String
  body: String
}
```

## Usage

Place your pages inside `content/pages` as follows:

```sh
site
  └── content
    └── pages
      └── a-page.mdx
```

Then add content to your page:

```jsx
---
title: A page
excerpt: Omnis architecto praesentium itaque eaque quasi.
---

Write markdown or use components here.

## Heading 2

<Button bg="primary">Button</Button>

```

## Documentation

Read the docs at [https://reflexjs.org/docs/pages](https://reflexjs.org/docs/pages).
npm package: @reflexjs/gatsby-theme-doc
Description: Use this theme to build documentation pages.
Latest version: 0.8.4

# @reflexjs/gatsby-theme-doc

Use this theme to build documentation pages. See example at [https://reflexjs.org/docs](https://reflexjs.org/docs).

## Installation

```sh
npm i @reflexjs/gatsby-theme-doc
```

## Configuration

```js
// gatsby-config.js

module.exports = {
  plugins: [`@reflexjs/gatsby-theme-doc`],
}
```

## Options

```js
// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `@reflexjs/gatsby-theme-doc`,
      options: {
        contentPath: "content/docs",
        basePath: "/docs",
      },
    },
  ],
}
```

## Data models

### Doc

```js
type Doc implements Node @dontInfer {
  id: ID!
  title: String
  excerpt: String
  slug: String
  body: String
  tableOfContents: JSON
  timeToRead: Int
}
```

## Usage

Place your docs inside `content/docs` as follows.

```sh
site
  └── content
    └── docs
      └── 01-getting-started.mdx
```

You must prefix each filename with a number followed by a hyphen (`-`). This will assign it a weight that will determine its order in the nav.

Then add a nav for your docs inside `content/navs` as follows.

```sh
site
  └── content
    └── navs
      └── doc.mdx
```

Then add content to your doc:

```jsx
---
title: A page
excerpt: Omnis architecto praesentium itaque eaque quasi.
---

Write markdown or use components here.

## Heading 2

<Button bg="primary">Button</Button>

```
npm package: @reflexjs/gatsby-theme-nav
Description: Handles navigation menus for Reflex.
Latest version: 0.6.4

# @reflexjs/gatsby-theme-nav

Handles navigation menus for Reflex.

## Installation

```sh
npm i @reflexjs/gatsby-theme-nav
```

## Configuration

```js
// gatsby-config.js

module.exports = {
  plugins: [`@reflexjs/gatsby-theme-nav`],
}
```

## Options

```js
// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `@reflexjs/gatsby-theme-nav`,
      options: {
        contentPath: "content/navs",
      },
    },
  ],
}
```

## Data models

### Nav

```js
type NavLink implements Node @dontInfer {
  type: String
  value: String
  url: String
  items: [NavLink]
}

type Nav implements Node @dontInfer {
  id: ID!
  name: String
  items: [NavLink]
}
```

## Usage

Place your navs inside `content/navs` as follows:

```sh
site
  └── content
    └── navs
      └── header.mdx
```

Then add nav links using markdown:

```md
- [Home](/)
- [About](/about)
- Dropdown
  - [Item One](/item-one)
  - [Item Two](/item-two)
- [Contact](/contact)
- Block dropdown
  - <Block src="name-of-block" />
```

## Mega menu

Creating mega menu is easy. Create a block and add it as a dropdown item.

```md
- Block dropdown
  - <Block src="name-of-block" />
```

## Display nav

Use the `useNav` hook to retrieve navs and render them in blocks.

```jsx
// blocks/header-nav.mdx

export const HeaderNav = () => {
  const [nav] = useNav('header')
  return nav.items ? (
    <Ul>
      {nav.items.map({value, url, items}, index) => (
        <Li key={index}>
          <Link href={url}>{value}</Link>
        </Li>
      )}
      </Ul>
  ) : null
}
```

Then place them in your page:

```jsx
<Block src="header-nav" />
```

Check out the [Blocks library](https://reflexjs.org/library/blocks) for pre-built navs you can copy and drop into your site.

## Documentation

Read the docs at [https://reflexjs.org/docs/navs](https://reflexjs.org/docs/navs).
npm package: @reflexjs/gatsby-theme-styleguide
Description: Adds a styleguide to your site to make building and testing themes easy.
Latest version: 0.4.4

# @reflexjs/gatsby-theme-styleguide

Adds a styleguide to your site to make building and testing themes easy.

## Installation

```sh
npm i @reflexjs/gatsby-theme-styleguide
```

## Configuration

```js
// gatsby-config.js

module.exports = {
  plugins: [`@reflexjs/gatsby-theme-styleguide`],
}
```

## Options

```js
// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `@reflexjs/gatsby-theme-styleguide`,
      options: {
        contentPath: "styleguide",
        basePath: "/styleguide",
      },
    },
  ],
}
```

## Data models

### Styleguide

```js
type Styleguide implements Node @dontInfer {
  id: ID!
  title: String
  weight: Int
  excerpt: String
  slug: String
  body: String
}
```

## Usage

Place your styleguide inside `styleguide` as follows:

```sh
site
  └── styleguide
    └── buttons.mdx
```

Note: On first run, sample styleguides for `buttons`, `colors`, `forms`, and `typography` will be automatically generated for you.
npm package: @reflexjs/icons-feather
Description: Packages feather icons for Reflex.
Latest version: 0.2.1

# @reflexjs/icons-feather

Packages [feather icons](https://feathericons.com) for Reflex.

## Installation

```sh
npm i @reflexjs/icons-feather
```

## Usage

Create the following file `src/@reflexjs/gatsby-theme-base/icons.js`.

```js
// src/@reflexjs/gatsby-theme-base/icons.js

import icons from "@reflexjs/icons-feather"

export default {
  ...icons,
  custom: `...`,
}
```

Then use icons using the `Icon` component.

```jsx
<Icon name="arrow-right" />
```
npm package: @reflexjs/preset-base
Description: Base preset for Reflex themes.
Latest version: 0.3.2

# @reflexjs/preset-base

Base preset for Reflex themes.

## Installation

```sh
npm i @reflexjs/preset-base typeface-inter
```

## Usage

In your `theme.js` file, import and use the preset as follows:

```js
import typeface-inter
import base from "@reflexjs/preset-base"

export default {
  preset: base,
  colors: {
    // Add your custom colors here.
  },
  // Add other overrides...
}
```
npm package: @reflexjs/preset-default
Description: Default preset for reflexjs
Latest version: 0.2.1

# @reflexjs/preset-default

Default preset for reflexjs

## Installation

```sh
npm i @reflexjs/preset-default typeface-inter
```

## Usage

In your `theme.js` file, import and use the preset as follows:

```js
import { merge } from "reflexjs"
import default from "@reflexjs/preset-default"

export default merge(base, {
  colors: {
    // Add your custom colors here.
  },
  // Add other overrides...
})
```
npm package: @reflexjs/preset-flex
Description: Flex preset for Reflex themes.
Latest version: 0.2.1

# @reflexjs/preset-flex

Flex preset for Reflex themes.

## Installation

```sh
npm i @reflexjs/preset-flex typeface-open-sans typeface-prata
```

## Usage

In your `theme.js` file, import and use the preset as follows:

```js
import typeface-open-sans
import typeface-prata
import flex from "@reflexjs/preset-flex"

export default {
  preset: flex,
  colors: {
    // Add your custom colors here.
  },
  // Add other overrides...
}
```
npm package: @reflexjs/preset-merry
Description: Merry preset for Reflex themes.
Latest version: 0.2.1

# @reflexjs/preset-merry

Merry preset for Reflex themes.

## Installation

```sh
npm i @reflexjs/preset-merry typeface-lora typeface-merriweather
```

## Usage

In your `theme.js` file, import and use the preset as follows:

```js
import typeface-lora
import typeface-merriweather
import merry from "@reflexjs/preset-merry"

export default {
  preset: merry,
  colors: {
    // Add your custom colors here.
  },
  // Add other overrides...
}
```
npm package: @reflink/reflink
Description: [![npm version](https://badge.fury.io/js/%40reflink%2Freflink.svg)](https://www.npmjs.com/package/@reflink/reflink) [![Build Status](https://github.com/pnpm/reflink/workflows/CI/badge.svg)](https://github.com/pnpm/reflink/actions)
Latest version: 0.1.19

# @reflink/reflink

[![npm version](https://badge.fury.io/js/%40reflink%2Freflink.svg)](https://www.npmjs.com/package/@reflink/reflink)
[![Build Status](https://github.com/pnpm/reflink/workflows/CI/badge.svg)](https://github.com/pnpm/reflink/actions)

Copy-on-write file cloning for Node.js, powered by NAPI-RS and built upon [reflink-copy](https://github.com/cargo-bins/reflink-copy). This package supports a variety of platforms, including ARM and x86 architectures.

### Supported Platforms
    - Linux
    - MacOS
    - Windows (Server 2012+ and Windows Dev Drives)

## Installation

Just install `@reflink/reflink` using your favorite package manager:

```bash
pnpm add @reflink/reflink
```

## Usage

The package provides both synchronous and asynchronous methods to clone files.

### TypeScript Usage

First, import the package:

```typescript
import { reflinkFileSync, reflinkFile } from '@reflink/reflink';
```

#### Synchronous Method

```typescript
reflinkFileSync('source.txt', 'destination.txt');
```

#### Asynchronous Method

```typescript
await reflinkFile('source.txt', 'destination.txt');
```

## Testing

This package is tested using `vitest`. You can run the tests locally using:

```bash
pnpm install
pnpm build
pnpm test
```
npm package: @refloat/agent
Description: The official [refloat.io](https://refloat.io) agent.
Latest version: 1.0.0-alpha.8

# refloat-agent

The official [refloat.io](https://refloat.io) agent.

## Installation

### npm

```console
$ npm install --global @refloat/agent
$ refloat-agent --help
```

### Binaries

Native executable binaries are available for macOS, Linux and Windows. Check out [our documentation](https://refloat.io/docs/agent) for more details.

- [macOS](https://refloat.io/download/macos): `https://refloat.io/download/macos`
- [Linux](https://refloat.io/download/linux): `https://refloat.io/download/linux`
- [Windows](https://refloat.io/download/windows): `https://refloat.io/download/windows`

## Development

### Install dependencies

```console
$ pnpm install
```

### Run in development mode

```console
$ pnpm dev
```

### Build binary

```console
$ pnpm build
```
npm package: @reflowhq/auth-next
Description: Next.js library for login, account management and subscriptions with Reflow
Author: Reflow HQ
Latest version: 2.1.2

# Reflow Auth-Next

This is a library for adding user accounts and subscriptions to any Next.js app using [Reflow](https://reflowhq.com/docs/store-management/registrations.html).

## Main Features

- Adds user accounts (both username+password and social sign in), authorization and subscriptions (with Stripe or Paddle) to any Next.js project.
- Can be used to restrict access and enforce limits with feature flags and rate limits.
- Works on both the Node.js and Edge runtimes.
- Stores session data in a securely encrypted http-only cookie.
- Can be used as a general Next.js session library for storing arbitrary data, so it replaces iron-session and others.
- Works in both client and server components.
- Simple to setup and integrate.

## Installation

The library is compatible with all Next.js projects running Next.js 13 and up. It works with both the App Router and Pages Router.

You can install it using npm or another package manager of your choice.

```bash
npm install @reflowhq/auth-next
```

## Documentation

You can find the full Reflow Auth Next documentation [here](https://reflowhq.com/docs/libraries/auth/auth-next/).

Visit the [Getting Started](https://reflowhq.com/docs/libraries/auth/auth-next/getting-started/) guide for a quick overview.

All of the methods and class options are available in the [API reference](https://reflowhq.com/docs/libraries/auth/auth-next/api-reference/) docs.

For more details and advanced examples, you can check out:

- [Auth Next Example demo app](https://github.com/Reflow-HQ/auth-next-example)
- [Signing In a User](https://reflowhq.com/docs/libraries/auth/auth-next/sign-in/)
- [Signing Out a User](https://reflowhq.com/docs/libraries/auth/auth-next/sign-out/)
- [Adding Subscriptions](https://reflowhq.com/docs/libraries/auth/auth-next/add-subscriptions/)
- [Cookie Session Management](https://reflowhq.com/docs/libraries/auth/auth-next/cookie-session-management/)

We also post full tutorials on the [Reflow blog](https://reflowhq.com/learn/).

## License

Released under the MIT license. (c) Reflow HQ
npm package: @refly/arco-vite-plugin-react
Description: For Vite build, load Arco Design styles on demand
Author: arco-design
Latest version: 1.3.3

# @arco-plugins/vite-react

## 特性

1. `样式按需加载`
2. `主题引入`
3. `图标替换`

> 为了开发体验，开发环境下样式为全量引入

## 安装

```bash
npm i @arco-plugins/vite-react -D
```

## 用法

```js
// vite.config.js

import { vitePluginForArco } from '@arco-plugins/vite-react'

export default {
  ...
  plugins: [
    vitePluginForArco(options),
  ],
}
```

```tsx
// react
import { Button } from '@arco-design/web-react';

export default () => (
  <div>
    <Button type="secondary">Cancel</Button>
    <Button type="primary">Submit</Button>
  </div>
);
```

## 参数

插件支持以下参数:

|      参数名      |        类型        | 默认值 | 描述         |
| :--------------: | :----------------: | :----: | :----------- |
|   **`theme`**    |     `{String}`     |  `''`   | 主题包名     |
|  **`iconBox`**   |     `{String}`     |  `''`   | 图标库包名   |
| **`modifyVars`** |     `{Object}`     |  `{}`  | Less 变量    |
|   **`style`**    | `{'css'\|Boolean}` | `true` | 样式引入方式 |
|**`varsInjectScope`**|`string[]`|`[]`| less 变量（modifyVars 和主题包的变量）注入的范围 |

**样式引入方式 **

`style: true` 将引入 less 文件

```js
import '@arco-design/web-react/Affix/style';
```

`style: 'css'` 将引入 css 文件

```js
import '@arco-design/web-react/Affix/style/css';
```

`style: false` 不引入样式
npm package: @refly/plugin-vite-encoding
Description: For Vite build, load Arco Design styles on demand
Author: arco-design
Latest version: 1.3.3

# @arco-plugins/vite-react

## 特性

1. `样式按需加载`
2. `主题引入`
3. `图标替换`

> 为了开发体验，开发环境下样式为全量引入

## 安装

```bash
npm i @arco-plugins/vite-react -D
```

## 用法

```js
// vite.config.js

import { vitePluginForArco } from '@arco-plugins/vite-react'

export default {
  ...
  plugins: [
    vitePluginForArco(options),
  ],
}
```

```tsx
// react
import { Button } from '@arco-design/web-react';

export default () => (
  <div>
    <Button type="secondary">Cancel</Button>
    <Button type="primary">Submit</Button>
  </div>
);
```

## 参数

插件支持以下参数:

|      参数名      |        类型        | 默认值 | 描述         |
| :--------------: | :----------------: | :----: | :----------- |
|   **`theme`**    |     `{String}`     |  `''`   | 主题包名     |
|  **`iconBox`**   |     `{String}`     |  `''`   | 图标库包名   |
| **`modifyVars`** |     `{Object}`     |  `{}`  | Less 变量    |
|   **`style`**    | `{'css'\|Boolean}` | `true` | 样式引入方式 |
|**`varsInjectScope`**|`string[]`|`[]`| less 变量（modifyVars 和主题包的变量）注入的范围 |

**样式引入方式 **

`style: true` 将引入 less 文件

```js
import '@arco-design/web-react/Affix/style';
```

`style: 'css'` 将引入 css 文件

```js
import '@arco-design/web-react/Affix/style/css';
```

`style: false` 不引入样式
npm package: @refly/plugin-vite-watcher
Description: For Vite build, load Arco Design styles on demand
Author: arco-design
Latest version: 1.3.3

# @arco-plugins/vite-react

## 特性

1. `样式按需加载`
2. `主题引入`
3. `图标替换`

> 为了开发体验，开发环境下样式为全量引入

## 安装

```bash
npm i @arco-plugins/vite-react -D
```

## 用法

```js
// vite.config.js

import { vitePluginForArco } from '@arco-plugins/vite-react'

export default {
  ...
  plugins: [
    vitePluginForArco(options),
  ],
}
```

```tsx
// react
import { Button } from '@arco-design/web-react';

export default () => (
  <div>
    <Button type="secondary">Cancel</Button>
    <Button type="primary">Submit</Button>
  </div>
);
```

## 参数

插件支持以下参数:

|      参数名      |        类型        | 默认值 | 描述         |
| :--------------: | :----------------: | :----: | :----------- |
|   **`theme`**    |     `{String}`     |  `''`   | 主题包名     |
|  **`iconBox`**   |     `{String}`     |  `''`   | 图标库包名   |
| **`modifyVars`** |     `{Object}`     |  `{}`  | Less 变量    |
|   **`style`**    | `{'css'\|Boolean}` | `true` | 样式引入方式 |
|**`varsInjectScope`**|`string[]`|`[]`| less 变量（modifyVars 和主题包的变量）注入的范围 |

**样式引入方式 **

`style: true` 将引入 less 文件

```js
import '@arco-design/web-react/Affix/style';
```

`style: 'css'` 将引入 css 文件

```js
import '@arco-design/web-react/Affix/style/css';
```

`style: false` 不引入样式
npm package: @refly/wxt
Description: Next gen framework for developing web extensions
Author: Aaron Klinker
Latest version: 0.18.4

<h1 align="center">
  <img style="vertical-align:middle" width="44" src="./docs/public/hero-logo.svg" alt="WXT Logo">
  <span>WXT</span>
</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/wxt" target="_blank"><img alt="npm" src="https://img.shields.io/npm/v/wxt?labelColor=black&color=%234fa048"></a>
  <span> </span>
  <a href="https://www.npmjs.com/package/wxt" target="_blank"><img alt="npm" src="https://img.shields.io/npm/dm/wxt?labelColor=black&color=%234fa048"></a>
  <span> </span>
  <a href="https://github.com/wxt-dev/wxt/blob/main/LICENSE" target="_blank"><img alt="NPM" src="https://img.shields.io/npm/l/wxt?labelColor=black&color=%234fa048"></a>
  <span> </span>
  <a href="https://codecov.io/github/wxt-dev/wxt" target="_blank"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/wxt-dev/wxt?labelColor=black&color=%234fa048"></a>
</p>

<p align="center">
  <span>Next-gen framework for developing web extensions.</span>
  <br/>
  <span>⚡</span>
  <br/>
  <q><i>It's like Nuxt, but for Chrome Extensions</i></q>
</p>

<p align="center">
  <a href="https://wxt.dev" target="_blank">Get Started</a>
  &bull;
  <a href="https://wxt.dev/guide/installation.html" target="_blank">Installation</a>
  &bull;
  <a href="https://wxt.dev/api/config.html" target="_blank">Configuration</a>
  &bull;
  <a href="https://wxt.dev/examples.html" target="_blank">Examples</a>
  &bull;
  <a href="https://discord.gg/ZFsZqGery9" target="_blank">Discord</a>
</p>

![Example CLI Output](./docs/assets/cli-output.png)

## Demo

https://github.com/wxt-dev/wxt/assets/10101283/4d678939-1bdb-495c-9c36-3aa281d84c94

## Quick Start

Bootstrap a new project:

```sh
pnpm dlx wxt@latest init <project-name>
```

Or see the [installation guide](https://wxt.dev/guide/installation.html) to get started with WXT.

## Features

- 🌐 Supports all browsers
- ✅ Supports both MV2 and MV3
- ⚡ Dev mode with HMR & fast reload
- 📂 File based entrypoints
- 🚔 TypeScript
- 🦾 Auto-imports
- 🤖 Automated publishing
- 🎨 Frontend framework agnostic: works with Vue, React, Svelte, etc
- 🖍️ Quickly bootstrap a new project
- 📏 Bundle analysis
- ⬇️ Download and bundle remote URL imports

## Contributors

<a href="https://github.com/wxt-dev/wxt/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=wxt-dev/wxt" />
</a>
npm package: @refo/prisma-nestjs-dto-generator
Description: This generator generates Dto files based on your Prisma schema
Author: Refik ÖNAL
Latest version: 0.0.8

Forked from [@tpdewolf/prisma-nestjs-dto-generator](https://www.npmjs.com/package/@tpdewolf/prisma-nestjs-dto-generator)

# Prisma NestJS Dto Generator

This generator generates Dto files based on your Prisma schema

## To install

```bash
yarn add @refo/prisma-nestjs-dto-generator
```

## Add the generator to your schema

```
generator dto {
  provider         = "prisma-nestjs-dto-generator"
  output           = "../generated" /// relative output path
  filenameCase     = "kebab" /// "kebab | "snake" | "camel" (default)
  classSuffix      = "Dto" /// (default = "Dto")
  classPrefix      = "Generated" /// (default = "")
  excludeRelations = true /// (default = false)
}
```
npm package: @refolded/hooks
Description: A library of tasty reusable React hooks from the refolded team.
Author: refolded
Latest version: 0.1.4

# hooks
A set of reusable React hooks.

## Documentation

[hooks.refolded.dev](https://hooks.refolded.dev)

## Installation

install using yarn

```bash
yarn add @refolded/hooks
```

or using npm

```bash
npm install --save @refolded/hooks
```
npm package: @refont/klippa
Description: A high-performance font subset toolkit.
Author: junmer
Latest version: 0.0.3

# klippa

klippa is a high-performance font subset toolkit, powered by the Rust-based [klippa][klippa-link] project, and it binds to Node.js via  [napi-rs][napi-rs-link].

⚠️ Warning: This project is in the pre-release stage, and there may be some bugs.

<a href="https://github.com/junmer/klippa/actions"><img alt="GitHub CI Status" src="https://github.com/junmer/klippa/workflows/CI/badge.svg"></a>
<a href="https://www.npmjs.com/package/@refont/klippa"><img src="https://img.shields.io/npm/v/@refont/klippa.svg?sanitize=true" alt="@refont/klippa npm version"></a>
<a href="https://npmcharts.com/compare/@refont/klippa?minimal=true"><img src="https://img.shields.io/npm/dm/@refont/klippa.svg?sanitize=true" alt="@refont/klippa downloads"></a>

## Usage

```js
import { subset } from '@refont/klippa';
import { readFileSync, writeFileSync } from "node:fs";

// Read the font file
const input = readFileSync("font.ttf");

// Create a subset of the font with the specified text
const output = subset(input, { text: "abc" });

console.log(output);
// => { contents: <Buffer 00 01 00 ...> }

// Write the subsetted font to a new file
writeFileSync("subset.ttf", output);
```

## Roadmap

- [x] Subset font from text
- [ ] Implement the [kern](https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6kern.html) table
- [ ] Implement additional necessary [SubsetFlags](https://github.com/googlefonts/fontations/blob/main/klippa/src/lib.rs#L59)

## Related

[klippa][klippa-link] : A Rust binary for subsetting a font file according to provided input.

[napi-rs][napi-rs-link] : A framework for building compiled Node.js add-ons in Rust via Node-API.

[klippa-link]: https://github.com/googlefonts/fontations/tree/main/klippa

[napi-rs-link]: https://github.com/napi-rs/napi-rs
npm package: @refont/klippa-linux-arm64-gnu
Description: This is the **aarch64-unknown-linux-gnu** binary for `@refont/klippa`
Author: junmer
Latest version: 0.0.3

# `@refont/klippa-linux-arm64-gnu`

This is the **aarch64-unknown-linux-gnu** binary for `@refont/klippa`
npm package: @refont/klippa-linux-arm64-musl
Description: This is the **aarch64-unknown-linux-musl** binary for `@refont/klippa`
Author: junmer
Latest version: 0.0.3

# `@refont/klippa-linux-arm64-musl`

This is the **aarch64-unknown-linux-musl** binary for `@refont/klippa`
npm package: @refont/klippa-linux-riscv64-gnu
Description: This is the **riscv64gc-unknown-linux-gnu** binary for `@refont/klippa`
Author: junmer
Latest version: 0.0.3

# `@refont/klippa-linux-riscv64-gnu`

This is the **riscv64gc-unknown-linux-gnu** binary for `@refont/klippa`
npm package: @refont/klippa-linux-x64-gnu
Description: This is the **x86_64-unknown-linux-gnu** binary for `@refont/klippa`
Author: junmer
Latest version: 0.0.3

# `@refont/klippa-linux-x64-gnu`

This is the **x86_64-unknown-linux-gnu** binary for `@refont/klippa`
npm package: @refont/klippa-linux-x64-musl
Description: This is the **x86_64-unknown-linux-musl** binary for `@refont/klippa`
Author: junmer
Latest version: 0.0.3

# `@refont/klippa-linux-x64-musl`

This is the **x86_64-unknown-linux-musl** binary for `@refont/klippa`
npm package: @refont/klippa-win32-arm64-msvc
Description: This is the **aarch64-pc-windows-msvc** binary for `@refont/klippa`
Author: junmer
Latest version: 0.0.3

# `@refont/klippa-win32-arm64-msvc`

This is the **aarch64-pc-windows-msvc** binary for `@refont/klippa`
npm package: @refont/klippa-win32-ia32-msvc
Description: This is the **i686-pc-windows-msvc** binary for `@refont/klippa`
Author: junmer
Latest version: 0.0.3

# `@refont/klippa-win32-ia32-msvc`

This is the **i686-pc-windows-msvc** binary for `@refont/klippa`
npm package: @refont/klippa-win32-x64-msvc
Description: This is the **x86_64-pc-windows-msvc** binary for `@refont/klippa`
Author: junmer
Latest version: 0.0.3

# `@refont/klippa-win32-x64-msvc`

This is the **x86_64-pc-windows-msvc** binary for `@refont/klippa`
npm package: @refore-ai/copy-to-design-sdk
Description: Copy the HTML source and import it into the design platform via the plugin.
Latest version: 2.0.0

# @refore-ai/copy-to-design-sdk

By integrating this Refore Copy to Design SDK, your AI design tool can enable users to import HTML pages into Figma with a simple copy and paste.

## Install

```bash
pnpm add @refore-ai/copy-to-design-sdk
```

## Use

```typescript
import { CopyToDesign, PlatformType, ImportMode } from '@refore-ai/copy-to-design-sdk';

const copyToDesign = new CopyToDesign({
  region: Region.China, // or Region.World
  getAuthorizationPayload: async () => {
    return {
      accessToken: '<YOUR_ACCESS_TOKEN>',
      appId: '<YOUR_APP_ID>',
    };
  },
});

const firstPageHTML = `<!DOCTYPE html>
<html lang="en">
  <body>
    Here is my content for first page
  </body>
</html>
`;

const secondePageHTML = `<!DOCTYPE html>
<html lang="en">
  <body>
    Here is my content for second page
  </body>
</html>
`;

await copyToDesign.copyPasteInPlugin({
  content: [firstPageHTML, secondePageHTML],
  platform: PlatformType.Figma,
});

alert(
  'Copy successful. To paste these pages into Figma as editable designs, open the "Copy to Figma" plugin ( https://www.figma.com/community/plugin/1530991148057606658 ) and press Ctrl+V.',
);
```

## API Reference

### copyPasteInPlugin(options)

Copies HTML content to clipboard in a format that can be pasted into design tools.

#### Options

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `content` | `string \| string[]` | Yes | - | HTML content to be converted, copied and pasted. Can be a single HTML string or an array of HTML strings for multiple pages. |
| `platform` | `PlatformType` | Yes | - | Target design platform. One of: `PlatformType.Figma`, `PlatformType.MasterGo`, `PlatformType.JSDesign`, `PlatformType.PixsoChina` |
| `width` | `number` | No | - | Width of the page viewport in pixels. |
| `height` | `number` | No | - | Height of the page viewport in pixels. |
| `importMode` | `ImportMode` | No | `ImportMode.Interactive` | Import mode. One of: `ImportMode.Interactive` (user can adjust import settings), `ImportMode.Quick` (direct import) |
| `topLayerName.referrer` | `false \| string` | No | `location.origin` | Imported page's top layer name's referrer part |

#### Example

```typescript
await copyToDesign.copyPasteInPlugin({
  content: htmlString,
  platform: PlatformType.Figma,
  width: 1920,
  height: 1080,
  importMode: ImportMode.Quick,
});
```

## How to run example

Run vue example locally:

1. copy ./example/.env.sample to ./example/.env
2. replace `YOUR_ACCESS_TOKEN`, `YOUR_APP_ID` in ./example/.env
3. run command:

```bash
pnpm i
pnpm example:install # install dependencies
pnpm example:dev # run vue example
```
npm package: @refore-ai/uimap
Description: A CLI for UIMap.
Author: Refore AI Team
Latest version: 0.2.0

# UIMap CLI

A command-line tool for [UIMap](https://uimap.ai). Manage API credentials, run MCP servers, and install agent skills efficiently.

## Features

- **Authentication** — Log in to UIMap via browser OAuth seamlessly.
- **MCP Servers** — Run MCP services for UIMap CLI integration.
- **Skill Management** — Easily install UIMap CLI skills into your agent environment.

## Installation

### npm (Recommended)

```bash
# npm
npm install -g @refore-ai/uimap

# pnpm
pnpm add -g @refore-ai/uimap

# yarn
yarn global add @refore-ai/uimap
```

### Shell Script (No npm required)

If you have network issues accessing npm, you can install directly via shell script:

```bash
# Install latest version
curl -fsSL https://your-cdn-url.com/uimap/install.sh | bash

# Or specify version
curl -fsSL https://your-cdn-url.com/uimap/install.sh | VERSION=0.1.3 bash

# Using wget
wget -qO- https://your-cdn-url.com/uimap/install.sh | bash
```

The install script will:
1. Check Node.js 20+ environment
2. Download uimap package from CDN
3. Install to `~/.local/bin/uimap`

**Uninstall:**
```bash
curl -fsSL https://your-cdn-url.com/uimap/install.sh | bash -s -- uninstall
```

## Quick Start

### Install UIMap Skill

#### Standard Usage

Use the following command to easily install the UIMap skill into various popular Agents:

```bash
npx skills add refore-ai/uimap
```

#### Advanced Usage

Install UIMap CLI skills into a specific agent skills directory (e.g., for Cursor):

```bash
uimap add-skill
```

By default, skills are installed to `./.agents/skills`. Use the `-o` flag to specify a custom output directory:

```bash
uimap add-skill -o /path/to/skills
```

### MCP Servers

To run the MCP server:

```bash
npx @refore-ai/uimap mcp
```

Configure the MCP server in your `mcp.json` file (e.g., for Cursor):

```json
{
  "mcpServers": {
    "uimap": {
      "command": "npx",
      "args": ["-y", "@refore-ai/uimap", "mcp"],
      "env": {
        "UIMAP_API_KEY": "<your_api_key>",
        "UIMAP_APP_ID": "<your_app_id>"
      }
    }
  }
}
```

### CLI Usage in Terminal

You can also use the CLI directly in your terminal to search:

```bash
uimap search "how to create a new project"
uimap search "how to invite a team member" --domain example.com
```

## License

[MIT](LICENSE) © Refore AI Team
npm package: @reforj/logic-engine
Description: Base logic builder and runtime
Author: tarassovf
Latest version: 0.1.0-alpha2

# Reforj / Logic engine

The library provides base wysiwyg logic builder with ui and js runtime.

## Instalation
`yarn add @reforj/logic-engine`

`npm i --add @reforj/logic-engine`

Requirements as peer dependencies
```
"react": "^16.14.0",
"react-redux": "^7.1.0",
"react-dnd": "^11.0.0",
"react-dnd-html5-backend": "^11.0.0",
```

By defaul LogicEngine creates DnDProvder, you can pass `useDndProvider={false}` to disabled it.

## Documentation

The engine splited in two parts as logic builder ui and runtime.

Follow the [wiki](https://github.com/Reforj/logic-engine/wiki) or the [examples](#examples) section to check how to use UI and Runtime.

## Examples

Builder UI integration

```javascript
import { createRoot } from 'react-dom/client';
import { LogicEngine, getState } from '@reforj/logic-engine'
import '@reforj/logic-engine/style.css'

const root = createRoot(document.getElementById('container'));
root.render(<div style={{width: '100%', height: '90vh'}}>
  <LogicEngine />
</div>);
```

Runtime running

```javascript
import { Runtime } from '@reforj/logic-engine/runtime'
const runtime = new Runtime()

const fn = runtime.build(data) // data represents getState from @reforj/logic-engine
fn()
```

[codesandbox Example](https://codesandbox.io/s/base-usage-example-3kw7hx?file=/src/App.js)

## Contributing

Pull requests and suggestions are welcome.

### License

MIT License

Copyright (c) Fedor Tarasov
npm package: @reform/api
Description: Pure React Forms API based on new Context API
Author: Artur Bier
Latest version: 0.9.22

# @reform/api

Simple and powerful React forms API.
Write forms faster, more simple and clear.
  
## Install

```bash
npm install @reform/api
```

*This package requires `react@16.6+`.

## Usage

Main usage

**TextInput.tsx**
```typescript jsx
import * as React from "react";
import {Component} from "@reform/api";

export class TextInput extends Component {
    protected onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.update(e.target.value);
    }

    protected get className() {
        if (!this.valid) {
            return "is-not-valid";
        }

        if (this.changed) {
            return "is-changed";
        }

        return "";
    }

    public render() {
        return <input {...this.getDefaultProps()}/>;
    }

    protected getDefaultProps() {
        return {
            className: this.className,
            onChange: this.onChange,
            value: this.value,
            name: this.name,
            type: "text",
        }
    }
}
```

**Form.tsx**

```typescript jsx
import * as React from "react";
import {Component, Store} from "@reform/api";
import {TextInput} from "./TextInput.tsx";

interface ISource {
  name: string;
}

export default () => {
    const defaultSource: ISource = {
        name: "Hello",
    };
    
    // will trigger 
    const onChange = (store: Store<ISource>) => {
        console.log("changed", store);
    }
        
    // will trigger on enter
    const onSubmit = (data: ISource, store: Store<ISource>) => {
        console.log("submit", data);
        return true;
    }
    
    return (
        <Form defaultSource={defaultSource}
              onSubmit={console.log}
              onChange={console.log}>
            <p><TextInput name={"name"}/></p>
            <p><button>Submit</button></p>
        </Form>
    );
};
```

## Examples

Setup `npm run bootstrap` and play `npm run doc:play`.
npm package: @reform/components
Description: Pure React UI components based on Bulma css framework
Author: Artur Bier
Latest version: 0.7.11

# @reform/components

Pure React UI components based on Bulma css framework 

## Getting Started

Just install
`yarn add @reform/components`
and follow typings. Documentation coming soon.

### Playground

You can run dashboard playground with examples.
Just follow this steps:

1. Clone this repository
2. Enter to repository root
3. Run `yarn bootstrap && yarn dashboard:play` 

## License
MIT
npm package: @reform/pro
Description: Extended components for @reform/components
Author: Artur Bier
Latest version: 0.6.12

# @reform/pro

Extended components for `@reform/components` based on `@reform/api`

## Getting Started

Just install
`yarn add @reform/pro`
and follow typings. Documentation coming soon.

### Playground

You can run dashboard playground with examples.
Just follow this steps:

1. Clone this repository
2. Enter to repository root
3. Run `yarn bootstrap && yarn dashboard:play` 

## License
MIT
npm package: @reformer/mcp
Description: MCP server for ReFormer form library - provides AI assistants with comprehensive documentation and tools for form development
Author: Alexandr Bukhtatyy
Latest version: 1.0.1

# @reformer/mcp

MCP (Model Context Protocol) server for the ReFormer form library. Provides AI assistants with ReFormer documentation and development tools.

## Installation

```bash
npm install -g @reformer/mcp
```

Or use directly with npx:

```bash
npx @reformer/mcp
```

## Usage with Claude Code

### Register the server

```bash
# Using npm global install
claude mcp add --transport stdio reformer -- reformer-mcp

# Or with npx
claude mcp add --transport stdio reformer -- npx @reformer/mcp
```

### Verify registration

```bash
claude mcp list
```

## Available Tools

| Tool | Description |
|------|-------------|
| `report_issue` | Report an issue and its solution for feedback collection |

### report_issue

Allows AI assistants to report issues encountered while working with ReFormer and their solutions. Reports are stored locally in `~/.reformer/issues.jsonl` for analysis.

**Parameters:**
- `error` (required) - The error message or problem description
- `solution` (required) - The solution or fix that resolved the issue
- `tags` (optional) - Tags for categorization (e.g., `category:behavior`, `agent:claude`, `severity:critical`)
- `context` (optional) - Additional context with `examples`, `relatedFiles`, `notes`

## Available Resources

| URI | Description |
|-----|-------------|
| `reformer://docs` | Full ReFormer documentation |
| `reformer://api` | API reference |
| `reformer://examples` | Code examples |
| `reformer://troubleshooting` | Common problems and solutions |

## Development

```bash
# Clone the repository
git clone https://github.com/AlexandrBukhtatyy/ReFormer.git
cd ReFormer/packages/reformer-mcp

# Install dependencies
npm install

# Build
npm run build

# Run locally
node dist/index.js
```

## Debug Mode

For debugging the MCP server, enable debug mode with the `REFORMER_DEBUG` environment variable:

```bash
REFORMER_DEBUG=true node dist/index.js
```

This enables debug-only features:

| Type | Name | Description |
|------|------|-------------|
| Tool | `debug` | Debug tool for testing |
| Resource | `reformer://debug` | Debug information |
| Prompt | `debug` | Analyze ReFormer form code |

## Testing

### Using MCP Inspector

```bash
npm install -g @modelcontextprotocol/inspector
REFORMER_DEBUG=true npx mcp-inspector node ./dist/index.js
```

### In Claude Code

```bash
# Register local build with debug mode
claude mcp add --transport stdio reformer -e REFORMER_DEBUG=true -- node /path/to/reformer-mcp/dist/index.js
```

## License

MIT
npm package: @reformer/ui
Description: Headless UI components for @reformer/core - form arrays, multi-step wizards, and more
Author: Alexandr Bukhtatyy
Latest version: 2.0.0

# @reformer/ui

Headless UI components for `@reformer/core` - build accessible, fully customizable form interfaces.

## Features

- **Headless** - No default styles, complete design freedom
- **Compound Components** - Declarative, composable API
- **Render Props** - Full control over rendering
- **TypeScript** - Fully typed with generics support
- **Tree-shakable** - Import only what you need

## Installation

```bash
npm install @reformer/ui @reformer/core
```

## Components

### FormArray

Manage dynamic form arrays with add/remove functionality.

```tsx
import { FormArray } from '@reformer/ui/form-array';

<FormArray.Root control={form.items}>
  <FormArray.Empty>
    <p>No items yet</p>
  </FormArray.Empty>

  <FormArray.List>
    {({ control, index, remove }) => (
      <div>
        <span>Item #{index + 1}</span>
        <ItemForm control={control} />
        <button onClick={remove}>Remove</button>
      </div>
    )}
  </FormArray.List>

  <FormArray.AddButton>Add Item</FormArray.AddButton>
</FormArray.Root>
```

### FormNavigation

Build multi-step form wizards with validation.

```tsx
import { FormNavigation } from '@reformer/ui/form-navigation';

<FormNavigation form={form} config={config}>
  <FormNavigation.Indicator steps={STEPS}>
    {({ steps, goToStep }) => (
      <nav>
        {steps.map(step => (
          <button
            key={step.number}
            onClick={() => goToStep(step.number)}
            disabled={!step.canNavigate}
          >
            {step.title}
          </button>
        ))}
      </nav>
    )}
  </FormNavigation.Indicator>

  <FormNavigation.Step component={Step1} control={form} />
  <FormNavigation.Step component={Step2} control={form} />

  <FormNavigation.Actions onSubmit={handleSubmit}>
    {({ prev, next, submit, isFirstStep, isLastStep }) => (
      <div>
        {!isFirstStep && <button {...prev}>Back</button>}
        {!isLastStep ? (
          <button {...next}>Next</button>
        ) : (
          <button {...submit}>Submit</button>
        )}
      </div>
    )}
  </FormNavigation.Actions>
</FormNavigation>
```

## Hooks

For full customization, use the hooks directly:

```tsx
import { useFormArray } from '@reformer/ui/form-array';
import { useFormNavigation } from '@reformer/ui/form-navigation';
```

## License

MIT
npm package: @reforml/material-ui
Description: material-ui binding for reforml, the react form defined by yaml
Author: dipsywong98
Latest version: 0.4.1

This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

It is linked to the reforml package in the parent directory for development purposes.

You can run `yarn install` and then `yarn start` to test your package.
npm package: @reformlab/ui-theme
Description: 개혁신당 공식 shadcn/ui 테마 - CSS 변수 및 Tailwind CSS v4 프리셋
Author: ReformLab
Latest version: 0.2.1

# @reformlab/ui-theme

개혁신당 공식 shadcn/ui 테마 패키지

## 설치

```bash
npm install @reformlab/ui-theme
```

## 사용법 (Tailwind CSS v4)

`globals.css` 또는 메인 CSS 파일에 추가:

```css
@import "tailwindcss";
@import "@reformlab/ui-theme/preset";
```

이 한 줄로 개혁신당 테마의 모든 색상, 폰트, radius가 Tailwind 유틸리티 클래스로 사용 가능합니다.
(`bg-primary`, `text-foreground`, `rounded-lg` 등)

### CSS 변수만 사용

Tailwind 없이 CSS 변수만 필요한 경우:

```css
@import "@reformlab/ui-theme/theme.css";
```

## 테마 미리보기

- **Primary**: `#ff7920` (오렌지)
- **Font**: Noto Sans KR
- **Border Radius**: 0.2rem

Light/Dark 모드를 모두 지원합니다.

## 라이선스

MIT