motile-ui 0.9.4 → 0.9.5
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/dist/components/Accordion/Accordion.d.ts +10 -0
- package/dist/components/Badge/Badge.d.ts +17 -0
- package/dist/components/Button/Button.d.ts +14 -0
- package/dist/components/Checkbox/Checkbox.d.ts +14 -0
- package/dist/components/Dock/Dock.d.ts +6 -1
- package/dist/components/Input/Input.d.ts +9 -1
- package/dist/components/Modal/Modal.d.ts +1 -0
- package/dist/components/Popover/Popover.d.ts +33 -0
- package/dist/components/Sheet/Sheet.d.ts +8 -1
- package/dist/components/SpeedDial/SpeedDial.d.ts +6 -1
- package/dist/components/Switch/Switch.d.ts +7 -0
- package/dist/components/Textarea/Textarea.d.ts +1 -0
- package/dist/components/Toast/Toast.d.ts +8 -0
- package/dist/components/Tooltip/Tooltip.d.ts +26 -1
- package/package.json +1 -1
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Accordion 스타일 variant
|
|
4
|
+
* - `filled`: 채워진 배경
|
|
5
|
+
* - `outlined`: 테두리 스타일
|
|
6
|
+
*/
|
|
2
7
|
export type AccordionVariant = "filled" | "outlined";
|
|
3
8
|
export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
9
|
+
/**
|
|
10
|
+
* Accordion 스타일 variant
|
|
11
|
+
* @default 'filled'
|
|
12
|
+
* @type {'filled' | 'outlined'}
|
|
13
|
+
*/
|
|
4
14
|
variant?: AccordionVariant;
|
|
5
15
|
defaultExpanded?: boolean;
|
|
6
16
|
expanded?: boolean;
|
|
@@ -1,14 +1,31 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Badge 스타일 variant
|
|
4
|
+
* - `primary`: 채워진 배경 (기본값)
|
|
5
|
+
* - `secondary`: 연한 배경
|
|
6
|
+
* - `outlined`: 테두리 스타일
|
|
7
|
+
* - `dot`: 점 + 텍스트
|
|
8
|
+
* - `shimmer`: 반짝이는 효과
|
|
9
|
+
*/
|
|
2
10
|
type BadgeVariant = "primary" | "secondary" | "outlined" | "dot" | "shimmer";
|
|
11
|
+
/**
|
|
12
|
+
* Badge 크기
|
|
13
|
+
* - `large`: 큰 크기
|
|
14
|
+
* - `medium`: 중간 크기 (기본값)
|
|
15
|
+
* - `small`: 작은 크기
|
|
16
|
+
*/
|
|
3
17
|
type BadgeSize = "large" | "medium" | "small";
|
|
4
18
|
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
5
19
|
/**
|
|
6
20
|
* Badge 스타일 variant
|
|
21
|
+
* @default 'primary'
|
|
22
|
+
* @type {'primary' | 'secondary' | 'outlined' | 'dot' | 'shimmer'}
|
|
7
23
|
*/
|
|
8
24
|
variant?: BadgeVariant;
|
|
9
25
|
/**
|
|
10
26
|
* Badge 크기
|
|
11
27
|
* @default 'medium'
|
|
28
|
+
* @type {'large' | 'medium' | 'small'}
|
|
12
29
|
*/
|
|
13
30
|
size?: BadgeSize;
|
|
14
31
|
/**
|
|
@@ -1,15 +1,29 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* 버튼 스타일 variant
|
|
4
|
+
* - `primary`: 채워진 배경 (기본값)
|
|
5
|
+
* - `secondary`: 테두리 스타일
|
|
6
|
+
* - `ghost`: 투명 배경
|
|
7
|
+
*/
|
|
2
8
|
type ButtonVariant = "primary" | "secondary" | "ghost";
|
|
9
|
+
/**
|
|
10
|
+
* 버튼 크기
|
|
11
|
+
* - `large`: 56px (기본값)
|
|
12
|
+
* - `medium`: 48px
|
|
13
|
+
* - `small`: 40px
|
|
14
|
+
*/
|
|
3
15
|
type ButtonSize = "large" | "medium" | "small";
|
|
4
16
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
17
|
/**
|
|
6
18
|
* 버튼 스타일 variant
|
|
7
19
|
* @default 'primary'
|
|
20
|
+
* @type {'primary' | 'secondary' | 'ghost'}
|
|
8
21
|
*/
|
|
9
22
|
variant?: ButtonVariant;
|
|
10
23
|
/**
|
|
11
24
|
* 버튼 크기
|
|
12
25
|
* @default 'large'
|
|
26
|
+
* @type {'large' | 'medium' | 'small'}
|
|
13
27
|
*/
|
|
14
28
|
size?: ButtonSize;
|
|
15
29
|
/**
|
|
@@ -1,15 +1,29 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* 체크박스 스타일 variant
|
|
4
|
+
* - `standard`: 기본 스타일
|
|
5
|
+
* - `rounded`: 둥근 모서리
|
|
6
|
+
* - `square`: 직각 모서리
|
|
7
|
+
*/
|
|
2
8
|
type CheckboxVariant = "standard" | "rounded" | "square";
|
|
9
|
+
/**
|
|
10
|
+
* 체크박스 크기
|
|
11
|
+
* - `large`: 24px (기본값)
|
|
12
|
+
* - `medium`: 20px
|
|
13
|
+
* - `small`: 16px
|
|
14
|
+
*/
|
|
3
15
|
type CheckboxSize = "large" | "medium" | "small";
|
|
4
16
|
export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
|
|
5
17
|
/**
|
|
6
18
|
* 체크박스 스타일 variant
|
|
7
19
|
* @default 'standard'
|
|
20
|
+
* @type {'standard' | 'rounded' | 'square'}
|
|
8
21
|
*/
|
|
9
22
|
variant?: CheckboxVariant;
|
|
10
23
|
/**
|
|
11
24
|
* 체크박스 크기
|
|
12
25
|
* @default 'medium'
|
|
26
|
+
* @type {'large' | 'medium' | 'small'}
|
|
13
27
|
*/
|
|
14
28
|
size?: CheckboxSize;
|
|
15
29
|
/**
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* Dock
|
|
3
|
+
* Dock 위치
|
|
4
|
+
* - `top`: 화면 상단
|
|
5
|
+
* - `bottom`: 화면 하단 (기본값)
|
|
6
|
+
* - `left`: 화면 왼쪽
|
|
7
|
+
* - `right`: 화면 오른쪽
|
|
4
8
|
*/
|
|
5
9
|
export type DockPosition = "top" | "bottom" | "left" | "right";
|
|
6
10
|
/**
|
|
@@ -14,6 +18,7 @@ export interface DockRootProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
14
18
|
/**
|
|
15
19
|
* Dock 위치
|
|
16
20
|
* @default "bottom"
|
|
21
|
+
* @type {'top' | 'bottom' | 'left' | 'right'}
|
|
17
22
|
*/
|
|
18
23
|
position?: DockPosition;
|
|
19
24
|
/**
|
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Input 스타일 variant
|
|
4
|
+
* - `outlined`: 테두리 스타일 (기본값)
|
|
5
|
+
* - `underline`: 밑줄 스타일
|
|
6
|
+
*/
|
|
7
|
+
type InputVariant = "outlined" | "underline";
|
|
2
8
|
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
3
9
|
/**
|
|
4
10
|
* 자동 포커스 여부
|
|
@@ -13,8 +19,9 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
|
|
|
13
19
|
/**
|
|
14
20
|
* Input 스타일 variant
|
|
15
21
|
* @default 'outlined'
|
|
22
|
+
* @type {'outlined' | 'underline'}
|
|
16
23
|
*/
|
|
17
|
-
variant?:
|
|
24
|
+
variant?: InputVariant;
|
|
18
25
|
/**
|
|
19
26
|
* 에러 상태
|
|
20
27
|
* @default false
|
|
@@ -51,3 +58,4 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
|
|
|
51
58
|
label?: string;
|
|
52
59
|
}
|
|
53
60
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
61
|
+
export {};
|
|
@@ -1,11 +1,44 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Popover 위치
|
|
4
|
+
* - `top`: 위쪽
|
|
5
|
+
* - `bottom`: 아래쪽
|
|
6
|
+
* - `left`: 왼쪽
|
|
7
|
+
* - `right`: 오른쪽
|
|
8
|
+
*/
|
|
2
9
|
type Placement = "top" | "bottom" | "left" | "right";
|
|
10
|
+
/**
|
|
11
|
+
* Popover 정렬 방식
|
|
12
|
+
* - `start`: 시작 (top/bottom일 때 왼쪽, left/right일 때 위)
|
|
13
|
+
* - `center`: 중앙
|
|
14
|
+
* - `end`: 끝 (top/bottom일 때 오른쪽, left/right일 때 아래)
|
|
15
|
+
*/
|
|
3
16
|
type Align = "start" | "center" | "end";
|
|
17
|
+
/**
|
|
18
|
+
* Popover 스타일 variant
|
|
19
|
+
* - `filled`: 채워진 배경 (기본값)
|
|
20
|
+
* - `outlined`: 테두리 스타일
|
|
21
|
+
*/
|
|
4
22
|
type PopoverVariant = "filled" | "outlined";
|
|
5
23
|
interface PopoverRootProps {
|
|
6
24
|
children: React.ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* Popover 위치
|
|
27
|
+
* @default 'bottom'
|
|
28
|
+
* @type {'top' | 'bottom' | 'left' | 'right'}
|
|
29
|
+
*/
|
|
7
30
|
position?: Placement;
|
|
31
|
+
/**
|
|
32
|
+
* Popover 정렬 방식
|
|
33
|
+
* @default 'center'
|
|
34
|
+
* @type {'start' | 'center' | 'end'}
|
|
35
|
+
*/
|
|
8
36
|
align?: Align;
|
|
37
|
+
/**
|
|
38
|
+
* Popover 스타일 variant
|
|
39
|
+
* @default 'filled'
|
|
40
|
+
* @type {'filled' | 'outlined'}
|
|
41
|
+
*/
|
|
9
42
|
variant?: PopoverVariant;
|
|
10
43
|
showArrow?: boolean;
|
|
11
44
|
zIndex?: number;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* Sheet 위치
|
|
3
|
+
* Sheet 위치
|
|
4
|
+
* - `left`: 왼쪽에서 슬라이드
|
|
5
|
+
* - `right`: 오른쪽에서 슬라이드 (기본값)
|
|
4
6
|
*/
|
|
5
7
|
export type SheetPosition = "left" | "right";
|
|
6
8
|
/**
|
|
@@ -12,6 +14,11 @@ export type CloseOnBackdropOptions = boolean | {
|
|
|
12
14
|
};
|
|
13
15
|
interface SheetRootProps {
|
|
14
16
|
children: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Sheet 위치
|
|
19
|
+
* @default 'right'
|
|
20
|
+
* @type {'left' | 'right'}
|
|
21
|
+
*/
|
|
15
22
|
position?: SheetPosition;
|
|
16
23
|
closeOnBackdrop?: CloseOnBackdropOptions;
|
|
17
24
|
maxWidth?: string;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* SpeedDial 방향
|
|
3
|
+
* SpeedDial Actions 방향
|
|
4
|
+
* - `up`: 위쪽으로 펼쳐짐 (기본값)
|
|
5
|
+
* - `down`: 아래쪽으로 펼쳐짐
|
|
6
|
+
* - `left`: 왼쪽으로 펼쳐짐
|
|
7
|
+
* - `right`: 오른쪽으로 펼쳐짐
|
|
4
8
|
*/
|
|
5
9
|
export type SpeedDialDirection = "up" | "down" | "left" | "right";
|
|
6
10
|
/**
|
|
@@ -18,6 +22,7 @@ export interface SpeedDialRootProps {
|
|
|
18
22
|
/**
|
|
19
23
|
* Actions가 나타나는 방향
|
|
20
24
|
* @default "up"
|
|
25
|
+
* @type {'up' | 'down' | 'left' | 'right'}
|
|
21
26
|
*/
|
|
22
27
|
direction?: SpeedDialDirection;
|
|
23
28
|
/**
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* 스위치 애니메이션 variant
|
|
4
|
+
* - `smooth`: 부드러운 전환 (기본값)
|
|
5
|
+
* - `elastic`: 탄성 효과
|
|
6
|
+
* - `bounce`: 바운스 효과
|
|
7
|
+
*/
|
|
2
8
|
type SwitchVariant = "smooth" | "elastic" | "bounce";
|
|
3
9
|
export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
4
10
|
/**
|
|
5
11
|
* 스위치 모양
|
|
6
12
|
* @default 'smooth'
|
|
13
|
+
* @type {'smooth' | 'elastic' | 'bounce'}
|
|
7
14
|
*/
|
|
8
15
|
variant?: SwitchVariant;
|
|
9
16
|
/**
|
|
@@ -44,6 +44,7 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
|
|
|
44
44
|
/**
|
|
45
45
|
* Resize 제어 (autoSize 활성화 시 무시됨)
|
|
46
46
|
* @default 'none'
|
|
47
|
+
* @type {'none' | 'vertical' | 'horizontal' | 'both'}
|
|
47
48
|
*/
|
|
48
49
|
resize?: "none" | "vertical" | "horizontal" | "both";
|
|
49
50
|
/**
|
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Toast 스타일 variant
|
|
4
|
+
* - `default`: 기본 스타일
|
|
5
|
+
* - `success`: 성공 메시지
|
|
6
|
+
* - `error`: 에러 메시지
|
|
7
|
+
* - `warning`: 경고 메시지
|
|
8
|
+
* - `info`: 정보 메시지
|
|
9
|
+
*/
|
|
2
10
|
export type ToastVariant = "default" | "success" | "error" | "warning" | "info";
|
|
3
11
|
export interface ToastOptions {
|
|
4
12
|
duration?: number;
|
|
@@ -1,20 +1,45 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* 툴팁 스타일 variant
|
|
4
|
+
* - `filled`: 채워진 배경 (기본값)
|
|
5
|
+
* - `outlined`: 테두리 스타일
|
|
6
|
+
*/
|
|
2
7
|
type TooltipVariant = "filled" | "outlined";
|
|
8
|
+
/**
|
|
9
|
+
* 툴팁 위치
|
|
10
|
+
* - `top`: 위쪽
|
|
11
|
+
* - `bottom`: 아래쪽
|
|
12
|
+
* - `left`: 왼쪽
|
|
13
|
+
* - `right`: 오른쪽
|
|
14
|
+
*/
|
|
3
15
|
type TooltipPosition = "top" | "bottom" | "left" | "right";
|
|
16
|
+
/**
|
|
17
|
+
* 툴팁 정렬 방식
|
|
18
|
+
* - `start`: 시작 (top/bottom일 때 왼쪽, left/right일 때 위)
|
|
19
|
+
* - `center`: 중앙
|
|
20
|
+
* - `end`: 끝 (top/bottom일 때 오른쪽, left/right일 때 아래)
|
|
21
|
+
*/
|
|
4
22
|
type TooltipAlign = "start" | "center" | "end";
|
|
5
23
|
interface TooltipRootProps {
|
|
6
24
|
children: React.ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* 툴팁 위치
|
|
27
|
+
* @default 'top'
|
|
28
|
+
* @type {'top' | 'bottom' | 'left' | 'right'}
|
|
29
|
+
*/
|
|
7
30
|
position?: TooltipPosition;
|
|
8
31
|
/**
|
|
9
32
|
* 툴팁 정렬 방식
|
|
10
33
|
* - top/bottom일 때: start(왼쪽), center(중앙), end(오른쪽)
|
|
11
34
|
* - left/right일 때: start(위), center(중앙), end(아래)
|
|
12
35
|
* @default 'center'
|
|
36
|
+
* @type {'start' | 'center' | 'end'}
|
|
13
37
|
*/
|
|
14
38
|
align?: TooltipAlign;
|
|
15
39
|
/**
|
|
16
40
|
* 툴팁 스타일 variant
|
|
17
|
-
* @default '
|
|
41
|
+
* @default 'filled'
|
|
42
|
+
* @type {'filled' | 'outlined'}
|
|
18
43
|
*/
|
|
19
44
|
variant?: TooltipVariant;
|
|
20
45
|
/**
|