@bigtablet/design-system 2.4.1 → 2.4.3

package/dist/index.css

@@ -1372,6 +1372,47 @@
   pointer-events: none;
 }
 
+/* src/ui/modal/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+.modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+.modal_panel {
+  background: #FFFFFF;
+  border-radius: 12px;
+  box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
+  max-width: calc(100% - 64px);
+  overflow: visible;
+}
+.modal_header {
+  padding: 16px;
+  border-bottom: 1px solid #E5E5E5;
+  color: #121212;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+  letter-spacing: 0px;
+}
+.modal_body {
+  padding: 16px;
+  overflow: visible;
+}
+
 /* src/ui/otp-input/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -1436,47 +1477,6 @@
   color: #EF4444;
 }
 
-/* src/ui/modal/style.scss */
-@keyframes skeleton_loading {
-  0% {
-    background-position: 100% 0;
-  }
-  100% {
-    background-position: 0 0;
-  }
-}
-.modal {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: grid;
-  place-items: center;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 100;
-}
-.modal_panel {
-  background: #FFFFFF;
-  border-radius: 12px;
-  box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
-  max-width: calc(100% - 64px);
-  overflow: visible;
-}
-.modal_header {
-  padding: 16px;
-  border-bottom: 1px solid #E5E5E5;
-  color: #121212;
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 28px;
-  letter-spacing: 0px;
-}
-.modal_body {
-  padding: 16px;
-  overflow: visible;
-}
-
 /* src/ui/pagination/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -1699,106 +1699,6 @@
   animation: spinner_spin 0.8s linear infinite;
 }
 
-/* src/ui/toggle/style.scss */
-@keyframes skeleton_loading {
-  0% {
-    background-position: 100% 0;
-  }
-  100% {
-    background-position: 0 0;
-  }
-}
-.toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 40px;
-  height: 24px;
-  padding: 2px;
-  border: 2px solid transparent;
-  border-radius: 9999px;
-  background: #B3B3B3;
-  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
-  cursor: pointer;
-}
-.toggle_thumb {
-  position: relative;
-  width: 12px;
-  height: 12px;
-  background: #FFFFFF;
-  border-radius: 9999px;
-  transition:
-    transform 0.2s ease-in-out,
-    width 0.2s ease-in-out,
-    height 0.2s ease-in-out,
-    background 0.2s ease-in-out;
-  transform: translateX(0);
-}
-.toggle_on {
-  background: #121212;
-}
-.toggle_on .toggle_thumb {
-  width: 20px;
-  height: 20px;
-  background: #FFFFFF;
-  transform: translateX(14px);
-}
-.toggle_on.toggle_disabled {
-  background: #B3B3B3;
-  border-color: transparent;
-}
-.toggle_on.toggle_disabled .toggle_thumb {
-  background: #FFFFFF;
-}
-.toggle:not(:disabled):hover {
-  opacity: 0.88;
-}
-.toggle:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
-}
-.toggle:not(:disabled):active .toggle_thumb {
-  width: 20px;
-  height: 20px;
-}
-.toggle_on:not(:disabled):active .toggle_thumb {
-  transform: translateX(12px);
-}
-.toggle_size_sm {
-  width: 40px;
-  height: 24px;
-}
-.toggle_size_md {
-  width: 48px;
-  height: 28px;
-  padding: 2px;
-}
-.toggle_size_md .toggle_thumb {
-  width: 16px;
-  height: 16px;
-}
-.toggle_size_md.toggle_on .toggle_thumb {
-  width: 24px;
-  height: 24px;
-  transform: translateX(18px);
-}
-.toggle_size_md:not(:disabled):active .toggle_thumb {
-  width: 24px;
-  height: 24px;
-}
-.toggle_size_md.toggle_on:not(:disabled):active .toggle_thumb {
-  transform: translateX(16px);
-}
-.toggle_disabled {
-  cursor: not-allowed;
-  border-color: transparent;
-  background: #B3B3B3;
-}
-.toggle_disabled .toggle_thumb {
-  background: #FFFFFF;
-}
-
 /* src/ui/textfield/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -2175,6 +2075,106 @@
   background: #666666;
 }
 
+/* src/ui/toggle/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+.toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 40px;
+  height: 24px;
+  padding: 2px;
+  border: 2px solid transparent;
+  border-radius: 9999px;
+  background: #B3B3B3;
+  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  cursor: pointer;
+}
+.toggle_thumb {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  background: #FFFFFF;
+  border-radius: 9999px;
+  transition:
+    transform 0.2s ease-in-out,
+    width 0.2s ease-in-out,
+    height 0.2s ease-in-out,
+    background 0.2s ease-in-out;
+  transform: translateX(0);
+}
+.toggle_on {
+  background: #121212;
+}
+.toggle_on .toggle_thumb {
+  width: 20px;
+  height: 20px;
+  background: #FFFFFF;
+  transform: translateX(14px);
+}
+.toggle_on.toggle_disabled {
+  background: #B3B3B3;
+  border-color: transparent;
+}
+.toggle_on.toggle_disabled .toggle_thumb {
+  background: #FFFFFF;
+}
+.toggle:not(:disabled):hover {
+  opacity: 0.88;
+}
+.toggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
+}
+.toggle:not(:disabled):active .toggle_thumb {
+  width: 20px;
+  height: 20px;
+}
+.toggle_on:not(:disabled):active .toggle_thumb {
+  transform: translateX(12px);
+}
+.toggle_size_sm {
+  width: 40px;
+  height: 24px;
+}
+.toggle_size_md {
+  width: 48px;
+  height: 28px;
+  padding: 2px;
+}
+.toggle_size_md .toggle_thumb {
+  width: 16px;
+  height: 16px;
+}
+.toggle_size_md.toggle_on .toggle_thumb {
+  width: 24px;
+  height: 24px;
+  transform: translateX(18px);
+}
+.toggle_size_md:not(:disabled):active .toggle_thumb {
+  width: 24px;
+  height: 24px;
+}
+.toggle_size_md.toggle_on:not(:disabled):active .toggle_thumb {
+  transform: translateX(16px);
+}
+.toggle_disabled {
+  cursor: not-allowed;
+  border-color: transparent;
+  background: #B3B3B3;
+}
+.toggle_disabled .toggle_thumb {
+  background: #FFFFFF;
+}
+
 /* src/ui/top-loading/style.scss */
 @keyframes skeleton_loading {
   0% {

package/dist/index.d.ts

@@ -95,6 +95,14 @@ declare const colors: {
     };
 };
 
+declare const elevation: {
+    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 motion: {
     readonly transition: {
         readonly fast: "0.1s ease-in-out";
@@ -132,14 +140,6 @@ declare const radius: {
     readonly full: "9999px";
 };
 
-declare const elevation: {
-    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: "#F4F4F4";
@@ -611,6 +611,18 @@ interface DatePickerProps {
  */
 declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear: endYearProp, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
+interface DividerProps extends React$1.HTMLAttributes<HTMLHRElement> {
+    /** 구분선 두께 (기본값: "standard") */
+    weight?: "standard" | "heavy";
+}
+/**
+ * 구분선 컴포넌트를 렌더링한다.
+ * 콘텐츠 영역을 시각적으로 분리하는 수평 구분선을 표시한다.
+ * @param props 구분선 속성
+ * @returns 렌더링된 구분선 UI
+ */
+declare const Divider: ({ weight, className, ...props }: DividerProps) => react_jsx_runtime.JSX.Element;
+
 type DropdownSize = "sm" | "md" | "lg";
 interface DropdownOption {
     value: string;
@@ -665,18 +677,6 @@ interface DropdownProps {
  */
 declare const Dropdown: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, fullWidth, className, }: DropdownProps) => react_jsx_runtime.JSX.Element;
 
-interface DividerProps extends React$1.HTMLAttributes<HTMLHRElement> {
-    /** 구분선 두께 (기본값: "standard") */
-    weight?: "standard" | "heavy";
-}
-/**
- * 구분선 컴포넌트를 렌더링한다.
- * 콘텐츠 영역을 시각적으로 분리하는 수평 구분선을 표시한다.
- * @param props 구분선 속성
- * @returns 렌더링된 구분선 UI
- */
-declare const Divider: ({ weight, className, ...props }: DividerProps) => react_jsx_runtime.JSX.Element;
-
 type FABVariant = "primary" | "additive";
 interface FABProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     /** FAB 스타일 변형 (기본값: "primary") */
@@ -804,6 +804,28 @@ interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "on
  */
 declare const ListItem: ({ overline, label, supportingText, metadata, leadingElement, trailingElement, alignment, disabled, onClick, className, ...props }: ListItemProps) => react_jsx_runtime.JSX.Element;
 
+interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 모달 열림 여부 */
+    open: boolean;
+    /** 모달 닫기 콜백 */
+    onClose?: () => void;
+    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
+    closeOnOverlay?: boolean;
+    /** 모달 패널 너비 (기본값: 520) */
+    width?: number | string;
+    /** 모달 헤더에 표시할 제목 */
+    title?: React$1.ReactNode;
+    /** 모달 접근성 레이블(기본값: title 또는 "Dialog") */
+    ariaLabel?: string;
+}
+/**
+ * 모달을 렌더링한다.
+ * 포커스 트랩과 스크롤 잠금을 적용하고, 열림 상태에 따라 오버레이/패널을 구성한다.
+ * @param props 모달 속성
+ * @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
+ */
+declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ariaLabel, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
+
 interface OtpInputProps {
     /** OTP 자릿수 (기본값: 6) */
     length?: 4 | 6;
@@ -835,28 +857,6 @@ declare const OtpInput: {
     displayName: string;
 };
 
-interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** 모달 열림 여부 */
-    open: boolean;
-    /** 모달 닫기 콜백 */
-    onClose?: () => void;
-    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
-    closeOnOverlay?: boolean;
-    /** 모달 패널 너비 (기본값: 520) */
-    width?: number | string;
-    /** 모달 헤더에 표시할 제목 */
-    title?: React$1.ReactNode;
-    /** 모달 접근성 레이블(기본값: title 또는 "Dialog") */
-    ariaLabel?: string;
-}
-/**
- * 모달을 렌더링한다.
- * 포커스 트랩과 스크롤 잠금을 적용하고, 열림 상태에 따라 오버레이/패널을 구성한다.
- * @param props 모달 속성
- * @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
- */
-declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ariaLabel, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
-
 interface PaginationProps {
     /** 현재 페이지 번호 (1-based) */
     page: number;
@@ -910,33 +910,6 @@ interface SpinnerProps {
  */
 declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
-interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
-    /** 제어형 토글 상태 */
-    checked?: boolean;
-    /** 비제어형 초기 토글 상태 */
-    defaultChecked?: boolean;
-    /** 상태 변경 시 호출되는 콜백 */
-    onChange?: (checked: boolean) => void;
-    /** 토글 크기 (기본값: "sm") */
-    size?: "sm" | "md";
-    /** 비활성화 여부 */
-    disabled?: boolean;
-    /** 토글 접근성 레이블(스크린 리더용) */
-    ariaLabel: string;
-    /** 버튼 요소 참조 */
-    ref?: React$1.Ref<HTMLButtonElement>;
-}
-/**
- * 토글을 렌더링한다.
- * 제어형/비제어형 상태를 판별해 토글 로직을 수행하고 버튼 형태의 토글 UI를 반환한다.
- * @param props 토글 속성
- * @returns 렌더링된 토글 요소
- */
-declare const Toggle: {
-    ({ checked, defaultChecked, onChange, size, disabled, className, ariaLabel, ref, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
 type TextFieldSize = "sm" | "md";
 interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
     /** 입력 필드 크기 (기본값: "md") */
@@ -1014,6 +987,33 @@ declare const useToast: () => {
     message: (message: string, duration?: number) => void;
 };
 
+interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /** 제어형 토글 상태 */
+    checked?: boolean;
+    /** 비제어형 초기 토글 상태 */
+    defaultChecked?: boolean;
+    /** 상태 변경 시 호출되는 콜백 */
+    onChange?: (checked: boolean) => void;
+    /** 토글 크기 (기본값: "sm") */
+    size?: "sm" | "md";
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 토글 접근성 레이블(스크린 리더용) */
+    ariaLabel: string;
+    /** 버튼 요소 참조 */
+    ref?: React$1.Ref<HTMLButtonElement>;
+}
+/**
+ * 토글을 렌더링한다.
+ * 제어형/비제어형 상태를 판별해 토글 로직을 수행하고 버튼 형태의 토글 UI를 반환한다.
+ * @param props 토글 속성
+ * @returns 렌더링된 토글 요소
+ */
+declare const Toggle: {
+    ({ checked, defaultChecked, onChange, size, disabled, className, ariaLabel, ref, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface TopLoadingProps {
     /** 진행률 (0-100). undefined면 indeterminate 모드 */
     progress?: number;