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.
@@ -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 Position
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?: "outlined" | "underline";
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 {};
@@ -51,6 +51,7 @@ interface ModalOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
51
51
  * - `bottomSheet`: 화면 하단에서 올라오는 drawer 스타일 (모바일 친화적)
52
52
  *
53
53
  * @default "scale"
54
+ * @type {'scale' | 'slideDown' | 'slideUp' | 'bottomSheet'}
54
55
  */
55
56
  variant?: ModalVariant;
56
57
  /**
@@ -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 'dark'
41
+ * @default 'filled'
42
+ * @type {'filled' | 'outlined'}
18
43
  */
19
44
  variant?: TooltipVariant;
20
45
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "motile-ui",
3
- "version": "0.9.4",
3
+ "version": "0.9.5",
4
4
  "type": "module",
5
5
  "description": "A modern React component library for webview applications",
6
6
  "main": "./dist/motile-ui.umd.js",