@kjun-ui/native 0.8.1 → 0.9.0

package/dist/index.cjs

@@ -234,6 +234,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 +258,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 +278,7 @@ function createLayerState() {
     entries,
     topWindow,
     top,
+    topPopup,
     windowOf,
     isRestoredFocus(target) {
       return !!target && restoredFocus.has(target);
@@ -421,21 +427,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 +463,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 {
@@ -3065,7 +3081,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)(
@@ -4254,6 +4270,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 +4290,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 +5031,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 +5058,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 +6022,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 +7186,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 };
 }
 

package/dist/index.js

@@ -119,6 +119,10 @@ function installLayerKeyboard(document2, state, keyupFallback = false) {
 import { createContext as createContext2, useContext as useContext2, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "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();
@@ -139,6 +143,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;
@@ -158,6 +163,7 @@ function createLayerState() {
     entries,
     topWindow,
     top,
+    topPopup,
     windowOf,
     isRestoredFocus(target) {
       return !!target && restoredFocus.has(target);
@@ -306,21 +312,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 = useContext2(LayerScope), id = useId();
   const callback = useRef(close);
   callback.current = close;
+  const returnRef = useRef(returnFocus);
+  returnRef.current = returnFocus;
+  const fallbackFocus = 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 = useRef(null);
   const wasOpen = useRef(false);
   const pendingFocus = useRef(null);
@@ -332,17 +348,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]);
   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 {
@@ -3031,7 +3047,7 @@ function KjunRadioGroup({
           accessibilityLabel: ariaLabel,
           style: {
             flexDirection: direction === "vertical" ? "column" : "row",
-            flexWrap: "wrap",
+            flexWrap: direction === "vertical" ? "nowrap" : "wrap",
             gap: direction === "vertical" ? tokens16.dimension.value8 : tokens16.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ jsx19(
@@ -4269,6 +4285,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,
@@ -4278,10 +4305,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) : "";
@@ -5016,7 +5046,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 = useRef23(null), spec = tokens28.input[size];
@@ -5041,7 +5073,9 @@ function KjunSelect({
     pageSize: optionPageSize,
     limit,
     loading,
-    multiple
+    multiple,
+    filterFn,
+    searchKeys
   });
   const firstSelected = visible.findIndex(({ option }) => selected(option));
   if (firstSelected < 0) selectedRow.current = null;
@@ -6010,7 +6044,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__ */ jsx36(KjunTooltip, { content: props.disabled || props.loading ? "" : hint, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ jsx36(
     KjunButton,
@@ -7191,9 +7225,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 };
 }
 

package/dist/index.web.cjs

@@ -234,6 +234,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 +258,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 +278,7 @@ function createLayerState() {
     entries,
     topWindow,
     top,
+    topPopup,
     windowOf,
     isRestoredFocus(target) {
       return !!target && restoredFocus.has(target);
@@ -421,21 +427,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 +463,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 {
@@ -3227,7 +3243,7 @@ function KjunRadioGroup({
           accessibilityLabel: ariaLabel,
           style: {
             flexDirection: direction === "vertical" ? "column" : "row",
-            flexWrap: "wrap",
+            flexWrap: direction === "vertical" ? "nowrap" : "wrap",
             gap: direction === "vertical" ? import_tokens19.tokens.dimension.value8 : import_tokens19.tokens.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -4416,6 +4432,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,
@@ -4425,10 +4452,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) : "";
@@ -5163,7 +5193,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_react47.useRef)(null), spec = import_tokens31.tokens.input[size];
@@ -5188,7 +5220,9 @@ function KjunSelect({
     pageSize: optionPageSize,
     limit,
     loading,
-    multiple
+    multiple,
+    filterFn,
+    searchKeys
   });
   const firstSelected = visible.findIndex(({ option }) => selected(option));
   if (firstSelected < 0) selectedRow.current = null;
@@ -6243,7 +6277,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,
@@ -7407,9 +7441,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 };
 }
 

package/dist/index.web.js

@@ -119,6 +119,10 @@ function installLayerKeyboard(document2, state, keyupFallback = false) {
 import { createContext as createContext2, useContext as useContext2, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "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();
@@ -139,6 +143,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;
@@ -158,6 +163,7 @@ function createLayerState() {
     entries,
     topWindow,
     top,
+    topPopup,
     windowOf,
     isRestoredFocus(target) {
       return !!target && restoredFocus.has(target);
@@ -306,21 +312,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 = useContext2(LayerScope), id = useId();
   const callback = useRef(close);
   callback.current = close;
+  const returnRef = useRef(returnFocus);
+  returnRef.current = returnFocus;
+  const fallbackFocus = 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 = useRef(null);
   const wasOpen = useRef(false);
   const pendingFocus = useRef(null);
@@ -332,17 +348,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]);
   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 {
@@ -3193,7 +3209,7 @@ function KjunRadioGroup({
           accessibilityLabel: ariaLabel,
           style: {
             flexDirection: direction === "vertical" ? "column" : "row",
-            flexWrap: "wrap",
+            flexWrap: direction === "vertical" ? "nowrap" : "wrap",
             gap: direction === "vertical" ? tokens17.dimension.value8 : tokens17.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ jsx19(
@@ -4431,6 +4447,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,
@@ -4440,10 +4467,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) : "";
@@ -5178,7 +5208,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 = useRef24(null), spec = tokens29.input[size];
@@ -5203,7 +5235,9 @@ function KjunSelect({
     pageSize: optionPageSize,
     limit,
     loading,
-    multiple
+    multiple,
+    filterFn,
+    searchKeys
   });
   const firstSelected = visible.findIndex(({ option }) => selected(option));
   if (firstSelected < 0) selectedRow.current = null;
@@ -6265,7 +6299,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__ */ jsx36(KjunTooltip, { content: props.disabled || props.loading ? "" : hint, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ jsx36(
     KjunButton,
@@ -7446,9 +7480,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 };
 }
 

package/dist/types/packages/native/src/select-control.d.cts

@@ -25,6 +25,10 @@ export interface KjunSelectProps<T extends SelectOption = SelectOption> {
     onChange?: (v: OptionValue | OptionValue[] | null) => void;
     onOpenChange?: (v: boolean) => void;
     onSearch?: (v: string) => void;
+    /** Replaces the default ranked label/searchKeys match; results keep the original order. */
+    filterFn?: (option: T, query: string) => boolean;
+    /** Extra option fields searched after the label. */
+    searchKeys?: string[];
     onClear?: () => void;
 }
-export declare function KjunSelect<T extends SelectOption = SelectOption>({ value, options, placeholder, ariaLabel, labelKey, valueKey, size, disabled, searchable, open: controlled, loading, searchPlaceholder, optionPageSize, clearable, multiple, error, menuHeader, renderOption, renderSelected, onValueChange, onChange, onOpenChange, onSearch, onClear, }: KjunSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function KjunSelect<T extends SelectOption = SelectOption>({ value, options, placeholder, ariaLabel, labelKey, valueKey, size, disabled, searchable, open: controlled, loading, searchPlaceholder, optionPageSize, clearable, multiple, error, menuHeader, renderOption, renderSelected, onValueChange, onChange, onOpenChange, onSearch, onClear, filterFn, searchKeys, }: KjunSelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/select-control.d.ts

@@ -25,6 +25,10 @@ export interface KjunSelectProps<T extends SelectOption = SelectOption> {
     onChange?: (v: OptionValue | OptionValue[] | null) => void;
     onOpenChange?: (v: boolean) => void;
     onSearch?: (v: string) => void;
+    /** Replaces the default ranked label/searchKeys match; results keep the original order. */
+    filterFn?: (option: T, query: string) => boolean;
+    /** Extra option fields searched after the label. */
+    searchKeys?: string[];
     onClear?: () => void;
 }
-export declare function KjunSelect<T extends SelectOption = SelectOption>({ value, options, placeholder, ariaLabel, labelKey, valueKey, size, disabled, searchable, open: controlled, loading, searchPlaceholder, optionPageSize, clearable, multiple, error, menuHeader, renderOption, renderSelected, onValueChange, onChange, onOpenChange, onSearch, onClear, }: KjunSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function KjunSelect<T extends SelectOption = SelectOption>({ value, options, placeholder, ariaLabel, labelKey, valueKey, size, disabled, searchable, open: controlled, loading, searchPlaceholder, optionPageSize, clearable, multiple, error, menuHeader, renderOption, renderSelected, onValueChange, onChange, onOpenChange, onSearch, onClear, filterFn, searchKeys, }: KjunSelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/package-runtime/layer-state.d.cts

@@ -6,6 +6,8 @@ export interface FocusTarget {
     }) => void;
     isConnected?: boolean;
 }
+/** A caller-chosen return target wins while it is still in the document; false means the caller moves focus itself. */
+export declare function chooseReturnTarget(chosen: FocusTarget | null | false | undefined, fallback: FocusTarget | null | undefined): FocusTarget | null | undefined;
 export interface LayerEntry {
     id: string;
     kind: LayerKind;
@@ -24,6 +26,7 @@ export declare function createLayerState(): {
     entries: Map<string, LayerEntry>;
     topWindow: () => LayerEntry | undefined;
     top: () => LayerEntry | undefined;
+    topPopup: () => LayerEntry | undefined;
     windowOf: (id?: string) => string | undefined;
     isRestoredFocus(target?: FocusTarget | null): boolean;
     clearRestoredFocus(target?: FocusTarget | null): void;

package/dist/types/shared/package-runtime/layer-state.d.ts

@@ -6,6 +6,8 @@ export interface FocusTarget {
     }) => void;
     isConnected?: boolean;
 }
+/** A caller-chosen return target wins while it is still in the document; false means the caller moves focus itself. */
+export declare function chooseReturnTarget(chosen: FocusTarget | null | false | undefined, fallback: FocusTarget | null | undefined): FocusTarget | null | undefined;
 export interface LayerEntry {
     id: string;
     kind: LayerKind;
@@ -24,6 +26,7 @@ export declare function createLayerState(): {
     entries: Map<string, LayerEntry>;
     topWindow: () => LayerEntry | undefined;
     top: () => LayerEntry | undefined;
+    topPopup: () => LayerEntry | undefined;
     windowOf: (id?: string) => string | undefined;
     isRestoredFocus(target?: FocusTarget | null): boolean;
     clearRestoredFocus(target?: FocusTarget | null): void;

package/dist/types/shared/package-runtime/options.d.cts

@@ -8,7 +8,9 @@ export declare const optionDisabled: (option: SelectOption) => boolean;
 export declare function optionKey(option: SelectOption, key: string, index: number): string;
 export declare function optionSelected(value: OptionValue | OptionValue[] | null, option: SelectOption, key: string): boolean;
 export declare function nextOptionValue(value: OptionValue | OptionValue[] | null, option: SelectOption, key: string, multiple: boolean): OptionValue | OptionValue[];
-export declare function selectOptions<T extends SelectOption>({ options, value, labelKey, valueKey, query, pageSize, limit, loading, multiple, }: {
+/** 0 label starts with the query, 1 label contains it, 2 a searchKeys field contains it, -1 no match; an empty query matches as 0. */
+export declare function optionMatchRank(option: SelectOption, query: string, labelKey: string, searchKeys?: readonly string[]): 0 | 1 | -1 | 2;
+export declare function selectOptions<T extends SelectOption>({ options, value, labelKey, valueKey, query, pageSize, limit, loading, multiple, filterFn, searchKeys, }: {
     options: T[];
     value: OptionValue | OptionValue[] | null;
     labelKey: string;
@@ -18,6 +20,8 @@ export declare function selectOptions<T extends SelectOption>({ options, value,
     limit: number;
     loading: boolean;
     multiple: boolean;
+    filterFn?: (option: T, query: string) => boolean;
+    searchKeys?: readonly string[];
 }): {
     selected: (option: T) => boolean;
     matching: {

package/dist/types/shared/package-runtime/options.d.ts

@@ -8,7 +8,9 @@ export declare const optionDisabled: (option: SelectOption) => boolean;
 export declare function optionKey(option: SelectOption, key: string, index: number): string;
 export declare function optionSelected(value: OptionValue | OptionValue[] | null, option: SelectOption, key: string): boolean;
 export declare function nextOptionValue(value: OptionValue | OptionValue[] | null, option: SelectOption, key: string, multiple: boolean): OptionValue | OptionValue[];
-export declare function selectOptions<T extends SelectOption>({ options, value, labelKey, valueKey, query, pageSize, limit, loading, multiple, }: {
+/** 0 label starts with the query, 1 label contains it, 2 a searchKeys field contains it, -1 no match; an empty query matches as 0. */
+export declare function optionMatchRank(option: SelectOption, query: string, labelKey: string, searchKeys?: readonly string[]): 0 | 1 | -1 | 2;
+export declare function selectOptions<T extends SelectOption>({ options, value, labelKey, valueKey, query, pageSize, limit, loading, multiple, filterFn, searchKeys, }: {
     options: T[];
     value: OptionValue | OptionValue[] | null;
     labelKey: string;
@@ -18,6 +20,8 @@ export declare function selectOptions<T extends SelectOption>({ options, value,
     limit: number;
     loading: boolean;
     multiple: boolean;
+    filterFn?: (option: T, query: string) => boolean;
+    searchKeys?: readonly string[];
 }): {
     selected: (option: T) => boolean;
     matching: {

package/dist/types/shared/package-runtime/table-presentation.d.cts

@@ -11,6 +11,10 @@ export declare function tablePresentation<Row extends object>(props: TableProps<
     sections: TableCardSection[];
     columnsForSection(row: Row, section: TableCardSection): TableColumn<Row>[];
 };
+export declare function columnFormat<Format>(column: {
+    key: string;
+    format?: Format;
+}): Format | undefined;
 export declare function tableCellValue<Row extends object>(props: TableProps<Row, unknown>, column: TableColumn<Row>, row: Row, index: number): {
     value: unknown;
     body: ReactNode;

package/dist/types/shared/package-runtime/table-presentation.d.ts

@@ -11,6 +11,10 @@ export declare function tablePresentation<Row extends object>(props: TableProps<
     sections: TableCardSection[];
     columnsForSection(row: Row, section: TableCardSection): TableColumn<Row>[];
 };
+export declare function columnFormat<Format>(column: {
+    key: string;
+    format?: Format;
+}): Format | undefined;
 export declare function tableCellValue<Row extends object>(props: TableProps<Row, unknown>, column: TableColumn<Row>, row: Row, index: number): {
     value: unknown;
     body: ReactNode;

package/dist/types/shared/package-runtime/use-layer.d.cts

@@ -9,6 +9,7 @@ export declare function useLayerState(): {
     entries: Map<string, import("./layer-state.cjs").LayerEntry>;
     topWindow: () => import("./layer-state.cjs").LayerEntry | undefined;
     top: () => import("./layer-state.cjs").LayerEntry | undefined;
+    topPopup: () => import("./layer-state.cjs").LayerEntry | undefined;
     windowOf: (id?: string) => string | undefined;
     isRestoredFocus(target?: FocusTarget | null): boolean;
     clearRestoredFocus(target?: FocusTarget | null): void;
@@ -36,12 +37,13 @@ export declare function useActiveLayerScope(): boolean;
 export declare function focusTrigger(target: FocusTarget | null | undefined): FocusTarget | HTMLElement | null | undefined;
 export declare function useLayer(open: boolean, present: boolean, kind: LayerKind, close: () => void, trigger?: {
     current: FocusTarget | null;
-}): {
+}, returnFocus?: () => FocusTarget | null | false | undefined): {
     id: string;
     state: {
         entries: Map<string, import("./layer-state.cjs").LayerEntry>;
         topWindow: () => import("./layer-state.cjs").LayerEntry | undefined;
         top: () => import("./layer-state.cjs").LayerEntry | undefined;
+        topPopup: () => import("./layer-state.cjs").LayerEntry | undefined;
         windowOf: (id?: string) => string | undefined;
         isRestoredFocus(target?: FocusTarget | null): boolean;
         clearRestoredFocus(target?: FocusTarget | null): void;

package/dist/types/shared/package-runtime/use-layer.d.ts

@@ -9,6 +9,7 @@ export declare function useLayerState(): {
     entries: Map<string, import("./layer-state.js").LayerEntry>;
     topWindow: () => import("./layer-state.js").LayerEntry | undefined;
     top: () => import("./layer-state.js").LayerEntry | undefined;
+    topPopup: () => import("./layer-state.js").LayerEntry | undefined;
     windowOf: (id?: string) => string | undefined;
     isRestoredFocus(target?: FocusTarget | null): boolean;
     clearRestoredFocus(target?: FocusTarget | null): void;
@@ -36,12 +37,13 @@ export declare function useActiveLayerScope(): boolean;
 export declare function focusTrigger(target: FocusTarget | null | undefined): FocusTarget | HTMLElement | null | undefined;
 export declare function useLayer(open: boolean, present: boolean, kind: LayerKind, close: () => void, trigger?: {
     current: FocusTarget | null;
-}): {
+}, returnFocus?: () => FocusTarget | null | false | undefined): {
     id: string;
     state: {
         entries: Map<string, import("./layer-state.js").LayerEntry>;
         topWindow: () => import("./layer-state.js").LayerEntry | undefined;
         top: () => import("./layer-state.js").LayerEntry | undefined;
+        topPopup: () => import("./layer-state.js").LayerEntry | undefined;
         windowOf: (id?: string) => string | undefined;
         isRestoredFocus(target?: FocusTarget | null): boolean;
         clearRestoredFocus(target?: FocusTarget | null): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjun-ui/native",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "license": "MIT",
   "homepage": "https://ui.kjun.dev",
   "repository": {
@@ -47,8 +47,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@kjun-ui/tokens": "0.8.1",
-    "@kjun-ui/icons": "0.8.1"
+    "@kjun-ui/tokens": "0.9.0",
+    "@kjun-ui/icons": "0.9.0"
   },
   "peerDependencies": {
     "react": "^19.2.3",