open-index/open-npm huggingface dataset:
npm package: @sky_lv/utils-web
Description: A powerful class library
Author: lvkuo
Latest version: 1.0.2

# lk-utils web 工具库

## form 表达校验类

## 数组类

## url 参数类

## 本地缓存类

## 环境类

## 时间转换类


## 文件处理类（size）

## 转码加密解密类


>  ...
npm package: @skyadmin/api-contracts
Description: API contracts and types
Author: lihuanyu
Latest version: 1.0.3

# @apis-lihuanyu/contracts

API contracts and TypeScript types for lihuanyu.com APIs, built with ts-rest and Zod.

## Installation

```bash
npm install @apis-lihuanyu/contracts
# or
pnpm add @apis-lihuanyu/contracts
# or
yarn add @apis-lihuanyu/contracts
```

## Usage

### Frontend Usage (React/Vue/Angular)

```typescript
import { promptOptimizationContract, type GetPromptOptimizationHistoryQuery } from '@apis-lihuanyu/contracts';
import { initClient } from '@ts-rest/core';

// Create type-safe client
const client = initClient(promptOptimizationContract, {
  baseUrl: 'https://apis.lihuanyu.com',
  baseHeaders: {
    'Authorization': 'Bearer your-token'
  }
});

// Type-safe API calls
const response = await client.getPromptOptimizationHistory({
  query: {
    page: 1,
    limit: 20,
    modelCode: 'gpt-4'
  }
});

// response is fully typed!
if (response.status === 200) {
  console.log(response.body.items); // TypeScript knows the exact structure
}
```

### Backend Usage (NestJS)

```typescript
import { promptOptimizationContract } from '@apis-lihuanyu/contracts';
import { TsRestHandler, tsRestHandler } from '@ts-rest/nest';

@Controller()
export class MyController {
  @TsRestHandler(promptOptimizationContract.getPromptOptimizationHistory)
  async getHistory() {
    return tsRestHandler(
      promptOptimizationContract.getPromptOptimizationHistory,
      async ({ query }) => {
        // query is fully typed based on the contract
        return {
          status: 200,
          body: {
            items: [],
            meta: { /* ... */ }
          }
        };
      }
    );
  }
}
```

## Available Contracts

### Prompt Optimization

- `promptOptimizationContract.getPromptOptimizationHistory` - Get paginated optimization history
- `promptOptimizationContract.getPromptOptimizationStatistics` - Get statistics by period (day/week/month)

### Types

All request/response types are exported:

```typescript
import type {
  GetPromptOptimizationHistoryQuery,
  PromptOptimizationHistoryItem,
  PaginatedPromptOptimizationHistory,
  GetPromptOptimizationStatisticsQuery,
  OptimizationStatistics,
  OptimizationStatisticsItem
} from '@apis-lihuanyu/contracts';
```

## Features

- 🔒 **Type Safety**: Full TypeScript support with compile-time validation
- 📝 **Runtime Validation**: Zod schemas for request/response validation
- 🚀 **Framework Agnostic**: Works with any TypeScript frontend/backend
- 📚 **Auto-completion**: Full IntelliSense support
- 🔄 **Consistent API**: Shared contracts between frontend and backend

## Development

```bash
# Install dependencies
pnpm install

# Build
pnpm run build

# Watch mode
pnpm run dev

# Clean
pnpm run clean
```

## License

MIT
npm package: @skyalert/eslint-config
Description: Best practices and way of code in Organization. Based on package config `eslint-config-airbnb-base` and plugin `eslint-plugin-react`.
Author: Mario Ferreira
Latest version: 1.0.2

## ESLINT package for SkyAlert projects

Best practices and way of code in Organization. Based on package config `eslint-config-airbnb-base` and plugin `eslint-plugin-react`.

To use it is needed `eslint` as `devDependency`:
```
$ npm install -D eslint
```
Then this package is ready yo be installed:
```
$ npm install -D @skyalert/eslint-config
```
To get all ready, is needed a file `.eslintrc` in the project's root:
```
{
  "extends": "@skyalert"
}
```

If there's more than a package in the project (e.g. using `lerna`), copy the same `.eslintrc` in every package root
npm package: @skyanalytics/js
Description: SkyAnalytics JS is an adapter for [SkyAnalytics]
Author: Carlos Eduardo Umaña Acevedo
Latest version: 1.1.1

