open-index/open-npm huggingface dataset:
npm package: @seed-catalog/carousel
Description: Carousel custom-element
Author: vicdata@outlook.com
Latest version: 1.0.10

<img src="https://cdn.jsdelivr.net/gh/vicdata4/doc-template/assets/seed-icon.png" width="40">

## Seed Carousel
### [Documentation](https://vicdata4.github.io/seed-catalog/seed/carousel)

Npm

```
npm install @seed-catalog/carousel
```

How to use

```js
import { LitElement, html, css } from 'lit-element';
import '@seed-catalog/carousel';
import '@seed-catalog/stepper';

class MyComponent extends LitElement {
  static get styles() {
    return [
      css`
        .custom-class {
            ...
        }
        `
    ];
  }

  render() {
    return html`
      <seed-carousel>
        <div class="custom-class">Card 1</div>
        <div class="custom-class">Card 2</div>
        <div class="custom-class">Card 3</div>
        <div class="custom-class">Card 4</div>
        // Optional stepper
        <seed-stepper slot="stepper"></seed-stepper>
      </seed-carousel>
    `;
  }
}
```

Link: https://www.npmjs.com/package/@seed-catalog/carousel
npm package: @seed-catalog/collapse
Description: Collapse custom-element
Author: vicdata@outlook.com
Latest version: 1.0.2

<img src="https://cdn.jsdelivr.net/gh/vicdata4/doc-template/assets/seed-icon.png" width="40">

## Seed Collapse

### [Storybook](https://vicdata4.github.io/seed-catalog/?path=/story/seed-catalog--collapse)

### [Dependencies](package.json)

