@bigtablet/design-system 3.2.1 → 3.2.2

package/dist/index.css

@@ -7,7 +7,7 @@
   --bt-color-brand-primary-container: rgba(0, 0, 0, 0.05);
   --bt-color-text-heading: #121212;
   --bt-color-text-body: #666666;
-  --bt-color-text-caption: #888888;
+  --bt-color-text-caption: #6F6F6F;
   --bt-color-text-brand: #121212;
   --bt-color-text-inverse: #FFFFFF;
   --bt-color-text-disabled: rgba(26, 26, 26, 0.38);
@@ -72,7 +72,7 @@
   -moz-osx-font-smoothing: grayscale;
   --bt-color-text-heading: rgba(255, 255, 255, 0.95);
   --bt-color-text-body: #B3B3B3;
-  --bt-color-text-caption: #777777;
+  --bt-color-text-caption: #808080;
   --bt-color-text-inverse: #121212;
   --bt-color-text-disabled: rgba(255, 255, 255, 0.38);
   --bt-color-bg-solid: #0A0A0A;
@@ -130,7 +130,7 @@
     -moz-osx-font-smoothing: grayscale;
     --bt-color-text-heading: rgba(255, 255, 255, 0.95);
     --bt-color-text-body: #B3B3B3;
-    --bt-color-text-caption: #777777;
+    --bt-color-text-caption: #808080;
     --bt-color-text-inverse: #121212;
     --bt-color-text-disabled: rgba(255, 255, 255, 0.38);
     --bt-color-bg-solid: #0A0A0A;
@@ -830,6 +830,11 @@
   cursor: not-allowed;
   opacity: 0.38;
 }
