motile-ui 0.9.4 → 0.9.6

package/README.md

@@ -157,13 +157,13 @@ Motile UI는 CSS 변수를 통해 전역 테마를 쉽게 커스터마이징할
 색상 적용 우선순위는 다음과 같습니다:
 
 ```
-개별 컴포넌트 색상 > 컴포넌트 타입 전역 색상 > 전역 테마 색상 > 기본 색상
+color props > 컴포넌트 타입 전역 색상 > 전역 테마 색상 > 기본 색상
 ```
 
 예시:
 
 ```
---motile-btn-color > --motile-ui-btn > --motile-theme > #3b82f6 (기본값)
+color props > --motile-ui-btn > --motile-theme > #3b82f6 (기본값)
 ```
 
 ---
@@ -337,13 +337,13 @@ Apply different colors to each component instance:
 Color application priority:
 
 ```
-Individual Component Color > Component Type Global Color > Global Theme Color > Default Color
+color props > Component Type Global Color > Global Theme Color > Default Color
 ```
 
 Example:
 
 ```
---motile-btn-color > --motile-ui-btn > --motile-theme > #3b82f6 (default)
+color props > --motile-ui-btn > --motile-theme > #3b82f6 (default)
 ```
 
 ---

package/dist/components/Accordion/Accordion.d.ts

@@ -1,6 +1,16 @@
 import { default as React } from 'react';
+/**
+ * Accordion 스타일 variant
+ * - `filled`: 채워진 배경
+ * - `outlined`: 테두리 스타일
+ */
 export type AccordionVariant = "filled" | "outlined";
 export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Accordion 스타일 variant
+     * @default 'filled'
+     * @type {'filled' | 'outlined'}
+     */
     variant?: AccordionVariant;
     defaultExpanded?: boolean;
     expanded?: boolean;

package/dist/components/Badge/Badge.d.ts

@@ -1,14 +1,31 @@
 import { default as React } from 'react';
+/**
+ * Badge 스타일 variant
+ * - `primary`: 채워진 배경 (기본값)
+ * - `secondary`: 연한 배경
+ * - `outlined`: 테두리 스타일
+ * - `dot`: 점 + 텍스트
+ * - `shimmer`: 반짝이는 효과
+ */
 type BadgeVariant = "primary" | "secondary" | "outlined" | "dot" | "shimmer";
+/**
+ * Badge 크기
+ * - `large`: 큰 크기
+ * - `medium`: 중간 크기 (기본값)
+ * - `small`: 작은 크기
+ */
 type BadgeSize = "large" | "medium" | "small";
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
      * Badge 스타일 variant
+     * @default 'primary'
+     * @type {'primary' | 'secondary' | 'outlined' | 'dot' | 'shimmer'}
      */
     variant?: BadgeVariant;
     /**
      * Badge 크기
      * @default 'medium'
+     * @type {'large' | 'medium' | 'small'}
      */
     size?: BadgeSize;
     /**

package/dist/components/Button/Button.d.ts

@@ -1,15 +1,29 @@
 import { default as React } from 'react';
+/**
+ * 버튼 스타일 variant
+ * - `primary`: 채워진 배경 (기본값)
+ * - `secondary`: 테두리 스타일
+ * - `ghost`: 투명 배경
+ */
 type ButtonVariant = "primary" | "secondary" | "ghost";
+/**
+ * 버튼 크기
+ * - `large`: 56px (기본값)
+ * - `medium`: 48px
+ * - `small`: 40px
+ */
 type ButtonSize = "large" | "medium" | "small";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * 버튼 스타일 variant
      * @default 'primary'
+     * @type {'primary' | 'secondary' | 'ghost'}
      */
     variant?: ButtonVariant;
     /**
      * 버튼 크기
      * @default 'large'
+     * @type {'large' | 'medium' | 'small'}
      */
     size?: ButtonSize;
     /**

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,15 +1,29 @@
 import { default as React } from 'react';
+/**
+ * 체크박스 스타일 variant
+ * - `standard`: 기본 스타일
+ * - `rounded`: 둥근 모서리
+ * - `square`: 직각 모서리
+ */
 type CheckboxVariant = "standard" | "rounded" | "square";
