@bigtablet/design-system 1.19.3 → 1.20.0

package/README.md

@@ -7,11 +7,16 @@
 [![npm version](https://img.shields.io/npm/v/@bigtablet/design-system.svg)](https://www.npmjs.com/package/@bigtablet/design-system)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![Test Coverage](https://img.shields.io/badge/coverage-86%25-brightgreen.svg)](https://github.com/Bigtablet/bigtablet-design-system/actions)
+[![CI](https://github.com/Bigtablet/bigtablet-design-system/actions/workflows/ci.yml/badge.svg)](https://github.com/Bigtablet/bigtablet-design-system/actions/workflows/ci.yml)
+[![Storybook](https://img.shields.io/badge/Storybook-FF4785?logo=storybook&logoColor=white)](https://bigtablet.github.io/bigtablet-design-system)
 
 [🇰🇷 한국어](./README_KR.md) · 🇺🇸 English
 
 The official design system of Bigtablet — a unified UI library composed of Foundation (design tokens) and UI Components.
 
+> **Note**: This is Bigtablet's in-house design system, open-sourced for community reference.
+> External use is welcome, but minor versions may include breaking changes without prior notice.
+
 [GitHub](https://github.com/Bigtablet/bigtablet-design-system) · [NPM](https://www.npmjs.com/package/@bigtablet/design-system) · [Storybook](https://bigtablet.github.io/bigtablet-design-system)
 
 </div>
@@ -30,6 +35,7 @@ The official design system of Bigtablet — a unified UI library composed of Fou
 | ♿ **Accessibility** | Keyboard navigation, screen reader support, full ARIA attributes |
 | 🧪 **86% Coverage** | Stable test coverage powered by Vitest |
 | 🎭 **Storybook** | Interactive documentation for all components |
+| 🎯 **Zero Dependencies** | No bundled runtime dependencies — peer deps only |
 
 ---
 
@@ -49,15 +55,17 @@ pnpm add @bigtablet/design-system
 **Peer Dependencies**
 
 ```bash
-npm install react react-dom lucide-react
+npm install react@^19 react-dom@^19 "lucide-react@>=0.552.0"
 ```
 
-> Recommended for use with **React 18+** and **Next.js 13+**.
+> Requires **React 19** and **lucide-react ≥ 0.552.0**. Compatible with **Next.js 13+**.
 
 ---
 
 ## Quick Start
 
+> ⚠️ **Alert** and **Toast** require Providers at the root of your app — see [Provider Setup](#provider-setup) below.
+
 ### Pure React
 
 ```tsx

package/dist/index.d.ts

@@ -99,6 +99,8 @@ interface ToastProviderProps {
     children: React.ReactNode;
     /** 최대 동시 표시 토스트 수 (기본값: 5) */
     maxCount?: number;
+    /** 토스트 닫기 버튼의 aria-label (기본값: "Close") */
+    closeAriaLabel?: string;
 }
 /**
  * 토스트 컨텍스트를 제공하는 Provider를 렌더링한다.
@@ -106,7 +108,7 @@ interface ToastProviderProps {
  * @param props Provider 속성
  * @returns 렌더링된 Provider와 토스트 컨테이너
  */
-declare const ToastProvider: ({ children, maxCount }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ToastProvider: ({ children, maxCount, closeAriaLabel }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * 토스트 메시지를 표시하는 훅.
@@ -326,6 +328,12 @@ interface DatePickerProps {
      * @deprecated `fullWidth` 사용 또는 CSS로 처리
      */
     width?: number | string;
+    /** 연도 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Year") */
+    yearLabel?: string;
+    /** 월 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Month") */
+    monthLabel?: string;
+    /** 일 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Day") */
+    dayLabel?: string;
 }
 /**
  * 연/월/일 선택형 데이트 피커를 렌더링한다.
@@ -333,7 +341,7 @@ interface DatePickerProps {
  * @param props 데이트 피커 속성
  * @returns 렌더링된 데이트 피커 UI
  */
-declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     /** 현재 페이지 번호 (1-based) */
@@ -342,6 +350,10 @@ interface PaginationProps {
     totalPages: number;
     /** 페이지 변경 시 호출되는 콜백 */
     onChange: (page: number) => void;
+    /** 이전 페이지 버튼 aria-label (기본값: "Previous page") */
+    prevLabel?: string;
+    /** 다음 페이지 버튼 aria-label (기본값: "Next page") */
+    nextLabel?: string;
 }
 /**
  * 페이지네이션을 렌더링한다.
@@ -349,7 +361,7 @@ interface PaginationProps {
  * @param props 페이지네이션 속성
  * @returns 렌더링된 페이지네이션 UI
  */
-declare const Pagination: ({ page, totalPages, onChange }: 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"> {
     /** 모달 열림 여부 */

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import './index.css';
-import * as React6 from 'react';
+import * as React7 from 'react';
 import { createContext, useContext, useState, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -37,8 +37,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React6.useRef(null);
-  React6.useEffect(() => {
+  const previousActiveElement = React7.useRef(null);
+  React7.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -168,6 +168,8 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
+  const panelRef = React7.useRef(null);
+  useFocusTrap(panelRef, true);
   const modalClassName = [
     "alert_modal",
     `alert_variant_${variant}`
@@ -176,41 +178,50 @@ var AlertModal = ({
     "alert_actions",
     `alert_actions_${actionsAlign}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { className: "alert_overlay", onClick: onClose, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: modalClassName,
-      onClick: (e) => e.stopPropagation(),
-      role: "alertdialog",
-      "aria-modal": "true",
-      "aria-labelledby": "alert_title",
-      "aria-describedby": "alert_message",
-      children: [
-        title && /* @__PURE__ */ jsx("div", { className: "alert_title", id: "alert_title", children: title }),
-        message && /* @__PURE__ */ jsx("div", { className: "alert_message", id: "alert_message", children: message }),
-        /* @__PURE__ */ jsxs("div", { className: actionsClassName, children: [
-          showCancel && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "alert_button alert_button_cancel",
-              onClick: onCancel,
-              children: cancelText
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "alert_button alert_button_confirm",
-              onClick: onConfirm,
-              children: confirmText
-            }
-          )
-        ] })
-      ]
+      className: "alert_overlay",
+      onClick: onClose,
+      onKeyDown: (e) => e.key === "Escape" && onClose(),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          className: modalClassName,
+          onClick: (e) => e.stopPropagation(),
+          role: "alertdialog",
+          "aria-modal": "true",
+          "aria-labelledby": "alert_title",
+          "aria-describedby": "alert_message",
+          children: [
+            title && /* @__PURE__ */ jsx("div", { className: "alert_title", id: "alert_title", children: title }),
+            message && /* @__PURE__ */ jsx("div", { className: "alert_message", id: "alert_message", children: message }),
+            /* @__PURE__ */ jsxs("div", { className: actionsClassName, children: [
+              showCancel && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "alert_button alert_button_cancel",
+                  onClick: onCancel,
+                  children: cancelText
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "alert_button alert_button_confirm",
+                  onClick: onConfirm,
+                  children: confirmText
+                }
+              )
+            ] })
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 var Spinner = ({ size = 24, ariaLabel = "Loading" }) => {
   return /* @__PURE__ */ jsx(
@@ -258,7 +269,7 @@ var TopLoading = ({
     }
   );
 };
-var ToastContext = React6.createContext(null);
+var ToastContext = React7.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
   error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
@@ -266,10 +277,10 @@ var VARIANT_ICONS = {
   info: /* @__PURE__ */ jsx(Info, { size: 18 }),
   default: /* @__PURE__ */ jsx(Bell, { size: 18 })
 };
-var ToastItemComponent = ({ item, onRemove }) => {
-  const [exiting, setExiting] = React6.useState(false);
-  const closingRef = React6.useRef(false);
-  const close = React6.useCallback(() => {
+var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
+  const [exiting, setExiting] = React7.useState(false);
+  const closingRef = React7.useRef(false);
+  const close = React7.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setExiting(true);
@@ -283,7 +294,7 @@ var ToastItemComponent = ({ item, onRemove }) => {
     "div",
     {
       className: itemClassName,
-      role: "alert",
+      role: item.variant === "error" ? "alert" : "status",
       children: [
         /* @__PURE__ */ jsx("span", { className: `toast_icon toast_icon_${item.variant}`, "aria-hidden": "true", children: VARIANT_ICONS[item.variant] }),
         /* @__PURE__ */ jsx("span", { className: "toast_message", children: item.message }),
@@ -293,7 +304,7 @@ var ToastItemComponent = ({ item, onRemove }) => {
             type: "button",
             className: "toast_close",
             onClick: close,
-            "aria-label": "\uB2EB\uAE30",
+            "aria-label": closeAriaLabel,
             children: /* @__PURE__ */ jsx(X, { size: 14 })
           }
         ),
@@ -310,33 +321,43 @@ var ToastItemComponent = ({ item, onRemove }) => {
     }
   );
 };
-var ToastProvider = ({ children, maxCount = 5 }) => {
-  const [toasts, setToasts] = React6.useState([]);
-  const [isMounted, setIsMounted] = React6.useState(false);
-  React6.useEffect(() => {
+var ToastProvider = ({ children, maxCount = 5, closeAriaLabel = "Close" }) => {
+  const [toasts, setToasts] = React7.useState([]);
+  const [isMounted, setIsMounted] = React7.useState(false);
+  React7.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const addToast = React6.useCallback(
+  const addToast = React7.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React6.useCallback((id) => {
+  const removeToast = React7.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
     children,
     isMounted && createPortal(
-      /* @__PURE__ */ jsx("div", { className: "toast_container", children: toasts.map((item) => /* @__PURE__ */ jsx(
-        ToastItemComponent,
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          item,
-          onRemove: removeToast
-        },
-        item.id
-      )) }),
+          className: "toast_container",
+          "aria-live": "polite",
+          "aria-atomic": "false",
+          "aria-label": "Notifications",
+          children: toasts.map((item) => /* @__PURE__ */ jsx(
+            ToastItemComponent,
+            {
+              item,
+              onRemove: removeToast,
+              closeAriaLabel
+            },
+            item.id
+          ))
+        }
+      ),
       document.body
     )
   ] });
@@ -378,11 +399,11 @@ var Button = ({
   const buttonStyle = width ? { ...style, width } : style;
   return /* @__PURE__ */ jsx("button", { className: buttonClassName, style: buttonStyle, ...props });
 };
-var Checkbox = React6.forwardRef(
+var Checkbox = React7.forwardRef(
   ({ label, size = "md", indeterminate, className, ...props }, ref) => {
-    const inputRef = React6.useRef(null);
-    React6.useImperativeHandle(ref, () => inputRef.current);
-    React6.useEffect(() => {
+    const inputRef = React7.useRef(null);
+    React7.useImperativeHandle(ref, () => inputRef.current);
+    React7.useEffect(() => {
       if (!inputRef.current) return;
       inputRef.current.indeterminate = Boolean(indeterminate);
     }, [indeterminate]);
@@ -408,19 +429,19 @@ var Checkbox = React6.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var FileInput = ({
-  label = "\uD30C\uC77C \uC120\uD0DD",
+  label = "Choose file",
   onFiles,
   className,
   disabled,
   ...props
 }) => {
-  const inputId = React6.useId();
+  const inputId = React7.useId();
   const rootClassName = [
     "file_input",
     disabled && "file_input_disabled",
     className ?? ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { style: { cursor: "pointer" }, className: rootClassName, children: [
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -435,7 +456,7 @@ var FileInput = ({
     /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label })
   ] });
 };
-var Radio = React6.forwardRef(
+var Radio = React7.forwardRef(
   ({ label, size = "md", className, ...props }, ref) => {
     const rootClassName = cn(
       "radio",
@@ -465,21 +486,21 @@ var Select = ({
   className,
   textAlign = "left"
 }) => {
-  const internalId = React6.useId();
+  const internalId = React7.useId();
   const selectId = id ?? internalId;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React6.useState(defaultValue);
+  const [internalValue, setInternalValue] = React7.useState(defaultValue);
   const currentValue = isControlled ? value ?? null : internalValue;
-  const [isOpen, setIsOpen] = React6.useState(false);
-  const [activeIndex, setActiveIndex] = React6.useState(-1);
-  const [dropUp, setDropUp] = React6.useState(false);
-  const wrapperRef = React6.useRef(null);
-  const controlRef = React6.useRef(null);
-  const currentOption = React6.useMemo(
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const [activeIndex, setActiveIndex] = React7.useState(-1);
+  const [dropUp, setDropUp] = React7.useState(false);
+  const wrapperRef = React7.useRef(null);
+  const controlRef = React7.useRef(null);
+  const currentOption = React7.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
   );
-  const setValue = React6.useCallback(
+  const setValue = React7.useCallback(
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
       if (!isControlled) setInternalValue(next);
@@ -487,12 +508,12 @@ var Select = ({
     },
     [isControlled, onChange, options]
   );
-  const handleOutsideClick = React6.useEffectEvent((e) => {
+  const handleOutsideClick = React7.useEffectEvent((e) => {
     if (!wrapperRef.current?.contains(e.target)) {
       setIsOpen(false);
     }
   });
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, []);
@@ -557,12 +578,12 @@ var Select = ({
         break;
     }
   };
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!isOpen) return;
     const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
     setActiveIndex(idx >= 0 ? idx : Math.max(0, options.findIndex((o) => !o.disabled)));
   }, [isOpen, options, currentValue]);
-  React6.useLayoutEffect(() => {
+  React7.useLayoutEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
     const listHeight = Math.min(options.length * 40, 288);
@@ -644,7 +665,7 @@ var Select = ({
     )
   ] });
 };
-var Switch = React6.forwardRef(
+var Switch = React7.forwardRef(
   ({
     checked,
     defaultChecked,
@@ -656,7 +677,7 @@ var Switch = React6.forwardRef(
     ...props
   }, ref) => {
     const isControlled = checked !== void 0;
-    const [innerChecked, setInnerChecked] = React6.useState(!!defaultChecked);
+    const [innerChecked, setInnerChecked] = React7.useState(!!defaultChecked);
     const isOn = isControlled ? !!checked : innerChecked;
     const handleToggle = () => {
       if (disabled) return;
@@ -688,7 +709,7 @@ var Switch = React6.forwardRef(
   }
 );
 Switch.displayName = "Switch";
-var TextField = React6.forwardRef(
+var TextField = React7.forwardRef(
   ({
     id,
     label,
@@ -707,15 +728,15 @@ var TextField = React6.forwardRef(
     transformValue,
     ...props
   }, ref) => {
-    const inputId = id ?? React6.useId();
+    const inputId = id ?? React7.useId();
     const helperId = helperText ? `${inputId}-help` : void 0;
     const isControlled = value !== void 0;
     const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-    const [innerValue, setInnerValue] = React6.useState(
+    const [innerValue, setInnerValue] = React7.useState(
       () => applyTransform(value ?? defaultValue ?? "")
     );
-    const isComposingRef = React6.useRef(false);
-    React6.useEffect(() => {
+    const isComposingRef = React7.useRef(false);
+    React7.useEffect(() => {
       if (!isControlled) return;
       setInnerValue(applyTransform(value ?? ""));
     }, [isControlled, value, transformValue]);
@@ -799,8 +820,12 @@ var DatePicker = ({
   selectableRange = "all",
   disabled,
   fullWidth = true,
-  width
+  width,
+  yearLabel = "Year",
+  monthLabel = "Month",
+  dayLabel = "Day"
 }) => {
+  const groupId = React7.useId();
   const today = /* @__PURE__ */ new Date();
   const todayYear = today.getFullYear();
   const todayMonth = today.getMonth() + 1;
@@ -828,56 +853,64 @@ var DatePicker = ({
   const containerStyle = width ? { width: normalizeWidth(width) } : void 0;
   const rootClassName = cn("date_picker", { date_picker_full_width: fullWidth && !width });
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: containerStyle, children: [
-    label && /* @__PURE__ */ jsx("label", { className: "date_picker_label", children: label }),
-    /* @__PURE__ */ jsxs("div", { className: "date_picker_fields", children: [
-      /* @__PURE__ */ jsxs(
-        "select",
-        {
-          "aria-label": "\uC5F0\uB3C4",
-          value: year,
-          disabled,
-          onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
-          children: [
-            /* @__PURE__ */ jsx("option", { value: "", children: "\uC5F0\uB3C4" }),
-            Array.from(
-              { length: maxYear - startYear + 1 },
-              (_, i) => startYear + i
-            ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "select",
-        {
-          "aria-label": "\uC6D4",
-          value: month,
-          disabled: disabled || !year,
-          onChange: (e) => emit(year, Number(e.target.value), day || minDay),
-          children: [
-            /* @__PURE__ */ jsx("option", { value: "", children: "\uC6D4" }),
-            Array.from({ length: maxMonth - minMonth + 1 }, (_, i) => minMonth + i).map(
-              (m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2)
-            )
-          ]
-        }
-      ),
-      mode === "year-month-day" && /* @__PURE__ */ jsxs(
-        "select",
-        {
-          "aria-label": "\uC77C",
-          value: day,
-          disabled: disabled || !month,
-          onChange: (e) => emit(year, month, Number(e.target.value)),
-          children: [
-            /* @__PURE__ */ jsx("option", { value: "", children: "\uC77C" }),
-            Array.from(
-              { length: days - minDay + 1 },
-              (_, i) => minDay + i
-            ).map((d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2))
-          ]
-        }
-      )
-    ] })
+    label && /* @__PURE__ */ jsx("label", { className: "date_picker_label", id: groupId, children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "date_picker_fields",
+        role: "group",
+        "aria-labelledby": label ? groupId : void 0,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              "aria-label": yearLabel,
+              value: year,
+              disabled,
+              onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: yearLabel }),
+                Array.from(
+                  { length: maxYear - startYear + 1 },
+                  (_, i) => startYear + i
+                ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              "aria-label": monthLabel,
+              value: month,
+              disabled: disabled || !year,
+              onChange: (e) => emit(year, Number(e.target.value), day || minDay),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: monthLabel }),
+                Array.from({ length: maxMonth - minMonth + 1 }, (_, i) => minMonth + i).map(
+                  (m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2)
+                )
+              ]
+            }
+          ),
+          mode === "year-month-day" && /* @__PURE__ */ jsxs(
+            "select",
+            {
+              "aria-label": dayLabel,
+              value: day,
+              disabled: disabled || !month,
+              onChange: (e) => emit(year, month, Number(e.target.value)),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: dayLabel }),
+                Array.from(
+                  { length: days - minDay + 1 },
+                  (_, i) => minDay + i
+                ).map((d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2))
+              ]
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 var range = (start, end) => {
@@ -909,10 +942,10 @@ var getPaginationItems = (page, totalPages) => {
   items.push(last);
   return items;
 };
-var Pagination = ({ page, totalPages, onChange }) => {
+var Pagination = ({ page, totalPages, onChange, prevLabel = "Previous page", nextLabel = "Next page" }) => {
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React6.useMemo(
+  const items = React7.useMemo(
     () => getPaginationItems(page, totalPages),
     [page, totalPages]
   );
@@ -923,7 +956,7 @@ var Pagination = ({ page, totalPages, onChange }) => {
         className: "pagination_item",
         onClick: () => onChange(page - 1),
         disabled: prevDisabled,
-        "aria-label": "Previous page",
+        "aria-label": prevLabel,
         children: "\u2039"
       }
     ),
@@ -953,7 +986,7 @@ var Pagination = ({ page, totalPages, onChange }) => {
         className: "pagination_item",
         onClick: () => onChange(page + 1),
         disabled: nextDisabled,
-        "aria-label": "Next page",
+        "aria-label": nextLabel,
         children: "\u203A"
       }
     )
@@ -970,18 +1003,18 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React6.useRef(null);
-  const titleId = React6.useId();
+  const panelRef = React7.useRef(null);
+  const titleId = React7.useId();
   useFocusTrap(panelRef, open);
-  const handleEscape = React6.useEffectEvent((e) => {
+  const handleEscape = React7.useEffectEvent((e) => {
     if (e.key === "Escape") onClose?.();
   });
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!open) return;
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);

package/dist/next.js

@@ -75,7 +75,7 @@ var Sidebar = ({
                 Image,
                 {
                   src: "/images/sidebar/arrow-close.svg",
-                  alt: "Close",
+                  alt: "\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30",
                   width: 24,
                   height: 24
                 }
@@ -83,7 +83,7 @@ var Sidebar = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("nav", { className: "sidebar_nav", children: items.map((item) => {
+        /* @__PURE__ */ jsx("nav", { className: "sidebar_nav", "aria-label": "\uBA54\uC778 \uBA54\uB274", children: items.map((item) => {
           if (item.type === "group") {
             const open = openGroups.includes(item.id);
             const subClassName = [
@@ -130,6 +130,7 @@ var Sidebar = ({
                   {
                     href: child.href,
                     className: subItemClassName,
+                    "aria-current": active2 ? "page" : void 0,
                     onClick: () => onItemSelect?.(
                       child.href
                     ),
@@ -158,6 +159,7 @@ var Sidebar = ({
             {
               href: item.href,
               className: itemClassName,
+              "aria-current": active ? "page" : void 0,
               onClick: () => onItemSelect?.(item.href),
               children: /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
                 item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
@@ -177,7 +179,7 @@ var Sidebar = ({
             Image,
             {
               src: "/images/sidebar/menu.svg",
-              alt: "Open",
+              alt: "\uC0AC\uC774\uB4DC\uBC14 \uC5F4\uAE30",
               width: 24,
               height: 24
             }

package/dist/styles/scss/_colors.scss

@@ -40,6 +40,10 @@ $color_accent: #3B82F6;
 $color_accent_light: #60A5FA;
 $color_accent_dark: #2563EB;
 
+/* Hover */
+$color_hover_subtle: rgba(0, 0, 0, 0.03);
+$color_hover_light:  rgba(0, 0, 0, 0.05);
+
 /* Overlay */
 $color_overlay: rgba(0, 0, 0, 0.5);
 $color_overlay_light: rgba(0, 0, 0, 0.3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.19.3",
+  "version": "1.20.0",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -50,7 +50,12 @@
     "test": "vitest run --project unit",
     "test:watch": "vitest --project unit",
     "test:coverage": "vitest run --project unit --coverage",
-    "chromatic": "npx chromatic --project-token=chpt_2f758912f0dde5c --build-script-name=build:sb"
+    "chromatic": "npx chromatic --project-token=$CHROMATIC_TOKEN --build-script-name=build:sb",
+    "figma:test": "node scripts/figma-connect.mjs",
+    "figma:snapshot": "node scripts/figma-snapshot.mjs",
+    "figma:diff": "node scripts/figma-diff.mjs",
+    "figma:apply": "node scripts/figma-apply.mjs",
+    "size": "size-limit"
   },
   "keywords": [
     "design-system",
@@ -80,10 +85,11 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.1",
     "@semantic-release/npm": "^13.1.1",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-vitest": "10.1.11",
-    "@storybook/react": "10.1.11",
-    "@storybook/react-vite": "10.1.11",
+    "@size-limit/preset-small-lib": "^12.0.1",
+    "@storybook/addon-docs": "^10.2.17",
+    "@storybook/addon-vitest": "10.2.17",
+    "@storybook/react": "10.2.17",
+    "@storybook/react-vite": "10.2.17",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -103,7 +109,8 @@
     "react-dom": "19.2.0",
     "sass-embedded": "^1.93.3",
     "semantic-release": "^25.0.1",
-    "storybook": "10.1.11",
+    "size-limit": "^12.0.1",
+    "storybook": "10.2.17",
     "tsup": "^8.5.0",
     "typescript": "^5",
     "vite": "^5",
@@ -113,11 +120,23 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "12 kB"
+    },
+    {
+      "path": "dist/vanilla/bigtablet.min.js",
+      "limit": "5 kB"
+    }
+  ],
   "pnpm": {
     "overrides": {
       "rollup": "^4.59.0",
       "lodash": "^4.17.23",
-      "lodash-es": "^4.17.23"
+      "lodash-es": "^4.17.23",
+      "immutable": "^5.1.5",
+      "minimatch": "^10.2.4"
     }
   }
 }