@bigtablet/design-system 1.23.0 → 1.24.1

package/dist/index.d.ts

@@ -1,96 +1,94 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
-declare const colors: {
-    readonly primary: "#000000";
-    readonly primaryHover: "#333333";
-    readonly background: "#ffffff";
-    readonly backgroundSecondary: "#fafafa";
-    readonly backgroundNeutral: "#f3f3f3";
-    readonly backgroundMuted: "#f0f0f0";
-    readonly textPrimary: "#1a1a1a";
-    readonly textSecondary: "#666666";
-    readonly textTertiary: "#999999";
-    readonly border: "#e5e5e5";
-    readonly borderLight: "rgba(0, 0, 0, 0.08)";
-    readonly success: "#10b981";
-    readonly error: "#ef4444";
-    readonly warning: "#f59e0b";
-    readonly info: "#3b82f6";
-    readonly overlay: "rgba(0, 0, 0, 0.5)";
-    readonly hoverSubtle: "rgba(0, 0, 0, 0.03)";
-    readonly hoverLight: "rgba(0, 0, 0, 0.05)";
-    readonly textStrong: "#1F2937";
-    readonly textNormal: "#3B3B3B";
-    readonly textSubtle: "#6B7280";
-    readonly textDisabled: "#9CA3AF";
-    readonly textInverse: "#FFFFFF";
+declare const a11y: {
+    readonly focusRing: "0 0 0 3px rgba(0, 0, 0, 0.15)";
+    readonly focusRingError: "0 0 0 3px rgba(239, 68, 68, 0.15)";
+    readonly focusRingSuccess: "0 0 0 3px rgba(16, 185, 129, 0.15)";
+    readonly tapMinSize: "44px";
 };
 
-declare const spacing: {
-    readonly xs: "0.25rem";
-    readonly sm: "0.5rem";
-    readonly md: "0.75rem";
-    readonly lg: "1rem";
-    readonly xl: "1.25rem";
-    readonly "2xl": "1.5rem";
-    readonly "3xl": "2rem";
-    readonly "4xl": "2.5rem";
-    readonly "5xl": "3rem";
+declare const baseBorderWidth: {
+    readonly "0": "0px";
+    readonly "1": "1px";
+    readonly "2": "2px";
+};
+declare const borderWidth: {
+    readonly none: "0px";
+    readonly standard: "1px";
+    readonly indicator: "2px";
 };
 
-declare const typography: {
-    readonly fontFamily: {
-        readonly primary: "'Pretendard', sans-serif";
+declare const breakpoints: {
+    readonly compact: 0;
+    readonly medium: 600;
+    readonly expanded: 840;
+    readonly large: 1200;
+};
+
+declare const baseColors: {
+    readonly brandPrimary: "#121212";
+    readonly blue600: "#1A73E8";
+    readonly neutral0: "#FFFFFF";
+    readonly neutral50: "#F4F4F4";
+    readonly neutral200: "#E5E5E5";
+    readonly neutral300: "#999999";
+    readonly neutral400: "#B3B3B3";
+    readonly neutral500: "#888888";
+    readonly neutral700: "#666666";
+    readonly neutral900: "#121212";
+    readonly statusError: "#EF4444";
+    readonly statusSuccess: "#10B981";
+    readonly statusWarning: "#F59E0B";
+    readonly statusInfo: "#3B82F6";
+    readonly alphaBlack5: "rgba(0, 0, 0, 0.05)";
+    readonly alphaBlack8: "rgba(0, 0, 0, 0.08)";
+    readonly alphaBlack12: "rgba(26, 26, 26, 0.12)";
+    readonly alphaBlack38: "rgba(26, 26, 26, 0.38)";
+    readonly alphaBlack50: "rgba(0, 0, 0, 0.50)";
+    readonly alphaWhite5: "rgba(255, 255, 255, 0.05)";
+    readonly alphaWhite8: "rgba(255, 255, 255, 0.08)";
+    readonly alphaWhite12: "rgba(255, 255, 255, 0.12)";
+};
+declare const colors: {
+    readonly brand: {
+        readonly primary: "#121212";
+        readonly onPrimary: "#FFFFFF";
     };
-    readonly fontSize: {
-        readonly xs: "0.75rem";
-        readonly sm: "0.875rem";
-        readonly base: "0.9375rem";
-        readonly md: "1rem";
-        readonly lg: "1.125rem";
-        readonly xl: "1.25rem";
-        readonly "2xl": "1.5rem";
-        readonly "3xl": "2rem";
-        readonly "4xl": "2.5rem";
+    readonly text: {
+        readonly heading: "#121212";
+        readonly body: "#666666";
+        readonly caption: "#888888";
+        readonly brand: "#121212";
+        readonly inverse: "#FFFFFF";
+        readonly disabled: "rgba(26, 26, 26, 0.38)";
     };
-    readonly fontWeight: {
-        readonly thin: 100;
-        readonly extralight: 200;
-        readonly light: 300;
-        readonly regular: 400;
-        readonly medium: 500;
-        readonly semibold: 600;
-        readonly bold: 700;
-        readonly extrabold: 800;
-        readonly black: 900;
+    readonly bg: {
+        readonly solid: "#FFFFFF";
+        readonly solidDim: "#F4F4F4";
+        readonly additive: "rgba(0, 0, 0, 0.05)";
+        readonly disabled: "rgba(26, 26, 26, 0.12)";
+        readonly overlay: "rgba(0, 0, 0, 0.50)";
     };
-    readonly lineHeight: {
-        readonly tight: 1.25;
-        readonly snug: 1.3;
-        readonly normal: 1.5;
-        readonly relaxed: 1.75;
+    readonly state: {
+        readonly hoverOnLight: "rgba(0, 0, 0, 0.05)";
+        readonly pressedOnLight: "rgba(26, 26, 26, 0.12)";
+        readonly hoverOnDark: "rgba(255, 255, 255, 0.05)";
+        readonly pressedOnDark: "rgba(255, 255, 255, 0.12)";
     };
-    readonly letterSpacing: {
-        readonly tight: "-0.02em";
-        readonly normal: "0";
-        readonly wide: "0.02em";
+    readonly border: {
+        readonly default: "#E5E5E5";
+        readonly hover: "#B3B3B3";
+        readonly subtle: "rgba(0, 0, 0, 0.08)";
+        readonly focus: "#121212";
+        readonly disabled: "#F2F2F2";
+    };
+    readonly status: {
+        readonly error: "#EF4444";
+        readonly success: "#10B981";
+        readonly warning: "#F59E0B";
+        readonly info: "#3B82F6";
     };
-};
-
-declare const radius: {
-    readonly sm: "6px";
-    readonly md: "8px";
-    readonly lg: "12px";
-    readonly xl: "16px";
-    readonly full: "9999px";
-};
-
-declare const shadows: {
-    readonly sm: "0 2px 4px rgba(0, 0, 0, 0.04)";
-    readonly md: "0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04)";
-    readonly lg: "0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06)";
-    readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)";
 };
 
 declare const motion: {
@@ -107,24 +105,55 @@ declare const motion: {
     };
 };
 
+declare const opacity: {
+    readonly "0": 0;
+    readonly "5": 0.05;
+    readonly "8": 0.08;
+    readonly "12": 0.12;
+    readonly "16": 0.16;
+    readonly "38": 0.38;
+    readonly "50": 0.5;
+    readonly "80": 0.8;
+    readonly "90": 0.9;
+    readonly "100": 1;
+};
+
+declare const radius: {
+    readonly none: "0px";
+    readonly xs: "4px";
+    readonly sm: "6px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly full: "9999px";
+};
+
+declare const shadows: {
+    readonly level1: "0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12)";
+    readonly level2: "0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12)";
+    readonly level3: "0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12)";
+    readonly level4: "0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12)";
+    readonly level5: "0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)";
+};
+
 declare const skeleton: {
     readonly color: {
-        readonly base: "#f3f3f3";
-        readonly wave: "#f0f0f0";
-        readonly highlight: "#fafafa";
+        readonly base: "#F4F4F4";
+        readonly wave: "#E5E5E5";
+        readonly highlight: "#FFFFFF";
     };
-    readonly gradient: "linear-gradient(90deg, #f3f3f3 25%, #fafafa 37%, #f0f0f0 63%)";
+    readonly gradient: "linear-gradient(90deg, #F4F4F4 25%, #FFFFFF 37%, #E5E5E5 63%)";
     readonly radius: {
         readonly sm: "6px";
         readonly md: "8px";
         readonly lg: "12px";
     };
     readonly height: {
-        readonly xs: "0.25rem";
-        readonly sm: "0.5rem";
-        readonly md: "0.75rem";
-        readonly lg: "1rem";
-        readonly xl: "1.25rem";
+        readonly xs: "4px";
+        readonly sm: "8px";
+        readonly md: "12px";
+        readonly lg: "16px";
+        readonly xl: "20px";
     };
     readonly animation: {
         readonly duration: "1.4s";
@@ -132,24 +161,265 @@ declare const skeleton: {
     };
 };
 
-declare const breakpoints: {
-    readonly mobile: 0;
-    readonly tablet: 768;
-    readonly laptop: 1024;
-    readonly desktop: 1440;
+declare const spacing: {
+    readonly "0": "0px";
+    readonly "1": "1px";
+    readonly "2": "2px";
+    readonly "3": "3px";
+    readonly "4": "4px";
+    readonly "6": "6px";
+    readonly "8": "8px";
+    readonly "12": "12px";
+    readonly "16": "16px";
+    readonly "20": "20px";
+    readonly "24": "24px";
+    readonly "32": "32px";
+    readonly "40": "40px";
+    readonly "48": "48px";
 };
 
-declare const zIndex: {
-    readonly loading: 9999;
-    readonly modal: 10000;
-    readonly toast: 10001;
+declare const baseTypography: {
+    readonly fontFamily: {
+        readonly primary: "Pretendard";
+    };
+    readonly fontSize: {
+        readonly "12": "12px";
+        readonly "13": "13px";
+        readonly "14": "14px";
+        readonly "15": "15px";
+        readonly "16": "16px";
+        readonly "18": "18px";
+        readonly "20": "20px";
+        readonly "24": "24px";
+        readonly "28": "28px";
+        readonly "32": "32px";
+        readonly "40": "40px";
+        readonly "48": "48px";
+    };
+    readonly fontWeight: {
+        readonly regular: "Regular";
+        readonly medium: "Medium";
+    };
+    readonly lineHeight: {
+        readonly "16": "16px";
+        readonly "18": "18px";
+        readonly "20": "20px";
+        readonly "22-5": "22.5px";
+        readonly "24": "24px";
+        readonly "28": "28px";
+        readonly "32": "32px";
+        readonly "36": "36px";
+        readonly "40": "40px";
+        readonly "50": "50px";
+        readonly "60": "60px";
+    };
+    readonly letterSpacing: {
+        readonly normal: "0px";
+    };
+};
+declare const typography: {
+    readonly fontFamily: {
+        readonly primary: "'Pretendard', sans-serif";
+    };
+    readonly display: {
+        readonly large: {
+            readonly fontSize: "48px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "60px";
+            readonly letterSpacing: "0px";
+        };
+        readonly largeMedium: {
+            readonly fontSize: "48px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "60px";
+            readonly letterSpacing: "0px";
+        };
+        readonly medium: {
+            readonly fontSize: "40px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "50px";
+            readonly letterSpacing: "0px";
+        };
+        readonly mediumMedium: {
+            readonly fontSize: "40px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "50px";
+            readonly letterSpacing: "0px";
+        };
+        readonly small: {
+            readonly fontSize: "32px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "40px";
+            readonly letterSpacing: "0px";
+        };
+        readonly smallMedium: {
+            readonly fontSize: "32px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "40px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly heading: {
+        readonly large: {
+            readonly fontSize: "28px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "36px";
+            readonly letterSpacing: "0px";
+        };
+        readonly largeMedium: {
+            readonly fontSize: "28px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "36px";
+            readonly letterSpacing: "0px";
+        };
+        readonly medium: {
+            readonly fontSize: "24px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "32px";
+            readonly letterSpacing: "0px";
+        };
+        readonly mediumMedium: {
+            readonly fontSize: "24px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "32px";
+            readonly letterSpacing: "0px";
+        };
+        readonly small: {
+            readonly fontSize: "20px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "28px";
+            readonly letterSpacing: "0px";
+        };
+        readonly smallMedium: {
+            readonly fontSize: "20px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "28px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly title: {
+        readonly large: {
+            readonly fontSize: "18px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+        readonly largeMedium: {
+            readonly fontSize: "18px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+        readonly medium: {
+            readonly fontSize: "16px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+        readonly mediumMedium: {
+            readonly fontSize: "16px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+        readonly small: {
+            readonly fontSize: "14px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "20px";
+            readonly letterSpacing: "0px";
+        };
+        readonly smallMedium: {
+            readonly fontSize: "14px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "20px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly body: {
+        readonly large: {
+            readonly fontSize: "16px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+        readonly largeMedium: {
+            readonly fontSize: "16px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+        readonly medium: {
+            readonly fontSize: "15px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "22.5px";
+            readonly letterSpacing: "0px";
+        };
+        readonly mediumMedium: {
+            readonly fontSize: "15px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "22.5px";
+            readonly letterSpacing: "0px";
+        };
+        readonly small: {
+            readonly fontSize: "14px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "20px";
+            readonly letterSpacing: "0px";
+        };
+        readonly smallMedium: {
+            readonly fontSize: "14px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "20px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly label: {
+        readonly large: {
+            readonly fontSize: "14px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "20px";
+            readonly letterSpacing: "0px";
+        };
+        readonly largeMedium: {
+            readonly fontSize: "14px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "20px";
+            readonly letterSpacing: "0px";
+        };
+        readonly medium: {
+            readonly fontSize: "13px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "18px";
+            readonly letterSpacing: "0px";
+        };
+        readonly mediumMedium: {
+            readonly fontSize: "13px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "18px";
+            readonly letterSpacing: "0px";
+        };
+        readonly small: {
+            readonly fontSize: "12px";
+            readonly fontWeight: "Regular";
+            readonly lineHeight: "16px";
+            readonly letterSpacing: "0px";
+        };
+        readonly smallMedium: {
+            readonly fontSize: "12px";
+            readonly fontWeight: "Medium";
+            readonly lineHeight: "16px";
+            readonly letterSpacing: "0px";
+        };
+    };
 };
 
-declare const a11y: {
-    readonly focusRing: "0 0 0 3px rgba(0, 0, 0, 0.15)";
-    readonly focusRingError: "0 0 0 3px rgba(239, 68, 68, 0.15)";
-    readonly focusRingSuccess: "0 0 0 3px rgba(16, 185, 129, 0.15)";
-    readonly tapMinSize: "44px";
+declare const zIndex: {
+    readonly level0: 0;
+    readonly level1: 10;
+    readonly level2: 100;
+    readonly level3: 200;
+    readonly level4: 500;
+    readonly level5: 1000;
 };
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -227,26 +497,6 @@ interface SpinnerProps {
  */
 declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
-interface TopLoadingProps {
-    /** 진행률 (0-100). undefined면 indeterminate 모드 */
-    progress?: number;
-    /** 로딩바 색상 (기본: primary) */
-    color?: string;
-    /** 로딩바 높이 (기본: 3px) */
-    height?: number;
-    /** 표시 여부 */
-    isLoading?: boolean;
-    /** 프로그레스 바의 접근성 레이블 (기본값: "Page loading") */
-    ariaLabel?: string;
-}
-/**
- * 상단 로딩바를 렌더링한다.
- * 표시 여부와 진행률에 따라 determinate/indeterminate 상태를 구성한다.
- * @param props 로딩바 속성
- * @returns 렌더링된 로딩바 요소 또는 null
- */
-declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
-
 interface ToastProviderProps {
     /** 앱 루트에서 감싸는 자식 요소 */
     children: React.ReactNode;
@@ -261,7 +511,7 @@ interface ToastProviderProps {
  * @param props Provider 속성
  * @returns 렌더링된 Provider와 토스트 컨테이너
  */
-declare const ToastProvider: ({ children, maxCount, closeAriaLabel }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ToastProvider: ({ children, maxCount, closeAriaLabel, }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * 토스트 메시지를 표시하는 훅.
@@ -281,26 +531,25 @@ declare const useToast: () => {
     message: (message: string, duration?: number) => void;
 };
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** 버튼 스타일 변형 (기본값: "primary") */
-    variant?: "primary" | "secondary" | "ghost" | "danger";
-    /** 버튼 크기 (기본값: "md") */
-    size?: "sm" | "md" | "lg";
-    /** 버튼이 컨테이너의 전체 너비를 차지할지 여부 */
-    fullWidth?: boolean;
-    /**
-     * 버튼의 커스텀 너비
-     * @deprecated `fullWidth` 사용 또는 CSS로 처리
-     */
-    width?: string;
+interface TopLoadingProps {
+    /** 진행률 (0-100). undefined면 indeterminate 모드 */
+    progress?: number;
+    /** 로딩바 색상 (기본: primary) */
+    color?: string;
+    /** 로딩바 높이 (기본: 3px) */
+    height?: number;
+    /** 표시 여부 */
+    isLoading?: boolean;
+    /** 프로그레스 바의 접근성 레이블 (기본값: "Page loading") */
+    ariaLabel?: string;
 }
 /**
- * 버튼을 렌더링한다.
- * 전달된 props로 클래스 조합과 인라인 스타일을 계산한 뒤 버튼 요소를 반환한다.
- * @param props 버튼 속성
- * @returns 렌더링된 버튼 요소
+ * 상단 로딩바를 렌더링한다.
+ * 표시 여부와 진행률에 따라 determinate/indeterminate 상태를 구성한다.
+ * @param props 로딩바 속성
+ * @returns 렌더링된 로딩바 요소 또는 null
  */
-declare const Button: ({ variant, size, fullWidth, width, className, style, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
 interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 체크박스 옆에 표시할 라벨 */
@@ -309,15 +558,72 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
     size?: "sm" | "md" | "lg";
     /** 중간 선택(indeterminate) 상태 여부 */
     indeterminate?: boolean;
+    /** 입력 요소 참조 */
+    ref?: React.Ref<HTMLInputElement>;
 }
 /**
  * 체크박스를 렌더링한다.
  * indeterminate 상태를 반영하고 라벨을 포함한 UI를 구성한다.
  * @param props 체크박스 속성
- * @param ref 입력 요소 참조
  * @returns 렌더링된 체크박스 UI
  */
-declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: {
+    ({ label, size, indeterminate, className, ref, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type DatePickerMode = "year-month" | "year-month-day";
+type SelectableRange = "all" | "until-today";
+interface DatePickerProps {
+    /** 데이트 피커 위에 표시할 라벨 텍스트 */
+    label?: string;
+    /** 제어형 날짜 값 ("YYYY-MM" 또는 "YYYY-MM-DD" 형식) */
+    value?: string;
+    /** 날짜 변경 시 호출되는 콜백. `mode` 값에 따라 "YYYY-MM" 또는 "YYYY-MM-DD" 형식의 문자열이 전달됩니다. */
+    onChange: (value: string) => void;
+    /** 선택 모드 (기본값: "year-month-day") */
+    mode?: DatePickerMode;
+    /** 연도 선택 범위 시작 (기본값: 1950) */
+    startYear?: number;
+    /** 연도 선택 범위 끝 (기본값: 현재 연도 + 10) */
+    endYear?: number;
+    /** 선택 가능한 최소 날짜 ("YYYY-MM-DD" 형식) */
+    minDate?: string;
+    /** 선택 가능한 날짜 범위 ("all": 제한 없음, "until-today": 오늘까지) */
+    selectableRange?: SelectableRange;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 데이트 피커가 컨테이너의 전체 너비를 차지할지 여부 */
+    fullWidth?: boolean;
+    /**
+     * 데이트 피커의 커스텀 너비
+     * @deprecated `fullWidth` 사용 또는 CSS로 처리
+     */
+    width?: number | string;
+    /** 연도 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Year") */
+    yearLabel?: string;
+    /** 월 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Month") */
+    monthLabel?: string;
+    /** 일 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Day") */
+    dayLabel?: string;
+    /**
+     * minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
+     * `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "Minimum date: {date}")
+     */
+    minDateSrFormat?: string;
+    /**
+     * selectableRange="until-today" 설정 시 스크린리더에 전달할 안내 문구.
+     * (기본값: "Selectable up to today")
+     */
+    selectableRangeUntilTodaySrText?: string;
+}
+/**
+ * 연/월/일 선택형 데이트 피커를 렌더링한다.
+ * 입력 값과 선택 범위를 기준으로 옵션을 계산하고, 선택 변경을 상위로 전달한다.
+ * @param props 데이트 피커 속성
+ * @returns 렌더링된 데이트 피커 UI
+ */
+declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /** 파일 선택 버튼 라벨 텍스트 (기본값: "Choose file") */
@@ -340,58 +646,19 @@ interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     label?: React.ReactNode;
     /** 라디오 버튼 크기 (기본값: "md") */
     size?: "sm" | "md" | "lg";
+    /** 입력 요소 참조 */
+    ref?: React.Ref<HTMLInputElement>;
 }
 /**
  * 라디오 버튼을 렌더링한다.
  * 크기별 클래스와 라벨을 조합해 UI를 구성한다.
  * @param props 라디오 속성
- * @param ref 입력 요소 참조
  * @returns 렌더링된 라디오 UI
  */
-declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
-
-type SelectSize = "sm" | "md" | "lg";
-type SelectVariant = "outline" | "filled" | "ghost";
-interface SelectOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-interface SelectProps {
-    /** 셀렉트 요소의 id (미입력 시 자동 생성) */
-    id?: string;
-    /** 셀렉트 위에 표시할 라벨 텍스트 */
-    label?: string;
-    /** 선택 전 표시할 플레이스홀더 (기본값: "Select…") */
-    placeholder?: string;
-    /** 표시할 옵션 목록 */
-    options: SelectOption[];
-    /** 제어형 선택 값 */
-    value?: string | null;
-    /** 값 변경 시 호출되는 콜백. 선택된 값과 전체 옵션 객체를 인자로 전달합니다. */
-    onChange?: (value: string | null, option?: SelectOption | null) => void;
-    /** 비제어형 초기 선택 값 */
-    defaultValue?: string | null;
-    /** 비활성화 여부 */
-    disabled?: boolean;
-    /** 셀렉트 크기 (기본값: "md") */
-    size?: SelectSize;
-    /** 셀렉트 스타일 변형 (기본값: "outline") */
-    variant?: SelectVariant;
-    /** 컨테이너 전체 너비 차지 여부 */
-    fullWidth?: boolean;
-    /** 루트 요소에 추가할 className */
-    className?: string;
-    /** 선택된 값 텍스트 정렬 (기본값: "left") */
-    textAlign?: "left" | "center";
-}
-/**
- * 셀렉트 컴포넌트를 렌더링한다.
- * 제어형/비제어형 상태를 정리하고, 키보드/마우스 상호작용과 드롭다운 표시를 관리한다.
- * @param props 셀렉트 속성
- * @returns 렌더링된 셀렉트 UI
- */
-declare const Select: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, variant, fullWidth, className, textAlign, }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Radio: {
+    ({ label, size, className, ref, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
     /** 제어형 스위치 상태 */
@@ -406,15 +673,19 @@ interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     disabled?: boolean;
     /** 스위치 접근성 레이블(스크린 리더용) */
     ariaLabel: string;
+    /** 버튼 요소 참조 */
+    ref?: React.Ref<HTMLButtonElement>;
 }
 /**
  * 스위치를 렌더링한다.
  * 제어형/비제어형 상태를 판별해 토글 로직을 수행하고 버튼 형태의 스위치 UI를 반환한다.
  * @param props 스위치 속성
- * @param ref 버튼 참조
  * @returns 렌더링된 스위치 요소
  */
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Switch: {
+    ({ checked, defaultChecked, onChange, size, disabled, className, ariaLabel, ref, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 type TextFieldVariant = "outline" | "filled" | "ghost";
 type TextFieldSize = "sm" | "md" | "lg";
@@ -445,68 +716,83 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
     defaultValue?: string;
     /** 입력값 변환 함수 (예: 숫자만 허용, 대문자 변환) */
     transformValue?: (value: string) => string;
+    /** 입력 요소 참조 */
+    ref?: React.Ref<HTMLInputElement>;
 }
 /**
  * 텍스트 필드를 렌더링한다.
  * 제어형/비제어형 값을 동기화하고, 조합 입력(IME)을 고려해 변경 이벤트를 전달한다.
  * @param props 텍스트 필드 속성
- * @param ref 입력 요소 참조
  * @returns 렌더링된 텍스트 필드 UI
  */
-declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+declare const TextField: {
+    ({ id, label, helperText, error, success, variant, size, leftIcon, rightIcon, fullWidth, className, onChangeAction, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-type DatePickerMode = "year-month" | "year-month-day";
-type SelectableRange = "all" | "until-today";
-interface DatePickerProps {
-    /** 데이트 피커 위에 표시할 라벨 텍스트 */
-    label?: string;
-    /** 제어형 날짜 값 ("YYYY-MM" 또는 "YYYY-MM-DD" 형식) */
-    value?: string;
-    /** 날짜 변경 시 호출되는 콜백. `mode` 값에 따라 "YYYY-MM" 또는 "YYYY-MM-DD" 형식의 문자열이 전달됩니다. */
-    onChange: (value: string) => void;
-    /** 선택 모드 (기본값: "year-month-day") */
-    mode?: DatePickerMode;
-    /** 연도 선택 범위 시작 (기본값: 1950) */
-    startYear?: number;
-    /** 연도 선택 범위 끝 (기본값: 현재 연도 + 10) */
-    endYear?: number;
-    /** 선택 가능한 최소 날짜 ("YYYY-MM-DD" 형식) */
-    minDate?: string;
-    /** 선택 가능한 날짜 범위 ("all": 제한 없음, "until-today": 오늘까지) */
-    selectableRange?: SelectableRange;
-    /** 비활성화 여부 */
-    disabled?: boolean;
-    /** 데이트 피커가 컨테이너의 전체 너비를 차지할지 여부 */
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 버튼 스타일 변형 (기본값: "primary") */
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    /** 버튼 크기 (기본값: "md") */
+    size?: "sm" | "md" | "lg";
+    /** 버튼이 컨테이너의 전체 너비를 차지할지 여부 */
     fullWidth?: boolean;
     /**
-     * 데이트 피커의 커스텀 너비
+     * 버튼의 커스텀 너비
      * @deprecated `fullWidth` 사용 또는 CSS로 처리
      */
-    width?: number | string;
-    /** 연도 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Year") */
-    yearLabel?: string;
-    /** 월 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Month") */
-    monthLabel?: string;
-    /** 일 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Day") */
-    dayLabel?: string;
-    /**
-     * minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
-     * `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "Minimum date: {date}")
-     */
-    minDateSrFormat?: string;
-    /**
-     * selectableRange="until-today" 설정 시 스크린리더에 전달할 안내 문구.
-     * (기본값: "Selectable up to today")
-     */
-    selectableRangeUntilTodaySrText?: string;
+    width?: string;
 }
 /**
- * 연/월/일 선택형 데이트 피커를 렌더링한다.
- * 입력 값과 선택 범위를 기준으로 옵션을 계산하고, 선택 변경을 상위로 전달한다.
- * @param props 데이트 피커 속성
- * @returns 렌더링된 데이트 피커 UI
+ * 버튼을 렌더링한다.
+ * 전달된 props로 클래스 조합과 인라인 스타일을 계산한 뒤 버튼 요소를 반환한다.
+ * @param props 버튼 속성
+ * @returns 렌더링된 버튼 요소
  */
-declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, fullWidth, width, className, style, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+type SelectSize = "sm" | "md" | "lg";
+type SelectVariant = "outline" | "filled" | "ghost";
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectProps {
+    /** 셀렉트 요소의 id (미입력 시 자동 생성) */
+    id?: string;
+    /** 셀렉트 위에 표시할 라벨 텍스트 */
+    label?: string;
+    /** 선택 전 표시할 플레이스홀더 (기본값: "Select…") */
+    placeholder?: string;
+    /** 표시할 옵션 목록 */
+    options: SelectOption[];
+    /** 제어형 선택 값 */
+    value?: string | null;
+    /** 값 변경 시 호출되는 콜백. 선택된 값과 전체 옵션 객체를 인자로 전달합니다. */
+    onChange?: (value: string | null, option?: SelectOption | null) => void;
+    /** 비제어형 초기 선택 값 */
+    defaultValue?: string | null;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 셀렉트 크기 (기본값: "md") */
+    size?: SelectSize;
+    /** 셀렉트 스타일 변형 (기본값: "outline") */
+    variant?: SelectVariant;
+    /** 컨테이너 전체 너비 차지 여부 */
+    fullWidth?: boolean;
+    /** 루트 요소에 추가할 className */
+    className?: string;
+    /** 선택된 값 텍스트 정렬 (기본값: "left") */
+    textAlign?: "left" | "center";
+}
+/**
+ * 셀렉트 컴포넌트를 렌더링한다.
+ * 제어형/비제어형 상태를 정리하고, 키보드/마우스 상호작용과 드롭다운 표시를 관리한다.
+ * @param props 셀렉트 속성
+ * @returns 렌더링된 셀렉트 UI
+ */
+declare const Select: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, variant, fullWidth, className, textAlign, }: SelectProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     /** 현재 페이지 번호 (1-based) */
@@ -526,7 +812,7 @@ interface PaginationProps {
  * @param props 페이지네이션 속성
  * @returns 렌더링된 페이지네이션 UI
  */
-declare const Pagination: ({ page, totalPages, onChange, prevLabel, nextLabel }: PaginationProps) => react_jsx_runtime.JSX.Element;
+declare const Pagination: ({ page, totalPages, onChange, prevLabel, nextLabel, }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
 interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** 모달 열림 여부 */
@@ -550,4 +836,4 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
  */
 declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ariaLabel, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, type SelectOption, Spinner, Switch, TextField, ToastProvider, TopLoading, a11y, breakpoints, colors, motion, radius, shadows, skeleton, spacing, typography, useAlert, useToast, zIndex };
+export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, type SelectOption, Spinner, Switch, TextField, ToastProvider, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, motion, opacity, radius, shadows, skeleton, spacing, typography, useAlert, useToast, zIndex };