+/**
+ * 체크박스 크기
+ * - `large`: 24px (기본값)
+ * - `medium`: 20px
+ * - `small`: 16px
+ */
 type CheckboxSize = "large" | "medium" | "small";
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
     /**
      * 체크박스 스타일 variant
      * @default 'standard'
+     * @type {'standard' | 'rounded' | 'square'}
      */
     variant?: CheckboxVariant;
     /**
      * 체크박스 크기
      * @default 'medium'
+     * @type {'large' | 'medium' | 'small'}
      */
     size?: CheckboxSize;
     /**

package/dist/components/Dock/Dock.d.ts

@@ -1,6 +1,10 @@
 import { default as React } from 'react';
 /**
- * Dock Position
+ * Dock 위치
+ * - `top`: 화면 상단
+ * - `bottom`: 화면 하단 (기본값)
+ * - `left`: 화면 왼쪽
+ * - `right`: 화면 오른쪽
  */
 export type DockPosition = "top" | "bottom" | "left" | "right";
 /**
@@ -14,6 +18,7 @@ export interface DockRootProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Dock 위치
      * @default "bottom"
+     * @type {'top' | 'bottom' | 'left' | 'right'}
      */
     position?: DockPosition;
     /**

package/dist/components/Input/Input.d.ts

@@ -1,4 +1,10 @@
 import { default as React } from 'react';
+/**
+ * Input 스타일 variant
+ * - `outlined`: 테두리 스타일 (기본값)
+ * - `underline`: 밑줄 스타일
+ */
+type InputVariant = "outlined" | "underline";
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /**
      * 자동 포커스 여부
@@ -13,8 +19,9 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     /**
      * Input 스타일 variant
      * @default 'outlined'
+     * @type {'outlined' | 'underline'}
      */
-    variant?: "outlined" | "underline";
+    variant?: InputVariant;
     /**
      * 에러 상태
      * @default false
@@ -51,3 +58,4 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     label?: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/Modal/Modal.d.ts

@@ -51,6 +51,7 @@ interface ModalOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
      * - `bottomSheet`: 화면 하단에서 올라오는 drawer 스타일 (모바일 친화적)
      *
      * @default "scale"
+     * @type {'scale' | 'slideDown' | 'slideUp' | 'bottomSheet'}
      */
     variant?: ModalVariant;
     /**

package/dist/components/Popover/Popover.d.ts

@@ -1,11 +1,44 @@
 import { default as React } from 'react';
+/**
+ * Popover 위치
+ * - `top`: 위쪽
+ * - `bottom`: 아래쪽
+ * - `left`: 왼쪽
+ * - `right`: 오른쪽
+ */
 type Placement = "top" | "bottom" | "left" | "right";
+/**
+ * Popover 정렬 방식
+ * - `start`: 시작 (top/bottom일 때 왼쪽, left/right일 때 위)
+ * - `center`: 중앙
+ * - `end`: 끝 (top/bottom일 때 오른쪽, left/right일 때 아래)
+ */
 type Align = "start" | "center" | "end";
