@reopt-ai/opt-ui 1.12.5 → 1.14.0
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/CHANGELOG.md +236 -0
- package/COMPONENT_CATALOG.md +670 -123
- package/README.md +9 -7
- package/dist/core/index.cjs +13 -13
- package/dist/core/index.d.cts +2 -2
- package/dist/core/index.d.ts +2 -2
- package/dist/core/index.js +2 -2
- package/dist/docs/02-components/01-core.md +260 -61
- package/dist/docs/02-components/02-visuals.md +1 -1
- package/dist/docs/02-components/03-shells.md +431 -63
- package/dist/docs/02-components/04-surfaces.md +1 -1
- package/dist/docs/02-components/index.md +4 -4
- package/dist/{field-sidebar-YaWHfLLW.d.ts → field-sidebar-CJ4HxP8D.d.cts} +824 -2
- package/dist/{field-sidebar-Ct8c9L4V.d.cts → field-sidebar-DnhpcT2A.d.ts} +824 -2
- package/dist/{field-sidebar-DwtrYSSt.cjs → field-sidebar-ePqFX6MN.cjs} +4339 -244
- package/dist/{field-sidebar-Ben7MQD4.js → field-sidebar-mSVCMAZp.js} +3976 -235
- package/dist/id-registry.cjs +80 -0
- package/dist/id-registry.js +80 -0
- package/dist/id-registry.json +170 -0
- package/dist/index.cjs +1096 -1476
- package/dist/index.d.cts +243 -92
- package/dist/index.d.ts +243 -92
- package/dist/index.js +1004 -1415
- package/dist/{key-pad-menu-BpQebDyw.cjs → key-pad-menu-BgtSL3xe.cjs} +60 -487
- package/dist/{key-pad-menu-CYYtS_Tl.js → key-pad-menu-CqFI6la9.js} +61 -422
- package/dist/{key-pad-menu-CwcY_Vps.d.cts → key-pad-menu-D6pYzaj-.d.cts} +14 -56
- package/dist/{key-pad-menu-WBJShCJn.d.ts → key-pad-menu-Yh7Fpb8m.d.ts} +14 -56
- package/dist/meta.cjs +1312 -12
- package/dist/meta.js +1312 -12
- package/dist/shells/index.cjs +20 -1
- package/dist/shells/index.d.cts +2 -2
- package/dist/shells/index.d.ts +2 -2
- package/dist/shells/index.js +2 -2
- package/dist/{text-truncate-CQyfUZvq.d.cts → text-truncate-Bbul-jMD.d.cts} +52 -30
- package/dist/{text-truncate-CQyfUZvq.d.ts → text-truncate-Bbul-jMD.d.ts} +52 -30
- package/dist/{text-truncate-Dlm7JwDf.js → text-truncate-Bd-0WkSP.js} +461 -97
- package/dist/{text-truncate-CqdiQuj8.cjs → text-truncate-BeYW6XZu.cjs} +523 -99
- package/dist/theme/server.cjs +2 -2
- package/dist/theme/server.d.cts +2 -2
- package/dist/theme/server.d.ts +2 -2
- package/dist/theme/server.js +2 -2
- package/package.json +6 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: "Core Components"
|
|
3
3
|
description: "74 Core layer components — props, examples, keyboard shortcuts."
|
|
4
|
-
version: "1.
|
|
4
|
+
version: "1.14.0"
|
|
5
5
|
generated: true
|
|
6
6
|
---
|
|
7
7
|
|
|
@@ -95,6 +95,25 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
95
95
|
| `resize` | `"none" \| "vertical" \| "horizontal" \| "both"` | | "vertical" | 크기 조절 방향 |
|
|
96
96
|
| `rows` | `number` | | 4 | 표시 줄 수 |
|
|
97
97
|
|
|
98
|
+
**Examples:**
|
|
99
|
+
|
|
100
|
+
_설명 입력:_
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
import { Textarea } from "@reopt-ai/opt-ui";
|
|
104
|
+
export function Example() {
|
|
105
|
+
return (
|
|
106
|
+
<Textarea
|
|
107
|
+
label="변경 이유"
|
|
108
|
+
name="reason"
|
|
109
|
+
hint="검토자가 알아야 할 내용을 적어주세요"
|
|
110
|
+
rows={4}
|
|
111
|
+
resize="vertical"
|
|
112
|
+
/>
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
98
117
|
### NumberInput
|
|
99
118
|
|
|
100
119
|
> 숫자 입력 컴포넌트. +/- 버튼, nullable/clear, unit suffix, invalid draft alert, min/max, step, 키보드 화살표를 지원합니다.
|
|
@@ -154,6 +173,22 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
154
173
|
| `orientation` | `"horizontal" \| "vertical"` | | "vertical" | 레이아웃 방향 |
|
|
155
174
|
| `label` | `string` | | | 그룹 레이블 |
|
|
156
175
|
|
|
176
|
+
**Examples:**
|
|
177
|
+
|
|
178
|
+
_복수 선택 그룹:_
|
|
179
|
+
|
|
180
|
+
```tsx
|
|
181
|
+
import { Checkbox, CheckboxGroup } from "@reopt-ai/opt-ui";
|
|
182
|
+
export function Example() {
|
|
183
|
+
return (
|
|
184
|
+
<CheckboxGroup label="알림 채널" defaultValue={["email"]}>
|
|
185
|
+
<Checkbox value="email" label="이메일" />
|
|
186
|
+
<Checkbox value="push" label="푸시" />
|
|
187
|
+
</CheckboxGroup>
|
|
188
|
+
);
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
157
192
|
### RadioGroup
|
|
158
193
|
|
|
159
194
|
> 독립적인 라디오 그룹 컴포넌트. 그룹 설명과 항목별 설명을 분리 연결하고 다양한 크기를 지원합니다.
|
|
@@ -206,6 +241,27 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
206
241
|
| `size` | `"sm" \| "md" \| "lg"` | | "md" | 스위치 크기 |
|
|
207
242
|
| `disabled` | `boolean` | | | 비활성화 상태 |
|
|
208
243
|
|
|
244
|
+
**Examples:**
|
|
245
|
+
|
|
246
|
+
_제어되는 알림 설정:_
|
|
247
|
+
|
|
248
|
+
```tsx
|
|
249
|
+
"use client";
|
|
250
|
+
import { useState } from "react";
|
|
251
|
+
import { Switch } from "@reopt-ai/opt-ui";
|
|
252
|
+
export function Example() {
|
|
253
|
+
const [enabled, setEnabled] = useState(false);
|
|
254
|
+
return (
|
|
255
|
+
<Switch
|
|
256
|
+
label="이메일 알림"
|
|
257
|
+
hint="새 댓글을 이메일로 받습니다"
|
|
258
|
+
checked={enabled}
|
|
259
|
+
onChange={setEnabled}
|
|
260
|
+
/>
|
|
261
|
+
);
|
|
262
|
+
}
|
|
263
|
+
```
|
|
264
|
+
|
|
209
265
|
### Select
|
|
210
266
|
|
|
211
267
|
> 드롭다운 선택 컴포넌트. 5-part anatomy: Root, Label, Trigger, Popover, Item.
|
|
@@ -237,12 +293,12 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
237
293
|
|
|
238
294
|
**SelectPopover:**
|
|
239
295
|
|
|
240
|
-
| Prop | Type | Required | Default | Description
|
|
241
|
-
| ----------- | ----------- | -------- | ------- |
|
|
242
|
-
| `children` | `ReactNode` | Yes | | SelectItem 목록
|
|
243
|
-
| `sameWidth` | `boolean` | | true | 트리거와 같은 너비
|
|
244
|
-
| `gutter` | `number` | | 4 | 트리거와의 간격 (px)
|
|
245
|
-
| `className` | `string` | | | 기본 스타일 오버라이드
|
|
296
|
+
| Prop | Type | Required | Default | Description |
|
|
297
|
+
| ----------- | ----------- | -------- | ------- | ------------------------------------------------------------------------------ |
|
|
298
|
+
| `children` | `ReactNode` | Yes | | SelectItem 목록 |
|
|
299
|
+
| `sameWidth` | `boolean` | | true | 트리거와 같은 너비 |
|
|
300
|
+
| `gutter` | `number` | | 4 | 트리거와의 간격 (px) **⚠️ deprecated since 1.13.0 — use `sideOffset` instead** |
|
|
301
|
+
| `className` | `string` | | | 기본 스타일 오버라이드 |
|
|
246
302
|
|
|
247
303
|
**SelectItem:**
|
|
248
304
|
|
|
@@ -293,10 +349,10 @@ import {
|
|
|
293
349
|
|
|
294
350
|
**ComboboxRoot:**
|
|
295
351
|
|
|
296
|
-
| Prop | Type | Required | Default | Description
|
|
297
|
-
| ------------------ | ------------------------- | -------- | ------- |
|
|
298
|
-
| `setValue` | `(value: string) => void` | | | 입력값 변경 핸들러
|
|
299
|
-
| `resetValueOnHide` | `boolean` | | false | 팝오버 닫힐 때 입력값 리셋
|
|
352
|
+
| Prop | Type | Required | Default | Description |
|
|
353
|
+
| ------------------ | ------------------------- | -------- | ------- | ------------------------------------------------------------------------------- |
|
|
354
|
+
| `setValue` | `(value: string) => void` | | | 입력값 변경 핸들러 **⚠️ deprecated since 1.13.0 — use `onValueChange` instead** |
|
|
355
|
+
| `resetValueOnHide` | `boolean` | | false | 팝오버 닫힐 때 입력값 리셋 |
|
|
300
356
|
|
|
301
357
|
**ComboboxInput:**
|
|
302
358
|
|
|
@@ -308,12 +364,12 @@ import {
|
|
|
308
364
|
|
|
309
365
|
**ComboboxPopover:**
|
|
310
366
|
|
|
311
|
-
| Prop | Type | Required | Default | Description
|
|
312
|
-
| ----------- | ----------- | -------- | ------- |
|
|
313
|
-
| `children` | `ReactNode` | Yes | | ComboboxItem/Group 목록
|
|
314
|
-
| `sameWidth` | `boolean` | | true | 입력과 같은 너비
|
|
315
|
-
| `gutter` | `number` | | 4 | 입력과의 간격 (px)
|
|
316
|
-
| `className` | `string` | | | 기본 스타일 오버라이드
|
|
367
|
+
| Prop | Type | Required | Default | Description |
|
|
368
|
+
| ----------- | ----------- | -------- | ------- | ---------------------------------------------------------------------------- |
|
|
369
|
+
| `children` | `ReactNode` | Yes | | ComboboxItem/Group 목록 |
|
|
370
|
+
| `sameWidth` | `boolean` | | true | 입력과 같은 너비 |
|
|
371
|
+
| `gutter` | `number` | | 4 | 입력과의 간격 (px) **⚠️ deprecated since 1.13.0 — use `sideOffset` instead** |
|
|
372
|
+
| `className` | `string` | | | 기본 스타일 오버라이드 |
|
|
317
373
|
|
|
318
374
|
**ComboboxItem:**
|
|
319
375
|
|
|
@@ -500,11 +556,11 @@ import {
|
|
|
500
556
|
|
|
501
557
|
**FormSelectPopover:**
|
|
502
558
|
|
|
503
|
-
| Prop | Type | Required | Default | Description
|
|
504
|
-
| ----------- | ----------- | -------- | ------- |
|
|
505
|
-
| `children` | `ReactNode` | Yes | | FormSelectItem 목록
|
|
506
|
-
| `sameWidth` | `boolean` | | true | 트리거와 같은 너비
|
|
507
|
-
| `gutter` | `number` | | 4 | 트리거와의 간격 (px) |
|
|
559
|
+
| Prop | Type | Required | Default | Description |
|
|
560
|
+
| ----------- | ----------- | -------- | ------- | ------------------------------------------------------------------------------ |
|
|
561
|
+
| `children` | `ReactNode` | Yes | | FormSelectItem 목록 |
|
|
562
|
+
| `sameWidth` | `boolean` | | true | 트리거와 같은 너비 |
|
|
563
|
+
| `gutter` | `number` | | 4 | 트리거와의 간격 (px) **⚠️ deprecated since 1.13.0 — use `sideOffset` instead** |
|
|
508
564
|
|
|
509
565
|
**FormSelectItem:**
|
|
510
566
|
|
|
@@ -797,6 +853,21 @@ import { Button } from "@reopt-ai/opt-ui";
|
|
|
797
853
|
| `progress` | `number` | | | 원형 프로그레스 값 (0-100). 설정 시 dot 무시 |
|
|
798
854
|
| `progressSize` | `number` | | 16 | 프로그레스 링 SVG 크기 (px) |
|
|
799
855
|
|
|
856
|
+
**Examples:**
|
|
857
|
+
|
|
858
|
+
_텍스트가 있는 상태:_
|
|
859
|
+
|
|
860
|
+
```tsx
|
|
861
|
+
import { Badge } from "@reopt-ai/opt-ui";
|
|
862
|
+
export function Example() {
|
|
863
|
+
return (
|
|
864
|
+
<Badge variant="success" dot>
|
|
865
|
+
동기화 완료
|
|
866
|
+
</Badge>
|
|
867
|
+
);
|
|
868
|
+
}
|
|
869
|
+
```
|
|
870
|
+
|
|
800
871
|
### Alert
|
|
801
872
|
|
|
802
873
|
> 알림 메시지 컴포넌트. 4가지 변형(info, success, warning, error), 제목/본문/닫기 버튼 지원.
|
|
@@ -811,6 +882,21 @@ import { Button } from "@reopt-ai/opt-ui";
|
|
|
811
882
|
| `dismissible` | `boolean` | | false | 닫기 버튼 표시 여부 |
|
|
812
883
|
| `onDismiss` | `() => void` | | | 닫기 버튼 클릭 핸들러 |
|
|
813
884
|
|
|
885
|
+
**Examples:**
|
|
886
|
+
|
|
887
|
+
_재시도 가능한 오류 안내:_
|
|
888
|
+
|
|
889
|
+
```tsx
|
|
890
|
+
import { Alert } from "@reopt-ai/opt-ui";
|
|
891
|
+
export function Example() {
|
|
892
|
+
return (
|
|
893
|
+
<Alert variant="error" title="저장하지 못했습니다">
|
|
894
|
+
연결 상태를 확인한 뒤 다시 저장하세요.
|
|
895
|
+
</Alert>
|
|
896
|
+
);
|
|
897
|
+
}
|
|
898
|
+
```
|
|
899
|
+
|
|
814
900
|
### Spinner
|
|
815
901
|
|
|
816
902
|
> 로딩 상태 표시 스피너. 3가지 크기와 장식용 aria-hidden 모드를 지원합니다.
|
|
@@ -821,6 +907,17 @@ import { Button } from "@reopt-ai/opt-ui";
|
|
|
821
907
|
| ------ | ---------------------- | -------- | ------- | ----------- |
|
|
822
908
|
| `size` | `"sm" \| "md" \| "lg"` | | "md" | 스피너 크기 |
|
|
823
909
|
|
|
910
|
+
**Examples:**
|
|
911
|
+
|
|
912
|
+
_이름 있는 로딩 표시:_
|
|
913
|
+
|
|
914
|
+
```tsx
|
|
915
|
+
import { Spinner } from "@reopt-ai/opt-ui";
|
|
916
|
+
export function Example() {
|
|
917
|
+
return <Spinner size="sm" aria-label="검색 결과 불러오는 중" />;
|
|
918
|
+
}
|
|
919
|
+
```
|
|
920
|
+
|
|
824
921
|
### LoadingOverlay
|
|
825
922
|
|
|
826
923
|
> 로딩 오버레이. 중복 status 없이 하나의 aria-busy 라이브 영역으로 콘텐츠 위 로딩 상태를 표시합니다.
|
|
@@ -834,6 +931,21 @@ import { Button } from "@reopt-ai/opt-ui";
|
|
|
834
931
|
| `children` | `ReactNode` | Yes | | 감싸는 콘텐츠 |
|
|
835
932
|
| `label` | `string` | | "Loading…" | 로딩 텍스트 |
|
|
836
933
|
|
|
934
|
+
**Examples:**
|
|
935
|
+
|
|
936
|
+
_기존 결과를 유지하는 갱신 표시:_
|
|
937
|
+
|
|
938
|
+
```tsx
|
|
939
|
+
import { LoadingOverlay } from "@reopt-ai/opt-ui";
|
|
940
|
+
export function Example() {
|
|
941
|
+
return (
|
|
942
|
+
<LoadingOverlay loading label="목록 새로고침 중">
|
|
943
|
+
<p>이전 조회 결과</p>
|
|
944
|
+
</LoadingOverlay>
|
|
945
|
+
);
|
|
946
|
+
}
|
|
947
|
+
```
|
|
948
|
+
|
|
837
949
|
### Progress
|
|
838
950
|
|
|
839
951
|
> 진행률 표시. Linear/Circular, determinate/indeterminate 변형과 안전하게 보정된 ARIA 값을 지원합니다.
|
|
@@ -866,6 +978,17 @@ import { Button } from "@reopt-ai/opt-ui";
|
|
|
866
978
|
| `label` | `string` | | | 접근성 레이블 |
|
|
867
979
|
| `indeterminate` | `boolean` | | false | 값을 알 수 없는 진행 상태 |
|
|
868
980
|
|
|
981
|
+
**Examples:**
|
|
982
|
+
|
|
983
|
+
_업로드 진행률:_
|
|
984
|
+
|
|
985
|
+
```tsx
|
|
986
|
+
import { Progress } from "@reopt-ai/opt-ui";
|
|
987
|
+
export function Example() {
|
|
988
|
+
return <Progress value={35} max={100} aria-label="파일 업로드" />;
|
|
989
|
+
}
|
|
990
|
+
```
|
|
991
|
+
|
|
869
992
|
### Avatar
|
|
870
993
|
|
|
871
994
|
> 사용자 아바타. 이미지, 이니셜 자동 생성, 스크린 리더에 노출되는 상태 인디케이터, 그룹을 지원합니다.
|
|
@@ -891,6 +1014,22 @@ import { Button } from "@reopt-ai/opt-ui";
|
|
|
891
1014
|
| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | | "md" | 아바타 크기 |
|
|
892
1015
|
| `children` | `ReactNode` | Yes | | Avatar 요소들 |
|
|
893
1016
|
|
|
1017
|
+
**Examples:**
|
|
1018
|
+
|
|
1019
|
+
_이미지 없이 사용자 표시:_
|
|
1020
|
+
|
|
1021
|
+
```tsx
|
|
1022
|
+
import { Avatar, AvatarGroup } from "@reopt-ai/opt-ui";
|
|
1023
|
+
export function Example() {
|
|
1024
|
+
return (
|
|
1025
|
+
<AvatarGroup max={3}>
|
|
1026
|
+
<Avatar name="김민수" />
|
|
1027
|
+
<Avatar name="이지수" />
|
|
1028
|
+
</AvatarGroup>
|
|
1029
|
+
);
|
|
1030
|
+
}
|
|
1031
|
+
```
|
|
1032
|
+
|
|
894
1033
|
### Skeleton
|
|
895
1034
|
|
|
896
1035
|
> 로딩 플레이스홀더. text/circular/rectangular 변형. 프리셋 컴포넌트 포함.
|
|
@@ -926,6 +1065,21 @@ import { Button } from "@reopt-ai/opt-ui";
|
|
|
926
1065
|
| `rows` | `number` | | 5 | 테이블 행 수 |
|
|
927
1066
|
| `columns` | `number` | | 4 | 테이블 열 수 |
|
|
928
1067
|
|
|
1068
|
+
**Examples:**
|
|
1069
|
+
|
|
1070
|
+
_목록 로딩 자리 확보:_
|
|
1071
|
+
|
|
1072
|
+
```tsx
|
|
1073
|
+
import { SkeletonTable } from "@reopt-ai/opt-ui";
|
|
1074
|
+
export function Example() {
|
|
1075
|
+
return (
|
|
1076
|
+
<section aria-label="목록 불러오는 중" aria-busy="true">
|
|
1077
|
+
<SkeletonTable rows={3} columns={4} />
|
|
1078
|
+
</section>
|
|
1079
|
+
);
|
|
1080
|
+
}
|
|
1081
|
+
```
|
|
1082
|
+
|
|
929
1083
|
### Card
|
|
930
1084
|
|
|
931
1085
|
> 범용 카드 컨테이너. Header, Title, Description, Content, Footer 하위 컴포넌트 포함.
|
|
@@ -1115,11 +1269,11 @@ import {
|
|
|
1115
1269
|
|
|
1116
1270
|
**MenuPopover:**
|
|
1117
1271
|
|
|
1118
|
-
| Prop | Type | Required | Default | Description
|
|
1119
|
-
| ----------- | ----------- | -------- | ------- |
|
|
1120
|
-
| `children` | `ReactNode` | Yes | | MenuItem 목록
|
|
1121
|
-
| `gutter` | `number` | | 8 | 트리거와의 간격 (px)
|
|
1122
|
-
| `className` | `string` | | | 기본 스타일 오버라이드
|
|
1272
|
+
| Prop | Type | Required | Default | Description |
|
|
1273
|
+
| ----------- | ----------- | -------- | ------- | ------------------------------------------------------------------------------ |
|
|
1274
|
+
| `children` | `ReactNode` | Yes | | MenuItem 목록 |
|
|
1275
|
+
| `gutter` | `number` | | 8 | 트리거와의 간격 (px) **⚠️ deprecated since 1.13.0 — use `sideOffset` instead** |
|
|
1276
|
+
| `className` | `string` | | | 기본 스타일 오버라이드 |
|
|
1123
1277
|
|
|
1124
1278
|
**MenuItem:**
|
|
1125
1279
|
|
|
@@ -1174,9 +1328,9 @@ import {
|
|
|
1174
1328
|
|
|
1175
1329
|
**DropdownContent:**
|
|
1176
1330
|
|
|
1177
|
-
| Prop | Type | Required | Default | Description
|
|
1178
|
-
| -------- | -------- | -------- | ------- |
|
|
1179
|
-
| `gutter` | `number` | | 4 | 트리거와의 간격 (px) |
|
|
1331
|
+
| Prop | Type | Required | Default | Description |
|
|
1332
|
+
| -------- | -------- | -------- | ------- | ------------------------------------------------------------------------------ |
|
|
1333
|
+
| `gutter` | `number` | | 4 | 트리거와의 간격 (px) **⚠️ deprecated since 1.13.0 — use `sideOffset` instead** |
|
|
1180
1334
|
|
|
1181
1335
|
**DropdownItem:**
|
|
1182
1336
|
|
|
@@ -1200,10 +1354,9 @@ import {
|
|
|
1200
1354
|
|
|
1201
1355
|
**Import:** `import { PopoverRoot } from "@reopt-ai/opt-ui"`
|
|
1202
1356
|
|
|
1203
|
-
| Prop | Type | Required | Default | Description
|
|
1204
|
-
| ----------- | -------- | -------- | ------- |
|
|
1205
|
-
| `
|
|
1206
|
-
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
1357
|
+
| Prop | Type | Required | Default | Description |
|
|
1358
|
+
| ----------- | -------- | -------- | ------- | ----------------- |
|
|
1359
|
+
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
1207
1360
|
|
|
1208
1361
|
**Keyboard Shortcuts:**
|
|
1209
1362
|
|
|
@@ -1212,6 +1365,30 @@ import {
|
|
|
1212
1365
|
| `Esc` | 팝오버 닫기 |
|
|
1213
1366
|
| `Enter / Space` | 트리거 활성화 |
|
|
1214
1367
|
|
|
1368
|
+
**Examples:**
|
|
1369
|
+
|
|
1370
|
+
_보조 설명 열고 닫기:_
|
|
1371
|
+
|
|
1372
|
+
```tsx
|
|
1373
|
+
import {
|
|
1374
|
+
PopoverRoot,
|
|
1375
|
+
PopoverTrigger,
|
|
1376
|
+
PopoverContent,
|
|
1377
|
+
PopoverClose,
|
|
1378
|
+
} from "@reopt-ai/opt-ui";
|
|
1379
|
+
export function Example() {
|
|
1380
|
+
return (
|
|
1381
|
+
<PopoverRoot>
|
|
1382
|
+
<PopoverTrigger>공유 안내</PopoverTrigger>
|
|
1383
|
+
<PopoverContent>
|
|
1384
|
+
<p>초대받은 사용자만 문서를 볼 수 있습니다.</p>
|
|
1385
|
+
<PopoverClose>닫기</PopoverClose>
|
|
1386
|
+
</PopoverContent>
|
|
1387
|
+
</PopoverRoot>
|
|
1388
|
+
);
|
|
1389
|
+
}
|
|
1390
|
+
```
|
|
1391
|
+
|
|
1215
1392
|
### Tabs
|
|
1216
1393
|
|
|
1217
1394
|
> 탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.
|
|
@@ -1220,12 +1397,12 @@ import {
|
|
|
1220
1397
|
|
|
1221
1398
|
**TabsRoot:**
|
|
1222
1399
|
|
|
1223
|
-
| Prop | Type | Required | Default | Description
|
|
1224
|
-
| ------------------- | ------------------------------ | -------- | ------- |
|
|
1225
|
-
| `variant` | `"underline" \| "workspace"` | | | 탭 프레임 형태. workspace는 편집기 탭(문서/쿼리처럼 열고 닫히며 상태를 갖는 작업 단위)
|
|
1226
|
-
| `defaultSelectedId` | `string` | | | 초기 선택된 탭 ID
|
|
1227
|
-
| `selectedId` | `string \| null` | | | 제어 모드: 선택된 탭 ID
|
|
1228
|
-
| `setSelectedId` | `(id: string \| null) => void` | | | 제어 모드: 탭 변경 핸들러
|
|
1400
|
+
| Prop | Type | Required | Default | Description |
|
|
1401
|
+
| ------------------- | ------------------------------ | -------- | ------- | ------------------------------------------------------------------------------------------- |
|
|
1402
|
+
| `variant` | `"underline" \| "workspace"` | | | 탭 프레임 형태. workspace는 편집기 탭(문서/쿼리처럼 열고 닫히며 상태를 갖는 작업 단위) |
|
|
1403
|
+
| `defaultSelectedId` | `string` | | | 초기 선택된 탭 ID |
|
|
1404
|
+
| `selectedId` | `string \| null` | | | 제어 모드: 선택된 탭 ID |
|
|
1405
|
+
| `setSelectedId` | `(id: string \| null) => void` | | | 제어 모드: 탭 변경 핸들러 **⚠️ deprecated since 1.13.0 — use `onSelectedIdChange` instead** |
|
|
1229
1406
|
|
|
1230
1407
|
**TabList:**
|
|
1231
1408
|
|
|
@@ -1262,6 +1439,27 @@ import {
|
|
|
1262
1439
|
| `Home` | 첫 번째 탭으로 이동 |
|
|
1263
1440
|
| `End` | 마지막 탭으로 이동 |
|
|
1264
1441
|
|
|
1442
|
+
**Examples:**
|
|
1443
|
+
|
|
1444
|
+
_이름 있는 두 패널:_
|
|
1445
|
+
|
|
1446
|
+
```tsx
|
|
1447
|
+
import { TabsRoot, TabList, Tab, TabPanel } from "@reopt-ai/opt-ui";
|
|
1448
|
+
|
|
1449
|
+
export function Example() {
|
|
1450
|
+
return (
|
|
1451
|
+
<TabsRoot defaultSelectedId="overview">
|
|
1452
|
+
<TabList aria-label="프로젝트 정보">
|
|
1453
|
+
<Tab id="overview">개요</Tab>
|
|
1454
|
+
<Tab id="activity">활동</Tab>
|
|
1455
|
+
</TabList>
|
|
1456
|
+
<TabPanel tabId="overview">프로젝트 요약</TabPanel>
|
|
1457
|
+
<TabPanel tabId="activity">최근 활동</TabPanel>
|
|
1458
|
+
</TabsRoot>
|
|
1459
|
+
);
|
|
1460
|
+
}
|
|
1461
|
+
```
|
|
1462
|
+
|
|
1265
1463
|
### Disclosure
|
|
1266
1464
|
|
|
1267
1465
|
> 접기/펼치기 콘텐츠 영역. 3-part anatomy: Root, Trigger, Content.
|
|
@@ -1270,11 +1468,11 @@ import {
|
|
|
1270
1468
|
|
|
1271
1469
|
**DisclosureRoot:**
|
|
1272
1470
|
|
|
1273
|
-
| Prop | Type | Required | Default | Description
|
|
1274
|
-
| ------------- | ------------------------- | -------- | ------- |
|
|
1275
|
-
| `open` | `boolean` | | | 제어 모드: 열림 상태
|
|
1276
|
-
| `setOpen` | `(open: boolean) => void` | | | 제어 모드: 상태 변경 핸들러 |
|
|
1277
|
-
| `defaultOpen` | `boolean` | | false | 비제어 모드: 초기 열림 상태
|
|
1471
|
+
| Prop | Type | Required | Default | Description |
|
|
1472
|
+
| ------------- | ------------------------- | -------- | ------- | --------------------------------------------------------------------------------------- |
|
|
1473
|
+
| `open` | `boolean` | | | 제어 모드: 열림 상태 |
|
|
1474
|
+
| `setOpen` | `(open: boolean) => void` | | | 제어 모드: 상태 변경 핸들러 **⚠️ deprecated since 1.13.0 — use `onOpenChange` instead** |
|
|
1475
|
+
| `defaultOpen` | `boolean` | | false | 비제어 모드: 초기 열림 상태 |
|
|
1278
1476
|
|
|
1279
1477
|
**DisclosureTrigger:**
|
|
1280
1478
|
|
|
@@ -1304,10 +1502,10 @@ import {
|
|
|
1304
1502
|
|
|
1305
1503
|
**DialogRoot:**
|
|
1306
1504
|
|
|
1307
|
-
| Prop | Type | Required | Default | Description
|
|
1308
|
-
| --------- | ------------------------- | -------- | ------- |
|
|
1309
|
-
| `open` | `boolean` | | | 제어 모드: 열림 상태
|
|
1310
|
-
| `setOpen` | `(open: boolean) => void` | | | 제어 모드: 상태 변경 핸들러 |
|
|
1505
|
+
| Prop | Type | Required | Default | Description |
|
|
1506
|
+
| --------- | ------------------------- | -------- | ------- | --------------------------------------------------------------------------------------- |
|
|
1507
|
+
| `open` | `boolean` | | | 제어 모드: 열림 상태 |
|
|
1508
|
+
| `setOpen` | `(open: boolean) => void` | | | 제어 모드: 상태 변경 핸들러 **⚠️ deprecated since 1.13.0 — use `onOpenChange` instead** |
|
|
1311
1509
|
|
|
1312
1510
|
**DialogDisclosure:**
|
|
1313
1511
|
|
|
@@ -1667,18 +1865,19 @@ import {
|
|
|
1667
1865
|
|
|
1668
1866
|
**Import:** `import { ConditionBuilder } from "@reopt-ai/opt-ui"`
|
|
1669
1867
|
|
|
1670
|
-
| Prop | Type | Required | Default | Description
|
|
1671
|
-
| --------------------- | --------------------------------------- | -------- | ------------------ |
|
|
1672
|
-
| `groups` | `ConditionGroup[]` | Yes | | 조건 그룹 배열
|
|
1673
|
-
| `onChange` | `(groups: ConditionGroup[]) => void` | Yes | | 그룹 변경 핸들러
|
|
1674
|
-
| `properties` | `string[]` | | | 선택 가능한 속성 목록 (기본 10개 제공)
|
|
1675
|
-
| `label` | `string` | | | 빌더 레이블
|
|
1676
|
-
| `nested` | `boolean` | | false | 중첩 AND/OR 그룹 활성화
|
|
1677
|
-
| `maxDepth` | `number` | | 3 | 최대 중첩 깊이
|
|
1678
|
-
| `conditionTypes` | `Record<string, ConditionTypeRenderer>` | | | 이질적 조건 타입 렌더러 레지스트리
|
|
1679
|
-
| `onPreview` | `(groups: ConditionGroup[]) => void` | | | 조건 변경 시 미리보기 콜백
|
|
1680
|
-
| `previewCount` | `number` | | | 매치 카운트 표시 (toLocaleString 포맷)
|
|
1681
|
-
| `
|
|
1868
|
+
| Prop | Type | Required | Default | Description |
|
|
1869
|
+
| --------------------- | --------------------------------------- | -------- | ------------------ | ------------------------------------------------------------------------------ |
|
|
1870
|
+
| `groups` | `ConditionGroup[]` | Yes | | 조건 그룹 배열 |
|
|
1871
|
+
| `onChange` | `(groups: ConditionGroup[]) => void` | Yes | | 그룹 변경 핸들러 |
|
|
1872
|
+
| `properties` | `string[]` | | | 선택 가능한 속성 목록 (기본 10개 제공) |
|
|
1873
|
+
| `label` | `string` | | | 빌더 레이블 |
|
|
1874
|
+
| `nested` | `boolean` | | false | 중첩 AND/OR 그룹 활성화 |
|
|
1875
|
+
| `maxDepth` | `number` | | 3 | 최대 중첩 깊이 |
|
|
1876
|
+
| `conditionTypes` | `Record<string, ConditionTypeRenderer>` | | | 이질적 조건 타입 렌더러 레지스트리 |
|
|
1877
|
+
| `onPreview` | `(groups: ConditionGroup[]) => void` | | | 조건 변경 시 미리보기 콜백 |
|
|
1878
|
+
| `previewCount` | `number` | | | 매치 카운트 표시 (toLocaleString 포맷) |
|
|
1879
|
+
| `labels` | `ConditionBuilderLabels` | | | 미리보기 문구 오버라이드 (previewSuffix, formatPreview). 기본은 영어 "matches" |
|
|
1880
|
+
| `addNestedGroupLabel` | `string` | | "Add nested group" | 중첩 그룹 추가 버튼 텍스트 |
|
|
1682
1881
|
|
|
1683
1882
|
## Other
|
|
1684
1883
|
|