@idbrnd/design-system 2.1.3 → 2.3.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/README.md +40 -13
- package/dist/components/SegmentedControl/SegmentedControl.d.ts +10 -1
- package/dist/dev/pages/SegmentedControlPage.d.ts +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +710 -708
- package/dist/style.css +1 -1
- package/dist/tokens.css +355 -0
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -611,7 +611,7 @@ import { Tooltip } from "@idbrnd/design-system";
|
|
|
611
611
|
| Prop | 타입 | 기본값 | 설명 |
|
|
612
612
|
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------- |
|
|
613
613
|
| `content` | `ReactNode \| ((close: () => void) => ReactNode)` | — | **(필수)** 툴팁에 표시할 내용. render function 전달 시 `close` 콜백 사용 가능 |
|
|
614
|
-
| `trigger` | `"hover"` \| `"click"` \| `"always"`
|
|
614
|
+
| `trigger` | `"hover"` \| `"click"` \| `"always"` | `"hover"` | 트리거 방식. `"always"`는 항상 표시되는 고정 안내 |
|
|
615
615
|
| `variant` | `"default"` \| `"compact"` | `"default"` | 크기 변형. default: 8px 12px, compact: 4px 12px |
|
|
616
616
|
| `position` | `"top"` \| `"top-left"` \| `"top-right"` \| `"bottom"` \| `"bottom-left"` \| `"bottom-right"` \| `"left"` \| `"left-top"` \| `"left-bottom"` \| `"right"` \| `"right-top"` \| `"right-bottom"` | `"top"` | 툴팁 표시 위치 (12방향) |
|
|
617
617
|
| `arrow` | `boolean` | `true` | 화살표(꼬리표) 표시 여부 |
|
|
@@ -1233,17 +1233,42 @@ function Example() {
|
|
|
1233
1233
|
/>
|
|
1234
1234
|
```
|
|
1235
1235
|
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1236
|
+
**레이아웃 (`layout="hug" | "fill"`)**
|
|
1237
|
+
|
|
1238
|
+
```tsx
|
|
1239
|
+
{
|
|
1240
|
+
/* hug: 내부 세그먼트 크기에 맞춰 컨테이너가 축소됩니다 */
|
|
1241
|
+
}
|
|
1242
|
+
<SegmentedControl
|
|
1243
|
+
items={items}
|
|
1244
|
+
value={period}
|
|
1245
|
+
onChange={setPeriod}
|
|
1246
|
+
layout="hug"
|
|
1247
|
+
/>;
|
|
1248
|
+
|
|
1249
|
+
{
|
|
1250
|
+
/* fill: 부모 너비를 최대한 채우고 세그먼트가 균등하게 늘어납니다 (basic 기본값) */
|
|
1251
|
+
}
|
|
1252
|
+
<SegmentedControl
|
|
1253
|
+
items={items}
|
|
1254
|
+
value={period}
|
|
1255
|
+
onChange={setPeriod}
|
|
1256
|
+
layout="fill"
|
|
1257
|
+
/>;
|
|
1258
|
+
```
|
|
1259
|
+
|
|
1260
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
1261
|
+
| ------------- | ------------------------------------ | ------------------------------------------------------ | -------------------------------------------------------------------------- |
|
|
1262
|
+
| `items` | `SegmentedControlItem[]` | — | **(필수)** 세그먼트 목록 |
|
|
1263
|
+
| `value` | `string` | — | **(필수)** 현재 선택된 세그먼트 값 |
|
|
1264
|
+
| `onChange` | `(value: string) => void` | — | 세그먼트 변경 콜백 |
|
|
1265
|
+
| `variant` | `"basic"` \| `"icon"` | `"basic"` | `"icon"`: 아이콘 전용 정사각형 세그먼트 |
|
|
1266
|
+
| `type` | `"fill"` \| `"outlined"` | `"fill"` | 컴포넌트 외형 |
|
|
1267
|
+
| `size` | `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기. small: 32px, medium: 40px, large: 48px |
|
|
1268
|
+
| `layout` | `"hug"` \| `"fill"` | `variant="basic"`: `"fill"`, `variant="icon"`: `"hug"` | `"hug"`: 내부 세그먼트 크기에 맞춰 축소, `"fill"`: 부모 너비를 최대한 채움 |
|
|
1269
|
+
| `icon` | `boolean` | `false` | `variant="basic"`에서 아이콘을 텍스트와 함께 표시 |
|
|
1270
|
+
| `label` | `string` | — | 스크린 리더용 그룹 레이블 (`aria-label`) |
|
|
1271
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
1247
1272
|
|
|
1248
1273
|
**`SegmentedControlItem`**
|
|
1249
1274
|
|
|
@@ -1257,6 +1282,7 @@ function Example() {
|
|
|
1257
1282
|
|
|
1258
1283
|
유의사항:
|
|
1259
1284
|
|
|
1285
|
+
- `layout`을 지정하지 않으면 `variant`별 기본값(`basic`="fill", `icon`="hug")이 적용됩니다.
|
|
1260
1286
|
- `variant="icon"` 사용 시 각 item에 `ariaLabel`을 반드시 지정해야 합니다. 미지정 시 개발 모드에서 경고가 출력됩니다.
|
|
1261
1287
|
- `variant="basic"`에서 `icon=true`이면 세그먼트 왼쪽에 아이콘, 나머지 공간에 텍스트가 배치됩니다.
|
|
1262
1288
|
- `value`에 해당하는 item이 없으면 슬라이딩 인디케이터가 숨겨지고, 첫 번째 활성 항목에 키보드 포커스가 유지됩니다.
|
|
@@ -1902,6 +1928,7 @@ import type {
|
|
|
1902
1928
|
SegmentedControlVariant,
|
|
1903
1929
|
SegmentedControlType,
|
|
1904
1930
|
SegmentedControlSize,
|
|
1931
|
+
SegmentedControlLayout,
|
|
1905
1932
|
SegmentedControlItem,
|
|
1906
1933
|
|
|
1907
1934
|
// Tab
|
|
@@ -2,6 +2,7 @@ import { type CSSProperties, type ReactNode } from "react";
|
|
|
2
2
|
export type SegmentedControlVariant = "basic" | "icon";
|
|
3
3
|
export type SegmentedControlType = "fill" | "outlined";
|
|
4
4
|
export type SegmentedControlSize = "small" | "medium" | "large";
|
|
5
|
+
export type SegmentedControlLayout = "hug" | "fill";
|
|
5
6
|
export interface SegmentedControlItem {
|
|
6
7
|
value: string;
|
|
7
8
|
label?: ReactNode;
|
|
@@ -14,6 +15,14 @@ export interface SegmentedControlProps {
|
|
|
14
15
|
variant?: SegmentedControlVariant;
|
|
15
16
|
type?: SegmentedControlType;
|
|
16
17
|
size?: SegmentedControlSize;
|
|
18
|
+
/**
|
|
19
|
+
* 컨테이너 크기 결정 방식.
|
|
20
|
+
* - "hug": 내부 요소(세그먼트) 크기에 맞춰 컨테이너가 축소됩니다.
|
|
21
|
+
* - "fill": 부모 요소의 너비를 최대한 채우고, 세그먼트가 균등하게 늘어납니다.
|
|
22
|
+
*
|
|
23
|
+
* 기본값은 variant별로 다릅니다: basic="fill", icon="hug"
|
|
24
|
+
*/
|
|
25
|
+
layout?: SegmentedControlLayout;
|
|
17
26
|
/** basic variant에서 icon을 함께 표시할지 여부 */
|
|
18
27
|
icon?: boolean;
|
|
19
28
|
/** 스크린 리더용 그룹 레이블 */
|
|
@@ -23,5 +32,5 @@ export interface SegmentedControlProps {
|
|
|
23
32
|
onChange?: (value: string) => void;
|
|
24
33
|
customStyle?: CSSProperties;
|
|
25
34
|
}
|
|
26
|
-
declare function SegmentedControl({ variant, type, size, icon, label, items, value, onChange, customStyle, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
declare function SegmentedControl({ variant, type, size, layout, icon, label, items, value, onChange, customStyle, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
|
|
27
36
|
export default SegmentedControl;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function SegmentedControlPage(): import("react/jsx-runtime").JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -57,7 +57,7 @@ export type { TooltipProps, TooltipPosition, TooltipVariant, TooltipTrigger, Too
|
|
|
57
57
|
export { default as Tab } from "./components/Tab/Tab";
|
|
58
58
|
export type { TabProps, TabItem, TabSize, TabResize, } from "./components/Tab/Tab";
|
|
59
59
|
export { default as SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
|
|
60
|
-
export type { SegmentedControlProps, SegmentedControlVariant, SegmentedControlType, SegmentedControlSize, SegmentedControlItem, } from "./components/SegmentedControl/SegmentedControl";
|
|
60
|
+
export type { SegmentedControlProps, SegmentedControlVariant, SegmentedControlType, SegmentedControlSize, SegmentedControlLayout, SegmentedControlItem, } from "./components/SegmentedControl/SegmentedControl";
|
|
61
61
|
export { default as Table } from "./components/Table/Table";
|
|
62
62
|
export type { TableProps, TableVariant, } from "./components/Table/Table.types";
|
|
63
63
|
export { default as TableContainer } from "./components/Table/TableContainer";
|