@bigtablet/design-system 3.2.2 → 3.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import './index.css';
 import * as React20 from 'react';
-import { createContext, useRef, useState, useLayoutEffect, useId, useEffect, useContext, useCallback, useMemo, Fragment } 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 { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -172,6 +172,7 @@ var Accordion = ({
   multiple = false,
   defaultOpenKeys = [],
   openKeys: controlledKeys,
+  onValueChange,
   onChange,
   className,
   ...props
@@ -183,7 +184,7 @@ var Accordion = ({
     const isOpen = open.includes(key);
     const next = isOpen ? open.filter((k) => k !== key) : multiple ? [...open, key] : [key];
     if (!isControlled) setInternalKeys(next);
-    onChange?.(next);
+    (onValueChange ?? onChange)?.(next);
   };
   return /* @__PURE__ */ jsx("div", { className: cn("accordion", className), ...props, children: items.map((item) => {
     const isOpen = open.includes(item.key);
@@ -220,6 +221,7 @@ var Accordion = ({
           role: "region",
           "aria-labelledby": headerId,
           "aria-hidden": !isOpen,
+          inert: !isOpen,
           className: cn("accordion_panel", isOpen && "accordion_panel_open"),
           children: /* @__PURE__ */ jsx("div", { className: "accordion_panel_wrap", children: /* @__PURE__ */ jsx("div", { className: "accordion_content", children: item.content }) })
         }
@@ -463,6 +465,7 @@ 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 style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
   React20.useEffect(() => {
@@ -480,6 +483,52 @@ var Menu = ({ items, trigger, align = "start" }) => {
       document.removeEventListener("keydown", handleEsc);
     };
   }, [open]);
+  React20.useEffect(() => {
+    const active = document.activeElement;
+    if (!open || active && itemRefs.current.includes(active)) return;
+    const first = items.findIndex((it) => !it.disabled);
+    if (first >= 0) itemRefs.current[first]?.focus();
+  }, [open, items]);
+  const moveFocus = (dir) => {
+    const enabled = items.flatMap((it, i) => it.disabled ? [] : [i]);
+    if (enabled.length === 0) return;
+    if (dir === "first") return void itemRefs.current[enabled[0]]?.focus();
+    if (dir === "last") return void itemRefs.current[enabled[enabled.length - 1]]?.focus();
+    const pos = enabled.findIndex((i) => itemRefs.current[i] === document.activeElement);
+    const next = pos < 0 ? dir === 1 ? 0 : enabled.length - 1 : (pos + dir + enabled.length) % enabled.length;
+    itemRefs.current[enabled[next]]?.focus();
+  };
+  const handleMenuKeyDown = (e) => {
+    if (["ArrowDown", "ArrowUp", "Home", "End", "Escape"].includes(e.key)) {
+      e.stopPropagation();
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveFocus(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveFocus(-1);
+        break;
+      case "Home":
+        e.preventDefault();
+        moveFocus("first");
+        break;
+      case "End":
+        e.preventDefault();
+        moveFocus("last");
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        wrapperRef.current?.querySelector("[aria-haspopup]")?.focus();
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+    }
+  };
   const triggerWithProps = React20.cloneElement(
     trigger,
     {
@@ -498,11 +547,16 @@ var Menu = ({ items, trigger, align = "start" }) => {
         role: "menu",
         style,
         className: cn("menu", `menu_align_${align}`),
-        children: items.map((item) => /* @__PURE__ */ jsxs(
+        onKeyDown: handleMenuKeyDown,
+        children: items.map((item, index) => /* @__PURE__ */ jsxs(
           "button",
           {
+            ref: (el) => {
+              itemRefs.current[index] = el;
+            },
             type: "button",
             role: "menuitem",
+            tabIndex: -1,
             disabled: item.disabled,
             className: cn(
               "menu_item",
@@ -543,7 +597,7 @@ var NavBar = ({
   const linksRef = useRef(null);
   const [indicator, setIndicator] = useState(null);
   const [hasMounted, setHasMounted] = useState(false);
-  useLayoutEffect(() => {
+  useSafeLayoutEffect(() => {
     const links = linksRef.current;
     if (!links) return;
     const update = () => {
@@ -614,6 +668,7 @@ var NavBar = ({
 var LocaleSwitcher = ({ locale }) => {
   const [open, setOpen] = useState(false);
   const wrapperRef = useRef(null);
+  const itemRefs = useRef([]);
   const menuId = useId();
   const currentOption = locale.options.find((o) => o.value === locale.current);
   useEffect(() => {
@@ -631,8 +686,53 @@ var LocaleSwitcher = ({ locale }) => {
       document.removeEventListener("keydown", escHandler);
     };
   }, [open]);
+  useEffect(() => {
+    const active = document.activeElement;
+    if (!open || active && itemRefs.current.includes(active)) return;
+    itemRefs.current[0]?.focus();
+  }, [open]);
+  const moveFocus = (dir) => {
+    const n = locale.options.length;
+    if (n === 0) return;
+    if (dir === "first") return void itemRefs.current[0]?.focus();
+    if (dir === "last") return void itemRefs.current[n - 1]?.focus();
+    const pos = itemRefs.current.indexOf(document.activeElement);
+    const next = pos < 0 ? dir === 1 ? 0 : n - 1 : (pos + dir + n) % n;
+    itemRefs.current[next]?.focus();
+  };
+  const handleMenuKeyDown = (e) => {
+    if (["ArrowDown", "ArrowUp", "Home", "End", "Escape"].includes(e.key)) {
+      e.stopPropagation();
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveFocus(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveFocus(-1);
+        break;
+      case "Home":
+        e.preventDefault();
+        moveFocus("first");
+        break;
+      case "End":
+        e.preventDefault();
+        moveFocus("last");
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        wrapperRef.current?.querySelector("[aria-haspopup]")?.focus();
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+    }
+  };
   const handleSelect = (value) => {
-    locale.onChange(value);
+    (locale.onValueChange ?? locale.onChange)?.(value);
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: "nav_bar_locale", children: [
@@ -652,19 +752,32 @@ var LocaleSwitcher = ({ locale }) => {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx("ul", { id: menuId, role: "menu", className: "nav_bar_locale_menu", children: locale.options.map((opt) => /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(
-      "button",
+    open && /* @__PURE__ */ jsx(
+      "ul",
       {
-        type: "button",
-        role: "menuitem",
-        className: cn(
-          "nav_bar_locale_item",
-          opt.value === locale.current && "nav_bar_locale_item_active"
-        ),
-        onClick: () => handleSelect(opt.value),
-        children: opt.label
+        id: menuId,
+        role: "menu",
+        className: "nav_bar_locale_menu",
+        onKeyDown: handleMenuKeyDown,
+        children: locale.options.map((opt, index) => /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (el) => {
+              itemRefs.current[index] = el;
+            },
+            type: "button",
+            role: "menuitem",
+            tabIndex: -1,
+            className: cn(
+              "nav_bar_locale_item",
+              opt.value === locale.current && "nav_bar_locale_item_active"
+            ),
+            onClick: () => handleSelect(opt.value),
+            children: opt.label
+          }
+        ) }, opt.value))
       }
-    ) }, opt.value)) })
+    )
   ] });
 };
 var NavLink = ({ active, className, children, ...props }) => {
@@ -816,7 +929,7 @@ var TabList = ({ ariaLabel, className, children, ...props }) => {
   const listRef = React20.useRef(null);
   const [indicator, setIndicator] = React20.useState(null);
   const [hasMounted, setHasMounted] = React20.useState(false);
-  React20.useLayoutEffect(() => {
+  useSafeLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
     const update = () => {
@@ -1086,12 +1199,27 @@ var Tooltip = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform });
-  const trigger = React20.cloneElement(children, {
-    onMouseEnter: show,
-    onMouseLeave: hide,
-    onFocus: show,
-    onBlur: hide,
-    "aria-describedby": open ? tooltipId : void 0
+  const child = children;
+  const childProps = child.props;
+  const trigger = React20.cloneElement(child, {
+    onMouseEnter: (e) => {
+      childProps.onMouseEnter?.(e);
+      show();
+    },
+    onMouseLeave: (e) => {
+      childProps.onMouseLeave?.(e);
+      hide();
+    },
+    onFocus: (e) => {
+      childProps.onFocus?.(e);
+      show();
+    },
+    onBlur: (e) => {
+      childProps.onBlur?.(e);
+      hide();
+    },
+    // 자식의 기존 aria-describedby 보존 + tooltip id 합성 (폼 설명/에러 연결 끊김 방지)
+    "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: [
@@ -1165,10 +1293,13 @@ var baseColors = {
   neutral900: "#121212",
   neutral925: "#141414",
   neutral950: "#0A0A0A",
-  statusError: "#EF4444",
-  statusSuccess: "#10B981",
-  statusWarning: "#F59E0B",
-  statusInfo: "#3B82F6",
+  // caption 전용 AA 값 (neutral_500 과 분리 — SCSS _index.scss 와 동일)
+  textCaptionLight: "#6F6F6F",
+  // status — SCSS _index.scss 와 동일한 AA 통과(red/green/amber/blue-700) 값
+  statusError: "#B91C1C",
+  statusSuccess: "#047857",
+  statusWarning: "#B45309",
+  statusInfo: "#1D4ED8",
   alphaBlack5: "rgba(0, 0, 0, 0.05)",
   alphaBlack8: "rgba(0, 0, 0, 0.08)",
   alphaBlack12: "rgba(26, 26, 26, 0.12)",
@@ -1186,7 +1317,7 @@ var colors = {
   text: {
     heading: baseColors.neutral900,
     body: baseColors.neutral700,
-    caption: baseColors.neutral500,
+    caption: baseColors.textCaptionLight,
     brand: baseColors.brandPrimary,
     inverse: baseColors.neutral0,
     disabled: baseColors.alphaBlack38
@@ -1592,6 +1723,8 @@ var Button = ({
   fullWidth = false,
   radius: radius2,
   danger = false,
+  type = "button",
+  ref,
   className,
   children,
   ...props
@@ -1605,7 +1738,7 @@ var Button = ({
     danger && "button_danger",
     className
   );
-  return /* @__PURE__ */ jsxs("button", { className: buttonClassName, ...props, children: [
+  return /* @__PURE__ */ jsxs("button", { ref, type, className: buttonClassName, ...props, children: [
     leadingIcon && /* @__PURE__ */ jsx("span", { className: "button_icon", "aria-hidden": "true", children: leadingIcon }),
     children && /* @__PURE__ */ jsx("span", { className: "button_label", children }),
     trailingIcon && /* @__PURE__ */ jsx("span", { className: "button_icon", "aria-hidden": "true", children: trailingIcon })
@@ -1757,6 +1890,7 @@ var Card = ({
   interactive = false,
   footer,
   footerAlign = "end",
+  ref,
   className,
   children,
   ...props
@@ -1769,7 +1903,7 @@ var Card = ({
     { card_bordered: bordered, card_interactive: interactive },
     className
   );
-  return /* @__PURE__ */ jsxs("div", { className: cardClassName, ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: cardClassName, ...props, children: [
     heading ? /* @__PURE__ */ jsx(HeadingTag, { className: "card_title", children: heading }) : null,
     /* @__PURE__ */ jsx("div", { className: "card_body", children }),
     footer ? /* @__PURE__ */ jsx("div", { className: cn("card_footer", `card_footer_${footerAlign}`), children: footer }) : null
@@ -1966,6 +2100,7 @@ var Dropdown = ({
   placeholder = "Select\u2026",
   options,
   value,
+  onValueChange,
   onChange,
   defaultValue = null,
   disabled,
@@ -1990,9 +2125,9 @@ var Dropdown = ({
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
       if (!isControlled) setInternalValue(next);
-      onChange?.(next, option);
+      (onValueChange ?? onChange)?.(next, option);
     },
-    [isControlled, onChange, options]
+    [isControlled, onValueChange, onChange, options]
   );
   useEffect(() => {
     const handleOutsideClick = (e) => {
@@ -2178,6 +2313,7 @@ var range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => st
 var DatePicker = ({
   label,
   value,
+  onValueChange,
   onChange,
   mode = "year-month-day",
   startYear = 1950,
@@ -2264,14 +2400,15 @@ var DatePicker = ({
   );
   const emit = React20.useCallback(
     (yy, mm, dd) => {
+      const cb = onValueChange ?? onChange;
       if (mode === "year-month") {
-        onChange(`${yy}-${pad(mm)}`);
+        cb?.(`${yy}-${pad(mm)}`);
         return;
       }
       const safeDay = Math.min(dd ?? 1, getDaysInMonth(yy, mm));
-      onChange(`${yy}-${pad(mm)}-${pad(safeDay)}`);
+      cb?.(`${yy}-${pad(mm)}-${pad(safeDay)}`);
     },
-    [mode, onChange]
+    [mode, onValueChange, onChange]
   );
   const handleYearChange = React20.useCallback(
     (raw) => {
@@ -2333,7 +2470,7 @@ var DatePicker = ({
               placeholder: yearLabel,
               options: yearOptions,
               value: year ? String(year) : null,
-              onChange: handleYearChange,
+              onValueChange: handleYearChange,
               disabled
             }
           ),
@@ -2346,7 +2483,7 @@ var DatePicker = ({
               placeholder: monthLabel,
               options: monthOptions,
               value: month ? String(month) : null,
-              onChange: handleMonthChange,
+              onValueChange: handleMonthChange,
               disabled: disabled || !year
             }
           ),
@@ -2359,7 +2496,7 @@ var DatePicker = ({
               placeholder: dayLabel,
               options: dayOptions,
               value: day ? String(day) : null,
-              onChange: handleDayChange,
+              onValueChange: handleDayChange,
               disabled: disabled || !month
             }
           )
@@ -2389,12 +2526,11 @@ var FileInput = ({
   const helperId = React20.useId();
   const inputRef = React20.useRef(null);
   const [previewUrls, setPreviewUrls] = React20.useState([]);
+  const previewUrlsRef = React20.useRef([]);
   const isPreviewVariant = variant === "preview";
   const showPreview = isPreviewVariant || preview;
   const handleChange = (e) => {
     const files = e.currentTarget.files;
-    onFiles?.(files);
-    onChange?.(e);
     if (showPreview && files) {
       for (const url of previewUrls) {
         URL.revokeObjectURL(url);
@@ -2407,12 +2543,16 @@ var FileInput = ({
         }
       }
       setPreviewUrls(urls);
+      previewUrlsRef.current = urls;
     } else {
       for (const url of previewUrls) {
         URL.revokeObjectURL(url);
       }
       setPreviewUrls([]);
+      previewUrlsRef.current = [];
     }
+    onFiles?.(files);
+    onChange?.(e);
   };
   const handleRemove = (e) => {
     e.preventDefault();
@@ -2421,6 +2561,7 @@ var FileInput = ({
       URL.revokeObjectURL(url);
     }
     setPreviewUrls([]);
+    previewUrlsRef.current = [];
     if (inputRef.current) {
       inputRef.current.value = "";
     }
@@ -2428,11 +2569,11 @@ var FileInput = ({
   };
   React20.useEffect(() => {
     return () => {
-      for (const url of previewUrls) {
+      for (const url of previewUrlsRef.current) {
         URL.revokeObjectURL(url);
       }
     };
-  }, [previewUrls]);
+  }, []);
   const hasImage = previewUrls.length > 0;
   const rootClassName = cn(
     "file_input",
@@ -2564,6 +2705,8 @@ var IconButton = ({
   variant = "standard",
   size = "md",
   icon,
+  type = "button",
+  ref,
   className,
   ...props
 }) => {
@@ -2573,7 +2716,7 @@ var IconButton = ({
     `icon_button_size_${size}`,
     className
   );
-  return /* @__PURE__ */ jsx("button", { className: buttonClassName, ...props, children: /* @__PURE__ */ jsx("span", { className: "icon_button_icon", "aria-hidden": "true", children: icon }) });
+  return /* @__PURE__ */ jsx("button", { ref, type, className: buttonClassName, ...props, children: /* @__PURE__ */ jsx("span", { className: "icon_button_icon", "aria-hidden": "true", children: icon }) });
 };
 var LinearProgress = ({
   totalSteps,
@@ -2646,7 +2789,7 @@ var ListItem = ({
           if (disabled || !onClick) return;
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
-            onClick(e);
+            e.currentTarget.click();
           }
         },
         role: onClick ? "button" : void 0,
@@ -2742,14 +2885,6 @@ var Modal = ({
     transform: open ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  const handleEscape = React20.useEffectEvent((e) => {
-    if (e.key === "Escape") onClose?.();
-  });
-  React20.useEffect(() => {
-    if (!open) return;
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [open]);
   React20.useEffect(() => {
     if (!open) return;
     const body = document.body;
@@ -2784,7 +2919,10 @@ var Modal = ({
       "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
       onClick: () => closeOnOverlay && onClose?.(),
       onKeyDown: (e) => {
-        if (e.key === "Escape") onClose?.();
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose?.();
+        }
       },
       children: /* @__PURE__ */ jsxs(
         animated.div,
@@ -2822,6 +2960,7 @@ var Modal = ({
 var OtpInput = ({
   length = 6,
   value = "",
+  onValueChange,
   onChange,
   error = false,
   disabled = false,
@@ -2844,7 +2983,7 @@ var OtpInput = ({
     inputsRef.current[index]?.focus();
   };
   const updateValue = (newDigits) => {
-    onChange?.(newDigits.join(""));
+    (onValueChange ?? onChange)?.(newDigits.join(""));
   };
   const handleChange = (index, e) => {
     const nextDigit = e.target.value;
@@ -2968,10 +3107,12 @@ var getPaginationItems = (page, totalPages) => {
 var Pagination = ({
   page,
   totalPages,
+  onPageChange,
   onChange,
   prevLabel = "Previous page",
   nextLabel = "Next page"
 }) => {
+  const emit = onPageChange ?? onChange;
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
   const items = React20.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
@@ -2981,7 +3122,7 @@ var Pagination = ({
       {
         type: "button",
         className: "pagination_item",
-        onClick: () => onChange(page - 1),
+        onClick: () => emit?.(page - 1),
         disabled: prevDisabled,
         "aria-label": prevLabel,
         children: "\u2039"
@@ -3000,7 +3141,7 @@ var Pagination = ({
         {
           type: "button",
           className: buttonClassName,
-          onClick: () => onChange(it),
+          onClick: () => emit?.(it),
           "aria-current": isActive ? "page" : void 0,
           children: it
         }
@@ -3011,7 +3152,7 @@ var Pagination = ({
       {
         type: "button",
         className: "pagination_item",
-        onClick: () => onChange(page + 1),
+        onClick: () => emit?.(page + 1),
         disabled: nextDisabled,
         "aria-label": nextLabel,
         children: "\u203A"
@@ -3277,13 +3418,14 @@ var ThemeProvider = ({
   targetSelector,
   children
 }) => {
-  const [mode, setModeState] = React20.useState(() => {
-    return readStored(storageKey) ?? defaultMode;
-  });
-  const [systemDark, setSystemDark] = React20.useState(() => {
-    if (!isClient) return false;
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  });
+  const [mode, setModeState] = React20.useState(defaultMode);
+  const [systemDark, setSystemDark] = React20.useState(false);
+  React20.useEffect(() => {
+    setModeState(readStored(storageKey) ?? defaultMode);
+    if (isClient) {
+      setSystemDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
+    }
+  }, [storageKey, defaultMode]);
   React20.useEffect(() => {
     if (!isClient) return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
@@ -3333,6 +3475,7 @@ var TextField = ({
   fullWidth,
   size = "md",
   className,
+  onValueChange,
   onChangeAction,
   imeStrategy = "delayed",
   value,
@@ -3363,10 +3506,10 @@ var TextField = ({
       setInnerValue(nextValue);
       if (nextValue !== lastEmittedValueRef.current) {
         lastEmittedValueRef.current = nextValue;
-        onChangeAction?.(nextValue);
+        (onValueChange ?? onChangeAction)?.(nextValue);
       }
     },
-    [onChangeAction]
+    [onValueChange, onChangeAction]
   );
   const handleClear = useCallback(() => {
     emit("");
@@ -3416,7 +3559,7 @@ var TextField = ({
                   setInnerValue(rawValue);
                   if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
                     lastEmittedValueRef.current = rawValue;
-                    onChangeAction?.(rawValue);
+                    (onValueChange ?? onChangeAction)?.(rawValue);
                   }
                   return;
                 }
@@ -3446,6 +3589,7 @@ var Textarea = ({
   fullWidth,
   size = "md",
   className,
+  onValueChange,
   onChangeAction,
   imeStrategy = "delayed",
   value,
@@ -3513,7 +3657,7 @@ var Textarea = ({
     setInnerValue(nextValue);
     if (nextValue !== lastEmittedValueRef.current) {
       lastEmittedValueRef.current = nextValue;
-      onChangeAction?.(nextValue);
+      (onValueChange ?? onChangeAction)?.(nextValue);
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
@@ -3545,7 +3689,7 @@ var Textarea = ({
             setInnerValue(rawValue);
             if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
               lastEmittedValueRef.current = rawValue;
-              onChangeAction?.(rawValue);
+              (onValueChange ?? onChangeAction)?.(rawValue);
             }
             return;
           }
@@ -3625,7 +3769,8 @@ var ToastProvider = ({
   const removeToast = React20.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
+  const contextValue = React20.useMemo(() => ({ addToast }), [addToast]);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: contextValue, children: [
     children,
     isMounted && createPortal(
       // biome-ignore lint/a11y/useSemanticElements: <section> would create unwanted nesting in portal; role=region is the WAI-ARIA equivalent for live announcements
@@ -3675,6 +3820,7 @@ var useToast = () => {
 var Toggle = ({
   checked,
   defaultChecked,
+  onCheckedChange,
   onChange,
   size = "sm",
   disabled,
@@ -3690,7 +3836,7 @@ var Toggle = ({
     if (disabled) return;
     const next = !isOn;
     if (!isControlled) setInnerChecked(next);
-    onChange?.(next);
+    (onCheckedChange ?? onChange)?.(next);
   };
   const rootClassName = cn(
     "toggle",
@@ -3751,6 +3897,7 @@ var Container = ({
   size = "xl",
   center = true,
   as: Tag = "div",
+  ref,
   className,
   children,
   ...props
@@ -3758,6 +3905,7 @@ var Container = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn("container", `container_size_${size}`, center && "container_center", className),
       ...props,
       children
@@ -3768,6 +3916,7 @@ var Section = ({
   spacing: spacing2 = "md",
   bg = "default",
   as: Tag = "section",
+  ref,
   className,
   children,
   ...props
@@ -3775,6 +3924,7 @@ var Section = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn(
         "section",
         `section_spacing_${spacing2}`,
@@ -3793,6 +3943,7 @@ var Stack = ({
   justify,
   wrap,
   as: Tag = "div",
+  ref,
   className,
   children,
   style,
@@ -3801,6 +3952,7 @@ var Stack = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn(
         "stack",
         `stack_${direction}`,
@@ -3823,6 +3975,7 @@ var Grid = ({
   colGap,
   singleColOnMobile = true,
   as: Tag = "div",
+  ref,
   className,
   children,
   style,
@@ -3832,6 +3985,7 @@ var Grid = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn("grid_layout", singleColOnMobile && "grid_layout_mobile_single", className),
       style: {
         "--grid-cols": gridTemplateColumns,
@@ -3846,4 +4000,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, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Dropdown, EmptyState, ErrorState, FileInput, Grid, Hero, Icon, IconButton, LinearProgress, ListItem, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, Pagination, Popover, Radio, RadioGroup, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Tab, TabList, TabPanel, Table, Tabs, TextField, Textarea, ThemeProvider, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };