@kjun-ui/native 0.10.0 → 0.11.0

package/dist/index.web.js

@@ -906,7 +906,7 @@ function KjunButton(input) {
             opacity: overlayLoading ? 0 : 1,
             ...multiline || navigation ? { flexShrink: 1, minWidth: 0, textAlign: "center" } : {}
           }, children }),
-          suffixIcon && /* @__PURE__ */ jsx5(View2, { style: { opacity: busy && prefixIcon ? 0 : 1 }, children: /* @__PURE__ */ jsx5(
+          !!suffixIcon && /* @__PURE__ */ jsx5(View2, { style: { opacity: busy && prefixIcon ? 0 : 1 }, children: /* @__PURE__ */ jsx5(
             KjunIcon,
             {
               name: busy && !prefixIcon ? "loader-2" : suffixIcon,
@@ -1186,7 +1186,7 @@ function KjunFormGroup({
         describedBy: mergeIds(hint ? fieldId + "-hint" : void 0, error ? fieldId + "-error" : void 0)
       },
       children: /* @__PURE__ */ jsxs2(View4, { style: [{ minWidth: 0, marginBottom: tokens7.extensions.form.itemGap }, style], children: [
-        label && !labelHidden && /* @__PURE__ */ jsxs2(
+        !!label && !labelHidden && /* @__PURE__ */ jsxs2(
           Text3,
           {
             nativeID: fieldId + "-label",
@@ -1278,6 +1278,7 @@ var KjunInput = forwardRef2(function KjunInput2({
   const invalid = !!(error || errorMessage || (field == null ? void 0 : field.error));
   const canEdit = !disabled && !readOnly && editable;
   const surface = useFieldSurface(size, { disabled, readOnly: !!readOnly || !editable, invalid, open: props["aria-expanded"] === true });
+  const affixText = { ...inputTypeStyle(size), color: surface.icon };
   const showClear = clearable && !!value;
   const [prefixWidth, setPrefixWidth] = useState7(0);
   const [affixWidth, setAffixWidth] = useState7(0);
@@ -1339,7 +1340,7 @@ var KjunInput = forwardRef2(function KjunInput2({
           ]
         }
       ),
-      (prefix || prefixIcon) && /* @__PURE__ */ jsx8(
+      !!(prefix || prefixIcon) && /* @__PURE__ */ jsx8(
         View4,
         {
           onLayout: (event) => setPrefixWidth(event.nativeEvent.layout.width),
@@ -1351,7 +1352,7 @@ var KjunInput = forwardRef2(function KjunInput2({
             bottom: 0,
             justifyContent: "center"
           },
-          children: prefix || /* @__PURE__ */ jsx8(
+          children: prefix ? content(prefix, affixText) : /* @__PURE__ */ jsx8(
             KjunIcon,
             {
               name: prefixIcon,
@@ -1361,7 +1362,7 @@ var KjunInput = forwardRef2(function KjunInput2({
           )
         }
       ),
-      (showClear || suffix || suffixIcon) && /* @__PURE__ */ jsxs2(
+      !!(showClear || suffix || suffixIcon) && /* @__PURE__ */ jsxs2(
         View4,
         {
           onLayout: (event) => setAffixWidth(event.nativeEvent.layout.width),
@@ -1382,7 +1383,7 @@ var KjunInput = forwardRef2(function KjunInput2({
               onClear == null ? void 0 : onClear();
               (_a = input.current) == null ? void 0 : _a.focus();
             } }),
-            suffix || suffixIcon && /* @__PURE__ */ jsx8(
+            suffix ? content(suffix, affixText) : !!suffixIcon && /* @__PURE__ */ jsx8(
               KjunIcon,
               {
                 name: suffixIcon,
@@ -1422,6 +1423,17 @@ function KjunFormLayout({
   ) });
 }
 
+// shared/package-runtime/content-presence.ts
+import { Fragment as Fragment2, isValidElement as isValidElement2 } from "react";
+function hasContent(node) {
+  if (node == null || typeof node === "boolean") return false;
+  if (typeof node === "string") return node.trim().length > 0;
+  if (Array.isArray(node)) return node.some(hasContent);
+  if (isValidElement2(node) && node.type === Fragment2)
+    return hasContent(node.props.children);
+  return true;
+}
+
 // packages/native/src/layer-backdrop.tsx
 import { Platform as Platform7, Pressable as Pressable2, View as View5 } from "react-native";
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -1462,7 +1474,7 @@ import { Platform as Platform8, View as View7 } from "react-native";
 import { useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
 import { createPortal } from "react-dom";
 import { Modal, View as View6 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 function ModalWindow({ generation, children, visible, ...props }) {
   const [container, setContainer] = useState8(null);
   useLayoutEffect4(() => {
@@ -1471,7 +1483,7 @@ function ModalWindow({ generation, children, visible, ...props }) {
     setContainer(element);
     return () => element.remove();
   }, []);
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsx10(Modal, { ...props, visible, children: /* @__PURE__ */ jsx10(View6, { style: { flex: 1 }, ref: (node) => {
       if (node && container && container.parentNode !== node)
         node.appendChild(container);
@@ -1733,7 +1745,7 @@ function KjunModal({
                         borderBottomColor: c.border
                       },
                       children: [
-                        /* @__PURE__ */ jsx12(View8, { style: { flex: 1, paddingRight: tokens8.modal.titleActionGap }, children: header || /* @__PURE__ */ jsx12(
+                        /* @__PURE__ */ jsx12(View8, { style: { flex: 1, paddingRight: tokens8.modal.titleActionGap }, children: hasContent(header) ? content(header) : /* @__PURE__ */ jsx12(
                           Text4,
                           {
                             accessibilityRole: "header",
@@ -1773,7 +1785,7 @@ function KjunModal({
                       children
                     }
                   ),
-                  (showFooter || footer) && /* @__PURE__ */ jsx12(
+                  (showFooter || hasContent(footer)) && /* @__PURE__ */ jsx12(
                     View8,
                     {
                       style: {
@@ -1786,7 +1798,7 @@ function KjunModal({
                         borderTopWidth: tokens8.border.defaultWidth,
                         borderTopColor: c.border
                       },
-                      children: footer || /* @__PURE__ */ jsx12(
+                      children: hasContent(footer) ? content(footer) : /* @__PURE__ */ jsx12(
                         KjunFormActions,
                         {
                           size: footerSize,
@@ -1822,19 +1834,6 @@ import { tokens as tokens9 } from "@kjun-ui/tokens";
 import { useId as useId4 } from "react";
 import { Platform as Platform10, View as View9 } from "react-native";
 import Svg2, { Defs, LinearGradient, Rect as Rect2, Stop } from "react-native-svg";
-
-// shared/package-runtime/content-presence.ts
-import { Fragment as Fragment3, isValidElement as isValidElement2 } from "react";
-function hasContent(node) {
-  if (node == null || typeof node === "boolean") return false;
-  if (typeof node === "string") return node.trim().length > 0;
-  if (Array.isArray(node)) return node.some(hasContent);
-  if (isValidElement2(node) && node.type === Fragment3)
-    return hasContent(node.props.children);
-  return true;
-}
-
-// packages/native/src/card.tsx
 import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function KjunCard({
   title,
@@ -1895,8 +1894,8 @@ function KjunCard({
       borderBottomColor: borderColor
     }, children: [
       hasHeading && /* @__PURE__ */ jsx13(View9, { style: { flexGrow: 1, flexShrink: 1, minWidth: 0, maxWidth: "100%" }, children: hasContent(header) ? content(header, { color: foreground }) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
-        title && /* @__PURE__ */ jsx13(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle"), color: foreground }, children: title }),
-        subtitle && /* @__PURE__ */ jsx13(KText, { style: { ...typeStyle("caption"), marginTop: tokens9.card.subtitleGap, color: colors[paint.description] }, children: subtitle })
+        !!title && /* @__PURE__ */ jsx13(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle"), color: foreground }, children: title }),
+        !!subtitle && /* @__PURE__ */ jsx13(KText, { style: { ...typeStyle("caption"), marginTop: tokens9.card.subtitleGap, color: colors[paint.description] }, children: subtitle })
       ] }) }),
       hasContent(headerActions) && /* @__PURE__ */ jsx13(CardActionsContext.Provider, { value: true, children: /* @__PURE__ */ jsx13(View9, { style: { flexDirection: "row", flexWrap: "wrap", minWidth: 0, maxWidth: "100%", marginStart: "auto", alignItems: "center", justifyContent: "flex-end", gap: tokens9.card.titleGap }, children: content(headerActions, { color: foreground }) }) })
     ] }),
@@ -2014,9 +2013,9 @@ function KjunEmpty({
         paddingVertical: stateContent === "empty" ? 0 : tokens10.dimension.value32
       },
       children: [
-        icon && /* @__PURE__ */ jsx14(View10, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ jsx14(KjunIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
+        !!icon && /* @__PURE__ */ jsx14(View10, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ jsx14(KjunIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
         /* @__PURE__ */ jsx14(KText, { style: { ...typeStyle("cardTitle"), color: colors.text, fontSize: spec.titleSize, lineHeight: spec.titleLineHeight, textAlign: "center", maxWidth: spec.textMaxWidth }, children: text }),
-        description && /* @__PURE__ */ jsx14(
+        !!description && /* @__PURE__ */ jsx14(
           KText,
           {
             style: {
@@ -2031,7 +2030,7 @@ function KjunEmpty({
             children: description
           }
         ),
-        children && /* @__PURE__ */ jsx14(View10, { style: { marginTop: spec.actionGap, maxWidth: "100%" }, children: content(children) })
+        hasContent(children) && /* @__PURE__ */ jsx14(View10, { style: { marginTop: spec.actionGap, maxWidth: "100%" }, children: content(children) })
       ]
     }
   );
@@ -2109,7 +2108,7 @@ function KjunSpinner({ size = "md", text }) {
             )
           }
         ),
-        text && /* @__PURE__ */ jsx14(KText, { style: { marginLeft: tokens10.dimension.value8, color: colors.textSecondary }, children: text })
+        !!text && /* @__PURE__ */ jsx14(KText, { style: { marginLeft: tokens10.dimension.value8, color: colors.textSecondary }, children: text })
       ]
     }
   );
@@ -2170,7 +2169,7 @@ function KjunAlert({
             ...typeStyle(small ? "caption" : "body"),
             color: colors.textSecondary
           }) }),
-          hasContent(actions) && /* @__PURE__ */ jsx14(ActionSizeContext.Provider, { value: alertActionSizes[small ? "sm" : "md"], children: /* @__PURE__ */ jsx14(AlertActionsContext.Provider, { value: true, children: /* @__PURE__ */ jsx14(View10, { style: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: geometry2.actionsGap, marginTop: geometry2[small ? "sm" : "md"].actionGap }, children: actions }) }) })
+          hasContent(actions) && /* @__PURE__ */ jsx14(ActionSizeContext.Provider, { value: alertActionSizes[small ? "sm" : "md"], children: /* @__PURE__ */ jsx14(AlertActionsContext.Provider, { value: true, children: /* @__PURE__ */ jsx14(View10, { style: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: geometry2.actionsGap, marginTop: geometry2[small ? "sm" : "md"].actionGap }, children: content(actions) }) }) })
         ] }),
         closable && /* @__PURE__ */ jsx14(
           AccessiblePressable,
@@ -2220,7 +2219,7 @@ function KjunProgress({
   const { colors } = useKjunStyles();
   const percentage = Number.isFinite(value) && max > 0 ? Math.min(100, Math.max(0, Math.round(value / max * 100))) : 0;
   return /* @__PURE__ */ jsxs7(View10, { children: [
-    (label || showLabel) && /* @__PURE__ */ jsxs7(
+    !!(label || showLabel) && /* @__PURE__ */ jsxs7(
       View10,
       {
         style: {
@@ -2638,7 +2637,7 @@ function ToastView({
           children: [
             /* @__PURE__ */ jsx16(KjunIcon, { name: icon, color: colors[`${tone}Accent`] }),
             /* @__PURE__ */ jsxs9(View12, { style: { flex: 1, minWidth: 0 }, children: [
-              toast.title && /* @__PURE__ */ jsx16(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: tokens13.extensions.toast.titleGap }, children: toast.title }),
+              !!toast.title && /* @__PURE__ */ jsx16(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: tokens13.extensions.toast.titleGap }, children: toast.title }),
               /* @__PURE__ */ jsx16(KText, { style: { color: colors.textSecondary }, children: toast.message }),
               toast.action && /* @__PURE__ */ jsx16(
                 AccessiblePressable,
@@ -2892,7 +2891,7 @@ function FeedbackDialog({
       onConfirm: submit,
       confirmVariant: options.type === "danger" ? "danger" : "primary",
       children: [
-        options.message && /* @__PURE__ */ jsx18(KText, { style: { marginBottom: tokens16.dimension.value16 }, children: options.message }),
+        !!options.message && /* @__PURE__ */ jsx18(KText, { style: { marginBottom: tokens16.dimension.value16 }, children: options.message }),
         request.kind === "prompt" && /* @__PURE__ */ jsx18(
           KjunInput,
           {
@@ -2909,7 +2908,7 @@ function FeedbackDialog({
     }
   );
 }
-function KjunFeedbackProvider({ children }) {
+function KjunFeedbackProvider({ children, style }) {
   const [controller] = useState13(createFeedbackController);
   const life = useRef13(0);
   const snapshot = useSyncExternalStore2(
@@ -2939,7 +2938,7 @@ function KjunFeedbackProvider({ children }) {
     {
       value: { top: layers[layers.length - 1], register, render: renderToasts },
       children: /* @__PURE__ */ jsxs10(KjunFeedbackContext.Provider, { value: controller.api, children: [
-        /* @__PURE__ */ jsxs10(View14, { style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsxs10(View14, { style: [{ position: "relative", flexGrow: 1, flexShrink: 1, alignSelf: "stretch" }, style], children: [
           children,
           layers.length === 0 && renderToasts()
         ] }),
@@ -3029,7 +3028,7 @@ function KjunCheckbox({
             )
           }
         ),
-        (children || label) && content(children || label, {
+        !!(children || label) && content(children || label, {
           marginLeft: tokens17.extensions.checkbox.labelGap,
           ...typeStyle("label")
         })
@@ -3140,7 +3139,7 @@ function KjunSwitch({
             ]
           }
         ),
-        (children || label) && content(children || label, {
+        !!(children || label) && content(children || label, {
           marginLeft: tokens17.extensions.switch.labelGap,
           ...typeStyle("label")
         })
@@ -3217,7 +3216,7 @@ function KjunRadio({
             )
           }
         ),
-        (children || label) && content(children || label, {
+        !!(children || label) && content(children || label, {
           marginLeft: geometry2.labelGap,
           ...typeStyle("label")
         })
@@ -3465,7 +3464,7 @@ function KjunButtonGroup({
                     opacity: blocked ? tokens19.states.opacity.disabled : 1
                   }),
                   children: [
-                    option.icon && /* @__PURE__ */ jsx21(
+                    !!option.icon && /* @__PURE__ */ jsx21(
                       KjunIcon,
                       {
                         name: option.icon,
@@ -3562,7 +3561,7 @@ function KjunFilterGroup({
                       }
                     }
                   ),
-                  option.icon && /* @__PURE__ */ jsx21(
+                  !!option.icon && /* @__PURE__ */ jsx21(
                     KjunIcon,
                     {
                       name: option.icon,
@@ -3695,8 +3694,32 @@ var KjunTextarea = forwardRef3(
 
 // packages/native/src/drawer.tsx
 import { tokens as tokens21 } from "@kjun-ui/tokens";
-import { useState as useState16 } from "react";
-import { Animated as Animated12 } from "react-native";
+import { useEffect as useEffect11, useState as useState16 } from "react";
+import { Animated as Animated12, Keyboard } from "react-native";
+
+// shared/package-runtime/drawer-geometry.ts
+function keyboardEvents(os) {
+  return os === "ios" ? { show: "keyboardWillShow", hide: "keyboardWillHide" } : null;
+}
+function keyboardOverlap(windowHeight, keyboardScreenY) {
+  return Math.max(0, windowHeight - keyboardScreenY);
+}
+function drawerFrame({ position, windowHeight, safeAreaTop, safeAreaBottom, gap, keyboard, maxHeight }) {
+  const visible = windowHeight - keyboard;
+  const bottomInset = keyboard > 0 ? 0 : safeAreaBottom;
+  if (position === "left" || position === "right")
+    return { maxHeight: visible, height: visible, paddingTop: safeAreaTop, paddingBottom: bottomInset, lift: 0 };
+  const sheet = maxHeight != null ? maxHeight : visible - (position === "bottom" ? safeAreaTop : bottomInset) - gap;
+  return {
+    maxHeight: Math.max(0, Math.min(sheet, visible)),
+    height: void 0,
+    paddingTop: position === "top" ? safeAreaTop : 0,
+    paddingBottom: position === "bottom" ? bottomInset : 0,
+    lift: position === "bottom" ? keyboard : 0
+  };
+}
+
+// packages/native/src/drawer.tsx
 import {
   Platform as Platform14,
   ScrollView as ScrollView3,
@@ -3704,6 +3727,24 @@ import {
   useWindowDimensions as useWindowDimensions3
 } from "react-native";
 import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+function useKeyboardOverlap(enabled2, windowHeight) {
+  const [overlap, setOverlap] = useState16(0);
+  useEffect11(() => {
+    var _a, _b;
+    setOverlap(0);
+    const events = keyboardEvents(Platform14.OS);
+    if (!enabled2 || !events) return;
+    const metrics = (_b = (_a = Keyboard).metrics) == null ? void 0 : _b.call(_a);
+    if (metrics) setOverlap(keyboardOverlap(windowHeight, metrics.screenY));
+    const show = Keyboard.addListener(events.show, (event) => setOverlap(keyboardOverlap(windowHeight, event.endCoordinates.screenY)));
+    const hide = Keyboard.addListener(events.hide, () => setOverlap(0));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, [enabled2, windowHeight]);
+  return overlap;
+}
 function KjunDrawer({
   open,
   onOpenChange,
@@ -3718,9 +3759,24 @@ function KjunDrawer({
   footer,
   children,
   onClose,
-  ariaLabel
+  ariaLabel,
+  safeAreaTop = 0,
+  safeAreaBottom = 0,
+  maxHeight,
+  avoidKeyboard = true
 }) {
   const { colors } = useKjunStyles(), window2 = useWindowDimensions3(), vertical = position === "left" || position === "right";
+  const [rootHeight, setRootHeight] = useState16(0);
+  const keyboard = useKeyboardOverlap(open && avoidKeyboard, window2.height);
+  const frame = drawerFrame({
+    position,
+    windowHeight: rootHeight || window2.height,
+    safeAreaTop: Math.max(0, safeAreaTop),
+    safeAreaBottom: Math.max(0, safeAreaBottom),
+    gap: tokens21.extensions.drawer.sheetGap,
+    keyboard,
+    maxHeight
+  });
   const [panelHeight, setPanelHeight] = useState16(0);
   const motion = useNativePresence(open, tokens21.motion.layerEnter, tokens21.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
   const backdrop = useNativePresence(open, tokens21.motion.backdrop, tokens21.motion.backdropExit, true, 0, { fade: tokens21.motion.backdropExit });
@@ -3744,6 +3800,7 @@ function KjunDrawer({
       children: /* @__PURE__ */ jsxs14(
         View18,
         {
+          onLayout: (event) => setRootHeight(event.nativeEvent.layout.height),
           style: {
             flex: 1,
             justifyContent: position === "bottom" ? "flex-end" : "flex-start",
@@ -3782,8 +3839,11 @@ function KjunDrawer({
                   opacity: vertical || panelHeight > 0 ? 1 : 0,
                   transform: vertical ? [{ translateX: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [(position === "left" ? -1 : 1) * Math.min(width, window2.width), 0] }) }] : [{ translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [(position === "top" ? -1 : 1) * panelHeight, 0] }) }],
                   width: vertical ? Math.min(width, window2.width) : window2.width,
-                  height: vertical ? window2.height : void 0,
-                  maxHeight: window2.height,
+                  height: frame.height,
+                  maxHeight: frame.maxHeight,
+                  paddingTop: frame.paddingTop,
+                  paddingBottom: frame.paddingBottom,
+                  marginBottom: frame.lift,
                   borderRadius: tokens21.extensions.drawer.radius,
                   borderTopLeftRadius: position === "bottom" ? tokens21.extensions.drawer.bottomRadius : tokens21.extensions.drawer.radius,
                   borderTopRightRadius: position === "bottom" ? tokens21.extensions.drawer.bottomRadius : tokens21.extensions.drawer.radius,
@@ -3791,7 +3851,7 @@ function KjunDrawer({
                   backgroundColor: colors.surface
                 },
                 children: [
-                  (title || header || closable) && /* @__PURE__ */ jsxs14(
+                  !!(title || header || closable) && /* @__PURE__ */ jsxs14(
                     View18,
                     {
                       style: {
@@ -3804,7 +3864,7 @@ function KjunDrawer({
                         borderBottomColor: colors.border
                       },
                       children: [
-                        /* @__PURE__ */ jsx23(View18, { style: { flex: 1 }, children: header || /* @__PURE__ */ jsx23(
+                        /* @__PURE__ */ jsx23(View18, { style: { flex: 1 }, children: hasContent(header) ? content(header) : /* @__PURE__ */ jsx23(
                           KText,
                           {
                             style: { ...typeStyle("sectionTitle") },
@@ -3829,12 +3889,12 @@ function KjunDrawer({
                     ScrollView3,
                     {
                       keyboardShouldPersistTaps: "handled",
-                      style: vertical ? { flex: 1 } : { flexGrow: 0 },
+                      style: vertical ? { flex: 1 } : { flexGrow: 0, flexShrink: 1 },
                       contentContainerStyle: { padding: noPadding ? 0 : tokens21.extensions.drawer.bodyPadding },
                       children: content(children)
                     }
                   ),
-                  footer && /* @__PURE__ */ jsx23(
+                  hasContent(footer) && /* @__PURE__ */ jsx23(
                     View18,
                     {
                       style: {
@@ -3864,7 +3924,7 @@ import {
   createContext as createContext15,
   isValidElement as isValidElement5,
   useContext as useContext11,
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useRef as useRef19,
   useState as useState19
 } from "react";
@@ -3878,7 +3938,7 @@ import { tokens as tokens22 } from "@kjun-ui/tokens";
 import {
   cloneElement as cloneElement2,
   isValidElement as isValidElement3,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect11,
   useRef as useRef17,
   useState as useState17
@@ -3960,14 +4020,14 @@ function FloatingPanel({
       setAnchored(false);
     }
   }, [motion.present]);
-  useEffect11(() => {
+  useEffect12(() => {
     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 ? tokens22.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]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open || !anchored || !sized || !focusOnOpen || !panelRef.current) return;
     if (Platform15.OS === "web") {
       const node = panelRef.current;
@@ -4118,7 +4178,7 @@ function FloatingPanel({
                         borderBottomWidth: tokens22.border.defaultWidth,
                         borderBottomColor: colors.divider
                       },
-                      children: header
+                      children: content(header, typeStyle("cardTitle"))
                     }
                   ),
                   /* @__PURE__ */ jsx24(
@@ -4155,7 +4215,7 @@ function FloatingPanel({
 import {
   cloneElement as cloneElement3,
   isValidElement as isValidElement4,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useRef as useRef18,
   useState as useState18
 } from "react";
@@ -4248,11 +4308,11 @@ function KjunTooltip({
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setOpen(true), delay);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     if (!scopeActive) hide();
   }, [scopeActive]);
-  useEffect12(() => () => clearTimeout(timer.current), []);
-  useEffect12(() => {
+  useEffect13(() => () => clearTimeout(timer.current), []);
+  useEffect13(() => {
     if (Platform16.OS !== "web" || !open) return;
     const escape = (event) => {
       if (event.key === "Escape") hide();
@@ -4368,7 +4428,7 @@ function KjunDropdown({
     if (v) onOpen == null ? void 0 : onOpen();
     else onClose == null ? void 0 : onClose();
   };
-  useEffect13(() => {
+  useEffect14(() => {
     if (unavailable) change(false);
   }, [unavailable]);
   return /* @__PURE__ */ jsxs17(DropdownContext.Provider, { value: () => change(false), children: [
@@ -4503,7 +4563,7 @@ function KjunMenuButton({
 }
 
 // shared/package-runtime/combobox.ts
-import { useEffect as useEffect14, useState as useState20 } from "react";
+import { useEffect as useEffect15, useState as useState20 } from "react";
 
 // shared/package-runtime/options.ts
 var optionValue = (option, key = "value") => typeof option === "object" ? option[key] : option;
@@ -4582,8 +4642,8 @@ function useComboboxModel({
   const selectedLabel = selected !== void 0 ? optionLabel(selected, labelKey) : "";
   const [query, setQuery] = useState20(selectedLabel);
   const [open, setOpen] = useState20(false);
-  useEffect14(() => setQuery(selectedLabel), [value, selectedLabel]);
-  useEffect14(() => {
+  useEffect15(() => setQuery(selectedLabel), [value, selectedLabel]);
+  useEffect15(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const change = (next) => {
@@ -5040,7 +5100,7 @@ function KjunDatePicker({
 import { useState as useState23 } from "react";
 
 // shared/package-runtime/search-input.ts
-import { useEffect as useEffect15, useLayoutEffect as useLayoutEffect12, useRef as useRef22, useState as useState22 } from "react";
+import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect12, useRef as useRef22, useState as useState22 } from "react";
 function useSearchInputModel({
   value,
   disabled = false,
@@ -5063,7 +5123,7 @@ function useSearchInputModel({
     clearTimeout(timer.current);
     return () => clearTimeout(timer.current);
   }, [disabled, debounce, !!loadOptions]);
-  useEffect15(() => {
+  useEffect16(() => {
     const current = ++version.current, abort = new AbortController();
     setFailed(false);
     if (!loadOptions || !open || disabled || query.length < minChars) {
@@ -5212,7 +5272,7 @@ function KjunSearchInput({
 
 // packages/native/src/select-control.tsx
 import { tokens as tokens29 } from "@kjun-ui/tokens";
-import { useContext as useContext12, useEffect as useEffect17, useRef as useRef24 } from "react";
+import { useContext as useContext12, useEffect as useEffect18, useRef as useRef24 } from "react";
 
 // packages/native/src/compound-control.tsx
 import { createContext as createContext16 } from "react";
@@ -5226,7 +5286,7 @@ function CompoundTarget({ children, square = false }) {
 }
 
 // shared/package-runtime/select.ts
-import { useEffect as useEffect16, useRef as useRef23, useState as useState24 } from "react";
+import { useEffect as useEffect17, useRef as useRef23, useState as useState24 } from "react";
 function useSelectState(controlled, disabled, pageSize, onOpenChange) {
   const [internal, setInternal] = useState24(false);
   const [query, setQuery] = useState24("");
@@ -5235,7 +5295,7 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
   const isControlled = typeof controlled === "boolean";
   const open = !disabled && (isControlled ? controlled : internal);
   const previousOpen = useRef23(open);
-  useEffect16(() => {
+  useEffect17(() => {
     if (disabled && !isControlled) setInternal(false);
     if (previousOpen.current && !open) {
       setQuery("");
@@ -5244,7 +5304,7 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
     }
     previousOpen.current = open;
   }, [open, disabled, isControlled, pageSize]);
-  useEffect16(() => {
+  useEffect17(() => {
     setLimit(pageSize);
   }, [pageSize]);
   const changeOpen = (next) => {
@@ -5294,7 +5354,7 @@ function KjunSelect({
   const { colors } = useKjunStyles(), field = useKjunField(), ref = useRef24(null), spec = tokens29.input[size];
   const trigger = useRef24(null);
   const compound = useContext12(CompoundControlContext);
-  useEffect17(() => {
+  useEffect18(() => {
     if (compound == null ? void 0 : compound.focusRef) compound.focusRef.current = trigger.current;
   }, [compound == null ? void 0 : compound.focusRef]);
   const expanded = usePopupExpanded(open, ref);
@@ -5545,10 +5605,10 @@ function Collapse({ open, children }) {
 }
 
 // shared/package-runtime/navigation.ts
-import { useEffect as useEffect18, useRef as useRef26, useState as useState26 } from "react";
+import { useEffect as useEffect19, useRef as useRef26, useState as useState26 } from "react";
 function useInitialTab(value, candidate, change) {
   const requested = useRef26(/* @__PURE__ */ new Set());
-  useEffect18(() => {
+  useEffect19(() => {
     if (value !== "") {
       requested.current.clear();
       return;
@@ -5560,7 +5620,7 @@ function useInitialTab(value, candidate, change) {
 }
 function useAccordionState(multiple) {
   const [opened, setOpened] = useState26(/* @__PURE__ */ new Set());
-  useEffect18(() => {
+  useEffect19(() => {
     if (!multiple) setOpened((previous) => previous.size > 1 ? new Set([...previous].slice(-1)) : previous);
   }, [multiple]);
   return {
@@ -5588,7 +5648,7 @@ import {
   Fragment as Fragment11,
   createContext as createContext18,
   useContext as useContext14,
-  useEffect as useEffect19,
+  useEffect as useEffect20,
   useId as useId7,
   useState as useState28
 } from "react";
@@ -5855,7 +5915,7 @@ function KjunTabs({
                   opacity: tab.disabled ? tokens31.states.opacity.disabled : 1
                 },
                 children: [
-                  tab.icon && /* @__PURE__ */ jsx34(
+                  !!tab.icon && /* @__PURE__ */ jsx34(
                     KjunIcon,
                     {
                       name: tab.icon,
@@ -5900,11 +5960,11 @@ function KjunTabs({
               tab.name
             );
           }),
-          actions
+          content(actions)
         ]
       }
     ),
-    children && /* @__PURE__ */ jsx34(View28, { style: { marginTop: geometry2.contentGap }, children })
+    hasContent(children) && /* @__PURE__ */ jsx34(View28, { style: { marginTop: geometry2.contentGap }, children: content(children) })
   ] }) });
 }
 function KjunTabPane({ name, children }) {
@@ -5969,7 +6029,7 @@ function KjunAccordionItem({
   const geometry2 = tokens32.extensions.accordion;
   const [hovered, setHovered] = useState28(false);
   const wrapping = Platform21.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
-  useEffect19(() => {
+  useEffect20(() => {
     return group == null ? void 0 : group.register(id, defaultOpen);
   }, []);
   return /* @__PURE__ */ jsxs23(View29, { children: [
@@ -6032,7 +6092,7 @@ function KjunBreadcrumb({
       },
       children: items.map((item, i) => {
         const label = /* @__PURE__ */ jsxs23(View29, { style: { flexDirection: "row", alignItems: "center", gap: tokens32.dimension.value4 }, children: [
-          item.icon && /* @__PURE__ */ jsx35(KjunIcon, { name: item.icon, size: tokens32.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
+          !!item.icon && /* @__PURE__ */ jsx35(KjunIcon, { name: item.icon, size: tokens32.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
           /* @__PURE__ */ jsx35(
             KText,
             {
@@ -6205,7 +6265,7 @@ function KjunPagination({
 
 // packages/native/src/actions.tsx
 import { tokens as tokens33 } from "@kjun-ui/tokens";
-import { useContext as useContext15, useEffect as useEffect20, useRef as useRef29, useState as useState29 } from "react";
+import { useContext as useContext15, useEffect as useEffect21, useRef as useRef29, useState as useState29 } from "react";
 import { Platform as Platform22, ScrollView as ScrollView7, View as View30 } from "react-native";
 import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
 function KjunIconToggle({
@@ -6289,7 +6349,7 @@ function KjunCopyButton({
   onCopyError
 }) {
   const feedback = useOptionalKjunFeedback(), { colors } = useKjunStyles(), [copied, setCopied] = useState29(false), [failed, setFailed] = useState29(false), busy = useRef29(false), timer = useRef29(void 0), mounted = useRef29(true);
-  useEffect20(() => {
+  useEffect21(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -6348,7 +6408,7 @@ function KjunCopyButton({
             color: copied ? colors.success : colors.textSecondary
           }
         ),
-        text && !inline && /* @__PURE__ */ jsx36(
+        !!text && !inline && /* @__PURE__ */ jsx36(
           KText,
           {
             style: {
@@ -6450,10 +6510,10 @@ import { Component, useState as useState31 } from "react";
 import { Platform as Platform23, View as View31 } from "react-native";
 
 // shared/package-runtime/use-loading-reveal.ts
-import { useEffect as useEffect21, useState as useState30 } from "react";
+import { useEffect as useEffect22, useState as useState30 } from "react";
 function useLoadingReveal(active, delay = 0) {
   const [revealed, setRevealed] = useState30(false);
-  useEffect21(() => {
+  useEffect22(() => {
     setRevealed(false);
     if (!active || delay <= 0) return;
     const timer = setTimeout(() => setRevealed(true), delay);
@@ -6541,7 +6601,7 @@ function KjunDataState({
               /* @__PURE__ */ jsx37(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
             ] }))
           }
-        ) : blockingError ? /* @__PURE__ */ jsx37(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx37(View31, { style: { paddingVertical: padding }, children: errorContent || /* @__PURE__ */ jsx37(KjunAlert, { type: "danger", title: "\uC624\uB958 \uBC1C\uC0DD", actions: onRetry && /* @__PURE__ */ jsx37(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: query.error }) }) }) : empty ? /* @__PURE__ */ jsx37(DataStateContentContext.Provider, { value: "empty", children: /* @__PURE__ */ jsx37(View31, { style: { paddingVertical: padding }, children: emptyContent || /* @__PURE__ */ jsx37(KjunEmpty, { text: emptyText, icon: emptyIcon, children: emptyActionText && /* @__PURE__ */ jsx37(KjunButton, { onPress: onEmptyAction, children: emptyActionText }) }) }) }) : null,
+        ) : blockingError ? /* @__PURE__ */ jsx37(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx37(View31, { style: { paddingVertical: padding }, children: errorContent || /* @__PURE__ */ jsx37(KjunAlert, { type: "danger", title: "\uC624\uB958 \uBC1C\uC0DD", actions: onRetry && /* @__PURE__ */ jsx37(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: query.error }) }) }) : empty ? /* @__PURE__ */ jsx37(DataStateContentContext.Provider, { value: "empty", children: /* @__PURE__ */ jsx37(View31, { style: { paddingVertical: padding }, children: emptyContent || /* @__PURE__ */ jsx37(KjunEmpty, { text: emptyText, icon: emptyIcon, children: !!emptyActionText && /* @__PURE__ */ jsx37(KjunButton, { onPress: onEmptyAction, children: emptyActionText }) }) }) }) : null,
         (!concealed || preserveContent && state.hasQueryResult) && /* @__PURE__ */ jsx37(
           View31,
           {
@@ -6616,7 +6676,7 @@ var KjunErrorBoundary = class extends Component {
 
 // packages/native/src/skeletons.tsx
 import { tokens as tokens38 } from "@kjun-ui/tokens";
-import { useEffect as useEffect22, useRef as useRef30, useState as useState33 } from "react";
+import { useEffect as useEffect23, useRef as useRef30, useState as useState33 } from "react";
 import { Animated as Animated17, Platform as Platform24, View as View33, useWindowDimensions as useWindowDimensions6 } from "react-native";
 import Svg5, { Path as Path4 } from "react-native-svg";
 
@@ -6806,7 +6866,7 @@ function KjunChartSkeleton({
   columns = 14
 }) {
   const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef30(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens38.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
-  useEffect22(() => {
+  useEffect23(() => {
     if (reduced || !skeleton) return;
     const loop = Animated17.loop(
       Animated17.sequence([
@@ -7026,12 +7086,12 @@ function KjunAnimatedNumber({
         style
       ],
       children: [
-        prefix && /* @__PURE__ */ jsxs28(Text5, { style: typeStyle("caption"), children: [
+        !!prefix && /* @__PURE__ */ jsxs28(Text5, { style: typeStyle("caption"), children: [
           prefix,
           " "
         ] }),
         typeof n === "string" ? n : formatter ? formatter(n) : format(n, decimals),
-        suffix && /* @__PURE__ */ jsxs28(Text5, { style: typeStyle("caption"), children: [
+        !!suffix && /* @__PURE__ */ jsxs28(Text5, { style: typeStyle("caption"), children: [
           " ",
           suffix
         ] })
@@ -7437,7 +7497,7 @@ function KjunSparkline({
 
 // shared/package-runtime/table.ts
 import { nextTableSort } from "@kjun-ui/tokens";
-import { useEffect as useEffect24, useRef as useRef33, useState as useState36 } from "react";
+import { useEffect as useEffect25, useRef as useRef33, useState as useState36 } from "react";
 
 // shared/package-runtime/table-model.ts
 function getValue(row, key) {
@@ -7485,7 +7545,7 @@ function useTableModel(props) {
     key: "",
     order: "asc"
   }), [internalExpanded, setExpanded] = useState36([]), [search, setSearch] = useState36(""), timer = useRef33(void 0);
-  useEffect24(() => () => clearTimeout(timer.current), []);
+  useEffect25(() => () => 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);
@@ -7919,7 +7979,7 @@ function TableCards({
                         },
                         children: [
                           selectable && checkbox(row, i),
-                          title && /* @__PURE__ */ jsx44(View38, { style: { flex: 1, minWidth: 0 }, children: cell(title, row, i, "title") })
+                          !!title && /* @__PURE__ */ jsx44(View38, { style: { flex: 1, minWidth: 0 }, children: cell(title, row, i, "title") })
                         ]
                       }
                     ),
@@ -7940,7 +8000,7 @@ function TableCards({
                       marginTop: index ? tokens44.dimension.value12 : 0
                     },
                     children: [
-                      section.label && /* @__PURE__ */ jsx44(
+                      !!section.label && /* @__PURE__ */ jsx44(
                         KText,
                         {
                           style: {
@@ -8005,7 +8065,7 @@ function TableCards({
                   children: content(renderExpand == null ? void 0 : renderExpand(row, i))
                 }
               ),
-              actions && !actions.inlineInCard && /* @__PURE__ */ jsx44(
+              !!actions && !actions.inlineInCard && /* @__PURE__ */ jsx44(
                 View38,
                 {
                   style: {
@@ -8297,7 +8357,7 @@ function KjunKpiHero(props) {
                     children: loading ? /* @__PURE__ */ jsx47(KjunSkeleton, { type: "block", height: typeStyle("numberMd").lineHeight, width: geometry2.deltaSkeletonWidth }) : /* @__PURE__ */ jsxs35(Fragment16, { children: [
                       deltaAbsolute !== null && delta(deltaAbsolute, "absolute", { ...numeric, color: direction(deltaAbsolute), ...typeStyle("numberMd") }),
                       deltaPercent !== null && delta(deltaPercent, "percent", { ...numeric, color: direction(deltaPercent), ...typeStyle("numberMd"), opacity: 0.9 }),
-                      deltaDescription && /* @__PURE__ */ jsx47(
+                      !!deltaDescription && /* @__PURE__ */ jsx47(
                         KText,
                         {
                           style: {
@@ -8311,7 +8371,7 @@ function KjunKpiHero(props) {
                   }
                 )
               ] }),
-              aside && !mobile && /* @__PURE__ */ jsx47(View41, { children: aside })
+              hasContent(aside) && !mobile && /* @__PURE__ */ jsx47(View41, { children: content(aside) })
             ]
           }
         ),
@@ -8373,7 +8433,7 @@ function KjunKpiHero(props) {
                         children: kpiFormat(item)
                       }
                     ),
-                    item.desc && (loading ? /* @__PURE__ */ jsx47(
+                    !!item.desc && (loading ? /* @__PURE__ */ jsx47(
                       KjunSkeleton,
                       {
                         type: "block",
@@ -8584,7 +8644,7 @@ function KjunKpiRow({
                       {
                         style: [valueStyle, { flexShrink: 1, minWidth: 0 }],
                         children: [
-                          item.prefix && /* @__PURE__ */ jsx48(
+                          !!item.prefix && /* @__PURE__ */ jsx48(
                             Text6,
                             {
                               style: {
@@ -8602,7 +8662,7 @@ function KjunKpiRow({
                               style: [valueStyle, { flexShrink: 1, minWidth: 0 }]
                             }
                           ) : kpiFormat(item),
-                          item.suffix && /* @__PURE__ */ jsx48(
+                          !!item.suffix && /* @__PURE__ */ jsx48(
                             Text6,
                             {
                               style: {
@@ -8618,7 +8678,7 @@ function KjunKpiRow({
                   ]
                 }
               ),
-              item.desc && (busy ? /* @__PURE__ */ jsx48(KjunSkeleton, { type: "block", height: typeStyle("caption").lineHeight, width: geometry2.descriptionSkeletonWidth }) : /* @__PURE__ */ jsx48(
+              !!item.desc && (busy ? /* @__PURE__ */ jsx48(KjunSkeleton, { type: "block", height: typeStyle("caption").lineHeight, width: geometry2.descriptionSkeletonWidth }) : /* @__PURE__ */ jsx48(
                 KText,
                 {
                   style: {
@@ -8643,7 +8703,7 @@ import { tokens as tokens49 } from "@kjun-ui/tokens";
 import { ScrollView as ScrollView10, View as View44 } from "react-native";
 
 // shared/package-runtime/market-cards.ts
-import { useEffect as useEffect25, useRef as useRef34, useState as useState39 } from "react";
+import { useEffect as useEffect26, useRef as useRef34, useState as useState39 } from "react";
 function useMarketCardsModel(props, persistence) {
   const {
     columns,
@@ -8668,7 +8728,7 @@ function useMarketCardsModel(props, persistence) {
     } catch (e) {
     }
   };
-  useEffect25(() => {
+  useEffect26(() => {
     var _a, _b;
     if (mounted.current === restoreSignature) return;
     mounted.current = restoreSignature;
@@ -9464,26 +9524,26 @@ var LastListRow = createContext20(false);
 function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, onPress }) {
   const { colors } = useKjunStyles(), last = useContext17(LastListRow);
   const parts = /* @__PURE__ */ jsxs42(Fragment19, { children: [
-    leading && /* @__PURE__ */ jsx54(View48, { children: content(leading) }),
+    hasContent(leading) && /* @__PURE__ */ jsx54(View48, { children: content(leading) }),
     /* @__PURE__ */ jsxs42(View48, { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ jsx54(KText, { style: { ...typeStyle("label") }, children: title }),
-      description && /* @__PURE__ */ jsx54(KText, { style: { marginTop: tokens53.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      !!description && /* @__PURE__ */ jsx54(KText, { style: { marginTop: tokens53.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
     ] }),
-    trailing && /* @__PURE__ */ jsx54(View48, { style: { maxWidth: "35%" }, children: content(trailing) })
+    hasContent(trailing) && /* @__PURE__ */ jsx54(View48, { style: { maxWidth: "35%" }, children: content(trailing) })
   ] });
   const style = { flex: 1, minWidth: 0, minHeight: tokens53.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: tokens53.extensions.list.gap, padding: tokens53.extensions.list.padding };
   return /* @__PURE__ */ jsxs42(View48, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: tokens53.extensions.list.gap, borderBottomWidth: last ? 0 : tokens53.border.defaultWidth, borderBottomColor: colors.divider }, children: [
     onPress || href ? /* @__PURE__ */ jsx54(AccessiblePressable, { ...Platform25.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? tokens53.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx54(View48, { style, children: parts }),
-    actions && /* @__PURE__ */ jsx54(View48, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform25.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens53.extensions.list.actionsGap, paddingRight: tokens53.extensions.list.actionsPadding, opacity: disabled ? tokens53.states.opacity.disabled : 1 }, children: content(actions) })
+    hasContent(actions) && /* @__PURE__ */ jsx54(View48, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform25.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens53.extensions.list.actionsGap, paddingRight: tokens53.extensions.list.actionsPadding, opacity: disabled ? tokens53.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
 function KjunListSection({ title, description, actions, children, ariaLabel }) {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ jsxs42(View48, { style: { minWidth: 0, backgroundColor: colors.surface }, children: [
-    (title || description || actions) && /* @__PURE__ */ jsxs42(View48, { style: { flexDirection: "row", alignItems: "center", gap: tokens53.extensions.list.gap, padding: tokens53.extensions.list.padding }, children: [
+    !!(title || description || actions) && /* @__PURE__ */ jsxs42(View48, { style: { flexDirection: "row", alignItems: "center", gap: tokens53.extensions.list.gap, padding: tokens53.extensions.list.padding }, children: [
       /* @__PURE__ */ jsxs42(View48, { style: { flex: 1 }, children: [
-        title && /* @__PURE__ */ jsx54(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
-        description && /* @__PURE__ */ jsx54(KText, { style: { marginTop: tokens53.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+        !!title && /* @__PURE__ */ jsx54(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
+        !!description && /* @__PURE__ */ jsx54(KText, { style: { marginTop: tokens53.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
       ] }),
       content(actions)
     ] }),
@@ -9511,12 +9571,12 @@ function KjunTopNavigation({ title, description, leading, actions, safeAreaTop =
   const flatten = (node) => Children5.toArray(node).flatMap((child) => isValidElement7(child) && child.type === Fragment20 ? flatten(child.props.children) : [child]);
   const actionList = flatten(actions);
   return /* @__PURE__ */ jsx55(TopNavigationContext.Provider, { value: geometry2, children: /* @__PURE__ */ jsx55(View49, { style: { flexShrink: 0, paddingTop: Math.max(0, safeAreaTop), backgroundColor: colors.surface }, children: /* @__PURE__ */ jsxs43(View49, { style: { minHeight: geometry2.minimumHeight, flexDirection: "row", flexWrap: "wrap", alignItems: "flex-start", gap: geometry2.gap, paddingVertical: geometry2.paddingY, paddingHorizontal: geometry2.paddingX }, children: [
-    leading && /* @__PURE__ */ jsx55(TopNavigationContext.Provider, { value: { ...geometry2, slot: "leading" }, children: /* @__PURE__ */ jsx55(View49, { onLayout: square("leading"), style: { minHeight: geometry2.controlSize, minWidth: 0, maxWidth: "40%", flexShrink: 1, justifyContent: "center", marginLeft: iconEdges.leading ? -edgeInset : 0 }, children: content(leading) }) }),
+    hasContent(leading) && /* @__PURE__ */ jsx55(TopNavigationContext.Provider, { value: { ...geometry2, slot: "leading" }, children: /* @__PURE__ */ jsx55(View49, { onLayout: square("leading"), style: { minHeight: geometry2.controlSize, minWidth: 0, maxWidth: "40%", flexShrink: 1, justifyContent: "center", marginLeft: iconEdges.leading ? -edgeInset : 0 }, children: content(leading) }) }),
     /* @__PURE__ */ jsxs43(View49, { style: { flexGrow: 1, flexShrink: 1, flexBasis: geometry2.titleMinimumWidth, minWidth: 0, paddingVertical: titleInset }, children: [
       /* @__PURE__ */ jsx55(KText, { accessibilityRole: "header", style: { ...wrapping, ...typeStyle("sectionTitle"), fontWeight: typeStyle("control").fontWeight }, children: title }),
-      description && /* @__PURE__ */ jsx55(KText, { style: { ...wrapping, marginTop: geometry2.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      !!description && /* @__PURE__ */ jsx55(KText, { style: { ...wrapping, marginTop: geometry2.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
     ] }),
-    actions && /* @__PURE__ */ jsx55(TopNavigationContext.Provider, { value: { ...geometry2, slot: "actions" }, children: /* @__PURE__ */ jsx55(View49, { style: { minHeight: geometry2.controlSize, minWidth: 0, maxWidth: "100%", marginLeft: "auto", flexShrink: 1, flexDirection: "row", flexWrap: "wrap", alignItems: "center", justifyContent: "flex-end", gap: geometry2.actionsGap }, children: actionList.map((action, index) => index < actionList.length - 1 ? content(action) : /* @__PURE__ */ jsx55(View49, { onLayout: square("trailing"), style: { flexShrink: 1, minWidth: 0, maxWidth: "100%", marginRight: iconEdges.trailing ? -edgeInset : 0 }, children: content(action) }, "trailing")) }) })
+    hasContent(actions) && /* @__PURE__ */ jsx55(TopNavigationContext.Provider, { value: { ...geometry2, slot: "actions" }, children: /* @__PURE__ */ jsx55(View49, { style: { minHeight: geometry2.controlSize, minWidth: 0, maxWidth: "100%", marginLeft: "auto", flexShrink: 1, flexDirection: "row", flexWrap: "wrap", alignItems: "center", justifyContent: "flex-end", gap: geometry2.actionsGap }, children: actionList.map((action, index) => index < actionList.length - 1 ? content(action) : /* @__PURE__ */ jsx55(View49, { onLayout: square("trailing"), style: { flexShrink: 1, minWidth: 0, maxWidth: "100%", marginRight: iconEdges.trailing ? -edgeInset : 0 }, children: content(action) }, "trailing")) }) })
   ] }) }) });
 }
 function KjunBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\uC0C9", safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = true, onNavigate }) {
@@ -9566,7 +9626,7 @@ function KjunBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\u
         },
         children: [
           hasIcons && /* @__PURE__ */ jsxs43(View49, { style: { width: geometry2.iconSize, height: geometry2.iconSize, flexShrink: 0 }, children: [
-            item.icon && /* @__PURE__ */ jsx55(KjunIcon, { name: item.icon, size: geometry2.iconSize, color: ink }),
+            !!item.icon && /* @__PURE__ */ jsx55(KjunIcon, { name: item.icon, size: geometry2.iconSize, color: ink }),
             badge
           ] }),
           /* @__PURE__ */ jsxs43(View49, { style: { maxWidth: "100%" }, children: [
@@ -9598,7 +9658,7 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
     flexDirection: wide ? "row" : "column",
     alignItems: wide ? "center" : "stretch"
   }, children: [
-    description && /* @__PURE__ */ jsx55(KText, { style: { ...typeStyle("body"), ...wrapping, color: colors.textSecondary, flex: wide ? 1 : void 0, minWidth: 0 }, children: description }),
+    !!description && /* @__PURE__ */ jsx55(KText, { style: { ...typeStyle("body"), ...wrapping, color: colors.textSecondary, flex: wide ? 1 : void 0, minWidth: 0 }, children: description }),
     /* @__PURE__ */ jsx55(View49, { style: { flexDirection: "row", flexWrap: "wrap", justifyContent: "flex-end", alignItems: "center", gap: geometry2.actionsGap, minWidth: 0, maxWidth: "100%", flexShrink: 1 }, children: content(children) })
   ] }) });
 }
@@ -9636,14 +9696,14 @@ import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
 function KjunChip({ label, icon, removable = false, disabled = false, size = "md", removeLabel, onRemove }) {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ jsxs44(View51, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: tokens56.extensions.chip.gap, minHeight: removable ? tokens56.extensions.chip.nativeRemoveSize : tokens56.extensions.chip[size], paddingVertical: removable ? 0 : tokens56.extensions.chip.paddingY, paddingLeft: tokens56.extensions.chip.paddingX, paddingRight: removable ? 0 : tokens56.extensions.chip.paddingX, borderRadius: tokens56.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? tokens56.states.opacity.disabled : 1 }, children: [
-    icon && /* @__PURE__ */ jsx57(KjunIcon, { name: icon, size: tokens56.extensions.chip.iconSizes[size] }),
+    !!icon && /* @__PURE__ */ jsx57(KjunIcon, { name: icon, size: tokens56.extensions.chip.iconSizes[size] }),
     /* @__PURE__ */ jsx57(KText, { style: { ...typeStyle(tokens56.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
     removable && /* @__PURE__ */ jsx57(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || label + " \uC0AD\uC81C", disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: tokens56.extensions.chip.nativeRemoveSize, height: tokens56.extensions.chip.nativeRemoveSize, borderRadius: tokens56.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx57(KjunIcon, { name: "x", size: tokens56.extensions.chip.removeIconSizes[size] }) })
   ] });
 }
 
 // packages/native/src/range-input.tsx
-import { useEffect as useEffect26, useMemo as useMemo2, useRef as useRef36, useState as useState43 } from "react";
+import { useEffect as useEffect27, useMemo as useMemo2, useRef as useRef36, useState as useState43 } from "react";
 import { PanResponder, Platform as Platform27, Pressable as Pressable3, View as View52 } from "react-native";
 import { tokens as tokens57, createSliderDomain, sliderKey } from "@kjun-ui/tokens";
 import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
@@ -9675,10 +9735,10 @@ function RangeInput({
   latest.current = values;
   const callbacks = useRef36({ onValueChange, onChangeCommit });
   callbacks.current = { onValueChange, onChangeCommit };
-  useEffect26(() => {
+  useEffect27(() => {
     if (!valid) console.warn("KJUN Slider: \uBC94\uC704\xB7step\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (blocked) {
       setDragging(null);
       setHovered(null);
@@ -9764,7 +9824,7 @@ function RangeInput({
               minWidth: 0
             },
             children: [
-              label && /* @__PURE__ */ jsx58(
+              !!label && /* @__PURE__ */ jsx58(
                 KText,
                 {
                   style: {
@@ -9943,7 +10003,7 @@ function KjunRangeSlider(props) {
 }
 
 // packages/native/src/quantity-stepper.tsx
-import { useEffect as useEffect27, useRef as useRef37, useState as useState44 } from "react";
+import { useEffect as useEffect28, useRef as useRef37, useState as useState44 } from "react";
 import { Platform as Platform28, View as View53 } from "react-native";
 import { createNumberDomain, quantityKeyAction, tokens as tokens58 } from "@kjun-ui/tokens";
 
@@ -9969,12 +10029,12 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const inputRef = useRef37(null);
   const composing = useRef37(false), dirty = useRef37(false), accepted = useRef37(value);
   const cancelledEscape = useRef37(false);
-  useEffect27(() => {
+  useEffect28(() => {
     setDraft(String(value));
     accepted.current = value;
     dirty.current = false;
   }, [value, precision, min, max, step]);
-  useEffect27(() => {
+  useEffect28(() => {
     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) => {
@@ -10019,7 +10079,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     dirty.current = true;
     setDraft(text);
   } };
-  useEffect27(() => {
+  useEffect28(() => {
     if (Platform28.OS !== "web") return;
     const input = inputRef.current;
     const keydown = (event) => handlers.current.key(event);
@@ -10091,7 +10151,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
 }
 
 // packages/native/src/time-picker.tsx
-import { Fragment as Fragment21, useEffect as useEffect28, useId as useId11, useMemo as useMemo3, useRef as useRef38, useState as useState45 } from "react";
+import { Fragment as Fragment21, useEffect as useEffect29, useId as useId11, useMemo as useMemo3, useRef as useRef38, useState as useState45 } from "react";
 import { View as View54 } from "react-native";
 import { createTimeDomain, tokens as tokens59 } from "@kjun-ui/tokens";
 import { jsx as jsx60, jsxs as jsxs47 } from "react/jsx-runtime";
@@ -10103,7 +10163,7 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
   const field = useKjunField(), uid = useId11();
   const fieldId = (field == null ? void 0 : field.id) || `kjun-time-${uid}`;
   const domain = useMemo3(() => createTimeDomain({ precision, min, max, minuteStep, secondStep }), [precision, min, max, minuteStep, secondStep]), valid = domain.valid && domain.accepts(value);
-  useEffect28(() => {
+  useEffect29(() => {
     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) => {
@@ -10125,7 +10185,7 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
       change(null);
       (_a = first.current) == null ? void 0 : _a.focus();
     } }) }),
-    (error || !!(field == null ? void 0 : field.error) || focused || opened !== null) && /* @__PURE__ */ jsx60(View54, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? tokens59.border.controlWidth : tokens59.states.focus.width, borderColor: error || (field == null ? void 0 : field.error) ? colors.danger : colors.focusRing } })
+    !!(error || !!(field == null ? void 0 : field.error) || focused || opened !== null) && /* @__PURE__ */ jsx60(View54, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? tokens59.border.controlWidth : tokens59.states.focus.width, borderColor: error || (field == null ? void 0 : field.error) ? colors.danger : colors.focusRing } })
   ] });
 }
 export {