@bigtablet/design-system 3.7.0 → 3.9.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import './index.css';
-import * as React15 from 'react';
+import * as React16 from 'react';
 import { createContext, useRef, useState, useId, useEffect, useContext, useCallback, useMemo, Fragment, useImperativeHandle, useLayoutEffect } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { ChevronDown, ChevronRight, Globe, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, XCircle, AlertTriangle, CheckCircle2, Info, Bell, Search, Check, Image, X, TriangleAlert } from 'lucide-react';
@@ -58,15 +58,137 @@ function registerOverlay(onEscape) {
   };
 }
 function useOverlayEscape(active, onEscape) {
-  const handlerRef = React15.useRef(onEscape);
-  React15.useEffect(() => {
+  const handlerRef = React16.useRef(onEscape);
+  React16.useEffect(() => {
     handlerRef.current = onEscape;
   });
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!active) return;
     return registerOverlay(() => handlerRef.current());
   }, [active]);
 }
+var useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+// src/utils/use-anchored-position.ts
+var OPPOSITE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+var isVertical = (side) => side === "top" || side === "bottom";
+var clamp = (value, min, max) => (
+  // max < min(가용 공간이 플로팅보다 작을 때)이면 min(가장자리 여백)에 고정.
+  Math.max(min, Math.min(max, value))
+);
+var mainAxisStart = (side, anchor, floating, gap) => {
+  switch (side) {
+    case "top":
+      return anchor.top - gap - floating.height;
+    case "bottom":
+      return anchor.top + anchor.height + gap;
+    case "left":
+      return anchor.left - gap - floating.width;
+    case "right":
+      return anchor.left + anchor.width + gap;
+  }
+};
+var fitsMainAxis = (side, anchor, floating, viewport, gap, padding) => {
+  const start = mainAxisStart(side, anchor, floating, gap);
+  switch (side) {
+    case "top":
+      return start >= padding;
+    case "bottom":
+      return start + floating.height <= viewport.height - padding;
+    case "left":
+      return start >= padding;
+    case "right":
+      return start + floating.width <= viewport.width - padding;
+  }
+};
+function computeAnchoredPosition(anchor, floating, viewport, options) {
+  const gap = options.gap ?? 8;
+  const padding = options.padding;
+  const available = viewport.width - padding * 2;
+  const maxWidth = available;
+  const sized = {
+    width: Math.min(floating.width, available),
+    height: floating.height
+  };
+  let side = options.placement;
+  if (!fitsMainAxis(side, anchor, sized, viewport, gap, padding) && fitsMainAxis(OPPOSITE[side], anchor, sized, viewport, gap, padding)) {
+    side = OPPOSITE[side];
+  }
+  let x;
+  let y;
+  if (isVertical(side)) {
+    y = mainAxisStart(side, anchor, sized, gap);
+    x = anchor.left + anchor.width / 2 - sized.width / 2;
+    x = clamp(x, padding, viewport.width - padding - sized.width);
+  } else {
+    x = mainAxisStart(side, anchor, sized, gap);
+    y = anchor.top + anchor.height / 2 - sized.height / 2;
+    y = clamp(y, padding, viewport.height - padding - sized.height);
+  }
+  return { x, y, placement: side, maxWidth };
+}
+function useAnchoredPosition({
+  open,
+  anchorRef,
+  floatingRef,
+  placement,
+  gap,
+  padding
+}) {
+  const [state, setState] = React16.useState({
+    x: 0,
+    y: 0,
+    placement,
+    maxWidth: 0,
+    ready: false
+  });
+  useSafeLayoutEffect(() => {
+    if (!open) {
+      setState((prev) => prev.ready ? { ...prev, ready: false } : prev);
+      return;
+    }
+    const anchor = anchorRef.current;
+    const floating = floatingRef.current;
+    if (!anchor || !floating) return;
+    const update = () => {
+      const a = anchor.getBoundingClientRect();
+      const f = floating.getBoundingClientRect();
+      const result = computeAnchoredPosition(
+        { top: a.top, left: a.left, width: a.width, height: a.height },
+        { width: f.width, height: f.height },
+        { width: window.innerWidth, height: window.innerHeight },
+        { placement, gap, padding }
+      );
+      setState({ ...result, ready: true });
+    };
+    let frame = 0;
+    const schedule = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        update();
+      });
+    };
+    update();
+    window.addEventListener("scroll", schedule, true);
+    window.addEventListener("resize", schedule);
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(schedule) : null;
+    observer?.observe(floating);
+    observer?.observe(anchor);
+    return () => {
+      if (frame) cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      observer?.disconnect();
+    };
+  }, [open, placement, gap, padding, anchorRef, floatingRef]);
+  return state;
+}
 var FOCUSABLE_SELECTORS = [
   "a[href]",
   "button:not([disabled])",
@@ -76,8 +198,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React15.useRef(null);
-  React15.useEffect(() => {
+  const previousActiveElement = React16.useRef(null);
+  React16.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -126,8 +248,8 @@ function useFocusTrap(containerRef, isActive) {
   }, [isActive, containerRef]);
 }
 function useIsMounted() {
-  const [mounted, setMounted] = React15.useState(false);
-  React15.useEffect(() => {
+  const [mounted, setMounted] = React16.useState(false);
+  React16.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
@@ -161,14 +283,13 @@ function getServerSnapshot() {
   return false;
 }
 function useReducedMotion() {
-  return React15.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return React16.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
-var useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useSpringHover({
   scale = 1.02,
   lift = -2
 } = {}) {
-  const [hovered, setHovered] = React15.useState(false);
+  const [hovered, setHovered] = React16.useState(false);
   const reduced = useReducedMotion();
   const style = useSpring({
     transform: hovered ? `translateY(${lift}px) scale(${scale})` : "translateY(0px) scale(1)",
@@ -232,9 +353,9 @@ var Accordion = ({
   ...props
 }) => {
   const isControlled = controlledKeys !== void 0;
-  const [internalKeys, setInternalKeys] = React15.useState(defaultOpenKeys);
+  const [internalKeys, setInternalKeys] = React16.useState(defaultOpenKeys);
   const open = isControlled ? controlledKeys ?? [] : internalKeys;
-  const idPrefix = React15.useId();
+  const idPrefix = React16.useId();
   const toggle = (key) => {
     const isOpen = open.includes(key);
     const next = isOpen ? open.filter((k) => k !== key) : multiple ? [...open, key] : [key];
@@ -300,7 +421,7 @@ var Avatar = ({
   style,
   ...props
 }) => {
-  const [imgFailed, setImgFailed] = React15.useState(false);
+  const [imgFailed, setImgFailed] = React16.useState(false);
   const showImage = src && !imgFailed;
   const initials = getInitials(name);
   return /* @__PURE__ */ jsx(
@@ -519,12 +640,12 @@ var Breadcrumb = ({
   }) }) });
 };
 var Menu = ({ items, trigger, align = "start" }) => {
-  const [open, setOpen] = React15.useState(false);
-  const wrapperRef = React15.useRef(null);
-  const itemRefs = React15.useRef([]);
-  const menuId = React15.useId();
+  const [open, setOpen] = React16.useState(false);
+  const wrapperRef = React16.useRef(null);
+  const itemRefs = React16.useRef([]);
+  const menuId = React16.useId();
   const style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -539,7 +660,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
       document.removeEventListener("keydown", handleEsc);
     };
   }, [open]);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     const active = document.activeElement;
     if (!open || active && itemRefs.current.includes(active)) return;
     const first = items.findIndex((it) => !it.disabled);
@@ -585,7 +706,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
         break;
     }
   };
-  const triggerWithProps = React15.cloneElement(
+  const triggerWithProps = React16.cloneElement(
     trigger,
     {
       onClick: () => setOpen((o) => !o),
@@ -727,6 +848,7 @@ var LocaleSwitcher = ({ locale }) => {
   const itemRefs = useRef([]);
   const menuId = useId();
   const currentOption = locale.options.find((o) => o.value === locale.current);
+  const currentLabel = currentOption?.label ?? locale.current.toUpperCase();
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -800,10 +922,11 @@ var LocaleSwitcher = ({ locale }) => {
         "aria-haspopup": "menu",
         "aria-expanded": open,
         "aria-controls": menuId,
+        "aria-label": locale.ariaLabel ?? currentLabel,
         onClick: () => setOpen((p) => !p),
         children: [
           /* @__PURE__ */ jsx(Globe, { size: iconSize.sm, "aria-hidden": "true" }),
-          !locale.hideLabel && /* @__PURE__ */ jsx("span", { className: "nav_bar_locale_label", children: currentOption?.label ?? locale.current.toUpperCase() }),
+          !locale.hideLabel && /* @__PURE__ */ jsx("span", { className: "nav_bar_locale_label", children: currentLabel }),
           /* @__PURE__ */ jsx(
             ChevronDown,
             {
@@ -876,9 +999,9 @@ var Sidebar = ({
   ...props
 }) => {
   const isControlled = collapsedProp !== void 0;
-  const [internalCollapsed, setInternalCollapsed] = React15.useState(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = React16.useState(defaultCollapsed);
   const collapsed = isControlled ? collapsedProp : internalCollapsed;
-  const toggle = React15.useCallback(() => {
+  const toggle = React16.useCallback(() => {
     const next = !collapsed;
     if (!isControlled) setInternalCollapsed(next);
     onCollapsedChange?.(next);
@@ -951,9 +1074,9 @@ var SidebarSection = ({ label, className, children, ...props }) => {
     children
   ] });
 };
-var TabsContext = React15.createContext(null);
+var TabsContext = React16.createContext(null);
 function useTabsContext() {
-  const ctx = React15.useContext(TabsContext);
+  const ctx = React16.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>'
@@ -972,18 +1095,18 @@ var Tabs = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React15.useState(defaultValue);
+  const [internalValue, setInternalValue] = React16.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const setValue = React15.useCallback(
+  const setValue = React16.useCallback(
     (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  const orderRef = React15.useRef([]);
-  const [firstTabValue, setFirstTabValue] = React15.useState();
-  const registerTab = React15.useCallback((v) => {
+  const orderRef = React16.useRef([]);
+  const [firstTabValue, setFirstTabValue] = React16.useState();
+  const registerTab = React16.useCallback((v) => {
     if (!orderRef.current.includes(v)) {
       orderRef.current = [...orderRef.current, v];
       setFirstTabValue(orderRef.current[0]);
@@ -993,8 +1116,8 @@ var Tabs = ({
       setFirstTabValue(orderRef.current[0]);
     };
   }, []);
-  const idPrefix = React15.useId();
-  const ctx = React15.useMemo(
+  const idPrefix = React16.useId();
+  const ctx = React16.useMemo(
     () => ({ value, setValue, variant, size, idPrefix, registerTab, firstTabValue }),
     [value, setValue, variant, size, idPrefix, registerTab, firstTabValue]
   );
@@ -1002,9 +1125,9 @@ var Tabs = ({
 };
 var TabList = ({ ariaLabel, className, children, ...props }) => {
   const { variant } = useTabsContext();
-  const listRef = React15.useRef(null);
-  const [indicator, setIndicator] = React15.useState(null);
-  const [hasMounted, setHasMounted] = React15.useState(false);
+  const listRef = React16.useRef(null);
+  const [indicator, setIndicator] = React16.useState(null);
+  const [hasMounted, setHasMounted] = React16.useState(false);
   useSafeLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
@@ -1067,7 +1190,7 @@ var Tab = ({ value, className, children, onClick, onKeyDown, ...props }) => {
   const panelId = `${ctx.idPrefix}-panel-${value}`;
   const tabId = `${ctx.idPrefix}-tab-${value}`;
   const { registerTab } = ctx;
-  React15.useEffect(() => registerTab(value), [registerTab, value]);
+  React16.useEffect(() => registerTab(value), [registerTab, value]);
   const handleClick = (e) => {
     ctx.setValue(value);
     onClick?.(e);
@@ -1137,14 +1260,7 @@ 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_GAP = 8;
 var Popover = ({
   trigger,
   content,
@@ -1157,23 +1273,31 @@ var Popover = ({
   className
 }) => {
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = React15.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React16.useState(defaultOpen);
   const open = isControlled ? openProp : internalOpen;
-  const [shouldRender, setShouldRender] = React15.useState(open ?? false);
+  const [shouldRender, setShouldRender] = React16.useState(open ?? false);
   if (open && !shouldRender) setShouldRender(true);
-  const wrapperRef = React15.useRef(null);
-  const popoverRef = React15.useRef(null);
-  const previousFocusRef = React15.useRef(null);
-  const popoverId = React15.useId();
-  const setOpen = React15.useCallback(
+  const wrapperRef = React16.useRef(null);
+  const positionRef = React16.useRef(null);
+  const popoverRef = React16.useRef(null);
+  const popoverId = React16.useId();
+  const setOpen = React16.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
     },
     [isControlled, onOpenChange]
   );
+  const pos = useAnchoredPosition({
+    open: shouldRender,
+    anchorRef: wrapperRef,
+    floatingRef: positionRef,
+    placement,
+    gap: POPOVER_GAP,
+    padding: 8
+  });
   const fromTransform = (() => {
-    switch (placement) {
+    switch (pos.placement) {
       case "top":
         return "translateY(4px)";
       case "bottom":
@@ -1184,28 +1308,27 @@ var Popover = ({
         return "translateX(-4px)";
     }
   })();
-  const style = useSpringPresence({ visible: open, from: fromTransform, onExitComplete: () => setShouldRender(false) });
-  React15.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]);
-  React15.useEffect(() => {
+  const style = useSpringPresence({
+    visible: open,
+    from: fromTransform,
+    onExitComplete: () => setShouldRender(false)
+  });
+  useFocusTrap(popoverRef, open);
+  React16.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
-      if (!wrapperRef.current?.contains(e.target)) setOpen(false);
+      const target = e.target;
+      if (!wrapperRef.current?.contains(target) && !popoverRef.current?.contains(target)) {
+        setOpen(false);
+      }
     };
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open, setOpen]);
   useOverlayEscape(open, () => {
     setOpen(false);
-    previousFocusRef.current?.focus();
   });
-  const triggerWithProps = React15.cloneElement(
+  const triggerWithProps = React16.cloneElement(
     trigger,
     {
       onClick: (e) => {
@@ -1220,23 +1343,43 @@ var Popover = ({
   );
   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
-      }
-    ) })
+    shouldRender && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: positionRef,
+          className: "popover_position",
+          style: {
+            position: "fixed",
+            left: pos.x,
+            top: pos.y,
+            // 최초 측정 전(ready=false)에는 maxWidth(=0)를 걸지 않는다 - 걸면 자연 폭 대신
+            // 0px 로 측정돼 첫 프레임 좌표가 어긋난다. ready 후에만 상한 적용.
+            maxWidth: pos.ready ? pos.maxWidth : void 0,
+            visibility: pos.ready ? void 0 : "hidden"
+          },
+          children: /* @__PURE__ */ jsx(
+            animated.div,
+            {
+              id: popoverId,
+              ref: popoverRef,
+              role: "dialog",
+              tabIndex: -1,
+              "aria-label": ariaLabelledby ? ariaLabel : ariaLabel ?? "Dialog",
+              "aria-labelledby": ariaLabelledby,
+              style,
+              className: cn("popover", className),
+              children: content
+            }
+          )
+        }
+      ),
+      document.body
+    )
   ] });
 };
 Popover.displayName = "Popover";
+var TOOLTIP_GAP = 6;
 var Tooltip = ({
   content,
   placement = "top",
@@ -1244,33 +1387,45 @@ var Tooltip = ({
   disabled = false,
   children
 }) => {
-  const [open, setOpen] = React15.useState(false);
-  const timerRef = React15.useRef(null);
-  const tooltipId = React15.useId();
+  const [open, setOpen] = React16.useState(false);
+  const [shouldRender, setShouldRender] = React16.useState(false);
+  if (open && !shouldRender) setShouldRender(true);
+  const timerRef = React16.useRef(null);
+  const tooltipId = React16.useId();
+  const wrapperRef = React16.useRef(null);
+  const positionRef = React16.useRef(null);
   const HIDE_DELAY = 120;
-  const show = React15.useCallback(() => {
+  const show = React16.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setOpen(true), delay);
   }, [delay]);
-  const hideNow = React15.useCallback(() => {
+  const hideNow = React16.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setOpen(false);
   }, []);
-  const hide = React15.useCallback(() => {
+  const hide = React16.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setOpen(false), HIDE_DELAY);
   }, []);
-  const cancelHide = React15.useCallback(() => {
+  const cancelHide = React16.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
   useOverlayEscape(open, hideNow);
+  const pos = useAnchoredPosition({
+    open: shouldRender,
+    anchorRef: wrapperRef,
+    floatingRef: positionRef,
+    placement,
+    gap: TOOLTIP_GAP,
+    padding: 8
+  });
   const fromTransform = (() => {
-    switch (placement) {
+    switch (pos.placement) {
       case "top":
         return "translateY(4px)";
       case "bottom":
@@ -1281,10 +1436,14 @@ var Tooltip = ({
         return "translateX(-4px)";
     }
   })();
-  const style = useSpringPresence({ visible: open, from: fromTransform });
+  const style = useSpringPresence({
+    visible: open,
+    from: fromTransform,
+    onExitComplete: () => setShouldRender(false)
+  });
   const child = children;
   const childProps = child.props;
-  const trigger = React15.cloneElement(child, {
+  const trigger = React16.cloneElement(child, {
     onMouseEnter: (e) => {
       childProps.onMouseEnter?.(e);
       show();
@@ -1305,25 +1464,29 @@ var Tooltip = ({
     "aria-describedby": open ? [childProps["aria-describedby"], tooltipId].filter(Boolean).join(" ") : childProps["aria-describedby"]
   });
   if (disabled) return children;
-  return /* @__PURE__ */ jsxs("span", { className: "tooltip_wrapper", children: [
+  return /* @__PURE__ */ jsxs("span", { className: "tooltip_wrapper", ref: wrapperRef, children: [
     trigger,
-    open && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("tooltip_position", `tooltip_placement_${placement}`),
-        onMouseEnter: cancelHide,
-        onMouseLeave: hide,
-        children: /* @__PURE__ */ jsx(
-          animated.span,
-          {
-            id: tooltipId,
-            role: "tooltip",
-            style,
-            className: cn("tooltip", `tooltip_placement_${placement}`),
-            children: content
-          }
-        )
-      }
+    shouldRender && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: positionRef,
+          className: "tooltip_position",
+          style: {
+            position: "fixed",
+            left: pos.x,
+            top: pos.y,
+            // 최초 측정 전(ready=false)에는 maxWidth(=0)를 걸지 않는다 - 걸면 자연 폭 대신
+            // 0px 로 측정돼 첫 프레임 좌표가 어긋난다. ready 후에만 상한 적용.
+            maxWidth: pos.ready ? pos.maxWidth : void 0,
+            visibility: pos.ready ? void 0 : "hidden"
+          },
+          onMouseEnter: cancelHide,
+          onMouseLeave: hide,
+          children: /* @__PURE__ */ jsx(animated.span, { id: tooltipId, role: "tooltip", style, className: "tooltip", children: content })
+        }
+      ),
+      document.body
     )
   ] });
 };
@@ -2251,12 +2414,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React15.useRef(null);
-  React15.useImperativeHandle(
+  const inputRef = React16.useRef(null);
+  React16.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -2314,8 +2477,8 @@ var Table = ({
   const isEmpty = !isLoading && data.length === 0;
   const getRowKey = (item, index) => rowKey?.(item) ?? String(index);
   const allRowKeys = selectable ? data.map((item, index) => getRowKey(item, index)) : [];
-  const rowClickHintId = React15.useId();
-  const selectedSet = React15.useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
+  const rowClickHintId = React16.useId();
+  const selectedSet = React16.useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
   const selectedCount = allRowKeys.filter((key) => selectedSet.has(key)).length;
   const isAllSelected = allRowKeys.length > 0 && selectedCount === allRowKeys.length;
   const isSomeSelected = selectedCount > 0 && !isAllSelected;
@@ -2538,9 +2701,9 @@ var AlertModal = ({
   onClose
 }) => {
   const dismiss = onCancel ?? onClose;
-  const panelRef = React15.useRef(null);
-  const titleId = React15.useId();
-  const messageId = React15.useId();
+  const panelRef = React16.useRef(null);
+  const titleId = React16.useId();
+  const messageId = React16.useId();
   const [shouldRender, setShouldRender] = useState(isOpen);
   useFocusTrap(panelRef, isOpen);
   useOverlayEscape(isOpen, () => dismiss());
@@ -2560,7 +2723,7 @@ var AlertModal = ({
     immediate: reduced,
     config: { tension: 280, friction: 28, clamp: !isOpen }
   });
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!shouldRender) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -2687,7 +2850,7 @@ var Spinner = ({ size = 24, ariaLabel = "Loading" }) => {
     }
   );
 };
-var ToastContext = React15.createContext(null);
+var ToastContext = React16.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: iconSize.md }),
   error: /* @__PURE__ */ jsx(XCircle, { size: iconSize.md }),
@@ -2696,9 +2859,9 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: iconSize.md })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [visible, setVisible] = React15.useState(true);
-  const closingRef = React15.useRef(false);
-  const rootRef = React15.useRef(null);
+  const [visible, setVisible] = React16.useState(true);
+  const closingRef = React16.useRef(false);
+  const rootRef = React16.useRef(null);
   const style = useSpringPresence({
     visible,
     from: "translateX(20px)",
@@ -2718,7 +2881,7 @@ var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
       onRemove(item.id);
     }
   });
-  const close = React15.useCallback(() => {
+  const close = React16.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setVisible(false);
@@ -2752,19 +2915,19 @@ var ToastProvider = ({
   maxCount = 5,
   closeAriaLabel = "Close"
 }) => {
-  const [toasts, setToasts] = React15.useState([]);
+  const [toasts, setToasts] = React16.useState([]);
   const isMounted = useIsMounted();
-  const addToast = React15.useCallback(
+  const addToast = React16.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React15.useCallback((id) => {
+  const removeToast = React16.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const contextValue = React15.useMemo(() => ({ addToast }), [addToast]);
+  const contextValue = React16.useMemo(() => ({ addToast }), [addToast]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: contextValue, children: [
     children,
     isMounted && createPortal(
@@ -2853,6 +3016,7 @@ var Dropdown = (props) => {
     options,
     disabled,
     size = "md",
+    variant = "outline",
     className,
     searchable = false,
     searchPlaceholder = "\uAC80\uC0C9\u2026",
@@ -3065,7 +3229,12 @@ var Dropdown = (props) => {
   const hasSelection = selectedValues.length > 0;
   const showValue = multiple ? hasSelection : currentOption != null;
   const controlText = multiple ? hasSelection ? selectedSummary(selectedValues.length) : placeholder : currentOption ? currentOption.label : placeholder;
-  const rootClassName = cn("dropdown", `dropdown_size_${size}`, className);
+  const rootClassName = cn(
+    "dropdown",
+    `dropdown_size_${size}`,
+    `dropdown_variant_${variant}`,
+    className
+  );
   const fieldsetClassName = cn("dropdown_fieldset", { is_open: isOpen, is_disabled: disabled });
   const listClassName = cn("dropdown_list", { dropdown_list_up: dropUp });
   const listStyle = useSpringPresence({
@@ -3198,9 +3367,9 @@ var DatePicker = ({
   minDateSrFormat = "Minimum date: {date}",
   selectableRangeUntilTodaySrText = "Selectable up to today"
 }) => {
-  const groupId = React15.useId();
-  const constraintId = React15.useId();
-  const { todayYear, todayMonth, todayDay } = React15.useMemo(() => {
+  const groupId = React16.useId();
+  const constraintId = React16.useId();
+  const { todayYear, todayMonth, todayDay } = React16.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -3209,7 +3378,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React15.useMemo(() => {
+  const parsed = React16.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -3218,7 +3387,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React15.useMemo(() => {
+  const min = React16.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -3238,7 +3407,7 @@ var DatePicker = ({
       min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
     )
   );
-  const maxDay = React15.useMemo(() => {
+  const maxDay = React16.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -3246,28 +3415,28 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React15.useMemo(
+  const yearOptions = React16.useMemo(
     () => range(startYear, maxYear).map((y) => ({
       value: String(y),
       label: String(y)
     })),
     [startYear, maxYear]
   );
-  const monthOptions = React15.useMemo(
+  const monthOptions = React16.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
-  const dayOptions = React15.useMemo(
+  const dayOptions = React16.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
     [minDay, maxDay]
   );
-  const emit = React15.useCallback(
+  const emit = React16.useCallback(
     (yy, mm, dd) => {
       const cb = onValueChange ?? onChange;
       if (mode === "year-month") {
@@ -3279,7 +3448,7 @@ var DatePicker = ({
     },
     [mode, onValueChange, onChange]
   );
-  const handleYearChange = React15.useCallback(
+  const handleYearChange = React16.useCallback(
     (raw) => {
       if (!raw) return;
       const newYear = Number(raw);
@@ -3296,14 +3465,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React15.useCallback(
+  const handleMonthChange = React16.useCallback(
     (raw) => {
       if (!raw || !year) return;
       emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React15.useCallback(
+  const handleDayChange = React16.useCallback(
     (raw) => {
       if (!raw || !year || !month) return;
       emit(year, month, Number(raw));
@@ -3387,11 +3556,11 @@ var FileInput = ({
   onChange,
   ...props
 }) => {
-  const inputId = React15.useId();
-  const helperId = React15.useId();
-  const inputRef = React15.useRef(null);
-  const [previewUrls, setPreviewUrls] = React15.useState([]);
-  const previewUrlsRef = React15.useRef([]);
+  const inputId = React16.useId();
+  const helperId = React16.useId();
+  const inputRef = React16.useRef(null);
+  const [previewUrls, setPreviewUrls] = React16.useState([]);
+  const previewUrlsRef = React16.useRef([]);
   const isPreviewVariant = variant === "preview";
   const showPreview = isPreviewVariant || preview;
   const handleChange = (e) => {
@@ -3432,7 +3601,7 @@ var FileInput = ({
     }
     onFiles?.(null);
   };
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     return () => {
       for (const url of previewUrlsRef.current) {
         URL.revokeObjectURL(url);
@@ -3841,12 +4010,12 @@ var OtpInput = ({
   ariaLabel = "OTP \uC785\uB825",
   className
 }) => {
-  const inputsRef = React15.useRef([]);
-  const isTypingRef = React15.useRef(false);
-  React15.useEffect(() => {
+  const inputsRef = React16.useRef([]);
+  const isTypingRef = React16.useRef(false);
+  React16.useEffect(() => {
     if (autoFocus) inputsRef.current[0]?.focus();
   }, [autoFocus]);
-  const digits = React15.useMemo(() => {
+  const digits = React16.useMemo(() => {
     const chars = value.split("").slice(0, length);
     while (chars.length < length) chars.push("");
     return chars;
@@ -3923,7 +4092,7 @@ var OtpInput = ({
     focusInput(nextIndex);
   };
   const rootClassName = cn("otp_input", className);
-  const supportingId = React15.useId();
+  const supportingId = React16.useId();
   return (
     // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force border/legend styles; role=group is the WAI-ARIA equivalent for OTP grouping
     /* @__PURE__ */ jsxs("div", { className: rootClassName, role: "group", "aria-label": ariaLabel, children: [
@@ -3967,9 +4136,9 @@ var OtpInput = ({
   );
 };
 OtpInput.displayName = "OtpInput";
-var RadioGroupContext = React15.createContext(null);
+var RadioGroupContext = React16.createContext(null);
 function useRadioGroupContext() {
-  return React15.useContext(RadioGroupContext);
+  return React16.useContext(RadioGroupContext);
 }
 var RadioGroup = ({
   value: controlledValue,
@@ -3987,21 +4156,21 @@ var RadioGroup = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React15.useState(defaultValue);
+  const [internalValue, setInternalValue] = React16.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const generatedName = React15.useId();
+  const generatedName = React16.useId();
   const name = nameProp ?? generatedName;
-  const idPrefix = React15.useId();
+  const idPrefix = React16.useId();
   const labelId = label ? `${idPrefix}-label` : void 0;
   const helperId = supportingText ? `${idPrefix}-help` : void 0;
-  const onChange = React15.useCallback(
+  const onChange = React16.useCallback(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const ctx = React15.useMemo(
+  const ctx = React16.useMemo(
     () => ({ name, value, onChange, size, disabled }),
     [name, value, onChange, size, disabled]
   );
@@ -4212,11 +4381,13 @@ var TextField = ({
   showLabel = true,
   supportingText,
   error,
+  success,
   leadingIcon,
   trailingIcon,
   clearable,
   fullWidth,
   size = "md",
+  variant = "outline",
   className,
   onValueChange,
   onChangeAction,
@@ -4257,12 +4428,16 @@ var TextField = ({
   const handleClear = useCallback(() => {
     emit("");
   }, [emit]);
+  const isError = !!error;
+  const isSuccess = !!success && !isError;
   const rootClassName = cn(
     "text_field",
+    `text_field_variant_${variant}`,
     size === "sm" && "text_field_size_sm",
     size === "lg" && "text_field_size_lg",
     fullWidth && "text_field_full_width",
-    error && "text_field_error",
+    isError && "text_field_error",
+    isSuccess && "text_field_success",
     props.disabled && "text_field_disabled",
     className
   );
@@ -4284,7 +4459,7 @@ var TextField = ({
               id: inputId,
               ref,
               className: "text_field_input",
-              "aria-invalid": !!error,
+              "aria-invalid": isError,
               "aria-describedby": helperId,
               "aria-label": !showLabel ? label : void 0,
               ...props,
@@ -4331,7 +4506,7 @@ var Toggle = ({
   ...props
 }) => {
   const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React15.useState(!!defaultChecked);
+  const [innerChecked, setInnerChecked] = React16.useState(!!defaultChecked);
   const isOn = isControlled ? !!checked : innerChecked;
   const handleToggle = (e) => {
     props.onClick?.(e);
@@ -4420,7 +4595,7 @@ var Pagination = ({
   const emit = onPageChange ?? onChange;
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React15.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  const items = React16.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -4485,9 +4660,9 @@ var Drawer = ({
   className,
   ...props
 }) => {
-  const panelRef = React15.useRef(null);
-  const titleId = React15.useId();
-  const [shouldRender, setShouldRender] = React15.useState(open);
+  const panelRef = React16.useRef(null);
+  const titleId = React16.useId();
+  const [shouldRender, setShouldRender] = React16.useState(open);
   const reduced = useReducedMotion();
   const isMounted = useIsMounted();
   useFocusTrap(panelRef, open && isMounted);
@@ -4506,7 +4681,7 @@ var Drawer = ({
     immediate: reduced,
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -4594,9 +4769,9 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React15.useRef(null);
-  const titleId = React15.useId();
-  const [shouldRender, setShouldRender] = React15.useState(open);
+  const panelRef = React16.useRef(null);
+  const titleId = React16.useId();
+  const [shouldRender, setShouldRender] = React16.useState(open);
   const isMounted = useIsMounted();
   useFocusTrap(panelRef, open && isMounted);
   useOverlayEscape(open && isMounted, () => onClose?.());
@@ -4616,7 +4791,7 @@ var Modal = ({
     immediate: reduced,
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -4686,9 +4861,9 @@ var Modal = ({
     document.body
   );
 };
-var ThemeContext = React15.createContext(null);
+var ThemeContext = React16.createContext(null);
 var useTheme = () => {
-  const ctx = React15.useContext(ThemeContext);
+  const ctx = React16.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>'
@@ -4712,15 +4887,15 @@ var ThemeProvider = ({
   targetSelector,
   children
 }) => {
-  const [mode, setModeState] = React15.useState(defaultMode);
-  const [systemDark, setSystemDark] = React15.useState(false);
-  React15.useEffect(() => {
+  const [mode, setModeState] = React16.useState(defaultMode);
+  const [systemDark, setSystemDark] = React16.useState(false);
+  React16.useEffect(() => {
     setModeState(readStored(storageKey) ?? defaultMode);
     if (isClient) {
       setSystemDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
     }
   }, [storageKey, defaultMode]);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!isClient) return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => setSystemDark(e.matches);
@@ -4728,7 +4903,7 @@ var ThemeProvider = ({
     return () => mq.removeEventListener("change", handler);
   }, []);
   const resolved = mode === "system" ? systemDark ? "dark" : "light" : mode;
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!isClient) return;
     const target = targetSelector ? document.querySelector(targetSelector) : document.documentElement;
     if (!target) return;
@@ -4738,7 +4913,7 @@ var ThemeProvider = ({
       target.setAttribute("data-theme", mode);
     }
   }, [mode, targetSelector]);
-  const setMode = React15.useCallback(
+  const setMode = React16.useCallback(
     (next) => {
       setModeState(next);
       if (storageKey && isClient) {
@@ -4750,7 +4925,7 @@ var ThemeProvider = ({
     },
     [storageKey]
   );
-  const value = React15.useMemo(
+  const value = React16.useMemo(
     () => ({ mode, resolved, setMode }),
     [mode, resolved, setMode]
   );
@@ -4863,4 +5038,4 @@ var Stack = ({
   );
 };
 
-export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Drawer, Dropdown, EmptyState, ErrorState, FileInput, Grid, Hero, Icon, IconButton, ImageCropper, 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, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Drawer, Dropdown, EmptyState, ErrorState, FileInput, Grid, Hero, Icon, IconButton, ImageCropper, 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, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };