@bigtablet/design-system 3.4.0 → 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;
 }
@@ -4507,6 +4512,17 @@
   border-radius: 8px;
   background: var(--bt-color-bg-solid);
 }
+.table_sr_only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 .table {
   width: 100%;
   border-collapse: collapse;
@@ -5039,6 +5055,14 @@
     width: 0%;
   }
 }
+@keyframes toast_progress_reduced {
+  from {
+    width: 0;
+  }
+  to {
+    width: 0;
+  }
+}
 .toast_container {
   position: fixed;
   top: 16px;
@@ -5175,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";
@@ -1317,7 +1352,7 @@ declare const Divider: ({ weight, className, ...props }: DividerProps) => React$
 
 /** Drawer 가 미끄러져 들어오는 방향 (top 은 범위 외) */
 type DrawerPlacement = "left" | "right" | "bottom";
-interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "role"> {
     /** 드로어 열림 여부 */
     open: boolean;
     /** 드로어 닫기 콜백 */
@@ -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 {
@@ -1644,7 +1684,7 @@ interface MediaCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "t
 declare const MediaCard: ({ image, imagePosition, aspectRatio, heading, headingAs: HeadingTag, eyebrow, shadow, bordered, clickable, meta, children, className, ...props }: MediaCardProps) => React$1.JSX.Element;
 
 type ModalFooterAlign = "end" | "between" | "start";
-interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "role"> {
     /** 모달 열림 여부 */
     open: boolean;
     /** 모달 닫기 콜백 */
@@ -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) */
@@ -1897,6 +1937,14 @@ type TableProps<T extends object> = {
     className?: string;
     /** 행 클릭 콜백 */
     onRowClick?: (item: T, index: number) => void;
+    /**
+     * clickable 행(onRowClick)의 동작 설명. 각 clickable 행에 `aria-describedby` 로 연결된다 (기본값: "클릭 가능한 행").
+     * 행마다 셀 데이터가 이미 행을 식별하므로 여기엔 동작만 담으면 된다 (예: "선택하면 상세 항목으로 이동").
+     * `""`(빈 문자열)로 두면 힌트를 붙이지 않는다.
+     * `aria-label` 대신 `aria-describedby` 를 쓰는 이유: `<tr>` 의 `aria-label`/`role="button"` 은 행/셀의
+     * accessible name 을 덮거나 셀을 presentational 로 만들어 스크린리더가 셀 데이터를 못 읽는다.
+     */
+    rowClickHint?: string;
     /** 현재 정렬 상태 (제어형). `undefined` 는 정렬 없음 */
     sort?: TableSort;
     /** 정렬 가능한 헤더 클릭 시 발화 (none→asc→desc→none 순환). DS는 데이터를 직접 정렬하지 않음 - 정렬된 `data` 를 다시 전달해야 함 */
@@ -1911,7 +1959,7 @@ type TableProps<T extends object> = {
  * @param props 테이블 속성
  * @returns 테이블 컴포넌트
  */
-declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, sort, onSortChange, selectAllAriaLabel, selectRowAriaLabel, selectable, rowKey, selectedKeys, onSelectionChange, }: TableProps<T>) => React$1.JSX.Element;
+declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, rowClickHint, sort, onSortChange, selectAllAriaLabel, selectRowAriaLabel, selectable, rowKey, selectedKeys, onSelectionChange, }: TableProps<T>) => React$1.JSX.Element;
 
 type ThemeMode = "light" | "dark" | "system";
 type ResolvedTheme = "light" | "dark";