@bigtablet/design-system 3.4.1 → 3.5.0

package/dist/index.css

@@ -1634,7 +1634,6 @@
 .tooltip_position {
   position: absolute;
   z-index: 1000;
-  pointer-events: none;
   display: block;
   width: max-content;
 }
@@ -1696,6 +1695,7 @@
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
+  text-decoration: none;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
@@ -1722,6 +1722,11 @@
 .button:disabled {
   cursor: not-allowed;
 }
+.button_disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+  pointer-events: none;
+}
 .button_size_sm {
   min-height: 32px;
 }
@@ -5050,6 +5055,14 @@
     width: 0%;
   }
 }
+@keyframes toast_progress_reduced {
+  from {
+    width: 0;
+  }
+  to {
+    width: 0;
+  }
+}
 .toast_container {
   position: fixed;
   top: 16px;
@@ -5186,6 +5199,16 @@
 .toast_progress_default {
   background: var(--bt-color-text-body);
 }
+.toast_item:hover .toast_progress,
+.toast_item:focus-within .toast_progress {
+  animation-play-state: paused;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toast_progress {
+    animation-name: toast_progress_reduced;
+    width: 0;
+  }
+}
 
 /* src/ui/forms/toggle/style.scss */
 @keyframes skeleton_loading {

package/dist/index.d.ts

@@ -544,7 +544,7 @@ interface TabProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>,
     /** 이 tab의 value */
     value: string;
 }
-declare const Tab: ({ value, className, children, onClick, ...props }: TabProps) => React$1.JSX.Element;
+declare const Tab: ({ value, className, children, onClick, onKeyDown, ...props }: TabProps) => React$1.JSX.Element;
 interface TabPanelProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** 이 panel을 활성화할 tab의 value */
     value: string;
@@ -1119,6 +1119,11 @@ interface AlertOptions {
     onConfirm?: () => void;
     /** 취소 버튼 클릭 시 호출되는 콜백 */
     onCancel?: () => void;
+    /**
+     * 오버레이 클릭으로 닫기 허용 여부 (기본값: true).
+     * destructive 확인처럼 실수 닫힘을 막아야 하면 false 로.
+     */
+    closeOnOverlay?: boolean;
 }
 interface AlertContextValue {
     showAlert: (options: AlertOptions) => void;
@@ -1130,7 +1135,8 @@ declare const AlertProvider: React$1.FC<{
 
 type ButtonVariant = "filled" | "tonal" | "outline" | "text";
 type ButtonSize = "sm" | "md" | "lg" | "xl";
-interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+/** button/anchor 공통 스타일·콘텐츠 props */
+interface ButtonBaseProps {
     /** 버튼 스타일 변형 (기본값: "filled") */
     variant?: ButtonVariant;
     /** 버튼 크기 (기본값: "md") */
@@ -1148,16 +1154,43 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
      * filled: 빨간 bg, outline: 빨간 텍스트/border, tonal: 빨간 wash.
      */
     danger?: boolean;
+    /**
+     * 비활성화. button 은 native `disabled`, anchor 는 `aria-disabled`+`tabIndex=-1`+
+     * 클릭 차단으로 처리(anchor 엔 native disabled 가 없으므로).
+     */
+    disabled?: boolean;
+}
+/** `<button>` 으로 렌더링 (기본) */
+interface ButtonAsButton extends ButtonBaseProps, Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> {
+    /** 렌더링할 요소 (기본값: "button") */
+    as?: "button";
+    /** button 렌더 시엔 href 를 허용하지 않음 (href 만 주면 anchor 로 분기되도록) */
+    href?: never;
     /** 루트 button 요소 ref (React 19 ref-as-prop) */
     ref?: React$1.Ref<HTMLButtonElement>;
 }
+/** `<a>` 로 렌더링 - 링크 시맨틱(우클릭 새 탭·미들클릭·SR 링크 안내) */
+interface ButtonAsAnchor extends ButtonBaseProps, Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps> {
+    /** anchor 로 렌더링 - 생략 가능(href 만 줘도 anchor 로 분기) */
+    as?: "a";
+    /** 링크 대상 (anchor 필수) */
+    href: string;
+    /** 루트 anchor 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLAnchorElement>;
+}
+/**
+ * Button props - `as`/`href` 에 따라 button 또는 anchor 로 렌더링되는 discriminated union.
+ * `as` 미지정 시 기본 `<button>` (기존 동작과 100% 호환).
+ */
+type ButtonProps = ButtonAsButton | ButtonAsAnchor;
 /**
  * 버튼을 렌더링한다.
  * Figma DS 기준 4가지 variant(filled/tonal/outline/text)와 4가지 size(sm/md/lg/xl)를 지원한다.
+ * `as="a"` (또는 `href` 지정) 시 동일 스타일의 anchor 로 렌더링한다.
  * @param props 버튼 속성
- * @returns 렌더링된 버튼 요소
+ * @returns 렌더링된 button 또는 anchor 요소
  */
-declare const Button: ({ variant, size, leadingIcon, trailingIcon, fullWidth, radius, danger, type, ref, className, children, ...props }: ButtonProps) => React$1.JSX.Element;
+declare const Button: (props: ButtonProps) => React$1.JSX.Element;
 
 type CardVariant = "default" | "accent" | "glass" | "outlined";
 type CardFooterAlign = "start" | "between" | "end";
@@ -1243,8 +1276,10 @@ interface ChipProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClic
     onClick?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
     /** 삭제 버튼 클릭 시 콜백 */
     onRemove?: () => void;
+    /** 삭제 버튼 접근성 레이블 (기본값: "{label} 제거") - 칩이 여러 개일 때 대상 구분용 */
+    removeLabel?: string;
 }
-declare const Chip: ({ type, size, tone, label, selected, removable, disabled, open, leadingIcon, onClick, onRemove, className, ...props }: ChipProps) => React$1.JSX.Element;
+declare const Chip: ({ type, size, tone, label, selected, removable, disabled, open, leadingIcon, onClick, onRemove, removeLabel, className, ...props }: ChipProps) => React$1.JSX.Element;
 
 type DatePickerMode = "year-month" | "year-month-day";
 type SelectableRange = "all" | "until-today";
@@ -1347,7 +1382,7 @@ interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
  * @returns 열림 상태일 때 렌더링된 드로어, 닫힘 상태면 null
  */
 declare const Drawer: {
-    ({ open, onClose, placement, size, title, footer, closeOnOverlay, showCloseIcon, closeLabel, ariaLabel, children, className, ...props }: DrawerProps): React$1.JSX.Element | null;
+    ({ open, onClose, placement, size, title, footer, closeOnOverlay, showCloseIcon, closeLabel, ariaLabel, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
     displayName: string;
 };
 
@@ -1404,6 +1439,11 @@ interface DropdownCommonProps {
     emptyText?: string;
     /** 멀티 선택 요약 텍스트 (기본값: "N개 선택") */
     selectedSummary?: (count: number) => string;
+    /**
+     * 네이티브 폼 제출 참여용 name. 지정 시 선택 값이 hidden input 으로 렌더되어
+     * `<form>` POST 에 포함됩니다 (multiple 은 같은 name 의 hidden input 반복).
+     */
+    name?: string;
 }
 /** 단일 선택 (기본) */
 interface DropdownSingleProps extends DropdownCommonProps {
@@ -1674,7 +1714,7 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
  * @param props 모달 속성
  * @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
  */
-declare const Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, ...props }: ModalProps) => React$1.JSX.Element | null;
+declare const Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, ...props }: ModalProps) => React$1.ReactPortal | null;
 
 interface OtpInputProps {
     /** OTP 자릿수 (기본값: 6) */