open-index/open-npm huggingface dataset:
npm package: @gbgr/css
Description: GBGR Design System을 위한 전역 CSS 스타일을 제공하는 패키지입니다. 디자인 토큰(CSS 변수)을 제공합니다.
Latest version: 1.0.0

# @gbgr/css

GBGR Design System을 위한 전역 CSS 스타일을 제공하는 패키지입니다. 디자인 토큰(CSS 변수)을 제공합니다.

## 설치

```bash
pnpm add @gbgr/css
# 또는
npm install @gbgr/css
# 또는
yarn add @gbgr/css
```

## 사용법

애플리케이션의 진입점 파일에서 메인 CSS 파일을 import하세요 (예: Next.js의 `_app.tsx` 또는 Vite의 `main.ts`):

```javascript
// 애플리케이션의 진입점 파일에서
import '@gbgr/css';
```

이렇게 하면 모든 디자인 토큰이 CSS 변수로 사용 가능해집니다 (예: `var(--color-semantic-brand-primary)`).

## 언제 사용하나요?

- **새 프로젝트를 시작할 때**: 디자인 토큰(CSS 변수)을 바로 적용하고 싶을 때
- **간단하게 시작하고 싶을 때**: 최소한의 설정으로 디자인 시스템을 적용하고 싶을 때

대부분의 애플리케이션에서는 이 패키지를 사용하는 것을 권장합니다. 특수한 요구사항이 있는 경우에만 `@gbgr/tokens`를 직접 사용하세요.
npm package: @gbgr/icons
Description: This package provides a set of SVG icons as React components for the GBGR Design System.
Latest version: 0.1.1

# @gbgr/icons

This package provides a set of SVG icons as React components for the GBGR Design System.

## Installation

```bash
pnpm add @gbgr/icons
# or
npm install @gbgr/icons
# or
yarn add @gbgr/icons
```

## Usage

You can import and use any icon component directly:

```jsx
import { HomeIcon } from '@gbgr/icons';

function MyComponent() {
  return <HomeIcon width={24} height={24} />;
}
```

Each icon is a standard React component that accepts `SVGProps<SVGSVGElement>` props, allowing you to customize its size, color, and other SVG attributes.
npm package: @gbgr/react
Description: This package contains React components and hooks for the GBGR Design System.
Latest version: 0.1.1

# @gbgr/react

This package contains React components and hooks for the GBGR Design System.

## Development Guidelines

### Do not import Token JSON directly

Components and hooks in this package should not directly import `tokens.json` or any derived JSON token files. Instead, consume design tokens through CSS variables (e.g., `var(--gbgr-color-primary)`) to maintain consistency and leverage the theming capabilities provided by the `@gbgr/tokens` package.

## Usage

### Button

Make sure token CSS is loaded (e.g. via `@gbgr/css`), then:

```tsx
import { Button } from "@gbgr/react";
import "@gbgr/react/button.css";

export function Example() {
	return <Button tone="primary">Save</Button>;
}
```
npm package: @gbgr/react-headless
Description: React headless primitives package.
Latest version: 0.1.1

## @gbgr/react-headless

React headless primitives package.

### Button

```tsx
import { useButton } from "@gbgr/react-headless";

export function Example() {
	const { buttonProps } = useButton({
		type: "button",
		onPress: () => console.log("pressed"),
	});

	return (
		<button {...buttonProps}>
			Save
		</button>
	);
}
```

### Button interaction state machine

```tsx
import { useButton } from "@gbgr/react-headless";

export function Example() {
	const { buttonProps, state } = useButton({
		disabled: false,
		loading: false,
	});

	return (
		<button {...buttonProps}>
			State: {state}
		</button>
	);
}
```
npm package: @gbgr/tokens
Description: GBGR Design System의 디자인 토큰을 제공하는 패키지입니다. JSON, CSS 변수, TypeScript 타입 형식으로 사용할 수 있습니다.
Latest version: 0.0.2

# @gbgr/tokens

GBGR Design System의 디자인 토큰을 제공하는 패키지입니다. JSON, CSS 변수, TypeScript 타입 형식으로 사용할 수 있습니다.

## 설치

```bash
pnpm add @gbgr/tokens
# 또는
npm install @gbgr/tokens
# 또는
yarn add @gbgr/tokens
```

## 사용법

### CSS 변수

생성된 `theme.css`를 import하여 디자인 토큰을 CSS 변수로 사용할 수 있습니다:

```javascript
// 애플리케이션의 진입점 파일 또는 전역 CSS 파일에서
import '@gbgr/tokens/theme.css';
```

그리고 CSS에서 다음과 같이 사용할 수 있습니다:

```css
.my-component {
  color: var(--color-semantic-brand-primary);
  margin-top: var(--spacing-4);
}
```

### JSON

원시 디자인 토큰은 JSON 파일로 제공됩니다:

```javascript
import tokens from '@gbgr/tokens/tokens.json';
// tokens는 모든 디자인 토큰을 포함하는 객체입니다
console.log(tokens.color.semantic.brand.primary);
```

### TypeScript 타입

타입 안전성을 위해 TypeScript 선언 파일을 import할 수 있습니다:

```typescript
import type { Tokens } from '@gbgr/tokens';
// Tokens 타입을 사용하여 디자인 토큰 사용에 대한 타입 체크를 수행합니다
const myColor: Tokens['color']['semantic']['brand']['primary']['value'] = '#ffbf00';
```

## 언제 사용하나요?

- **JSON/TypeScript 타입이 필요한 경우**: 런타임에 토큰 값을 사용하거나 타입 체크가 필요할 때
- **CSS 변수만 필요한 경우**: 기존 프로젝트에 토큰만 추가하거나 자체 전역 스타일 체계를 사용하는 경우
- **특정 테마 파일만 필요한 경우**: `theme.css`, `theme.light.css`, `theme.dark.css` 등 특정 파일만 import할 때
- **다른 패키지에서 내부적으로 사용**: 컴포넌트 라이브러리 개발 시 내부적으로 토큰 값을 참조해야 할 때
npm package: @gbgr/ui
Description: GBGR Design System을 앱에서 “한 번에” 쓰기 위한 통합 패키지입니다.
Latest version: 0.0.3

# @gbgr/ui

GBGR Design System을 앱에서 “한 번에” 쓰기 위한 통합 패키지입니다.

## 설치

```bash
pnpm add @gbgr/ui
```

## 사용법

### 1) 전역 스타일(Tokens + 컴포넌트 스타일) 한 번에 로드

앱 진입점에서 아래 한 줄만 import 하세요:

```ts
import "@gbgr/ui/styles.css";
```

### 2) 컴포넌트/아이콘 사용

```tsx
import { Button } from "@gbgr/ui";
import { HomeIcon } from "@gbgr/ui";

export function Example() {
	return (
		<>
			<Button tone="primary">Save</Button>
			<HomeIcon width={24} height={24} />
		</>
	);
}
```

### 3) (선택) 컴포넌트별 CSS만 import

`@gbgr/ui/styles.css` 대신 필요한 CSS만 가져오고 싶으면 아래처럼 import 할 수 있습니다.
이 경우 토큰이 필요하면 `@gbgr/css`도 함께 import 하세요.

```ts
import "@gbgr/css";
import "@gbgr/ui/button.css";
```