open-index/open-npm huggingface dataset:
npm package: @karrotmarket/karrot-ui-icon
Description: Figma를 진실의 원천으로 하는 Icon 저장소
Latest version: 0.0.0-20230217.1

# karrot-ui-icon

Figma를 진실의 원천으로 하는 Icon 저장소

## SVG

```ts
import homeSvgUrl from "@karrotmarket/karrot-ui-icon/svg/icon_home.svg";
```

## React Component

> 현재 리액트 컴포넌트는 최대한 [`@seed-design/icon`](https://github.com/daangn/seed-design/tree/main/packages/icon)을 사용해주세요.

```tsx
import HomeSvg from "@karrotmarket/karrot-ui-icon/lib/react/IconHome";
```

## Android Vector Drawable

See [`./drawable`](drawble)
npm package: @karrotmarket/lynx-monochrome-icon
Description: Lynx monochrome icons for Seed Design System
Author: junghyeonsu
Latest version: 1.7.0

# @karrotmarket/lynx-monochrome-icon

Lynx monochrome icons for Seed Design System.

## Installation

```bash
yarn add @karrotmarket/lynx-monochrome-icon
yarn add -D @karrotmarket/lynx-icon-config
```

## Setup

```typescript
import { defineConfig } from '@lynx-js/rspeedy'
import { applyLynxIconConfig } from '@karrotmarket/lynx-icon-config'

export default defineConfig({
  plugins: [
    pluginReactLynx(),
  ],

  tools: {
    rspack(config) {
      applyLynxIconConfig(config)
      return config
    },
  },
})
```

## Usage

```typescript
import { IconAppleFill, IconArrowLeft } from '@karrotmarket/lynx-monochrome-icon';

function MyComponent() {
  return (
    <view>
      {/* Default size (24px) */}
      <IconAppleFill color="#FF6B00" />

      {/* Custom size */}
      <IconArrowLeft size={32} color="#000000" />
    </view>
  );
}
```

## Props

### IconProps

```typescript
interface IconProps {
  size?: number;   // Default: 24
  color: string;   // Required
}
```

- **size**: Icon size in pixels (default: 24)
- **color**: Icon tint color (required)

## Related Packages

- [@karrotmarket/lynx-icon-config](../lynx-icon-config) - Rspack config helper for Lynx icons (recommended)
- [@karrotmarket/lynx-icon-loader](../lynx-icon-loader) - Rspack/Webpack loader for Lynx icons (legacy)
- [@karrotmarket/assets-monochrome](../../assets/monochrome) - Raw SVG assets

## License

MIT
npm package: @karrotmarket/lynx-multicolor-icon
Description: Lynx multicolor icons for Seed Design System
Author: junghyeonsu
Latest version: 1.8.0

# @karrotmarket/lynx-multicolor-icon

Lynx multicolor icons for Seed Design System.

## Installation

```bash
yarn add @karrotmarket/lynx-multicolor-icon
yarn add -D @karrotmarket/lynx-icon-config
```

## Setup

```typescript
import { defineConfig } from '@lynx-js/rspeedy'
import { applyLynxIconConfig } from '@karrotmarket/lynx-icon-config'

export default defineConfig({
  plugins: [
    pluginReactLynx(),
  ],

  tools: {
    rspack(config) {
      applyLynxIconConfig(config)
      return config
    },
  },
})
```

## Usage

```typescript
import { IconApple, IconCamera } from '@karrotmarket/lynx-multicolor-icon';

function MyComponent() {
  return (
    <view>
      {/* Default size (24px) - uses original multicolor */}
      <IconApple />

      {/* Custom size */}
      <IconCamera size={32} />
    </view>
  );
}
```

## Props

### IconProps

```typescript
interface IconProps {
  size?: number;   // Default: 24
}
```

- **size**: Icon size in pixels (default: 24)

**Note**: Multicolor icons use their original colors and do not accept a `color` prop.

## Related Packages

- [@karrotmarket/lynx-icon-config](../lynx-icon-config) - Rspack config helper for Lynx icons (recommended)
- [@karrotmarket/lynx-icon-loader](../lynx-icon-loader) - Rspack/Webpack loader for Lynx icons (legacy)
- [@karrotmarket/assets-multicolor](../../assets/multicolor) - Raw SVG assets

## License

MIT
npm package: @karrotmarket/react-monochrome-icon
Description: ```bash # React npm install @daangn/react-monochrome-icon yarn add @daangn/react-monochrome-icon ```
Author: junghyeonsu
Latest version: 1.14.0

# @daangn/react-monochrome-icon

### Install

```bash
# React
npm install @daangn/react-monochrome-icon
yarn add @daangn/react-monochrome-icon
```

### Usage

```jsx
import { IconName1, IconName2 } from "@daangn/react-monochrome-icon";

// SVG props 사용 가능
<IconName1 size={20} />;
```

프로젝트에서 사용하고 있는 번들러가 tree-shaking을 지원한다면, 사용하지 않는 아이콘은 번들에 포함되지 않습니다.
그게 아니라면 `Deep Import`를 사용하여 필요한 아이콘만 가져오는 것을 권장합니다.

```jsx
import IconName1 from "@daangn/react-monochrome-icon/IconName1";
```
npm package: @karrotmarket/react-multicolor-icon
Description: ```bash # React npm install @daangn/react-multicolor-icon yarn add @daangn/react-multicolor-icon ```
Author: junghyeonsu
Latest version: 1.12.0

# @daangn/react-multicolor-icon

### Install

```bash
# React
npm install @daangn/react-multicolor-icon
yarn add @daangn/react-multicolor-icon
```

### Usage

```jsx
import { IconName1, IconName2 } from "@daangn/react-multicolor-icon";

// SVG props 사용 가능
<IconName1 size={20} />;
```

프로젝트에서 사용하고 있는 번들러가 tree-shaking을 지원한다면, 사용하지 않는 아이콘은 번들에 포함되지 않습니다.
그게 아니라면 `Deep Import`를 사용하여 필요한 아이콘만 가져오는 것을 권장합니다.

```jsx
import IconName1 from "@daangn/react-multicolor-icon/IconName1";
```
npm package: @karrotmarket/vue2-monochrome-icon
Description: ```bash # Vue2 npm install @daangn/vue2-monochrome-icon yarn add @daangn/vue2-monochrome-icon ```
Author: junghyeonsu
Latest version: 1.14.0

# @daangn/vue2-monochrome-icon

### Install

```bash
# Vue2
npm install @daangn/vue2-monochrome-icon
yarn add @daangn/vue2-monochrome-icon
```

### Usage

```jsx
import { IconName1, IconName2 } from "@daangn/vue2-monochrome-icon";

// SVG props 사용 가능
<IconName1 size={20} />;
```

프로젝트에서 사용하고 있는 번들러가 tree-shaking을 지원한다면, 사용하지 않는 아이콘은 번들에 포함되지 않습니다.
그게 아니라면 `Deep Import`를 사용하여 필요한 아이콘만 가져오는 것을 권장합니다.

```jsx
import IconName1 from "@daangn/vue2-monochrome-icon/IconName1";
```
npm package: @karrotmarket/vue2-multicolor-icon
Description: ```bash # Vue2 npm install @daangn/vue2-multicolor-icon yarn add @daangn/vue2-multicolor-icon ```
Author: junghyeonsu
Latest version: 1.12.0

# @daangn/vue2-multicolor-icon

### Install

```bash
# Vue2
npm install @daangn/vue2-multicolor-icon
yarn add @daangn/vue2-multicolor-icon
```

### Usage

```jsx
import { IconName1, IconName2 } from "@daangn/vue2-multicolor-icon";

// SVG props 사용 가능
<IconName1 size={20} />;
```

프로젝트에서 사용하고 있는 번들러가 tree-shaking을 지원한다면, 사용하지 않는 아이콘은 번들에 포함되지 않습니다.
그게 아니라면 `Deep Import`를 사용하여 필요한 아이콘만 가져오는 것을 권장합니다.

```jsx
import IconName1 from "@daangn/vue2-multicolor-icon/IconName1";
```
npm package: @karrotmarket/vue3-monochrome-icon
Description: ```bash # React npm install @daangn/vue3-monochrome-icon yarn add @daangn/vue3-monochrome-icon ```
Author: junghyeonsu
Latest version: 1.14.0

# @daangn/vue3-monochrome-icon

### Install

```bash
# React
npm install @daangn/vue3-monochrome-icon
yarn add @daangn/vue3-monochrome-icon
```

### Usage

```jsx
import { IconName1, IconName2 } from "@daangn/vue3-monochrome-icon";

// SVG props 사용 가능
<IconName1 size={20} />;
```

프로젝트에서 사용하고 있는 번들러가 tree-shaking을 지원한다면, 사용하지 않는 아이콘은 번들에 포함되지 않습니다.
그게 아니라면 `Deep Import`를 사용하여 필요한 아이콘만 가져오는 것을 권장합니다.

```jsx
import IconName1 from "@daangn/vue3-monochrome-icon/IconName1";
```
npm package: @karrotmarket/vue3-multicolor-icon
Description: ```bash # React npm install @daangn/vue3-multicolor-icon yarn add @daangn/vue3-multicolor-icon ```
Author: junghyeonsu
Latest version: 1.12.0

# @daangn/vue3-multicolor-icon

### Install

```bash
# React
npm install @daangn/vue3-multicolor-icon
yarn add @daangn/vue3-multicolor-icon
```

### Usage

```jsx
import { IconName1, IconName2 } from "@daangn/vue3-multicolor-icon";

// SVG props 사용 가능
<IconName1 size={20} />;
```

프로젝트에서 사용하고 있는 번들러가 tree-shaking을 지원한다면, 사용하지 않는 아이콘은 번들에 포함되지 않습니다.
그게 아니라면 `Deep Import`를 사용하여 필요한 아이콘만 가져오는 것을 권장합니다.

```jsx
import IconName1 from "@daangn/vue3-multicolor-icon/IconName1";
```
npm package: @karry-design/vitepress-plugin-demo-component
Description: preview component of code and component in vitepress
Latest version: 0.2.0

# @karry-design/vitepress-plugin-demo-component

## Demo of Vue SFC components in vitepress

## 🎉 Introduce

We can see their component display and code example display from some excellent UI component libraries such as `element-plus` and `Ant Design Vue`

This project is based on `vitepress` and `markdown-it` implementation to display components and code examples in documents. Using this plug-in, Vue SFC components can be displayed in static documents

## 🏄‍♂️ Packages

- [@karry-design/vitepress-plugin-demo-preview](https://www.npmjs.com/package/@karry-design/vitepress-plugin-demo-preview)

## ⚙️ Installation

```sh
pnpm add @karry-design/vitepress-plugin-demo-component @karry-design/vitepress-plugin-demo-preview
```

## ⚡ Usage

configure in your vitepress/theme entry file

```ts
import { AntDesignContainer, ElementPlusContainer, NaiveUIContainer } from '@vitepress-demo-preview/component'
import '@vitepress-demo-preview/component/dist/style.css'

export default {
  ...DefaultTheme,
  enhanceApp({ app }: { app: App }) {
    app.component('demo-preview', AntDesignContainer)
  }
}
```

configure markdown to add plugin

```ts
import { defineConfig } from 'vitepress'
import { containerPreview, componentPreview } from '@vitepress-demo-preview/plugin'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(containerPreview)
      md.use(componentPreview)
    }
  }
})
```

### Preview of Component Form

```md

### Single-line

<Preview path="./components/ComponentPreview.vue" title="Component Preview"></Preview>

### Multi-line

<Preview 
  path="./components/ComponentPreview.vue" 
  title="Component Preview" 
></Preview>

### Multi-line Description

<Preview 
  path="./components/ComponentPreview.vue" 
  title="Component Preview" 
  description="Preview By Component Form"
>
  <template #description>
    <h1>this is slot data</h1>
    <h2> level</h2>
  </template>
</Preview>

### Single-line Description

<Preview path="./components/ComponentPreview.vue" title="Component Preview" description="Preview By Component Form"></Preview>

```

## API

Name | Description | Explanation
 --- | --- | ---
path | Demo path | Cannot be left blank
title |	Explanation |	-
description |	Description	| -
noCode | Do not display code | Default `false`

## Slots

- `description`: Extension for descriptive content.

## 📑 License
npm package: @karry-design/vitepress-plugin-demo-preview
Description: preview component of code and component in vitepress
Latest version: 0.2.0

# vitepress-plugin-demo-preview

## Demo of Vue SFC components in vitepress

## 🎉 Introduce

We can see their component display and code example display from some excellent UI component libraries such as `element-plus` and `Ant Design Vue`

This project is based on `vitepress` and `markdown-it` implementation to display components and code examples in documents. Using this plug-in, Vue SFC components can be displayed in static documents

## 🏄‍♂️ Packages

- [@karry-design/vitepress-plugin-demo-component](https://www.npmjs.com/package/@karry-design/vitepress-plugin-demo-component)

## ⚙️ Installation

```sh
pnpm add @karry-design/vitepress-plugin-demo-component @karry-design/vitepress-plugin-demo-preview
```

## ⚡ Usage

configure in your vitepress/theme entry file

```ts
import { AntDesignContainer, ElementPlusContainer, NaiveUIContainer } from '@vitepress-demo-preview/component'
import '@vitepress-demo-preview/component/dist/style.css'

export default {
  ...DefaultTheme,
  enhanceApp({ app }: { app: App }) {
    app.component('demo-preview', AntDesignContainer)
  }
}
```

configure markdown to add plugin

```ts
import { defineConfig } from 'vitepress'
import { containerPreview, componentPreview } from '@vitepress-demo-preview/plugin'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(containerPreview)
      md.use(componentPreview)
    }
  }
})
```

### Preview of Component Form

```md

### Single-line

<Preview path="./components/ComponentPreview.vue" title="Component Preview"></Preview>

### Multi-line

<Preview 
  path="./components/ComponentPreview.vue" 
  title="Component Preview" 
></Preview>

### Multi-line Description

<Preview 
  path="./components/ComponentPreview.vue" 
  title="Component Preview" 
  description="Preview By Component Form"
>
  <template #description>
    <h1>this is slot data</h1>
    <h2> level</h2>
  </template>
</Preview>

### Single-line Description

<Preview path="./components/ComponentPreview.vue" title="Component Preview" description="Preview By Component Form"></Preview>

```

## 📑 License
npm package: @karsegard/cex
Description: className Extender
Latest version: 1.4.4

# react-gen-classes

![Alt text](./coverage/badge-lines.svg)

      import gen from '@geekagency/gen-classes'


      export default props=>{
        const classnames = gen(
          [

            'always-here-class', // pass a string, it will always be present

            {'conditional_class': _=> props.active ? true: false}, // if you pass an object, it's value will be called as a function and given the result will apply the key as a class

            props=> props.test=='world' ? 'hello-world': ''  // if you pass a function, It'll just append the output if not empty

          ]
        )

        return (<h1 className={classnames}>test</h1>)
      }
npm package: @karsegard/react-compose
Description: Higher Order Components collection
Author: FDT2k
Latest version: 1.3.2

# React-compose
## Introduction


This is a collection of Higher Order Function that helps to compose React components


## Concept

  ### modifiers
Modifiers are props that will be converted to a class
  ### variables
Variables are props that will be converted to styles

## API
	
* withModifiers(namer[Function], modifiers[Array])
	Generate a new component that will accept Props presents in the modifiers Array. For each passed prop it will call the namer function 
* withVariables  = (keyEnhancer[Function], valEnhancer[Function], variables[Array])

* keyEnhancer =  prop, value, all props => new key
* valueEnhancer =  value => value

## Re-usable & composable Properties

For example, you want to create components That support getting a grid 
area.



	import {withVariables,withBaseClass} from  '@karsegard/react-compose'
	
	export  const  withGridArea  =  withVariables(
				_  =>  `gridArea`,
				x  =>  `${x}`,
				['area']
	);

  
  	export  const  ComponentWithArea  =  compose(
		withGridArea,
		withBaseClass('area-component')
	)(divElement);

	// somewhere Else
	...
	let MyComponentWithArea = withArea(MyExistingComponent)
	return (<MyComponentWithArea area="header"/>)




## Install

  

```bash

yarn add @karsegard/react-compose

```

  

## Usage

see [example](example)
 

## License

  

MIT © [FDT2k](https://github.com/FDT2k)
npm package: @karsegard/react-hooks
Description: Hook collection
Author: FDT2k
Latest version: 2.9.0

# react-hooks

> Various react hooks

[![NPM](https://img.shields.io/npm/v/@karsegard/react-hooks.svg)](https://www.npmjs.com/package/@karsegard/react-hooks)

## Install

```bash
npm install --save @karsegard/react-hooks
```

## Usage

  see [example](example)

## License

MIT © [FDT2k](https://gitlab.com/FDT2k) [Karsegard Digital Agency Sàrl](https://www.karsegard.ch)
npm package: @karsegard/react-redux
Description: React Redux Toolkit
Author: FDT2k
Latest version: 1.8.0

# React-translate
## Introduction
React & Redux utilities


## Install

  

```bash
yarn add @karsegard/react-redux

```

  

## Usage

see [example](example)
 

## License

  

MIT © [FDT2k](https://github.com/FDT2k)
npm package: @karsegard/react-translate
Description: React Translation Provider
Author: FDT2k
Latest version: 1.1.0

# React-translate
## Introduction
This is an simple implementation of translation provider for react apps.


## Install

  

```bash
yarn add @karsegard/react-translate

```

  

## Usage

see [example](example)
 

## License

  

MIT © [FDT2k](https://github.com/FDT2k)
npm package: @karsegard/react-web-component
Author: FDT2k
Latest version: 1.1.1

# React Web Component


## Usage


    import { ReactWebComponent } from '@karsegard/react-web-component';
    import MyComponent from './MyComponent'


    customElements.define('my-custom-tag', ReactWebComponent(MyComponent));

## In browser

This requires several script imports 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.8.1/prop-types.min.js" ></script>
    <script  src="https://unpkg.com/@karsegard/react-web-component@1.0.3/dist/reactWebComponent.umd.js" defer></script>

then you can import your component

    <script  src="./dist/k-select.umd.js" defer></script>
npm package: @karsegard/wc-select
Description: <head>     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js" ></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js" ></script>     <script src="https
Author: FDT2k
Latest version: 1.0.4

# React Webcomponent Skel

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.8.1/prop-types.min.js" ></script>
    <script  src="https://unpkg.com/@karsegard/react-web-component@1.1.0/dist/reactWebComponent.umd.js" defer></script>
    <script  src="https://unpkg.com/@karsegard/wc-select@1.0.2/dist/k-select.umd.js" defer></script>

    </head>
    <body>
        <k-select class="pouet" name="test">
        <option value="12">test</option>
        <option>test2</option>
        </k-select>
    </body>
npm package: @karstenda/loro-prosemirror
Description: ProseMirror Binding for Loro
Author: Loro Team
Latest version: 0.4.3

# Prosemirror Binding for Loro

- Sync document state with Loro
- Sync cursors with Loro's EphemeralStore (preferred) or legacy Awareness and
  [Cursor](https://loro.dev/docs/tutorial/cursor)
- Undo/Redo in collaborative editing
- [🎨 Try it online](https://main--6661e86e215da40180d90507.chromatic.com)

```ts
import {
  CursorEphemeralStore,
  LoroEphemeralCursorPlugin,
  LoroSyncPlugin,
  LoroUndoPlugin,
  redo,
  undo,
} from "loro-prosemirror";
import { LoroDoc } from "loro-crdt";
import { EditorView } from "prosemirror-view";
import { EditorState } from "prosemirror-state";

const doc = new LoroDoc();
const presence = new CursorEphemeralStore(doc.peerIdStr);

const plugins = [
  ...pmPlugins,
  LoroSyncPlugin({ doc }),
  LoroUndoPlugin({ doc }),
  keymap({
    "Mod-z": undo,
    "Mod-y": redo,
    "Mod-Shift-z": redo,
  }),
  LoroEphemeralCursorPlugin(presence, {}),
];
const editor = new EditorView(editorDom, {
  state: EditorState.create({ doc, plugins }),
});
```

https://github.com/loro-dev/prosemirror/assets/18425020/d0f01760-b76c-43b5-b7f7-b0b224130d9d

## Syncing more than one editor instance

In case you want to sync multiple ProseMirror editor instances to the same Loro document, you can define for each ProseMirror editor the [Container ID](https://loro.dev/docs/advanced/cid) into which the editor's content will be stored:

```ts
const doc = new LoroDoc();
const map = doc.getMap("<unique-id-per-editor-instance>");

const plugins = [
  LoroSyncPlugin({ doc, containerId: map.id }),
  // see above for other plugins
];
```