@kjun-ui/native 0.14.0 → 0.16.0

package/dist/index.js

@@ -1738,6 +1738,18 @@ function KjunFormLayout({
   ) });
 }
 
+// shared/package-runtime/use-after-close.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef6 } from "react";
+function useAfterClose(present, onAfterClose, enabled = true) {
+  const was = useRef6(present), callback = useRef6(onAfterClose);
+  callback.current = onAfterClose;
+  useEffect4(() => {
+    var _a;
+    if (was.current && !present && enabled) (_a = callback.current) == null ? void 0 : _a.call(callback);
+    was.current = present;
+  }, [present, enabled]);
+}
+
 // shared/package-runtime/content-presence.ts
 import { Fragment as Fragment2, isValidElement as isValidElement2 } from "react";
 function hasContent(node) {
@@ -1779,8 +1791,9 @@ import {
 import {
   createContext as createContext14,
   useContext as useContext9,
-  useEffect as useEffect4,
-  useId as useId3
+  useEffect as useEffect5,
+  useId as useId3,
+  useRef as useRef7
 } from "react";
 import { Platform as Platform9, View as View6 } from "react-native";
 
@@ -1797,13 +1810,14 @@ var FeedbackOverlayContext = createContext14(
   null
 );
 function ScopedNativeModal({ children, visible, ...props }) {
-  var _a;
   const layers = useLayerState(), scope = useContext9(LayerScope);
   const entry = scope ? layers.entries.get(scope) : void 0;
-  const generation = (_a = entry == null ? void 0 : entry.order) != null ? _a : 0;
+  const last = useRef7(0);
+  if (entry) last.current = entry.order;
+  const generation = last.current;
   const inactive = !!scope && !layers.isActive(scope);
   const host = useContext9(FeedbackOverlayContext), id = "kjun-" + useId3(), register = host == null ? void 0 : host.register;
-  useEffect4(
+  useEffect5(
     () => visible && register ? register(id) : void 0,
     [visible, register, id, generation]
   );
@@ -1928,6 +1942,7 @@ function KjunModal({
   open,
   onOpenChange,
   onClose,
+  onAfterClose,
   onCancel,
   onConfirm,
   title = "",
@@ -1975,10 +1990,15 @@ function KjunModal({
   const layer = useLayer(open, motion.present, "window", () => {
     if (closeOnEsc) close();
   });
+  const iosDismiss = Platform10.OS === "ios";
+  useAfterClose(motion.present, onAfterClose, !iosDismiss);
   return /* @__PURE__ */ jsx13(LayerScope.Provider, { value: layer.id, children: /* @__PURE__ */ jsx13(
     ScopedNativeModal,
     {
       visible: motion.present,
+      onDismiss: iosDismiss ? () => {
+        if (!open) onAfterClose == null ? void 0 : onAfterClose();
+      } : void 0,
       transparent: true,
       animationType: "none",
       onRequestClose: () => {
@@ -2246,7 +2266,7 @@ function alertRole(tone, live) {
 
 // packages/native/src/display-primitives.tsx
 import { tokens as tokens12 } from "@kjun-ui/tokens";
-import { useContext as useContext10, useEffect as useEffect5, useRef as useRef6, useState as useState9 } from "react";
+import { useContext as useContext10, useEffect as useEffect6, useRef as useRef8, useState as useState9 } from "react";
 import {
   Animated as Animated5,
   Easing as Easing3,
@@ -2410,8 +2430,8 @@ function KjunEmpty({
 }
 function KjunSpinner({ size = "md", text }) {
   const m = useKjunMessages();
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), rotation = useRef6(new Animated5.Value(0)).current;
-  useEffect5(() => {
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), rotation = useRef8(new Animated5.Value(0)).current;
+  useEffect6(() => {
     if (reduced) return;
     const loop = Animated5.loop(
       Animated5.timing(rotation, {
@@ -2704,7 +2724,7 @@ function KjunProgress({
 
 // packages/native/src/skeleton-base.tsx
 import { tokens as tokens13 } from "@kjun-ui/tokens";
-import { useEffect as useEffect6, useRef as useRef7 } from "react";
+import { useEffect as useEffect7, useRef as useRef9 } from "react";
 import {
   Animated as Animated6,
   View as View10
@@ -2719,8 +2739,8 @@ function KjunSkeleton({
   animated = true,
   rounded = true
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef7(new Animated6.Value(1)).current;
-  useEffect6(() => {
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef9(new Animated6.Value(1)).current;
+  useEffect7(() => {
     if (!animated || reduced) return;
     const loop = Animated6.loop(
       Animated6.sequence([
@@ -2898,13 +2918,15 @@ var toneRole = {
   inverse: "onBrand"
 };
 var textAlign = { start: "left", center: "center", end: "right" };
-function KjunText({ variant = "body", tone = "default", align, maxLines, style, children }) {
+function KjunText({ variant = "body", tone = "default", align, maxLines, style, children, ...rest }) {
+  var _a;
   const { colors, fontFamily, numericFontFamily } = useKjunStyles();
   const lines = maxLines && maxLines > 0 ? Math.floor(maxLines) : void 0;
   return /* @__PURE__ */ jsx17(
     KText,
     {
-      accessibilityRole: titleVariants.includes(variant) ? "header" : void 0,
+      ...rest,
+      accessibilityRole: (_a = rest.accessibilityRole) != null ? _a : titleVariants.includes(variant) ? "header" : void 0,
       numberOfLines: lines,
       ellipsizeMode: lines ? "tail" : void 0,
       style: [
@@ -2972,13 +2994,13 @@ function KjunInline({ gap = "sm", align, justify = "start", wrap = true, style,
 }
 
 // shared/package-runtime/feedback-dialog.ts
-import { useRef as useRef8, useState as useState10 } from "react";
+import { useRef as useRef10, useState as useState10 } from "react";
 function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
   const options = request.options;
   const [value, setValue] = useState10(options.initialValue || "");
   const [error, setError] = useState10("");
   const [busy, setBusy] = useState10(false);
-  const working = useRef8(false);
+  const working = useRef10(false);
   const active = () => {
     var _a;
     return ((_a = controller.getSnapshot().current) == null ? void 0 : _a.id) === request.id;
@@ -3021,10 +3043,10 @@ function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
 
 // shared/package-runtime/feedback-motion.ts
 import { tokens as tokens15 } from "@kjun-ui/tokens";
-import { useLayoutEffect as useLayoutEffect4, useRef as useRef9, useState as useState11 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef11, useState as useState11 } from "react";
 function usePresentedToasts(toasts, reduced) {
   const [items2, setItems] = useState11([]);
-  const removals = useRef9(/* @__PURE__ */ new Map());
+  const removals = useRef11(/* @__PURE__ */ new Map());
   useLayoutEffect4(() => {
     const ids = new Set(toasts.map((toast) => toast.id));
     setItems((previous) => {
@@ -3074,7 +3096,7 @@ function useOptionalKjunFeedback() {
 }
 
 // packages/native/src/toast-stack.tsx
-import { useLayoutEffect as useLayoutEffect5, useRef as useRef11 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef13 } from "react";
 import { Animated as Animated8, Platform as Platform13, View as View13 } from "react-native";
 import { tokens as tokens17 } from "@kjun-ui/tokens";
 
@@ -3092,7 +3114,7 @@ function shadowLayers(layers, colors) {
 
 // packages/native/src/toast.tsx
 import { tokens as tokens16 } from "@kjun-ui/tokens";
-import { useEffect as useEffect7, useRef as useRef10 } from "react";
+import { useEffect as useEffect8, useRef as useRef12 } from "react";
 import { Animated as Animated7, View as View12 } from "react-native";
 import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 function ToastView({
@@ -3100,14 +3122,14 @@ function ToastView({
   controller
 }) {
   const m = useKjunMessages();
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), progress = useRef10(new Animated7.Value(1)).current;
-  const reasons = useRef10({
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), progress = useRef12(new Animated7.Value(1)).current;
+  const reasons = useRef12({
     hover: /* @__PURE__ */ Symbol("hover"),
     actionHover: /* @__PURE__ */ Symbol("actionHover"),
     closeHover: /* @__PURE__ */ Symbol("closeHover"),
     focus: /* @__PURE__ */ Symbol("focus")
   }).current;
-  useEffect7(() => () => {
+  useEffect8(() => () => {
     for (const reason of Object.values(reasons)) controller.resumeToast(toast.id, reason);
   }, [controller, toast.id, reasons]);
   const tone = toast.type === "error" ? "danger" : toast.type || "info", icon = {
@@ -3116,7 +3138,7 @@ function ToastView({
     warning: "alert-triangle",
     info: "info-circle"
   }[tone];
-  useEffect7(() => {
+  useEffect8(() => {
     progress.stopAnimation();
     progress.setValue(toast.duration ? toast.remaining / toast.duration : 1);
     if (!toast.paused && !reduced) {
@@ -3236,9 +3258,9 @@ function useToastReflow(_root, _reduced) {
 // packages/native/src/toast-stack.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 function ToastSlot({ item, controller, boxes }) {
-  const born = useRef11(Math.min(tokens17.motion.toastEnter, Date.now() - item.born)).current;
+  const born = useRef13(Math.min(tokens17.motion.toastEnter, Date.now() - item.born)).current;
   const motion = useNativePresence(!item.exiting, tokens17.motion.toastEnter - born, tokens17.motion.toastExit, true, born / tokens17.motion.toastEnter);
-  const offset = useRef11(new Animated8.Value(0)).current;
+  const offset = useRef13(new Animated8.Value(0)).current;
   const box = boxes.get(item.toast.id);
   useLayoutEffect5(() => {
     if (motion.reduced) {
@@ -3285,9 +3307,9 @@ function ToastSlot({ item, controller, boxes }) {
 function ToastStack({ items: items2, controller }) {
   var _a;
   const layers = useLayerState();
-  const root = useRef11(null), reduced = useReducedMotion();
+  const root = useRef13(null), reduced = useReducedMotion();
   useToastReflow(root, reduced);
-  const boxes = useRef11(/* @__PURE__ */ new Map()).current;
+  const boxes = useRef13(/* @__PURE__ */ new Map()).current;
   for (const id of boxes.keys()) if (!items2.some((item) => item.toast.id === id)) boxes.delete(id);
   return /* @__PURE__ */ jsx19(View13, { ref: root, pointerEvents: "box-none", style: {
     position: "absolute",
@@ -3307,9 +3329,9 @@ import {
   feedbackControllerOf
 } from "@kjun-ui/tokens";
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect8,
-  useRef as useRef12,
+  useCallback as useCallback4,
+  useEffect as useEffect9,
+  useRef as useRef14,
   useState as useState12,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
@@ -3366,8 +3388,8 @@ function FeedbackDialog({
 function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
   const [owned] = useState12(() => controllerProp ? void 0 : createFeedbackController());
   const controller = controllerProp ? feedbackControllerOf(controllerProp) : owned;
-  useEffect8(() => controller.attach(), [controller]);
-  const life = useRef12(0);
+  useEffect9(() => controller.attach(), [controller]);
+  const life = useRef14(0);
   const snapshot = useSyncExternalStore2(
     controller.subscribe,
     controller.getSnapshot,
@@ -3376,7 +3398,7 @@ function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
   const reduced = useReducedMotion();
   const toasts = usePresentedToasts(snapshot.toasts, reduced);
   const dialog = usePresentedRequest(snapshot.current, reduced);
-  useEffect8(() => {
+  useEffect9(() => {
     const version = ++life.current;
     return () => {
       queueMicrotask(() => {
@@ -3385,7 +3407,7 @@ function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
     };
   }, [controller]);
   const [layers, setLayers] = useState12([]);
-  const register = useCallback3((id) => {
+  const register = useCallback4((id) => {
     setLayers((previous) => [...previous, id]);
     return () => setLayers((previous) => previous.filter((item) => item !== id));
   }, []);
@@ -3420,8 +3442,8 @@ import {
   createContext as createContext16,
   useContext as useContext12,
   useState as useState13,
-  useEffect as useEffect9,
-  useRef as useRef13
+  useEffect as useEffect10,
+  useRef as useRef15
 } from "react";
 import {
   View as View15
@@ -3623,7 +3645,7 @@ function KjunRadio({
   const group = useContext12(RadioContext), { colors } = useKjunStyles(), selected = (group ? group.value : value) === val;
   const geometry2 = tokens19.extensions.radio;
   const [hovered, setHovered] = useState13(false);
-  useEffect9(() => {
+  useEffect10(() => {
     if (disabled) setHovered(false);
   }, [disabled]);
   return /* @__PURE__ */ jsx21(
@@ -3695,7 +3717,7 @@ function KjunRadioGroup({
   onValueChange,
   onChange
 }) {
-  const root = useRef13(null);
+  const root = useRef15(null);
   useRadioKeyboard(root);
   return /* @__PURE__ */ jsx21(
     RadioContext.Provider,
@@ -3735,7 +3757,7 @@ function KjunRadioGroup({
 
 // packages/native/src/selection-groups.tsx
 import { tokens as tokens21 } from "@kjun-ui/tokens";
-import { useLayoutEffect as useLayoutEffect7, useRef as useRef15 } from "react";
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef17 } from "react";
 import {
   Animated as Animated11,
   ScrollView as ScrollView2,
@@ -3744,7 +3766,7 @@ import {
 } from "react-native";
 
 // packages/native/src/button-group-motion.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useLayoutEffect as useLayoutEffect6, useRef as useRef14, useState as useState14 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useLayoutEffect as useLayoutEffect6, useRef as useRef16, useState as useState14 } from "react";
 import { Animated as Animated10, Easing as Easing4, StyleSheet as StyleSheet5, View as View16 } from "react-native";
 import { tokens as tokens20 } from "@kjun-ui/tokens";
 import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -3754,14 +3776,14 @@ var sameBox = (a, b) => a.x === b.x && a.y === b.y && a.width === b.width && a.h
 function useButtonGroupMotion(selected) {
   const reduced = useReducedMotion();
   const [layouts, setLayouts] = useState14(/* @__PURE__ */ new Map());
-  const x = useRef14(new Animated10.Value(0)).current;
-  const width = useRef14(new Animated10.Value(0)).current;
-  const previous = useRef14(null);
+  const x = useRef16(new Animated10.Value(0)).current;
+  const width = useRef16(new Animated10.Value(0)).current;
+  const previous = useRef16(null);
   const layout = selected && layouts.get(selected.value);
-  const updateLayout = useCallback4((value, box) => {
+  const updateLayout = useCallback5((value, box) => {
     setLayouts((old) => old.has(value) && sameBox(old.get(value), box) ? old : new Map(old).set(value, box));
   }, []);
-  const measure = useCallback4((value, event) => updateLayout(value, event.nativeEvent.layout), [updateLayout]);
+  const measure = useCallback5((value, event) => updateLayout(value, event.nativeEvent.layout), [updateLayout]);
   useLayoutEffect6(() => {
     const old = previous.current;
     if (!selected || !layout) {
@@ -3784,7 +3806,7 @@ function useButtonGroupMotion(selected) {
     }
     previous.current = { value: selected.value, box: layout, reduced };
   }, [selected == null ? void 0 : selected.value, layout, reduced, x, width]);
-  useEffect10(() => () => {
+  useEffect11(() => () => {
     x.stopAnimation();
     width.stopAnimation();
   }, [x, width]);
@@ -3792,9 +3814,9 @@ function useButtonGroupMotion(selected) {
 }
 function ButtonGroupLabel({ label, active, size, reduced }) {
   const { colors, fontFamily } = useKjunStyles();
-  const progress = useRef14(new Animated10.Value(active ? 1 : 0)).current;
+  const progress = useRef16(new Animated10.Value(active ? 1 : 0)).current;
   const interpolate = typeof colors.textSecondary === "string" && typeof colors.text === "string";
-  useEffect10(() => {
+  useEffect11(() => {
     progress.stopAnimation();
     if (reduced || !interpolate) progress.setValue(active ? 1 : 0);
     else Animated10.timing(progress, { toValue: active ? 1 : 0, duration: tokens20.motion.indicator, easing, useNativeDriver: false }).start();
@@ -3841,7 +3863,7 @@ function KjunButtonGroup({
   const motion = useButtonGroupMotion(selected);
   const padding = tokens21.buttonGroup.padding[size];
   const itemRadius = tokens21.buttonGroup.itemRadii[size];
-  const itemRefs = useRef15(/* @__PURE__ */ new Map());
+  const itemRefs = useRef17(/* @__PURE__ */ new Map());
   const { updateLayout } = motion;
   useLayoutEffect7(() => {
     for (const [value2, node] of itemRefs.current) {
@@ -4012,7 +4034,7 @@ function KjunFilterGroup({
                   paddingHorizontal: { xs: tokens21.dimension.value8, sm: tokens21.dimension.value12, md: tokens21.dimension.value12, lg: tokens21.dimension.value14, xl: tokens21.dimension.value16 }[size],
                   // Corners follow the button scale with the height, so every size keeps the same shape.
                   borderRadius: tokens21.button.radii[size],
-                  backgroundColor: active ? colors.text : colors.secondary
+                  backgroundColor: active ? colors.filterSelectedBg : colors.secondary
                 },
                 children: [
                   option.dot && /* @__PURE__ */ jsx23(
@@ -4031,7 +4053,7 @@ function KjunFilterGroup({
                     {
                       name: option.icon,
                       size: tokens21.extensions.selection.iconSize,
-                      color: active ? colors.inverse : colors.textSecondary
+                      color: active ? colors.filterSelectedText : colors.textSecondary
                     }
                   ),
                   /* @__PURE__ */ jsxs12(View17, { children: [
@@ -4054,7 +4076,7 @@ function KjunFilterGroup({
                           right: 0,
                           top: 0,
                           ...selectionTypeStyle(size, active),
-                          color: active ? colors.inverse : colors.textSecondary
+                          color: active ? colors.filterSelectedText : colors.textSecondary
                         },
                         children: option.label
                       }
@@ -4159,7 +4181,7 @@ var KjunTextarea = forwardRef4(
 
 // packages/native/src/drawer.tsx
 import { tokens as tokens23 } from "@kjun-ui/tokens";
-import { useEffect as useEffect11, useState as useState15 } from "react";
+import { useEffect as useEffect12, useState as useState15 } from "react";
 import { Animated as Animated12, Keyboard } from "react-native";
 
 // shared/package-runtime/drawer-geometry.ts
@@ -4194,7 +4216,7 @@ import {
 import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 function useKeyboardOverlap(enabled, windowHeight) {
   const [overlap, setOverlap] = useState15(0);
-  useEffect11(() => {
+  useEffect12(() => {
     var _a, _b;
     setOverlap(0);
     const events = keyboardEvents(Platform15.OS);
@@ -4224,6 +4246,7 @@ function KjunDrawer({
   footer,
   children,
   onClose,
+  onAfterClose,
   ariaLabel,
   safeAreaTop = 0,
   safeAreaBottom = 0,
@@ -4254,10 +4277,15 @@ function KjunDrawer({
   const layer = useLayer(open, motion.present, "window", () => {
     if (closeOnEsc) close();
   });
+  const iosDismiss = Platform15.OS === "ios";
+  useAfterClose(motion.present, onAfterClose, !iosDismiss);
   return /* @__PURE__ */ jsx25(LayerScope.Provider, { value: layer.id, children: /* @__PURE__ */ jsx25(
     ScopedNativeModal,
     {
       visible: motion.present,
+      onDismiss: iosDismiss ? () => {
+        if (!open) onAfterClose == null ? void 0 : onAfterClose();
+      } : void 0,
       transparent: true,
       onRequestClose: () => {
         if (closeOnEsc) close();
@@ -4390,8 +4418,8 @@ import {
   createContext as createContext17,
   isValidElement as isValidElement6,
   useContext as useContext13,
-  useEffect as useEffect14,
-  useRef as useRef18,
+  useEffect as useEffect15,
+  useRef as useRef20,
   useState as useState18
 } from "react";
 import {
@@ -4404,9 +4432,9 @@ import { tokens as tokens24 } from "@kjun-ui/tokens";
 import {
   cloneElement as cloneElement3,
   isValidElement as isValidElement4,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useLayoutEffect as useLayoutEffect8,
-  useRef as useRef16,
+  useRef as useRef18,
   useState as useState16
 } from "react";
 import {
@@ -4463,10 +4491,10 @@ function FloatingPanel({
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.select;
   const [headerHeight, setHeaderHeight] = useState16(0);
-  const panelRef = useRef16(null);
-  const scroll = useRef16(null), viewport = useRef16(0);
+  const panelRef = useRef18(null);
+  const scroll = useRef18(null), viewport = useRef18(0);
   const { colors } = useKjunStyles(), window2 = useWindowDimensions4(), [anchored, setAnchored] = useState16(false), [sized, setSized] = useState16(false), [anchor, setAnchor] = useState16({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = useState16({ width: 0, height: 0 });
-  const measurement = useRef16(0);
+  const measurement = useRef18(0);
   const motion = useNativePresence(open, tooltip ? tokens24.motion.tooltipEnter : tokens24.motion.popupEnter, tooltip ? tokens24.motion.tooltipExit : tokens24.motion.popupExit, anchored && sized);
   const layer = useLayer(open, motion.present, tooltip ? "tooltip" : "popup", () => onOpenChange(false), triggerRef);
   useLayoutEffect8(() => {
@@ -4488,14 +4516,14 @@ function FloatingPanel({
       setAnchored(false);
     }
   }, [motion.present]);
-  useEffect12(() => {
+  useEffect13(() => {
     var _a;
     const row = reveal == null ? void 0 : reveal.current;
     if (!open || !anchored || !sized || !row || !viewport.current) return;
     const offset = row.y + row.height + (menu || field ? tokens24.extensions.menu.padding : 0) - viewport.current;
     if (offset > 0) (_a = scroll.current) == null ? void 0 : _a.scrollTo({ y: offset, animated: false });
   }, [open, anchored, sized, reveal, menu, field]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!open || !anchored || !sized || !focusOnOpen || !panelRef.current) return;
     if (Platform16.OS === "web") {
       const node = panelRef.current;
@@ -4683,8 +4711,8 @@ function FloatingPanel({
 import {
   cloneElement as cloneElement4,
   isValidElement as isValidElement5,
-  useEffect as useEffect13,
-  useRef as useRef17,
+  useEffect as useEffect14,
+  useRef as useRef19,
   useState as useState17
 } from "react";
 import {
@@ -4710,7 +4738,7 @@ function KjunPopover({
   children
 }) {
   const { colors } = useKjunStyles();
-  const [internal, setInternal] = useState17(false), open = controlled != null ? controlled : internal, ref = useRef17(null);
+  const [internal, setInternal] = useState17(false), open = controlled != null ? controlled : internal, ref = useRef19(null);
   const change = (v) => {
     setInternal(v);
     onOpenChange == null ? void 0 : onOpenChange(v);
@@ -4749,7 +4777,10 @@ function KjunPopover({
   ] });
 }
 function KjunTooltip({
-  content: message = "",
+  content: body = "",
+  title,
+  align,
+  width,
   placement = "top",
   delay = 0,
   children,
@@ -4758,13 +4789,14 @@ function KjunTooltip({
   open: controlled,
   onOpenChange
 }) {
-  const { colors } = useKjunStyles(), [internal, setInternal] = useState17(false), open = controlled != null ? controlled : internal, latest = useRef17({ open, onOpenChange }), setOpen = (value) => {
+  const message = [title, body].filter(Boolean).join(", ");
+  const { colors } = useKjunStyles(), [internal, setInternal] = useState17(false), open = controlled != null ? controlled : internal, latest = useRef19({ open, onOpenChange }), setOpen = (value) => {
     var _a, _b;
     if (latest.current.open === value) return;
     latest.current.open = value;
     setInternal(value);
     (_b = (_a = latest.current).onOpenChange) == null ? void 0 : _b.call(_a, value);
-  }, ref = useRef17(null), timer = useRef17(void 0);
+  }, ref = useRef19(null), timer = useRef19(void 0);
   latest.current = { open, onOpenChange };
   const scopeActive = useActiveLayerScope();
   const hide = () => {
@@ -4776,11 +4808,11 @@ function KjunTooltip({
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setOpen(true), delay);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     if (!scopeActive) hide();
   }, [scopeActive]);
-  useEffect13(() => () => clearTimeout(timer.current), []);
-  useEffect13(() => {
+  useEffect14(() => () => clearTimeout(timer.current), []);
+  useEffect14(() => {
     if (Platform17.OS !== "web" || !open) return;
     const escape = (event) => {
       if (event.key === "Escape") hide();
@@ -4843,25 +4875,29 @@ function KjunTooltip({
         triggerRef: ref,
         placement,
         ariaLabel: message,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsxs15(
           View20,
           {
             style: {
               paddingVertical: tokens25.extensions.tooltip.paddingY,
               paddingHorizontal: tokens25.extensions.tooltip.paddingX,
-              maxWidth: tokens25.extensions.tooltip.maxWidth,
+              maxWidth: width ? tokens25.extensions.tooltip.maxWidths[width] : tokens25.extensions.tooltip.maxWidth,
               backgroundColor: colors.chartTooltipBg
             },
-            children: /* @__PURE__ */ jsx27(
-              KText,
-              {
-                style: {
-                  ...typeStyle("caption"),
-                  color: colors.chartTooltipText
-                },
-                children: message
-              }
-            )
+            children: [
+              !!title && /* @__PURE__ */ jsx27(KText, { style: { ...typeStyle("controlSmall"), color: colors.chartTooltipText, ...align ? { textAlign: align === "center" ? "center" : "left" } : {} }, children: title }),
+              !!body && /* @__PURE__ */ jsx27(
+                KText,
+                {
+                  style: {
+                    ...typeStyle("caption"),
+                    color: colors.chartTooltipText,
+                    ...align ? { textAlign: align === "center" ? "center" : "left" } : {}
+                  },
+                  children: body
+                }
+              )
+            ]
           }
         )
       }
@@ -4885,7 +4921,7 @@ function KjunDropdown({
   onClose
 }) {
   const m = useKjunMessages();
-  const [open, setOpen] = useState18(false), currentOpen = useRef18(false), ref = useRef18(null);
+  const [open, setOpen] = useState18(false), currentOpen = useRef20(false), ref = useRef20(null);
   let control = trigger;
   while (isValidElement6(control) && control.type === KjunTooltip)
     control = control.props.children;
@@ -4897,7 +4933,7 @@ function KjunDropdown({
     if (v) onOpen == null ? void 0 : onOpen();
     else onClose == null ? void 0 : onClose();
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (unavailable) change(false);
   }, [unavailable]);
   return /* @__PURE__ */ jsxs16(DropdownContext.Provider, { value: () => change(false), children: [
@@ -5033,7 +5069,7 @@ function KjunMenuButton({
 }
 
 // shared/package-runtime/combobox.ts
-import { useEffect as useEffect15, useState as useState19 } from "react";
+import { useEffect as useEffect16, useState as useState19 } from "react";
 
 // shared/package-runtime/options.ts
 var optionValue = (option, key = "value") => typeof option === "object" ? option[key] : option;
@@ -5113,8 +5149,8 @@ function useComboboxModel({
   const selectedLabel = selected !== void 0 ? optionLabel(selected, labelKey) : "";
   const [query, setQuery] = useState19(selectedLabel);
   const [open, setOpen] = useState19(false);
-  useEffect15(() => setQuery(selectedLabel), [value, selectedLabel]);
-  useEffect15(() => {
+  useEffect16(() => setQuery(selectedLabel), [value, selectedLabel]);
+  useEffect16(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const change = (next) => {
@@ -5148,7 +5184,7 @@ function useComboboxModel({
 
 // packages/native/src/combobox.tsx
 import { tokens as tokens28 } from "@kjun-ui/tokens";
-import { useId as useId5, useRef as useRef19 } from "react";
+import { useId as useId5, useRef as useRef21 } from "react";
 import { Platform as Platform18, View as View23 } from "react-native";
 
 // packages/native/src/select-options.tsx
@@ -5278,8 +5314,8 @@ function SearchField({
 }) {
   const m = useKjunMessages();
   const searchId = "kjun-popup-search-" + useId5().replace(/:/g, "");
-  const clearing = useRef19(false);
-  const ref = useRef19(null), { colors } = useKjunStyles();
+  const clearing = useRef21(false);
+  const ref = useRef21(null), { colors } = useKjunStyles();
   const focusGuard = usePopupFocusGuard(ref);
   const openFromPress = () => {
     if (!disabled) {
@@ -5379,7 +5415,7 @@ function SearchField({
 
 // packages/native/src/date-picker.tsx
 import { tokens as tokens29 } from "@kjun-ui/tokens";
-import { useRef as useRef20, useState as useState20 } from "react";
+import { useRef as useRef22, useState as useState20 } from "react";
 import { Platform as Platform19, View as View24 } from "react-native";
 import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 function displayMonth(value) {
@@ -5402,7 +5438,7 @@ function KjunDatePicker({
   const scope = useKjunMessageScope();
   placeholder != null ? placeholder : placeholder = scope.messages.datePlaceholder;
   const clear = clearable && !!value && !disabled;
-  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = useState20(false), [month, setMonth] = useState20(() => displayMonth(value)), ref = useRef20(null), spec = tokens29.input[size];
+  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = useState20(false), [month, setMonth] = useState20(() => displayMonth(value)), ref = useRef22(null), spec = tokens29.input[size];
   const surface = useFieldSurface(size, { disabled, invalid: error || !!(field == null ? void 0 : field.error), open });
   const year = month.getFullYear(), m = month.getMonth(), first = new Date(year, m, 1).getDay(), count = new Date(year, m + 1, 0).getDate();
   const date = (day) => `${year}-${String(m + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
@@ -5580,7 +5616,7 @@ function KjunDatePicker({
 import { useState as useState22 } from "react";
 
 // shared/package-runtime/search-input.ts
-import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect9, useRef as useRef21, useState as useState21 } from "react";
+import { useEffect as useEffect17, useLayoutEffect as useLayoutEffect9, useRef as useRef23, useState as useState21 } from "react";
 function useSearchInputModel({
   value,
   disabled = false,
@@ -5590,10 +5626,10 @@ function useSearchInputModel({
   onValueChange,
   onSearchError
 }, open) {
-  const [query, setQuery] = useState21(value), [options, setOptions] = useState21([]), [loading, setLoading] = useState21(false), [failed, setFailed] = useState21(false), version = useRef21(0), notify = useRef21(onSearchError);
+  const [query, setQuery] = useState21(value), [options, setOptions] = useState21([]), [loading, setLoading] = useState21(false), [failed, setFailed] = useState21(false), version = useRef23(0), notify = useRef23(onSearchError);
   notify.current = onSearchError;
-  const timer = useRef21(void 0);
-  const notifyValue = useRef21(onValueChange);
+  const timer = useRef23(void 0);
+  const notifyValue = useRef23(onValueChange);
   notifyValue.current = onValueChange;
   useLayoutEffect9(() => {
     clearTimeout(timer.current);
@@ -5603,7 +5639,7 @@ function useSearchInputModel({
     clearTimeout(timer.current);
     return () => clearTimeout(timer.current);
   }, [disabled, debounce, !!loadOptions]);
-  useEffect16(() => {
+  useEffect17(() => {
     const current = ++version.current, abort = new AbortController();
     setFailed(false);
     if (!loadOptions || !open || disabled || query.length < minChars) {
@@ -5756,7 +5792,7 @@ function KjunSearchInput({
 
 // packages/native/src/select-control.tsx
 import { tokens as tokens31 } from "@kjun-ui/tokens";
-import { useContext as useContext14, useEffect as useEffect18, useRef as useRef23 } from "react";
+import { useContext as useContext14, useEffect as useEffect19, useRef as useRef25 } from "react";
 
 // packages/native/src/compound-control.tsx
 import { createContext as createContext18 } from "react";
@@ -5770,7 +5806,7 @@ function CompoundTarget({ children, square = false }) {
 }
 
 // shared/package-runtime/select.ts
-import { useEffect as useEffect17, useRef as useRef22, useState as useState23 } from "react";
+import { useEffect as useEffect18, useRef as useRef24, useState as useState23 } from "react";
 function useSelectState(controlled, disabled, pageSize, onOpenChange) {
   const [internal, setInternal] = useState23(false);
   const [query, setQuery] = useState23("");
@@ -5778,8 +5814,8 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
   const [session, setSession] = useState23(0);
   const isControlled = typeof controlled === "boolean";
   const open = !disabled && (isControlled ? controlled : internal);
-  const previousOpen = useRef22(open);
-  useEffect17(() => {
+  const previousOpen = useRef24(open);
+  useEffect18(() => {
     if (disabled && !isControlled) setInternal(false);
     if (previousOpen.current && !open) {
       setQuery("");
@@ -5788,7 +5824,7 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
     }
     previousOpen.current = open;
   }, [open, disabled, isControlled, pageSize]);
-  useEffect17(() => {
+  useEffect18(() => {
     setLimit(pageSize);
   }, [pageSize]);
   const changeOpen = (next) => {
@@ -5838,14 +5874,14 @@ function KjunSelect({
   placeholder != null ? placeholder : placeholder = m.select;
   searchPlaceholder != null ? searchPlaceholder : searchPlaceholder = m.search;
   const { open, query, limit, changeOpen, search, showMore } = useSelectState(controlled, disabled, optionPageSize, onOpenChange);
-  const { colors } = useKjunStyles(), field = useKjunField(), ref = useRef23(null), spec = tokens31.input[size];
-  const trigger = useRef23(null);
+  const { colors } = useKjunStyles(), field = useKjunField(), ref = useRef25(null), spec = tokens31.input[size];
+  const trigger = useRef25(null);
   const compound = useContext14(CompoundControlContext);
-  useEffect18(() => {
+  useEffect19(() => {
     if (compound == null ? void 0 : compound.focusRef) compound.focusRef.current = trigger.current;
   }, [compound == null ? void 0 : compound.focusRef]);
   const expanded = usePopupExpanded(open, ref);
-  const selectedRow = useRef23(null);
+  const selectedRow = useRef25(null);
   const surface = useFieldSurface(size, { disabled, invalid: error || !!(field == null ? void 0 : field.error), open: expanded });
   const change = (v) => {
     onValueChange == null ? void 0 : onValueChange(v);
@@ -6043,15 +6079,16 @@ import { tokens as tokens34 } from "@kjun-ui/tokens";
 
 // packages/native/src/collapse.tsx
 import { tokens as tokens32 } from "@kjun-ui/tokens";
-import { useLayoutEffect as useLayoutEffect10, useRef as useRef24, useState as useState24 } from "react";
+import { useLayoutEffect as useLayoutEffect10, useRef as useRef26, useState as useState24 } from "react";
 import { Animated as Animated14, View as View27 } from "react-native";
 import { jsx as jsx35 } from "react/jsx-runtime";
-function Collapse({ open, children }) {
+function Collapse({ open, keepMounted = false, children }) {
   const reduced = useReducedMotion();
   const [retained, setRetained] = useState24(open), [height, setHeight] = useState24(null);
-  const value = useRef24(new Animated14.Value(0)).current;
+  const value = useRef26(new Animated14.Value(0)).current;
   const [settled, setSettled] = useState24(open);
-  const version = useRef24(0), first = useRef24(open);
+  const version = useRef26(0), first = useRef26(open), opened = useRef26(open);
+  if (open) opened.current = true;
   useLayoutEffect10(() => {
     const revision = ++version.current;
     if (open) setRetained(true);
@@ -6079,13 +6116,13 @@ function Collapse({ open, children }) {
       value.stopAnimation();
     };
   }, [open, height, reduced, value]);
-  return open || retained ? /* @__PURE__ */ jsx35(
+  return open || retained || keepMounted && opened.current ? /* @__PURE__ */ jsx35(
     Animated14.View,
     {
       pointerEvents: open ? "auto" : "none",
       accessibilityElementsHidden: !open,
       importantForAccessibility: open ? "auto" : "no-hide-descendants",
-      ...!open ? { inert: true } : {},
+      ...!open ? { inert: true, "aria-hidden": true } : {},
       style: { height: settled && open ? void 0 : value, overflow: "hidden" },
       children: /* @__PURE__ */ jsx35(View27, { onLayout: (event) => setHeight(event.nativeEvent.layout.height), children })
     }
@@ -6093,10 +6130,10 @@ function Collapse({ open, children }) {
 }
 
 // shared/package-runtime/navigation.ts
-import { useEffect as useEffect19, useRef as useRef25, useState as useState25 } from "react";
+import { useEffect as useEffect20, useRef as useRef27, useState as useState25 } from "react";
 function useInitialTab(value, candidate, change) {
-  const requested = useRef25(/* @__PURE__ */ new Set());
-  useEffect19(() => {
+  const requested = useRef27(/* @__PURE__ */ new Set());
+  useEffect20(() => {
     if (value !== "") {
       requested.current.clear();
       return;
@@ -6108,7 +6145,7 @@ function useInitialTab(value, candidate, change) {
 }
 function useAccordionState(multiple) {
   const [opened, setOpened] = useState25(/* @__PURE__ */ new Set());
-  useEffect19(() => {
+  useEffect20(() => {
     if (!multiple) setOpened((previous) => previous.size > 1 ? new Set([...previous].slice(-1)) : previous);
   }, [multiple]);
   return {
@@ -6136,15 +6173,16 @@ import {
   Fragment as Fragment11,
   createContext as createContext20,
   useContext as useContext16,
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useId as useId7,
+  useRef as useRef29,
   useState as useState27
 } from "react";
 import { Animated as Animated16, View as View29, useWindowDimensions as useWindowDimensions5, Platform as Platform22 } from "react-native";
 
 // packages/native/src/tabs.tsx
 import { tokens as tokens33 } from "@kjun-ui/tokens";
-import { Children as Children4, createContext as createContext19, isValidElement as isValidElement7, useContext as useContext15, useCallback as useCallback5, useLayoutEffect as useLayoutEffect11, useRef as useRef26, useId as useId6, useState as useState26 } from "react";
+import { Children as Children4, createContext as createContext19, isValidElement as isValidElement7, useContext as useContext15, useCallback as useCallback6, useLayoutEffect as useLayoutEffect11, useRef as useRef28, useId as useId6, useState as useState26 } from "react";
 import { Animated as Animated15, Platform as Platform21, ScrollView as ScrollView5, View as View28 } from "react-native";
 
 // packages/native/src/tabs-accessibility.ts
@@ -6175,10 +6213,10 @@ function KjunTabs({
     isValidElement7
   );
   const tabs = items2.length ? items2 : panes.filter((child) => child.type === KjunTabPane).map((child) => child.props);
-  const id = "kjun-" + useId6(), root = useRef26(null);
-  const menuState = useRef26({ tabs, onTabMenu });
+  const id = "kjun-" + useId6(), root = useRef28(null);
+  const menuState = useRef28({ tabs, onTabMenu });
   menuState.current = { tabs, onTabMenu };
-  const pressedMenu = useRef26(null);
+  const pressedMenu = useRef28(null);
   useLayoutEffect11(() => {
     if (!onTabMenu || !tabs.some((tab) => tab.name === pressedMenu.current && !tab.disabled)) pressedMenu.current = null;
   }, [tabs, onTabMenu]);
@@ -6194,10 +6232,10 @@ function KjunTabs({
   const roomX = underline ? ringRoom : 0, roomY = Math.max(underline ? ringRoom : 0, slop);
   const selectedTab = tabs.find((tab) => tab.name === value);
   const selection = useButtonGroupMotion(selectedTab ? { ...selectedTab, value: selectedTab.name } : void 0);
-  const tabRefs = useRef26(/* @__PURE__ */ new Map());
+  const tabRefs = useRef28(/* @__PURE__ */ new Map());
   const { updateLayout } = selection;
   const firstName = (_a = tabs[0]) == null ? void 0 : _a.name;
-  const measureIndicator = useCallback5((name, box) => {
+  const measureIndicator = useCallback6((name, box) => {
     const left = underline && name === firstName ? 0 : paddingX;
     updateLayout(name, underline ? {
       x: box.x + left,
@@ -6366,7 +6404,7 @@ function KjunTabs({
 }
 function KjunTabPane({ name, children }) {
   const { value, id, names } = useContext15(TabContext);
-  const root = useRef26(null);
+  const root = useRef28(null);
   usePanelFocus(root);
   const hidden = value !== name;
   return /* @__PURE__ */ jsx36(
@@ -6419,14 +6457,32 @@ function KjunAccordionItem({
   defaultOpen = false,
   disabled = false,
   header,
+  open: openProp,
+  onOpenChange,
+  keepMounted = false,
   children
 }) {
-  const { colors } = useKjunStyles(), group = useContext16(AccordionContext), id = "kjun-" + useId7(), [own, setOwn] = useState27(defaultOpen), open = group ? group.opened.has(id) : own;
+  const controlled = openProp !== void 0, context = useContext16(AccordionContext), { colors } = useKjunStyles(), group = controlled ? null : context, id = "kjun-" + useId7(), [own, setOwn] = useState27(defaultOpen), open = controlled ? openProp : group ? group.opened.has(id) : own;
+  const reported = useRef29(open), notify = useRef29(onOpenChange), registering = useRef29(!!group && defaultOpen);
+  notify.current = onOpenChange;
+  useEffect21(() => {
+    var _a;
+    if (registering.current) {
+      if (open) {
+        registering.current = false;
+        reported.current = open;
+      }
+      return;
+    }
+    if (controlled || reported.current === open) return;
+    reported.current = open;
+    (_a = notify.current) == null ? void 0 : _a.call(notify, open);
+  }, [open, controlled]);
   const rotation = useMotionValue(open ? 1 : 0, tokens34.motion.collapse, void 0, void 0, true);
   const geometry2 = tokens34.extensions.accordion;
   const [hovered, setHovered] = useState27(false);
   const wrapping = Platform22.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
-  useEffect20(() => {
+  useEffect21(() => {
     return group == null ? void 0 : group.register(id, defaultOpen);
   }, []);
   return /* @__PURE__ */ jsxs22(View29, { children: [
@@ -6440,7 +6496,10 @@ function KjunAccordionItem({
         accessibilityLabel: title,
         accessibilityState: { expanded: open, disabled },
         disabled,
-        onPress: () => group ? group.toggle(id) : setOwn(!own),
+        onPress: () => {
+          registering.current = false;
+          controlled ? onOpenChange == null ? void 0 : onOpenChange(!open) : group ? group.toggle(id) : setOwn(!own);
+        },
         onHoverIn: () => setHovered(true),
         onHoverOut: () => setHovered(false),
         style: ({ pressed }) => ({
@@ -6460,7 +6519,7 @@ function KjunAccordionItem({
         ]
       }
     ),
-    /* @__PURE__ */ jsx37(Collapse, { open, children: /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx37(Collapse, { open, keepMounted, children: /* @__PURE__ */ jsx37(
       View29,
       {
         nativeID: id + "-panel",
@@ -6657,7 +6716,7 @@ function KjunPagination({
 
 // packages/native/src/actions.tsx
 import { tokens as tokens35 } from "@kjun-ui/tokens";
-import { useContext as useContext17, useEffect as useEffect21, useRef as useRef27, useState as useState28 } from "react";
+import { useContext as useContext17, useEffect as useEffect22, useRef as useRef30, useState as useState28 } from "react";
 import { Platform as Platform23, ScrollView as ScrollView7, View as View30 } from "react-native";
 import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 function KjunIconToggle({
@@ -6742,8 +6801,8 @@ function KjunCopyButton({
 }) {
   const m = useKjunMessages();
   successText != null ? successText : successText = m.copied;
-  const feedback = useOptionalKjunFeedback(), { colors } = useKjunStyles(), [copied, setCopied] = useState28(false), [failed, setFailed] = useState28(false), busy = useRef27(false), timer = useRef27(void 0), mounted = useRef27(true);
-  useEffect21(() => {
+  const feedback = useOptionalKjunFeedback(), { colors } = useKjunStyles(), [copied, setCopied] = useState28(false), [failed, setFailed] = useState28(false), busy = useRef30(false), timer = useRef30(void 0), mounted = useRef30(true);
+  useEffect22(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -6907,10 +6966,10 @@ import { Component, useState as useState30 } from "react";
 import { Platform as Platform24, View as View31 } from "react-native";
 
 // shared/package-runtime/use-loading-reveal.ts
-import { useEffect as useEffect22, useState as useState29 } from "react";
+import { useEffect as useEffect23, useState as useState29 } from "react";
 function useLoadingReveal(active, delay = 0) {
   const [revealed, setRevealed] = useState29(false);
-  useEffect22(() => {
+  useEffect23(() => {
     setRevealed(false);
     if (!active || delay <= 0) return;
     const timer = setTimeout(() => setRevealed(true), delay);
@@ -7080,7 +7139,7 @@ KjunErrorBoundary.contextType = KjunMessageContext;
 
 // packages/native/src/skeletons.tsx
 import { tokens as tokens40 } from "@kjun-ui/tokens";
-import { useEffect as useEffect23, useRef as useRef28, useState as useState32 } from "react";
+import { useEffect as useEffect24, useRef as useRef31, useState as useState32 } from "react";
 import { Animated as Animated17, Platform as Platform25, View as View33, useWindowDimensions as useWindowDimensions6 } from "react-native";
 import Svg5, { Path as Path4 } from "react-native-svg";
 
@@ -7271,8 +7330,8 @@ function KjunChartSkeleton({
 }) {
   const m = useKjunMessages();
   loadingText != null ? loadingText : loadingText = m.chartLoading;
-  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef28(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState32(0), thickness = tokens40.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" };
-  useEffect23(() => {
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef31(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState32(0), thickness = tokens40.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" };
+  useEffect24(() => {
     if (reduced || !skeleton) return;
     const loop = Animated17.loop(
       Animated17.sequence([
@@ -7370,7 +7429,7 @@ import Svg6, {
 import { tokens as tokens42 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/use-number-motion.ts
-import { useLayoutEffect as useLayoutEffect12, useRef as useRef29, useState as useState33 } from "react";
+import { useLayoutEffect as useLayoutEffect12, useRef as useRef32, useState as useState33 } from "react";
 
 // shared/package-runtime/number-motion.ts
 import { tokens as tokens41 } from "@kjun-ui/tokens";
@@ -7417,7 +7476,7 @@ function createNumberMotion(apply) {
 // shared/package-runtime/use-number-motion.ts
 function useNumberMotion(value, animated, fromPrevious, reduced) {
   const [display, setDisplay] = useState33(typeof value === "string" || fromPrevious || !animated || reduced ? value : 0);
-  const motion = useRef29(null);
+  const motion = useRef32(null);
   if (!motion.current) motion.current = createNumberMotion(setDisplay);
   useLayoutEffect12(() => {
     if (!motion.current) motion.current = createNumberMotion(setDisplay);
@@ -7882,7 +7941,7 @@ function KjunSparkline({
 
 // shared/package-runtime/table.ts
 import { nextTableSort } from "@kjun-ui/tokens";
-import { useEffect as useEffect25, useRef as useRef31, useState as useState35 } from "react";
+import { useEffect as useEffect26, useRef as useRef34, useState as useState35 } from "react";
 
 // shared/package-runtime/table-model.ts
 function getValue(row, key) {
@@ -7929,8 +7988,8 @@ function useTableModel(props) {
   const [internalSort, setSort] = useState35({
     key: "",
     order: "asc"
-  }), [internalExpanded, setExpanded] = useState35([]), [search, setSearch] = useState35(""), timer = useRef31(void 0);
-  useEffect25(() => () => clearTimeout(timer.current), []);
+  }), [internalExpanded, setExpanded] = useState35([]), [search, setSearch] = useState35(""), timer = useRef34(void 0);
+  useEffect26(() => () => clearTimeout(timer.current), []);
   const sort = props.sort === void 0 ? internalSort : (_a = props.sort) != null ? _a : { key: "", order: "asc" };
   const rows = sortTableRows(data, sort, { sortable, sortMode });
   const key = (row, index = 0) => tableRowKey(row, rowKey, index);
@@ -9087,7 +9146,7 @@ import { tokens as tokens51 } from "@kjun-ui/tokens";
 import { ScrollView as ScrollView10, View as View44 } from "react-native";
 
 // shared/package-runtime/market-cards.ts
-import { useEffect as useEffect26, useRef as useRef32, useState as useState38 } from "react";
+import { useEffect as useEffect27, useRef as useRef35, useState as useState38 } from "react";
 function useMarketCardsModel(props, persistence) {
   const {
     columns,
@@ -9104,7 +9163,7 @@ function useMarketCardsModel(props, persistence) {
     isDefaultSort: c.defaultSort
   }));
   const [key, setKey] = useState38(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
-  const mounted = useRef32("");
+  const mounted = useRef35("");
   const save = (key2) => {
     var _a;
     try {
@@ -9112,7 +9171,7 @@ function useMarketCardsModel(props, persistence) {
     } catch (e) {
     }
   };
-  useEffect26(() => {
+  useEffect27(() => {
     var _a, _b;
     if (mounted.current === restoreSignature) return;
     mounted.current = restoreSignature;
@@ -9897,26 +9956,31 @@ import { Children as Children5, createContext as createContext22, useContext as
 import { View as View48, Platform as Platform26 } from "react-native";
 import { Fragment as Fragment19, jsx as jsx56, jsxs as jsxs41 } from "react/jsx-runtime";
 var ListRowContext = createContext22({ divider: true, compact: false });
-function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, destructive = false, chevron = false, onPress }) {
+function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, destructive = false, chevron = false, onPress, ariaLabel, children }) {
   const { colors } = useKjunStyles(), { divider, compact } = useContext19(ListRowContext);
   const parts = /* @__PURE__ */ jsxs41(Fragment19, { children: [
     hasContent(leading) && /* @__PURE__ */ jsx56(View48, { children: content(leading) }),
     /* @__PURE__ */ jsxs41(View48, { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ jsx56(KText, { style: { ...typeStyle("label"), ...destructive ? { color: colors.danger } : {} }, children: title }),
-      !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens55.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens55.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description }),
+      hasContent(children) && /* @__PURE__ */ jsx56(View48, { style: { marginTop: tokens55.extensions.list.descriptionGap }, children: content(children) })
     ] }),
     hasContent(trailing) && /* @__PURE__ */ jsx56(View48, { style: { maxWidth: "35%" }, children: content(trailing) }),
     chevron && /* @__PURE__ */ jsx56(View48, { accessible: false, importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx56(KjunIcon, { name: "chevron-right", size: tokens55.iconSizes.default, color: colors.textTertiary }) })
   ] });
   const style = { flex: 1, minWidth: 0, minHeight: compact ? tokens55.extensions.list.compactMinimumHeight : tokens55.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, padding: tokens55.extensions.list.padding, ...compact ? { paddingVertical: tokens55.extensions.list.compactPaddingY } : {} };
   return /* @__PURE__ */ jsxs41(View48, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, borderBottomWidth: divider ? tokens55.border.defaultWidth : 0, borderBottomColor: colors.divider }, children: [
-    onPress || href ? /* @__PURE__ */ jsx56(AccessiblePressable, { ...Platform26.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? tokens55.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx56(View48, { style, children: parts }),
+    onPress || href ? /* @__PURE__ */ jsx56(AccessiblePressable, { ...Platform26.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: ariaLabel != null ? ariaLabel : title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? tokens55.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx56(View48, { style, children: parts }),
     hasContent(actions) && /* @__PURE__ */ jsx56(View48, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform26.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens55.extensions.list.actionsGap, paddingRight: tokens55.extensions.list.actionsPadding, opacity: disabled ? tokens55.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
-function KjunListSection({ title, description, actions, children, ariaLabel, surface = true, divider = true, density = "default" }) {
+function KjunListSection({ title, description, actions, children, ariaLabel, surface = true, divider = true, density = "default", radius = "none" }) {
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsxs41(View48, { style: { minWidth: 0, backgroundColor: surface ? colors.surface : "transparent" }, children: [
+  return /* @__PURE__ */ jsxs41(View48, { style: {
+    minWidth: 0,
+    backgroundColor: surface ? colors.surface : "transparent",
+    ...radius === "none" ? {} : { borderRadius: tokens55.card.radii[radius], overflow: "hidden" }
+  }, children: [
     !!(title || description || actions) && /* @__PURE__ */ jsxs41(View48, { style: { flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, padding: tokens55.extensions.list.padding }, children: [
       /* @__PURE__ */ jsxs41(View48, { style: { flex: 1 }, children: [
         !!title && /* @__PURE__ */ jsx56(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
@@ -10053,14 +10117,14 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
 }
 
 // packages/native/src/media.tsx
-import { createContext as createContext23, useContext as useContext20, useRef as useRef33, useState as useState41 } from "react";
+import { createContext as createContext23, useContext as useContext20, useRef as useRef36, useState as useState41 } from "react";
 import { Image, View as View50 } from "react-native";
 import { tokens as tokens57 } from "@kjun-ui/tokens";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var ImageBackgroundContext = createContext23(void 0);
 function KjunImage({ src, source, alt, decorative = false, aspectRatio = 1, fit = "cover", fallback: fallback2, onLoad, onError }) {
   const { colors } = useKjunStyles(), background = useContext20(ImageBackgroundContext);
-  const request = JSON.stringify(source != null ? source : src), current = useRef33({ request, version: 0 });
+  const request = JSON.stringify(source != null ? source : src), current = useRef36({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
   const version = current.current.version;
   const [failed, setFailed] = useState41(null);
@@ -10128,7 +10192,7 @@ function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offset
 }
 
 // packages/native/src/range-input.tsx
-import { useEffect as useEffect27, useMemo as useMemo3, useRef as useRef34, useState as useState42 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo3, useRef as useRef37, useState as useState42 } from "react";
 import { PanResponder, Platform as Platform28, Pressable as Pressable3, View as View52 } from "react-native";
 import { tokens as tokens60, createSliderDomain, sliderKey } from "@kjun-ui/tokens";
 import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
@@ -10156,15 +10220,15 @@ function RangeInput({
   const [hovered, setHovered] = useState42(null);
   const [dragging, setDragging] = useState42(null);
   const [focused, setFocused] = useState42(null);
-  const track = useRef34(null), measured = useRef34({ x: 0, width: 1 }), selected = useRef34(0), dirty = useRef34(false);
-  const latest = useRef34(values);
+  const track = useRef37(null), measured = useRef37({ x: 0, width: 1 }), selected = useRef37(0), dirty = useRef37(false);
+  const latest = useRef37(values);
   latest.current = values;
-  const callbacks = useRef34({ onValueChange, onChangeCommit });
+  const callbacks = useRef37({ onValueChange, onChangeCommit });
   callbacks.current = { onValueChange, onChangeCommit };
-  useEffect27(() => {
+  useEffect28(() => {
     if (!valid) console.warn("KJUN Slider: \uBC94\uC704\xB7step\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (blocked) {
       setDragging(null);
       setHovered(null);
@@ -10429,7 +10493,7 @@ function KjunRangeSlider(props) {
 }
 
 // packages/native/src/quantity-stepper.tsx
-import { useEffect as useEffect28, useRef as useRef35, useState as useState43 } from "react";
+import { useEffect as useEffect29, useRef as useRef38, useState as useState43 } from "react";
 import { Platform as Platform29, View as View53 } from "react-native";
 import { createNumberDomain, quantityKeyAction, tokens as tokens61 } from "@kjun-ui/tokens";
 
@@ -10453,15 +10517,15 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const domain = createNumberDomain({ min, max, step, precision }), valid = domain.valid && domain.accepts(value), blocked = disabled || !valid;
   const surface = useFieldSurface(size, { disabled: blocked, invalid });
   const [draft, setDraft] = useState43(String(value));
-  const inputRef = useRef35(null);
-  const composing = useRef35(false), dirty = useRef35(false), accepted = useRef35(value);
-  const cancelledEscape = useRef35(false);
-  useEffect28(() => {
+  const inputRef = useRef38(null);
+  const composing = useRef38(false), dirty = useRef38(false), accepted = useRef38(value);
+  const cancelledEscape = useRef38(false);
+  useEffect29(() => {
     setDraft(String(value));
     accepted.current = value;
     dirty.current = false;
   }, [value, precision, min, max, step]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!valid) console.warn("KJUN QuantityStepper: \uBC94\uC704\xB7step\xB7\uC815\uBC00\uB3C4\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
   const emit = (next) => {
@@ -10498,7 +10562,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     } else if (action === "commit") commit();
     else move(action === "increment" ? 1 : -1);
   };
-  const handlers = useRef35({ key, edit: (text) => {
+  const handlers = useRef38({ key, edit: (text) => {
     dirty.current = true;
     setDraft(text);
   } });
@@ -10506,7 +10570,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     dirty.current = true;
     setDraft(text);
   } };
-  useEffect28(() => {
+  useEffect29(() => {
     if (Platform29.OS !== "web") return;
     const input = inputRef.current;
     const keydown = (event) => handlers.current.key(event);
@@ -10578,7 +10642,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
 }
 
 // packages/native/src/time-picker.tsx
-import { Fragment as Fragment21, useEffect as useEffect29, useId as useId11, useMemo as useMemo4, useRef as useRef36, useState as useState44 } from "react";
+import { Fragment as Fragment21, useEffect as useEffect30, useId as useId11, useMemo as useMemo4, useRef as useRef39, useState as useState44 } from "react";
 import { View as View54 } from "react-native";
 import { createTimeDomain, tokens as tokens62 } from "@kjun-ui/tokens";
 import { jsx as jsx63, jsxs as jsxs46 } from "react/jsx-runtime";
@@ -10587,12 +10651,12 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
   ariaLabel != null ? ariaLabel : ariaLabel = m.time;
   const geometry2 = tokens62.extensions.timePicker, spec = tokens62.input[size];
   const { colors } = useKjunStyles();
-  const first = useRef36(null);
+  const first = useRef39(null);
   const [focused, setFocused] = useState44(false), [opened, setOpened] = useState44(null);
   const field = useKjunField(), uid = useId11();
   const fieldId = (field == null ? void 0 : field.id) || `kjun-time-${uid}`;
   const domain = useMemo4(() => createTimeDomain({ precision, min, max, minuteStep, secondStep }), [precision, min, max, minuteStep, secondStep]), valid = domain.valid && domain.accepts(value);
-  useEffect29(() => {
+  useEffect30(() => {
     if (!valid) console.warn("KJUN TimePicker: \uC2DC\uAC01 \uBC94\uC704\xB7\uAC04\uACA9\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
   const change = (next) => {