@kjun-ui/native 0.8.0 → 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,
@@ -6236,8 +6270,12 @@ function chartSkeletonCount(value) {
 function chartMatrixMuted(row, column) {
   return (row + column + 2) % 3 === 0;
 }
+var chartDonutRatio = 0.8;
 function chartDonutHole(height, thickness) {
-  return Math.max(0, height * 0.8 - 2 * thickness);
+  return Math.max(0, height * chartDonutRatio - 2 * thickness);
+}
+function chartSkeletonKind(kind) {
+  return kind === "donut" || kind === "matrix" ? kind : "frame";
 }
 
 // packages/native/src/market-skeleton.tsx
@@ -6399,7 +6437,7 @@ function KjunFormSkeleton({
 }
 var chartPart = (name) => import_react_native42.Platform.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
-  kind = "frame",
+  kind: requestedKind = "frame",
   height = import_tokens39.tokens.extensions.chartSkeleton.height,
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   skeleton = true,
@@ -6407,7 +6445,7 @@ function KjunChartSkeleton({
   rows = 8,
   columns = 14
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react53.useRef)(new import_react_native42.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react53.useState)(0), thickness = import_tokens39.tokens.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react53.useRef)(new import_react_native42.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react53.useState)(0), thickness = import_tokens39.tokens.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
   (0, import_react53.useEffect)(() => {
     if (reduced || !skeleton) return;
     const loop = import_react_native42.Animated.loop(
@@ -6439,7 +6477,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: "80%", aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens39.tokens.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens39.tokens.radius.radius9999 }
           }
         ) : kind === "matrix" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: import_tokens39.tokens.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { style: { flex: 1, flexDirection: "row", gap: import_tokens39.tokens.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           import_react_native42.View,
@@ -6459,6 +6497,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("status"),
             role: status,
+            accessibilityLiveRegion: status ? "polite" : void 0,
             pointerEvents: "none",
             style: { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center" },
             children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -7147,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,
@@ -6263,8 +6297,12 @@ function chartSkeletonCount(value) {
 function chartMatrixMuted(row, column) {
   return (row + column + 2) % 3 === 0;
 }
+var chartDonutRatio = 0.8;
 function chartDonutHole(height, thickness) {
-  return Math.max(0, height * 0.8 - 2 * thickness);
+  return Math.max(0, height * chartDonutRatio - 2 * thickness);
+}
+function chartSkeletonKind(kind) {
+  return kind === "donut" || kind === "matrix" ? kind : "frame";
 }
 
 // packages/native/src/market-skeleton.tsx
@@ -6426,7 +6464,7 @@ function KjunFormSkeleton({
 }
 var chartPart = (name) => Platform24.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
-  kind = "frame",
+  kind: requestedKind = "frame",
   height = tokens37.extensions.chartSkeleton.height,
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   skeleton = true,
@@ -6434,7 +6472,7 @@ function KjunChartSkeleton({
   rows = 8,
   columns = 14
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef28(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState32(0), thickness = tokens37.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef28(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState32(0), thickness = tokens37.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
   useEffect22(() => {
     if (reduced || !skeleton) return;
     const loop = Animated17.loop(
@@ -6466,7 +6504,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: "80%", aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens37.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens37.radius.radius9999 }
           }
         ) : kind === "matrix" ? /* @__PURE__ */ jsx39(View32, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: tokens37.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ jsx39(View32, { style: { flex: 1, flexDirection: "row", gap: tokens37.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ jsx39(
           View32,
@@ -6486,6 +6524,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("status"),
             role: status,
+            accessibilityLiveRegion: status ? "polite" : void 0,
             pointerEvents: "none",
             style: { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center" },
             children: /* @__PURE__ */ jsx39(
@@ -7186,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,
@@ -6491,8 +6525,12 @@ function chartSkeletonCount(value) {
 function chartMatrixMuted(row, column) {
   return (row + column + 2) % 3 === 0;
 }
+var chartDonutRatio = 0.8;
 function chartDonutHole(height, thickness) {
-  return Math.max(0, height * 0.8 - 2 * thickness);
+  return Math.max(0, height * chartDonutRatio - 2 * thickness);
+}
+function chartSkeletonKind(kind) {
+  return kind === "donut" || kind === "matrix" ? kind : "frame";
 }
 
 // packages/native/src/market-skeleton.tsx
@@ -6654,7 +6692,7 @@ function KjunFormSkeleton({
 }
 var chartPart = (name) => import_react_native42.Platform.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
-  kind = "frame",
+  kind: requestedKind = "frame",
   height = import_tokens40.tokens.extensions.chartSkeleton.height,
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   skeleton = true,
@@ -6662,7 +6700,7 @@ function KjunChartSkeleton({
   rows = 8,
   columns = 14
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react57.useRef)(new import_react_native42.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react57.useState)(0), thickness = import_tokens40.tokens.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react57.useRef)(new import_react_native42.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react57.useState)(0), thickness = import_tokens40.tokens.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
   (0, import_react57.useEffect)(() => {
     if (reduced || !skeleton) return;
     const loop = import_react_native42.Animated.loop(
@@ -6694,7 +6732,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: "80%", aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens40.tokens.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens40.tokens.radius.radius9999 }
           }
         ) : kind === "matrix" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: import_tokens40.tokens.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { style: { flex: 1, flexDirection: "row", gap: import_tokens40.tokens.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           import_react_native42.View,
@@ -6714,6 +6752,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("status"),
             role: status,
+            accessibilityLiveRegion: status ? "polite" : void 0,
             pointerEvents: "none",
             style: { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center" },
             children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -7402,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,
@@ -6518,8 +6552,12 @@ function chartSkeletonCount(value) {
 function chartMatrixMuted(row, column) {
   return (row + column + 2) % 3 === 0;
 }
+var chartDonutRatio = 0.8;
 function chartDonutHole(height, thickness) {
-  return Math.max(0, height * 0.8 - 2 * thickness);
+  return Math.max(0, height * chartDonutRatio - 2 * thickness);
+}
+function chartSkeletonKind(kind) {
+  return kind === "donut" || kind === "matrix" ? kind : "frame";
 }
 
 // packages/native/src/market-skeleton.tsx
@@ -6681,7 +6719,7 @@ function KjunFormSkeleton({
 }
 var chartPart = (name) => Platform24.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
-  kind = "frame",
+  kind: requestedKind = "frame",
   height = tokens38.extensions.chartSkeleton.height,
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   skeleton = true,
@@ -6689,7 +6727,7 @@ function KjunChartSkeleton({
   rows = 8,
   columns = 14
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef30(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens38.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef30(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens38.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
   useEffect22(() => {
     if (reduced || !skeleton) return;
     const loop = Animated17.loop(
@@ -6721,7 +6759,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: "80%", aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens38.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens38.radius.radius9999 }
           }
         ) : kind === "matrix" ? /* @__PURE__ */ jsx39(View33, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: tokens38.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ jsx39(View33, { style: { flex: 1, flexDirection: "row", gap: tokens38.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ jsx39(
           View33,
@@ -6741,6 +6779,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("status"),
             role: status,
+            accessibilityLiveRegion: status ? "polite" : void 0,
             pointerEvents: "none",
             style: { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center" },
             children: /* @__PURE__ */ jsx39(
@@ -7441,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/styles.css

@@ -3100,6 +3100,8 @@
   height: 100%;
 }
 .kjun-chart-skeleton-donut {
+  /* The hole is 80% − 2 × thickness only in border-box, whatever the app's reset. */
+  box-sizing: border-box;
   height: 80%;
   aspect-ratio: 1;
   border: var(--_kjun-extension-chart-skeleton-donut-thickness) solid var(--_kjun-color-skeleton);
@@ -3135,7 +3137,7 @@
 
 .kjun-chart-skeleton-status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--_kjun-extension-skeleton-gap); pointer-events:none; }
 .kjun-chart-skeleton-status>span { max-width:90%; padding:var(--_kjun-geometry-dimension-value4) var(--_kjun-geometry-dimension-value12); border-radius:var(--_kjun-geometry-radius-radius6); font-size:var(--_kjun-type-body-size); text-align:center; overflow-wrap:anywhere; background:var(--_kjun-color-surface); color:var(--_kjun-color-text-secondary); line-height: var(--_kjun-type-body-line); font-weight: var(--_kjun-type-body-weight); letter-spacing: var(--_kjun-type-body-tracking); border:var(--_kjun-border-default-width) solid var(--_kjun-color-chart-grid); }
-.kjun-chart-skeleton[data-kjun-chart-kind="donut"] .kjun-chart-skeleton-status>span { border:0; max-width:calc(80cqh - 2 * var(--_kjun-extension-chart-skeleton-donut-thickness)); }
+.kjun-chart-skeleton[data-kjun-chart-kind="donut"] .kjun-chart-skeleton-status>span { box-sizing:border-box; border:0; max-width:calc(80cqh - 2 * var(--_kjun-extension-chart-skeleton-donut-thickness)); }
 
 .kjun-data-status > .kjun-spinner { flex-shrink: 0; }
 .kjun-data-status > span:last-child { min-width: 0; overflow-wrap: anywhere; }

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/packages/native/src/skeletons.d.cts

@@ -28,6 +28,6 @@ export interface KjunChartSkeletonProps {
     rows?: number;
     columns?: number;
 }
-export declare function KjunChartSkeleton({ kind, height, loadingText, skeleton, loadingDelay, rows, columns, }: KjunChartSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunChartSkeleton({ kind: requestedKind, height, loadingText, skeleton, loadingDelay, rows, columns, }: KjunChartSkeletonProps): import("react/jsx-runtime").JSX.Element;
 export { KjunMarketTableSkeleton } from "./market-skeleton.cjs";
 export type { KjunMarketTableSkeletonProps } from "./market-skeleton.cjs";

package/dist/types/packages/native/src/skeletons.d.ts

@@ -28,6 +28,6 @@ export interface KjunChartSkeletonProps {
     rows?: number;
     columns?: number;
 }
-export declare function KjunChartSkeleton({ kind, height, loadingText, skeleton, loadingDelay, rows, columns, }: KjunChartSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunChartSkeleton({ kind: requestedKind, height, loadingText, skeleton, loadingDelay, rows, columns, }: KjunChartSkeletonProps): import("react/jsx-runtime").JSX.Element;
 export { KjunMarketTableSkeleton } from "./market-skeleton.js";
 export type { KjunMarketTableSkeletonProps } from "./market-skeleton.js";

package/dist/types/shared/package-runtime/chart-skeleton.d.cts

@@ -8,5 +8,9 @@ export declare const chartSkeletonMaxCount = 100;
 export declare function chartSkeletonCount(value: number): number;
 /** Every third diagonal cell is drawn at the pending opacity so the matrix reads as a heatmap. */
 export declare function chartMatrixMuted(row: number, column: number): boolean;
-/** Inner diameter of the donut ring, which is 80% of the skeleton height. */
+/** Donut ring diameter as a share of the skeleton height; data-state.css repeats it as 80% and 80cqh. */
+export declare const chartDonutRatio = 0.8;
+/** Inner diameter of the donut ring. */
 export declare function chartDonutHole(height: number, thickness: number): number;
+/** Kinds removed in 0.8.0 (line, bar, candle, grid) or any other value draw, and are named, frame. */
+export declare function chartSkeletonKind(kind: unknown): KjunChartSkeletonKind;

package/dist/types/shared/package-runtime/chart-skeleton.d.ts

@@ -8,5 +8,9 @@ export declare const chartSkeletonMaxCount = 100;
 export declare function chartSkeletonCount(value: number): number;
 /** Every third diagonal cell is drawn at the pending opacity so the matrix reads as a heatmap. */
 export declare function chartMatrixMuted(row: number, column: number): boolean;
-/** Inner diameter of the donut ring, which is 80% of the skeleton height. */
+/** Donut ring diameter as a share of the skeleton height; data-state.css repeats it as 80% and 80cqh. */
+export declare const chartDonutRatio = 0.8;
+/** Inner diameter of the donut ring. */
 export declare function chartDonutHole(height: number, thickness: number): number;
+/** Kinds removed in 0.8.0 (line, bar, candle, grid) or any other value draw, and are named, frame. */
+export declare function chartSkeletonKind(kind: unknown): KjunChartSkeletonKind;

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.0",
+  "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.0",
-    "@kjun-ui/icons": "0.8.0"
+    "@kjun-ui/tokens": "0.9.0",
+    "@kjun-ui/icons": "0.9.0"
   },
   "peerDependencies": {
     "react": "^19.2.3",