@bestow-ui/react 1.4.0 → 1.5.0

package/dist/index.cjs

@@ -143,7 +143,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/theme/contract.css.ts
 var themeClass = { light: "tkagtb0", dark: "tkagtb1" };
-var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } }, duration: { fast: "var(--bestow-duration-fast)", normal: "var(--bestow-duration-normal)", slow: "var(--bestow-duration-slow)" }, zIndex: { overlay: "var(--bestow-z-index-overlay)", modal: "var(--bestow-z-index-modal)", dropdown: "var(--bestow-z-index-dropdown)", toast: "var(--bestow-z-index-toast)", tooltip: "var(--bestow-z-index-tooltip)" }, color: { bg: { "default": "var(--bestow-color-bg-default)", subtle: "var(--bestow-color-bg-subtle)", muted: "var(--bestow-color-bg-muted)", inverse: "var(--bestow-color-bg-inverse)", overlay: "var(--bestow-color-bg-overlay)" }, fg: { "default": "var(--bestow-color-fg-default)", muted: "var(--bestow-color-fg-muted)", subtle: "var(--bestow-color-fg-subtle)", inverse: "var(--bestow-color-fg-inverse)" }, border: { "default": "var(--bestow-color-border-default)", strong: "var(--bestow-color-border-strong)", focus: "var(--bestow-color-border-focus)", input: "var(--bestow-color-border-input)", inputHover: "var(--bestow-color-border-input-hover)" }, primary: { solid: "var(--bestow-color-primary-solid)", solidHover: "var(--bestow-color-primary-solid-hover)", contrast: "var(--bestow-color-primary-contrast)", subtle: "var(--bestow-color-primary-subtle)", subtleHover: "var(--bestow-color-primary-subtle-hover)", text: "var(--bestow-color-primary-text)" }, neutral: { solid: "var(--bestow-color-neutral-solid)", solidHover: "var(--bestow-color-neutral-solid-hover)", contrast: "var(--bestow-color-neutral-contrast)", subtle: "var(--bestow-color-neutral-subtle)", subtleHover: "var(--bestow-color-neutral-subtle-hover)", text: "var(--bestow-color-neutral-text)" }, danger: { solid: "var(--bestow-color-danger-solid)", solidHover: "var(--bestow-color-danger-solid-hover)", contrast: "var(--bestow-color-danger-contrast)", subtle: "var(--bestow-color-danger-subtle)", subtleHover: "var(--bestow-color-danger-subtle-hover)", text: "var(--bestow-color-danger-text)" }, success: { solid: "var(--bestow-color-success-solid)", solidHover: "var(--bestow-color-success-solid-hover)", contrast: "var(--bestow-color-success-contrast)", subtle: "var(--bestow-color-success-subtle)", subtleHover: "var(--bestow-color-success-subtle-hover)", text: "var(--bestow-color-success-text)" }, warning: { solid: "var(--bestow-color-warning-solid)", solidHover: "var(--bestow-color-warning-solid-hover)", contrast: "var(--bestow-color-warning-contrast)", subtle: "var(--bestow-color-warning-subtle)", subtleHover: "var(--bestow-color-warning-subtle-hover)", text: "var(--bestow-color-warning-text)" } }, shadow: { sm: "var(--bestow-shadow-sm)", md: "var(--bestow-shadow-md)", lg: "var(--bestow-shadow-lg)" } };
+var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } }, duration: { fast: "var(--bestow-duration-fast)", normal: "var(--bestow-duration-normal)", slow: "var(--bestow-duration-slow)" }, zIndex: { overlay: "var(--bestow-z-index-overlay)", modal: "var(--bestow-z-index-modal)", dropdown: "var(--bestow-z-index-dropdown)", toast: "var(--bestow-z-index-toast)", tooltip: "var(--bestow-z-index-tooltip)" }, color: { bg: { "default": "var(--bestow-color-bg-default)", subtle: "var(--bestow-color-bg-subtle)", muted: "var(--bestow-color-bg-muted)", inverse: "var(--bestow-color-bg-inverse)", overlay: "var(--bestow-color-bg-overlay)" }, fg: { "default": "var(--bestow-color-fg-default)", muted: "var(--bestow-color-fg-muted)", subtle: "var(--bestow-color-fg-subtle)", inverse: "var(--bestow-color-fg-inverse)" }, border: { "default": "var(--bestow-color-border-default)", strong: "var(--bestow-color-border-strong)", focus: "var(--bestow-color-border-focus)", input: "var(--bestow-color-border-input)", inputHover: "var(--bestow-color-border-input-hover)", control: "var(--bestow-color-border-control)" }, primary: { solid: "var(--bestow-color-primary-solid)", solidHover: "var(--bestow-color-primary-solid-hover)", contrast: "var(--bestow-color-primary-contrast)", subtle: "var(--bestow-color-primary-subtle)", subtleHover: "var(--bestow-color-primary-subtle-hover)", text: "var(--bestow-color-primary-text)" }, neutral: { solid: "var(--bestow-color-neutral-solid)", solidHover: "var(--bestow-color-neutral-solid-hover)", contrast: "var(--bestow-color-neutral-contrast)", subtle: "var(--bestow-color-neutral-subtle)", subtleHover: "var(--bestow-color-neutral-subtle-hover)", text: "var(--bestow-color-neutral-text)" }, danger: { solid: "var(--bestow-color-danger-solid)", solidHover: "var(--bestow-color-danger-solid-hover)", contrast: "var(--bestow-color-danger-contrast)", subtle: "var(--bestow-color-danger-subtle)", subtleHover: "var(--bestow-color-danger-subtle-hover)", text: "var(--bestow-color-danger-text)" }, success: { solid: "var(--bestow-color-success-solid)", solidHover: "var(--bestow-color-success-solid-hover)", contrast: "var(--bestow-color-success-contrast)", subtle: "var(--bestow-color-success-subtle)", subtleHover: "var(--bestow-color-success-subtle-hover)", text: "var(--bestow-color-success-text)" }, warning: { solid: "var(--bestow-color-warning-solid)", solidHover: "var(--bestow-color-warning-solid-hover)", contrast: "var(--bestow-color-warning-contrast)", subtle: "var(--bestow-color-warning-subtle)", subtleHover: "var(--bestow-color-warning-subtle-hover)", text: "var(--bestow-color-warning-text)" } }, shadow: { sm: "var(--bestow-shadow-sm)", md: "var(--bestow-shadow-md)", lg: "var(--bestow-shadow-lg)" } };
 
 // src/theme/color.ts
 var import_tokens = require("@bestow-ui/tokens");
@@ -326,9 +326,11 @@ function themeToStyle(theme, mode) {
 // src/theme/presets.ts
 var strongInputBorders = /* @__PURE__ */ Object.freeze({
   // 라이트: gray600 / gray700 — 흰 배경 5.18:1, bg.subtle(gray50) 4.91:1
-  light: { color: { border: { input: "#666e76", inputHover: "#495057" } } },
+  // 체크 컨트롤: gray600 — 흰 배경 5.18:1
+  light: { color: { border: { input: "#666e76", inputHover: "#495057", control: "#666e76" } } },
   // 다크: gray500 / gray300 — gray600 은 bg.subtle(gray900) 위에서 2.98:1 이라 한 단계 밝게. bg.default 8.57:1, bg.subtle 7.43:1
-  dark: { color: { border: { input: "#adb5bd", inputHover: "#dee2e6" } } }
+  // 체크 컨트롤: gray500 — 다크 기본값(border.strong)과 같다(이미 8.57:1)
+  dark: { color: { border: { input: "#adb5bd", inputHover: "#dee2e6", control: "#adb5bd" } } }
 });
 
 // src/i18n/en.ts
@@ -2139,6 +2141,7 @@ var toggle2 = "c2pbq71 c2pbq70";
 
 // src/components/Combobox/Combobox.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
+var NO_RESULTS_ANNOUNCE_DELAY = 800;
 var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
 var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2(props, ref) {
   const {
@@ -2264,6 +2267,14 @@ var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2
     document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
   }, [open, activeIndex]);
   const hasOptions = filtered.length > 0;
+  const noResults = open && !disabled && !hasOptions;
+  const [announcedFor, setAnnouncedFor] = (0, import_react32.useState)(void 0);
+  (0, import_react32.useEffect)(() => {
+    if (!noResults) return;
+    const timer2 = setTimeout(() => setAnnouncedFor(query), NO_RESULTS_ANNOUNCE_DELAY);
+    return () => clearTimeout(timer2);
+  }, [noResults, query]);
+  const announceNoResults = noResults && announcedFor === query;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
     label7 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { id: labelId, htmlFor: inputId, className: label2, children: [
       label7,
@@ -2393,10 +2404,14 @@ var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2
                 );
               })
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: empty, role: "status", children: emptyMessage })
+          ) : (
+            // 스크린리더 알림은 아래의 항상 있는 status 영역이 맡는다 (여기는 화면 표시만)
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: empty, children: emptyMessage })
+          )
         }
       ) })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { role: "status", className: visuallyHidden, children: announceNoResults ? emptyMessage : "" }),
     name && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { type: "hidden", name, value: selectedValue ?? "" }),
     helperText3 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