+/**
+ * Popover 스타일 variant
+ * - `filled`: 채워진 배경 (기본값)
+ * - `outlined`: 테두리 스타일
+ */
 type PopoverVariant = "filled" | "outlined";
 interface PopoverRootProps {
     children: React.ReactNode;
+    /**
+     * Popover 위치
+     * @default 'bottom'
+     * @type {'top' | 'bottom' | 'left' | 'right'}
+     */
     position?: Placement;
+    /**
+     * Popover 정렬 방식
+     * @default 'center'
+     * @type {'start' | 'center' | 'end'}
+     */
     align?: Align;
+    /**
+     * Popover 스타일 variant
+     * @default 'filled'
+     * @type {'filled' | 'outlined'}
+     */
     variant?: PopoverVariant;
     showArrow?: boolean;
     zIndex?: number;

package/dist/components/Sheet/Sheet.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
 /**
- * Sheet 위치 타입
+ * Sheet 위치
+ * - `left`: 왼쪽에서 슬라이드
+ * - `right`: 오른쪽에서 슬라이드 (기본값)
  */
 export type SheetPosition = "left" | "right";
 /**
@@ -12,6 +14,11 @@ export type CloseOnBackdropOptions = boolean | {
 };
 interface SheetRootProps {
     children: React.ReactNode;
+    /**
+     * Sheet 위치
+     * @default 'right'
+     * @type {'left' | 'right'}
+     */
     position?: SheetPosition;
     closeOnBackdrop?: CloseOnBackdropOptions;
     maxWidth?: string;
@@ -58,7 +65,7 @@ interface SheetBodyProps {
 }
 declare function SheetBody({ children, className }: SheetBodyProps): import("react/jsx-runtime").JSX.Element;
 interface SheetCloseProps {
-    children: React.ReactElement;
+    children?: React.ReactNode;
     asChild?: boolean;
 }
 declare function SheetClose({ children, asChild }: SheetCloseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SpeedDial/SpeedDial.d.ts

@@ -1,6 +1,10 @@
 import { default as React } from 'react';
 /**
- * SpeedDial 방향
+ * SpeedDial Actions 방향
+ * - `up`: 위쪽으로 펼쳐짐 (기본값)
+ * - `down`: 아래쪽으로 펼쳐짐
+ * - `left`: 왼쪽으로 펼쳐짐
+ * - `right`: 오른쪽으로 펼쳐짐
  */
 export type SpeedDialDirection = "up" | "down" | "left" | "right";
 /**
@@ -18,6 +22,7 @@ export interface SpeedDialRootProps {
     /**
      * Actions가 나타나는 방향
      * @default "up"
+     * @type {'up' | 'down' | 'left' | 'right'}
      */
     direction?: SpeedDialDirection;
     /**

package/dist/components/Switch/Switch.d.ts

@@ -1,9 +1,16 @@
 import { default as React } from 'react';
+/**
+ * 스위치 애니메이션 variant
+ * - `smooth`: 부드러운 전환 (기본값)
+ * - `elastic`: 탄성 효과
+ * - `bounce`: 바운스 효과
+ */
 type SwitchVariant = "smooth" | "elastic" | "bounce";
 export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     /**
      * 스위치 모양
      * @default 'smooth'
+     * @type {'smooth' | 'elastic' | 'bounce'}
      */
     variant?: SwitchVariant;
     /**

package/dist/components/Textarea/Textarea.d.ts

@@ -44,6 +44,7 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     /**
      * Resize 제어 (autoSize 활성화 시 무시됨)
      * @default 'none'
+     * @type {'none' | 'vertical' | 'horizontal' | 'both'}
      */
     resize?: "none" | "vertical" | "horizontal" | "both";
     /**

package/dist/components/Toast/Toast.d.ts

@@ -1,4 +1,12 @@
 import { default as React } from 'react';
+/**
+ * Toast 스타일 variant
+ * - `default`: 기본 스타일
+ * - `success`: 성공 메시지
+ * - `error`: 에러 메시지
+ * - `warning`: 경고 메시지
+ * - `info`: 정보 메시지
+ */
 export type ToastVariant = "default" | "success" | "error" | "warning" | "info";
 export interface ToastOptions {
     duration?: number;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,20 +1,45 @@
 import { default as React } from 'react';
+/**
+ * 툴팁 스타일 variant
+ * - `filled`: 채워진 배경 (기본값)
+ * - `outlined`: 테두리 스타일
+ */
 type TooltipVariant = "filled" | "outlined";
+/**
+ * 툴팁 위치
+ * - `top`: 위쪽
+ * - `bottom`: 아래쪽
+ * - `left`: 왼쪽
+ * - `right`: 오른쪽
+ */
 type TooltipPosition = "top" | "bottom" | "left" | "right";
+/**
+ * 툴팁 정렬 방식
+ * - `start`: 시작 (top/bottom일 때 왼쪽, left/right일 때 위)
+ * - `center`: 중앙
+ * - `end`: 끝 (top/bottom일 때 오른쪽, left/right일 때 아래)
+ */
 type TooltipAlign = "start" | "center" | "end";
 interface TooltipRootProps {
     children: React.ReactNode;
+    /**
+     * 툴팁 위치
+     * @default 'top'
+     * @type {'top' | 'bottom' | 'left' | 'right'}
+     */
     position?: TooltipPosition;
     /**
      * 툴팁 정렬 방식
      * - top/bottom일 때: start(왼쪽), center(중앙), end(오른쪽)
      * - left/right일 때: start(위), center(중앙), end(아래)
      * @default 'center'
+     * @type {'start' | 'center' | 'end'}
      */
     align?: TooltipAlign;
     /**
      * 툴팁 스타일 variant
-     * @default 'dark'
+     * @default 'filled'
+     * @type {'filled' | 'outlined'}
      */
     variant?: TooltipVariant;
     /**