@kjun-ui/native 0.14.0 → 0.16.0

package/dist/index.web.js

@@ -1818,6 +1818,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, enabled2 = true) {
+  const was = useRef6(present), callback = useRef6(onAfterClose);
+  callback.current = onAfterClose;
+  useEffect4(() => {
+    var _a;
+    if (was.current && !present && enabled2) (_a = callback.current) == null ? void 0 : _a.call(callback);
+    was.current = present;
+  }, [present, enabled2]);
+}
+
 // shared/package-runtime/content-presence.ts
 import { Fragment as Fragment2, isValidElement as isValidElement2 } from "react";
 function hasContent(node) {
@@ -1859,8 +1871,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 View7 } from "react-native";
 
@@ -1892,13 +1905,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]
   );
@@ -2023,6 +2037,7 @@ function KjunModal({
   open,
   onOpenChange,
   onClose,
+  onAfterClose,
   onCancel,
   onConfirm,
   title = "",
@@ -2070,10 +2085,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: () => {
@@ -2341,7 +2361,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 useState10 } from "react";
+import { useContext as useContext10, useEffect as useEffect6, useRef as useRef8, useState as useState10 } from "react";
 import {
   Animated as Animated5,
   Easing as Easing3,
@@ -2505,8 +2525,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, {
@@ -2799,7 +2819,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 View11
@@ -2814,8 +2834,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([
@@ -2993,13 +3013,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: [
@@ -3067,13 +3089,13 @@ function KjunInline({ gap = "sm", align, justify = "start", wrap = true, style,
 }
 
 // shared/package-runtime/feedback-dialog.ts
-import { useRef as useRef8, useState as useState11 } from "react";
+import { useRef as useRef10, useState as useState11 } from "react";
 function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
   const options = request.options;
   const [value, setValue] = useState11(options.initialValue || "");
   const [error, setError] = useState11("");
   const [busy, setBusy] = useState11(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;
@@ -3116,10 +3138,10 @@ function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
 
 // shared/package-runtime/feedback-motion.ts
 import { tokens as tokens15 } from "@kjun-ui/tokens";
-import { useLayoutEffect as useLayoutEffect6, useRef as useRef9, useState as useState12 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef11, useState as useState12 } from "react";
 function usePresentedToasts(toasts, reduced) {
   const [items2, setItems] = useState12([]);
-  const removals = useRef9(/* @__PURE__ */ new Map());
+  const removals = useRef11(/* @__PURE__ */ new Map());
   useLayoutEffect6(() => {
     const ids = new Set(toasts.map((toast) => toast.id));
     setItems((previous) => {
@@ -3169,7 +3191,7 @@ function useOptionalKjunFeedback() {
 }
 
 // packages/native/src/toast-stack.tsx
-import { useLayoutEffect as useLayoutEffect8, useRef as useRef12 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef14 } from "react";
 import { Animated as Animated8, Platform as Platform13, View as View14 } from "react-native";
 import { tokens as tokens18 } from "@kjun-ui/tokens";
 
@@ -3187,7 +3209,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 View13 } from "react-native";
 import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function ToastView({
@@ -3195,14 +3217,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 = {
@@ -3211,7 +3233,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) {
@@ -3325,7 +3347,7 @@ function ToastView({
 }
 
 // packages/native/src/toast-reflow.web.ts
-import { useLayoutEffect as useLayoutEffect7, useRef as useRef11 } from "react";
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef13 } from "react";
 
 // shared/package-runtime/toast-layout.ts
 import { tokens as tokens17 } from "@kjun-ui/tokens";
@@ -3388,7 +3410,7 @@ function createToastLayout() {
 
 // packages/native/src/toast-reflow.web.ts
 function useToastReflow(root, reduced) {
-  const layout = useRef11(createToastLayout()).current;
+  const layout = useRef13(createToastLayout()).current;
   useLayoutEffect7(() => {
     if (root.current) layout.update(root.current, reduced);
   });
@@ -3398,9 +3420,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 = useRef12(Math.min(tokens18.motion.toastEnter, Date.now() - item.born)).current;
+  const born = useRef14(Math.min(tokens18.motion.toastEnter, Date.now() - item.born)).current;
   const motion = useNativePresence(!item.exiting, tokens18.motion.toastEnter - born, tokens18.motion.toastExit, true, born / tokens18.motion.toastEnter);
-  const offset = useRef12(new Animated8.Value(0)).current;
+  const offset = useRef14(new Animated8.Value(0)).current;
   const box = boxes.get(item.toast.id);
   useLayoutEffect8(() => {
     if (motion.reduced) {
@@ -3447,9 +3469,9 @@ function ToastSlot({ item, controller, boxes }) {
 function ToastStack({ items: items2, controller }) {
   var _a;
   const layers = useLayerState();
-  const root = useRef12(null), reduced = useReducedMotion();
+  const root = useRef14(null), reduced = useReducedMotion();
   useToastReflow(root, reduced);
-  const boxes = useRef12(/* @__PURE__ */ new Map()).current;
+  const boxes = useRef14(/* @__PURE__ */ new Map()).current;
   for (const id of boxes.keys()) if (!items2.some((item) => item.toast.id === id)) boxes.delete(id);
   return /* @__PURE__ */ jsx19(View14, { ref: root, pointerEvents: "box-none", style: {
     position: "absolute",
@@ -3469,9 +3491,9 @@ import {
   feedbackControllerOf
 } from "@kjun-ui/tokens";
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect8,
-  useRef as useRef13,
+  useCallback as useCallback4,
+  useEffect as useEffect9,
+  useRef as useRef15,
   useState as useState13,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
@@ -3528,8 +3550,8 @@ function FeedbackDialog({
 function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
   const [owned] = useState13(() => controllerProp ? void 0 : createFeedbackController());
   const controller = controllerProp ? feedbackControllerOf(controllerProp) : owned;
-  useEffect8(() => controller.attach(), [controller]);
-  const life = useRef13(0);
+  useEffect9(() => controller.attach(), [controller]);
+  const life = useRef15(0);
   const snapshot = useSyncExternalStore2(
     controller.subscribe,
     controller.getSnapshot,
@@ -3538,7 +3560,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(() => {
@@ -3547,7 +3569,7 @@ function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
     };
   }, [controller]);
   const [layers, setLayers] = useState13([]);
-  const register = useCallback3((id) => {
+  const register = useCallback4((id) => {
     setLayers((previous) => [...previous, id]);
     return () => setLayers((previous) => previous.filter((item) => item !== id));
   }, []);
@@ -3582,8 +3604,8 @@ import {
   createContext as createContext16,
   useContext as useContext12,
   useState as useState14,
-  useEffect as useEffect9,
-  useRef as useRef14
+  useEffect as useEffect10,
+  useRef as useRef16
 } from "react";
 import {
   View as View16
@@ -3785,7 +3807,7 @@ function KjunRadio({
   const group = useContext12(RadioContext), { colors } = useKjunStyles(), selected = (group ? group.value : value) === val;
   const geometry2 = tokens20.extensions.radio;
   const [hovered, setHovered] = useState14(false);
-  useEffect9(() => {
+  useEffect10(() => {
     if (disabled) setHovered(false);
   }, [disabled]);
   return /* @__PURE__ */ jsx21(
@@ -3857,7 +3879,7 @@ function KjunRadioGroup({
   onValueChange,
   onChange
 }) {
-  const root = useRef14(null);
+  const root = useRef16(null);
   useRadioKeyboard(root);
   return /* @__PURE__ */ jsx21(
     RadioContext.Provider,
@@ -3897,7 +3919,7 @@ function KjunRadioGroup({
 
 // packages/native/src/selection-groups.tsx
 import { tokens as tokens22 } from "@kjun-ui/tokens";
-import { useLayoutEffect as useLayoutEffect10, useRef as useRef16 } from "react";
+import { useLayoutEffect as useLayoutEffect10, useRef as useRef18 } from "react";
 import {
   Animated as Animated11,
   ScrollView as ScrollView2,
@@ -3906,7 +3928,7 @@ import {
 } from "react-native";
 
 // packages/native/src/button-group-motion.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useLayoutEffect as useLayoutEffect9, useRef as useRef15, useState as useState15 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useLayoutEffect as useLayoutEffect9, useRef as useRef17, useState as useState15 } from "react";
 import { Animated as Animated10, Easing as Easing4, StyleSheet as StyleSheet5, View as View17 } from "react-native";
 import { tokens as tokens21 } from "@kjun-ui/tokens";
 import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -3916,14 +3938,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] = useState15(/* @__PURE__ */ new Map());
-  const x = useRef15(new Animated10.Value(0)).current;
-  const width = useRef15(new Animated10.Value(0)).current;
-  const previous = useRef15(null);
+  const x = useRef17(new Animated10.Value(0)).current;
+  const width = useRef17(new Animated10.Value(0)).current;
+  const previous = useRef17(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]);
   useLayoutEffect9(() => {
     const old = previous.current;
     if (!selected || !layout) {
@@ -3946,7 +3968,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]);
@@ -3954,9 +3976,9 @@ function useButtonGroupMotion(selected) {
 }
 function ButtonGroupLabel({ label, active, size, reduced }) {
   const { colors, fontFamily } = useKjunStyles();
-  const progress = useRef15(new Animated10.Value(active ? 1 : 0)).current;
+  const progress = useRef17(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: tokens21.motion.indicator, easing, useNativeDriver: false }).start();
@@ -4003,7 +4025,7 @@ function KjunButtonGroup({
   const motion = useButtonGroupMotion(selected);
   const padding = tokens22.buttonGroup.padding[size];
   const itemRadius = tokens22.buttonGroup.itemRadii[size];
-  const itemRefs = useRef16(/* @__PURE__ */ new Map());
+  const itemRefs = useRef18(/* @__PURE__ */ new Map());
   const { updateLayout } = motion;
   useLayoutEffect10(() => {
     for (const [value2, node] of itemRefs.current) {
@@ -4174,7 +4196,7 @@ function KjunFilterGroup({
                   paddingHorizontal: { xs: tokens22.dimension.value8, sm: tokens22.dimension.value12, md: tokens22.dimension.value12, lg: tokens22.dimension.value14, xl: tokens22.dimension.value16 }[size],
                   // Corners follow the button scale with the height, so every size keeps the same shape.
                   borderRadius: tokens22.button.radii[size],
-                  backgroundColor: active ? colors.text : colors.secondary
+                  backgroundColor: active ? colors.filterSelectedBg : colors.secondary
                 },
                 children: [
                   option.dot && /* @__PURE__ */ jsx23(
@@ -4193,7 +4215,7 @@ function KjunFilterGroup({
                     {
                       name: option.icon,
                       size: tokens22.extensions.selection.iconSize,
-                      color: active ? colors.inverse : colors.textSecondary
+                      color: active ? colors.filterSelectedText : colors.textSecondary
                     }
                   ),
                   /* @__PURE__ */ jsxs13(View18, { children: [
@@ -4216,7 +4238,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
                       }
@@ -4321,7 +4343,7 @@ var KjunTextarea = forwardRef4(
 
 // packages/native/src/drawer.tsx
 import { tokens as tokens24 } from "@kjun-ui/tokens";
-import { useEffect as useEffect11, useState as useState16 } from "react";
+import { useEffect as useEffect12, useState as useState16 } from "react";
 import { Animated as Animated12, Keyboard } from "react-native";
 
 // shared/package-runtime/drawer-geometry.ts
@@ -4356,7 +4378,7 @@ import {
 import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function useKeyboardOverlap(enabled2, windowHeight) {
   const [overlap, setOverlap] = useState16(0);
-  useEffect11(() => {
+  useEffect12(() => {
     var _a, _b;
     setOverlap(0);
     const events = keyboardEvents(Platform15.OS);
@@ -4386,6 +4408,7 @@ function KjunDrawer({
   footer,
   children,
   onClose,
+  onAfterClose,
   ariaLabel,
   safeAreaTop = 0,
   safeAreaBottom = 0,
@@ -4416,10 +4439,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();
@@ -4552,8 +4580,8 @@ import {
   createContext as createContext17,
   isValidElement as isValidElement6,
   useContext as useContext13,
-  useEffect as useEffect14,
-  useRef as useRef19,
+  useEffect as useEffect15,
+  useRef as useRef21,
   useState as useState19
 } from "react";
 import {
@@ -4566,9 +4594,9 @@ import { tokens as tokens25 } from "@kjun-ui/tokens";
 import {
   cloneElement as cloneElement3,
   isValidElement as isValidElement4,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useLayoutEffect as useLayoutEffect11,
-  useRef as useRef17,
+  useRef as useRef19,
   useState as useState17
 } from "react";
 import {
@@ -4625,10 +4653,10 @@ function FloatingPanel({
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.select;
   const [headerHeight, setHeaderHeight] = useState17(0);
-  const panelRef = useRef17(null);
-  const scroll = useRef17(null), viewport = useRef17(0);
+  const panelRef = useRef19(null);
+  const scroll = useRef19(null), viewport = useRef19(0);
   const { colors } = useKjunStyles(), window2 = useWindowDimensions4(), [anchored, setAnchored] = useState17(false), [sized, setSized] = useState17(false), [anchor, setAnchor] = useState17({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = useState17({ width: 0, height: 0 });
-  const measurement = useRef17(0);
+  const measurement = useRef19(0);
   const motion = useNativePresence(open, tooltip ? tokens25.motion.tooltipEnter : tokens25.motion.popupEnter, tooltip ? tokens25.motion.tooltipExit : tokens25.motion.popupExit, anchored && sized);
   const layer = useLayer(open, motion.present, tooltip ? "tooltip" : "popup", () => onOpenChange(false), triggerRef);
   useLayoutEffect11(() => {
@@ -4650,14 +4678,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 ? tokens25.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;
@@ -4845,8 +4873,8 @@ function FloatingPanel({
 import {
   cloneElement as cloneElement4,
   isValidElement as isValidElement5,
-  useEffect as useEffect13,
-  useRef as useRef18,
+  useEffect as useEffect14,
+  useRef as useRef20,
   useState as useState18
 } from "react";
 import {
@@ -4872,7 +4900,7 @@ function KjunPopover({
   children
 }) {
   const { colors } = useKjunStyles();
-  const [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, ref = useRef18(null);
+  const [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, ref = useRef20(null);
   const change = (v) => {
     setInternal(v);
     onOpenChange == null ? void 0 : onOpenChange(v);
@@ -4911,7 +4939,10 @@ function KjunPopover({
   ] });
 }
 function KjunTooltip({
-  content: message = "",
+  content: body = "",
+  title,
+  align,
+  width,
   placement = "top",
   delay = 0,
   children,
@@ -4920,13 +4951,14 @@ function KjunTooltip({
   open: controlled,
   onOpenChange
 }) {
-  const { colors } = useKjunStyles(), [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, latest = useRef18({ open, onOpenChange }), setOpen = (value) => {
+  const message = [title, body].filter(Boolean).join(", ");
+  const { colors } = useKjunStyles(), [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, latest = useRef20({ 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 = useRef18(null), timer = useRef18(void 0);
+  }, ref = useRef20(null), timer = useRef20(void 0);
   latest.current = { open, onOpenChange };
   const scopeActive = useActiveLayerScope();
   const hide = () => {
@@ -4938,11 +4970,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();
@@ -5005,25 +5037,29 @@ function KjunTooltip({
         triggerRef: ref,
         placement,
         ariaLabel: message,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsxs16(
           View21,
           {
             style: {
               paddingVertical: tokens26.extensions.tooltip.paddingY,
               paddingHorizontal: tokens26.extensions.tooltip.paddingX,
-              maxWidth: tokens26.extensions.tooltip.maxWidth,
+              maxWidth: width ? tokens26.extensions.tooltip.maxWidths[width] : tokens26.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
+                }
+              )
+            ]
           }
         )
       }
@@ -5047,7 +5083,7 @@ function KjunDropdown({
   onClose
 }) {
   const m = useKjunMessages();
-  const [open, setOpen] = useState19(false), currentOpen = useRef19(false), ref = useRef19(null);
+  const [open, setOpen] = useState19(false), currentOpen = useRef21(false), ref = useRef21(null);
   let control = trigger;
   while (isValidElement6(control) && control.type === KjunTooltip)
     control = control.props.children;
@@ -5059,7 +5095,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__ */ jsxs17(DropdownContext.Provider, { value: () => change(false), children: [
@@ -5195,7 +5231,7 @@ function KjunMenuButton({
 }
 
 // shared/package-runtime/combobox.ts
-import { useEffect as useEffect15, useState as useState20 } from "react";
+import { useEffect as useEffect16, useState as useState20 } from "react";
 
 // shared/package-runtime/options.ts
 var optionValue = (option, key = "value") => typeof option === "object" ? option[key] : option;
@@ -5275,8 +5311,8 @@ function useComboboxModel({
   const selectedLabel = selected !== void 0 ? optionLabel(selected, labelKey) : "";
   const [query, setQuery] = useState20(selectedLabel);
   const [open, setOpen] = useState20(false);
-  useEffect15(() => setQuery(selectedLabel), [value, selectedLabel]);
-  useEffect15(() => {
+  useEffect16(() => setQuery(selectedLabel), [value, selectedLabel]);
+  useEffect16(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const change = (next) => {
@@ -5310,7 +5346,7 @@ function useComboboxModel({
 
 // packages/native/src/combobox.tsx
 import { tokens as tokens29 } from "@kjun-ui/tokens";
-import { useId as useId5, useRef as useRef20 } from "react";
+import { useId as useId5, useRef as useRef22 } from "react";
 import { Platform as Platform18, View as View24 } from "react-native";
 
 // packages/native/src/select-options.tsx
@@ -5440,8 +5476,8 @@ function SearchField({
 }) {
   const m = useKjunMessages();
   const searchId = "kjun-popup-search-" + useId5().replace(/:/g, "");
-  const clearing = useRef20(false);
-  const ref = useRef20(null), { colors } = useKjunStyles();
+  const clearing = useRef22(false);
+  const ref = useRef22(null), { colors } = useKjunStyles();
   const focusGuard = usePopupFocusGuard(ref);
   const openFromPress = () => {
     if (!disabled) {
@@ -5541,7 +5577,7 @@ function SearchField({
 
 // packages/native/src/date-picker.tsx
 import { tokens as tokens30 } from "@kjun-ui/tokens";
-import { useRef as useRef21, useState as useState21 } from "react";
+import { useRef as useRef23, useState as useState21 } from "react";
 import { Platform as Platform19, View as View25 } from "react-native";
 import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 function displayMonth(value) {
@@ -5564,7 +5600,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] = useState21(false), [month, setMonth] = useState21(() => displayMonth(value)), ref = useRef21(null), spec = tokens30.input[size];
+  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = useState21(false), [month, setMonth] = useState21(() => displayMonth(value)), ref = useRef23(null), spec = tokens30.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")}`;
@@ -5742,7 +5778,7 @@ function KjunDatePicker({
 import { useState as useState23 } from "react";
 
 // shared/package-runtime/search-input.ts
-import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect12, useRef as useRef22, useState as useState22 } from "react";
+import { useEffect as useEffect17, useLayoutEffect as useLayoutEffect12, useRef as useRef24, useState as useState22 } from "react";
 function useSearchInputModel({
   value,
   disabled = false,
@@ -5752,10 +5788,10 @@ function useSearchInputModel({
   onValueChange,
   onSearchError
 }, open) {
-  const [query, setQuery] = useState22(value), [options, setOptions] = useState22([]), [loading, setLoading] = useState22(false), [failed, setFailed] = useState22(false), version = useRef22(0), notify = useRef22(onSearchError);
+  const [query, setQuery] = useState22(value), [options, setOptions] = useState22([]), [loading, setLoading] = useState22(false), [failed, setFailed] = useState22(false), version = useRef24(0), notify = useRef24(onSearchError);
   notify.current = onSearchError;
-  const timer = useRef22(void 0);
-  const notifyValue = useRef22(onValueChange);
+  const timer = useRef24(void 0);
+  const notifyValue = useRef24(onValueChange);
   notifyValue.current = onValueChange;
   useLayoutEffect12(() => {
     clearTimeout(timer.current);
@@ -5765,7 +5801,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) {
@@ -5918,7 +5954,7 @@ function KjunSearchInput({
 
 // packages/native/src/select-control.tsx
 import { tokens as tokens32 } from "@kjun-ui/tokens";
-import { useContext as useContext14, useEffect as useEffect18, useRef as useRef24 } from "react";
+import { useContext as useContext14, useEffect as useEffect19, useRef as useRef26 } from "react";
 
 // packages/native/src/compound-control.tsx
 import { createContext as createContext18 } from "react";
@@ -5932,7 +5968,7 @@ function CompoundTarget({ children, square = false }) {
 }
 
 // shared/package-runtime/select.ts
-import { useEffect as useEffect17, useRef as useRef23, useState as useState24 } from "react";
+import { useEffect as useEffect18, useRef as useRef25, useState as useState24 } from "react";
 function useSelectState(controlled, disabled, pageSize, onOpenChange) {
   const [internal, setInternal] = useState24(false);
   const [query, setQuery] = useState24("");
@@ -5940,8 +5976,8 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
   const [session, setSession] = useState24(0);
   const isControlled = typeof controlled === "boolean";
   const open = !disabled && (isControlled ? controlled : internal);
-  const previousOpen = useRef23(open);
-  useEffect17(() => {
+  const previousOpen = useRef25(open);
+  useEffect18(() => {
     if (disabled && !isControlled) setInternal(false);
     if (previousOpen.current && !open) {
       setQuery("");
@@ -5950,7 +5986,7 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
     }
     previousOpen.current = open;
   }, [open, disabled, isControlled, pageSize]);
-  useEffect17(() => {
+  useEffect18(() => {
     setLimit(pageSize);
   }, [pageSize]);
   const changeOpen = (next) => {
@@ -6000,14 +6036,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 = useRef24(null), spec = tokens32.input[size];
-  const trigger = useRef24(null);
+  const { colors } = useKjunStyles(), field = useKjunField(), ref = useRef26(null), spec = tokens32.input[size];
+  const trigger = useRef26(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 = useRef24(null);
+  const selectedRow = useRef26(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);
@@ -6205,15 +6241,16 @@ import { tokens as tokens35 } from "@kjun-ui/tokens";
 
 // packages/native/src/collapse.tsx
 import { tokens as tokens33 } from "@kjun-ui/tokens";
-import { useLayoutEffect as useLayoutEffect13, useRef as useRef25, useState as useState25 } from "react";
+import { useLayoutEffect as useLayoutEffect13, useRef as useRef27, useState as useState25 } from "react";
 import { Animated as Animated14, View as View28 } 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] = useState25(open), [height, setHeight] = useState25(null);
-  const value = useRef25(new Animated14.Value(0)).current;
+  const value = useRef27(new Animated14.Value(0)).current;
   const [settled, setSettled] = useState25(open);
-  const version = useRef25(0), first = useRef25(open);
+  const version = useRef27(0), first = useRef27(open), opened = useRef27(open);
+  if (open) opened.current = true;
   useLayoutEffect13(() => {
     const revision = ++version.current;
     if (open) setRetained(true);
@@ -6241,13 +6278,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(View28, { onLayout: (event) => setHeight(event.nativeEvent.layout.height), children })
     }
@@ -6255,10 +6292,10 @@ function Collapse({ open, children }) {
 }
 
 // shared/package-runtime/navigation.ts
-import { useEffect as useEffect19, useRef as useRef26, useState as useState26 } from "react";
+import { useEffect as useEffect20, useRef as useRef28, useState as useState26 } from "react";
 function useInitialTab(value, candidate, change) {
-  const requested = useRef26(/* @__PURE__ */ new Set());
-  useEffect19(() => {
+  const requested = useRef28(/* @__PURE__ */ new Set());
+  useEffect20(() => {
     if (value !== "") {
       requested.current.clear();
       return;
@@ -6270,7 +6307,7 @@ function useInitialTab(value, candidate, change) {
 }
 function useAccordionState(multiple) {
   const [opened, setOpened] = useState26(/* @__PURE__ */ new Set());
-  useEffect19(() => {
+  useEffect20(() => {
     if (!multiple) setOpened((previous) => previous.size > 1 ? new Set([...previous].slice(-1)) : previous);
   }, [multiple]);
   return {
@@ -6298,19 +6335,20 @@ import {
   Fragment as Fragment12,
   createContext as createContext20,
   useContext as useContext16,
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useId as useId7,
+  useRef as useRef31,
   useState as useState28
 } from "react";
 import { Animated as Animated16, View as View30, useWindowDimensions as useWindowDimensions5, Platform as Platform22 } from "react-native";
 
 // packages/native/src/tabs.tsx
 import { tokens as tokens34 } from "@kjun-ui/tokens";
-import { Children as Children4, createContext as createContext19, isValidElement as isValidElement7, useContext as useContext15, useCallback as useCallback5, useLayoutEffect as useLayoutEffect15, useRef as useRef28, useId as useId6, useState as useState27 } from "react";
+import { Children as Children4, createContext as createContext19, isValidElement as isValidElement7, useContext as useContext15, useCallback as useCallback6, useLayoutEffect as useLayoutEffect15, useRef as useRef30, useId as useId6, useState as useState27 } from "react";
 import { Animated as Animated15, Platform as Platform21, ScrollView as ScrollView5, View as View29 } from "react-native";
 
 // packages/native/src/tabs-accessibility.web.ts
-import { useLayoutEffect as useLayoutEffect14, useRef as useRef27 } from "react";
+import { useLayoutEffect as useLayoutEffect14, useRef as useRef29 } from "react";
 
 // shared/package-runtime/tab-keyboard.ts
 function manageTabList(list, select, keyboard = true) {
@@ -6393,7 +6431,7 @@ function panelNeedsFocus(panel) {
 
 // packages/native/src/tabs-accessibility.web.ts
 function useTabKeyboard(root, select) {
-  const callback = useRef27(select);
+  const callback = useRef29(select);
   callback.current = select;
   useLayoutEffect14(() => {
     var _a;
@@ -6430,10 +6468,10 @@ function KjunTabs({
     isValidElement7
   );
   const tabs = items2.length ? items2 : panes.filter((child) => child.type === KjunTabPane).map((child) => child.props);
-  const id = "kjun-" + useId6(), root = useRef28(null);
-  const menuState = useRef28({ tabs, onTabMenu });
+  const id = "kjun-" + useId6(), root = useRef30(null);
+  const menuState = useRef30({ tabs, onTabMenu });
   menuState.current = { tabs, onTabMenu };
-  const pressedMenu = useRef28(null);
+  const pressedMenu = useRef30(null);
   useLayoutEffect15(() => {
     if (!onTabMenu || !tabs.some((tab) => tab.name === pressedMenu.current && !tab.disabled)) pressedMenu.current = null;
   }, [tabs, onTabMenu]);
@@ -6449,10 +6487,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 = useRef28(/* @__PURE__ */ new Map());
+  const tabRefs = useRef30(/* @__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,
@@ -6621,7 +6659,7 @@ function KjunTabs({
 }
 function KjunTabPane({ name, children }) {
   const { value, id, names } = useContext15(TabContext);
-  const root = useRef28(null);
+  const root = useRef30(null);
   usePanelFocus(root);
   const hidden = value !== name;
   return /* @__PURE__ */ jsx36(
@@ -6674,14 +6712,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] = useState28(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] = useState28(defaultOpen), open = controlled ? openProp : group ? group.opened.has(id) : own;
+  const reported = useRef31(open), notify = useRef31(onOpenChange), registering = useRef31(!!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, tokens35.motion.collapse, void 0, void 0, true);
   const geometry2 = tokens35.extensions.accordion;
   const [hovered, setHovered] = useState28(false);
   const wrapping = Platform22.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
-  useEffect20(() => {
+  useEffect21(() => {
     return group == null ? void 0 : group.register(id, defaultOpen);
   }, []);
   return /* @__PURE__ */ jsxs23(View30, { children: [
@@ -6695,7 +6751,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 }) => ({
@@ -6715,7 +6774,7 @@ function KjunAccordionItem({
         ]
       }
     ),
-    /* @__PURE__ */ jsx37(Collapse, { open, children: /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx37(Collapse, { open, keepMounted, children: /* @__PURE__ */ jsx37(
       View30,
       {
         nativeID: id + "-panel",
@@ -6912,7 +6971,7 @@ function KjunPagination({
 
 // packages/native/src/actions.tsx
 import { tokens as tokens36 } from "@kjun-ui/tokens";
-import { useContext as useContext17, useEffect as useEffect21, useRef as useRef29, useState as useState29 } from "react";
+import { useContext as useContext17, useEffect as useEffect22, useRef as useRef32, useState as useState29 } from "react";
 import { Platform as Platform23, ScrollView as ScrollView7, View as View31 } from "react-native";
 import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 function KjunIconToggle({
@@ -6997,8 +7056,8 @@ function KjunCopyButton({
 }) {
   const m = useKjunMessages();
   successText != null ? successText : successText = m.copied;
-  const feedback = useOptionalKjunFeedback(), { colors } = useKjunStyles(), [copied, setCopied] = useState29(false), [failed, setFailed] = useState29(false), busy = useRef29(false), timer = useRef29(void 0), mounted = useRef29(true);
-  useEffect21(() => {
+  const feedback = useOptionalKjunFeedback(), { colors } = useKjunStyles(), [copied, setCopied] = useState29(false), [failed, setFailed] = useState29(false), busy = useRef32(false), timer = useRef32(void 0), mounted = useRef32(true);
+  useEffect22(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -7162,10 +7221,10 @@ import { Component, useState as useState31 } from "react";
 import { Platform as Platform24, View as View32 } from "react-native";
 
 // shared/package-runtime/use-loading-reveal.ts
-import { useEffect as useEffect22, useState as useState30 } from "react";
+import { useEffect as useEffect23, useState as useState30 } from "react";
 function useLoadingReveal(active, delay = 0) {
   const [revealed, setRevealed] = useState30(false);
-  useEffect22(() => {
+  useEffect23(() => {
     setRevealed(false);
     if (!active || delay <= 0) return;
     const timer = setTimeout(() => setRevealed(true), delay);
@@ -7335,7 +7394,7 @@ KjunErrorBoundary.contextType = KjunMessageContext;
 
 // packages/native/src/skeletons.tsx
 import { tokens as tokens41 } from "@kjun-ui/tokens";
-import { useEffect as useEffect23, useRef as useRef30, useState as useState33 } from "react";
+import { useEffect as useEffect24, useRef as useRef33, useState as useState33 } from "react";
 import { Animated as Animated17, Platform as Platform25, View as View34, useWindowDimensions as useWindowDimensions6 } from "react-native";
 import Svg5, { Path as Path4 } from "react-native-svg";
 
@@ -7526,8 +7585,8 @@ function KjunChartSkeleton({
 }) {
   const m = useKjunMessages();
   loadingText != null ? loadingText : loadingText = m.chartLoading;
-  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef30(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens41.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 = useRef33(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens41.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([
@@ -7625,7 +7684,7 @@ import Svg6, {
 import { tokens as tokens43 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/use-number-motion.ts
-import { useLayoutEffect as useLayoutEffect16, useRef as useRef31, useState as useState34 } from "react";
+import { useLayoutEffect as useLayoutEffect16, useRef as useRef34, useState as useState34 } from "react";
 
 // shared/package-runtime/number-motion.ts
 import { tokens as tokens42 } from "@kjun-ui/tokens";
@@ -7672,7 +7731,7 @@ function createNumberMotion(apply) {
 // shared/package-runtime/use-number-motion.ts
 function useNumberMotion(value, animated, fromPrevious, reduced) {
   const [display, setDisplay] = useState34(typeof value === "string" || fromPrevious || !animated || reduced ? value : 0);
-  const motion = useRef31(null);
+  const motion = useRef34(null);
   if (!motion.current) motion.current = createNumberMotion(setDisplay);
   useLayoutEffect16(() => {
     if (!motion.current) motion.current = createNumberMotion(setDisplay);
@@ -8137,7 +8196,7 @@ function KjunSparkline({
 
 // shared/package-runtime/table.ts
 import { nextTableSort } from "@kjun-ui/tokens";
-import { useEffect as useEffect25, useRef as useRef33, useState as useState36 } from "react";
+import { useEffect as useEffect26, useRef as useRef36, useState as useState36 } from "react";
 
 // shared/package-runtime/table-model.ts
 function getValue(row, key) {
@@ -8184,8 +8243,8 @@ function useTableModel(props) {
   const [internalSort, setSort] = useState36({
     key: "",
     order: "asc"
-  }), [internalExpanded, setExpanded] = useState36([]), [search, setSearch] = useState36(""), timer = useRef33(void 0);
-  useEffect25(() => () => clearTimeout(timer.current), []);
+  }), [internalExpanded, setExpanded] = useState36([]), [search, setSearch] = useState36(""), timer = useRef36(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);
@@ -9342,7 +9401,7 @@ import { tokens as tokens52 } from "@kjun-ui/tokens";
 import { ScrollView as ScrollView10, View as View45 } from "react-native";
 
 // shared/package-runtime/market-cards.ts
-import { useEffect as useEffect26, useRef as useRef34, useState as useState39 } from "react";
+import { useEffect as useEffect27, useRef as useRef37, useState as useState39 } from "react";
 function useMarketCardsModel(props, persistence) {
   const {
     columns,
@@ -9359,7 +9418,7 @@ function useMarketCardsModel(props, persistence) {
     isDefaultSort: c.defaultSort
   }));
   const [key, setKey] = useState39(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
-  const mounted = useRef34("");
+  const mounted = useRef37("");
   const save = (key2) => {
     var _a;
     try {
@@ -9367,7 +9426,7 @@ function useMarketCardsModel(props, persistence) {
     } catch (e) {
     }
   };
-  useEffect26(() => {
+  useEffect27(() => {
     var _a, _b;
     if (mounted.current === restoreSignature) return;
     mounted.current = restoreSignature;
@@ -10152,26 +10211,31 @@ import { Children as Children5, createContext as createContext22, useContext as
 import { View as View49, Platform as Platform26 } from "react-native";
 import { Fragment as Fragment20, jsx as jsx56, jsxs as jsxs42 } 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__ */ jsxs42(Fragment20, { children: [
     hasContent(leading) && /* @__PURE__ */ jsx56(View49, { children: content(leading) }),
     /* @__PURE__ */ jsxs42(View49, { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ jsx56(KText, { style: { ...typeStyle("label"), ...destructive ? { color: colors.danger } : {} }, children: title }),
-      !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens56.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens56.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description }),
+      hasContent(children) && /* @__PURE__ */ jsx56(View49, { style: { marginTop: tokens56.extensions.list.descriptionGap }, children: content(children) })
     ] }),
     hasContent(trailing) && /* @__PURE__ */ jsx56(View49, { style: { maxWidth: "35%" }, children: content(trailing) }),
     chevron && /* @__PURE__ */ jsx56(View49, { accessible: false, importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx56(KjunIcon, { name: "chevron-right", size: tokens56.iconSizes.default, color: colors.textTertiary }) })
   ] });
   const style = { flex: 1, minWidth: 0, minHeight: compact ? tokens56.extensions.list.compactMinimumHeight : tokens56.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: tokens56.extensions.list.gap, padding: tokens56.extensions.list.padding, ...compact ? { paddingVertical: tokens56.extensions.list.compactPaddingY } : {} };
   return /* @__PURE__ */ jsxs42(View49, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: tokens56.extensions.list.gap, borderBottomWidth: divider ? tokens56.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 ? tokens56.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx56(View49, { 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 ? tokens56.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx56(View49, { style, children: parts }),
     hasContent(actions) && /* @__PURE__ */ jsx56(View49, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform26.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens56.extensions.list.actionsGap, paddingRight: tokens56.extensions.list.actionsPadding, opacity: disabled ? tokens56.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__ */ jsxs42(View49, { style: { minWidth: 0, backgroundColor: surface ? colors.surface : "transparent" }, children: [
+  return /* @__PURE__ */ jsxs42(View49, { style: {
+    minWidth: 0,
+    backgroundColor: surface ? colors.surface : "transparent",
+    ...radius === "none" ? {} : { borderRadius: tokens56.card.radii[radius], overflow: "hidden" }
+  }, children: [
     !!(title || description || actions) && /* @__PURE__ */ jsxs42(View49, { style: { flexDirection: "row", alignItems: "center", gap: tokens56.extensions.list.gap, padding: tokens56.extensions.list.padding }, children: [
       /* @__PURE__ */ jsxs42(View49, { style: { flex: 1 }, children: [
         !!title && /* @__PURE__ */ jsx56(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
@@ -10308,14 +10372,14 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
 }
 
 // packages/native/src/media.tsx
-import { createContext as createContext23, useContext as useContext20, useRef as useRef35, useState as useState42 } from "react";
+import { createContext as createContext23, useContext as useContext20, useRef as useRef38, useState as useState42 } from "react";
 import { Image, View as View51 } from "react-native";
 import { tokens as tokens58 } 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 = useRef35({ request, version: 0 });
+  const request = JSON.stringify(source != null ? source : src), current = useRef38({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
   const version = current.current.version;
   const [failed, setFailed] = useState42(null);
@@ -10383,7 +10447,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 useRef36, useState as useState43 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo3, useRef as useRef39, useState as useState43 } from "react";
 import { PanResponder, Platform as Platform28, Pressable as Pressable3, View as View53 } from "react-native";
 import { tokens as tokens61, createSliderDomain, sliderKey } from "@kjun-ui/tokens";
 import { jsx as jsx61, jsxs as jsxs45 } from "react/jsx-runtime";
@@ -10411,15 +10475,15 @@ function RangeInput({
   const [hovered, setHovered] = useState43(null);
   const [dragging, setDragging] = useState43(null);
   const [focused, setFocused] = useState43(null);
-  const track = useRef36(null), measured = useRef36({ x: 0, width: 1 }), selected = useRef36(0), dirty = useRef36(false);
-  const latest = useRef36(values);
+  const track = useRef39(null), measured = useRef39({ x: 0, width: 1 }), selected = useRef39(0), dirty = useRef39(false);
+  const latest = useRef39(values);
   latest.current = values;
-  const callbacks = useRef36({ onValueChange, onChangeCommit });
+  const callbacks = useRef39({ 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);
@@ -10684,7 +10748,7 @@ function KjunRangeSlider(props) {
 }
 
 // packages/native/src/quantity-stepper.tsx
-import { useEffect as useEffect28, useRef as useRef37, useState as useState44 } from "react";
+import { useEffect as useEffect29, useRef as useRef40, useState as useState44 } from "react";
 import { Platform as Platform29, View as View54 } from "react-native";
 import { createNumberDomain, quantityKeyAction, tokens as tokens62 } from "@kjun-ui/tokens";
 
@@ -10708,15 +10772,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] = useState44(String(value));
-  const inputRef = useRef37(null);
-  const composing = useRef37(false), dirty = useRef37(false), accepted = useRef37(value);
-  const cancelledEscape = useRef37(false);
-  useEffect28(() => {
+  const inputRef = useRef40(null);
+  const composing = useRef40(false), dirty = useRef40(false), accepted = useRef40(value);
+  const cancelledEscape = useRef40(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) => {
@@ -10753,7 +10817,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 = useRef37({ key, edit: (text) => {
+  const handlers = useRef40({ key, edit: (text) => {
     dirty.current = true;
     setDraft(text);
   } });
@@ -10761,7 +10825,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);
@@ -10833,7 +10897,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
 }
 
 // packages/native/src/time-picker.tsx
-import { Fragment as Fragment22, useEffect as useEffect29, useId as useId11, useMemo as useMemo4, useRef as useRef38, useState as useState45 } from "react";
+import { Fragment as Fragment22, useEffect as useEffect30, useId as useId11, useMemo as useMemo4, useRef as useRef41, useState as useState45 } from "react";
 import { View as View55 } from "react-native";
 import { createTimeDomain, tokens as tokens63 } from "@kjun-ui/tokens";
 import { jsx as jsx63, jsxs as jsxs47 } from "react/jsx-runtime";
@@ -10842,12 +10906,12 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
   ariaLabel != null ? ariaLabel : ariaLabel = m.time;
   const geometry2 = tokens63.extensions.timePicker, spec = tokens63.input[size];
   const { colors } = useKjunStyles();
-  const first = useRef38(null);
+  const first = useRef41(null);
   const [focused, setFocused] = useState45(false), [opened, setOpened] = useState45(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) => {