+@media (prefers-reduced-motion: reduce) {
+  .menu_item {
+    transition: none;
+  }
+}
 
 /* src/ui/navigation/nav-bar/style.scss */
 @keyframes skeleton_loading {
@@ -1095,6 +1100,14 @@
 .nav_bar_variant_transparent .nav_bar_indicator {
   background: var(--bt-color-brand-on-primary);
 }
+@media (prefers-reduced-motion: reduce) {
+  .nav_bar_indicator_animated {
+    transition: none;
+  }
+  .nav_bar_locale_chevron {
+    transition: none;
+  }
+}
 
 /* src/ui/navigation/sidebar/style.scss */
 @keyframes skeleton_loading {
@@ -1392,6 +1405,19 @@
     clip: auto;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .sidebar,
+  .sidebar_header,
+  .sidebar_header_layer,
+  .sidebar_item,
+  .sidebar_item_label,
+  .sidebar_collapse_btn {
+    transition: none;
+  }
+  .sidebar_collapse_btn:hover {
+    transform: none;
+  }
+}
 
 /* src/ui/navigation/tabs/style.scss */
 @keyframes skeleton_loading {
@@ -1512,6 +1538,12 @@
   box-shadow: var(--bt-focus-ring);
   border-radius: 6px;
 }
+@media (prefers-reduced-motion: reduce) {
+  .tabs_indicator_animated,
+  .tabs_tab {
+    transition: none;
+  }
+}
 
 /* src/ui/overlay/popover/style.scss */
 @keyframes skeleton_loading {
@@ -1878,6 +1910,15 @@
 .button_danger.button_variant_text:hover:not(:disabled) {
   background: color-mix(in srgb, var(--bt-color-status-error) 8%, transparent);
 }
+@media (prefers-reduced-motion: reduce) {
+  .button,
+  .button::before {
+    transition: none;
+  }
+  .button:active {
+    transform: none;
+  }
+}
 
 /* src/ui/feedback/alert/style.scss */
 @keyframes skeleton_loading {
@@ -2252,6 +2293,11 @@
     transform: translate(-50%, -50%) scaleX(1);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .checkbox_icon::after {
+    animation: none;
+  }
+}
 
 /* src/ui/display/chip/style.scss */
 @keyframes skeleton_loading {
@@ -2753,6 +2799,11 @@
   border: none;
   margin: 0;
 }
+@media (prefers-reduced-motion: reduce) {
+  .dropdown_icon {
+    transition: none;
+  }
+}
 
 /* src/ui/forms/date-picker/style.scss */
 @keyframes skeleton_loading {
@@ -2993,6 +3044,14 @@
 .file_input_variant_preview .file_input_helper {
   display: block;
 }
+@media (prefers-reduced-motion: reduce) {
+  .file_input_preview_remove {
+    transition: none;
+  }
+  .file_input_preview_remove:hover {
+    transform: none;
+  }
+}
 
 /* src/ui/display/hero/style.scss */
 @keyframes skeleton_loading {
@@ -3653,6 +3712,14 @@
 .media_card_image_overlay .media_card_meta {
   color: rgba(255, 255, 255, 0.6);
 }
+@media (prefers-reduced-motion: reduce) {
+  .media_card {
+    transition: none;
+  }
+  .media_card_clickable:hover {
+    transform: none;
+  }
+}
 
 /* src/ui/overlay/modal/style.scss */
 @keyframes skeleton_loading {
@@ -4090,6 +4157,11 @@
     transform: translate(-50%, -50%) scale(1);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .radio_dot::after {
+    animation: none;
+  }
+}
 
 /* src/ui/feedback/skeleton/style.scss */
 @keyframes skeleton_loading {
@@ -4150,6 +4222,11 @@
     background-position: 0 0;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
 
 /* src/ui/feedback/spinner/style.scss */
 @keyframes skeleton_loading {
@@ -4952,6 +5029,12 @@
 .toggle_disabled .toggle_thumb {
   background: var(--bt-color-brand-on-primary);
 }
+@media (prefers-reduced-motion: reduce) {
+  .toggle,
+  .toggle_thumb {
+    transition: none;
+  }
+}
 
 /* src/ui/feedback/top-loading/style.scss */
 @keyframes skeleton_loading {
@@ -4988,6 +5071,14 @@
     transform: translateX(400%);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .top_loading_bar {
+    transition: none;
+  }
+  .top_loading_indeterminate {
+    animation: none;
+  }
+}
 
 /* src/ui/layout/container/style.scss */
 @keyframes skeleton_loading {

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import './index.css';
-import * as React19 from 'react';
+import * as React20 from 'react';
 import { createContext, useRef, useState, useLayoutEffect, useId, useEffect, useContext, useCallback, useMemo, Fragment } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { ChevronDown, Globe, ChevronRight, ChevronLeft, Check, Image, X, TriangleAlert, XCircle, AlertTriangle, CheckCircle2, Info, Bell } from 'lucide-react';
@@ -38,8 +38,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React19.useRef(null);
-  React19.useEffect(() => {
+  const previousActiveElement = React20.useRef(null);
+  React20.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -87,14 +87,48 @@ function useFocusTrap(containerRef, isActive) {
     };
   }, [isActive, containerRef]);
 }
+var QUERY = "(prefers-reduced-motion: reduce)";
+var mqCache = null;
+var cachedFor = null;
+function getMediaQuery() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    mqCache = null;
+    cachedFor = null;
+    return null;
+  }
+  if (!mqCache || cachedFor !== window.matchMedia) {
+    mqCache = window.matchMedia(QUERY);
+    cachedFor = window.matchMedia;
+  }
+  return mqCache;
+}
+function subscribe(onStoreChange) {
+  const mq = getMediaQuery();
+  if (!mq) return () => {
+  };
+  mq.addEventListener("change", onStoreChange);
+  return () => mq.removeEventListener("change", onStoreChange);
+}
+function getSnapshot() {
+  return getMediaQuery()?.matches ?? false;
+}
+function getServerSnapshot() {
+  return false;
+}
+function useReducedMotion() {
+  return React20.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
 var useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useSpringHover({
   scale = 1.02,
   lift = -2
 } = {}) {
-  const [hovered, setHovered] = React19.useState(false);
+  const [hovered, setHovered] = React20.useState(false);
+  const reduced = useReducedMotion();
   const style = useSpring({
     transform: hovered ? `translateY(${lift}px) scale(${scale})` : "translateY(0px) scale(1)",
+    // reduced-motion: lift/scale 모션 제거 (WCAG 2.3.3)
+    immediate: reduced,
     config: { tension: 320, friction: 22 }
   });
   const bind = {
@@ -110,12 +144,15 @@ function useSpringPresence({
   from = "translateY(8px)",
   onExitComplete
 }) {
+  const reduced = useReducedMotion();
   return useSpring({
     from: { opacity: 0, transform: from },
     to: {
       opacity: visible ? 1 : 0,
       transform: visible ? "translateY(0px)" : from
     },
+    // reduced-motion: 진입/퇴출 모션 없이 즉시 최종 상태로 점프 (WCAG 2.3.3). onRest는 그대로 발화.
+    immediate: reduced,
     config: {
       tension: 280,
       // Vercel 식 부드러운 spring
@@ -140,7 +177,7 @@ var Accordion = ({
   ...props
 }) => {
   const isControlled = controlledKeys !== void 0;
-  const [internalKeys, setInternalKeys] = React19.useState(defaultOpenKeys);
+  const [internalKeys, setInternalKeys] = React20.useState(defaultOpenKeys);
   const open = isControlled ? controlledKeys ?? [] : internalKeys;
   const toggle = (key) => {
     const isOpen = open.includes(key);
@@ -206,7 +243,7 @@ var Avatar = ({
   style,
   ...props
 }) => {
-  const [imgFailed, setImgFailed] = React19.useState(false);
+  const [imgFailed, setImgFailed] = React20.useState(false);
   const showImage = src && !imgFailed;
   const initials = getInitials(name);
   return /* @__PURE__ */ jsx(
@@ -424,11 +461,11 @@ var ErrorState = ({
   );
 };
 var Menu = ({ items, trigger, align = "start" }) => {
-  const [open, setOpen] = React19.useState(false);
-  const wrapperRef = React19.useRef(null);
-  const menuId = React19.useId();
+  const [open, setOpen] = React20.useState(false);
+  const wrapperRef = React20.useRef(null);
+  const menuId = React20.useId();
   const style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -443,7 +480,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
       document.removeEventListener("keydown", handleEsc);
     };
   }, [open]);
-  const triggerWithProps = React19.cloneElement(
+  const triggerWithProps = React20.cloneElement(
     trigger,
     {
       onClick: () => setOpen((o) => !o),
@@ -662,9 +699,9 @@ var Sidebar = ({
   ...props
 }) => {
   const isControlled = collapsedProp !== void 0;
-  const [internalCollapsed, setInternalCollapsed] = React19.useState(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = React20.useState(defaultCollapsed);
   const collapsed = isControlled ? collapsedProp : internalCollapsed;
-  const toggle = React19.useCallback(() => {
+  const toggle = React20.useCallback(() => {
     const next = !collapsed;
     if (!isControlled) setInternalCollapsed(next);
     onCollapsedChange?.(next);
@@ -737,9 +774,9 @@ var SidebarSection = ({ label, className, children, ...props }) => {
     children
   ] });
 };
-var TabsContext = React19.createContext(null);
+var TabsContext = React20.createContext(null);
 function useTabsContext() {
-  const ctx = React19.useContext(TabsContext);
+  const ctx = React20.useContext(TabsContext);
   if (!ctx) {
     throw new Error(
       '[Bigtablet DS] <Tab>, <TabList>, <TabPanel>\uC740 \uBC18\uB4DC\uC2DC <Tabs> \uC548\uC5D0 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.\n\n\uC62C\uBC14\uB978 \uC0AC\uC6A9 \uC608:\n  <Tabs defaultValue="a">\n    <TabList>\n      <Tab value="a">A</Tab>\n    </TabList>\n    <TabPanel value="a">...</TabPanel>\n  </Tabs>'
@@ -758,17 +795,17 @@ var Tabs = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React19.useState(defaultValue);
+  const [internalValue, setInternalValue] = React20.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const setValue = React19.useCallback(
+  const setValue = React20.useCallback(
     (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  const idPrefix = React19.useId();
-  const ctx = React19.useMemo(
+  const idPrefix = React20.useId();
+  const ctx = React20.useMemo(
     () => ({ value, setValue, variant, size, idPrefix }),
     [value, setValue, variant, size, idPrefix]
   );
@@ -776,10 +813,10 @@ var Tabs = ({
 };
 var TabList = ({ ariaLabel, className, children, ...props }) => {
   const { variant } = useTabsContext();
-  const listRef = React19.useRef(null);
-  const [indicator, setIndicator] = React19.useState(null);
-  const [hasMounted, setHasMounted] = React19.useState(false);
-  React19.useLayoutEffect(() => {
+  const listRef = React20.useRef(null);
+  const [indicator, setIndicator] = React20.useState(null);
+  const [hasMounted, setHasMounted] = React20.useState(false);
+  React20.useLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
     const update = () => {
@@ -927,15 +964,15 @@ var Popover = ({
   className
 }) => {
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = React19.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React20.useState(defaultOpen);
   const open = isControlled ? openProp : internalOpen;
-  const [shouldRender, setShouldRender] = React19.useState(open ?? false);
+  const [shouldRender, setShouldRender] = React20.useState(open ?? false);
   if (open && !shouldRender) setShouldRender(true);
-  const wrapperRef = React19.useRef(null);
-  const popoverRef = React19.useRef(null);
-  const previousFocusRef = React19.useRef(null);
-  const popoverId = React19.useId();
-  const setOpen = React19.useCallback(
+  const wrapperRef = React20.useRef(null);
+  const popoverRef = React20.useRef(null);
+  const previousFocusRef = React20.useRef(null);
+  const popoverId = React20.useId();
+  const setOpen = React20.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
@@ -955,7 +992,7 @@ var Popover = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform, onExitComplete: () => setShouldRender(false) });
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!open) return;
     previousFocusRef.current = document.activeElement;
     const node = popoverRef.current;
@@ -963,7 +1000,7 @@ var Popover = ({
     const focusable = node.querySelector(FOCUSABLE_SELECTORS2);
     (focusable ?? node).focus();
   }, [open]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -981,7 +1018,7 @@ var Popover = ({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, setOpen]);
-  const triggerWithProps = React19.cloneElement(
+  const triggerWithProps = React20.cloneElement(
     trigger,
     {
       onClick: (e) => {
@@ -1020,18 +1057,18 @@ var Tooltip = ({
   disabled = false,
   children
 }) => {
-  const [open, setOpen] = React19.useState(false);
-  const timerRef = React19.useRef(null);
-  const tooltipId = React19.useId();
-  const show = React19.useCallback(() => {
+  const [open, setOpen] = React20.useState(false);
+  const timerRef = React20.useRef(null);
+  const tooltipId = React20.useId();
+  const show = React20.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setOpen(true), delay);
   }, [delay]);
-  const hide = React19.useCallback(() => {
+  const hide = React20.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setOpen(false);
   }, []);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
@@ -1049,7 +1086,7 @@ var Tooltip = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform });
-  const trigger = React19.cloneElement(children, {
+  const trigger = React20.cloneElement(children, {
     onMouseEnter: show,
     onMouseLeave: hide,
     onFocus: show,
@@ -1634,12 +1671,12 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React19.useRef(null);
-  const titleId = React19.useId();
-  const messageId = React19.useId();
+  const panelRef = React20.useRef(null);
+  const titleId = React20.useId();
+  const messageId = React20.useId();
   const [shouldRender, setShouldRender] = useState(isOpen);
   useFocusTrap(panelRef, isOpen);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   const overlayStyle = useSpring({
@@ -1746,12 +1783,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React19.useRef(null);
-  React19.useImperativeHandle(
+  const inputRef = React20.useRef(null);
+  React20.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -2156,9 +2193,9 @@ var DatePicker = ({
   minDateSrFormat = "Minimum date: {date}",
   selectableRangeUntilTodaySrText = "Selectable up to today"
 }) => {
-  const groupId = React19.useId();
-  const constraintId = React19.useId();
-  const { todayYear, todayMonth, todayDay } = React19.useMemo(() => {
+  const groupId = React20.useId();
+  const constraintId = React20.useId();
+  const { todayYear, todayMonth, todayDay } = React20.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -2167,7 +2204,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React19.useMemo(() => {
+  const parsed = React20.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -2176,7 +2213,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React19.useMemo(() => {
+  const min = React20.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -2196,7 +2233,7 @@ var DatePicker = ({
       min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
     )
   );
-  const maxDay = React19.useMemo(() => {
+  const maxDay = React20.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -2204,28 +2241,28 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React19.useMemo(
+  const yearOptions = React20.useMemo(
     () => range(startYear, maxYear).map((y) => ({
       value: String(y),
       label: String(y)
     })),
     [startYear, maxYear]
   );
-  const monthOptions = React19.useMemo(
+  const monthOptions = React20.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
-  const dayOptions = React19.useMemo(
+  const dayOptions = React20.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
     [minDay, maxDay]
   );
-  const emit = React19.useCallback(
+  const emit = React20.useCallback(
     (yy, mm, dd) => {
       if (mode === "year-month") {
         onChange(`${yy}-${pad(mm)}`);
@@ -2236,7 +2273,7 @@ var DatePicker = ({
     },
     [mode, onChange]
   );
-  const handleYearChange = React19.useCallback(
+  const handleYearChange = React20.useCallback(
     (raw) => {
       if (!raw) return;
       const newYear = Number(raw);
@@ -2253,14 +2290,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React19.useCallback(
+  const handleMonthChange = React20.useCallback(
     (raw) => {
       if (!raw || !year) return;
       emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React19.useCallback(
+  const handleDayChange = React20.useCallback(
     (raw) => {
       if (!raw || !year || !month) return;
       emit(year, month, Number(raw));
@@ -2348,10 +2385,10 @@ var FileInput = ({
   onChange,
   ...props
 }) => {
-  const inputId = React19.useId();
-  const helperId = React19.useId();
-  const inputRef = React19.useRef(null);
-  const [previewUrls, setPreviewUrls] = React19.useState([]);
+  const inputId = React20.useId();
+  const helperId = React20.useId();
+  const inputRef = React20.useRef(null);
+  const [previewUrls, setPreviewUrls] = React20.useState([]);
   const isPreviewVariant = variant === "preview";
   const showPreview = isPreviewVariant || preview;
   const handleChange = (e) => {
@@ -2389,7 +2426,7 @@ var FileInput = ({
     }
     onFiles?.(null);
   };
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     return () => {
       for (const url of previewUrls) {
         URL.revokeObjectURL(url);
@@ -2686,11 +2723,11 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React19.useRef(null);
-  const titleId = React19.useId();
-  const [shouldRender, setShouldRender] = React19.useState(open);
+  const panelRef = React20.useRef(null);
+  const titleId = React20.useId();
+  const [shouldRender, setShouldRender] = React20.useState(open);
   useFocusTrap(panelRef, open);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (open) setShouldRender(true);
   }, [open]);
   const overlayStyle = useSpring({
@@ -2705,15 +2742,15 @@ var Modal = ({
     transform: open ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  const handleEscape = React19.useEffectEvent((e) => {
+  const handleEscape = React20.useEffectEvent((e) => {
     if (e.key === "Escape") onClose?.();
   });
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!open) return;
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -2793,12 +2830,12 @@ var OtpInput = ({
   ariaLabel = "OTP \uC785\uB825",
   className
 }) => {
-  const inputsRef = React19.useRef([]);
-  const isTypingRef = React19.useRef(false);
-  React19.useEffect(() => {
+  const inputsRef = React20.useRef([]);
+  const isTypingRef = React20.useRef(false);
+  React20.useEffect(() => {
     if (autoFocus) inputsRef.current[0]?.focus();
   }, [autoFocus]);
-  const digits = React19.useMemo(() => {
+  const digits = React20.useMemo(() => {
     const chars = value.split("").slice(0, length);
     while (chars.length < length) chars.push("");
     return chars;
@@ -2937,7 +2974,7 @@ var Pagination = ({
 }) => {
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React19.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  const items = React20.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -2982,9 +3019,9 @@ var Pagination = ({
     )
   ] });
 };
-var RadioGroupContext = React19.createContext(null);
+var RadioGroupContext = React20.createContext(null);
 function useRadioGroupContext() {
-  return React19.useContext(RadioGroupContext);
+  return React20.useContext(RadioGroupContext);
 }
 var RadioGroup = ({
   value: controlledValue,
@@ -3002,21 +3039,21 @@ var RadioGroup = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React19.useState(defaultValue);
+  const [internalValue, setInternalValue] = React20.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const generatedName = React19.useId();
+  const generatedName = React20.useId();
   const name = nameProp ?? generatedName;
-  const idPrefix = React19.useId();
+  const idPrefix = React20.useId();
   const labelId = label ? `${idPrefix}-label` : void 0;
   const helperId = supportingText ? `${idPrefix}-help` : void 0;
-  const onChange = React19.useCallback(
+  const onChange = React20.useCallback(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const ctx = React19.useMemo(
+  const ctx = React20.useMemo(
     () => ({ name, value, onChange, size, disabled }),
     [name, value, onChange, size, disabled]
   );
@@ -3214,9 +3251,9 @@ var Table = ({
     isEmpty && /* @__PURE__ */ jsx("div", { className: "table_empty", role: "status", children: emptyMessage })
   ] });
 };
-var ThemeContext = React19.createContext(null);
+var ThemeContext = React20.createContext(null);
 var useTheme = () => {
-  const ctx = React19.useContext(ThemeContext);
+  const ctx = React20.useContext(ThemeContext);
   if (!ctx) {
     throw new Error(
       '[Bigtablet DS] useTheme\uB294 <ThemeProvider> \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4.\n\n\uC571 \uCD5C\uC0C1\uB2E8\uC5D0 <ThemeProvider>\uB85C \uAC10\uC2F8\uC8FC\uC138\uC694:\n  <ThemeProvider mode="system">\n    <YourApp />\n  </ThemeProvider>'
@@ -3240,14 +3277,14 @@ var ThemeProvider = ({
   targetSelector,
   children
 }) => {
-  const [mode, setModeState] = React19.useState(() => {
+  const [mode, setModeState] = React20.useState(() => {
     return readStored(storageKey) ?? defaultMode;
   });
-  const [systemDark, setSystemDark] = React19.useState(() => {
+  const [systemDark, setSystemDark] = React20.useState(() => {
     if (!isClient) return false;
     return window.matchMedia("(prefers-color-scheme: dark)").matches;
   });
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!isClient) return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => setSystemDark(e.matches);
@@ -3255,7 +3292,7 @@ var ThemeProvider = ({
     return () => mq.removeEventListener("change", handler);
   }, []);
   const resolved = mode === "system" ? systemDark ? "dark" : "light" : mode;
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!isClient) return;
     const target = targetSelector ? document.querySelector(targetSelector) : document.documentElement;
     if (!target) return;
@@ -3265,7 +3302,7 @@ var ThemeProvider = ({
       target.setAttribute("data-theme", mode);
     }
   }, [mode, targetSelector]);
-  const setMode = React19.useCallback(
+  const setMode = React20.useCallback(
     (next) => {
       setModeState(next);
       if (storageKey && isClient) {
@@ -3277,7 +3314,7 @@ var ThemeProvider = ({
     },
     [storageKey]
   );
-  const value = React19.useMemo(
+  const value = React20.useMemo(
     () => ({ mode, resolved, setMode }),
     [mode, resolved, setMode]
   );
@@ -3523,7 +3560,7 @@ var Textarea = ({
   ] });
 };
 Textarea.displayName = "Textarea";
-var ToastContext = React19.createContext(null);
+var ToastContext = React20.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
   error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
@@ -3532,15 +3569,15 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: 18 })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [visible, setVisible] = React19.useState(true);
-  const closingRef = React19.useRef(false);
+  const [visible, setVisible] = React20.useState(true);
+  const closingRef = React20.useRef(false);
   const style = useSpringPresence({
     visible,
     from: "translateX(20px)",
     // 우측에서 슬라이드 인
     onExitComplete: () => onRemove(item.id)
   });
-  const close = React19.useCallback(() => {
+  const close = React20.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setVisible(false);
@@ -3573,19 +3610,19 @@ var ToastProvider = ({
   maxCount = 5,
   closeAriaLabel = "Close"
 }) => {
-  const [toasts, setToasts] = React19.useState([]);
-  const [isMounted, setIsMounted] = React19.useState(false);
-  React19.useEffect(() => {
+  const [toasts, setToasts] = React20.useState([]);
+  const [isMounted, setIsMounted] = React20.useState(false);
+  React20.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const addToast = React19.useCallback(
+  const addToast = React20.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React19.useCallback((id) => {
+  const removeToast = React20.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
@@ -3647,7 +3684,7 @@ var Toggle = ({
   ...props
 }) => {
   const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React19.useState(!!defaultChecked);
+  const [innerChecked, setInnerChecked] = React20.useState(!!defaultChecked);
   const isOn = isControlled ? !!checked : innerChecked;
   const handleToggle = () => {
     if (disabled) return;

package/dist/styles/colors/_index.scss

@@ -32,6 +32,11 @@ $color_base_neutral_800:      #333333;
 $color_base_neutral_900:      #121212;
 $color_base_neutral_925:      #141414;  // dark panel/card bg (Vercel-style)
 $color_base_neutral_950:      #0A0A0A;  // darkest page bg (Vercel-style)
+
+// Text caption - AA 전용값 (neutral scale 과 분리: neutral_500/600 은 border-hover 등 재사용되므로 caption 만 따로)
+$color_base_text_caption_light: #6F6F6F;  // on #fff 5.0:1 / on #F4F4F4 4.57:1 (WCAG AA)
+$color_base_text_caption_dark:  #808080;  // on #0A0A0A 5.0:1 / on #141414 4.66:1 (WCAG AA)
+
 // Status - light mode default (darkened for AA on #fff text, 5+:1)
 // 이전 값 (#EF4444 등) 은 #fff 텍스트 조합 시 AA 미달 (2.0~3.7:1) - Tailwind 700 계열로 교체.
 $color_base_status_error:     #B91C1C;  // red-700, with #fff = 6.4:1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.2.1",
+	"version": "3.2.2",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",