@kjun-ui/native 0.9.0 → 0.11.0

package/dist/index.cjs

@@ -141,9 +141,23 @@ function mergeIcons(parent, own) {
 function withFallbackIcons(registry, fallbacks) {
   return mergeIcons(fallbacks, registry);
 }
+var warnedIcons = /* @__PURE__ */ new Set();
+function developmentMode() {
+  try {
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function warnMissingIcon(name) {
+  if (!developmentMode() || warnedIcons.has(name)) return;
+  warnedIcons.add(name);
+  console.warn(`KJUN Icon: "${name}" \uC544\uC774\uCF58\uC774 \uB4F1\uB85D\uB418\uC9C0 \uC54A\uC544 help-circle\uB85C \uB300\uC2E0\uD569\uB2C8\uB2E4. @kjun-ui/icons/icons/${name}\uB97C import\uD574 KjunProvider\uC758 icons\uC5D0 \uB4F1\uB85D\uD558\uC138\uC694.`);
+}
 function resolveIcon(registry, name, filled = false) {
   var _a;
   const definition = Object.prototype.hasOwnProperty.call(registry, name) ? registry[name] : void 0;
+  if (!definition && name) warnMissingIcon(name);
   const filledNodes = filled && (definition == null ? void 0 : definition.filled);
   return { nodes: filledNodes || (definition == null ? void 0 : definition.outline) || ((_a = registry["help-circle"]) == null ? void 0 : _a.outline) || import_defaults.defaultIcons["help-circle"].outline, filled: !!filledNodes };
 }
@@ -783,6 +797,7 @@ function KjunButton(input) {
     size: declaredSize = "md",
     loading = false,
     block = false,
+    wrap = false,
     disabled = false,
     prefixIcon,
     suffixIcon,
@@ -803,7 +818,7 @@ function KjunButton(input) {
   const formActions = (0, import_react12.useContext)(FormActionsContext);
   const cardActions = (0, import_react12.useContext)(CardActionsContext);
   const stateContent = (0, import_react12.useContext)(DataStateContentContext);
-  const multiline = !!formActions || cardActions || !!stateContent || (navigation == null ? void 0 : navigation.slot) === "actions";
+  const multiline = wrap || !!formActions || cardActions || !!stateContent || (navigation == null ? void 0 : navigation.slot) === "actions";
   const height = Math.max(import_tokens5.tokens.button.heights[size], (_a = navigation == null ? void 0 : navigation.controlSize) != null ? _a : 0);
   const iconSize = (_b = navigation == null ? void 0 : navigation.iconSize) != null ? _b : import_tokens5.tokens.button.iconSizes[size];
   const hasContent2 = children !== void 0 && children !== null && children !== false && children !== "";
@@ -901,7 +916,7 @@ function KjunButton(input) {
             opacity: overlayLoading ? 0 : 1,
             ...multiline || navigation ? { flexShrink: 1, minWidth: 0, textAlign: "center" } : {}
           }, children }),
-          suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.View, { style: { opacity: busy && prefixIcon ? 0 : 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          !!suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.View, { style: { opacity: busy && prefixIcon ? 0 : 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             KjunIcon,
             {
               name: busy && !prefixIcon ? "loader-2" : suffixIcon,
@@ -964,6 +979,16 @@ function FieldClear({ size, disabled, label, onPress }) {
   );
 }
 
+// shared/package-runtime/aria-ids.ts
+function mergeIds(...lists) {
+  const ids = [...new Set(lists.flatMap((list) => (list != null ? list : "").split(/\s+/)).filter(Boolean))];
+  return ids.length ? ids.join(" ") : void 0;
+}
+function joinHints(...parts) {
+  const text = parts.filter(Boolean);
+  return text.length ? text.join(". ") : void 0;
+}
+
 // packages/native/src/field-surface.ts
 var import_react15 = require("react");
 var import_react_native7 = require("react-native");
@@ -1132,6 +1157,7 @@ function KjunFormGroup({
   required = false,
   error = "",
   hint = "",
+  labelHidden = false,
   children,
   style
 }) {
@@ -1141,9 +1167,17 @@ function KjunFormGroup({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     FieldContext.Provider,
     {
-      value: { id: fieldId, label, error, hint, required, describedBy: error ? fieldId + "-error" : hint ? fieldId + "-hint" : void 0 },
+      value: {
+        id: fieldId,
+        label,
+        error,
+        hint,
+        required,
+        labelHidden,
+        describedBy: mergeIds(hint ? fieldId + "-hint" : void 0, error ? fieldId + "-error" : void 0)
+      },
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: [{ minWidth: 0, marginBottom: import_tokens9.tokens.extensions.form.itemGap }, style], children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        !!label && !labelHidden && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           import_react_native8.Text,
           {
             nativeID: fieldId + "-label",
@@ -1160,7 +1194,15 @@ function KjunFormGroup({
           }
         ),
         children,
-        (error || hint) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        !!hint && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_react_native8.Text,
+          {
+            nativeID: fieldId + "-hint",
+            style: { fontFamily, ...typeStyle("caption"), marginTop: import_tokens9.tokens.extensions.form.messageGap, color: c.textSecondary },
+            children: hint
+          }
+        ),
+        !!error && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           import_react_native8.View,
           {
             style: {
@@ -1170,19 +1212,14 @@ function KjunFormGroup({
               marginTop: import_tokens9.tokens.extensions.form.messageGap
             },
             children: [
-              !!error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(KjunIcon, { name: "alert-circle", size: import_tokens9.tokens.extensions.form.messageIconSize, color: c.danger }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(KjunIcon, { name: "alert-circle", size: import_tokens9.tokens.extensions.form.messageIconSize, color: c.danger }),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 import_react_native8.Text,
                 {
-                  nativeID: fieldId + (error ? "-error" : "-hint"),
-                  accessibilityRole: error ? "alert" : void 0,
-                  style: {
-                    fontFamily,
-                    ...typeStyle("caption"),
-                    flexShrink: 1,
-                    color: error ? c.danger : c.textSecondary
-                  },
-                  children: error || hint
+                  nativeID: fieldId + "-error",
+                  accessibilityRole: "alert",
+                  style: { fontFamily, ...typeStyle("caption"), flexShrink: 1, color: c.danger },
+                  children: error
                 }
               )
             ]
@@ -1232,6 +1269,7 @@ var KjunInput = (0, import_react16.forwardRef)(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] = (0, import_react16.useState)(0);
   const [affixWidth, setAffixWidth] = (0, import_react16.useState)(0);
@@ -1256,8 +1294,8 @@ var KjunInput = (0, import_react16.forwardRef)(function KjunInput2({
           editable: canEdit,
           readOnly,
           accessibilityLabel: ariaLabel || props.accessibilityLabel || (field == null ? void 0 : field.label),
-          accessibilityLabelledBy: (field == null ? void 0 : field.label) ? field.id + "-label" : void 0,
-          accessibilityHint: errorMessage || (field == null ? void 0 : field.error) || (field == null ? void 0 : field.hint) || props.accessibilityHint,
+          accessibilityLabelledBy: (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0,
+          accessibilityHint: joinHints(field == null ? void 0 : field.hint, errorMessage || (field == null ? void 0 : field.error)) || props.accessibilityHint,
           accessibilityState: { disabled },
           ...import_react_native8.Platform.OS === "web" ? {
             // Native Web TextInput does not translate accessibilityState.
@@ -1293,7 +1331,7 @@ var KjunInput = (0, import_react16.forwardRef)(function KjunInput2({
           ]
         }
       ),
-      (prefix || prefixIcon) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      !!(prefix || prefixIcon) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         import_react_native8.View,
         {
           onLayout: (event) => setPrefixWidth(event.nativeEvent.layout.width),
@@ -1305,7 +1343,7 @@ var KjunInput = (0, import_react16.forwardRef)(function KjunInput2({
             bottom: 0,
             justifyContent: "center"
           },
-          children: prefix || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          children: prefix ? content(prefix, affixText) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             KjunIcon,
             {
               name: prefixIcon,
@@ -1315,7 +1353,7 @@ var KjunInput = (0, import_react16.forwardRef)(function KjunInput2({
           )
         }
       ),
-      (showClear || suffix || suffixIcon) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      !!(showClear || suffix || suffixIcon) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         import_react_native8.View,
         {
           onLayout: (event) => setAffixWidth(event.nativeEvent.layout.width),
@@ -1336,7 +1374,7 @@ var KjunInput = (0, import_react16.forwardRef)(function KjunInput2({
               onClear == null ? void 0 : onClear();
               (_a = input.current) == null ? void 0 : _a.focus();
             } }),
-            suffix || suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            suffix ? content(suffix, affixText) : !!suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               KjunIcon,
               {
                 name: suffixIcon,
@@ -1376,6 +1414,17 @@ function KjunFormLayout({
   ) });
 }
 
+// shared/package-runtime/content-presence.ts
+var import_react17 = require("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 ((0, import_react17.isValidElement)(node) && node.type === import_react17.Fragment)
+    return hasContent(node.props.children);
+  return true;
+}
+
 // packages/native/src/layer-backdrop.tsx
 var import_react_native9 = require("react-native");
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -1384,7 +1433,7 @@ function LayerBackdrop({ onPress, style }) {
 }
 
 // packages/native/src/modal.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // shared/package-runtime/form-actions.ts
 function formActionsNeedStack(width, widths, gap) {
@@ -1397,7 +1446,7 @@ var import_tokens10 = require("@kjun-ui/tokens");
 var import_react_native13 = require("react-native");
 
 // packages/native/src/overlay-host.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_native11 = require("react-native");
 
 // packages/native/src/modal-window.tsx
@@ -1413,17 +1462,17 @@ var import_jsx_runtime11 = (
   // a new window even when an interrupted exit retained the old surface.
   require("react/jsx-runtime")
 );
-var FeedbackOverlayContext = (0, import_react17.createContext)(
+var FeedbackOverlayContext = (0, import_react18.createContext)(
   null
 );
 function ScopedNativeModal({ children, visible, ...props }) {
   var _a;
-  const layers = useLayerState(), scope = (0, import_react17.useContext)(LayerScope);
+  const layers = useLayerState(), scope = (0, import_react18.useContext)(LayerScope);
   const entry = scope ? layers.entries.get(scope) : void 0;
   const generation = (_a = entry == null ? void 0 : entry.order) != null ? _a : 0;
   const inactive = !!scope && !layers.isActive(scope);
-  const host = (0, import_react17.useContext)(FeedbackOverlayContext), id = "kjun-" + (0, import_react17.useId)(), register = host == null ? void 0 : host.register;
-  (0, import_react17.useEffect)(
+  const host = (0, import_react18.useContext)(FeedbackOverlayContext), id = "kjun-" + (0, import_react18.useId)(), register = host == null ? void 0 : host.register;
+  (0, import_react18.useEffect)(
     () => visible && register ? register(id) : void 0,
     [visible, register, id, generation]
   );
@@ -1469,7 +1518,7 @@ function KjunFormActions({
   onConfirm
 }) {
   const { fontFamily } = useKjunStyles();
-  const [width, setWidth] = (0, import_react18.useState)(0), [measurements, setMeasurements] = (0, import_react18.useState)({});
+  const [width, setWidth] = (0, import_react19.useState)(0), [measurements, setMeasurements] = (0, import_react19.useState)({});
   const labels = [showCancel && { text: cancelText }, showConfirm && { text: confirmText }].filter(Boolean);
   const keyFor = (text) => `${fontFamily}:${size}:${text}`;
   const widths = labels.map((label) => measurements[keyFor(label.text)] === void 0 ? 0 : Math.max(import_tokens10.tokens.button.minWidths[size], measurements[keyFor(label.text)] + import_tokens10.tokens.button.paddingX[size] * 2));
@@ -1570,7 +1619,7 @@ function KjunModal({
   const motion = useNativePresence(open, import_tokens10.tokens.motion.layerEnter, import_tokens10.tokens.motion.layerExit, true, 0, { fade: import_tokens10.tokens.motion.backdropExit });
   const offset = useMotionValue(open ? 0 : import_tokens10.tokens.motionDistance.modalExit, open ? import_tokens10.tokens.motion.layerEnter : import_tokens10.tokens.motion.layerExit, import_tokens10.tokens.motionDistance.modalEnter, open ? motionOut : motionIn, true);
   const backdrop = useNativePresence(open, import_tokens10.tokens.motion.backdrop, import_tokens10.tokens.motion.backdropExit, true, 0, { fade: import_tokens10.tokens.motion.backdropExit });
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     if (!motion.present) {
       offset.stopAnimation();
       offset.setValue(import_tokens10.tokens.motionDistance.modalEnter);
@@ -1660,7 +1709,7 @@ function KjunModal({
                         borderBottomColor: c.border
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.View, { style: { flex: 1, paddingRight: import_tokens10.tokens.modal.titleActionGap }, children: header || /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.View, { style: { flex: 1, paddingRight: import_tokens10.tokens.modal.titleActionGap }, children: hasContent(header) ? content(header) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                           import_react_native13.Text,
                           {
                             accessibilityRole: "header",
@@ -1700,7 +1749,7 @@ function KjunModal({
                       children
                     }
                   ),
-                  (showFooter || footer) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  (showFooter || hasContent(footer)) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     import_react_native13.View,
                     {
                       style: {
@@ -1713,7 +1762,7 @@ function KjunModal({
                         borderTopWidth: import_tokens10.tokens.border.defaultWidth,
                         borderTopColor: c.border
                       },
-                      children: footer || /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      children: hasContent(footer) ? content(footer) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         KjunFormActions,
                         {
                           size: footerSize,
@@ -1749,19 +1798,6 @@ var import_tokens11 = require("@kjun-ui/tokens");
 var import_react20 = require("react");
 var import_react_native14 = require("react-native");
 var import_react_native_svg2 = __toESM(require("react-native-svg"), 1);
-
-// shared/package-runtime/content-presence.ts
-var import_react19 = require("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 ((0, import_react19.isValidElement)(node) && node.type === import_react19.Fragment)
-    return hasContent(node.props.children);
-  return true;
-}
-
-// packages/native/src/card.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function KjunCard({
   title,
@@ -1822,8 +1858,8 @@ function KjunCard({
       borderBottomColor: borderColor
     }, children: [
       hasHeading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.View, { style: { flexGrow: 1, flexShrink: 1, minWidth: 0, maxWidth: "100%" }, children: hasContent(header) ? content(header, { color: foreground }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle"), color: foreground }, children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(KText, { style: { ...typeStyle("caption"), marginTop: import_tokens11.tokens.card.subtitleGap, color: colors[paint.description] }, children: subtitle })
+        !!title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle"), color: foreground }, children: title }),
+        !!subtitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(KText, { style: { ...typeStyle("caption"), marginTop: import_tokens11.tokens.card.subtitleGap, color: colors[paint.description] }, children: subtitle })
       ] }) }),
       hasContent(headerActions) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardActionsContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.View, { style: { flexDirection: "row", flexWrap: "wrap", minWidth: 0, maxWidth: "100%", marginStart: "auto", alignItems: "center", justifyContent: "flex-end", gap: import_tokens11.tokens.card.titleGap }, children: content(headerActions, { color: foreground }) }) })
     ] }),
@@ -1843,6 +1879,13 @@ function KjunCard({
   ] });
 }
 
+// shared/package-runtime/alert-live.ts
+function alertRole(tone, live) {
+  if (live === "off") return void 0;
+  if (live) return live === "assertive" ? "alert" : "status";
+  return tone === "danger" ? "alert" : "status";
+}
+
 // packages/native/src/display-primitives.tsx
 var import_tokens12 = require("@kjun-ui/tokens");
 var import_react21 = require("react");
@@ -1929,9 +1972,9 @@ function KjunEmpty({
         paddingVertical: stateContent === "empty" ? 0 : import_tokens12.tokens.dimension.value32
       },
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(KjunIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
+        !!icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(KjunIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(KText, { style: { ...typeStyle("cardTitle"), color: colors.text, fontSize: spec.titleSize, lineHeight: spec.titleLineHeight, textAlign: "center", maxWidth: spec.textMaxWidth }, children: text }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        !!description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           KText,
           {
             style: {
@@ -1946,7 +1989,7 @@ function KjunEmpty({
             children: description
           }
         ),
-        children && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { style: { marginTop: spec.actionGap, maxWidth: "100%" }, children: content(children) })
+        hasContent(children) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { style: { marginTop: spec.actionGap, maxWidth: "100%" }, children: content(children) })
       ]
     }
   );
@@ -2024,7 +2067,7 @@ function KjunSpinner({ size = "md", text }) {
             )
           }
         ),
-        text && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(KText, { style: { marginLeft: import_tokens12.tokens.dimension.value8, color: colors.textSecondary }, children: text })
+        !!text && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(KText, { style: { marginLeft: import_tokens12.tokens.dimension.value8, color: colors.textSecondary }, children: text })
       ]
     }
   );
@@ -2035,6 +2078,7 @@ function KjunAlert({
   size = "md",
   title,
   closable = false,
+  live,
   children,
   actions,
   onClose
@@ -2051,7 +2095,7 @@ function KjunAlert({
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     import_react_native15.View,
     {
-      role: tone === "danger" ? "alert" : "status",
+      role: alertRole(tone, live),
       style: {
         flexDirection: "row",
         alignItems: "flex-start",
@@ -2084,7 +2128,7 @@ function KjunAlert({
             ...typeStyle(small ? "caption" : "body"),
             color: colors.textSecondary
           }) }),
-          hasContent(actions) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionSizeContext.Provider, { value: alertActionSizes[small ? "sm" : "md"], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AlertActionsContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { style: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: geometry2.actionsGap, marginTop: geometry2[small ? "sm" : "md"].actionGap }, children: actions }) }) })
+          hasContent(actions) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionSizeContext.Provider, { value: alertActionSizes[small ? "sm" : "md"], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AlertActionsContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { style: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: geometry2.actionsGap, marginTop: geometry2[small ? "sm" : "md"].actionGap }, children: content(actions) }) }) })
         ] }),
         closable && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           AccessiblePressable,
@@ -2134,7 +2178,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__ */ (0, import_jsx_runtime14.jsxs)(import_react_native15.View, { children: [
-    (label || showLabel) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    !!(label || showLabel) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       import_react_native15.View,
       {
         style: {
@@ -2549,7 +2593,7 @@ function ToastView({
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KjunIcon, { name: icon, color: colors[`${tone}Accent`] }),
             /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native17.View, { style: { flex: 1, minWidth: 0 }, children: [
-              toast.title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: import_tokens15.tokens.extensions.toast.titleGap }, children: toast.title }),
+              !!toast.title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: import_tokens15.tokens.extensions.toast.titleGap }, children: toast.title }),
               /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KText, { style: { color: colors.textSecondary }, children: toast.message }),
               toast.action && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 AccessiblePressable,
@@ -2727,7 +2771,7 @@ function FeedbackDialog({
       onConfirm: submit,
       confirmVariant: options.type === "danger" ? "danger" : "primary",
       children: [
-        options.message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(KText, { style: { marginBottom: import_tokens17.tokens.dimension.value16 }, children: options.message }),
+        !!options.message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(KText, { style: { marginBottom: import_tokens17.tokens.dimension.value16 }, children: options.message }),
         request.kind === "prompt" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           KjunInput,
           {
@@ -2744,7 +2788,7 @@ function FeedbackDialog({
     }
   );
 }
-function KjunFeedbackProvider({ children }) {
+function KjunFeedbackProvider({ children, style }) {
   const [controller] = (0, import_react28.useState)(import_tokens17.createFeedbackController);
   const life = (0, import_react28.useRef)(0);
   const snapshot = (0, import_react28.useSyncExternalStore)(
@@ -2774,7 +2818,7 @@ function KjunFeedbackProvider({ children }) {
     {
       value: { top: layers[layers.length - 1], register, render: renderToasts },
       children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(KjunFeedbackContext.Provider, { value: controller.api, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { style: { position: "relative" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { style: [{ position: "relative", flexGrow: 1, flexShrink: 1, alignSelf: "stretch" }, style], children: [
           children,
           layers.length === 0 && renderToasts()
         ] }),
@@ -2856,7 +2900,7 @@ function KjunCheckbox({
             )
           }
         ),
-        (children || label) && content(children || label, {
+        !!(children || label) && content(children || label, {
           marginLeft: import_tokens18.tokens.extensions.checkbox.labelGap,
           ...typeStyle("label")
         })
@@ -2967,7 +3011,7 @@ function KjunSwitch({
             ]
           }
         ),
-        (children || label) && content(children || label, {
+        !!(children || label) && content(children || label, {
           marginLeft: import_tokens18.tokens.extensions.switch.labelGap,
           ...typeStyle("label")
         })
@@ -3044,7 +3088,7 @@ function KjunRadio({
             )
           }
         ),
-        (children || label) && content(children || label, {
+        !!(children || label) && content(children || label, {
           marginLeft: geometry2.labelGap,
           ...typeStyle("label")
         })
@@ -3287,7 +3331,7 @@ function KjunButtonGroup({
                     opacity: blocked ? import_tokens20.tokens.states.opacity.disabled : 1
                   }),
                   children: [
-                    option.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    !!option.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       KjunIcon,
                       {
                         name: option.icon,
@@ -3384,7 +3428,7 @@ function KjunFilterGroup({
                       }
                     }
                   ),
-                  option.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  !!option.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     KjunIcon,
                     {
                       name: option.icon,
@@ -3472,13 +3516,13 @@ var KjunTextarea = (0, import_react32.forwardRef)(
         editable: !disabled && !readonly && !props.readOnly && props.editable !== false,
         nativeID: props.nativeID || (field == null ? void 0 : field.id),
         accessibilityLabel: ariaLabel || props.accessibilityLabel || (field == null ? void 0 : field.label),
-        accessibilityHint: (field == null ? void 0 : field.error) || (field == null ? void 0 : field.hint) || props.accessibilityHint,
+        accessibilityHint: joinHints(field == null ? void 0 : field.hint, field == null ? void 0 : field.error) || props.accessibilityHint,
         accessibilityState: { disabled },
         ...import_react_native24.Platform.OS === "web" ? {
           "aria-disabled": disabled,
           "aria-invalid": invalid || void 0,
           "aria-describedby": field == null ? void 0 : field.describedBy,
-          "aria-labelledby": (field == null ? void 0 : field.label) ? field.id + "-label" : void 0,
+          "aria-labelledby": (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0,
           "aria-required": (field == null ? void 0 : field.required) || void 0
         } : {},
         placeholderTextColor: disabled ? colors.textDisabled : colors.inputPlaceholder,
@@ -3515,8 +3559,50 @@ var KjunTextarea = (0, import_react32.forwardRef)(
 var import_tokens22 = require("@kjun-ui/tokens");
 var import_react33 = require("react");
 var import_react_native25 = require("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
 var import_react_native26 = require("react-native");
 var import_jsx_runtime23 = require("react/jsx-runtime");
+function useKeyboardOverlap(enabled, windowHeight) {
+  const [overlap, setOverlap] = (0, import_react33.useState)(0);
+  (0, import_react33.useEffect)(() => {
+    var _a, _b;
+    setOverlap(0);
+    const events = keyboardEvents(import_react_native26.Platform.OS);
+    if (!enabled || !events) return;
+    const metrics = (_b = (_a = import_react_native25.Keyboard).metrics) == null ? void 0 : _b.call(_a);
+    if (metrics) setOverlap(keyboardOverlap(windowHeight, metrics.screenY));
+    const show = import_react_native25.Keyboard.addListener(events.show, (event) => setOverlap(keyboardOverlap(windowHeight, event.endCoordinates.screenY)));
+    const hide = import_react_native25.Keyboard.addListener(events.hide, () => setOverlap(0));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, [enabled, windowHeight]);
+  return overlap;
+}
 function KjunDrawer({
   open,
   onOpenChange,
@@ -3531,9 +3617,24 @@ function KjunDrawer({
   footer,
   children,
   onClose,
-  ariaLabel
+  ariaLabel,
+  safeAreaTop = 0,
+  safeAreaBottom = 0,
+  maxHeight,
+  avoidKeyboard = true
 }) {
   const { colors } = useKjunStyles(), window2 = (0, import_react_native26.useWindowDimensions)(), vertical = position === "left" || position === "right";
+  const [rootHeight, setRootHeight] = (0, import_react33.useState)(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: import_tokens22.tokens.extensions.drawer.sheetGap,
+    keyboard,
+    maxHeight
+  });
   const [panelHeight, setPanelHeight] = (0, import_react33.useState)(0);
   const motion = useNativePresence(open, import_tokens22.tokens.motion.layerEnter, import_tokens22.tokens.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
   const backdrop = useNativePresence(open, import_tokens22.tokens.motion.backdrop, import_tokens22.tokens.motion.backdropExit, true, 0, { fade: import_tokens22.tokens.motion.backdropExit });
@@ -3557,6 +3658,7 @@ function KjunDrawer({
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         import_react_native26.View,
         {
+          onLayout: (event) => setRootHeight(event.nativeEvent.layout.height),
           style: {
             flex: 1,
             justifyContent: position === "bottom" ? "flex-end" : "flex-start",
@@ -3595,8 +3697,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: import_tokens22.tokens.extensions.drawer.radius,
                   borderTopLeftRadius: position === "bottom" ? import_tokens22.tokens.extensions.drawer.bottomRadius : import_tokens22.tokens.extensions.drawer.radius,
                   borderTopRightRadius: position === "bottom" ? import_tokens22.tokens.extensions.drawer.bottomRadius : import_tokens22.tokens.extensions.drawer.radius,
@@ -3604,7 +3709,7 @@ function KjunDrawer({
                   backgroundColor: colors.surface
                 },
                 children: [
-                  (title || header || closable) && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                  !!(title || header || closable) && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                     import_react_native26.View,
                     {
                       style: {
@@ -3617,7 +3722,7 @@ function KjunDrawer({
                         borderBottomColor: colors.border
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native26.View, { style: { flex: 1 }, children: header || /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native26.View, { style: { flex: 1 }, children: hasContent(header) ? content(header) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                           KText,
                           {
                             style: { ...typeStyle("sectionTitle") },
@@ -3642,12 +3747,12 @@ function KjunDrawer({
                     import_react_native26.ScrollView,
                     {
                       keyboardShouldPersistTaps: "handled",
-                      style: vertical ? { flex: 1 } : { flexGrow: 0 },
+                      style: vertical ? { flex: 1 } : { flexGrow: 0, flexShrink: 1 },
                       contentContainerStyle: { padding: noPadding ? 0 : import_tokens22.tokens.extensions.drawer.bodyPadding },
                       children: content(children)
                     }
                   ),
-                  footer && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  hasContent(footer) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     import_react_native26.View,
                     {
                       style: {
@@ -3717,8 +3822,11 @@ function FloatingPanel({
   flip = true,
   minimumWidth = 0,
   focusOnOpen = false,
-  reveal
+  reveal,
+  header,
+  nonModal = false
 }) {
+  const [headerHeight, setHeaderHeight] = (0, import_react34.useState)(0);
   const panelRef = (0, import_react34.useRef)(null);
   const scroll = (0, import_react34.useRef)(null), viewport = (0, import_react34.useRef)(0);
   const { colors } = useKjunStyles(), window2 = (0, import_react_native28.useWindowDimensions)(), [anchored, setAnchored] = (0, import_react34.useState)(false), [sized, setSized] = (0, import_react34.useState)(false), [anchor, setAnchor] = (0, import_react34.useState)({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = (0, import_react34.useState)({ width: 0, height: 0 });
@@ -3773,7 +3881,7 @@ function FloatingPanel({
     maximumWidth,
     Math.max(minimumPanelWidth, contentSizedMenu ? panel.width : matchTriggerWidth ? anchor.width : import_tokens23.tokens.extensions.popover.width)
   );
-  const available = Math.min(maxHeight != null ? maxHeight : field ? import_tokens23.tokens.extensions.menu.listMaxHeight : import_tokens23.tokens.extensions.floating.maxHeight, window2.height - 2 * import_tokens23.tokens.extensions.floating.viewportInset), height = Math.min(panel.height, available), roomAbove = anchor.y - gap - import_tokens23.tokens.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - import_tokens23.tokens.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
+  const available = Math.min(maxHeight != null ? maxHeight : field ? import_tokens23.tokens.extensions.menu.listMaxHeight : import_tokens23.tokens.extensions.floating.maxHeight, window2.height - 2 * import_tokens23.tokens.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - import_tokens23.tokens.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - import_tokens23.tokens.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
   let left = placement.endsWith("end") ? anchor.x + anchor.width - width : placement === "top" || placement === "bottom" ? anchor.x + (anchor.width - width) / 2 : anchor.x, top = above ? anchor.y - height - gap : anchor.y + anchor.height + gap;
   if (placement === "left" || placement === "right") {
     left = placement === "left" ? anchor.x - width - gap : anchor.x + anchor.width + gap;
@@ -3857,7 +3965,7 @@ function FloatingPanel({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
               import_react_native27.Animated.View,
               {
                 ref: panelRef,
@@ -3868,7 +3976,7 @@ function FloatingPanel({
                 pointerEvents: open && anchored && sized ? "auto" : "none",
                 accessibilityElementsHidden: !open || !anchored || !sized,
                 ...!open || !anchored || !sized ? { inert: true } : {},
-                accessibilityViewIsModal: true,
+                accessibilityViewIsModal: !nonModal,
                 accessibilityLabel: ariaLabel,
                 style: {
                   opacity: anchored && sized ? motion.opacity : 0,
@@ -3890,26 +3998,42 @@ function FloatingPanel({
                   boxShadow: (tooltip ? import_tokens23.tokens.extensions.tooltip.elevation : popover ? import_tokens23.tokens.extensions.popover.elevation : import_tokens23.tokens.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   overflow: "hidden"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  import_react_native28.ScrollView,
-                  {
-                    ref: scroll,
-                    onLayout: (event) => {
-                      viewport.current = event.nativeEvent.layout.height;
-                    },
-                    keyboardShouldPersistTaps: "handled",
-                    style: { maxHeight: available },
-                    contentContainerStyle: { padding: menu || field ? import_tokens23.tokens.extensions.menu.padding : 0 },
-                    onContentSizeChange: (width2, height2) => {
-                      if (contentSizedMenu) return;
-                      setSized(true);
-                      setPanel(
-                        (previous) => previous.width === width2 && previous.height === height2 ? previous : { width: width2, height: height2 }
-                      );
-                    },
-                    children
-                  }
-                )
+                children: [
+                  header != null && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    import_react_native28.View,
+                    {
+                      onLayout: ({ nativeEvent: { layout } }) => setHeaderHeight(layout.height),
+                      style: {
+                        paddingTop: import_tokens23.tokens.extensions.popover.padding,
+                        paddingHorizontal: import_tokens23.tokens.extensions.popover.padding,
+                        paddingBottom: import_tokens23.tokens.extensions.popover.headerPaddingBottom,
+                        borderBottomWidth: import_tokens23.tokens.border.defaultWidth,
+                        borderBottomColor: colors.divider
+                      },
+                      children: content(header, typeStyle("cardTitle"))
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    import_react_native28.ScrollView,
+                    {
+                      ref: scroll,
+                      onLayout: (event) => {
+                        viewport.current = event.nativeEvent.layout.height;
+                      },
+                      keyboardShouldPersistTaps: "handled",
+                      style: { maxHeight: available - (header != null ? headerHeight : 0), flexShrink: 1 },
+                      contentContainerStyle: { padding: menu || field ? import_tokens23.tokens.extensions.menu.padding : 0 },
+                      onContentSizeChange: (width2, height2) => {
+                        if (contentSizedMenu) return;
+                        setSized(true);
+                        setPanel(
+                          (previous) => previous.width === width2 && previous.height === height2 ? previous : { width: width2, height: height2 }
+                        );
+                      },
+                      children
+                    }
+                  )
+                ]
               }
             )
           ]
@@ -3935,9 +4059,12 @@ function KjunPopover({
   focusOnOpen = false,
   ariaLabel,
   placement = "bottom",
+  header,
+  modal = true,
   trigger,
   children
 }) {
+  const { colors } = useKjunStyles();
   const [internal, setInternal] = (0, import_react35.useState)(false), open = controlled != null ? controlled : internal, ref = (0, import_react35.useRef)(null);
   const change = (v) => {
     setInternal(v);
@@ -3966,6 +4093,8 @@ function KjunPopover({
         popover: true,
         focusOnOpen,
         ariaLabel,
+        header: header != null ? content(header, { ...typeStyle("cardTitle"), color: colors.text }) : void 0,
+        nonModal: !modal,
         children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native29.View, { style: { padding: noPadding ? 0 : import_tokens24.tokens.extensions.popover.padding, gap: noPadding ? 0 : import_tokens24.tokens.extensions.popover.gap }, children: content(
           typeof children === "function" ? children(() => change(false)) : children,
           import_react_native29.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : void 0
@@ -3980,9 +4109,18 @@ function KjunTooltip({
   delay = 0,
   children,
   onPress,
-  disabled
+  disabled,
+  open: controlled,
+  onOpenChange
 }) {
-  const { colors } = useKjunStyles(), [open, setOpen] = (0, import_react35.useState)(false), ref = (0, import_react35.useRef)(null), timer = (0, import_react35.useRef)(void 0);
+  const { colors } = useKjunStyles(), [internal, setInternal] = (0, import_react35.useState)(false), open = controlled != null ? controlled : internal, latest = (0, import_react35.useRef)({ 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 = (0, import_react35.useRef)(null), timer = (0, import_react35.useRef)(void 0);
+  latest.current = { open, onOpenChange };
   const scopeActive = useActiveLayerScope();
   const hide = () => {
     clearTimeout(timer.current);
@@ -5500,7 +5638,7 @@ function KjunTabs({
                   opacity: tab.disabled ? import_tokens32.tokens.states.opacity.disabled : 1
                 },
                 children: [
-                  tab.icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  !!tab.icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     KjunIcon,
                     {
                       name: tab.icon,
@@ -5545,11 +5683,11 @@ function KjunTabs({
               tab.name
             );
           }),
-          actions
+          content(actions)
         ]
       }
     ),
-    children && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native37.View, { style: { marginTop: geometry2.contentGap }, children })
+    hasContent(children) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native37.View, { style: { marginTop: geometry2.contentGap }, children: content(children) })
   ] }) });
 }
 function KjunTabPane({ name, children }) {
@@ -5677,7 +5815,7 @@ function KjunBreadcrumb({
       },
       children: items.map((item, i) => {
         const label = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens33.tokens.dimension.value4 }, children: [
-          item.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(KjunIcon, { name: item.icon, size: import_tokens33.tokens.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
+          !!item.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(KjunIcon, { name: item.icon, size: import_tokens33.tokens.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             KText,
             {
@@ -5993,7 +6131,7 @@ function KjunCopyButton({
             color: copied ? colors.success : colors.textSecondary
           }
         ),
-        text && !inline && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        !!text && !inline && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           KText,
           {
             style: {
@@ -6181,7 +6319,7 @@ function KjunDataState({
               /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
             ] }))
           }
-        ) : blockingError ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { paddingVertical: padding }, children: errorContent || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunAlert, { type: "danger", title: "\uC624\uB958 \uBC1C\uC0DD", actions: onRetry && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: query.error }) }) }) : empty ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataStateContentContext.Provider, { value: "empty", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { paddingVertical: padding }, children: emptyContent || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunEmpty, { text: emptyText, icon: emptyIcon, children: emptyActionText && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunButton, { onPress: onEmptyAction, children: emptyActionText }) }) }) }) : null,
+        ) : blockingError ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { paddingVertical: padding }, children: errorContent || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunAlert, { type: "danger", title: "\uC624\uB958 \uBC1C\uC0DD", actions: onRetry && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: query.error }) }) }) : empty ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataStateContentContext.Provider, { value: "empty", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { paddingVertical: padding }, children: emptyContent || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunEmpty, { text: emptyText, icon: emptyIcon, children: !!emptyActionText && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunButton, { onPress: onEmptyAction, children: emptyActionText }) }) }) }) : null,
         (!concealed || preserveContent && state.hasQueryResult) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           import_react_native40.View,
           {
@@ -6654,12 +6792,12 @@ function KjunAnimatedNumber({
         style
       ],
       children: [
-        prefix && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.Text, { style: typeStyle("caption"), children: [
+        !!prefix && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.Text, { style: typeStyle("caption"), children: [
           prefix,
           " "
         ] }),
         typeof n === "string" ? n : formatter ? formatter(n) : format(n, decimals),
-        suffix && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.Text, { style: typeStyle("caption"), children: [
+        !!suffix && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.Text, { style: typeStyle("caption"), children: [
           " ",
           suffix
         ] })
@@ -7233,7 +7371,7 @@ function TableToolbar({
     selectable && selected.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       import_react_native45.View,
       {
-        accessibilityRole: "toolbar",
+        role: "group",
         accessibilityLabel: "\uC120\uD0DD \uC791\uC5C5",
         style: [toolbarStyle, { backgroundColor: colors.selectedBg }],
         children: [
@@ -7542,7 +7680,7 @@ function TableCards({
                         },
                         children: [
                           selectable && checkbox(row, i),
-                          title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { flex: 1, minWidth: 0 }, children: cell(title, row, i, "title") })
+                          !!title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { flex: 1, minWidth: 0 }, children: cell(title, row, i, "title") })
                         ]
                       }
                     ),
@@ -7563,7 +7701,7 @@ function TableCards({
                       marginTop: index ? import_tokens46.tokens.dimension.value12 : 0
                     },
                     children: [
-                      section.label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                      !!section.label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                         KText,
                         {
                           style: {
@@ -7628,7 +7766,7 @@ function TableCards({
                   children: content(renderExpand == null ? void 0 : renderExpand(row, i))
                 }
               ),
-              actions && !actions.inlineInCard && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              !!actions && !actions.inlineInCard && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 import_react_native47.View,
                 {
                   style: {
@@ -7917,7 +8055,7 @@ function KjunKpiHero(props) {
                     children: loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(KjunSkeleton, { type: "block", height: typeStyle("numberMd").lineHeight, width: geometry2.deltaSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { 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__ */ (0, import_jsx_runtime47.jsx)(
+                      !!deltaDescription && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                         KText,
                         {
                           style: {
@@ -7931,7 +8069,7 @@ function KjunKpiHero(props) {
                   }
                 )
               ] }),
-              aside && !mobile && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native50.View, { children: aside })
+              hasContent(aside) && !mobile && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native50.View, { children: content(aside) })
             ]
           }
         ),
@@ -7993,7 +8131,7 @@ function KjunKpiHero(props) {
                         children: kpiFormat(item)
                       }
                     ),
-                    item.desc && (loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    !!item.desc && (loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                       KjunSkeleton,
                       {
                         type: "block",
@@ -8200,7 +8338,7 @@ function KjunKpiRow({
                       {
                         style: [valueStyle, { flexShrink: 1, minWidth: 0 }],
                         children: [
-                          item.prefix && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                          !!item.prefix && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                             import_react_native51.Text,
                             {
                               style: {
@@ -8218,7 +8356,7 @@ function KjunKpiRow({
                               style: [valueStyle, { flexShrink: 1, minWidth: 0 }]
                             }
                           ) : kpiFormat(item),
-                          item.suffix && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                          !!item.suffix && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                             import_react_native51.Text,
                             {
                               style: {
@@ -8234,7 +8372,7 @@ function KjunKpiRow({
                   ]
                 }
               ),
-              item.desc && (busy ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(KjunSkeleton, { type: "block", height: typeStyle("caption").lineHeight, width: geometry2.descriptionSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              !!item.desc && (busy ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(KjunSkeleton, { type: "block", height: typeStyle("caption").lineHeight, width: geometry2.descriptionSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 KText,
                 {
                   style: {
@@ -9080,26 +9218,26 @@ var LastListRow = (0, import_react62.createContext)(false);
 function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, onPress }) {
   const { colors } = useKjunStyles(), last = (0, import_react62.useContext)(LastListRow);
   const parts = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-    leading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { children: content(leading) }),
+    hasContent(leading) && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { children: content(leading) }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native57.View, { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(KText, { style: { ...typeStyle("label") }, children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(KText, { style: { marginTop: import_tokens55.tokens.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      !!description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(KText, { style: { marginTop: import_tokens55.tokens.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
     ] }),
-    trailing && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { style: { maxWidth: "35%" }, children: content(trailing) })
+    hasContent(trailing) && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { style: { maxWidth: "35%" }, children: content(trailing) })
   ] });
   const style = { flex: 1, minWidth: 0, minHeight: import_tokens55.tokens.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: import_tokens55.tokens.extensions.list.gap, padding: import_tokens55.tokens.extensions.list.padding };
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native57.View, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: import_tokens55.tokens.extensions.list.gap, borderBottomWidth: last ? 0 : import_tokens55.tokens.border.defaultWidth, borderBottomColor: colors.divider }, children: [
     onPress || href ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(AccessiblePressable, { ...import_react_native57.Platform.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? import_tokens55.tokens.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { style, children: parts }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { pointerEvents: disabled ? "none" : "auto", ...disabled && import_react_native57.Platform.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: import_tokens55.tokens.extensions.list.actionsGap, paddingRight: import_tokens55.tokens.extensions.list.actionsPadding, opacity: disabled ? import_tokens55.tokens.states.opacity.disabled : 1 }, children: content(actions) })
+    hasContent(actions) && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { pointerEvents: disabled ? "none" : "auto", ...disabled && import_react_native57.Platform.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: import_tokens55.tokens.extensions.list.actionsGap, paddingRight: import_tokens55.tokens.extensions.list.actionsPadding, opacity: disabled ? import_tokens55.tokens.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
 function KjunListSection({ title, description, actions, children, ariaLabel }) {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native57.View, { style: { minWidth: 0, backgroundColor: colors.surface }, children: [
-    (title || description || actions) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens55.tokens.extensions.list.gap, padding: import_tokens55.tokens.extensions.list.padding }, children: [
+    !!(title || description || actions) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens55.tokens.extensions.list.gap, padding: import_tokens55.tokens.extensions.list.padding }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native57.View, { style: { flex: 1 }, children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(KText, { style: { marginTop: import_tokens55.tokens.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+        !!title && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
+        !!description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(KText, { style: { marginTop: import_tokens55.tokens.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
       ] }),
       content(actions)
     ] }),
@@ -9127,12 +9265,12 @@ function KjunTopNavigation({ title, description, leading, actions, safeAreaTop =
   const flatten = (node) => import_react63.Children.toArray(node).flatMap((child) => (0, import_react63.isValidElement)(child) && child.type === import_react63.Fragment ? flatten(child.props.children) : [child]);
   const actionList = flatten(actions);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TopNavigationContext.Provider, { value: geometry2, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { style: { flexShrink: 0, paddingTop: Math.max(0, safeAreaTop), backgroundColor: colors.surface }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native58.View, { style: { minHeight: geometry2.minimumHeight, flexDirection: "row", flexWrap: "wrap", alignItems: "flex-start", gap: geometry2.gap, paddingVertical: geometry2.paddingY, paddingHorizontal: geometry2.paddingX }, children: [
-    leading && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TopNavigationContext.Provider, { value: { ...geometry2, slot: "leading" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { 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__ */ (0, import_jsx_runtime55.jsx)(TopNavigationContext.Provider, { value: { ...geometry2, slot: "leading" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { onLayout: square("leading"), style: { minHeight: geometry2.controlSize, minWidth: 0, maxWidth: "40%", flexShrink: 1, justifyContent: "center", marginLeft: iconEdges.leading ? -edgeInset : 0 }, children: content(leading) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native58.View, { style: { flexGrow: 1, flexShrink: 1, flexBasis: geometry2.titleMinimumWidth, minWidth: 0, paddingVertical: titleInset }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KText, { accessibilityRole: "header", style: { ...wrapping, ...typeStyle("sectionTitle"), fontWeight: typeStyle("control").fontWeight }, children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KText, { style: { ...wrapping, marginTop: geometry2.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      !!description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KText, { style: { ...wrapping, marginTop: geometry2.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
     ] }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TopNavigationContext.Provider, { value: { ...geometry2, slot: "actions" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { 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__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { onLayout: square("trailing"), style: { flexShrink: 1, minWidth: 0, maxWidth: "100%", marginRight: iconEdges.trailing ? -edgeInset : 0 }, children: content(action) }, "trailing")) }) })
+    hasContent(actions) && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TopNavigationContext.Provider, { value: { ...geometry2, slot: "actions" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { 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__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { 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 }) {
@@ -9182,7 +9320,7 @@ function KjunBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\u
         },
         children: [
           hasIcons && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native58.View, { style: { width: geometry2.iconSize, height: geometry2.iconSize, flexShrink: 0 }, children: [
-            item.icon && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KjunIcon, { name: item.icon, size: geometry2.iconSize, color: ink }),
+            !!item.icon && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KjunIcon, { name: item.icon, size: geometry2.iconSize, color: ink }),
             badge
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native58.View, { style: { maxWidth: "100%" }, children: [
@@ -9214,7 +9352,7 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
     flexDirection: wide ? "row" : "column",
     alignItems: wide ? "center" : "stretch"
   }, children: [
-    description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KText, { style: { ...typeStyle("body"), ...wrapping, color: colors.textSecondary, flex: wide ? 1 : void 0, minWidth: 0 }, children: description }),
+    !!description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KText, { style: { ...typeStyle("body"), ...wrapping, color: colors.textSecondary, flex: wide ? 1 : void 0, minWidth: 0 }, children: description }),
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { style: { flexDirection: "row", flexWrap: "wrap", justifyContent: "flex-end", alignItems: "center", gap: geometry2.actionsGap, minWidth: 0, maxWidth: "100%", flexShrink: 1 }, children: content(children) })
   ] }) });
 }
@@ -9252,7 +9390,7 @@ var import_jsx_runtime57 = require("react/jsx-runtime");
 function KjunChip({ label, icon, removable = false, disabled = false, size = "md", removeLabel, onRemove }) {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native60.View, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: import_tokens58.tokens.extensions.chip.gap, minHeight: removable ? import_tokens58.tokens.extensions.chip.nativeRemoveSize : import_tokens58.tokens.extensions.chip[size], paddingVertical: removable ? 0 : import_tokens58.tokens.extensions.chip.paddingY, paddingLeft: import_tokens58.tokens.extensions.chip.paddingX, paddingRight: removable ? 0 : import_tokens58.tokens.extensions.chip.paddingX, borderRadius: import_tokens58.tokens.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? import_tokens58.tokens.states.opacity.disabled : 1 }, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(KjunIcon, { name: icon, size: import_tokens58.tokens.extensions.chip.iconSizes[size] }),
+    !!icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(KjunIcon, { name: icon, size: import_tokens58.tokens.extensions.chip.iconSizes[size] }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(KText, { style: { ...typeStyle(import_tokens58.tokens.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
     removable && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || label + " \uC0AD\uC81C", disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: import_tokens58.tokens.extensions.chip.nativeRemoveSize, height: import_tokens58.tokens.extensions.chip.nativeRemoveSize, borderRadius: import_tokens58.tokens.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(KjunIcon, { name: "x", size: import_tokens58.tokens.extensions.chip.removeIconSizes[size] }) })
   ] });
@@ -9380,7 +9518,7 @@ function RangeInput({
               minWidth: 0
             },
             children: [
-              label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              !!label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 KText,
                 {
                   style: {
@@ -9573,7 +9711,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const { colors, fontFamily } = useKjunStyles();
   const field = useKjunField();
   const invalid = error || !!(field == null ? void 0 : field.error);
-  const labelledBy = !ariaLabel && (field == null ? void 0 : field.label) ? field.id + "-label" : void 0;
+  const labelledBy = !ariaLabel && (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0;
   const geometry2 = import_tokens60.tokens.extensions.compound;
   const buttonStyle = { width: import_tokens60.tokens.input[size].height, paddingHorizontal: 0 };
   const outer = import_tokens60.tokens.input[size].radius;
@@ -9681,7 +9819,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
         nativeID: id || (field == null ? void 0 : field.id),
         accessibilityLabel: ariaLabel || (field == null ? void 0 : field.label) || "\uC218\uB7C9",
         accessibilityLabelledBy: labelledBy,
-        accessibilityHint: (field == null ? void 0 : field.error) || (field == null ? void 0 : field.hint),
+        accessibilityHint: joinHints(field == null ? void 0 : field.hint, field == null ? void 0 : field.error),
         role: "spinbutton",
         accessibilityValue: { min, max, now: value },
         accessibilityState: { disabled: blocked },
@@ -9741,6 +9879,6 @@ 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__ */ (0, import_jsx_runtime60.jsx)(import_react_native63.View, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? import_tokens61.tokens.border.controlWidth : import_tokens61.tokens.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__ */ (0, import_jsx_runtime60.jsx)(import_react_native63.View, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? import_tokens61.tokens.border.controlWidth : import_tokens61.tokens.states.focus.width, borderColor: error || (field == null ? void 0 : field.error) ? colors.danger : colors.focusRing } })
   ] });
 }