@@ -2863,6 +2878,7 @@ var root10 = "r2jefr0";
 
 // src/components/FileUpload/FileUpload.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
+var REMOVED_ANNOUNCE_DELAY = 500;
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(bytes < 10 * 1024 ? 1 : 0)} KB`;
@@ -2913,6 +2929,8 @@ var FileUpload = /* @__PURE__ */ (0, import_react37.forwardRef)(function FileUpl
   const selectButtonRef = (0, import_react37.useRef)(null);
   const removeButtonRefs = (0, import_react37.useRef)([]);
   const focusAfterRemove = (0, import_react37.useRef)(null);
+  const announceTimer = (0, import_react37.useRef)(void 0);
+  (0, import_react37.useEffect)(() => () => clearTimeout(announceTimer.current), []);
   const selectLabel = m.fileSelect ?? "\uD30C\uC77C \uC120\uD0DD";
   const reasonText = (rejection) => {
     const fileName2 = rejection.file.name;
@@ -2921,10 +2939,16 @@ var FileUpload = /* @__PURE__ */ (0, import_react37.forwardRef)(function FileUpl
     if (rejection.reason === "type") return m.fileTypeNotAllowed?.(fileName2) ?? `${fileName2}: \uC62C\uB9B4 \uC218 \uC5C6\uB294 \uD615\uC2DD\uC774\uC5D0\uC694.`;
     return m.fileTooMany?.(maxFiles ?? 0) ?? `\uD30C\uC77C\uC740 ${maxFiles}\uAC1C\uAE4C\uC9C0 \uC62C\uB9B4 \uC218 \uC788\uC5B4\uC694.`;
   };
-  const commit = (next, message) => {
+  const announce = (message, delay = 0) => {
+    clearTimeout(announceTimer.current);
+    if (delay === 0) return setAnnouncement(message);
+    setAnnouncement("");
+    announceTimer.current = setTimeout(() => setAnnouncement(message), delay);
+  };
+  const commit = (next, message, delay = 0) => {
     if (!isControlled) setInnerFiles(next);
     onValueChange?.(next);
-    setAnnouncement(message);
+    announce(message, delay);
   };
   const addFiles = (incoming) => {
     if (disabled || incoming.length === 0) return;
@@ -2945,14 +2969,14 @@ var FileUpload = /* @__PURE__ */ (0, import_react37.forwardRef)(function FileUpl
     const summary = m.filesSelected?.(next.length) ?? `\uD30C\uC77C ${next.length}\uAC1C \uC120\uD0DD\uB428`;
     const errors2 = [...new Set(rejected.map(reasonText))].join(" ");
     if (accepted.length > 0) commit(next, [summary, errors2].filter(Boolean).join(" "));
-    else setAnnouncement(errors2);
+    else announce(errors2);
   };
   const removeAt = (index) => {
     const removed = files[index];
     const next = files.filter((_, i) => i !== index);
     focusAfterRemove.current = Math.min(index, next.length - 1);
     setRejections([]);
-    commit(next, m.fileRemoved?.(removed.name) ?? `${removed.name} \uC0AD\uC81C\uB428`);
+    commit(next, m.fileRemoved?.(removed.name) ?? `${removed.name} \uC0AD\uC81C\uB428`, REMOVED_ANNOUNCE_DELAY);
   };
   (0, import_react37.useEffect)(() => {
     if (focusAfterRemove.current === null) return;
@@ -3041,7 +3065,7 @@ var FileUpload = /* @__PURE__ */ (0, import_react37.forwardRef)(function FileUpl
     files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: item6, children: [
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: fileIcon, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons14.FileIcon, { size: 16 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: fileName, children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: fileSize, children: formatSize(file.size) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { id: `${baseId}-size-${index}`, className: fileSize, children: formatSize(file.size) }),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         IconButton,
         {
@@ -3050,6 +3074,7 @@ var FileUpload = /* @__PURE__ */ (0, import_react37.forwardRef)(function FileUpl
           },
           size: "sm",
           "aria-label": m.fileRemove?.(file.name) ?? `${file.name} \uC0AD\uC81C`,
+          "aria-describedby": `${baseId}-size-${index}`,
           disabled,
           onClick: () => removeAt(index),
           children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons14.XIcon, {})
@@ -3256,9 +3281,12 @@ var NumberInput = /* @__PURE__ */ (0, import_react39.forwardRef)(
       if (parse(field4.raw) !== next) setRaw(toRaw(next));
     }, [value4]);
     const current2 = parse(field4.raw);
-    const setValue = (next) => {
+    const valueText = (n) => `${format2(toRaw(n))}${unit2 ?? ""}`;
+    const [announcement, setAnnouncement] = (0, import_react39.useState)("");
+    const setValue = (next, announce = true) => {
       setRaw(toRaw(next));
       emit(next);
+      if (announce) setAnnouncement(valueText(next));
     };
     const stepBy = (delta) => {
       if (disabled || readOnly) return;
@@ -3314,13 +3342,17 @@ var NumberInput = /* @__PURE__ */ (0, import_react39.forwardRef)(
           "aria-valuenow": current2 ?? void 0,
           "aria-valuemin": min,
           "aria-valuemax": max,
-          "aria-valuetext": current2 === null ? void 0 : `${field4.display}${unit2 ?? ""}`,
+          "aria-valuetext": current2 === null ? void 0 : valueText(current2),
           value: field4.display,
-          onChange: field4.onChange,
+          onChange: (event) => {
+            setAnnouncement("");
+            field4.onChange(event);
+          },
           onKeyDown: handleKeyDown,
           onBlur: (event) => {
-            if (current2 !== null && clamp(current2) !== current2) setValue(clamp(current2));
+            if (current2 !== null && clamp(current2) !== current2) setValue(clamp(current2), false);
             else if (current2 === null && field4.raw !== "") setRaw("");
+            setAnnouncement("");
             onBlur?.(event);
           },
           size,
@@ -3335,7 +3367,8 @@ var NumberInput = /* @__PURE__ */ (0, import_react39.forwardRef)(
           ...rest
         }
       ),
-      name && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) })
+      name && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-live": "assertive", "aria-atomic": "true", className: visuallyHidden, children: announcement })
     ] });
   }
 );