motile-ui 0.9.3 → 0.9.5

package/README.md

@@ -111,9 +111,7 @@ Motile UI는 CSS 변수를 통해 전역 테마를 쉽게 커스터마이징할
 ```css
 :root {
   /* 버튼 */
-  --motile-ui-btn: #10b981; /* Primary 버튼 색상 */
-  --motile-ui-btn-secondary: #6b7280; /* Secondary 버튼 색상 */
-  --motile-ui-btn-default: #3b82f6; /* Default 버튼 색상 */
+  --motile-ui-btn: #10b981; /* 모든 버튼 variant 색상 */
 
   /* 입력 필드 */
   --motile-ui-input: #8b5cf6; /* Input 포커스 색상 */
@@ -137,19 +135,19 @@ Motile UI는 CSS 변수를 통해 전역 테마를 쉽게 커스터마이징할
 
 ```tsx
 <Button
-  style={{ '--motile-btn-color': '#ef4444' }}
+  color="#ef4444"
   variant="primary"
 >
   빨간 버튼
 </Button>
 
 <Input
-  style={{ '--motile-input-color': '#8b5cf6' }}
+  color="#8b5cf6"
   label="보라색 입력 필드"
 />
 
 <Checkbox
-  style={{ '--motile-checkbox-color': '#f59e0b' }}
+  color="#f59e0b"
   label="주황색 체크박스"
 />
 ```
@@ -293,9 +291,7 @@ Set global colors for specific component types:
 ```css
 :root {
   /* Buttons */
-  --motile-ui-btn: #10b981; /* Primary button color */
-  --motile-ui-btn-secondary: #6b7280; /* Secondary button color */
-  --motile-ui-btn-default: #3b82f6; /* Default button color */
+  --motile-ui-btn: #10b981; /* All button variants color */
 
   /* Input Fields */
   --motile-ui-input: #8b5cf6; /* Input focus color */
@@ -319,19 +315,19 @@ Apply different colors to each component instance:
 
 ```tsx
 <Button
-  style={{ '--motile-btn-color': '#ef4444' }}
+  color="#ef4444"
   variant="primary"
 >
   Red Button
 </Button>
 
 <Input
-  style={{ '--motile-input-color': '#8b5cf6' }}
+  color="#8b5cf6"
   label="Purple Input Field"
 />
 
 <Checkbox
-  style={{ '--motile-checkbox-color': '#f59e0b' }}
+  color="#f59e0b"
   label="Orange Checkbox"
 />
 ```

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

@@ -1,6 +1,16 @@
 import { default as React } from 'react';
-export type AccordionVariant = "default" | "outlined";
+/**
+ * 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';
-type ButtonVariant = "primary" | "secondary" | "default";
+/**
+ * 버튼 스타일 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';
-type CheckboxVariant = "default" | "rounded" | "square";
+/**
+ * 체크박스 스타일 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 'default'
+     * @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> {
     /**
      * 자동 포커스 여부
@@ -12,9 +18,10 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     autoSelect?: boolean;
     /**
      * Input 스타일 variant
-     * @default 'default'
+     * @default 'outlined'
+     * @type {'outlined' | 'underline'}
      */
-    variant?: "default" | "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;
     /**
@@ -123,7 +124,7 @@ interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
 }
 interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
 }
-interface ModalDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 }
@@ -133,7 +134,7 @@ export declare const ModalRoot: React.FC<ModalRootProps>;
 export declare const ModalOverlay: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
 export declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
 export declare const ModalTitle: React.ForwardRefExoticComponent<ModalTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-export declare const ModalDescription: React.ForwardRefExoticComponent<ModalDescriptionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
 export declare const ModalClose: React.ForwardRefExoticComponent<ModalCloseProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
 export declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
@@ -142,9 +143,9 @@ export declare const Modal: {
     Overlay: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
     Title: React.ForwardRefExoticComponent<ModalTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<ModalDescriptionProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
     Close: React.ForwardRefExoticComponent<ModalCloseProps & React.RefAttributes<HTMLButtonElement>>;
     Footer: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
     Header: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
 };
-export type { ModalVariant, ModalRootProps, ModalOverlayProps, ModalContentProps, ModalCloseProps, ModalTitleProps, ModalDescriptionProps, ModalHeaderProps, ModalFooterProps, };
+export type { ModalVariant, ModalRootProps, ModalOverlayProps, ModalContentProps, ModalCloseProps, ModalTitleProps, ModalBodyProps, ModalHeaderProps, ModalFooterProps, };

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

@@ -1,2 +1,2 @@
 export { Modal } from './Modal';
-export type { ModalVariant, CloseOnBackdropOptions, ModalRootProps, ModalOverlayProps, ModalContentProps, ModalCloseProps, ModalTitleProps, ModalDescriptionProps, ModalHeaderProps, ModalFooterProps, } from './Modal';
+export type { ModalVariant, CloseOnBackdropOptions, ModalRootProps, ModalOverlayProps, ModalContentProps, ModalCloseProps, ModalTitleProps, ModalBodyProps, ModalHeaderProps, ModalFooterProps, } from './Modal';

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";
-type PopoverVariant = "default" | "outlined";
+/**
+ * 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;

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';
-type SwitchVariant = "default" | "elastic" | "bounce";
+/**
+ * 스위치 애니메이션 variant
+ * - `smooth`: 부드러운 전환 (기본값)
+ * - `elastic`: 탄성 효과
+ * - `bounce`: 바운스 효과
+ */
+type SwitchVariant = "smooth" | "elastic" | "bounce";
 export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     /**
      * 스위치 모양
-     * @default 'default'
+     * @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';
-type TooltipVariant = "default" | "outlined";
+/**
+ * 툴팁 스타일 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 'default'
+     * @default 'filled'
+     * @type {'filled' | 'outlined'}
      */
     variant?: TooltipVariant;
     /**