@idbrnd/design-system 3.0.4 → 3.1.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 +75 -75
- package/dist/components/Button/Tertiary/TertiaryButton.d.ts +15 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2127 -2070
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -92,15 +92,15 @@ import { FillButton } from "@idbrnd/design-system";
|
|
|
92
92
|
<FillButton variant="primary" disabled>비활성화</FillButton>
|
|
93
93
|
```
|
|
94
94
|
|
|
95
|
-
| Prop
|
|
96
|
-
|
|
|
97
|
-
| `variant` | `"primary"` \| `"assistive"` \| `"error"` | `"primary"` | 색상 변형
|
|
98
|
-
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기
|
|
99
|
-
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"` | 너비 방식
|
|
100
|
-
| `loading` | `boolean` | `false` | 로딩 스피너 표시
|
|
101
|
-
| `disabled` | `boolean` | `false` | 비활성화
|
|
95
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
96
|
+
| ------------------ | -------------------------------------------------- | ------------ | ------------------- |
|
|
97
|
+
| `variant` | `"primary"` \| `"assistive"` \| `"error"` | `"primary"` | 색상 변형 |
|
|
98
|
+
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
99
|
+
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"` | 너비 방식 |
|
|
100
|
+
| `loading` | `boolean` | `false` | 로딩 스피너 표시 |
|
|
101
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
102
102
|
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
103
|
-
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일
|
|
103
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
104
104
|
|
|
105
105
|
### OutlineButton
|
|
106
106
|
|
|
@@ -112,15 +112,15 @@ import { OutlineButton } from "@idbrnd/design-system";
|
|
|
112
112
|
<OutlineButton variant="assistive" loading>처리 중</OutlineButton>
|
|
113
113
|
```
|
|
114
114
|
|
|
115
|
-
| Prop
|
|
116
|
-
|
|
|
117
|
-
| `variant` | `"primary"` \| `"assistive"` \| `"secondary"` | `"primary"`
|
|
118
|
-
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"`
|
|
119
|
-
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"`
|
|
120
|
-
| `loading` | `boolean` | `false`
|
|
121
|
-
| `disabled` | `boolean` | `false`
|
|
122
|
-
| `keepFocusOnClick` | `boolean` | `false`
|
|
123
|
-
| `customStyle` | `CSSProperties` | —
|
|
115
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
116
|
+
| ------------------ | -------------------------------------------------- | ------------ | ------------------- |
|
|
117
|
+
| `variant` | `"primary"` \| `"assistive"` \| `"secondary"` | `"primary"` | 색상 변형 |
|
|
118
|
+
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
119
|
+
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"` | 너비 방식 |
|
|
120
|
+
| `loading` | `boolean` | `false` | 로딩 스피너 표시 |
|
|
121
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
122
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
123
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
124
124
|
|
|
125
125
|
### TextButton
|
|
126
126
|
|
|
@@ -131,15 +131,15 @@ import { TextButton } from "@idbrnd/design-system";
|
|
|
131
131
|
<TextButton variant="assistive" size="small">작은 버튼</TextButton>
|
|
132
132
|
```
|
|
133
133
|
|
|
134
|
-
| Prop
|
|
135
|
-
|
|
|
136
|
-
| `variant` | `"primary"` \| `"assistive"` \| `"secondary"` | `"primary"`
|
|
137
|
-
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"`
|
|
138
|
-
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"`
|
|
139
|
-
| `loading` | `boolean` | `false`
|
|
140
|
-
| `disabled` | `boolean` | `false`
|
|
141
|
-
| `keepFocusOnClick` | `boolean` | `false`
|
|
142
|
-
| `customStyle` | `CSSProperties` | —
|
|
134
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
135
|
+
| ------------------ | -------------------------------------------------- | ------------ | ------------------- |
|
|
136
|
+
| `variant` | `"primary"` \| `"assistive"` \| `"secondary"` | `"primary"` | 색상 변형 |
|
|
137
|
+
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
138
|
+
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"` | 너비 방식 |
|
|
139
|
+
| `loading` | `boolean` | `false` | 로딩 스피너 표시 |
|
|
140
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
141
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
142
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
143
143
|
|
|
144
144
|
### WeakButton
|
|
145
145
|
|
|
@@ -150,15 +150,15 @@ import { WeakButton } from "@idbrnd/design-system";
|
|
|
150
150
|
<WeakButton variant="error" size="xsmall">삭제</WeakButton>
|
|
151
151
|
```
|
|
152
152
|
|
|
153
|
-
| Prop
|
|
154
|
-
|
|
|
155
|
-
| `variant` | `"primary"` \| `"assistive"` \| `"error"` | `"primary"`
|
|
156
|
-
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"`
|
|
157
|
-
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"`
|
|
158
|
-
| `loading` | `boolean` | `false`
|
|
159
|
-
| `disabled` | `boolean` | `false`
|
|
160
|
-
| `keepFocusOnClick` | `boolean` | `false`
|
|
161
|
-
| `customStyle` | `CSSProperties` | —
|
|
153
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
154
|
+
| ------------------ | -------------------------------------------------- | ------------ | ------------------- |
|
|
155
|
+
| `variant` | `"primary"` \| `"assistive"` \| `"error"` | `"primary"` | 색상 변형 |
|
|
156
|
+
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
157
|
+
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"` | 너비 방식 |
|
|
158
|
+
| `loading` | `boolean` | `false` | 로딩 스피너 표시 |
|
|
159
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
160
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
161
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
162
162
|
|
|
163
163
|
---
|
|
164
164
|
|
|
@@ -174,13 +174,13 @@ import { BasicIconButton } from "@idbrnd/design-system";
|
|
|
174
174
|
<BasicIconButton size="medium" disabled><SearchIcon /></BasicIconButton>
|
|
175
175
|
```
|
|
176
176
|
|
|
177
|
-
| Prop
|
|
178
|
-
|
|
|
179
|
-
| `size`
|
|
180
|
-
| `touchArea`
|
|
181
|
-
| `disabled`
|
|
182
|
-
| `keepFocusOnClick` | `boolean`
|
|
183
|
-
| `customStyle`
|
|
177
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
178
|
+
| ------------------ | -------------------------- | ----------- | --------------------------------------------------------------------------------------------------- |
|
|
179
|
+
| `size` | `"medium"` \| `"large"` | `"medium"` | 아이콘 크기 (large: 24×24, medium: 20×20) |
|
|
180
|
+
| `touchArea` | `"default"` \| `"compact"` | `"default"` | 인터랙션 적용 범위. large는 default(44×44)/compact(36×36) 모두 지원, medium은 default(32×32)만 지원 |
|
|
181
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
182
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
183
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
184
184
|
|
|
185
185
|
### FillIconButton
|
|
186
186
|
|
|
@@ -191,13 +191,13 @@ import { FillIconButton } from "@idbrnd/design-system";
|
|
|
191
191
|
<FillIconButton variant="overlay"><PlusIcon /></FillIconButton>
|
|
192
192
|
```
|
|
193
193
|
|
|
194
|
-
| Prop
|
|
195
|
-
|
|
|
196
|
-
| `variant` | `"basic"` \| `"overlay"` \| `"primary"` | `"basic"`
|
|
197
|
-
| `size` | `"medium"` \| `"large"` | `"medium"`
|
|
198
|
-
| `disabled` | `boolean` | `false`
|
|
199
|
-
| `keepFocusOnClick` | `boolean` | `false`
|
|
200
|
-
| `customStyle` | `CSSProperties` | —
|
|
194
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
195
|
+
| ------------------ | --------------------------------------- | ---------- | ------------------- |
|
|
196
|
+
| `variant` | `"basic"` \| `"overlay"` \| `"primary"` | `"basic"` | 색상 변형 |
|
|
197
|
+
| `size` | `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
198
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
199
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
200
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
201
201
|
|
|
202
202
|
### OutlineIconButton
|
|
203
203
|
|
|
@@ -208,12 +208,12 @@ import { OutlineIconButton } from "@idbrnd/design-system";
|
|
|
208
208
|
<OutlineIconButton disabled><WriteIcon /></OutlineIconButton>
|
|
209
209
|
```
|
|
210
210
|
|
|
211
|
-
| Prop
|
|
212
|
-
|
|
|
213
|
-
| `size` | `"medium"` \| `"large"` | `"medium"` | 크기
|
|
214
|
-
| `disabled` | `boolean` | `false` | 비활성화
|
|
211
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
212
|
+
| ------------------ | ----------------------- | ---------- | ------------------- |
|
|
213
|
+
| `size` | `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
214
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
215
215
|
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
216
|
-
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일
|
|
216
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
217
217
|
|
|
218
218
|
---
|
|
219
219
|
|
|
@@ -510,12 +510,12 @@ showToast({ variant: "basic", message: "알림 메시지입니다." });
|
|
|
510
510
|
dismissToast();
|
|
511
511
|
```
|
|
512
512
|
|
|
513
|
-
| 옵션 | 타입 | 설명
|
|
514
|
-
| ------------- | ----------------------------------------- |
|
|
515
|
-
| `message` | `ReactNode` | **(필수)** 표시할 메시지
|
|
516
|
-
| `variant` | `"basic"` \| `"positive"` \| `"negative"` | 색상 변형 (기본값 `"basic"`)
|
|
513
|
+
| 옵션 | 타입 | 설명 |
|
|
514
|
+
| ------------- | ----------------------------------------- | ------------------------------------------------------ |
|
|
515
|
+
| `message` | `ReactNode` | **(필수)** 표시할 메시지 |
|
|
516
|
+
| `variant` | `"basic"` \| `"positive"` \| `"negative"` | 색상 변형 (기본값 `"basic"`) |
|
|
517
517
|
| `icon` | `ReactNode` | 사용자 지정 아이콘. 미지정 시 variant 기본 아이콘 사용 |
|
|
518
|
-
| `customStyle` | `CSSProperties` | 추가 인라인 스타일
|
|
518
|
+
| `customStyle` | `CSSProperties` | 추가 인라인 스타일 |
|
|
519
519
|
|
|
520
520
|
### Snackbar
|
|
521
521
|
|
|
@@ -538,16 +538,16 @@ showSnackbar({ variant: "loading", heading: "처리 중..." });
|
|
|
538
538
|
dismissSnackbar();
|
|
539
539
|
```
|
|
540
540
|
|
|
541
|
-
| 옵션 | 타입 | 설명
|
|
542
|
-
| --------------- | ------------------------ |
|
|
543
|
-
| `variant` | `"basic"` \| `"loading"` | 색상 변형 (기본값 `"basic"`)
|
|
544
|
-
| `heading` | `ReactNode` | 제목 텍스트
|
|
545
|
-
| `description` | `ReactNode` | 본문 텍스트
|
|
541
|
+
| 옵션 | 타입 | 설명 |
|
|
542
|
+
| --------------- | ------------------------ | --------------------------------------------------- |
|
|
543
|
+
| `variant` | `"basic"` \| `"loading"` | 색상 변형 (기본값 `"basic"`) |
|
|
544
|
+
| `heading` | `ReactNode` | 제목 텍스트 |
|
|
545
|
+
| `description` | `ReactNode` | 본문 텍스트 |
|
|
546
546
|
| `icon` | `ReactNode` | 사용자 지정 아이콘. 전달 시 loading 스피너보다 우선 |
|
|
547
|
-
| `actionLabel` | `ReactNode` | 액션 버튼 레이블
|
|
548
|
-
| `onActionClick` | `() => void` | 액션 버튼 클릭 콜백
|
|
549
|
-
| `closeButton` | `boolean` | 닫기 버튼 표시 여부
|
|
550
|
-
| `customStyle` | `CSSProperties` | 추가 인라인 스타일
|
|
547
|
+
| `actionLabel` | `ReactNode` | 액션 버튼 레이블 |
|
|
548
|
+
| `onActionClick` | `() => void` | 액션 버튼 클릭 콜백 |
|
|
549
|
+
| `closeButton` | `boolean` | 닫기 버튼 표시 여부 |
|
|
550
|
+
| `customStyle` | `CSSProperties` | 추가 인라인 스타일 |
|
|
551
551
|
|
|
552
552
|
### PushBadge
|
|
553
553
|
|
|
@@ -561,12 +561,12 @@ import { PushBadge } from "@idbrnd/design-system";
|
|
|
561
561
|
<PushBadge variant="info" />
|
|
562
562
|
```
|
|
563
563
|
|
|
564
|
-
| Prop | 타입 | 기본값 | 설명
|
|
565
|
-
| ------------- | --------------------------------- | ---------- |
|
|
566
|
-
| `variant` | `"dot"` \| `"number"` \| `"info"` | `"number"` | 표시 형태
|
|
567
|
-
| `count` | `number` | `1` | `variant="number"` 시 표시할 숫자
|
|
568
|
-
| `maxCount` | `number` | `999` | `count`가 초과하면 `{maxCount}+`로 표시
|
|
569
|
-
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일
|
|
564
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
565
|
+
| ------------- | --------------------------------- | ---------- | --------------------------------------- |
|
|
566
|
+
| `variant` | `"dot"` \| `"number"` \| `"info"` | `"number"` | 표시 형태 |
|
|
567
|
+
| `count` | `number` | `1` | `variant="number"` 시 표시할 숫자 |
|
|
568
|
+
| `maxCount` | `number` | `999` | `count`가 초과하면 `{maxCount}+`로 표시 |
|
|
569
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
570
570
|
|
|
571
571
|
### Tooltip
|
|
572
572
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react';
|
|
2
|
+
export type TertiaryButtonVariant = 'fill' | 'tinted' | 'gray' | 'primary';
|
|
3
|
+
export type TertiaryButtonSize = 'large' | 'medium' | 'small';
|
|
4
|
+
export interface TertiaryButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
|
|
5
|
+
variant?: TertiaryButtonVariant;
|
|
6
|
+
size?: TertiaryButtonSize;
|
|
7
|
+
leadingIcon?: ReactNode;
|
|
8
|
+
trailingIcon?: ReactNode;
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
keepFocusOnClick?: boolean;
|
|
11
|
+
customStyle?: CSSProperties;
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
}
|
|
14
|
+
declare function TertiaryButton({ variant, size, leadingIcon, trailingIcon, disabled, loading, keepFocusOnClick, customStyle, onClick, className, children, type, ...rest }: TertiaryButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export default TertiaryButton;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,10 +2,12 @@ import "./styles/variables.css";
|
|
|
2
2
|
import "./styles/font-metrics.css";
|
|
3
3
|
export { default as FillButton } from "./components/Button/Fill/FillButton";
|
|
4
4
|
export { default as OutlineButton } from "./components/Button/Outline/OutlineButton";
|
|
5
|
+
export { default as TertiaryButton } from "./components/Button/Tertiary/TertiaryButton";
|
|
5
6
|
export { default as TextButton } from "./components/Button/Text/TextButton";
|
|
6
7
|
export { default as WeakButton } from "./components/Button/Weak/WeakButton";
|
|
7
8
|
export type { FillButtonProps, FillButtonSize, FillButtonVariant, FillButtonWidthType, } from "./components/Button/Fill/FillButton";
|
|
8
9
|
export type { OutlineButtonProps, OutlineButtonSize, OutlineButtonVariant, OutlineButtonWidthType, } from "./components/Button/Outline/OutlineButton";
|
|
10
|
+
export type { TertiaryButtonProps, TertiaryButtonSize, TertiaryButtonVariant, } from "./components/Button/Tertiary/TertiaryButton";
|
|
9
11
|
export type { TextButtonProps, TextButtonSize, TextButtonVariant, TextButtonWidthType, } from "./components/Button/Text/TextButton";
|
|
10
12
|
export type { WeakButtonProps, WeakButtonSize, WeakButtonVariant, WeakButtonWidthType, } from "./components/Button/Weak/WeakButton";
|
|
11
13
|
export { default as BasicIconButton } from "./components/IconButton/BasicIcon/BasicIconButton";
|