# SkyAnalytics JS
SkyAnalytics JS is an adapter for [SkyAnalytics](https://github.com/carum98/skyanalytics) that allows you to track your website's traffic and user behavior.

[![npm version](https://badge.fury.io/js/@skyanalytics%2Fjs.svg)](https://badge.fury.io/js/@skyanalytics%2Fjs)

## Installation
```shell
npm install @skyanalytics/js
```

## Usage
```javascript
import skyanalytics from '@skyanalytics/js';

skyanalytics.init({
    key: 'source_key',
    host: 'http://localhost:3000'
});
```

### Tracking page views
```javascript
analytics.navigation({ name: 'page_name' });
```

### Tracking events
```javascript
analytics.event({ name: 'event_name' });
```

### Metadata
You can add metadata to your `view`.
```javascript
analytics.navigation({ name: 'page_name', metadata: { key1: 'value1', key2: 'value2' } });
```

Global metadata can be set using the `metadata` method.
```javascript
analytics.metadata({ key1: 'value1', key2: 'value2' });
```
npm package: @skyanalytics/nuxt
Description: SkyAnalytics NUXT is an adapter for [SkyAnalytics]
Author: Carlos Eduardo Umaña Acevedo
Latest version: 1.0.5

# SkyAnalytics Nuxt
SkyAnalytics Nuxt is an adapter for [SkyAnalytics](https://github.com/carum98/skyanalytics) that allows you to track your website's traffic and user behavior.

[![npm version](https://badge.fury.io/js/@skyanalytics%2Fnuxt.svg)](https://badge.fury.io/js/@skyanalytics%2Fnuxt)

## Installation
```bash
npm install @skyanalytics/nuxt
```

```typescript
// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['@skyanalytics/nuxt'],
  skyanalytics: {
    key: 'source_key',
    host: 'http://localhost:3000',
  },
});
```

### Module options
- `key` - The source key of your SkyAnalytics instance.
- `host` - The host of your SkyAnalytics instance.
- `captureNavigation` - Capture navigation events automatically. Default: `true`.
- `enabled` - Enable or disable tracking. Default: `true`.

## Usage

### Directives
```html
<button v-sk-analytics="{ event: 'click', data: { key: 'value' } }">Click me</button>
```

### Composable
```typescript
const analytics = useAnalytics()

function send() {
  analytics.event('event_name', { key: 'value' })
}
```
npm package: @skyanalytics/vue2
Description: SkyAnalytics Vue-2 is an adapter for [SkyAnalytics]
Author: Carlos Eduardo Umaña Acevedo
Latest version: 1.1.2

# SkyAnalytics Vue-2
SkyAnalytics Vue-2 is an adapter for [SkyAnalytics](https://github.com/carum98/skyanalytics) that allows you to track your website's traffic and user behavior.

[![npm version](https://badge.fury.io/js/@skyanalytics%2Fvue2.svg)](https://badge.fury.io/js/@skyanalytics%2Fvue2)

## Installation
```bash
npm install @skyanalytics/vue2
```

## Usage
```javascript
import Vue from 'vue'
import SkyAnalytics from '@skyanalytics/vue2'

Vue.use(SkyAnalytics, {
    key: 'source_key',
    host: 'http://localhost:3000',
    enabled: true // default is true
})
```

### Directives
```html
<button v-sk-analytics="{ event: 'click', data: { key: 'value' } }">Click me</button>
```

### Methods
```javascript
this.$skyAnalytics.event('event', { key: 'value' })
```

### Composable
```javascript
import { useAnalytics } from '@skyanalytics/vue2'

useAnalytics.event('event', { key: 'value' })
useAnalytics.navigate('page', { key: 'value' })
useAnalytics.metadata({ key: 'value' })
```

## Vue-Router
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import SkyAnalytics, { useAnalytics } from '@skyanalytics/vue2'

Vue.use(VueRouter)
Vue.use(SkyAnalytics, {
    key: 'source_key',
    host: 'http://localhost:3000',
	enabled: true // default is true
})

const router = new VueRouter({
    routes: []
})

router.beforeEach((to, from, next) => {
    Vue.prototype.$skyAnalytics.navigation({ name: to.name })

    // or

    const analytics = useAnalytics()
    analytics.navigate(to.name)

    next()
})
```

> [!WARNING]  
> Use with caution, the methods `$skyAnalytics` make sure that the instance is initialized and the plugin is enabled. Otherwise, it will throw an error.
npm package: @skyanalytics/vue3
Description: SkyAnalytics Vue-3 is an adapter for [SkyAnalytics]
Author: Carlos Eduardo Umaña Acevedo
Latest version: 1.1.2

# SkyAnalytics Vue-3
SkyAnalytics Vue-3 is an adapter for [SkyAnalytics](https://github.com/carum98/skyanalytics) that allows you to track your website's traffic and user behavior.

[![npm version](https://badge.fury.io/js/@skyanalytics%2Fvue3.svg)](https://badge.fury.io/js/@skyanalytics%2Fvue3)

## Installation
```bash
npm install @skyanalytics/vue3
```

## Usage
```javascript
import { createApp } from 'vue'
import analytics from '@skyanalytics/vue3'

const app = createApp({
  // ...
})

app.use(analytics, {
    key: 'source_key',
    host: 'http://localhost:3000',
	enabled: true // default is true
})
```

### Directives
```html
<button v-sk-analytics="{ event: 'click', data: { key: 'value' } }">Click me</button>
```

### Methods
```javascript
this.$skyAnalytics.event('event', { key: 'value' })
```

### Composable
```javascript
import { useAnalytics } from '@skyanalytics/vue3'

useAnalytics.event('event', { key: 'value' })
useAnalytics.navigate('page', { key: 'value' })
useAnalytics.metadata({ key: 'value' })
```

## Vue-Router
```javascript
import { createRouter } from 'vue-router'
import { useAnalytics } from '@skyanalytics/vue3'

const analytics = useAnalytics()

const router = createRouter({
  // ...
})

router.beforeEach((to, from, next) => {
  analytics.navigate(to.name)
  next()
})
```

> [!WARNING]  
> Use with caution, the methods `$skyAnalytics` make sure that the instance is initialized and the plugin is enabled. Otherwise, it will throw an error.
npm package: @skyastrall/mentions-core
Description: Framework-agnostic engine for trigger detection, markup parsing, and mention state management. Zero dependencies.
Author: SkyAstrall
Latest version: 0.4.0

# @skyastrall/mentions-core

Framework-agnostic engine for trigger detection, markup parsing, and mention state management. Zero dependencies. Runs in Node.js, browser, or any JS runtime.

[![npm version](https://img.shields.io/npm/v/@skyastrall/mentions-core)](https://www.npmjs.com/package/@skyastrall/mentions-core)
[![bundle size](https://img.shields.io/bundlejs/size/@skyastrall/mentions-core)](https://bundlejs.com/?q=%40skyastrall%2Fmentions-core)

**[Docs](https://mentions.skyastrall.com/docs)** · **[Playground](https://mentions.skyastrall.com/playground)** · **[GitHub](https://github.com/SkyAstrall/mentions)**

> Most users should install a framework adapter instead:
> [`@skyastrall/mentions-react`](https://www.npmjs.com/package/@skyastrall/mentions-react) or
> [`@skyastrall/mentions-vue`](https://www.npmjs.com/package/@skyastrall/mentions-vue).
> This package is for building custom adapters or server-side usage.

## Install

```bash
npm install @skyastrall/mentions-core
```

## What's Inside

- **MentionController** — subscribe/getState pattern for framework-agnostic state management
- **State machine** — pure reducer for mention lifecycle (idle → suggesting → navigating → loading)
- **Markup parser** — `parseMarkup()`, `extractMentions()`, `markupToPlainText()`
- **Trigger detection** — O(n) backward scan, no regex backtracking
- **ARIA props** — `connect()` generates combobox/listbox attributes
- **DOM utilities** — `buildMentionHTML()`, `performMentionInsertion()`, `getCaretRect()`, `restoreCursor()`
- **CSS variables** — `--mention-bg`, `--mention-color`, `--mention-radius` for theming
- ~9KB gzipped, zero dependencies

## Server-Side Usage

```typescript
import { extractMentions, markupToPlainText } from "@skyastrall/mentions-core";

const markup = "@[Alice](1) said #[urgent](t1)";
const triggers = [{ char: "@", data: [] }, { char: "#", data: [] }];

const mentions = extractMentions(markup, triggers);
const plain = markupToPlainText(markup, triggers);
```

## License

[MIT](https://github.com/SkyAstrall/mentions/blob/main/LICENSE) — Built by [SkyAstrall](https://skyastrall.com)
npm package: @skyastrall/mentions-react
Description: Headless React component for @mentions, slash commands, and custom triggers. Compound components + hooks. TypeScript-first.
Author: SkyAstrall
Latest version: 0.4.0

# @skyastrall/mentions-react

Multi-trigger inline suggestions for React. Drop-in component, compound components, or headless hook.

[![npm version](https://img.shields.io/npm/v/@skyastrall/mentions-react)](https://www.npmjs.com/package/@skyastrall/mentions-react)
[![bundle size](https://img.shields.io/bundlejs/size/@skyastrall/mentions-react)](https://bundlejs.com/?q=%40skyastrall%2Fmentions-react)

**[Docs](https://mentions.skyastrall.com/docs)** · **[Playground](https://mentions.skyastrall.com/playground)** · **[GitHub](https://github.com/SkyAstrall/mentions)**

## Install

```bash
npm install @skyastrall/mentions-react
```

Requires `react` >= 18.

## Quick Start

```tsx
import { Mentions } from "@skyastrall/mentions-react";

<Mentions
  triggers={[
    { char: "@", data: users, color: "rgba(99,102,241,0.25)" },
    { char: "#", data: tags, color: "rgba(16,185,129,0.25)" },
    { char: "/", data: commands, color: "rgba(245,158,11,0.25)" },
  ]}
  onChange={(markup, plainText) => console.log(markup)}
/>
```

## Features

- Multi-trigger (@mentions, #tags, /commands)
- Per-trigger highlight colors
- Ghost text / AI completions
- Async data with loading states
- Single-line mode
- Full ARIA keyboard navigation
- Controlled and uncontrolled modes
- ~5KB gzipped (~9KB core)

## API Layers

1. **`<Mentions>`** — drop-in, works out of the box
2. **Compound components** — `Mentions.Editor`, `Mentions.Portal`, `Mentions.List`, `Mentions.Item`
3. **`useMentions()`** — headless hook, full control

See the [full documentation](https://mentions.skyastrall.com/docs) for API reference and guides.

## License

[MIT](https://github.com/SkyAstrall/mentions/blob/main/LICENSE) — Built by [SkyAstrall](https://skyastrall.com)
npm package: @skyastrall/mentions-svelte
Description: Svelte 5 components and composable for @mentions, #tags, /commands. Powered by @skyastrall/mentions-core.
Author: SkyAstrall
Latest version: 0.4.0

# @skyastrall/mentions-svelte

Multi-trigger inline suggestions for Svelte 5. Drop-in component, compound components, or composable with runes.

[![npm version](https://img.shields.io/npm/v/@skyastrall/mentions-svelte)](https://www.npmjs.com/package/@skyastrall/mentions-svelte)
[![bundle size](https://img.shields.io/bundlejs/size/@skyastrall/mentions-svelte)](https://bundlejs.com/?q=%40skyastrall%2Fmentions-svelte)

**[Docs](https://mentions.skyastrall.com/docs)** · **[Playground](https://mentions.skyastrall.com/playground?fw=svelte)** · **[GitHub](https://github.com/SkyAstrall/mentions)**

## Install

```bash
npm install @skyastrall/mentions-svelte
```

Requires `svelte` >= 5.0.

## Quick Start

```svelte
<script>
import { Mentions } from "@skyastrall/mentions-svelte";

const users = [
  { id: "1", label: "Alice Johnson" },
  { id: "2", label: "Bob Smith" },
  { id: "3", label: "Charlie Brown" },
];

let markup = $state("");
</script>

<Mentions
  triggers={[
    { char: "@", data: users, color: "rgba(99,102,241,0.25)" },
    { char: "#", data: tags, color: "rgba(16,185,129,0.25)" },
    { char: "/", data: commands, color: "rgba(245,158,11,0.25)" },
  ]}
  onChange={(m, plainText) => { markup = m; }}
/>
```

## Features

- Multi-trigger (@mentions, #tags, /commands)
- Per-trigger highlight colors
- Ghost text / AI completions
- Async data with loading states
- Single-line mode
- Full ARIA keyboard navigation
- Svelte 5 runes ($state, $derived, $effect)
- Snippets for custom item rendering
- ~9KB gzipped (~9KB core)

## API Layers

1. **`<Mentions>`** — drop-in, works out of the box
2. **Compound components** — `MentionsEditor`, `MentionsPortal`, `MentionsList`, `MentionsItem`
3. **`useMentions()`** — composable with runes, full control

See the [full documentation](https://mentions.skyastrall.com/docs) for API reference and guides.

## License

[MIT](https://github.com/SkyAstrall/mentions/blob/main/LICENSE) — Built by [SkyAstrall](https://skyastrall.com)
npm package: @skyastrall/mentions-vue
Description: Vue 3 composable and compound components for @mentions, #tags, /commands. Powered by @skyastrall/mentions-core.
Author: SkyAstrall
Latest version: 0.4.0

# @skyastrall/mentions-vue

Multi-trigger inline suggestions for Vue 3. Drop-in component, compound components, or composable.

[![npm version](https://img.shields.io/npm/v/@skyastrall/mentions-vue)](https://www.npmjs.com/package/@skyastrall/mentions-vue)
[![bundle size](https://img.shields.io/bundlejs/size/@skyastrall/mentions-vue)](https://bundlejs.com/?q=%40skyastrall%2Fmentions-vue)

**[Docs](https://mentions.skyastrall.com/docs)** · **[Playground](https://mentions.skyastrall.com/playground?fw=vue)** · **[GitHub](https://github.com/SkyAstrall/mentions)**

## Install

```bash
npm install @skyastrall/mentions-vue
```

Requires `vue` >= 3.4.

## Quick Start

```vue
<script setup>
import { ref } from "vue";
import { Mentions } from "@skyastrall/mentions-vue";

const markup = ref("");
</script>

<template>
  <Mentions
    :triggers="[
      { char: '@', data: users, color: 'rgba(99,102,241,0.25)' },
      { char: '#', data: tags, color: 'rgba(16,185,129,0.25)' },
      { char: '/', data: commands, color: 'rgba(245,158,11,0.25)' },
    ]"
    v-model="markup"
  />
</template>
```

## Features

- Multi-trigger (@mentions, #tags, /commands)
- Per-trigger highlight colors
- Ghost text / AI completions
- Async data with loading states
- Single-line mode
- Full ARIA keyboard navigation
- Controlled and uncontrolled modes
- ~5KB gzipped (~9KB core)

## API Layers

1. **`<Mentions>`** — drop-in, works out of the box
2. **Compound components** — `MentionsEditor`, `MentionsPortal`, `MentionsList`, `MentionsItem`
3. **`useMentions()`** — composable, full control

See the [full documentation](https://mentions.skyastrall.com/docs) for API reference and guides.

## License

[MIT](https://github.com/SkyAstrall/mentions/blob/main/LICENSE) — Built by [SkyAstrall](https://skyastrall.com)
npm package: @skybackend/nestjs-swagger-api-exception-decorator
Description: NestJS Swagger decorator for API exceptions
Author: NanoGiants GmbH
Latest version: 1.4.1

# @nanogiants/nestjs-swagger-api-exception-decorator

[![Node.js CI](https://github.com/nanogiants/nestjs-swagger-api-exception-decorator/workflows/Node.js%20CI/badge.svg?branch=master)](https://github.com/nanogiants/nestjs-swagger-api-exception-decorator/workflows/Node.js%20CI)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=nanogiants_nestjs-swagger-api-exception-decorator&metric=alert_status)](https://sonarcloud.io/dashboard?id=nanogiants_nestjs-swagger-api-exception-decorator)
[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=nanogiants_nestjs-swagger-api-exception-decorator&metric=coverage)](https://sonarcloud.io/dashboard?id=nanogiants_nestjs-swagger-api-exception-decorator)
[![npm](https://img.shields.io/npm/v/@nanogiants/nestjs-swagger-api-exception-decorator)](https://www.npmjs.com/package/@nanogiants/nestjs-swagger-api-exception-decorator)
[![npm downloads](https://img.shields.io/npm/dw/@nanogiants/nestjs-swagger-api-exception-decorator)](https://www.npmjs.com/package/@nanogiants/nestjs-swagger-api-exception-decorator)

> NestJS Swagger decorator for API exceptions

## Installation

```sh
$ npm install @nanogiants/nestjs-swagger-api-exception-decorator
```

## Example usage

```typescript
import { ApiException } from '@nanogiants/nestjs-swagger-api-exception-decorator';

@ApiException(() => UnauthorizedException)
export class Controller {
  @ApiOperation({ summary: 'Changes the users password' })
  @ApiException(() => [PasswordsDidNotMatchException, OldAndNewPasswordMatchException, CredentialsNotValidException])
  @Patch('/password')
  async changeUserPassword(@Res() res: Response): Promise<void> {
    return res.sendStatus(HttpStatus.OK);
  }
}
```

## Documentation

Please visit our [documentation](https://nanogiants.github.io/nestjs-swagger-api-exception-decorator/) for examples and information on how to use this decorator.
npm package: @skybaer0804/pui
Description: Pui is a Preact UI library for building web applications.
Author: Nodejs
Latest version: 1.1.5

# PUI - Preact UI Library

Preact 기반의 UI 컴포넌트 라이브러리입니다.

## 설치

```bash
npm install @skybaer0804/pui
# 또는
yarn add @skybaer0804/pui
# 또는
pnpm add @skybaer0804/pui
```

## 사용 방법

### 전체 라이브러리 import

```tsx
import { Button, Card, ThemeProvider } from '@skybaer0804/pui';
import '@skybaer0804/pui/styles.css';

function App() {
    return (
        <ThemeProvider>
            <Card>
                <Button>클릭하세요</Button>
            </Card>
        </ThemeProvider>
    );
}
```

### 개별 컴포넌트 import (Tree-shaking 지원)

MUI처럼 특정 컴포넌트만 import하여 사용할 수 있습니다:

```tsx
import { Button } from '@skybaer0804/pui/Button';
import { Card } from '@skybaer0804/pui/Card';
import { ThemeProvider } from '@skybaer0804/pui/ThemeProvider';
import '@skybaer0804/pui/styles.css';
```

### 디자인 토큰 오버라이드

`ThemeProvider`의 `tokenOverrides` prop을 사용하여 디자인 토큰을 커스터마이징할 수 있습니다:

```tsx
import { ThemeProvider } from '@skybaer0804/pui';
import type { DesignTokenOverrides } from '@skybaer0804/pui';

const tokenOverrides: DesignTokenOverrides = {
    '--color-interactive-primary': '#ff0000',
    '--primitive-space-4': '20px',
    '--primitive-radius-md': '8px',
};

function App() {
    return <ThemeProvider tokenOverrides={tokenOverrides}>{/* ... */}</ThemeProvider>;
}
```

## 스타일 유의사항

### ⚠️ 필수: 스타일 import

PUI 라이브러리는 **A-plan 구조**를 사용합니다. 모든 컴포넌트 스타일은 JS 번들에 포함되지 않으며, 별도의 CSS 파일로 제공됩니다.

**반드시 프로젝트의 시작점(예: `main.tsx`, `app.tsx`)에서 한 번만 스타일을 import해야 합니다:**

```tsx
// ✅ 올바른 사용법
import '@skybaer0804/pui/styles.css';

// 또는
import '@skybaer0804/pui/styles';
```

### 중요 사항

-   **스타일은 JS 번들에 포함되지 않습니다**: 각 컴포넌트 파일에는 스타일 import가 없습니다.
-   **한 번만 import**: 전체 라이브러리 import든 개별 컴포넌트 import든 상관없이 `styles.css`는 **프로젝트 시작점에서 한 번만** import하면 됩니다.
-   **스타일 없이는 동작하지 않습니다**: `styles.css`를 import하지 않으면 컴포넌트가 제대로 렌더링되지 않습니다.
-   **Tree-shaking과 무관**: 개별 컴포넌트만 사용하더라도 전체 스타일을 import해야 합니다. (모든 스타일이 `pui.scss`에서 통합되어 있기 때문)

### 예시

```tsx
// main.tsx 또는 app.tsx
import '@skybaer0804/pui/styles.css'; // ✅ 여기서 한 번만 import

// 다른 파일들에서는 컴포넌트만 import
import { Button } from '@skybaer0804/pui/Button';
import { Card } from '@skybaer0804/pui/Card';
```

## 주요 기능

-   ✅ Preact 기반의 경량 UI 컴포넌트
-   ✅ Tree-shaking 지원 (개별 컴포넌트 import)
-   ✅ 디자인 토큰 시스템
-   ✅ 다크 모드 지원
-   ✅ 반응형 디자인
-   ✅ TypeScript 지원
-   ✅ 디자인 토큰 오버라이드 지원

## 컴포넌트 목록

-   Layout: Box, Flex, Stack, Container, Grid
-   Button: Button, IconButton, ButtonGroup, FloatingActionButton
-   Form: Input, TextField, Select, Checkbox, Radio, RadioGroup, Switch
-   Navigation: Tabs, BottomNavigation, Breadcrumbs, Stepper, Pagination
-   Feedback: Alert, CircularProgress, Loading, Skeleton
-   Data Display: Typography, Avatar, Badge, StatusChip, Table, List
-   Surface: Paper, Divider, Card
-   Overlay: Dialog, Drawer, Tooltip
-   Disclosure: Accordion, Collapsible
-   Navigation: SpeedDial

## 라이선스

MIT