@bigtablet/design-system 1.22.2 → 1.24.0

package/dist/index.d.ts

@@ -1,84 +1,326 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
+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 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";
+    readonly brand: {
+        readonly primary: "#121212";
+        readonly onPrimary: "#FFFFFF";
+    };
+    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 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 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 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 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";
+    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 typography: {
+declare const baseTypography: {
     readonly fontFamily: {
-        readonly primary: "'Pretendard', sans-serif";
+        readonly primary: "Pretendard";
     };
     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 "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 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 regular: "Regular";
+        readonly medium: "Medium";
     };
     readonly lineHeight: {
-        readonly tight: 1.25;
-        readonly snug: 1.3;
-        readonly normal: 1.5;
-        readonly relaxed: 1.75;
+        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 tight: "-0.02em";
-        readonly normal: "0";
-        readonly wide: "0.02em";
+        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 radius: {
+    readonly none: "0px";
+    readonly xs: "4px";
     readonly sm: "6px";
     readonly md: "8px";
     readonly lg: "12px";
@@ -87,10 +329,35 @@ declare const radius: {
 };
 
 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)";
+    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 baseBorderWidth: {
+    readonly "0": "0px";
+    readonly "1": "1px";
+    readonly "2": "2px";
+};
+declare const borderWidth: {
+    readonly none: "0px";
+    readonly standard: "1px";
+    readonly indicator: "2px";
+};
+
+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 motion: {
@@ -109,22 +376,22 @@ declare const motion: {
 
 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";
@@ -133,16 +400,19 @@ declare const skeleton: {
 };
 
 declare const breakpoints: {
-    readonly mobile: 0;
-    readonly tablet: 768;
-    readonly laptop: 1024;
-    readonly desktop: 1440;
+    readonly compact: 0;
+    readonly medium: 600;
+    readonly expanded: 840;
+    readonly large: 1200;
 };
 
 declare const zIndex: {
-    readonly loading: 9999;
-    readonly modal: 10000;
-    readonly toast: 10001;
+    readonly level0: 0;
+    readonly level1: 10;
+    readonly level2: 100;
+    readonly level3: 200;
+    readonly level4: 500;
+    readonly level5: 1000;
 };
 
 declare const a11y: {
@@ -309,15 +579,19 @@ 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;
+};
 
 interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /** 파일 선택 버튼 라벨 텍스트 (기본값: "Choose file") */
@@ -340,15 +614,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>>;
+declare const Radio: {
+    ({ label, size, className, ref, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 type SelectSize = "sm" | "md" | "lg";
 type SelectVariant = "outline" | "filled" | "ghost";
@@ -406,15 +684,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,15 +727,19 @@ 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";
@@ -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 };