@bigtablet/design-system 3.1.1 → 3.2.1

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 import './index.css';
-import * as React17 from 'react';
+import * as React19 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, XCircle, AlertTriangle, CheckCircle2, Info, Bell } from 'lucide-react';
+import { ChevronDown, Globe, ChevronRight, ChevronLeft, Check, Image, X, TriangleAlert, XCircle, AlertTriangle, CheckCircle2, Info, Bell } from 'lucide-react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -38,8 +38,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React17.useRef(null);
-  React17.useEffect(() => {
+  const previousActiveElement = React19.useRef(null);
+  React19.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -87,11 +87,12 @@ function useFocusTrap(containerRef, isActive) {
     };
   }, [isActive, containerRef]);
 }
+var useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useSpringHover({
   scale = 1.02,
   lift = -2
 } = {}) {
-  const [hovered, setHovered] = React17.useState(false);
+  const [hovered, setHovered] = React19.useState(false);
   const style = useSpring({
     transform: hovered ? `translateY(${lift}px) scale(${scale})` : "translateY(0px) scale(1)",
     config: { tension: 320, friction: 22 }
@@ -139,7 +140,7 @@ var Accordion = ({
   ...props
 }) => {
   const isControlled = controlledKeys !== void 0;
-  const [internalKeys, setInternalKeys] = React17.useState(defaultOpenKeys);
+  const [internalKeys, setInternalKeys] = React19.useState(defaultOpenKeys);
   const open = isControlled ? controlledKeys ?? [] : internalKeys;
   const toggle = (key) => {
     const isOpen = open.includes(key);
@@ -205,7 +206,7 @@ var Avatar = ({
   style,
   ...props
 }) => {
-  const [imgFailed, setImgFailed] = React17.useState(false);
+  const [imgFailed, setImgFailed] = React19.useState(false);
   const showImage = src && !imgFailed;
   const initials = getInitials(name);
   return /* @__PURE__ */ jsx(
@@ -217,7 +218,7 @@ var Avatar = ({
       "aria-label": showImage ? void 0 : name || void 0,
       ...props,
       children: showImage ? (
-        // biome-ignore lint/performance/noImgElement: DS is framework-agnostic — consumers wrap with next/image
+        // biome-ignore lint/performance/noImgElement: DS is framework-agnostic - consumers wrap with next/image
         /* @__PURE__ */ jsx(
           "img",
           {
@@ -235,6 +236,7 @@ var Badge = ({
   variant = "accent",
   shape = "label",
   size = "md",
+  appearance = "solid",
   count,
   max = 99,
   className,
@@ -256,6 +258,7 @@ var Badge = ({
         `badge_variant_${variant}`,
         `badge_shape_${shape}`,
         `badge_size_${size}`,
+        `badge_appearance_${appearance}`,
         className
       ),
       ...props,
@@ -391,12 +394,41 @@ var EmptyState = ({
     action && /* @__PURE__ */ jsx("div", { className: "empty_state_action", children: action })
   ] });
 };
+var DEFAULT_ICON_SIZE = {
+  page: 48,
+  widget: 28
+};
+var ErrorState = ({
+  title = "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4",
+  description,
+  icon,
+  action,
+  variant = "page",
+  className,
+  ...props
+}) => {
+  const resolvedIcon = icon === null ? null : icon ?? /* @__PURE__ */ jsx(TriangleAlert, { size: DEFAULT_ICON_SIZE[variant], strokeWidth: 1.5 });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("error_state", `error_state_variant_${variant}`, className),
+      role: "alert",
+      ...props,
+      children: [
+        resolvedIcon && /* @__PURE__ */ jsx("div", { className: "error_state_icon", "aria-hidden": "true", children: resolvedIcon }),
+        title && /* @__PURE__ */ jsx("h3", { className: "error_state_title", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "error_state_description", children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: "error_state_action", children: action })
+      ]
+    }
+  );
+};
 var Menu = ({ items, trigger, align = "start" }) => {
-  const [open, setOpen] = React17.useState(false);
-  const wrapperRef = React17.useRef(null);
-  const menuId = React17.useId();
+  const [open, setOpen] = React19.useState(false);
+  const wrapperRef = React19.useRef(null);
+  const menuId = React19.useId();
   const style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -411,7 +443,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
       document.removeEventListener("keydown", handleEsc);
     };
   }, [open]);
-  const triggerWithProps = React17.cloneElement(
+  const triggerWithProps = React19.cloneElement(
     trigger,
     {
       onClick: () => setOpen((o) => !o),
@@ -630,9 +662,9 @@ var Sidebar = ({
   ...props
 }) => {
   const isControlled = collapsedProp !== void 0;
-  const [internalCollapsed, setInternalCollapsed] = React17.useState(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = React19.useState(defaultCollapsed);
   const collapsed = isControlled ? collapsedProp : internalCollapsed;
-  const toggle = React17.useCallback(() => {
+  const toggle = React19.useCallback(() => {
     const next = !collapsed;
     if (!isControlled) setInternalCollapsed(next);
     onCollapsedChange?.(next);
@@ -705,9 +737,9 @@ var SidebarSection = ({ label, className, children, ...props }) => {
     children
   ] });
 };
-var TabsContext = React17.createContext(null);
+var TabsContext = React19.createContext(null);
 function useTabsContext() {
-  const ctx = React17.useContext(TabsContext);
+  const ctx = React19.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>'
@@ -726,17 +758,17 @@ var Tabs = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React17.useState(defaultValue);
+  const [internalValue, setInternalValue] = React19.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const setValue = React17.useCallback(
+  const setValue = React19.useCallback(
     (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  const idPrefix = React17.useId();
-  const ctx = React17.useMemo(
+  const idPrefix = React19.useId();
+  const ctx = React19.useMemo(
     () => ({ value, setValue, variant, size, idPrefix }),
     [value, setValue, variant, size, idPrefix]
   );
@@ -744,10 +776,10 @@ var Tabs = ({
 };
 var TabList = ({ ariaLabel, className, children, ...props }) => {
   const { variant } = useTabsContext();
-  const listRef = React17.useRef(null);
-  const [indicator, setIndicator] = React17.useState(null);
-  const [hasMounted, setHasMounted] = React17.useState(false);
-  React17.useLayoutEffect(() => {
+  const listRef = React19.useRef(null);
+  const [indicator, setIndicator] = React19.useState(null);
+  const [hasMounted, setHasMounted] = React19.useState(false);
+  React19.useLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
     const update = () => {
@@ -875,6 +907,112 @@ var TabPanel = ({
     }
   );
 };
+var FOCUSABLE_SELECTORS2 = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+var Popover = ({
+  trigger,
+  content,
+  placement = "bottom",
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  className
+}) => {
+  const isControlled = openProp !== void 0;
+  const [internalOpen, setInternalOpen] = React19.useState(defaultOpen);
+  const open = isControlled ? openProp : internalOpen;
+  const [shouldRender, setShouldRender] = React19.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(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const fromTransform = (() => {
+    switch (placement) {
+      case "top":
+        return "translateY(4px)";
+      case "bottom":
+        return "translateY(-4px)";
+      case "left":
+        return "translateX(4px)";
+      case "right":
+        return "translateX(-4px)";
+    }
+  })();
+  const style = useSpringPresence({ visible: open, from: fromTransform, onExitComplete: () => setShouldRender(false) });
+  React19.useEffect(() => {
+    if (!open) return;
+    previousFocusRef.current = document.activeElement;
+    const node = popoverRef.current;
+    if (!node) return;
+    const focusable = node.querySelector(FOCUSABLE_SELECTORS2);
+    (focusable ?? node).focus();
+  }, [open]);
+  React19.useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      if (!wrapperRef.current?.contains(e.target)) setOpen(false);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        previousFocusRef.current?.focus();
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, setOpen]);
+  const triggerWithProps = React19.cloneElement(
+    trigger,
+    {
+      onClick: (e) => {
+        trigger.props.onClick?.(e);
+        if (e.defaultPrevented) return;
+        setOpen(!open);
+      },
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": open ? popoverId : void 0
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "popover_wrapper", ref: wrapperRef, children: [
+    triggerWithProps,
+    shouldRender && /* @__PURE__ */ jsx("div", { className: cn("popover_position", `popover_placement_${placement}`), children: /* @__PURE__ */ jsx(
+      animated.div,
+      {
+        id: popoverId,
+        ref: popoverRef,
+        role: "dialog",
+        tabIndex: -1,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        style,
+        className: cn("popover", className),
+        children: content
+      }
+    ) })
+  ] });
+};
+Popover.displayName = "Popover";
 var Tooltip = ({
   content,
   placement = "top",
@@ -882,18 +1020,18 @@ var Tooltip = ({
   disabled = false,
   children
 }) => {
-  const [open, setOpen] = React17.useState(false);
-  const timerRef = React17.useRef(null);
-  const tooltipId = React17.useId();
-  const show = React17.useCallback(() => {
+  const [open, setOpen] = React19.useState(false);
+  const timerRef = React19.useRef(null);
+  const tooltipId = React19.useId();
+  const show = React19.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setOpen(true), delay);
   }, [delay]);
-  const hide = React17.useCallback(() => {
+  const hide = React19.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setOpen(false);
   }, []);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
@@ -911,7 +1049,7 @@ var Tooltip = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform });
-  const trigger = React17.cloneElement(children, {
+  const trigger = React19.cloneElement(children, {
     onMouseEnter: show,
     onMouseLeave: hide,
     onFocus: show,
@@ -988,21 +1126,12 @@ var baseColors = {
   neutral700: "#666666",
   neutral800: "#333333",
   neutral900: "#121212",
+  neutral925: "#141414",
+  neutral950: "#0A0A0A",
   statusError: "#EF4444",
   statusSuccess: "#10B981",
   statusWarning: "#F59E0B",
   statusInfo: "#3B82F6",
-  // Navy — Bigtablet 초기 홈페이지 컬러. #47555E 메인 navy + sky blue 패밀리.
-  navy50: "#F2F5F8",
-  navy100: "#DDE3E9",
-  navy200: "#B4C2CD",
-  navy300: "#7AA5D2",
-  navy400: "#5A8DCB",
-  navy500: "#4C7CB6",
-  navy600: "#47555E",
-  navy700: "#3D4852",
-  navy800: "#303841",
-  navy900: "#1F2630",
   alphaBlack5: "rgba(0, 0, 0, 0.05)",
   alphaBlack8: "rgba(0, 0, 0, 0.08)",
   alphaBlack12: "rgba(26, 26, 26, 0.12)",
@@ -1052,13 +1181,13 @@ var colors = {
     warning: baseColors.statusWarning,
     info: baseColors.statusInfo
   },
-  // Accent (Bigtablet navy) — 메인 brand 검정과 함께 B2C/마케팅 강조에 사용.
+  // Accent (brand 검정 기반 - light=검정, dark=흰색 반전)
   accent: {
-    subtle: baseColors.navy50,
-    muted: baseColors.navy100,
-    light: baseColors.navy300,
-    default: baseColors.navy600,
-    strong: baseColors.navy800,
+    subtle: baseColors.alphaBlack5,
+    muted: baseColors.alphaBlack12,
+    light: baseColors.neutral400,
+    default: baseColors.brandPrimary,
+    strong: baseColors.neutral900,
     onSurface: baseColors.neutral0
   }
 };
@@ -1505,12 +1634,12 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React17.useRef(null);
-  const titleId = React17.useId();
-  const messageId = React17.useId();
+  const panelRef = React19.useRef(null);
+  const titleId = React19.useId();
+  const messageId = React19.useId();
   const [shouldRender, setShouldRender] = useState(isOpen);
   useFocusTrap(panelRef, isOpen);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   const overlayStyle = useSpring({
@@ -1588,6 +1717,9 @@ var Card = ({
   padding = "md",
   bordered = false,
   variant = "default",
+  interactive = false,
+  footer,
+  footerAlign = "end",
   className,
   children,
   ...props
@@ -1597,12 +1729,13 @@ var Card = ({
     `card_shadow_${shadow}`,
     `card_p_${padding}`,
     variant !== "default" && `card_variant_${variant}`,
-    { card_bordered: bordered },
+    { card_bordered: bordered, card_interactive: interactive },
     className
   );
   return /* @__PURE__ */ jsxs("div", { className: cardClassName, ...props, children: [
     heading ? /* @__PURE__ */ jsx(HeadingTag, { className: "card_title", children: heading }) : null,
-    /* @__PURE__ */ jsx("div", { className: "card_body", children })
+    /* @__PURE__ */ jsx("div", { className: "card_body", children }),
+    footer ? /* @__PURE__ */ jsx("div", { className: cn("card_footer", `card_footer_${footerAlign}`), children: footer }) : null
   ] });
 };
 var Checkbox = ({
@@ -1613,12 +1746,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React17.useRef(null);
-  React17.useImperativeHandle(
+  const inputRef = React19.useRef(null);
+  React19.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -2023,9 +2156,9 @@ var DatePicker = ({
   minDateSrFormat = "Minimum date: {date}",
   selectableRangeUntilTodaySrText = "Selectable up to today"
 }) => {
-  const groupId = React17.useId();
-  const constraintId = React17.useId();
-  const { todayYear, todayMonth, todayDay } = React17.useMemo(() => {
+  const groupId = React19.useId();
+  const constraintId = React19.useId();
+  const { todayYear, todayMonth, todayDay } = React19.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -2034,7 +2167,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React17.useMemo(() => {
+  const parsed = React19.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -2043,7 +2176,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React17.useMemo(() => {
+  const min = React19.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -2063,7 +2196,7 @@ var DatePicker = ({
       min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
     )
   );
-  const maxDay = React17.useMemo(() => {
+  const maxDay = React19.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -2071,28 +2204,28 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React17.useMemo(
+  const yearOptions = React19.useMemo(
     () => range(startYear, maxYear).map((y) => ({
       value: String(y),
       label: String(y)
     })),
     [startYear, maxYear]
   );
-  const monthOptions = React17.useMemo(
+  const monthOptions = React19.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
-  const dayOptions = React17.useMemo(
+  const dayOptions = React19.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
     [minDay, maxDay]
   );
-  const emit = React17.useCallback(
+  const emit = React19.useCallback(
     (yy, mm, dd) => {
       if (mode === "year-month") {
         onChange(`${yy}-${pad(mm)}`);
@@ -2103,7 +2236,7 @@ var DatePicker = ({
     },
     [mode, onChange]
   );
-  const handleYearChange = React17.useCallback(
+  const handleYearChange = React19.useCallback(
     (raw) => {
       if (!raw) return;
       const newYear = Number(raw);
@@ -2120,14 +2253,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React17.useCallback(
+  const handleMonthChange = React19.useCallback(
     (raw) => {
       if (!raw || !year) return;
       emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React17.useCallback(
+  const handleDayChange = React19.useCallback(
     (raw) => {
       if (!raw || !year || !month) return;
       emit(year, month, Number(raw));
@@ -2215,10 +2348,10 @@ var FileInput = ({
   onChange,
   ...props
 }) => {
-  const inputId = React17.useId();
-  const helperId = React17.useId();
-  const inputRef = React17.useRef(null);
-  const [previewUrls, setPreviewUrls] = React17.useState([]);
+  const inputId = React19.useId();
+  const helperId = React19.useId();
+  const inputRef = React19.useRef(null);
+  const [previewUrls, setPreviewUrls] = React19.useState([]);
   const isPreviewVariant = variant === "preview";
   const showPreview = isPreviewVariant || preview;
   const handleChange = (e) => {
@@ -2256,7 +2389,7 @@ var FileInput = ({
     }
     onFiles?.(null);
   };
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     return () => {
       for (const url of previewUrls) {
         URL.revokeObjectURL(url);
@@ -2293,7 +2426,7 @@ var FileInput = ({
         className: "file_input_label",
         style: { width: previewSize, height: previewSize },
         children: hasImage ? (
-          // biome-ignore lint/performance/noImgElement: framework-agnostic DS — host app should swap with next/image if needed
+          // biome-ignore lint/performance/noImgElement: framework-agnostic DS - host app should swap with next/image if needed
           /* @__PURE__ */ jsx(
             "img",
             {
@@ -2320,7 +2453,7 @@ var FileInput = ({
     ),
     supportingText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: supportingText }),
     !isPreviewVariant && previewUrls.length > 0 && /* @__PURE__ */ jsx("div", { className: "file_input_preview", children: previewUrls.map((url) => (
-      // biome-ignore lint/performance/noImgElement: framework-agnostic DS — host app should swap with next/image if needed
+      // biome-ignore lint/performance/noImgElement: framework-agnostic DS - host app should swap with next/image if needed
       /* @__PURE__ */ jsx(
         "img",
         {
@@ -2351,7 +2484,7 @@ var Hero = ({
   ...props
 }) => {
   const resolvedOverlay = overlay === true ? "dark" : overlay;
-  const isDarkOverlay = resolvedOverlay === "dark" || resolvedOverlay === "navy";
+  const isDarkOverlay = resolvedOverlay === "dark";
   const resolvedTextColor = textColor === "auto" ? isDarkOverlay || backgroundImage && !resolvedOverlay ? "inverse" : "default" : textColor;
   const heroClassName = cn(
     "hero",
@@ -2466,7 +2599,7 @@ var ListItem = ({
     className
   );
   return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: optional interactive list item — role=button + tabIndex set conditionally based on onClick
+    // biome-ignore lint/a11y/noStaticElementInteractions: optional interactive list item - role=button + tabIndex set conditionally based on onClick
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -2487,10 +2620,10 @@ var ListItem = ({
         children: /* @__PURE__ */ jsxs("div", { className: "list_item_state_layer", children: [
           leadingElement && /* @__PURE__ */ jsx("div", { className: "list_item_leading", children: leadingElement }),
           /* @__PURE__ */ jsxs("div", { className: "list_item_content", children: [
-            overline && /* @__PURE__ */ jsx("span", { className: "list_item_overline", children: overline }),
-            /* @__PURE__ */ jsx("span", { className: "list_item_label", children: label }),
-            supportingText && /* @__PURE__ */ jsx("span", { className: "list_item_supporting", children: supportingText }),
-            metadata && /* @__PURE__ */ jsx("span", { className: "list_item_metadata", children: metadata })
+            overline && /* @__PURE__ */ jsx("div", { className: "list_item_overline", children: overline }),
+            /* @__PURE__ */ jsx("div", { className: "list_item_label", children: label }),
+            supportingText && /* @__PURE__ */ jsx("div", { className: "list_item_supporting", children: supportingText }),
+            metadata && /* @__PURE__ */ jsx("div", { className: "list_item_metadata", children: metadata })
           ] }),
           trailingElement && /* @__PURE__ */ jsx("div", { className: "list_item_trailing", children: trailingElement })
         ] })
@@ -2553,11 +2686,11 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React17.useRef(null);
-  const titleId = React17.useId();
-  const [shouldRender, setShouldRender] = React17.useState(open);
+  const panelRef = React19.useRef(null);
+  const titleId = React19.useId();
+  const [shouldRender, setShouldRender] = React19.useState(open);
   useFocusTrap(panelRef, open);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (open) setShouldRender(true);
   }, [open]);
   const overlayStyle = useSpring({
@@ -2572,15 +2705,15 @@ var Modal = ({
     transform: open ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  const handleEscape = React17.useEffectEvent((e) => {
+  const handleEscape = React19.useEffectEvent((e) => {
     if (e.key === "Escape") onClose?.();
   });
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open]);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -2660,12 +2793,12 @@ var OtpInput = ({
   ariaLabel = "OTP \uC785\uB825",
   className
 }) => {
-  const inputsRef = React17.useRef([]);
-  const isTypingRef = React17.useRef(false);
-  React17.useEffect(() => {
+  const inputsRef = React19.useRef([]);
+  const isTypingRef = React19.useRef(false);
+  React19.useEffect(() => {
     if (autoFocus) inputsRef.current[0]?.focus();
   }, [autoFocus]);
-  const digits = React17.useMemo(() => {
+  const digits = React19.useMemo(() => {
     const chars = value.split("").slice(0, length);
     while (chars.length < length) chars.push("");
     return chars;
@@ -2804,7 +2937,7 @@ var Pagination = ({
 }) => {
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React17.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  const items = React19.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -2849,15 +2982,110 @@ var Pagination = ({
     )
   ] });
 };
-var Radio = ({ label, size = "md", className, ref, ...props }) => {
-  const rootClassName = cn(
-    "radio",
-    `radio_size_${size}`,
-    props.disabled && "radio_disabled",
-    className
+var RadioGroupContext = React19.createContext(null);
+function useRadioGroupContext() {
+  return React19.useContext(RadioGroupContext);
+}
+var RadioGroup = ({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  name: nameProp,
+  label,
+  supportingText,
+  error = false,
+  size = "md",
+  orientation = "vertical",
+  disabled = false,
+  className,
+  children,
+  ...props
+}) => {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = React19.useState(defaultValue);
+  const value = isControlled ? controlledValue : internalValue;
+  const generatedName = React19.useId();
+  const name = nameProp ?? generatedName;
+  const idPrefix = React19.useId();
+  const labelId = label ? `${idPrefix}-label` : void 0;
+  const helperId = supportingText ? `${idPrefix}-help` : void 0;
+  const onChange = React19.useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const ctx = React19.useMemo(
+    () => ({ name, value, onChange, size, disabled }),
+    [name, value, onChange, size, disabled]
   );
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "radio_group",
+        `radio_group_orientation_${orientation}`,
+        error && "radio_group_error",
+        className
+      ),
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsx("span", { id: labelId, className: "radio_group_label", children: label }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "radiogroup",
+            "aria-labelledby": labelId,
+            "aria-describedby": helperId,
+            "aria-invalid": error || void 0,
+            className: "radio_group_options",
+            children
+          }
+        ),
+        supportingText && /* @__PURE__ */ jsx("div", { id: helperId, className: "radio_group_helper", children: supportingText })
+      ]
+    }
+  ) });
+};
+RadioGroup.displayName = "RadioGroup";
+var Radio = ({
+  label,
+  size: sizeProp,
+  className,
+  ref,
+  value,
+  checked,
+  onChange,
+  name: nameProp,
+  disabled: disabledProp,
+  ...props
+}) => {
+  const group = useRadioGroupContext();
+  const size = sizeProp ?? group?.size ?? "md";
+  const name = nameProp ?? group?.name;
+  const disabled = disabledProp ?? group?.disabled;
+  const resolvedChecked = group ? group.value === value : checked;
+  const handleChange = (event) => {
+    if (group && value !== void 0) group.onChange(String(value));
+    onChange?.(event);
+  };
+  const rootClassName = cn("radio", `radio_size_${size}`, disabled && "radio_disabled", className);
   return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
-    /* @__PURE__ */ jsx("input", { ref, type: "radio", className: "radio_input", ...props }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "radio",
+        className: "radio_input",
+        value,
+        name,
+        disabled,
+        checked: resolvedChecked,
+        onChange: handleChange,
+        ...props
+      }
+    ),
     /* @__PURE__ */ jsx("span", { className: "radio_state_layer", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "radio_dot" }) }),
     label ? /* @__PURE__ */ jsx("span", { className: "radio_label", children: label }) : null
   ] });
@@ -2986,9 +3214,9 @@ var Table = ({
     isEmpty && /* @__PURE__ */ jsx("div", { className: "table_empty", role: "status", children: emptyMessage })
   ] });
 };
-var ThemeContext = React17.createContext(null);
+var ThemeContext = React19.createContext(null);
 var useTheme = () => {
-  const ctx = React17.useContext(ThemeContext);
+  const ctx = React19.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>'
@@ -3012,14 +3240,14 @@ var ThemeProvider = ({
   targetSelector,
   children
 }) => {
-  const [mode, setModeState] = React17.useState(() => {
+  const [mode, setModeState] = React19.useState(() => {
     return readStored(storageKey) ?? defaultMode;
   });
-  const [systemDark, setSystemDark] = React17.useState(() => {
+  const [systemDark, setSystemDark] = React19.useState(() => {
     if (!isClient) return false;
     return window.matchMedia("(prefers-color-scheme: dark)").matches;
   });
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (!isClient) return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => setSystemDark(e.matches);
@@ -3027,7 +3255,7 @@ var ThemeProvider = ({
     return () => mq.removeEventListener("change", handler);
   }, []);
   const resolved = mode === "system" ? systemDark ? "dark" : "light" : mode;
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (!isClient) return;
     const target = targetSelector ? document.querySelector(targetSelector) : document.documentElement;
     if (!target) return;
@@ -3037,7 +3265,7 @@ var ThemeProvider = ({
       target.setAttribute("data-theme", mode);
     }
   }, [mode, targetSelector]);
-  const setMode = React17.useCallback(
+  const setMode = React19.useCallback(
     (next) => {
       setModeState(next);
       if (storageKey && isClient) {
@@ -3049,7 +3277,7 @@ var ThemeProvider = ({
     },
     [storageKey]
   );
-  const value = React17.useMemo(
+  const value = React19.useMemo(
     () => ({ mode, resolved, setMode }),
     [mode, resolved, setMode]
   );
@@ -3069,6 +3297,7 @@ var TextField = ({
   size = "md",
   className,
   onChangeAction,
+  imeStrategy = "delayed",
   value,
   defaultValue,
   transformValue,
@@ -3084,15 +3313,27 @@ var TextField = ({
     () => applyTransform(value ?? defaultValue ?? "")
   );
   const isComposingRef = useRef(false);
-  useEffect(() => {
-    if (!isControlled) return;
-    const nextValue = value ?? "";
-    setInnerValue(transformValue ? transformValue(nextValue) : nextValue);
-  }, [isControlled, value, transformValue]);
+  const lastEmittedValueRef = useRef(innerValue);
+  const [prevValue, setPrevValue] = useState(value);
+  if (isControlled && value !== prevValue && !isComposingRef.current) {
+    setPrevValue(value);
+    const nextValue = applyTransform(value ?? "");
+    setInnerValue(nextValue);
+    lastEmittedValueRef.current = nextValue;
+  }
+  const emit = useCallback(
+    (nextValue) => {
+      setInnerValue(nextValue);
+      if (nextValue !== lastEmittedValueRef.current) {
+        lastEmittedValueRef.current = nextValue;
+        onChangeAction?.(nextValue);
+      }
+    },
+    [onChangeAction]
+  );
   const handleClear = useCallback(() => {
-    setInnerValue("");
-    onChangeAction?.("");
-  }, [onChangeAction]);
+    emit("");
+  }, [emit]);
   const rootClassName = cn(
     "text_field",
     size === "sm" && "text_field_size_sm",
@@ -3130,20 +3371,19 @@ var TextField = ({
               },
               onCompositionEnd: (event) => {
                 isComposingRef.current = false;
-                const rawValue = event.currentTarget.value;
-                const nextValue = applyTransform(rawValue);
-                setInnerValue(nextValue);
-                onChangeAction?.(nextValue);
+                emit(applyTransform(event.currentTarget.value));
               },
               onChange: (event) => {
                 const rawValue = event.target.value;
                 if (isComposingRef.current) {
                   setInnerValue(rawValue);
+                  if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
+                    lastEmittedValueRef.current = rawValue;
+                    onChangeAction?.(rawValue);
+                  }
                   return;
                 }
-                const nextValue = applyTransform(rawValue);
-                setInnerValue(nextValue);
-                onChangeAction?.(nextValue);
+                emit(applyTransform(rawValue));
               }
             }
           )
@@ -3155,7 +3395,135 @@ var TextField = ({
   ] });
 };
 TextField.displayName = "TextField";
-var ToastContext = React17.createContext(null);
+var LINE_HEIGHT_PX = {
+  sm: 20,
+  md: 20,
+  lg: 24
+};
+var Textarea = ({
+  id,
+  label,
+  showLabel = true,
+  supportingText,
+  error,
+  fullWidth,
+  size = "md",
+  className,
+  onChangeAction,
+  imeStrategy = "delayed",
+  value,
+  defaultValue,
+  transformValue,
+  rows = 3,
+  minRows,
+  maxRows,
+  showCounter,
+  resize = "vertical",
+  maxLength,
+  ref,
+  ...props
+}) => {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const helperId = supportingText ? `${inputId}-help` : void 0;
+  const isControlled = value !== void 0;
+  const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
+  const [innerValue, setInnerValue] = useState(
+    () => applyTransform(value ?? defaultValue ?? "")
+  );
+  const isComposingRef = useRef(false);
+  const innerRef = useRef(null);
+  const lastEmittedValueRef = useRef(innerValue);
+  const autoGrow = minRows !== void 0 || maxRows !== void 0;
+  const [prevValue, setPrevValue] = useState(value);
+  if (isControlled && value !== prevValue && !isComposingRef.current) {
+    setPrevValue(value);
+    const nextValue = applyTransform(value ?? "");
+    setInnerValue(nextValue);
+    lastEmittedValueRef.current = nextValue;
+  }
+  const setRefs = useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  useSafeLayoutEffect(() => {
+    if (!autoGrow) return;
+    const el = innerRef.current;
+    if (!el) return;
+    const lh2 = LINE_HEIGHT_PX[size];
+    const minH = minRows ? minRows * lh2 : 0;
+    const maxH = maxRows ? maxRows * lh2 : Number.POSITIVE_INFINITY;
+    el.style.height = "auto";
+    const next = Math.min(Math.max(el.scrollHeight, minH), maxH);
+    el.style.height = `${next}px`;
+    el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
+  }, [innerValue, autoGrow, size, minRows, maxRows]);
+  const rootClassName = cn(
+    "textarea",
+    size === "sm" && "textarea_size_sm",
+    size === "lg" && "textarea_size_lg",
+    fullWidth && "textarea_full_width",
+    error && "textarea_error",
+    props.disabled && "textarea_disabled",
+    className
+  );
+  const counterText = showCounter && maxLength !== void 0 ? `${innerValue.length}/${maxLength}` : showCounter ? String(innerValue.length) : null;
+  const emit = (nextValue) => {
+    setInnerValue(nextValue);
+    if (nextValue !== lastEmittedValueRef.current) {
+      lastEmittedValueRef.current = nextValue;
+      onChangeAction?.(nextValue);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
+    label && showLabel && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "textarea_label", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "textarea_container", children: /* @__PURE__ */ jsx("div", { className: "textarea_input_wrap", children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id: inputId,
+        ref: setRefs,
+        className: "textarea_input",
+        style: { resize: autoGrow ? "none" : resize },
+        rows: autoGrow ? minRows ?? rows : rows,
+        maxLength,
+        "aria-invalid": !!error,
+        "aria-describedby": helperId,
+        "aria-label": !showLabel ? label : void 0,
+        ...props,
+        value: innerValue,
+        onCompositionStart: () => {
+          isComposingRef.current = true;
+        },
+        onCompositionEnd: (event) => {
+          isComposingRef.current = false;
+          emit(applyTransform(event.currentTarget.value));
+        },
+        onChange: (event) => {
+          const rawValue = event.target.value;
+          if (isComposingRef.current) {
+            setInnerValue(rawValue);
+            if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
+              lastEmittedValueRef.current = rawValue;
+              onChangeAction?.(rawValue);
+            }
+            return;
+          }
+          emit(applyTransform(rawValue));
+        }
+      }
+    ) }) }),
+    (supportingText || counterText) && /* @__PURE__ */ jsxs("div", { className: "textarea_footer", children: [
+      supportingText ? /* @__PURE__ */ jsx("div", { id: helperId, className: "textarea_helper", children: supportingText }) : /* @__PURE__ */ jsx("span", {}),
+      counterText && /* @__PURE__ */ jsx("div", { className: "textarea_counter", "aria-hidden": "true", children: counterText })
+    ] })
+  ] });
+};
+Textarea.displayName = "Textarea";
+var ToastContext = React19.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
   error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
@@ -3164,15 +3532,15 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: 18 })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [visible, setVisible] = React17.useState(true);
-  const closingRef = React17.useRef(false);
+  const [visible, setVisible] = React19.useState(true);
+  const closingRef = React19.useRef(false);
   const style = useSpringPresence({
     visible,
     from: "translateX(20px)",
     // 우측에서 슬라이드 인
     onExitComplete: () => onRemove(item.id)
   });
-  const close = React17.useCallback(() => {
+  const close = React19.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setVisible(false);
@@ -3205,19 +3573,19 @@ var ToastProvider = ({
   maxCount = 5,
   closeAriaLabel = "Close"
 }) => {
-  const [toasts, setToasts] = React17.useState([]);
-  const [isMounted, setIsMounted] = React17.useState(false);
-  React17.useEffect(() => {
+  const [toasts, setToasts] = React19.useState([]);
+  const [isMounted, setIsMounted] = React19.useState(false);
+  React19.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const addToast = React17.useCallback(
+  const addToast = React19.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React17.useCallback((id) => {
+  const removeToast = React19.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
@@ -3279,7 +3647,7 @@ var Toggle = ({
   ...props
 }) => {
   const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React17.useState(!!defaultChecked);
+  const [innerChecked, setInnerChecked] = React19.useState(!!defaultChecked);
   const isOn = isControlled ? !!checked : innerChecked;
   const handleToggle = () => {
     if (disabled) return;
@@ -3441,4 +3809,4 @@ var Grid = ({
   );
 };
 
-export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Dropdown, EmptyState, FileInput, Grid, Hero, Icon, IconButton, LinearProgress, ListItem, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, Pagination, Radio, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Tab, TabList, TabPanel, Table, Tabs, TextField, ThemeProvider, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Dropdown, EmptyState, ErrorState, FileInput, Grid, Hero, Icon, IconButton, LinearProgress, ListItem, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, Pagination, Popover, Radio, RadioGroup, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Tab, TabList, TabPanel, Table, Tabs, TextField, Textarea, ThemeProvider, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };