@bigtablet/design-system 3.3.0 → 3.4.0

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 import './index.css';
-import * as React20 from 'react';
+import * as React19 from 'react';
 import { createContext, useRef, useState, useId, useEffect, useContext, useCallback, useMemo, Fragment, useLayoutEffect } 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';
+import { ChevronDown, ChevronRight, Globe, ChevronLeft, XCircle, AlertTriangle, CheckCircle2, Info, Search, Check, X, Image, ArrowUp, ArrowDown, ArrowUpDown, Bell, TriangleAlert } 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 = React20.useRef(null);
-  React20.useEffect(() => {
+  const previousActiveElement = React19.useRef(null);
+  React19.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -116,14 +116,14 @@ function getServerSnapshot() {
   return false;
 }
 function useReducedMotion() {
-  return React20.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return React19.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 var useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useSpringHover({
   scale = 1.02,
   lift = -2
 } = {}) {
-  const [hovered, setHovered] = React20.useState(false);
+  const [hovered, setHovered] = React19.useState(false);
   const reduced = useReducedMotion();
   const style = useSpring({
     transform: hovered ? `translateY(${lift}px) scale(${scale})` : "translateY(0px) scale(1)",
@@ -167,6 +167,15 @@ function useSpringPresence({
     }
   });
 }
+
+// src/styles/icon/index.ts
+var iconSize = {
+  xs: 14,
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 32
+};
 var Accordion = ({
   items,
   multiple = false,
@@ -178,7 +187,7 @@ var Accordion = ({
   ...props
 }) => {
   const isControlled = controlledKeys !== void 0;
-  const [internalKeys, setInternalKeys] = React20.useState(defaultOpenKeys);
+  const [internalKeys, setInternalKeys] = React19.useState(defaultOpenKeys);
   const open = isControlled ? controlledKeys ?? [] : internalKeys;
   const toggle = (key) => {
     const isOpen = open.includes(key);
@@ -206,7 +215,7 @@ var Accordion = ({
             /* @__PURE__ */ jsx(
               ChevronDown,
               {
-                size: 20,
+                size: iconSize.lg,
                 className: cn("accordion_chevron", isOpen && "accordion_chevron_open"),
                 "aria-hidden": "true"
               }
@@ -245,7 +254,7 @@ var Avatar = ({
   style,
   ...props
 }) => {
-  const [imgFailed, setImgFailed] = React20.useState(false);
+  const [imgFailed, setImgFailed] = React19.useState(false);
   const showImage = src && !imgFailed;
   const initials = getInitials(name);
   return /* @__PURE__ */ jsx(
@@ -394,7 +403,7 @@ var Breadcrumb = ({
   className,
   ...props
 }) => {
-  const sep = separator ?? /* @__PURE__ */ jsx(ChevronRight, { size: 14, "aria-hidden": "true" });
+  const sep = separator ?? /* @__PURE__ */ jsx(ChevronRight, { size: iconSize.xs, "aria-hidden": "true" });
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cn("breadcrumb", className), ...props, children: /* @__PURE__ */ jsx("ol", { className: "breadcrumb_list", children: items.map((item, idx) => {
     const isLast = idx === items.length - 1;
     return (
@@ -463,12 +472,12 @@ var ErrorState = ({
   );
 };
 var Menu = ({ items, trigger, align = "start" }) => {
-  const [open, setOpen] = React20.useState(false);
-  const wrapperRef = React20.useRef(null);
-  const itemRefs = React20.useRef([]);
-  const menuId = React20.useId();
+  const [open, setOpen] = React19.useState(false);
+  const wrapperRef = React19.useRef(null);
+  const itemRefs = React19.useRef([]);
+  const menuId = React19.useId();
   const style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -483,7 +492,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
       document.removeEventListener("keydown", handleEsc);
     };
   }, [open]);
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     const active = document.activeElement;
     if (!open || active && itemRefs.current.includes(active)) return;
     const first = items.findIndex((it) => !it.disabled);
@@ -529,7 +538,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
         break;
     }
   };
-  const triggerWithProps = React20.cloneElement(
+  const triggerWithProps = React19.cloneElement(
     trigger,
     {
       onClick: () => setOpen((o) => !o),
@@ -746,9 +755,16 @@ var LocaleSwitcher = ({ locale }) => {
         "aria-controls": menuId,
         onClick: () => setOpen((p) => !p),
         children: [
-          /* @__PURE__ */ jsx(Globe, { size: 16, "aria-hidden": "true" }),
+          /* @__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() }),
-          /* @__PURE__ */ jsx(ChevronDown, { size: 14, "aria-hidden": "true", className: "nav_bar_locale_chevron" })
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              size: iconSize.xs,
+              "aria-hidden": "true",
+              className: "nav_bar_locale_chevron"
+            }
+          )
         ]
       }
     ),
@@ -812,9 +828,9 @@ var Sidebar = ({
   ...props
 }) => {
   const isControlled = collapsedProp !== void 0;
-  const [internalCollapsed, setInternalCollapsed] = React20.useState(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = React19.useState(defaultCollapsed);
   const collapsed = isControlled ? collapsedProp : internalCollapsed;
-  const toggle = React20.useCallback(() => {
+  const toggle = React19.useCallback(() => {
     const next = !collapsed;
     if (!isControlled) setInternalCollapsed(next);
     onCollapsedChange?.(next);
@@ -846,7 +862,7 @@ var Sidebar = ({
             onClick: toggle,
             "aria-label": toggleLabel,
             "aria-expanded": !collapsed,
-            children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) : /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+            children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { size: iconSize.xs }) : /* @__PURE__ */ jsx(ChevronLeft, { size: iconSize.xs })
           }
         )
       ]
@@ -887,9 +903,9 @@ var SidebarSection = ({ label, className, children, ...props }) => {
     children
   ] });
 };
-var TabsContext = React20.createContext(null);
+var TabsContext = React19.createContext(null);
 function useTabsContext() {
-  const ctx = React20.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>'
@@ -908,17 +924,17 @@ var Tabs = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React20.useState(defaultValue);
+  const [internalValue, setInternalValue] = React19.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const setValue = React20.useCallback(
+  const setValue = React19.useCallback(
     (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  const idPrefix = React20.useId();
-  const ctx = React20.useMemo(
+  const idPrefix = React19.useId();
+  const ctx = React19.useMemo(
     () => ({ value, setValue, variant, size, idPrefix }),
     [value, setValue, variant, size, idPrefix]
   );
@@ -926,9 +942,9 @@ var Tabs = ({
 };
 var TabList = ({ ariaLabel, className, children, ...props }) => {
   const { variant } = useTabsContext();
-  const listRef = React20.useRef(null);
-  const [indicator, setIndicator] = React20.useState(null);
-  const [hasMounted, setHasMounted] = React20.useState(false);
+  const listRef = React19.useRef(null);
+  const [indicator, setIndicator] = React19.useState(null);
+  const [hasMounted, setHasMounted] = React19.useState(false);
   useSafeLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
@@ -1077,15 +1093,15 @@ var Popover = ({
   className
 }) => {
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = React20.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React19.useState(defaultOpen);
   const open = isControlled ? openProp : internalOpen;
-  const [shouldRender, setShouldRender] = React20.useState(open ?? false);
+  const [shouldRender, setShouldRender] = React19.useState(open ?? false);
   if (open && !shouldRender) setShouldRender(true);
-  const wrapperRef = React20.useRef(null);
-  const popoverRef = React20.useRef(null);
-  const previousFocusRef = React20.useRef(null);
-  const popoverId = React20.useId();
-  const setOpen = React20.useCallback(
+  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);
@@ -1105,7 +1121,7 @@ var Popover = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform, onExitComplete: () => setShouldRender(false) });
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     previousFocusRef.current = document.activeElement;
     const node = popoverRef.current;
@@ -1113,7 +1129,7 @@ var Popover = ({
     const focusable = node.querySelector(FOCUSABLE_SELECTORS2);
     (focusable ?? node).focus();
   }, [open]);
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -1131,7 +1147,7 @@ var Popover = ({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, setOpen]);
-  const triggerWithProps = React20.cloneElement(
+  const triggerWithProps = React19.cloneElement(
     trigger,
     {
       onClick: (e) => {
@@ -1170,18 +1186,18 @@ var Tooltip = ({
   disabled = false,
   children
 }) => {
-  const [open, setOpen] = React20.useState(false);
-  const timerRef = React20.useRef(null);
-  const tooltipId = React20.useId();
-  const show = React20.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 = React20.useCallback(() => {
+  const hide = React19.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setOpen(false);
   }, []);
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
@@ -1201,7 +1217,7 @@ var Tooltip = ({
   const style = useSpringPresence({ visible: open, from: fromTransform });
   const child = children;
   const childProps = child.props;
-  const trigger = React20.cloneElement(child, {
+  const trigger = React19.cloneElement(child, {
     onMouseEnter: (e) => {
       childProps.onMouseEnter?.(e);
       show();
@@ -1745,10 +1761,10 @@ var Button = ({
   ] });
 };
 var ICONS = {
-  info: /* @__PURE__ */ jsx(Info, { size: 20, "aria-hidden": "true" }),
-  success: /* @__PURE__ */ jsx(CheckCircle2, { size: 20, "aria-hidden": "true" }),
-  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: 20, "aria-hidden": "true" }),
-  error: /* @__PURE__ */ jsx(XCircle, { size: 20, "aria-hidden": "true" })
+  info: /* @__PURE__ */ jsx(Info, { size: iconSize.lg, "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx(CheckCircle2, { size: iconSize.lg, "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: iconSize.lg, "aria-hidden": "true" }),
+  error: /* @__PURE__ */ jsx(XCircle, { size: iconSize.lg, "aria-hidden": "true" })
 };
 var AlertContext = createContext(null);
 var useAlert = () => {
@@ -1804,12 +1820,12 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React20.useRef(null);
-  const titleId = React20.useId();
-  const messageId = React20.useId();
+  const panelRef = React19.useRef(null);
+  const titleId = React19.useId();
+  const messageId = React19.useId();
   const [shouldRender, setShouldRender] = useState(isOpen);
   useFocusTrap(panelRef, isOpen);
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   const overlayStyle = useSpring({
@@ -1917,12 +1933,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React20.useRef(null);
-  React20.useImperativeHandle(
+  const inputRef = React19.useRef(null);
+  React19.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -2094,40 +2110,91 @@ var Chip = ({
     )
   ] });
 };
-var Dropdown = ({
-  id,
-  label,
-  placeholder = "Select\u2026",
-  options,
-  value,
-  onValueChange,
-  onChange,
-  defaultValue = null,
-  disabled,
-  size = "md",
-  className
-}) => {
+var normalizeForSearch = (s) => s.toLowerCase().replace(/\s+/g, "");
+var Dropdown = (props) => {
+  const {
+    id,
+    label,
+    placeholder = "Select\u2026",
+    options,
+    disabled,
+    size = "md",
+    className,
+    searchable = false,
+    searchPlaceholder = "\uAC80\uC0C9\u2026",
+    emptyText = "\uACB0\uACFC \uC5C6\uC74C",
+    selectedSummary = (count) => `${count}\uAC1C \uC120\uD0DD`
+  } = props;
+  const multiple = props.multiple === true;
   const internalId = useId();
   const dropdownId = id ?? internalId;
-  const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const currentValue = isControlled ? value ?? null : internalValue;
+  const isControlled = props.value !== void 0;
+  const [internalSingle, setInternalSingle] = useState(
+    () => props.multiple === true ? null : props.defaultValue ?? null
+  );
+  const [internalMulti, setInternalMulti] = useState(
+    () => props.multiple === true ? props.defaultValue ?? [] : []
+  );
   const [isOpen, setIsOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
   const [dropUp, setDropUp] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const [committedQuery, setCommittedQuery] = useState("");
+  const isComposingRef = useRef(false);
   const wrapperRef = useRef(null);
   const controlRef = useRef(null);
-  const currentOption = useMemo(
-    () => options.find((o) => o.value === currentValue) ?? null,
-    [options, currentValue]
-  );
-  const setValue = useCallback(
+  const searchRef = useRef(null);
+  const selectedValues = useMemo(() => {
+    if (multiple) {
+      const v2 = isControlled ? props.value : internalMulti;
+      return v2 ?? [];
+    }
+    const v = isControlled ? props.value : internalSingle;
+    return v != null ? [v] : [];
+  }, [multiple, isControlled, props.value, internalMulti, internalSingle]);
+  const visibleOptions = useMemo(() => {
+    if (!searchable) return options;
+    const q = normalizeForSearch(committedQuery);
+    if (q === "") return options;
+    return options.filter((o) => normalizeForSearch(o.label).includes(q));
+  }, [options, searchable, committedQuery]);
+  const selectSingle = useCallback(
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
-      if (!isControlled) setInternalValue(next);
-      (onValueChange ?? onChange)?.(next, option);
+      if (!isControlled) setInternalSingle(next);
+      if (props.multiple !== true) {
+        (props.onValueChange ?? props.onChange)?.(next, option);
+      }
     },
-    [isControlled, onValueChange, onChange, options]
+    [isControlled, options, props.multiple, props.onValueChange, props.onChange]
+  );
+  const toggleMultiple = useCallback(
+    (opt) => {
+      const exists = selectedValues.includes(opt.value);
+      const nextValues = exists ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value];
+      const nextOptions = nextValues.map((v) => options.find((o) => o.value === v)).filter((o) => Boolean(o));
+      if (!isControlled) setInternalMulti(nextValues);
+      if (props.multiple === true) {
+        (props.onValueChange ?? props.onChange)?.(nextValues, nextOptions);
+      }
+    },
+    [selectedValues, options, isControlled, props.multiple, props.onValueChange, props.onChange]
+  );
+  const closePanel = useCallback(() => {
+    setIsOpen(false);
+    if (searchable) controlRef.current?.focus();
+  }, [searchable]);
+  const selectOption = useCallback(
+    (opt) => {
+      if (opt.disabled) return;
+      if (multiple) {
+        toggleMultiple(opt);
+      } else {
+        selectSingle(opt.value);
+        closePanel();
+      }
+    },
+    [multiple, toggleMultiple, selectSingle, closePanel]
   );
   useEffect(() => {
     const handleOutsideClick = (e) => {
@@ -2138,31 +2205,33 @@ var Dropdown = ({
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, []);
-  const moveActive = (dir) => {
-    if (options.length === 0) return;
-    if (!isOpen) {
-      setIsOpen(true);
-      return;
-    }
-    let i = activeIndex;
-    const len = options.length;
-    for (let step = 0; step < len; step++) {
-      i = (i + dir + len) % len;
-      if (!options[i].disabled) {
-        setActiveIndex(i);
-        break;
+  const moveActive = useCallback(
+    (dir) => {
+      if (visibleOptions.length === 0) return;
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
       }
-    }
-  };
-  const commitActive = () => {
-    if (activeIndex < 0 || activeIndex >= options.length) return;
-    const opt = options[activeIndex];
-    if (!opt.disabled) {
-      setValue(opt.value);
-      setIsOpen(false);
-    }
-  };
-  const onKeyDown = (e) => {
+      let i = activeIndex;
+      if (i === -1) {
+        i = dir === 1 ? -1 : 0;
+      }
+      const len = visibleOptions.length;
+      for (let step = 0; step < len; step++) {
+        i = (i + dir + len) % len;
+        if (!visibleOptions[i].disabled) {
+          setActiveIndex(i);
+          break;
+        }
+      }
+    },
+    [visibleOptions, isOpen, activeIndex]
+  );
+  const commitActive = useCallback(() => {
+    if (activeIndex < 0 || activeIndex >= visibleOptions.length) return;
+    selectOption(visibleOptions[activeIndex]);
+  }, [activeIndex, visibleOptions, selectOption]);
+  const onControlKeyDown = (e) => {
     if (disabled) return;
     switch (e.key) {
       case " ":
@@ -2182,13 +2251,13 @@ var Dropdown = ({
       case "Home":
         e.preventDefault();
         setIsOpen(true);
-        setActiveIndex(options.findIndex((o) => !o.disabled));
+        setActiveIndex(visibleOptions.findIndex((o) => !o.disabled));
         break;
       case "End":
         e.preventDefault();
         setIsOpen(true);
-        for (let i = options.length - 1; i >= 0; i--) {
-          if (!options[i].disabled) {
+        for (let i = visibleOptions.length - 1; i >= 0; i--) {
+          if (!visibleOptions[i].disabled) {
             setActiveIndex(i);
             break;
           }
@@ -2200,16 +2269,46 @@ var Dropdown = ({
         break;
     }
   };
+  const onSearchKeyDown = (e) => {
+    if (e.nativeEvent.isComposing) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveActive(-1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        commitActive();
+        break;
+      case "Escape":
+        e.preventDefault();
+        closePanel();
+        break;
+    }
+  };
   useEffect(() => {
     if (!isOpen) return;
-    const matchedIndex = options.findIndex((o) => o.value === currentValue && !o.disabled);
-    setActiveIndex(
-      matchedIndex >= 0 ? matchedIndex : Math.max(
-        0,
-        options.findIndex((o) => !o.disabled)
-      )
+    const selectedIdx = visibleOptions.findIndex(
+      (o) => selectedValues.includes(o.value) && !o.disabled
     );
-  }, [isOpen, options, currentValue]);
+    setActiveIndex(selectedIdx >= 0 ? selectedIdx : visibleOptions.findIndex((o) => !o.disabled));
+  }, [isOpen, visibleOptions]);
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchText("");
+      setCommittedQuery("");
+      isComposingRef.current = false;
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen && searchable) {
+      searchRef.current?.focus();
+    }
+  }, [isOpen, searchable]);
   useEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
@@ -2218,6 +2317,13 @@ var Dropdown = ({
     const MIN_BELOW = 120;
     setDropUp(spaceBelow < MIN_BELOW && spaceAbove > spaceBelow);
   }, [isOpen]);
+  const currentOption = useMemo(
+    () => multiple ? null : options.find((o) => o.value === selectedValues[0]) ?? null,
+    [multiple, options, selectedValues]
+  );
+  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 fieldsetClassName = cn("dropdown_fieldset", { is_open: isOpen, is_disabled: disabled });
   const listClassName = cn("dropdown_list", { dropdown_list_up: dropUp });
@@ -2225,86 +2331,107 @@ var Dropdown = ({
     visible: isOpen,
     from: dropUp ? "translateY(4px)" : "translateY(-4px)"
   });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      className: rootClassName,
-      children: [
-        label && /* @__PURE__ */ jsx("label", { htmlFor: dropdownId, className: "dropdown_label", children: label }),
-        /* @__PURE__ */ jsx("div", { className: fieldsetClassName, children: /* @__PURE__ */ jsxs(
-          "button",
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: rootClassName, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: dropdownId, className: "dropdown_label", children: label }),
+    /* @__PURE__ */ jsx("div", { className: fieldsetClassName, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: controlRef,
+        id: dropdownId,
+        type: "button",
+        className: cn("dropdown_control", { is_disabled: disabled }),
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": `${dropdownId}_listbox`,
+        onClick: () => !disabled && setIsOpen((o) => !o),
+        onKeyDown: onControlKeyDown,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: showValue ? "dropdown_value" : "dropdown_placeholder", children: controlText }),
+          /* @__PURE__ */ jsx("span", { className: cn("dropdown_icon", { dropdown_icon_open: isOpen }), "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize.lg }) })
+        ]
+      }
+    ) }),
+    isOpen && /* @__PURE__ */ jsxs(animated.div, { className: listClassName, style: listStyle, children: [
+      searchable && /* @__PURE__ */ jsxs("div", { className: "dropdown_search", children: [
+        /* @__PURE__ */ jsx("span", { className: "dropdown_search_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Search, { size: iconSize.sm }) }),
+        /* @__PURE__ */ jsx(
+          "input",
           {
-            ref: controlRef,
-            id: dropdownId,
-            type: "button",
-            className: cn("dropdown_control", { is_disabled: disabled }),
-            "aria-haspopup": "listbox",
+            ref: searchRef,
+            type: "text",
+            className: "dropdown_search_input",
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            autoComplete: "off",
+            role: "combobox",
+            "aria-autocomplete": "list",
             "aria-expanded": isOpen,
             "aria-controls": `${dropdownId}_listbox`,
-            onClick: () => !disabled && setIsOpen((o) => !o),
-            onKeyDown,
-            disabled,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: currentOption ? "dropdown_value" : "dropdown_placeholder", children: currentOption ? currentOption.label : placeholder }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn("dropdown_icon", { dropdown_icon_open: isOpen }),
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 })
-                }
-              )
-            ]
-          }
-        ) }),
-        isOpen && /* @__PURE__ */ jsx(
-          animated.div,
-          {
-            id: `${dropdownId}_listbox`,
-            role: "listbox",
-            className: listClassName,
-            style: listStyle,
-            children: options.map((opt, i) => {
-              const selected = currentValue === opt.value;
-              const active = i === activeIndex;
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    role: "option",
-                    tabIndex: -1,
-                    "aria-selected": selected,
-                    "aria-disabled": opt.disabled ? true : void 0,
-                    className: cn("dropdown_option", {
-                      is_selected: selected,
-                      is_active: active,
-                      is_disabled: opt.disabled
-                    }),
-                    onMouseEnter: () => !opt.disabled && setActiveIndex(i),
-                    onClick: () => {
-                      if (opt.disabled) return;
-                      setValue(opt.value);
-                      setIsOpen(false);
-                    },
-                    children: [
-                      opt.leadingIcon && /* @__PURE__ */ jsx("span", { className: "dropdown_option_icon", children: opt.leadingIcon }),
-                      /* @__PURE__ */ jsxs("span", { className: "dropdown_option_content", children: [
-                        /* @__PURE__ */ jsx("span", { className: "dropdown_option_label", children: opt.label }),
-                        opt.supportingText && /* @__PURE__ */ jsx("span", { className: "dropdown_option_supporting", children: opt.supportingText })
-                      ] }),
-                      (selected || opt.trailingIcon) && /* @__PURE__ */ jsx("span", { className: "dropdown_option_trailing", children: opt.trailingIcon ?? /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" }) })
-                    ]
-                  }
-                ),
-                opt.showDivider && /* @__PURE__ */ jsx("hr", { className: "dropdown_option_divider" })
-              ] }, opt.value);
-            })
+            "aria-activedescendant": activeIndex >= 0 && visibleOptions[activeIndex] ? `${dropdownId}_option_${activeIndex}` : void 0,
+            value: searchText,
+            onChange: (e) => {
+              const v = e.target.value;
+              setSearchText(v);
+              if (!isComposingRef.current) setCommittedQuery(v);
+            },
+            onCompositionStart: () => {
+              isComposingRef.current = true;
+            },
+            onCompositionEnd: (e) => {
+              isComposingRef.current = false;
+              const v = e.currentTarget.value;
+              setSearchText(v);
+              setCommittedQuery(v);
+            },
+            onKeyDown: onSearchKeyDown
           }
         )
-      ]
-    }
-  );
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: `${dropdownId}_listbox`,
+          role: "listbox",
+          className: "dropdown_options",
+          "aria-multiselectable": multiple || void 0,
+          children: visibleOptions.length === 0 ? searchable && /* @__PURE__ */ jsx("div", { className: "dropdown_empty", children: emptyText }) : visibleOptions.map((opt, i) => {
+            const selected = selectedValues.includes(opt.value);
+            const active = i === activeIndex;
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  id: `${dropdownId}_option_${i}`,
+                  role: "option",
+                  tabIndex: -1,
+                  "aria-selected": selected,
+                  "aria-disabled": opt.disabled ? true : void 0,
+                  className: cn("dropdown_option", {
+                    is_selected: selected,
+                    is_active: active,
+                    is_disabled: opt.disabled
+                  }),
+                  onMouseEnter: () => !opt.disabled && setActiveIndex(i),
+                  onClick: () => selectOption(opt),
+                  children: [
+                    multiple && /* @__PURE__ */ jsx("span", { className: "dropdown_option_check", "aria-hidden": "true", children: selected && /* @__PURE__ */ jsx(Check, { size: iconSize.sm }) }),
+                    opt.leadingIcon && /* @__PURE__ */ jsx("span", { className: "dropdown_option_icon", children: opt.leadingIcon }),
+                    /* @__PURE__ */ jsxs("span", { className: "dropdown_option_content", children: [
+                      /* @__PURE__ */ jsx("span", { className: "dropdown_option_label", children: opt.label }),
+                      opt.supportingText && /* @__PURE__ */ jsx("span", { className: "dropdown_option_supporting", children: opt.supportingText })
+                    ] }),
+                    (opt.trailingIcon || !multiple && selected) && /* @__PURE__ */ jsx("span", { className: "dropdown_option_trailing", children: opt.trailingIcon ?? /* @__PURE__ */ jsx(Check, { size: iconSize.sm, "aria-hidden": "true" }) })
+                  ]
+                }
+              ),
+              opt.showDivider && /* @__PURE__ */ jsx("hr", { className: "dropdown_option_divider" })
+            ] }, opt.value);
+          })
+        }
+      )
+    ] })
+  ] });
 };
 var pad = (n) => String(n).padStart(2, "0");
 var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
@@ -2329,9 +2456,9 @@ var DatePicker = ({
   minDateSrFormat = "Minimum date: {date}",
   selectableRangeUntilTodaySrText = "Selectable up to today"
 }) => {
-  const groupId = React20.useId();
-  const constraintId = React20.useId();
-  const { todayYear, todayMonth, todayDay } = React20.useMemo(() => {
+  const groupId = React19.useId();
+  const constraintId = React19.useId();
+  const { todayYear, todayMonth, todayDay } = React19.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -2340,7 +2467,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React20.useMemo(() => {
+  const parsed = React19.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -2349,7 +2476,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React20.useMemo(() => {
+  const min = React19.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -2369,7 +2496,7 @@ var DatePicker = ({
       min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
     )
   );
-  const maxDay = React20.useMemo(() => {
+  const maxDay = React19.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -2377,28 +2504,28 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React20.useMemo(
+  const yearOptions = React19.useMemo(
     () => range(startYear, maxYear).map((y) => ({
       value: String(y),
       label: String(y)
     })),
     [startYear, maxYear]
   );
-  const monthOptions = React20.useMemo(
+  const monthOptions = React19.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
-  const dayOptions = React20.useMemo(
+  const dayOptions = React19.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
     [minDay, maxDay]
   );
-  const emit = React20.useCallback(
+  const emit = React19.useCallback(
     (yy, mm, dd) => {
       const cb = onValueChange ?? onChange;
       if (mode === "year-month") {
@@ -2410,7 +2537,7 @@ var DatePicker = ({
     },
     [mode, onValueChange, onChange]
   );
-  const handleYearChange = React20.useCallback(
+  const handleYearChange = React19.useCallback(
     (raw) => {
       if (!raw) return;
       const newYear = Number(raw);
@@ -2427,14 +2554,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React20.useCallback(
+  const handleMonthChange = React19.useCallback(
     (raw) => {
       if (!raw || !year) return;
       emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React20.useCallback(
+  const handleDayChange = React19.useCallback(
     (raw) => {
       if (!raw || !year || !month) return;
       emit(year, month, Number(raw));
@@ -2509,6 +2636,119 @@ var Divider = ({ weight = "standard", className, ...props }) => {
   const dividerClassName = cn("divider", `divider_weight_${weight}`, className);
   return /* @__PURE__ */ jsx("hr", { className: dividerClassName, ...props });
 };
+var SLIDE_FROM = {
+  left: "translateX(-100%)",
+  right: "translateX(100%)",
+  bottom: "translateY(100%)"
+};
+var Drawer = ({
+  open,
+  onClose,
+  placement = "right",
+  size = 360,
+  title,
+  footer,
+  closeOnOverlay = true,
+  showCloseIcon = true,
+  closeLabel = "\uB2EB\uAE30",
+  ariaLabel,
+  children,
+  className,
+  ...props
+}) => {
+  const panelRef = React19.useRef(null);
+  const titleId = React19.useId();
+  const [shouldRender, setShouldRender] = React19.useState(open);
+  const reduced = useReducedMotion();
+  useFocusTrap(panelRef, open);
+  if (open && !shouldRender) setShouldRender(true);
+  const overlayStyle = useSpringPresence({
+    visible: open,
+    from: "translateY(0px)",
+    onExitComplete: () => setShouldRender(false)
+  });
+  const slideFrom = SLIDE_FROM[placement];
+  const slideRest = placement === "bottom" ? "translateY(0%)" : "translateX(0%)";
+  const panelStyle = useSpring({
+    from: { transform: slideFrom },
+    to: { transform: open ? slideRest : slideFrom },
+    immediate: reduced,
+    config: { tension: 280, friction: 28, clamp: !open }
+  });
+  React19.useEffect(() => {
+    if (!open) return;
+    const body = document.body;
+    const openModals = parseInt(body.dataset.openModals || "0", 10);
+    if (openModals === 0) {
+      body.dataset.originalOverflow = window.getComputedStyle(body).overflow;
+      body.style.overflow = "hidden";
+    }
+    body.dataset.openModals = String(openModals + 1);
+    return () => {
+      const currentOpenModals = parseInt(body.dataset.openModals || "1", 10);
+      const nextOpenModals = currentOpenModals - 1;
+      if (nextOpenModals === 0) {
+        body.style.overflow = body.dataset.originalOverflow || "";
+        delete body.dataset.openModals;
+        delete body.dataset.originalOverflow;
+      } else {
+        body.dataset.openModals = String(nextOpenModals);
+      }
+    };
+  }, [open]);
+  if (!open && !shouldRender) return null;
+  const hasTitle = !!title;
+  const sizeValue = typeof size === "number" ? `${size}px` : size;
+  const panelSizeStyle = placement === "bottom" ? { height: sizeValue } : { width: sizeValue };
+  return /* @__PURE__ */ jsx(
+    animated.div,
+    {
+      className: cn("drawer", `drawer_placement_${placement}`),
+      style: overlayStyle,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
+      "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
+      onClick: () => closeOnOverlay && onClose?.(),
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose?.();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        animated.div,
+        {
+          ref: panelRef,
+          className: cn("drawer_panel", className),
+          style: { ...panelStyle, ...panelSizeStyle },
+          role: "document",
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => {
+            if (e.key !== "Escape") e.stopPropagation();
+          },
+          ...props,
+          children: [
+            showCloseIcon && onClose && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "drawer_close",
+                onClick: onClose,
+                "aria-label": closeLabel,
+                children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" })
+              }
+            ),
+            title && /* @__PURE__ */ jsx("div", { className: "drawer_header", children: /* @__PURE__ */ jsx("h2", { id: titleId, className: "drawer_title", children: title }) }),
+            children && /* @__PURE__ */ jsx("div", { className: "drawer_body", children }),
+            footer && /* @__PURE__ */ jsx("div", { className: "drawer_footer", children: footer })
+          ]
+        }
+      )
+    }
+  );
+};
+Drawer.displayName = "Drawer";
 var FileInput = ({
   label = "Choose file",
   onFiles,
@@ -2522,11 +2762,11 @@ var FileInput = ({
   onChange,
   ...props
 }) => {
-  const inputId = React20.useId();
-  const helperId = React20.useId();
-  const inputRef = React20.useRef(null);
-  const [previewUrls, setPreviewUrls] = React20.useState([]);
-  const previewUrlsRef = React20.useRef([]);
+  const inputId = React19.useId();
+  const helperId = React19.useId();
+  const inputRef = React19.useRef(null);
+  const [previewUrls, setPreviewUrls] = React19.useState([]);
+  const previewUrlsRef = React19.useRef([]);
   const isPreviewVariant = variant === "preview";
   const showPreview = isPreviewVariant || preview;
   const handleChange = (e) => {
@@ -2567,7 +2807,7 @@ var FileInput = ({
     }
     onFiles?.(null);
   };
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     return () => {
       for (const url of previewUrlsRef.current) {
         URL.revokeObjectURL(url);
@@ -2614,7 +2854,7 @@ var FileInput = ({
             }
           )
         ) : /* @__PURE__ */ jsxs("span", { className: "file_input_preview_empty", children: [
-          /* @__PURE__ */ jsx(Image, { size: 32, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(Image, { size: iconSize.xl, "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: "file_input_preview_empty_text", children: label })
         ] })
       }
@@ -2626,7 +2866,7 @@ var FileInput = ({
         className: "file_input_preview_remove",
         onClick: handleRemove,
         "aria-label": "\uC774\uBBF8\uC9C0 \uC81C\uAC70",
-        children: /* @__PURE__ */ jsx(X, { size: 14, "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(X, { size: iconSize.xs, "aria-hidden": "true" })
       }
     ),
     supportingText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: supportingText }),
@@ -2866,13 +3106,11 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React20.useRef(null);
-  const titleId = React20.useId();
-  const [shouldRender, setShouldRender] = React20.useState(open);
+  const panelRef = React19.useRef(null);
+  const titleId = React19.useId();
+  const [shouldRender, setShouldRender] = React19.useState(open);
   useFocusTrap(panelRef, open);
-  React20.useEffect(() => {
-    if (open) setShouldRender(true);
-  }, [open]);
+  if (open && !shouldRender) setShouldRender(true);
   const overlayStyle = useSpring({
     opacity: open ? 1 : 0,
     config: { tension: 280, friction: 28, clamp: !open },
@@ -2885,7 +3123,7 @@ var Modal = ({
     transform: open ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -2906,7 +3144,7 @@ var Modal = ({
       }
     };
   }, [open]);
-  if (!shouldRender) return null;
+  if (!open && !shouldRender) return null;
   const hasTitle = !!title;
   return /* @__PURE__ */ jsx(
     animated.div,
@@ -2944,7 +3182,7 @@ var Modal = ({
                 className: "modal_close",
                 onClick: onClose,
                 "aria-label": closeLabel,
-                children: /* @__PURE__ */ jsx(X, { size: 18, "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" })
               }
             ),
             title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "modal_title", children: title }),
@@ -2969,12 +3207,12 @@ var OtpInput = ({
   ariaLabel = "OTP \uC785\uB825",
   className
 }) => {
-  const inputsRef = React20.useRef([]);
-  const isTypingRef = React20.useRef(false);
-  React20.useEffect(() => {
+  const inputsRef = React19.useRef([]);
+  const isTypingRef = React19.useRef(false);
+  React19.useEffect(() => {
     if (autoFocus) inputsRef.current[0]?.focus();
   }, [autoFocus]);
-  const digits = React20.useMemo(() => {
+  const digits = React19.useMemo(() => {
     const chars = value.split("").slice(0, length);
     while (chars.length < length) chars.push("");
     return chars;
@@ -3115,7 +3353,7 @@ var Pagination = ({
   const emit = onPageChange ?? onChange;
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React20.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",
@@ -3160,9 +3398,9 @@ var Pagination = ({
     )
   ] });
 };
-var RadioGroupContext = React20.createContext(null);
+var RadioGroupContext = React19.createContext(null);
 function useRadioGroupContext() {
-  return React20.useContext(RadioGroupContext);
+  return React19.useContext(RadioGroupContext);
 }
 var RadioGroup = ({
   value: controlledValue,
@@ -3180,21 +3418,21 @@ var RadioGroup = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React20.useState(defaultValue);
+  const [internalValue, setInternalValue] = React19.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const generatedName = React20.useId();
+  const generatedName = React19.useId();
   const name = nameProp ?? generatedName;
-  const idPrefix = React20.useId();
+  const idPrefix = React19.useId();
   const labelId = label ? `${idPrefix}-label` : void 0;
   const helperId = supportingText ? `${idPrefix}-help` : void 0;
-  const onChange = React20.useCallback(
+  const onChange = React19.useCallback(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const ctx = React20.useMemo(
+  const ctx = React19.useMemo(
     () => ({ name, value, onChange, size, disabled }),
     [name, value, onChange, size, disabled]
   );
@@ -3323,7 +3561,15 @@ var Table = ({
   stickyHeader = false,
   ariaLabel,
   className,
-  onRowClick
+  onRowClick,
+  sort,
+  onSortChange,
+  selectAllAriaLabel = "\uC804\uCCB4 \uC120\uD0DD",
+  selectRowAriaLabel = (index) => `${index + 1}\uBC88\uC9F8 \uD589 \uC120\uD0DD`,
+  selectable = false,
+  rowKey,
+  selectedKeys,
+  onSelectionChange
 }) => {
   const wrapperClassName = cn(
     "table_wrapper",
@@ -3332,69 +3578,171 @@ var Table = ({
     className
   );
   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 selectedSet = React19.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;
+  const handleToggleAll = () => {
+    const pageKeys = new Set(allRowKeys);
+    const offPage = (selectedKeys ?? []).filter((k) => !pageKeys.has(k));
+    onSelectionChange?.(isAllSelected ? offPage : [...offPage, ...allRowKeys]);
+  };
+  const handleToggleRow = (key) => {
+    const current = selectedKeys ?? [];
+    const next = current.includes(key) ? current.filter((k) => k !== key) : [...current, key];
+    onSelectionChange?.(next);
+  };
+  const handleSortClick = (key) => {
+    const next = sort?.key !== key ? { key, direction: "asc" } : sort.direction === "asc" ? { key, direction: "desc" } : void 0;
+    onSortChange?.(next);
+  };
   return /* @__PURE__ */ jsxs("div", { className: wrapperClassName, children: [
     /* @__PURE__ */ jsxs("table", { className: "table", "aria-label": ariaLabel, children: [
-      /* @__PURE__ */ jsx("thead", { className: "table_thead", children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
-        "th",
-        {
-          scope: "col",
-          className: cn("table_th", col.align && `table_align_${col.align}`),
-          style: { width: col.width },
-          children: col.header
-        },
-        col.key
-      )) }) }),
+      /* @__PURE__ */ jsx("thead", { className: "table_thead", children: /* @__PURE__ */ jsxs("tr", { children: [
+        selectable && /* @__PURE__ */ jsx("th", { scope: "col", className: "table_th table_th_checkbox", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "aria-label": selectAllAriaLabel,
+            checked: isAllSelected,
+            indeterminate: isSomeSelected,
+            disabled: isLoading || allRowKeys.length === 0,
+            onChange: handleToggleAll
+          }
+        ) }),
+        columns.map((col) => {
+          const isSortActive = Boolean(col.sortable) && sort?.key === col.key;
+          const direction = isSortActive ? sort?.direction : void 0;
+          const ariaSort = col.sortable ? direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none" : void 0;
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: cn(
+                "table_th",
+                col.align && `table_align_${col.align}`,
+                col.sortable && "table_th_sortable"
+              ),
+              style: { width: col.width },
+              "aria-sort": ariaSort,
+              children: col.sortable ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "table_sort_button",
+                  onClick: () => handleSortClick(col.key),
+                  disabled: isLoading,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "table_sort_label", children: col.header }),
+                    direction === "asc" ? /* @__PURE__ */ jsx(
+                      ArrowUp,
+                      {
+                        size: iconSize.sm,
+                        className: "table_sort_icon table_sort_icon_active",
+                        "aria-hidden": "true"
+                      }
+                    ) : direction === "desc" ? /* @__PURE__ */ jsx(
+                      ArrowDown,
+                      {
+                        size: iconSize.sm,
+                        className: "table_sort_icon table_sort_icon_active",
+                        "aria-hidden": "true"
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      ArrowUpDown,
+                      {
+                        size: iconSize.sm,
+                        className: "table_sort_icon",
+                        "aria-hidden": "true"
+                      }
+                    )
+                  ]
+                }
+              ) : col.header
+            },
+            col.key
+          );
+        })
+      ] }) }),
       /* @__PURE__ */ jsx("tbody", { className: "table_tbody", children: isLoading ? Array.from({ length: skeletonRows }).map((_, rowIndex) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows have no stable identity
-        /* @__PURE__ */ jsx("tr", { className: "table_row table_row_skeleton", children: columns.map((col) => /* @__PURE__ */ jsx(
-          "td",
-          {
-            className: cn("table_td", col.align && `table_align_${col.align}`),
-            style: { width: col.width },
-            children: /* @__PURE__ */ jsx(Skeleton, { variant: "text" })
-          },
-          col.key
-        )) }, rowIndex)
-      )) : data.map((item, rowIndex) => /* @__PURE__ */ jsx(
-        "tr",
-        {
-          className: cn(
-            "table_row",
-            hoverable && "table_row_hoverable",
-            onRowClick && "table_row_clickable"
-          ),
-          role: onRowClick ? "button" : void 0,
-          tabIndex: onRowClick ? 0 : void 0,
-          onClick: onRowClick ? () => onRowClick(item, rowIndex) : void 0,
-          onKeyDown: onRowClick ? (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onRowClick(item, rowIndex);
-            }
-          } : void 0,
-          children: columns.map((col) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("tr", { className: "table_row table_row_skeleton", children: [
+          selectable && /* @__PURE__ */ jsx("td", { className: "table_td table_td_checkbox" }),
+          columns.map((col) => /* @__PURE__ */ jsx(
             "td",
             {
               className: cn("table_td", col.align && `table_align_${col.align}`),
               style: { width: col.width },
-              children: (() => {
-                if (col.render) return col.render(item, rowIndex);
-                const value = item[col.key];
-                return value === null || value === void 0 || value === "" ? "-" : String(value);
-              })()
+              children: /* @__PURE__ */ jsx(Skeleton, { variant: "text" })
             },
             col.key
           ))
-        },
-        keyExtractor(item, rowIndex)
-      )) })
+        ] }, rowIndex)
+      )) : data.map((item, rowIndex) => {
+        const rowIdentity = selectable ? getRowKey(item, rowIndex) : void 0;
+        const isSelected = rowIdentity !== void 0 && selectedSet.has(rowIdentity);
+        return /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: cn(
+              "table_row",
+              hoverable && "table_row_hoverable",
+              onRowClick && "table_row_clickable",
+              isSelected && "table_row_selected"
+            ),
+            "aria-selected": isSelected ? "true" : void 0,
+            role: onRowClick && !selectable ? "button" : void 0,
+            tabIndex: onRowClick ? 0 : void 0,
+            onClick: onRowClick ? () => onRowClick(item, rowIndex) : void 0,
+            onKeyDown: onRowClick ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onRowClick(item, rowIndex);
+              }
+            } : void 0,
+            children: [
+              selectable && rowIdentity !== void 0 && /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: "table_td table_td_checkbox",
+                  onClick: (e) => e.stopPropagation(),
+                  onKeyDown: (e) => e.stopPropagation(),
+                  children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      "aria-label": selectRowAriaLabel(rowIndex),
+                      checked: isSelected,
+                      onChange: () => handleToggleRow(rowIdentity)
+                    }
+                  )
+                }
+              ),
+              columns.map((col) => /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: cn("table_td", col.align && `table_align_${col.align}`),
+                  style: { width: col.width },
+                  children: (() => {
+                    if (col.render) return col.render(item, rowIndex);
+                    const value = item[col.key];
+                    return value === null || value === void 0 || value === "" ? "-" : String(value);
+                  })()
+                },
+                col.key
+              ))
+            ]
+          },
+          keyExtractor(item, rowIndex)
+        );
+      }) })
     ] }),
     isEmpty && /* @__PURE__ */ jsx("div", { className: "table_empty", role: "status", children: emptyMessage })
   ] });
 };
-var ThemeContext = React20.createContext(null);
+var ThemeContext = React19.createContext(null);
 var useTheme = () => {
-  const ctx = React20.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>'
@@ -3418,15 +3766,15 @@ var ThemeProvider = ({
   targetSelector,
   children
 }) => {
-  const [mode, setModeState] = React20.useState(defaultMode);
-  const [systemDark, setSystemDark] = React20.useState(false);
-  React20.useEffect(() => {
+  const [mode, setModeState] = React19.useState(defaultMode);
+  const [systemDark, setSystemDark] = React19.useState(false);
+  React19.useEffect(() => {
     setModeState(readStored(storageKey) ?? defaultMode);
     if (isClient) {
       setSystemDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
     }
   }, [storageKey, defaultMode]);
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!isClient) return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => setSystemDark(e.matches);
@@ -3434,7 +3782,7 @@ var ThemeProvider = ({
     return () => mq.removeEventListener("change", handler);
   }, []);
   const resolved = mode === "system" ? systemDark ? "dark" : "light" : mode;
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!isClient) return;
     const target = targetSelector ? document.querySelector(targetSelector) : document.documentElement;
     if (!target) return;
@@ -3444,7 +3792,7 @@ var ThemeProvider = ({
       target.setAttribute("data-theme", mode);
     }
   }, [mode, targetSelector]);
-  const setMode = React20.useCallback(
+  const setMode = React19.useCallback(
     (next) => {
       setModeState(next);
       if (storageKey && isClient) {
@@ -3456,13 +3804,13 @@ var ThemeProvider = ({
     },
     [storageKey]
   );
-  const value = React20.useMemo(
+  const value = React19.useMemo(
     () => ({ mode, resolved, setMode }),
     [mode, resolved, setMode]
   );
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 };
-var ClearIcon = () => /* @__PURE__ */ jsx(X, { size: 20, "aria-hidden": "true" });
+var ClearIcon = () => /* @__PURE__ */ jsx(X, { size: iconSize.lg, "aria-hidden": "true" });
 var TextField = ({
   id,
   label,
@@ -3704,24 +4052,24 @@ var Textarea = ({
   ] });
 };
 Textarea.displayName = "Textarea";
-var ToastContext = React20.createContext(null);
+var ToastContext = React19.createContext(null);
 var VARIANT_ICONS = {
-  success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
-  error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
-  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: 18 }),
-  info: /* @__PURE__ */ jsx(Info, { size: 18 }),
-  default: /* @__PURE__ */ jsx(Bell, { size: 18 })
+  success: /* @__PURE__ */ jsx(CheckCircle2, { size: iconSize.md }),
+  error: /* @__PURE__ */ jsx(XCircle, { size: iconSize.md }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: iconSize.md }),
+  info: /* @__PURE__ */ jsx(Info, { size: iconSize.md }),
+  default: /* @__PURE__ */ jsx(Bell, { size: iconSize.md })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [visible, setVisible] = React20.useState(true);
-  const closingRef = React20.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 = React20.useCallback(() => {
+  const close = React19.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setVisible(false);
@@ -3735,7 +4083,7 @@ var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
       children: [
         /* @__PURE__ */ jsx("span", { className: `toast_icon toast_icon_${item.variant}`, "aria-hidden": "true", children: VARIANT_ICONS[item.variant] }),
         /* @__PURE__ */ jsx("span", { className: "toast_message", children: item.message }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "toast_close", onClick: close, "aria-label": closeAriaLabel, children: /* @__PURE__ */ jsx(X, { size: 14 }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "toast_close", onClick: close, "aria-label": closeAriaLabel, children: /* @__PURE__ */ jsx(X, { size: iconSize.xs }) }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -3754,22 +4102,22 @@ var ToastProvider = ({
   maxCount = 5,
   closeAriaLabel = "Close"
 }) => {
-  const [toasts, setToasts] = React20.useState([]);
-  const [isMounted, setIsMounted] = React20.useState(false);
-  React20.useEffect(() => {
+  const [toasts, setToasts] = React19.useState([]);
+  const [isMounted, setIsMounted] = React19.useState(false);
+  React19.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const addToast = React20.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 = React20.useCallback((id) => {
+  const removeToast = React19.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const contextValue = React20.useMemo(() => ({ addToast }), [addToast]);
+  const contextValue = React19.useMemo(() => ({ addToast }), [addToast]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: contextValue, children: [
     children,
     isMounted && createPortal(
@@ -3830,7 +4178,7 @@ var Toggle = ({
   ...props
 }) => {
   const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React20.useState(!!defaultChecked);
+  const [innerChecked, setInnerChecked] = React19.useState(!!defaultChecked);
   const isOn = isControlled ? !!checked : innerChecked;
   const handleToggle = () => {
     if (disabled) return;
@@ -4000,4 +4348,4 @@ var Grid = ({
   );
 };
 
-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, 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, 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 };