@kjun-ui/native 0.8.1 → 0.10.0

package/dist/index.cjs

@@ -141,9 +141,23 @@ function mergeIcons(parent, own) {
 function withFallbackIcons(registry, fallbacks) {
   return mergeIcons(fallbacks, registry);
 }
+var warnedIcons = /* @__PURE__ */ new Set();
+function developmentMode() {
+  try {
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function warnMissingIcon(name) {
+  if (!developmentMode() || warnedIcons.has(name)) return;
+  warnedIcons.add(name);
+  console.warn(`KJUN Icon: "${name}" \uC544\uC774\uCF58\uC774 \uB4F1\uB85D\uB418\uC9C0 \uC54A\uC544 help-circle\uB85C \uB300\uC2E0\uD569\uB2C8\uB2E4. @kjun-ui/icons/icons/${name}\uB97C import\uD574 KjunProvider\uC758 icons\uC5D0 \uB4F1\uB85D\uD558\uC138\uC694.`);
+}
 function resolveIcon(registry, name, filled = false) {
   var _a;
   const definition = Object.prototype.hasOwnProperty.call(registry, name) ? registry[name] : void 0;
+  if (!definition && name) warnMissingIcon(name);
   const filledNodes = filled && (definition == null ? void 0 : definition.filled);
   return { nodes: filledNodes || (definition == null ? void 0 : definition.outline) || ((_a = registry["help-circle"]) == null ? void 0 : _a.outline) || import_defaults.defaultIcons["help-circle"].outline, filled: !!filledNodes };
 }
@@ -234,6 +248,10 @@ function installLayerKeyboard(document2, state, keyupFallback = false) {
 var import_react2 = require("react");
 
 // shared/package-runtime/layer-state.ts
+function chooseReturnTarget(chosen, fallback2) {
+  if (chosen === false) return void 0;
+  return chosen && chosen.isConnected !== false ? chosen : fallback2;
+}
 function createLayerState() {
   const entries = /* @__PURE__ */ new Map(), listeners = /* @__PURE__ */ new Set();
   const restoredFocus = /* @__PURE__ */ new WeakSet();
@@ -254,6 +272,7 @@ function createLayerState() {
     return !layer.blocked && (layer.kind === "window" ? ((_a = topWindow()) == null ? void 0 : _a.id) === layer.id : ((_b = topWindow()) == null ? void 0 : _b.id) === layer.owner);
   };
   const top = () => [...entries.values()].filter(active).sort((a, b) => a.order - b.order).at(-1);
+  const topPopup = () => [...entries.values()].filter((layer) => layer.kind !== "tooltip" && active(layer)).sort((a, b) => a.order - b.order).at(-1);
   function dismiss(layer) {
     if (layer.closeRequested) return;
     layer.closeRequested = true;
@@ -273,6 +292,7 @@ function createLayerState() {
     entries,
     topWindow,
     top,
+    topPopup,
     windowOf,
     isRestoredFocus(target) {
       return !!target && restoredFocus.has(target);
@@ -421,21 +441,31 @@ function focusTrigger(target) {
   }
   return target;
 }
-function restoreFocus(target, state, id) {
+function restoreFocus(target, state, id, fallback2) {
+  const usable = (item) => (item == null ? void 0 : item.isConnected) !== false && !(typeof HTMLElement !== "undefined" && item instanceof HTMLElement && item.closest("[inert]"));
   const restore = () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (state.entries.has(id)) return;
-    if ((target == null ? void 0 : target.isConnected) !== false && !(typeof HTMLElement !== "undefined" && target instanceof HTMLElement && target.closest("[inert]"))) (_a = target == null ? void 0 : target.focus) == null ? void 0 : _a.call(target, { preventScroll: true });
-    else (_d = (_c = (_b = state.topWindow()) == null ? void 0 : _b.root) == null ? void 0 : _c.focus) == null ? void 0 : _d.call(_c, { preventScroll: true });
+    if (usable(target)) (_a = target == null ? void 0 : target.focus) == null ? void 0 : _a.call(target, { preventScroll: true });
+    else if (fallback2 && fallback2 !== target && usable(fallback2)) (_b = fallback2.focus) == null ? void 0 : _b.call(fallback2, { preventScroll: true });
+    else (_e = (_d = (_c = state.topWindow()) == null ? void 0 : _c.root) == null ? void 0 : _d.focus) == null ? void 0 : _e.call(_d, { preventScroll: true });
   };
   if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(restore);
   else queueMicrotask(restore);
 }
-function useLayer(open, present, kind, close, trigger) {
+function useLayer(open, present, kind, close, trigger, returnFocus) {
   var _a;
   const state = useLayerState(), parent = (0, import_react2.useContext)(LayerScope), id = (0, import_react2.useId)();
   const callback = (0, import_react2.useRef)(close);
   callback.current = close;
+  const returnRef = (0, import_react2.useRef)(returnFocus);
+  returnRef.current = returnFocus;
+  const fallbackFocus = (0, import_react2.useRef)(null);
+  const removeLayer = () => {
+    const removed = state.remove(id, currentFocus());
+    if (removed) fallbackFocus.current = removed;
+    return removed && returnRef.current ? chooseReturnTarget(returnRef.current(), removed) : removed;
+  };
   const openingFocus = (0, import_react2.useRef)(null);
   const wasOpen = (0, import_react2.useRef)(false);
   const pendingFocus = (0, import_react2.useRef)(null);
@@ -447,17 +477,17 @@ function useLayer(open, present, kind, close, trigger) {
       state.open(id, kind, parent, () => callback.current(), focusTrigger(trigger == null ? void 0 : trigger.current) || openingFocus.current);
     } else if (kind === "window" && present) state.markClosing(id);
     else if (kind !== "window" || !present) {
-      const target = state.remove(id, currentFocus());
+      const target = removeLayer();
       if (target) pendingFocus.current = target;
       if (!present && pendingFocus.current) {
-        restoreFocus(pendingFocus.current, state, id);
+        restoreFocus(pendingFocus.current, state, id, fallbackFocus.current);
         pendingFocus.current = null;
       }
     }
   }, [open, present, state, id, kind, parent, trigger]);
   (0, import_react2.useLayoutEffect)(() => () => {
-    const target = state.remove(id, currentFocus());
-    if (target || pendingFocus.current) restoreFocus(target || pendingFocus.current, state, id);
+    const target = removeLayer();
+    if (target || pendingFocus.current) restoreFocus(target || pendingFocus.current, state, id, fallbackFocus.current);
   }, [state, id]);
   const entry = state.entries.get(id);
   return {
@@ -767,6 +797,7 @@ function KjunButton(input) {
     size: declaredSize = "md",
     loading = false,
     block = false,
+    wrap = false,
     disabled = false,
     prefixIcon,
     suffixIcon,
@@ -787,7 +818,7 @@ function KjunButton(input) {
   const formActions = (0, import_react12.useContext)(FormActionsContext);
   const cardActions = (0, import_react12.useContext)(CardActionsContext);
   const stateContent = (0, import_react12.useContext)(DataStateContentContext);
-  const multiline = !!formActions || cardActions || !!stateContent || (navigation == null ? void 0 : navigation.slot) === "actions";
+  const multiline = wrap || !!formActions || cardActions || !!stateContent || (navigation == null ? void 0 : navigation.slot) === "actions";
   const height = Math.max(import_tokens5.tokens.button.heights[size], (_a = navigation == null ? void 0 : navigation.controlSize) != null ? _a : 0);
   const iconSize = (_b = navigation == null ? void 0 : navigation.iconSize) != null ? _b : import_tokens5.tokens.button.iconSizes[size];
   const hasContent2 = children !== void 0 && children !== null && children !== false && children !== "";
@@ -948,6 +979,16 @@ function FieldClear({ size, disabled, label, onPress }) {
   );
 }
 
+// shared/package-runtime/aria-ids.ts
+function mergeIds(...lists) {
+  const ids = [...new Set(lists.flatMap((list) => (list != null ? list : "").split(/\s+/)).filter(Boolean))];
+  return ids.length ? ids.join(" ") : void 0;
+}
+function joinHints(...parts) {
+  const text = parts.filter(Boolean);
+  return text.length ? text.join(". ") : void 0;
+}
+
 // packages/native/src/field-surface.ts
 var import_react15 = require("react");
 var import_react_native7 = require("react-native");
@@ -1116,6 +1157,7 @@ function KjunFormGroup({
   required = false,
   error = "",
   hint = "",
+  labelHidden = false,
   children,
   style
 }) {
@@ -1125,9 +1167,17 @@ function KjunFormGroup({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     FieldContext.Provider,
     {
-      value: { id: fieldId, label, error, hint, required, describedBy: error ? fieldId + "-error" : hint ? fieldId + "-hint" : void 0 },
+      value: {
+        id: fieldId,
+        label,
+        error,
+        hint,
+        required,
+        labelHidden,
+        describedBy: mergeIds(hint ? fieldId + "-hint" : void 0, error ? fieldId + "-error" : void 0)
+      },
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: [{ minWidth: 0, marginBottom: import_tokens9.tokens.extensions.form.itemGap }, style], children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        label && !labelHidden && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           import_react_native8.Text,
           {
             nativeID: fieldId + "-label",
@@ -1144,7 +1194,15 @@ function KjunFormGroup({
           }
         ),
         children,
-        (error || hint) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        !!hint && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_react_native8.Text,
+          {
+            nativeID: fieldId + "-hint",
+            style: { fontFamily, ...typeStyle("caption"), marginTop: import_tokens9.tokens.extensions.form.messageGap, color: c.textSecondary },
+            children: hint
+          }
+        ),
+        !!error && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           import_react_native8.View,
           {
             style: {
@@ -1154,19 +1212,14 @@ function KjunFormGroup({
               marginTop: import_tokens9.tokens.extensions.form.messageGap
             },
             children: [
-              !!error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(KjunIcon, { name: "alert-circle", size: import_tokens9.tokens.extensions.form.messageIconSize, color: c.danger }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(KjunIcon, { name: "alert-circle", size: import_tokens9.tokens.extensions.form.messageIconSize, color: c.danger }),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 import_react_native8.Text,
                 {
-                  nativeID: fieldId + (error ? "-error" : "-hint"),
-                  accessibilityRole: error ? "alert" : void 0,
-                  style: {
-                    fontFamily,
-                    ...typeStyle("caption"),
-                    flexShrink: 1,
-                    color: error ? c.danger : c.textSecondary
-                  },
-                  children: error || hint
+                  nativeID: fieldId + "-error",
+                  accessibilityRole: "alert",
+                  style: { fontFamily, ...typeStyle("caption"), flexShrink: 1, color: c.danger },
+                  children: error
                 }
               )
             ]
@@ -1240,8 +1293,8 @@ var KjunInput = (0, import_react16.forwardRef)(function KjunInput2({
           editable: canEdit,
           readOnly,
           accessibilityLabel: ariaLabel || props.accessibilityLabel || (field == null ? void 0 : field.label),
-          accessibilityLabelledBy: (field == null ? void 0 : field.label) ? field.id + "-label" : void 0,
-          accessibilityHint: errorMessage || (field == null ? void 0 : field.error) || (field == null ? void 0 : field.hint) || props.accessibilityHint,
+          accessibilityLabelledBy: (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0,
+          accessibilityHint: joinHints(field == null ? void 0 : field.hint, errorMessage || (field == null ? void 0 : field.error)) || props.accessibilityHint,
           accessibilityState: { disabled },
           ...import_react_native8.Platform.OS === "web" ? {
             // Native Web TextInput does not translate accessibilityState.
@@ -1827,6 +1880,13 @@ function KjunCard({
   ] });
 }
 
+// shared/package-runtime/alert-live.ts
+function alertRole(tone, live) {
+  if (live === "off") return void 0;
+  if (live) return live === "assertive" ? "alert" : "status";
+  return tone === "danger" ? "alert" : "status";
+}
+
 // packages/native/src/display-primitives.tsx
 var import_tokens12 = require("@kjun-ui/tokens");
 var import_react21 = require("react");
@@ -2019,6 +2079,7 @@ function KjunAlert({
   size = "md",
   title,
   closable = false,
+  live,
   children,
   actions,
   onClose
@@ -2035,7 +2096,7 @@ function KjunAlert({
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     import_react_native15.View,
     {
-      role: tone === "danger" ? "alert" : "status",
+      role: alertRole(tone, live),
       style: {
         flexDirection: "row",
         alignItems: "flex-start",
@@ -3065,7 +3126,7 @@ function KjunRadioGroup({
           accessibilityLabel: ariaLabel,
           style: {
             flexDirection: direction === "vertical" ? "column" : "row",
-            flexWrap: "wrap",
+            flexWrap: direction === "vertical" ? "nowrap" : "wrap",
             gap: direction === "vertical" ? import_tokens18.tokens.dimension.value8 : import_tokens18.tokens.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -3456,13 +3517,13 @@ var KjunTextarea = (0, import_react32.forwardRef)(
         editable: !disabled && !readonly && !props.readOnly && props.editable !== false,
         nativeID: props.nativeID || (field == null ? void 0 : field.id),
         accessibilityLabel: ariaLabel || props.accessibilityLabel || (field == null ? void 0 : field.label),
-        accessibilityHint: (field == null ? void 0 : field.error) || (field == null ? void 0 : field.hint) || props.accessibilityHint,
+        accessibilityHint: joinHints(field == null ? void 0 : field.hint, field == null ? void 0 : field.error) || props.accessibilityHint,
         accessibilityState: { disabled },
         ...import_react_native24.Platform.OS === "web" ? {
           "aria-disabled": disabled,
           "aria-invalid": invalid || void 0,
           "aria-describedby": field == null ? void 0 : field.describedBy,
-          "aria-labelledby": (field == null ? void 0 : field.label) ? field.id + "-label" : void 0,
+          "aria-labelledby": (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0,
           "aria-required": (field == null ? void 0 : field.required) || void 0
         } : {},
         placeholderTextColor: disabled ? colors.textDisabled : colors.inputPlaceholder,
@@ -3701,8 +3762,11 @@ function FloatingPanel({
   flip = true,
   minimumWidth = 0,
   focusOnOpen = false,
-  reveal
+  reveal,
+  header,
+  nonModal = false
 }) {
+  const [headerHeight, setHeaderHeight] = (0, import_react34.useState)(0);
   const panelRef = (0, import_react34.useRef)(null);
   const scroll = (0, import_react34.useRef)(null), viewport = (0, import_react34.useRef)(0);
   const { colors } = useKjunStyles(), window2 = (0, import_react_native28.useWindowDimensions)(), [anchored, setAnchored] = (0, import_react34.useState)(false), [sized, setSized] = (0, import_react34.useState)(false), [anchor, setAnchor] = (0, import_react34.useState)({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = (0, import_react34.useState)({ width: 0, height: 0 });
@@ -3757,7 +3821,7 @@ function FloatingPanel({
     maximumWidth,
     Math.max(minimumPanelWidth, contentSizedMenu ? panel.width : matchTriggerWidth ? anchor.width : import_tokens23.tokens.extensions.popover.width)
   );
-  const available = Math.min(maxHeight != null ? maxHeight : field ? import_tokens23.tokens.extensions.menu.listMaxHeight : import_tokens23.tokens.extensions.floating.maxHeight, window2.height - 2 * import_tokens23.tokens.extensions.floating.viewportInset), height = Math.min(panel.height, available), roomAbove = anchor.y - gap - import_tokens23.tokens.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - import_tokens23.tokens.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
+  const available = Math.min(maxHeight != null ? maxHeight : field ? import_tokens23.tokens.extensions.menu.listMaxHeight : import_tokens23.tokens.extensions.floating.maxHeight, window2.height - 2 * import_tokens23.tokens.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - import_tokens23.tokens.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - import_tokens23.tokens.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
   let left = placement.endsWith("end") ? anchor.x + anchor.width - width : placement === "top" || placement === "bottom" ? anchor.x + (anchor.width - width) / 2 : anchor.x, top = above ? anchor.y - height - gap : anchor.y + anchor.height + gap;
   if (placement === "left" || placement === "right") {
     left = placement === "left" ? anchor.x - width - gap : anchor.x + anchor.width + gap;
@@ -3841,7 +3905,7 @@ function FloatingPanel({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
               import_react_native27.Animated.View,
               {
                 ref: panelRef,
@@ -3852,7 +3916,7 @@ function FloatingPanel({
                 pointerEvents: open && anchored && sized ? "auto" : "none",
                 accessibilityElementsHidden: !open || !anchored || !sized,
                 ...!open || !anchored || !sized ? { inert: true } : {},
-                accessibilityViewIsModal: true,
+                accessibilityViewIsModal: !nonModal,
                 accessibilityLabel: ariaLabel,
                 style: {
                   opacity: anchored && sized ? motion.opacity : 0,
@@ -3874,26 +3938,42 @@ function FloatingPanel({
                   boxShadow: (tooltip ? import_tokens23.tokens.extensions.tooltip.elevation : popover ? import_tokens23.tokens.extensions.popover.elevation : import_tokens23.tokens.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   overflow: "hidden"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  import_react_native28.ScrollView,
-                  {
-                    ref: scroll,
-                    onLayout: (event) => {
-                      viewport.current = event.nativeEvent.layout.height;
-                    },
-                    keyboardShouldPersistTaps: "handled",
-                    style: { maxHeight: available },
-                    contentContainerStyle: { padding: menu || field ? import_tokens23.tokens.extensions.menu.padding : 0 },
-                    onContentSizeChange: (width2, height2) => {
-                      if (contentSizedMenu) return;
-                      setSized(true);
-                      setPanel(
-                        (previous) => previous.width === width2 && previous.height === height2 ? previous : { width: width2, height: height2 }
-                      );
-                    },
-                    children
-                  }
-                )
+                children: [
+                  header != null && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    import_react_native28.View,
+                    {
+                      onLayout: ({ nativeEvent: { layout } }) => setHeaderHeight(layout.height),
+                      style: {
+                        paddingTop: import_tokens23.tokens.extensions.popover.padding,
+                        paddingHorizontal: import_tokens23.tokens.extensions.popover.padding,
+                        paddingBottom: import_tokens23.tokens.extensions.popover.headerPaddingBottom,
+                        borderBottomWidth: import_tokens23.tokens.border.defaultWidth,
+                        borderBottomColor: colors.divider
+                      },
+                      children: header
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    import_react_native28.ScrollView,
+                    {
+                      ref: scroll,
+                      onLayout: (event) => {
+                        viewport.current = event.nativeEvent.layout.height;
+                      },
+                      keyboardShouldPersistTaps: "handled",
+                      style: { maxHeight: available - (header != null ? headerHeight : 0), flexShrink: 1 },
+                      contentContainerStyle: { padding: menu || field ? import_tokens23.tokens.extensions.menu.padding : 0 },
+                      onContentSizeChange: (width2, height2) => {
+                        if (contentSizedMenu) return;
+                        setSized(true);
+                        setPanel(
+                          (previous) => previous.width === width2 && previous.height === height2 ? previous : { width: width2, height: height2 }
+                        );
+                      },
+                      children
+                    }
+                  )
+                ]
               }
             )
           ]
@@ -3919,9 +3999,12 @@ function KjunPopover({
   focusOnOpen = false,
   ariaLabel,
   placement = "bottom",
+  header,
+  modal = true,
   trigger,
   children
 }) {
+  const { colors } = useKjunStyles();
   const [internal, setInternal] = (0, import_react35.useState)(false), open = controlled != null ? controlled : internal, ref = (0, import_react35.useRef)(null);
   const change = (v) => {
     setInternal(v);
@@ -3950,6 +4033,8 @@ function KjunPopover({
         popover: true,
         focusOnOpen,
         ariaLabel,
+        header: header != null ? content(header, { ...typeStyle("cardTitle"), color: colors.text }) : void 0,
+        nonModal: !modal,
         children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native29.View, { style: { padding: noPadding ? 0 : import_tokens24.tokens.extensions.popover.padding, gap: noPadding ? 0 : import_tokens24.tokens.extensions.popover.gap }, children: content(
           typeof children === "function" ? children(() => change(false)) : children,
           import_react_native29.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : void 0
@@ -3964,9 +4049,18 @@ function KjunTooltip({
   delay = 0,
   children,
   onPress,
-  disabled
+  disabled,
+  open: controlled,
+  onOpenChange
 }) {
-  const { colors } = useKjunStyles(), [open, setOpen] = (0, import_react35.useState)(false), ref = (0, import_react35.useRef)(null), timer = (0, import_react35.useRef)(void 0);
+  const { colors } = useKjunStyles(), [internal, setInternal] = (0, import_react35.useState)(false), open = controlled != null ? controlled : internal, latest = (0, import_react35.useRef)({ open, onOpenChange }), setOpen = (value) => {
+    var _a, _b;
+    if (latest.current.open === value) return;
+    latest.current.open = value;
+    setInternal(value);
+    (_b = (_a = latest.current).onOpenChange) == null ? void 0 : _b.call(_a, value);
+  }, ref = (0, import_react35.useRef)(null), timer = (0, import_react35.useRef)(void 0);
+  latest.current = { open, onOpenChange };
   const scopeActive = useActiveLayerScope();
   const hide = () => {
     clearTimeout(timer.current);
@@ -4254,6 +4348,17 @@ function nextOptionValue(value, option, key, multiple) {
   if (!multiple) return id;
   return Array.isArray(value) && value.includes(id) ? value.filter((item) => item !== id) : [...Array.isArray(value) ? value : [], id];
 }
+function optionMatchRank(option, query, labelKey, searchKeys = []) {
+  const needle = query.trim().toLocaleLowerCase();
+  if (!needle) return 0;
+  const label = optionLabel(option, labelKey).toLocaleLowerCase();
+  if (label.startsWith(needle)) return 0;
+  if (label.includes(needle)) return 1;
+  return typeof option === "object" && searchKeys.some((key) => {
+    var _a;
+    return String((_a = option[key]) != null ? _a : "").toLocaleLowerCase().includes(needle);
+  }) ? 2 : -1;
+}
 function selectOptions({
   options,
   value,
@@ -4263,10 +4368,13 @@ function selectOptions({
   pageSize,
   limit,
   loading,
-  multiple
+  multiple,
+  filterFn,
+  searchKeys = []
 }) {
   const selected = (option) => optionSelected(value, option, valueKey);
-  const matching = options.map((option, index) => ({ option, key: optionKey(option, valueKey, index) })).filter(({ option }) => optionLabel(option, labelKey).toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
+  const indexed = options.map((option, index) => ({ option, key: optionKey(option, valueKey, index) }));
+  const matching = filterFn ? indexed.filter(({ option }) => filterFn(option, query)) : indexed.map((item, index) => ({ item, index, rank: optionMatchRank(item.option, query, labelKey, searchKeys) })).filter(({ rank }) => rank >= 0).sort((a, b) => a.rank - b.rank || a.index - b.index).map(({ item }) => item);
   const visible = loading ? [] : pageSize > 0 ? matching.slice(0, limit) : matching;
   const selectedOption = options.find(selected);
   const label = multiple && Array.isArray(value) && value.length > 1 ? `${value.length}\uAC1C \uC120\uD0DD\uB428` : selectedOption !== void 0 ? optionLabel(selectedOption, labelKey) : "";
@@ -5001,7 +5109,9 @@ function KjunSelect({
   onChange,
   onOpenChange,
   onSearch,
-  onClear
+  onClear,
+  filterFn,
+  searchKeys
 }) {
   const { open, query, limit, changeOpen, search, showMore } = useSelectState(controlled, disabled, optionPageSize, onOpenChange);
   const { colors } = useKjunStyles(), field = useKjunField(), ref = (0, import_react44.useRef)(null), spec = import_tokens30.tokens.input[size];
@@ -5026,7 +5136,9 @@ function KjunSelect({
     pageSize: optionPageSize,
     limit,
     loading,
-    multiple
+    multiple,
+    filterFn,
+    searchKeys
   });
   const firstSelected = visible.findIndex(({ option }) => selected(option));
   if (firstSelected < 0) selectedRow.current = null;
@@ -5988,7 +6100,7 @@ function KjunRefreshButton({
   ...props
 }) {
   const reduced = useReducedMotion();
-  const label = ariaLabel || [targetName, "\uC0C8\uB85C\uACE0\uCE68"].filter(Boolean).join(" ");
+  const label = ariaLabel || [targetName, mode === "text" ? text : "\uC0C8\uB85C\uACE0\uCE68"].filter(Boolean).join(" ");
   const hint = tooltip != null ? tooltip : mode === "icon" ? label : "";
   const button = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(KjunTooltip, { content: props.disabled || props.loading ? "" : hint, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     KjunButton,
@@ -7152,9 +7264,18 @@ function tablePresentation(props, mobile) {
     }
   };
 }
+var warnedFormats = /* @__PURE__ */ new Set();
+function columnFormat(column) {
+  if (typeof column.format === "function") return column.format;
+  if (column.format != null && !warnedFormats.has(column.key)) {
+    warnedFormats.add(column.key);
+    console.warn(`KJUN Table: ${column.key} \uC5F4\uC758 format\uC740 \uD568\uC218\uC5EC\uC57C \uD569\uB2C8\uB2E4.`);
+  }
+  return void 0;
+}
 function tableCellValue(props, column, row, index) {
   const value = getValue(row, column.key);
-  const body = props.renderCell ? props.renderCell(value, column, row, index) : column.render ? column.render(value, row, index) : column.format ? column.format(value, row) : props.formatValue ? props.formatValue(value, column, row) : value == null ? "-" : typeof value === "number" && column.type === "number" ? new Intl.NumberFormat().format(value) : String(value);
+  const body = props.renderCell ? props.renderCell(value, column, row, index) : column.render ? column.render(value, row, index) : columnFormat(column) ? columnFormat(column)(value, row) : props.formatValue ? props.formatValue(value, column, row) : value == null ? "-" : typeof value === "number" && column.type === "number" ? new Intl.NumberFormat().format(value) : String(value);
   return { value, body };
 }
 
@@ -7190,7 +7311,7 @@ function TableToolbar({
     selectable && selected.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       import_react_native45.View,
       {
-        accessibilityRole: "toolbar",
+        role: "group",
         accessibilityLabel: "\uC120\uD0DD \uC791\uC5C5",
         style: [toolbarStyle, { backgroundColor: colors.selectedBg }],
         children: [
@@ -9530,7 +9651,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const { colors, fontFamily } = useKjunStyles();
   const field = useKjunField();
   const invalid = error || !!(field == null ? void 0 : field.error);
-  const labelledBy = !ariaLabel && (field == null ? void 0 : field.label) ? field.id + "-label" : void 0;
+  const labelledBy = !ariaLabel && (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0;
   const geometry2 = import_tokens60.tokens.extensions.compound;
   const buttonStyle = { width: import_tokens60.tokens.input[size].height, paddingHorizontal: 0 };
   const outer = import_tokens60.tokens.input[size].radius;
@@ -9638,7 +9759,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
         nativeID: id || (field == null ? void 0 : field.id),
         accessibilityLabel: ariaLabel || (field == null ? void 0 : field.label) || "\uC218\uB7C9",
         accessibilityLabelledBy: labelledBy,
-        accessibilityHint: (field == null ? void 0 : field.error) || (field == null ? void 0 : field.hint),
+        accessibilityHint: joinHints(field == null ? void 0 : field.hint, field == null ? void 0 : field.error),
         role: "spinbutton",
         accessibilityValue: { min, max, now: value },
         accessibilityState: { disabled: blocked },