- [LitElement](https://lit-element.polymer-project.org) Web Components

Npm

```
npm install @seed-catalog/collapse
```

How to use

```js
import { LitElement, html, css } from 'lit-element';
import { seedStyle } from '@seed-catalog/styles';
import '@seed-catalog/collapse';
import '@seed-catalog/dropdown';

class MyComponent extends LitElement {
  static get styles() {
    return [
      seedStyle,
      css`
        ...
      `
    ];
  }

  render() {
    return html`
      <seed-collapse>
        <seed-dropdown position="absolute" maxWidth="300" rotate clickout>
          <button slot="button" class="sd-btn-mix red"><i class="material-icons">keyboard_arrow_down</i>Collapse</button>
          <p slot="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Cras ut viverra leo, vel dapibus quam. Proin a sollicitudin quam,
            eget viverra diam. Donec euismod mattis dignissim.
          </p>
        </seed-dropdown>
      </seed-collapse>
    `;
  }
}
```

Link: https://www.npmjs.com/package/@seed-catalog/collapse
npm package: @seed-catalog/dropdown
Description: Dropdown custom-element
Author: vicdata@outlook.com
Latest version: 1.0.4

<img src="https://cdn.jsdelivr.net/gh/vicdata4/doc-template/assets/seed-icon.png" width="40">

## Seed Dropdown

### [Documentation](https://vicdata4.github.io/seed-catalog/seed/dropdown)

Npm

```
npm install @seed-catalog/dropdown
```

How to use

```js
import { LitElement, html, css } from 'lit-element';
import { seedStyle } from '@seed-catalog/styles';
import '@seed-catalog/dropdown';

class MyComponent extends LitElement {
  static get styles() {
    return [
      seedStyle,
      css`
        ...
      `
    ];
  }

  render() {
    return html`
      <seed-dropdown position="relative">
        <button slot="button" class="sd-btn red">Dropdown</button>
        <p slot="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Cras ut viverra leo, vel dapibus quam. Proin a sollicitudin quam,
          eget viverra diam. Donec euismod mattis dignissim.
        </p>
      </seed-dropdown>
    `;
  }
}
```

Link: https://www.npmjs.com/package/@seed-catalog/dropdown
npm package: @seed-catalog/modal
Description: Modal custom-element
Author: vicdata@outlook.com
Latest version: 1.2.3

<img src="https://cdn.jsdelivr.net/gh/vicdata4/doc-template/assets/seed-icon.png" width="40">

## Seed Modal

### [Documentation](https://vicdata4.github.io/seed-catalog/seed/modal)

Npm

```
npm install @seed-catalog/modal
```

How to use

```js
import { LitElement, html, css } from 'lit-element';
import { seedStyle } from '@seed-catalog/styles';
import '@seed-catalog/modal';

class MyComponent extends LitElement {
  render() {
    return html`
      <seed-modal>
        <button slot="button" class="sd-btn blue">Open Modal</button>
        <div slot="header" class="header">      
          <span>Building Web Components</span>
          <button class="sd-icon clear close"><i class="material-icons blue-mate">close</i></button>
        </div>
        <div slot="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
        <div slot="footer" class="footer">
          <button class="sd-btn black close">Close</button>
          <button class="sd-btn blue-mate">Send</button>
        </div>
      </seed-modal>
    `;
  }
}
```

Link: https://www.npmjs.com/package/@seed-catalog/modal
npm package: @seed-catalog/progress-ring
Description: Progress ring custom-element
Author: vicdata@outlook.com
Latest version: 1.2.2

<img src="https://cdn.jsdelivr.net/gh/vicdata4/doc-template/assets/seed-icon.png" width="40">

## Seed Progress Ring

### [Documentation](https://vicdata4.github.io/seed-catalog/seed/ring)

Npm

```
npm install @seed-catalog/progress-ring
```

How to use

```js
import { LitElement, html, css } from 'lit-element';
import '@seed-catalog/progress-ring';

class MyComponent extends LitElement {
  render() {
    return html`
      <seed-progress-ring></seed-progress-ring>
      
      <seed-progress-ring .percent="20" text="%"></seed-progress-ring>

      <seed-progress-ring .percent="20" custom>
        <div slot="custom">
          ...
        </div>
      </seed-progress-ring>

      <seed-progress-ring .percent="70" text="Uploading"></seed-progress-ring>

      <seed-progress-ring .percent="10" text="Uploading" only-text></seed-progress-ring>
      
      Optional attributes: ringColor / ringBackground / background / textColor

      <seed-progress-ring 
        .percent="20"
        ringColor="#f70bdd"
        ringBackground="rgba(0, 0, 0, 0.3)"
        background="grey">
      </seed-progress-ring>
    `;
  }
}
```

Link: https://www.npmjs.com/package/@seed-catalog/progress-ring
npm package: @seed-catalog/stepper
Description: Stepper custom-element
Author: vicdata@outlook.com
Latest version: 1.0.5

<img src="https://cdn.jsdelivr.net/gh/vicdata4/doc-template/assets/seed-icon.png" width="40">

## Seed Stepper

### [Documentation](https://vicdata4.github.io/seed-catalog/seed/stepper)

Npm

```
npm install @seed-catalog/stepper
```

How to use

```js
import { LitElement, html, css } from 'lit-element';
import '@seed-catalog/stepper';

class MyComponent extends LitElement {
  render() {
    return html`
      <seed-stepper .index="${0}" .size="${4}"></seed-stepper>
    `;
  }
}
```

Link: https://www.npmjs.com/package/@seed-catalog/stepper
npm package: @seed-catalog/styles
Description: Seed css styles
Author: vicdata@outlook.com
Latest version: 1.0.1

<img src="https://cdn.jsdelivr.net/gh/vicdata4/doc-template/assets/seed-icon.png" width="40">

## Seed Styles

### [Storybook](https://vicdata4.github.io/seed-catalog/?path=/story/seed-style--button)

### [Dependencies](package.json)

- [LitElement](https://lit-element.polymer-project.org) Web Components

Npm

```
npm install @seed-catalog/styles
```

Link: https://www.npmjs.com/package/@seed-catalog/styles
npm package: @seed-design/cli
Description: SEED Design 컴포넌트를 프로젝트에 추가하기 위한 CLI 도구입니다.
Latest version: 1.3.1

# @seed-design/cli

SEED Design 컴포넌트를 프로젝트에 추가하기 위한 CLI 도구입니다.

## 개발 환경 설정

### 의존성 설치

```bash
bun install
```

### 환경 변수 설정 (선택사항)

PostHog 텔레메트리를 사용하려면 `.env` 파일을 생성하세요:

```bash
# packages/cli/.env
POSTHOG_API_KEY=your-api-key
POSTHOG_HOST=https://us.i.posthog.com

# 텔레메트리 비활성화 (로컬 개발 시)
DISABLE_TELEMETRY=true
```

**참고**: 환경 변수가 없어도 CLI는 정상적으로 동작합니다. 텔레메트리만 비활성화됩니다.

## 개발

### Dev 모드 실행

Watch 모드로 CLI를 실행합니다:

```bash
bun dev
```

Dev 모드에서는:
- 코드 변경 시 자동으로 재빌드됩니다
- `NODE_ENV=dev`로 설정되어 텔레메트리 이벤트가 콘솔에만 출력됩니다
- PostHog API 호출이 실제로 발생하지 않습니다

### 로컬 테스트

1. `@seed-design/docs`에서 `bun dev` 실행 (snippet 서버)
2. `packages/cli`에서 `bun dev` 실행 (watch 모드)
3. `bun run ./bin/index.mjs` 실행하여 CLI 명령어 테스트:

```bash
bun run ./bin/index.mjs init
bun run ./bin/index.mjs add ui:action-button
```

## 빌드

프로덕션 빌드:

```bash
bun run build
```

빌드 결과물:
- `bin/index.mjs` - 번들링 및 minify된 CLI 실행 파일
- 환경 변수 (`POSTHOG_API_KEY`, `POSTHOG_HOST`)가 빌드 시 번들에 주입됩니다

## 테스트

```bash
bun test
```

## 배포

이 패키지는 [Changesets](https://github.com/changesets/changesets)을 통해 자동으로 배포됩니다.

**참고**: 배포 시 GitHub Secrets에 `POSTHOG_API_KEY`와 `POSTHOG_HOST`가 설정되어 있어야 텔레메트리가 활성화됩니다.
npm package: @seed-design/codemod
Description: 코드 마이그레이션 도구
Latest version: 1.0.0

# @seed-design/codemod

코드 마이그레이션 도구

```shell
npx @seed-design/codemod@latest --list
```

```shell
npx @seed-design/codemod@latest <transform> <...경로> <옵션>
```

## 옵션

- `--list`
  - 사용 가능한 transform 목록을 보여줘요.
- `--log`
  - 로그를 파일로 저장해요.
  - `./`에 `migrate-icons-combined.log`와 `migrate-icons-warnings.log` 파일이 생성돼요.
- `--parser`
  - jscodeshift가 사용할 파서를 지정해요
  - `babel` | `babylon` | `flow` | `ts` | `tsx`
  - 기본값: `tsx`
  - 예시: `--parser=babel`
- [`--extensions`](https://jscodeshift.com/run/cli/#--extensionsext)
  - 변환할 파일 확장자를 지정해요.
  - 지정하지 않으면 `<경로>` 안의 `js,jsx,ts,tsx` 파일을 변환해요.
    - `d.ts`는 제외돼요.
  - 예시: `--extensions="ts,tsx"`
- [`--ignore-config`](https://jscodeshift.com/run/cli/#--ignore-configfile)
  - 변환하지 않을 파일 패턴이 정의된 파일을 지정해요.
  - 예시: `--ignore-config=".gitignore"`