@exem-ui/react 0.1.0-next.bf3c711
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.en.md +141 -0
- package/README.md +141 -0
- package/dist/Button-CMenVfb7.d.mts +35 -0
- package/dist/Button-CMenVfb7.d.ts +35 -0
- package/dist/Select-DMvWV_rF.d.mts +94 -0
- package/dist/Select-DMvWV_rF.d.ts +94 -0
- package/dist/avatar/index.d.mts +37 -0
- package/dist/avatar/index.d.ts +37 -0
- package/dist/avatar/index.js +13 -0
- package/dist/avatar/index.js.map +1 -0
- package/dist/avatar/index.mjs +4 -0
- package/dist/avatar/index.mjs.map +1 -0
- package/dist/badge/index.d.mts +29 -0
- package/dist/badge/index.d.ts +29 -0
- package/dist/badge/index.js +12 -0
- package/dist/badge/index.js.map +1 -0
- package/dist/badge/index.mjs +3 -0
- package/dist/badge/index.mjs.map +1 -0
- package/dist/breadcrumb/index.d.mts +43 -0
- package/dist/breadcrumb/index.d.ts +43 -0
- package/dist/breadcrumb/index.js +13 -0
- package/dist/breadcrumb/index.js.map +1 -0
- package/dist/breadcrumb/index.mjs +4 -0
- package/dist/breadcrumb/index.mjs.map +1 -0
- package/dist/button/index.d.mts +9 -0
- package/dist/button/index.d.ts +9 -0
- package/dist/button/index.js +29 -0
- package/dist/button/index.js.map +1 -0
- package/dist/button/index.mjs +12 -0
- package/dist/button/index.mjs.map +1 -0
- package/dist/checkbox/index.d.mts +54 -0
- package/dist/checkbox/index.d.ts +54 -0
- package/dist/checkbox/index.js +13 -0
- package/dist/checkbox/index.js.map +1 -0
- package/dist/checkbox/index.mjs +4 -0
- package/dist/checkbox/index.mjs.map +1 -0
- package/dist/chunk-34QIGWCT.mjs +10 -0
- package/dist/chunk-34QIGWCT.mjs.map +1 -0
- package/dist/chunk-3FPMWAQT.js +30 -0
- package/dist/chunk-3FPMWAQT.js.map +1 -0
- package/dist/chunk-3HMT3DQV.js +104 -0
- package/dist/chunk-3HMT3DQV.js.map +1 -0
- package/dist/chunk-4WAO7CUT.mjs +95 -0
- package/dist/chunk-4WAO7CUT.mjs.map +1 -0
- package/dist/chunk-5M47B2XJ.js +4096 -0
- package/dist/chunk-5M47B2XJ.js.map +1 -0
- package/dist/chunk-5QX4TO4F.js +61 -0
- package/dist/chunk-5QX4TO4F.js.map +1 -0
- package/dist/chunk-5TEFN2CW.js +97 -0
- package/dist/chunk-5TEFN2CW.js.map +1 -0
- package/dist/chunk-5TES5PG6.js +41 -0
- package/dist/chunk-5TES5PG6.js.map +1 -0
- package/dist/chunk-5TVMECVF.js +148 -0
- package/dist/chunk-5TVMECVF.js.map +1 -0
- package/dist/chunk-5WGNZX7Z.mjs +27 -0
- package/dist/chunk-5WGNZX7Z.mjs.map +1 -0
- package/dist/chunk-AQ3OIM2T.js +103 -0
- package/dist/chunk-AQ3OIM2T.js.map +1 -0
- package/dist/chunk-AU5NTBK3.js +361 -0
- package/dist/chunk-AU5NTBK3.js.map +1 -0
- package/dist/chunk-DJHGCJR4.mjs +224 -0
- package/dist/chunk-DJHGCJR4.mjs.map +1 -0
- package/dist/chunk-DPUTW5KD.mjs +74 -0
- package/dist/chunk-DPUTW5KD.mjs.map +1 -0
- package/dist/chunk-E53FHDVN.mjs +336 -0
- package/dist/chunk-E53FHDVN.mjs.map +1 -0
- package/dist/chunk-ECRQD7UU.js +82 -0
- package/dist/chunk-ECRQD7UU.js.map +1 -0
- package/dist/chunk-FB4ESGOX.mjs +59 -0
- package/dist/chunk-FB4ESGOX.mjs.map +1 -0
- package/dist/chunk-FDX4IQK5.js +76 -0
- package/dist/chunk-FDX4IQK5.js.map +1 -0
- package/dist/chunk-FOMIUDRM.js +96 -0
- package/dist/chunk-FOMIUDRM.js.map +1 -0
- package/dist/chunk-FR5F3VTU.js +139 -0
- package/dist/chunk-FR5F3VTU.js.map +1 -0
- package/dist/chunk-GW53LH3I.mjs +81 -0
- package/dist/chunk-GW53LH3I.mjs.map +1 -0
- package/dist/chunk-GXMRIT5E.mjs +94 -0
- package/dist/chunk-GXMRIT5E.mjs.map +1 -0
- package/dist/chunk-IANSI7F7.mjs +393 -0
- package/dist/chunk-IANSI7F7.mjs.map +1 -0
- package/dist/chunk-IDM6MZHF.js +415 -0
- package/dist/chunk-IDM6MZHF.js.map +1 -0
- package/dist/chunk-J5ZYQ3TP.js +104 -0
- package/dist/chunk-J5ZYQ3TP.js.map +1 -0
- package/dist/chunk-KPAUBWZA.mjs +39 -0
- package/dist/chunk-KPAUBWZA.mjs.map +1 -0
- package/dist/chunk-L7P2NDST.mjs +124 -0
- package/dist/chunk-L7P2NDST.mjs.map +1 -0
- package/dist/chunk-LZWKMQJL.mjs +3886 -0
- package/dist/chunk-LZWKMQJL.mjs.map +1 -0
- package/dist/chunk-M6OWN7QH.js +118 -0
- package/dist/chunk-M6OWN7QH.js.map +1 -0
- package/dist/chunk-MQVHREEI.js +448 -0
- package/dist/chunk-MQVHREEI.js.map +1 -0
- package/dist/chunk-MT47ECUN.js +127 -0
- package/dist/chunk-MT47ECUN.js.map +1 -0
- package/dist/chunk-N6U54JI4.mjs +126 -0
- package/dist/chunk-N6U54JI4.mjs.map +1 -0
- package/dist/chunk-NDG4LR3Q.js +139 -0
- package/dist/chunk-NDG4LR3Q.js.map +1 -0
- package/dist/chunk-PPD4BU4W.mjs +80 -0
- package/dist/chunk-PPD4BU4W.mjs.map +1 -0
- package/dist/chunk-PU5NO5EZ.js +4 -0
- package/dist/chunk-PU5NO5EZ.js.map +1 -0
- package/dist/chunk-Q442ZDTI.mjs +117 -0
- package/dist/chunk-Q442ZDTI.mjs.map +1 -0
- package/dist/chunk-QH23RO3C.mjs +137 -0
- package/dist/chunk-QH23RO3C.mjs.map +1 -0
- package/dist/chunk-REBHUF4L.js +226 -0
- package/dist/chunk-REBHUF4L.js.map +1 -0
- package/dist/chunk-RGB3QLQT.js +275 -0
- package/dist/chunk-RGB3QLQT.js.map +1 -0
- package/dist/chunk-T7U2QRLC.js +94 -0
- package/dist/chunk-T7U2QRLC.js.map +1 -0
- package/dist/chunk-TEHHJ3CS.mjs +73 -0
- package/dist/chunk-TEHHJ3CS.mjs.map +1 -0
- package/dist/chunk-TJY4MIBC.js +117 -0
- package/dist/chunk-TJY4MIBC.js.map +1 -0
- package/dist/chunk-VCMZQOQM.mjs +102 -0
- package/dist/chunk-VCMZQOQM.mjs.map +1 -0
- package/dist/chunk-VKN4H4WI.mjs +3 -0
- package/dist/chunk-VKN4H4WI.mjs.map +1 -0
- package/dist/chunk-VSB25XTY.js +12 -0
- package/dist/chunk-VSB25XTY.js.map +1 -0
- package/dist/chunk-VWTE74UT.mjs +96 -0
- package/dist/chunk-VWTE74UT.mjs.map +1 -0
- package/dist/chunk-WBTL7PBV.js +105 -0
- package/dist/chunk-WBTL7PBV.js.map +1 -0
- package/dist/chunk-WOK3EP3O.js +83 -0
- package/dist/chunk-WOK3EP3O.js.map +1 -0
- package/dist/chunk-WWT73GGM.mjs +83 -0
- package/dist/chunk-WWT73GGM.mjs.map +1 -0
- package/dist/chunk-XBDXTRK3.mjs +102 -0
- package/dist/chunk-XBDXTRK3.mjs.map +1 -0
- package/dist/chunk-YGBEKZWU.mjs +81 -0
- package/dist/chunk-YGBEKZWU.mjs.map +1 -0
- package/dist/chunk-YVFLRPFV.mjs +72 -0
- package/dist/chunk-YVFLRPFV.mjs.map +1 -0
- package/dist/chunk-ZMVBIQ2Z.mjs +253 -0
- package/dist/chunk-ZMVBIQ2Z.mjs.map +1 -0
- package/dist/chunk-ZWCMSHDP.mjs +425 -0
- package/dist/chunk-ZWCMSHDP.mjs.map +1 -0
- package/dist/flat/index.d.mts +13 -0
- package/dist/flat/index.d.ts +13 -0
- package/dist/flat/index.js +31 -0
- package/dist/flat/index.js.map +1 -0
- package/dist/flat/index.mjs +10 -0
- package/dist/flat/index.mjs.map +1 -0
- package/dist/flat/segment.d.mts +39 -0
- package/dist/flat/segment.d.ts +39 -0
- package/dist/flat/segment.js +13 -0
- package/dist/flat/segment.js.map +1 -0
- package/dist/flat/segment.mjs +4 -0
- package/dist/flat/segment.mjs.map +1 -0
- package/dist/flat/select.d.mts +58 -0
- package/dist/flat/select.d.ts +58 -0
- package/dist/flat/select.js +14 -0
- package/dist/flat/select.js.map +1 -0
- package/dist/flat/select.mjs +5 -0
- package/dist/flat/select.mjs.map +1 -0
- package/dist/flat/tooltip.d.mts +98 -0
- package/dist/flat/tooltip.d.ts +98 -0
- package/dist/flat/tooltip.js +17 -0
- package/dist/flat/tooltip.js.map +1 -0
- package/dist/flat/tooltip.mjs +4 -0
- package/dist/flat/tooltip.mjs.map +1 -0
- package/dist/icon/index.d.mts +1258 -0
- package/dist/icon/index.d.ts +1258 -0
- package/dist/icon/index.js +1672 -0
- package/dist/icon/index.js.map +1 -0
- package/dist/icon/index.mjs +3 -0
- package/dist/icon/index.mjs.map +1 -0
- package/dist/index-CXip5Wb1.d.mts +62 -0
- package/dist/index-Drz3P-6Y.d.ts +62 -0
- package/dist/index.d.mts +37 -0
- package/dist/index.d.ts +37 -0
- package/dist/index.js +150 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +29 -0
- package/dist/index.mjs.map +1 -0
- package/dist/input/index.d.mts +82 -0
- package/dist/input/index.d.ts +82 -0
- package/dist/input/index.js +22 -0
- package/dist/input/index.js.map +1 -0
- package/dist/input/index.mjs +5 -0
- package/dist/input/index.mjs.map +1 -0
- package/dist/loading/index.d.mts +54 -0
- package/dist/loading/index.d.ts +54 -0
- package/dist/loading/index.js +12 -0
- package/dist/loading/index.js.map +1 -0
- package/dist/loading/index.mjs +3 -0
- package/dist/loading/index.mjs.map +1 -0
- package/dist/messageBox/index.d.mts +33 -0
- package/dist/messageBox/index.d.ts +33 -0
- package/dist/messageBox/index.js +13 -0
- package/dist/messageBox/index.js.map +1 -0
- package/dist/messageBox/index.mjs +4 -0
- package/dist/messageBox/index.mjs.map +1 -0
- package/dist/modal/index.d.mts +97 -0
- package/dist/modal/index.d.ts +97 -0
- package/dist/modal/index.js +15 -0
- package/dist/modal/index.js.map +1 -0
- package/dist/modal/index.mjs +6 -0
- package/dist/modal/index.mjs.map +1 -0
- package/dist/picker/index.d.mts +12 -0
- package/dist/picker/index.d.ts +12 -0
- package/dist/picker/index.js +13 -0
- package/dist/picker/index.js.map +1 -0
- package/dist/picker/index.mjs +4 -0
- package/dist/picker/index.mjs.map +1 -0
- package/dist/progress/index.d.mts +36 -0
- package/dist/progress/index.d.ts +36 -0
- package/dist/progress/index.js +12 -0
- package/dist/progress/index.js.map +1 -0
- package/dist/progress/index.mjs +3 -0
- package/dist/progress/index.mjs.map +1 -0
- package/dist/radio/index.d.mts +39 -0
- package/dist/radio/index.d.ts +39 -0
- package/dist/radio/index.js +12 -0
- package/dist/radio/index.js.map +1 -0
- package/dist/radio/index.mjs +3 -0
- package/dist/radio/index.mjs.map +1 -0
- package/dist/scrollArea/index.d.mts +31 -0
- package/dist/scrollArea/index.d.ts +31 -0
- package/dist/scrollArea/index.js +16 -0
- package/dist/scrollArea/index.js.map +1 -0
- package/dist/scrollArea/index.mjs +3 -0
- package/dist/scrollArea/index.mjs.map +1 -0
- package/dist/segment/index.d.mts +46 -0
- package/dist/segment/index.d.ts +46 -0
- package/dist/segment/index.js +12 -0
- package/dist/segment/index.js.map +1 -0
- package/dist/segment/index.mjs +3 -0
- package/dist/segment/index.mjs.map +1 -0
- package/dist/star/index.d.mts +30 -0
- package/dist/star/index.d.ts +30 -0
- package/dist/star/index.js +12 -0
- package/dist/star/index.js.map +1 -0
- package/dist/star/index.mjs +3 -0
- package/dist/star/index.mjs.map +1 -0
- package/dist/switch/index.d.mts +32 -0
- package/dist/switch/index.d.ts +32 -0
- package/dist/switch/index.js +12 -0
- package/dist/switch/index.js.map +1 -0
- package/dist/switch/index.mjs +3 -0
- package/dist/switch/index.mjs.map +1 -0
- package/dist/tabs/index.d.mts +52 -0
- package/dist/tabs/index.d.ts +52 -0
- package/dist/tabs/index.js +12 -0
- package/dist/tabs/index.js.map +1 -0
- package/dist/tabs/index.mjs +3 -0
- package/dist/tabs/index.mjs.map +1 -0
- package/dist/tag/index.d.mts +68 -0
- package/dist/tag/index.d.ts +68 -0
- package/dist/tag/index.js +17 -0
- package/dist/tag/index.js.map +1 -0
- package/dist/tag/index.mjs +4 -0
- package/dist/tag/index.mjs.map +1 -0
- package/dist/toast/index.d.mts +175 -0
- package/dist/toast/index.d.ts +175 -0
- package/dist/toast/index.js +25 -0
- package/dist/toast/index.js.map +1 -0
- package/dist/toast/index.mjs +4 -0
- package/dist/toast/index.mjs.map +1 -0
- package/dist/tooltip/index.d.mts +26 -0
- package/dist/tooltip/index.d.ts +26 -0
- package/dist/tooltip/index.js +12 -0
- package/dist/tooltip/index.js.map +1 -0
- package/dist/tooltip/index.mjs +3 -0
- package/dist/tooltip/index.mjs.map +1 -0
- package/package.json +251 -0
- package/styles.css +20 -0
package/README.en.md
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<h1 align="center">@exem-ui/react</h1>
|
|
3
|
+
<p align="center">Production-ready React UI component library for the EXEM Design System</p>
|
|
4
|
+
</p>
|
|
5
|
+
|
|
6
|
+
<p align="center">
|
|
7
|
+
<a href="https://www.npmjs.com/package/@exem-ui/react"><img src="https://img.shields.io/npm/v/@exem-ui/react?style=flat-square&color=blue" alt="npm version" /></a>
|
|
8
|
+
<a href="https://www.npmjs.com/package/@exem-ui/react"><img src="https://img.shields.io/npm/dm/@exem-ui/react?style=flat-square" alt="npm downloads" /></a>
|
|
9
|
+
<img src="https://img.shields.io/badge/React-19-61DAFB?style=flat-square&logo=react&logoColor=white" alt="React" />
|
|
10
|
+
<img src="https://img.shields.io/badge/TypeScript-5.3-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" />
|
|
11
|
+
<a href="https://github.com/CloudMOA/exem-ui/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-green?style=flat-square" alt="license" /></a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
English | <a href="./README.md">한국어</a>
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Introduction
|
|
21
|
+
|
|
22
|
+
`@exem-ui/react` is a React UI component library built on the EXEM Design System. Designed with a focus on accessibility, customization, and performance.
|
|
23
|
+
|
|
24
|
+
## Key Features
|
|
25
|
+
|
|
26
|
+
- **22 Component Categories** — Enterprise-grade components including Button, Modal, Tabs, Table, Toast
|
|
27
|
+
- **207 Icons** — Auto-generated React icon components from SVG sources
|
|
28
|
+
- **Accessibility First** — WAI-ARIA compliant, built on Radix UI primitives
|
|
29
|
+
- **Compound Component Pattern** — Intuitive composition API like `Modal.Header`, `Tabs.Content`
|
|
30
|
+
- **High-performance Table** — Virtual scrolling powered by TanStack Table + Virtual
|
|
31
|
+
- **Drag & Drop** — Dual support with dnd-kit + Atlassian Pragmatic DnD
|
|
32
|
+
- **Tree-shakeable** — Per-component subpath imports for optimized bundle size
|
|
33
|
+
- **Dual Output** — CJS + ESM with complete TypeScript type definitions
|
|
34
|
+
|
|
35
|
+
## Installation
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
# npm
|
|
39
|
+
npm install @exem-ui/react @exem-ui/core
|
|
40
|
+
|
|
41
|
+
# pnpm
|
|
42
|
+
pnpm add @exem-ui/react @exem-ui/core
|
|
43
|
+
|
|
44
|
+
# yarn
|
|
45
|
+
yarn add @exem-ui/react @exem-ui/core
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Prerequisites
|
|
49
|
+
|
|
50
|
+
- React >= 19.0.0
|
|
51
|
+
- React DOM >= 19.0.0
|
|
52
|
+
|
|
53
|
+
## Usage
|
|
54
|
+
|
|
55
|
+
### Basic Usage
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { Button } from '@exem-ui/react/button';
|
|
59
|
+
import { Modal } from '@exem-ui/react/modal';
|
|
60
|
+
|
|
61
|
+
function App() {
|
|
62
|
+
return (
|
|
63
|
+
<Modal>
|
|
64
|
+
<Modal.Trigger asChild>
|
|
65
|
+
<Button variant="primary">Open Modal</Button>
|
|
66
|
+
</Modal.Trigger>
|
|
67
|
+
<Modal.Content>
|
|
68
|
+
<Modal.Header>Title</Modal.Header>
|
|
69
|
+
<Modal.Body>Content</Modal.Body>
|
|
70
|
+
</Modal.Content>
|
|
71
|
+
</Modal>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Icons
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { Home, Search, Settings } from '@exem-ui/react/icon';
|
|
80
|
+
|
|
81
|
+
function Nav() {
|
|
82
|
+
return (
|
|
83
|
+
<nav>
|
|
84
|
+
<Home size={20} />
|
|
85
|
+
<Search size={20} />
|
|
86
|
+
<Settings size={20} />
|
|
87
|
+
</nav>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Applying Styles
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
// Import global CSS variables
|
|
96
|
+
import '@exem-ui/core/css';
|
|
97
|
+
|
|
98
|
+
// Import component styles
|
|
99
|
+
import '@exem-ui/react/styles';
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Components
|
|
103
|
+
|
|
104
|
+
| Component | Import Path | Description |
|
|
105
|
+
|-----------|-------------|-------------|
|
|
106
|
+
| Avatar | `@exem-ui/react/avatar` | User avatar |
|
|
107
|
+
| Badge | `@exem-ui/react/badge` | Status badge |
|
|
108
|
+
| Breadcrumb | `@exem-ui/react/breadcrumb` | Navigation breadcrumb |
|
|
109
|
+
| Button | `@exem-ui/react/button` | Button (variant, size) |
|
|
110
|
+
| Checkbox | `@exem-ui/react/checkbox` | Checkbox |
|
|
111
|
+
| Flat | `@exem-ui/react/flat` | Flat list |
|
|
112
|
+
| Icon | `@exem-ui/react/icon` | 207 icons |
|
|
113
|
+
| Input | `@exem-ui/react/input` | Text input |
|
|
114
|
+
| Loading | `@exem-ui/react/loading` | Loading indicator |
|
|
115
|
+
| MessageBox | `@exem-ui/react/messageBox` | Message box |
|
|
116
|
+
| Modal | `@exem-ui/react/modal` | Modal dialog |
|
|
117
|
+
| Picker | `@exem-ui/react/picker` | Date/time picker |
|
|
118
|
+
| Progress | `@exem-ui/react/progress` | Progress bar |
|
|
119
|
+
| Radio | `@exem-ui/react/radio` | Radio button |
|
|
120
|
+
| ScrollArea | `@exem-ui/react/scrollArea` | Custom scroll area |
|
|
121
|
+
| Segment | `@exem-ui/react/segment` | Segment control |
|
|
122
|
+
| Star | `@exem-ui/react/star` | Star rating |
|
|
123
|
+
| Switch | `@exem-ui/react/switch` | Toggle switch |
|
|
124
|
+
| Tabs | `@exem-ui/react/tabs` | Tab navigation |
|
|
125
|
+
| Tag | `@exem-ui/react/tag` | Tag/chip |
|
|
126
|
+
| Toast | `@exem-ui/react/toast` | Toast notification |
|
|
127
|
+
| Tooltip | `@exem-ui/react/tooltip` | Tooltip |
|
|
128
|
+
|
|
129
|
+
## Related Packages
|
|
130
|
+
|
|
131
|
+
| Package | Description |
|
|
132
|
+
|---------|-------------|
|
|
133
|
+
| [@exem-ui/core](https://www.npmjs.com/package/@exem-ui/core) | Design tokens, CSS variables, utilities |
|
|
134
|
+
| [@exem-ui/tailwindcss3](https://www.npmjs.com/package/@exem-ui/tailwindcss3) | Tailwind CSS v3 plugin |
|
|
135
|
+
| [@exem-ui/tailwindcss4](https://www.npmjs.com/package/@exem-ui/tailwindcss4) | Tailwind CSS v4 theme |
|
|
136
|
+
|
|
137
|
+
## License
|
|
138
|
+
|
|
139
|
+
Apache License 2.0 - Copyright 2026 Exem Co., Ltd.
|
|
140
|
+
|
|
141
|
+
See [LICENSE](https://github.com/CloudMOA/exem-ui/blob/main/LICENSE) for details.
|
package/README.md
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<h1 align="center">@exem-ui/react</h1>
|
|
3
|
+
<p align="center">프로덕션 환경을 위한 EXEM React UI 컴포넌트 라이브러리</p>
|
|
4
|
+
</p>
|
|
5
|
+
|
|
6
|
+
<p align="center">
|
|
7
|
+
<a href="https://www.npmjs.com/package/@exem-ui/react"><img src="https://img.shields.io/npm/v/@exem-ui/react?style=flat-square&color=blue" alt="npm version" /></a>
|
|
8
|
+
<a href="https://www.npmjs.com/package/@exem-ui/react"><img src="https://img.shields.io/npm/dm/@exem-ui/react?style=flat-square" alt="npm downloads" /></a>
|
|
9
|
+
<img src="https://img.shields.io/badge/React-19-61DAFB?style=flat-square&logo=react&logoColor=white" alt="React" />
|
|
10
|
+
<img src="https://img.shields.io/badge/TypeScript-5.3-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" />
|
|
11
|
+
<a href="https://github.com/CloudMOA/exem-ui/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-green?style=flat-square" alt="license" /></a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<a href="./README.en.md">English</a> | 한국어
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 소개
|
|
21
|
+
|
|
22
|
+
`@exem-ui/react`는 EXEM 디자인 시스템을 기반으로 구축된 React UI 컴포넌트 라이브러리입니다. 접근성, 커스터마이징, 성능에 중점을 두고 설계되었습니다.
|
|
23
|
+
|
|
24
|
+
## 주요 특징
|
|
25
|
+
|
|
26
|
+
- **22개 컴포넌트 카테고리** — Button, Modal, Tabs, Table, Toast 등 엔터프라이즈급 컴포넌트
|
|
27
|
+
- **207개 아이콘** — SVG에서 자동 생성되는 React 아이콘 컴포넌트
|
|
28
|
+
- **접근성 우선** — Radix UI 기반으로 WAI-ARIA 패턴 준수
|
|
29
|
+
- **Compound Component 패턴** — `Modal.Header`, `Tabs.Content` 등 직관적 조합 API
|
|
30
|
+
- **고성능 테이블** — TanStack Table + Virtual 기반 가상 스크롤링 지원
|
|
31
|
+
- **드래그 앤 드롭** — dnd-kit + Atlassian Pragmatic DnD 이중 지원
|
|
32
|
+
- **트리 셰이킹** — 컴포넌트별 서브패스 import로 번들 크기 최적화
|
|
33
|
+
- **듀얼 출력** — CJS + ESM 동시 지원, 완전한 TypeScript 타입 정의
|
|
34
|
+
|
|
35
|
+
## 설치
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
# npm
|
|
39
|
+
npm install @exem-ui/react @exem-ui/core
|
|
40
|
+
|
|
41
|
+
# pnpm
|
|
42
|
+
pnpm add @exem-ui/react @exem-ui/core
|
|
43
|
+
|
|
44
|
+
# yarn
|
|
45
|
+
yarn add @exem-ui/react @exem-ui/core
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### 사전 요구사항
|
|
49
|
+
|
|
50
|
+
- React >= 19.0.0
|
|
51
|
+
- React DOM >= 19.0.0
|
|
52
|
+
|
|
53
|
+
## 사용법
|
|
54
|
+
|
|
55
|
+
### 기본 사용
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { Button } from '@exem-ui/react/button';
|
|
59
|
+
import { Modal } from '@exem-ui/react/modal';
|
|
60
|
+
|
|
61
|
+
function App() {
|
|
62
|
+
return (
|
|
63
|
+
<Modal>
|
|
64
|
+
<Modal.Trigger asChild>
|
|
65
|
+
<Button variant="primary">모달 열기</Button>
|
|
66
|
+
</Modal.Trigger>
|
|
67
|
+
<Modal.Content>
|
|
68
|
+
<Modal.Header>제목</Modal.Header>
|
|
69
|
+
<Modal.Body>내용</Modal.Body>
|
|
70
|
+
</Modal.Content>
|
|
71
|
+
</Modal>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### 아이콘
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { Home, Search, Settings } from '@exem-ui/react/icon';
|
|
80
|
+
|
|
81
|
+
function Nav() {
|
|
82
|
+
return (
|
|
83
|
+
<nav>
|
|
84
|
+
<Home size={20} />
|
|
85
|
+
<Search size={20} />
|
|
86
|
+
<Settings size={20} />
|
|
87
|
+
</nav>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### 스타일 적용
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
// 글로벌 CSS 변수 임포트
|
|
96
|
+
import '@exem-ui/core/css';
|
|
97
|
+
|
|
98
|
+
// 컴포넌트 스타일 임포트
|
|
99
|
+
import '@exem-ui/react/styles';
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## 컴포넌트 목록
|
|
103
|
+
|
|
104
|
+
| 컴포넌트 | Import 경로 | 설명 |
|
|
105
|
+
|----------|-------------|------|
|
|
106
|
+
| Avatar | `@exem-ui/react/avatar` | 사용자 아바타 |
|
|
107
|
+
| Badge | `@exem-ui/react/badge` | 상태 뱃지 |
|
|
108
|
+
| Breadcrumb | `@exem-ui/react/breadcrumb` | 탐색 경로 |
|
|
109
|
+
| Button | `@exem-ui/react/button` | 버튼 (variant, size) |
|
|
110
|
+
| Checkbox | `@exem-ui/react/checkbox` | 체크박스 |
|
|
111
|
+
| Flat | `@exem-ui/react/flat` | 플랫 리스트 |
|
|
112
|
+
| Icon | `@exem-ui/react/icon` | 207개 아이콘 |
|
|
113
|
+
| Input | `@exem-ui/react/input` | 텍스트 입력 |
|
|
114
|
+
| Loading | `@exem-ui/react/loading` | 로딩 인디케이터 |
|
|
115
|
+
| MessageBox | `@exem-ui/react/messageBox` | 메시지 박스 |
|
|
116
|
+
| Modal | `@exem-ui/react/modal` | 모달 다이얼로그 |
|
|
117
|
+
| Picker | `@exem-ui/react/picker` | 날짜/시간 선택 |
|
|
118
|
+
| Progress | `@exem-ui/react/progress` | 진행률 표시 |
|
|
119
|
+
| Radio | `@exem-ui/react/radio` | 라디오 버튼 |
|
|
120
|
+
| ScrollArea | `@exem-ui/react/scrollArea` | 커스텀 스크롤 영역 |
|
|
121
|
+
| Segment | `@exem-ui/react/segment` | 세그먼트 컨트롤 |
|
|
122
|
+
| Star | `@exem-ui/react/star` | 별점 |
|
|
123
|
+
| Switch | `@exem-ui/react/switch` | 토글 스위치 |
|
|
124
|
+
| Tabs | `@exem-ui/react/tabs` | 탭 네비게이션 |
|
|
125
|
+
| Tag | `@exem-ui/react/tag` | 태그/칩 |
|
|
126
|
+
| Toast | `@exem-ui/react/toast` | 토스트 알림 |
|
|
127
|
+
| Tooltip | `@exem-ui/react/tooltip` | 툴팁 |
|
|
128
|
+
|
|
129
|
+
## 관련 패키지
|
|
130
|
+
|
|
131
|
+
| 패키지 | 설명 |
|
|
132
|
+
|--------|------|
|
|
133
|
+
| [@exem-ui/core](https://www.npmjs.com/package/@exem-ui/core) | 디자인 토큰, CSS 변수, 유틸리티 |
|
|
134
|
+
| [@exem-ui/tailwindcss3](https://www.npmjs.com/package/@exem-ui/tailwindcss3) | Tailwind CSS v3 플러그인 |
|
|
135
|
+
| [@exem-ui/tailwindcss4](https://www.npmjs.com/package/@exem-ui/tailwindcss4) | Tailwind CSS v4 테마 |
|
|
136
|
+
|
|
137
|
+
## 라이선스
|
|
138
|
+
|
|
139
|
+
Apache License 2.0 - Copyright 2026 Exem Co., Ltd.
|
|
140
|
+
|
|
141
|
+
자세한 내용은 [LICENSE](https://github.com/CloudMOA/exem-ui/blob/main/LICENSE)를 참조하세요.
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import { VariantProps } from '@exem-ui/core/utils';
|
|
3
|
+
import React__default from 'react';
|
|
4
|
+
|
|
5
|
+
type ButtonColorVariantCombination = {
|
|
6
|
+
color?: 'primary';
|
|
7
|
+
variant?: 'contained' | 'outlined' | 'invisible';
|
|
8
|
+
} | {
|
|
9
|
+
color?: 'accent';
|
|
10
|
+
variant?: 'contained' | 'outlined' | 'invisible';
|
|
11
|
+
} | {
|
|
12
|
+
color?: 'critical';
|
|
13
|
+
variant?: 'contained' | 'outlined' | 'invisible';
|
|
14
|
+
} | {
|
|
15
|
+
color?: 'assistive';
|
|
16
|
+
variant?: 'contained';
|
|
17
|
+
} | {
|
|
18
|
+
color?: 'inverse';
|
|
19
|
+
variant?: 'contained';
|
|
20
|
+
};
|
|
21
|
+
type ButtonProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> & ButtonColorVariantCombination & {
|
|
22
|
+
size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
23
|
+
icon?: React__default.ReactElement<{
|
|
24
|
+
className?: string;
|
|
25
|
+
}>;
|
|
26
|
+
};
|
|
27
|
+
type ButtonComponent = React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
28
|
+
declare const buttonVariants: (props?: ({
|
|
29
|
+
color?: "accent" | "primary" | "critical" | "assistive" | "inverse" | null | undefined;
|
|
30
|
+
size?: "small" | "xsmall" | "medium" | "large" | "xlarge" | null | undefined;
|
|
31
|
+
variant?: "contained" | "outlined" | "invisible" | null | undefined;
|
|
32
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
33
|
+
declare const Button: ButtonComponent;
|
|
34
|
+
|
|
35
|
+
export { Button as B, type ButtonComponent as a, type ButtonProps as b };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import { VariantProps } from '@exem-ui/core/utils';
|
|
3
|
+
import React__default from 'react';
|
|
4
|
+
|
|
5
|
+
type ButtonColorVariantCombination = {
|
|
6
|
+
color?: 'primary';
|
|
7
|
+
variant?: 'contained' | 'outlined' | 'invisible';
|
|
8
|
+
} | {
|
|
9
|
+
color?: 'accent';
|
|
10
|
+
variant?: 'contained' | 'outlined' | 'invisible';
|
|
11
|
+
} | {
|
|
12
|
+
color?: 'critical';
|
|
13
|
+
variant?: 'contained' | 'outlined' | 'invisible';
|
|
14
|
+
} | {
|
|
15
|
+
color?: 'assistive';
|
|
16
|
+
variant?: 'contained';
|
|
17
|
+
} | {
|
|
18
|
+
color?: 'inverse';
|
|
19
|
+
variant?: 'contained';
|
|
20
|
+
};
|
|
21
|
+
type ButtonProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> & ButtonColorVariantCombination & {
|
|
22
|
+
size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
23
|
+
icon?: React__default.ReactElement<{
|
|
24
|
+
className?: string;
|
|
25
|
+
}>;
|
|
26
|
+
};
|
|
27
|
+
type ButtonComponent = React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
28
|
+
declare const buttonVariants: (props?: ({
|
|
29
|
+
color?: "accent" | "primary" | "critical" | "assistive" | "inverse" | null | undefined;
|
|
30
|
+
size?: "small" | "xsmall" | "medium" | "large" | "xlarge" | null | undefined;
|
|
31
|
+
variant?: "contained" | "outlined" | "invisible" | null | undefined;
|
|
32
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
33
|
+
declare const Button: ButtonComponent;
|
|
34
|
+
|
|
35
|
+
export { Button as B, type ButtonComponent as a, type ButtonProps as b };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
|
|
4
|
+
type Size = 'xsmall' | 'small' | 'medium' | 'large';
|
|
5
|
+
type Variant = 'fill' | 'line';
|
|
6
|
+
type Icon = React.ReactElement<{
|
|
7
|
+
className?: string;
|
|
8
|
+
}>;
|
|
9
|
+
|
|
10
|
+
/** Select 라벨 Props */
|
|
11
|
+
type SelectLabelProps = {
|
|
12
|
+
children: React$1.ReactNode;
|
|
13
|
+
required?: boolean;
|
|
14
|
+
size?: Size;
|
|
15
|
+
className?: string;
|
|
16
|
+
};
|
|
17
|
+
/** Select 트리거 Props */
|
|
18
|
+
type SelectTriggerProps = {
|
|
19
|
+
children?: React$1.ReactNode;
|
|
20
|
+
/** 트리거 왼쪽에 표시할 아이콘 */
|
|
21
|
+
leftIcon?: Icon;
|
|
22
|
+
className?: string;
|
|
23
|
+
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'>;
|
|
24
|
+
/** Select Box (Trigger + Value 조합) Props */
|
|
25
|
+
type SelectBoxProps = {
|
|
26
|
+
placeholder?: string;
|
|
27
|
+
/** 트리거 왼쪽에 표시할 아이콘 */
|
|
28
|
+
leftIcon?: Icon;
|
|
29
|
+
className?: string;
|
|
30
|
+
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'>;
|
|
31
|
+
/** Select 아이템 Props */
|
|
32
|
+
type SelectItemProps = {
|
|
33
|
+
children?: React$1.ReactNode;
|
|
34
|
+
/** 아이템 왼쪽에 표시할 아이콘 */
|
|
35
|
+
leftIcon?: Icon;
|
|
36
|
+
/** 아이템 오른쪽에 표시할 아이콘 */
|
|
37
|
+
rightIcon?: Icon;
|
|
38
|
+
/** 왼쪽 아이콘 크기 */
|
|
39
|
+
leftIconSize?: Size;
|
|
40
|
+
/** 오른쪽 아이콘 크기 */
|
|
41
|
+
rightIconSize?: Size;
|
|
42
|
+
size?: Size;
|
|
43
|
+
className?: string;
|
|
44
|
+
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'children'>;
|
|
45
|
+
type SelectEmptyProps = {
|
|
46
|
+
children?: React$1.ReactNode;
|
|
47
|
+
className?: string;
|
|
48
|
+
};
|
|
49
|
+
type SelectDescriptionProps = {
|
|
50
|
+
children?: React$1.ReactNode;
|
|
51
|
+
size?: Size;
|
|
52
|
+
className?: string;
|
|
53
|
+
};
|
|
54
|
+
type SelectGroupProps = {
|
|
55
|
+
children: React$1.ReactNode;
|
|
56
|
+
size?: Size;
|
|
57
|
+
/** 셀렉트 그룹 스타일 변형 */
|
|
58
|
+
variant?: Variant;
|
|
59
|
+
/** 불투명 배경 (elevation-0) 사용 여부. 반투명 배경이 비쳐보이는 것을 방지합니다. */
|
|
60
|
+
hasBackground?: boolean;
|
|
61
|
+
className?: string;
|
|
62
|
+
};
|
|
63
|
+
/** Select 루트 Props */
|
|
64
|
+
type SelectRootProps = {
|
|
65
|
+
children?: React$1.ReactNode;
|
|
66
|
+
/** 셀렉트 크기 */
|
|
67
|
+
size?: Size;
|
|
68
|
+
/** 셀렉트 스타일 변형 */
|
|
69
|
+
variant?: Variant;
|
|
70
|
+
/** 에러 상태 */
|
|
71
|
+
error?: boolean;
|
|
72
|
+
/** 포커스 상태 (line variant에서만 적용) */
|
|
73
|
+
focus?: boolean;
|
|
74
|
+
/** 활성화 상태 (필터 적용 등 내부 상태가 활성화됨을 표시) */
|
|
75
|
+
active?: boolean;
|
|
76
|
+
/** 비활성화 상태 */
|
|
77
|
+
disabled?: boolean;
|
|
78
|
+
className?: string;
|
|
79
|
+
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, 'disabled' | 'children'>;
|
|
80
|
+
type SelectListProps = Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'position'>;
|
|
81
|
+
type SelectComponent = React$1.ForwardRefExoticComponent<SelectRootProps & React$1.RefAttributes<HTMLDivElement>> & {
|
|
82
|
+
Label: React$1.ForwardRefExoticComponent<SelectLabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
83
|
+
Trigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Trigger>>>;
|
|
84
|
+
Box: React$1.ForwardRefExoticComponent<SelectBoxProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Trigger>>>;
|
|
85
|
+
Value: React$1.ForwardRefExoticComponent<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Value>>>;
|
|
86
|
+
List: React$1.ForwardRefExoticComponent<SelectListProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Content>>>;
|
|
87
|
+
Item: React$1.ForwardRefExoticComponent<SelectItemProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Item>>>;
|
|
88
|
+
Empty: React$1.ForwardRefExoticComponent<SelectEmptyProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
89
|
+
Description: React$1.ForwardRefExoticComponent<SelectDescriptionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
90
|
+
Group: React$1.ForwardRefExoticComponent<SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
91
|
+
};
|
|
92
|
+
declare const Select: SelectComponent;
|
|
93
|
+
|
|
94
|
+
export { type Icon as I, Select as S, type Variant as V, type SelectBoxProps as a, type SelectComponent as b, type SelectDescriptionProps as c, type SelectEmptyProps as d, type SelectGroupProps as e, type SelectItemProps as f, type SelectLabelProps as g, type SelectListProps as h, type SelectRootProps as i, type SelectTriggerProps as j, type Size as k };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
|
|
4
|
+
type Size = 'xsmall' | 'small' | 'medium' | 'large';
|
|
5
|
+
type Variant = 'fill' | 'line';
|
|
6
|
+
type Icon = React.ReactElement<{
|
|
7
|
+
className?: string;
|
|
8
|
+
}>;
|
|
9
|
+
|
|
10
|
+
/** Select 라벨 Props */
|
|
11
|
+
type SelectLabelProps = {
|
|
12
|
+
children: React$1.ReactNode;
|
|
13
|
+
required?: boolean;
|
|
14
|
+
size?: Size;
|
|
15
|
+
className?: string;
|
|
16
|
+
};
|
|
17
|
+
/** Select 트리거 Props */
|
|
18
|
+
type SelectTriggerProps = {
|
|
19
|
+
children?: React$1.ReactNode;
|
|
20
|
+
/** 트리거 왼쪽에 표시할 아이콘 */
|
|
21
|
+
leftIcon?: Icon;
|
|
22
|
+
className?: string;
|
|
23
|
+
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'>;
|
|
24
|
+
/** Select Box (Trigger + Value 조합) Props */
|
|
25
|
+
type SelectBoxProps = {
|
|
26
|
+
placeholder?: string;
|
|
27
|
+
/** 트리거 왼쪽에 표시할 아이콘 */
|
|
28
|
+
leftIcon?: Icon;
|
|
29
|
+
className?: string;
|
|
30
|
+
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'>;
|
|
31
|
+
/** Select 아이템 Props */
|
|
32
|
+
type SelectItemProps = {
|
|
33
|
+
children?: React$1.ReactNode;
|
|
34
|
+
/** 아이템 왼쪽에 표시할 아이콘 */
|
|
35
|
+
leftIcon?: Icon;
|
|
36
|
+
/** 아이템 오른쪽에 표시할 아이콘 */
|
|
37
|
+
rightIcon?: Icon;
|
|
38
|
+
/** 왼쪽 아이콘 크기 */
|
|
39
|
+
leftIconSize?: Size;
|
|
40
|
+
/** 오른쪽 아이콘 크기 */
|
|
41
|
+
rightIconSize?: Size;
|
|
42
|
+
size?: Size;
|
|
43
|
+
className?: string;
|
|
44
|
+
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'children'>;
|
|
45
|
+
type SelectEmptyProps = {
|
|
46
|
+
children?: React$1.ReactNode;
|
|
47
|
+
className?: string;
|
|
48
|
+
};
|
|
49
|
+
type SelectDescriptionProps = {
|
|
50
|
+
children?: React$1.ReactNode;
|
|
51
|
+
size?: Size;
|
|
52
|
+
className?: string;
|
|
53
|
+
};
|
|
54
|
+
type SelectGroupProps = {
|
|
55
|
+
children: React$1.ReactNode;
|
|
56
|
+
size?: Size;
|
|
57
|
+
/** 셀렉트 그룹 스타일 변형 */
|
|
58
|
+
variant?: Variant;
|
|
59
|
+
/** 불투명 배경 (elevation-0) 사용 여부. 반투명 배경이 비쳐보이는 것을 방지합니다. */
|
|
60
|
+
hasBackground?: boolean;
|
|
61
|
+
className?: string;
|
|
62
|
+
};
|
|
63
|
+
/** Select 루트 Props */
|
|
64
|
+
type SelectRootProps = {
|
|
65
|
+
children?: React$1.ReactNode;
|
|
66
|
+
/** 셀렉트 크기 */
|
|
67
|
+
size?: Size;
|
|
68
|
+
/** 셀렉트 스타일 변형 */
|
|
69
|
+
variant?: Variant;
|
|
70
|
+
/** 에러 상태 */
|
|
71
|
+
error?: boolean;
|
|
72
|
+
/** 포커스 상태 (line variant에서만 적용) */
|
|
73
|
+
focus?: boolean;
|
|
74
|
+
/** 활성화 상태 (필터 적용 등 내부 상태가 활성화됨을 표시) */
|
|
75
|
+
active?: boolean;
|
|
76
|
+
/** 비활성화 상태 */
|
|
77
|
+
disabled?: boolean;
|
|
78
|
+
className?: string;
|
|
79
|
+
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, 'disabled' | 'children'>;
|
|
80
|
+
type SelectListProps = Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'position'>;
|
|
81
|
+
type SelectComponent = React$1.ForwardRefExoticComponent<SelectRootProps & React$1.RefAttributes<HTMLDivElement>> & {
|
|
82
|
+
Label: React$1.ForwardRefExoticComponent<SelectLabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
83
|
+
Trigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Trigger>>>;
|
|
84
|
+
Box: React$1.ForwardRefExoticComponent<SelectBoxProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Trigger>>>;
|
|
85
|
+
Value: React$1.ForwardRefExoticComponent<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Value>>>;
|
|
86
|
+
List: React$1.ForwardRefExoticComponent<SelectListProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Content>>>;
|
|
87
|
+
Item: React$1.ForwardRefExoticComponent<SelectItemProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Item>>>;
|
|
88
|
+
Empty: React$1.ForwardRefExoticComponent<SelectEmptyProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
89
|
+
Description: React$1.ForwardRefExoticComponent<SelectDescriptionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
90
|
+
Group: React$1.ForwardRefExoticComponent<SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
91
|
+
};
|
|
92
|
+
declare const Select: SelectComponent;
|
|
93
|
+
|
|
94
|
+
export { type Icon as I, Select as S, type Variant as V, type SelectBoxProps as a, type SelectComponent as b, type SelectDescriptionProps as c, type SelectEmptyProps as d, type SelectGroupProps as e, type SelectItemProps as f, type SelectLabelProps as g, type SelectListProps as h, type SelectRootProps as i, type SelectTriggerProps as j, type Size as k };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import { VariantProps } from '@exem-ui/core/utils';
|
|
3
|
+
import React__default from 'react';
|
|
4
|
+
|
|
5
|
+
interface AvatarProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
|
|
6
|
+
/** 사용자 이름. 이미지가 없을 때 이니셜 폴백에 사용됩니다. */
|
|
7
|
+
name?: string;
|
|
8
|
+
/** 아바타 이미지 URL */
|
|
9
|
+
src?: string;
|
|
10
|
+
/** 이미지 대체 텍스트 */
|
|
11
|
+
alt?: string;
|
|
12
|
+
}
|
|
13
|
+
type AvatarComponent = React__default.ForwardRefExoticComponent<AvatarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
declare const avatarVariants: (props?: ({
|
|
15
|
+
size?: "small" | "xsmall" | "medium" | "large" | null | undefined;
|
|
16
|
+
type?: "image" | "initial" | null | undefined;
|
|
17
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
18
|
+
/**
|
|
19
|
+
* 사용자 아바타를 표시하는 컴포넌트입니다. 이니셜, 이미지, 아이콘 폴백을 지원합니다.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // 이니셜 표시
|
|
24
|
+
* <Avatar name="홍길동" size="large" />
|
|
25
|
+
*
|
|
26
|
+
* // 이미지 표시
|
|
27
|
+
* <Avatar type="image" src="/avatar.png" name="홍길동" />
|
|
28
|
+
*
|
|
29
|
+
* // 이미지 없을 때 아이콘 폴백
|
|
30
|
+
* <Avatar type="image" name="홍길동" />
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @see {@link AvatarProps} props 상세
|
|
34
|
+
*/
|
|
35
|
+
declare const Avatar: AvatarComponent;
|
|
36
|
+
|
|
37
|
+
export { Avatar, type AvatarComponent, type AvatarProps };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import { VariantProps } from '@exem-ui/core/utils';
|
|
3
|
+
import React__default from 'react';
|
|
4
|
+
|
|
5
|
+
interface AvatarProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
|
|
6
|
+
/** 사용자 이름. 이미지가 없을 때 이니셜 폴백에 사용됩니다. */
|
|
7
|
+
name?: string;
|
|
8
|
+
/** 아바타 이미지 URL */
|
|
9
|
+
src?: string;
|
|
10
|
+
/** 이미지 대체 텍스트 */
|
|
11
|
+
alt?: string;
|
|
12
|
+
}
|
|
13
|
+
type AvatarComponent = React__default.ForwardRefExoticComponent<AvatarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
declare const avatarVariants: (props?: ({
|
|
15
|
+
size?: "small" | "xsmall" | "medium" | "large" | null | undefined;
|
|
16
|
+
type?: "image" | "initial" | null | undefined;
|
|
17
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
18
|
+
/**
|
|
19
|
+
* 사용자 아바타를 표시하는 컴포넌트입니다. 이니셜, 이미지, 아이콘 폴백을 지원합니다.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // 이니셜 표시
|
|
24
|
+
* <Avatar name="홍길동" size="large" />
|
|
25
|
+
*
|
|
26
|
+
* // 이미지 표시
|
|
27
|
+
* <Avatar type="image" src="/avatar.png" name="홍길동" />
|
|
28
|
+
*
|
|
29
|
+
* // 이미지 없을 때 아이콘 폴백
|
|
30
|
+
* <Avatar type="image" name="홍길동" />
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @see {@link AvatarProps} props 상세
|
|
34
|
+
*/
|
|
35
|
+
declare const Avatar: AvatarComponent;
|
|
36
|
+
|
|
37
|
+
export { Avatar, type AvatarComponent, type AvatarProps };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkJ5ZYQ3TP_js = require('../chunk-J5ZYQ3TP.js');
|
|
4
|
+
require('../chunk-5M47B2XJ.js');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
Object.defineProperty(exports, "Avatar", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function () { return chunkJ5ZYQ3TP_js.Avatar; }
|
|
11
|
+
});
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}
|