@kjun-ui/native 0.6.1 → 0.8.0

package/dist/index.js

@@ -2271,36 +2271,6 @@ function KjunSkeleton({
             ))
           }
         ),
-        type === "chart" && /* @__PURE__ */ jsxs7(View10, { style: [frame, { height: height || tokens11.extensions.skeleton.chartHeight }], children: [
-          /* @__PURE__ */ jsx15(
-            View10,
-            {
-              style: {
-                flex: 1,
-                flexDirection: "row",
-                alignItems: "flex-end",
-                justifyContent: "space-around",
-                gap: tokens11.extensions.skeleton.gap
-                // Bars stand on the axis line, like ChartSkeleton.
-              },
-              children: [40, 65, 50, 80, 60, 90, 75].map((h, i) => /* @__PURE__ */ jsx15(
-                Animated6.View,
-                {
-                  style: {
-                    flex: 1,
-                    maxWidth: tokens11.extensions.skeleton.chartBarMaxWidth,
-                    height: `${h}%`,
-                    backgroundColor: shimmer,
-                    borderTopLeftRadius: tokens11.radius.radius4,
-                    borderTopRightRadius: tokens11.radius.radius4
-                  }
-                },
-                i
-              ))
-            }
-          ),
-          block("100%", tokens11.extensions.skeleton.chartAxisHeight, { backgroundColor: colors.border })
-        ] }),
         type === "stat" && /* @__PURE__ */ jsxs7(
           View10,
           {
@@ -6109,12 +6079,27 @@ import {
   initialQueryDisplay,
   queryDisplayStatus
 } from "@kjun-ui/tokens";
-import { Component, useState as useState29 } from "react";
+import { Component, useState as useState30 } from "react";
 import { Platform as Platform23, View as View30 } from "react-native";
+
+// shared/package-runtime/use-loading-reveal.ts
+import { useEffect as useEffect21, useState as useState29 } from "react";
+function useLoadingReveal(active, delay = 0) {
+  const [revealed, setRevealed] = useState29(false);
+  useEffect21(() => {
+    setRevealed(false);
+    if (!active || delay <= 0) return;
+    const timer = setTimeout(() => setRevealed(true), delay);
+    return () => clearTimeout(timer);
+  }, [active, delay]);
+  return delay <= 0 || revealed;
+}
+
+// packages/native/src/data-state.tsx
 import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function useQueryDisplay(props) {
   var _a;
-  const [state, setState] = useState29(() => initialQueryDisplay(props));
+  const [state, setState] = useState30(() => initialQueryDisplay(props));
   let next = state;
   if (state.queryKey !== ((_a = props.queryKey) != null ? _a : null) || state.resultKey !== props.resultKey || state.loading !== !!props.loading) {
     next = advanceQueryDisplay(state, props);
@@ -6133,6 +6118,7 @@ function KjunDataState({
   emptyIcon,
   emptyActionText,
   loadingText = "\uB85C\uB529 \uC911...",
+  loadingDelay = 0,
   retryText = "\uB2E4\uC2DC \uC2DC\uB3C4",
   size = "md",
   skeleton = false,
@@ -6146,7 +6132,7 @@ function KjunDataState({
   onEmptyAction,
   ...query
 }) {
-  const state = useQueryDisplay(query), blockingError = query.error && !(state.usesQueryState && state.hasCurrentResult), visibleRefreshError = refreshError || (state.usesQueryState && state.hasCurrentResult ? query.error : null), concealed = state.initialLoading || !!blockingError || empty, padding = tokens33.extensions.state.padding[size];
+  const state = useQueryDisplay(query), blockingError = query.error && !(state.usesQueryState && state.hasCurrentResult), visibleRefreshError = refreshError || (state.usesQueryState && state.hasCurrentResult ? query.error : null), concealed = state.initialLoading || !!blockingError || empty, padding = tokens33.extensions.state.padding[size], revealed = useLoadingReveal(state.initialLoading, loadingDelay);
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ jsxs24(
     View30,
@@ -6179,8 +6165,10 @@ function KjunDataState({
         state.initialLoading ? /* @__PURE__ */ jsx37(
           View30,
           {
-            accessibilityLabel: loadingText,
-            style: { paddingVertical: loadingPadding === "none" ? 0 : padding },
+            accessibilityLabel: revealed ? loadingText : void 0,
+            "aria-hidden": revealed ? void 0 : true,
+            importantForAccessibility: revealed ? void 0 : "no-hide-descendants",
+            style: { paddingVertical: loadingPadding === "none" ? 0 : padding, opacity: revealed ? void 0 : 0 },
             children: loadingContent || (skeleton ? /* @__PURE__ */ jsx37(View30, { style: { gap: tokens33.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx37(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs24(View30, { style: { alignItems: "center", gap: tokens33.dimension.value12 }, children: [
               /* @__PURE__ */ jsx37(KjunSpinner, { size: "md" }),
               /* @__PURE__ */ jsx37(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
@@ -6261,9 +6249,23 @@ var KjunErrorBoundary = class extends Component {
 
 // packages/native/src/skeletons.tsx
 import { tokens as tokens37 } from "@kjun-ui/tokens";
-import { Fragment as Fragment11, useEffect as useEffect21, useRef as useRef28 } from "react";
-import { Animated as Animated17, View as View32, useWindowDimensions as useWindowDimensions6 } from "react-native";
-import Svg5, { G as G2, Path as Path4, Rect as Rect3 } from "react-native-svg";
+import { useEffect as useEffect22, useRef as useRef28, useState as useState32 } from "react";
+import { Animated as Animated17, Platform as Platform24, View as View32, useWindowDimensions as useWindowDimensions6 } from "react-native";
+import Svg5, { Path as Path4 } from "react-native-svg";
+
+// shared/package-runtime/chart-skeleton.ts
+var chartFrameViewBox = "0 0 600 240";
+var chartFramePath = "M20 10V220H590 M20 65H590 M20 120H590 M20 175H590";
+var chartSkeletonMaxCount = 100;
+function chartSkeletonCount(value) {
+  return Number.isFinite(value) ? Math.min(chartSkeletonMaxCount, Math.max(1, Math.floor(value))) : 1;
+}
+function chartMatrixMuted(row, column) {
+  return (row + column + 2) % 3 === 0;
+}
+function chartDonutHole(height, thickness) {
+  return Math.max(0, height * 0.8 - 2 * thickness);
+}
 
 // packages/native/src/market-skeleton.tsx
 import { tokens as tokens36 } from "@kjun-ui/tokens";
@@ -6290,9 +6292,9 @@ function nativeMarketLayout(columns, showActions, containerWidth) {
 
 // packages/native/src/market-layout.ts
 import { tokens as tokens35 } from "@kjun-ui/tokens";
-import { useState as useState30 } from "react";
+import { useState as useState31 } from "react";
 function useMarketLayout(columns, showActions) {
-  const [containerWidth, setContainerWidth] = useState30(0);
+  const [containerWidth, setContainerWidth] = useState31(0);
   const onLayout = (event) => setContainerWidth(event.nativeEvent.layout.width);
   return { ...nativeMarketLayout(columns, showActions, containerWidth), onLayout };
 }
@@ -6321,7 +6323,7 @@ function KjunMarketTableSkeleton({ columns = [], rows = 8, showActions = false }
 }
 
 // packages/native/src/skeletons.tsx
-import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 function KjunListSkeleton({
   rows = 8,
   variant = "market",
@@ -6422,26 +6424,23 @@ function KjunFormSkeleton({
     }
   );
 }
+var chartPart = (name) => Platform24.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
+  kind = "frame",
+  height = tokens37.extensions.chartSkeleton.height,
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
-  kind = "line",
-  height = tokens37.extensions.chartSkeleton.height
+  skeleton = true,
+  loadingDelay = 0,
+  rows = 8,
+  columns = 14
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef28(new Animated17.Value(1)).current;
-  useEffect21(() => {
-    if (reduced) return;
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef28(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState32(0), thickness = tokens37.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
+  useEffect22(() => {
+    if (reduced || !skeleton) return;
     const loop = Animated17.loop(
       Animated17.sequence([
-        Animated17.timing(opacity, {
-          toValue: 0.55,
-          duration: tokens37.motion.shimmer / 2,
-          useNativeDriver: true
-        }),
-        Animated17.timing(opacity, {
-          toValue: 1,
-          duration: tokens37.motion.shimmer / 2,
-          useNativeDriver: true
-        })
+        Animated17.timing(opacity, { toValue: 0.55, duration: tokens37.motion.shimmer / 2, useNativeDriver: true }),
+        Animated17.timing(opacity, { toValue: 1, duration: tokens37.motion.shimmer / 2, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -6449,98 +6448,73 @@ function KjunChartSkeleton({
       loop.stop();
       opacity.setValue(1);
     };
-  }, [opacity, reduced]);
-  return /* @__PURE__ */ jsxs26(
+  }, [opacity, reduced, skeleton]);
+  return /* @__PURE__ */ jsx39(
     Animated17.View,
     {
-      style: {
-        height,
-        alignItems: "center",
-        justifyContent: "center",
-        width: "100%",
-        minWidth: 0,
-        opacity
-      },
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      children: [
+      onLayout: typeof height === "number" ? void 0 : (event) => setMeasured(event.nativeEvent.layout.height),
+      style: { height, alignItems: "center", justifyContent: "center", width: "100%", minWidth: 0, opacity: revealed ? opacity : 0 },
+      "aria-hidden": revealed ? void 0 : true,
+      importantForAccessibility: revealed ? void 0 : "no-hide-descendants",
+      ...Platform24.OS === "web" ? { dataSet: { kjunChartKind: kind, skeleton: skeleton ? void 0 : "false" } } : {},
+      children: !skeleton ? /* @__PURE__ */ jsxs26(View32, { ...chartPart("loading"), role: status, style: { alignItems: "center", gap: tokens37.dimension.value12 }, children: [
+        /* @__PURE__ */ jsx39(View32, { ...hidden, children: /* @__PURE__ */ jsx39(KjunSpinner, { size: "md" }) }),
+        !!loadingText && /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
+      ] }) : /* @__PURE__ */ jsxs26(Fragment11, { children: [
         kind === "donut" ? /* @__PURE__ */ jsx39(
           View32,
           {
-            style: {
-              height: "80%",
-              aspectRatio: 1,
-              borderWidth: tokens37.extensions.chartSkeleton.donutThickness,
-              borderColor: colors.skeleton,
-              borderRadius: tokens37.radius.radius9999,
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", width: tokens37.extensions.chartSkeleton.donutLabelWidth, height: tokens37.extensions.chartSkeleton.donutLabelHeight })
+            ...chartPart("donut"),
+            ...hidden,
+            style: { height: "80%", aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens37.radius.radius9999 }
           }
-        ) : /* @__PURE__ */ jsxs26(
-          Svg5,
+        ) : kind === "matrix" ? /* @__PURE__ */ jsx39(View32, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: tokens37.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ jsx39(View32, { style: { flex: 1, flexDirection: "row", gap: tokens37.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ jsx39(
+          View32,
           {
-            viewBox: "0 0 600 240",
-            preserveAspectRatio: "none",
-            width: "100%",
-            height: "100%",
-            children: [
-              /* @__PURE__ */ jsx39(
-                Path4,
-                {
-                  d: "M20 10V220H590 M20 65H590 M20 120H590 M20 175H590",
-                  fill: "none",
-                  stroke: colors.border,
-                  strokeWidth: 1
-                }
-              ),
-              kind === "line" && /* @__PURE__ */ jsx39(Path4, { d: "M20 190 L100 160 L180 172 L260 120 L340 140 L420 96 L500 110 L590 64", fill: "none", stroke: colors.skeleton, strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" }),
-              kind === "matrix" ? Array.from({ length: 8 }, (_, row) => /* @__PURE__ */ jsx39(G2, { children: Array.from({ length: 14 }, (_2, col) => /* @__PURE__ */ jsx39(
-                Rect3,
-                {
-                  x: 24 + col * 40,
-                  y: 12 + row * 26,
-                  width: 36,
-                  height: 22,
-                  rx: 2,
-                  fill: colors.skeleton,
-                  opacity: (row + col + 2) % 3 === 0 ? 0.55 : 1
+            ...chartPart("cell"),
+            style: {
+              flex: 1,
+              borderRadius: tokens37.extensions.skeleton.lineRadius,
+              backgroundColor: colors.skeleton,
+              opacity: chartMatrixMuted(row, column) ? tokens37.states.opacity.pending : 1
+            }
+          },
+          column
+        )) }, row)) }) : /* @__PURE__ */ jsx39(View32, { ...chartPart("plot"), ...hidden, style: { alignSelf: "stretch", flex: 1 }, children: /* @__PURE__ */ jsx39(Svg5, { viewBox: chartFrameViewBox, preserveAspectRatio: "none", width: "100%", height: "100%", children: /* @__PURE__ */ jsx39(Path4, { d: chartFramePath, fill: "none", stroke: colors.chartGrid, strokeWidth: tokens37.border.defaultWidth, vectorEffect: "non-scaling-stroke" }) }) }),
+        !!loadingText && /* @__PURE__ */ jsx39(
+          View32,
+          {
+            ...chartPart("status"),
+            role: status,
+            pointerEvents: "none",
+            style: { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center" },
+            children: /* @__PURE__ */ jsx39(
+              KText,
+              {
+                style: {
+                  ...typeStyle("body"),
+                  paddingHorizontal: tokens37.dimension.value12,
+                  paddingVertical: tokens37.dimension.value4,
+                  borderRadius: tokens37.radius.radius6,
+                  borderWidth: kind === "donut" ? 0 : tokens37.border.defaultWidth,
+                  borderColor: colors.chartGrid,
+                  backgroundColor: colors.surface,
+                  color: colors.textSecondary,
+                  maxWidth: kind === "donut" && hole != null ? hole : "90%",
+                  textAlign: "center"
                 },
-                col
-              )) }, row)) : (kind === "bar" || kind === "candle") && [60, 100, 85, 140, 110, 165, 180].map((h, i) => /* @__PURE__ */ jsxs26(Fragment11, { children: [
-                kind === "candle" && /* @__PURE__ */ jsx39(
-                  Path4,
-                  {
-                    d: `M${55 + i * 75} ${195 - h}V${225 - h / 2}`,
-                    fill: "none",
-                    stroke: colors.skeleton,
-                    strokeWidth: 4
-                  }
-                ),
-                /* @__PURE__ */ jsx39(
-                  Rect3,
-                  {
-                    x: 35 + i * 75,
-                    y: kind === "candle" ? 210 - h : 220 - h,
-                    width: kind === "candle" ? 28 : 42,
-                    height: kind === "candle" ? h / 2 : h,
-                    rx: 3,
-                    fill: colors.skeleton
-                  }
-                )
-              ] }, i))
-            ]
+                children: loadingText
+              }
+            )
           }
-        ),
-        /* @__PURE__ */ jsx39(View32, { pointerEvents: "none", style: { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center", gap: tokens37.dimension.value12 }, children: !!loadingText && /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle("body"), paddingHorizontal: tokens37.dimension.value12, paddingVertical: tokens37.dimension.value4, borderRadius: tokens37.radius.radius6, backgroundColor: colors.surface, color: colors.textSecondary, maxWidth: "90%", textAlign: "center" }, children: loadingText }) })
-      ]
+        )
+      ] })
     }
   );
 }
 
 // packages/native/src/financial-display.tsx
-import { tokens as tokens40 } from "@kjun-ui/tokens";
+import { deviationLevel, tokens as tokens40 } from "@kjun-ui/tokens";
 import { useId as useId8 } from "react";
 import {
   View as View34
@@ -6558,7 +6532,7 @@ import Svg6, {
 import { tokens as tokens39 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/use-number-motion.ts
-import { useLayoutEffect as useLayoutEffect12, useRef as useRef29, useState as useState31 } from "react";
+import { useLayoutEffect as useLayoutEffect12, useRef as useRef29, useState as useState33 } from "react";
 
 // shared/package-runtime/number-motion.ts
 import { tokens as tokens38 } from "@kjun-ui/tokens";
@@ -6604,7 +6578,7 @@ function createNumberMotion(apply) {
 
 // shared/package-runtime/use-number-motion.ts
 function useNumberMotion(value, animated, fromPrevious, reduced) {
-  const [display, setDisplay] = useState31(typeof value === "string" || fromPrevious || !animated || reduced ? value : 0);
+  const [display, setDisplay] = useState33(typeof value === "string" || fromPrevious || !animated || reduced ? value : 0);
   const motion = useRef29(null);
   if (!motion.current) motion.current = createNumberMotion(setDisplay);
   useLayoutEffect12(() => {
@@ -6790,6 +6764,7 @@ function KjunSignedValue({
 
 // packages/native/src/financial-display.tsx
 import { Fragment as Fragment12, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+var deviationFill = { neutral: 1, low: tokens40.states.opacity.deviationLow, medium: tokens40.states.opacity.deviationMedium, strong: tokens40.states.opacity.deviationStrong };
 function KjunDeviation({
   value,
   variant = "pill",
@@ -6800,7 +6775,7 @@ function KjunDeviation({
   const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), n = finiteNumber(value);
   if (n === null)
     return /* @__PURE__ */ jsx41(KText, { style: { color: colors.textDisabled }, children: "-" });
-  const abs = Math.abs(n), signal = abs >= signalThreshold, neutral = abs < 0.1, color = neutral ? colors.textSecondary : domainColor(domainColors, n > 0 ? "priceUp" : "priceDown"), label = formatter ? formatter(n) : (n > 0 ? "+" : "") + format(n, decimals) + "%";
+  const abs = Math.abs(n), signal = abs >= signalThreshold, level = deviationLevel(n), neutral = level === "neutral", color = neutral ? colors.textSecondary : domainColor(domainColors, n > 0 ? "priceUp" : "priceDown"), label = formatter ? formatter(n) : (n > 0 ? "+" : "") + format(n, decimals) + "%";
   if (variant === "badge")
     return /* @__PURE__ */ jsxs28(
       View34,
@@ -6869,7 +6844,7 @@ function KjunDeviation({
               inset: 0,
               borderRadius: tokens40.extensions.financial.cellRadius,
               backgroundColor: neutral ? colors.secondary : color,
-              opacity: neutral ? 1 : abs < 0.5 ? 0.08 : abs < 1 ? 0.14 : 0.22
+              opacity: deviationFill[level]
             }
           }
         ),
@@ -6882,7 +6857,7 @@ function KjunDeviation({
               fontVariant: ["tabular-nums"],
               ...typeStyle("body"),
               // Like Web: control weight, stronger once the deviation reaches 1%.
-              fontWeight: abs >= 1 ? typeStyle("numberLg").fontWeight : typeStyle("control").fontWeight
+              fontWeight: level === "strong" ? typeStyle("numberLg").fontWeight : typeStyle("control").fontWeight
             },
             children: label
           }
@@ -7090,7 +7065,7 @@ function KjunSparkline({
 
 // shared/package-runtime/table.ts
 import { nextTableSort } from "@kjun-ui/tokens";
-import { useEffect as useEffect23, useRef as useRef31, useState as useState33 } from "react";
+import { useEffect as useEffect24, useRef as useRef31, useState as useState35 } from "react";
 
 // shared/package-runtime/table-model.ts
 function getValue(row, key) {
@@ -7134,11 +7109,11 @@ function useTableModel(props) {
     expandSingle = false,
     onExpandedRowsChange
   } = props;
-  const [internalSort, setSort] = useState33({
+  const [internalSort, setSort] = useState35({
     key: "",
     order: "asc"
-  }), [internalExpanded, setExpanded] = useState33([]), [search, setSearch] = useState33(""), timer = useRef31(void 0);
-  useEffect23(() => () => clearTimeout(timer.current), []);
+  }), [internalExpanded, setExpanded] = useState35([]), [search, setSearch] = useState35(""), timer = useRef31(void 0);
+  useEffect24(() => () => 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);
@@ -7292,19 +7267,19 @@ function TableToolbar({
 
 // packages/native/src/table-grid.tsx
 import { tokens as tokens42 } from "@kjun-ui/tokens";
-import { Fragment as Fragment14, useId as useId9, useState as useState34 } from "react";
-import Svg7, { Defs as Defs3, LinearGradient as LinearGradient3, Rect as Rect4, Stop as Stop3 } from "react-native-svg";
+import { Fragment as Fragment14, useId as useId9, useState as useState36 } from "react";
+import Svg7, { Defs as Defs3, LinearGradient as LinearGradient3, Rect as Rect3, Stop as Stop3 } from "react-native-svg";
 import { ScrollView as ScrollView9, View as View36 } from "react-native";
 import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
-function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }) {
+function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }) {
   const { colors } = useKjunStyles();
   const geometry2 = tokens42.table;
-  const [scroll, setScroll] = useState34({ viewport: 0, x: 0 }), fadeId = "kjun-table-fade-" + useId9().replace(/[^a-z0-9]/gi, "");
+  const [scroll, setScroll] = useState36({ viewport: 0, x: 0 }), fadeId = "kjun-table-fade-" + useId9().replace(/[^a-z0-9]/gi, "");
   const cellPadding = geometry2.cellPadding[compact ? "compact" : "regular"];
   const width = (col) => typeof col.width === "number" ? col.width : typeof col.width === "string" && /^\d+(px)?$/.test(col.width) ? parseFloat(col.width) : geometry2.columnWidth;
   const totalWidth = visible.reduce((sum, col) => sum + width(col), 0) + (selectable ? geometry2.actionColumnWidth : 0) + (expandable ? geometry2.actionColumnWidth : 0);
   const fade = totalWidth - scroll.viewport - scroll.x > 1;
-  return /* @__PURE__ */ jsxs30(View36, { style: { position: "relative", minWidth: 0 }, children: [
+  return /* @__PURE__ */ jsxs30(View36, { style: { position: "relative", minWidth: 0, opacity: skeletonHidden ? 0 : void 0 }, "aria-hidden": skeletonHidden || void 0, children: [
     /* @__PURE__ */ jsx43(
       ScrollView9,
       {
@@ -7486,7 +7461,7 @@ function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable
         /* @__PURE__ */ jsx43(Stop3, { offset: "0", stopColor: colors.surface, stopOpacity: 0 }),
         /* @__PURE__ */ jsx43(Stop3, { offset: "1", stopColor: colors.surface, stopOpacity: 1 })
       ] }) }),
-      /* @__PURE__ */ jsx43(Rect4, { width: "100%", height: "100%", fill: `url(#${fadeId})` })
+      /* @__PURE__ */ jsx43(Rect3, { width: "100%", height: "100%", fill: `url(#${fadeId})` })
     ] }) })
   ] });
 }
@@ -7507,6 +7482,7 @@ import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 function TableCards({
   initialLoading,
   skeletonRows,
+  skeletonHidden,
   state,
   onRowClick,
   selectable,
@@ -7521,149 +7497,156 @@ function TableCards({
 }) {
   const { colors } = useKjunStyles();
   const { title, subtitle, badges, inline, sections, actions, columnsForSection } = layout;
-  return /* @__PURE__ */ jsxs31(View37, { style: { gap: tokens43.extensions.tableCard.gap, padding: tokens43.extensions.tableCard.listPadding }, children: [
-    initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ jsx44(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ jsxs31(
-      AccessiblePressable,
-      {
-        accessible: false,
-        onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
-        style: ({ pressed }) => ({
-          padding: tokens43.extensions.tableCard.padding,
-          borderWidth: tokens43.border.defaultWidth,
-          borderColor: colors.border,
-          borderRadius: tokens43.extensions.tableCard.radius,
-          backgroundColor: pressed ? colors.hover : colors.background
-        }),
-        children: [
-          /* @__PURE__ */ jsxs31(
-            View37,
-            {
-              style: {
-                flexDirection: "row",
-                alignItems: "center",
-                gap: tokens43.extensions.tableCard.gap,
-                marginBottom: tokens43.dimension.value8
-              },
-              children: [
-                /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs31(
+    View37,
+    {
+      style: { gap: tokens43.extensions.tableCard.gap, padding: tokens43.extensions.tableCard.listPadding, opacity: skeletonHidden ? 0 : void 0 },
+      "aria-hidden": skeletonHidden || void 0,
+      children: [
+        initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ jsx44(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ jsxs31(
+          AccessiblePressable,
+          {
+            accessible: false,
+            onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
+            style: ({ pressed }) => ({
+              padding: tokens43.extensions.tableCard.padding,
+              borderWidth: tokens43.border.defaultWidth,
+              borderColor: colors.border,
+              borderRadius: tokens43.extensions.tableCard.radius,
+              backgroundColor: pressed ? colors.hover : colors.background
+            }),
+            children: [
+              /* @__PURE__ */ jsxs31(
+                View37,
+                {
+                  style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: tokens43.extensions.tableCard.gap,
+                    marginBottom: tokens43.dimension.value8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs31(
+                      View37,
+                      {
+                        style: {
+                          flexDirection: "row",
+                          flex: 1,
+                          alignItems: "center",
+                          gap: tokens43.extensions.tableCard.gap,
+                          minWidth: 0
+                        },
+                        children: [
+                          selectable && checkbox(row, i),
+                          title && /* @__PURE__ */ jsx44(View37, { style: { flex: 1, minWidth: 0 }, children: cell(title, row, i, "title") })
+                        ]
+                      }
+                    ),
+                    badges.length ? /* @__PURE__ */ jsx44(View37, { style: { flexDirection: "row", gap: tokens43.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ jsx44(View37, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
+                    inline.length > 0 && /* @__PURE__ */ jsx44(View37, { style: { flexDirection: "row", gap: tokens43.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ jsx44(View37, { children: cell(col, row, i) }, col.key)) })
+                  ]
+                }
+              ),
+              sections.map((section, index) => {
+                const cols = columnsForSection(row, section);
+                return cols.length ? /* @__PURE__ */ jsxs31(
                   View37,
                   {
                     style: {
-                      flexDirection: "row",
-                      flex: 1,
-                      alignItems: "center",
-                      gap: tokens43.extensions.tableCard.gap,
-                      minWidth: 0
+                      borderTopWidth: index ? tokens43.border.defaultWidth : 0,
+                      borderTopColor: colors.border,
+                      paddingTop: index ? tokens43.dimension.value12 : 0,
+                      marginTop: index ? tokens43.dimension.value12 : 0
                     },
                     children: [
-                      selectable && checkbox(row, i),
-                      title && /* @__PURE__ */ jsx44(View37, { style: { flex: 1, minWidth: 0 }, children: cell(title, row, i, "title") })
-                    ]
-                  }
-                ),
-                badges.length ? /* @__PURE__ */ jsx44(View37, { style: { flexDirection: "row", gap: tokens43.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ jsx44(View37, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
-                inline.length > 0 && /* @__PURE__ */ jsx44(View37, { style: { flexDirection: "row", gap: tokens43.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ jsx44(View37, { children: cell(col, row, i) }, col.key)) })
-              ]
-            }
-          ),
-          sections.map((section, index) => {
-            const cols = columnsForSection(row, section);
-            return cols.length ? /* @__PURE__ */ jsxs31(
-              View37,
-              {
-                style: {
-                  borderTopWidth: index ? tokens43.border.defaultWidth : 0,
-                  borderTopColor: colors.border,
-                  paddingTop: index ? tokens43.dimension.value12 : 0,
-                  marginTop: index ? tokens43.dimension.value12 : 0
-                },
-                children: [
-                  section.label && /* @__PURE__ */ jsx44(
-                    KText,
-                    {
-                      style: {
-                        ...typeStyle("controlSmall"),
-                        color: colors.textTertiary,
-                        marginBottom: tokens43.dimension.value6
-                      },
-                      children: section.label
-                    }
-                  ),
-                  /* @__PURE__ */ jsx44(
-                    View37,
-                    {
-                      style: {
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        gap: section.layout === "metrics" ? tokens43.extensions.tableCard.gap : tokens43.extensions.tableCard.metricGap
-                      },
-                      children: cols.map((col) => /* @__PURE__ */ jsxs31(
+                      section.label && /* @__PURE__ */ jsx44(
+                        KText,
+                        {
+                          style: {
+                            ...typeStyle("controlSmall"),
+                            color: colors.textTertiary,
+                            marginBottom: tokens43.dimension.value6
+                          },
+                          children: section.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsx44(
                         View37,
                         {
                           style: {
-                            flexBasis: col.fullWidthInCard || section.layout === "stack" ? "100%" : section.layout === "metrics" ? "30%" : "47%",
-                            flexGrow: 1,
-                            minWidth: 0,
-                            gap: tokens43.extensions.tableCard.valueGap
+                            flexDirection: "row",
+                            flexWrap: "wrap",
+                            gap: section.layout === "metrics" ? tokens43.extensions.tableCard.gap : tokens43.extensions.tableCard.metricGap
                           },
-                          children: [
-                            /* @__PURE__ */ jsx44(
-                              KText,
-                              {
-                                style: {
-                                  ...typeStyle("meta"),
-                                  color: colors.textTertiary,
-                                  textAlign: section.labelAlign
-                                },
-                                children: col.label
-                              }
-                            ),
-                            cell(col, row, i)
-                          ]
-                        },
-                        col.key
-                      ))
-                    }
-                  )
-                ]
-              },
-              section.key || index
-            ) : null;
-          }),
-          expandable && expand(row, i),
-          expandable && state.expanded.includes(state.key(row, i)) && /* @__PURE__ */ jsx44(
-            View37,
-            {
-              style: {
-                borderTopWidth: tokens43.border.defaultWidth,
-                borderTopColor: colors.border,
-                paddingTop: tokens43.dimension.value8,
-                marginTop: tokens43.dimension.value4
-              },
-              children: content(renderExpand == null ? void 0 : renderExpand(row, i))
-            }
-          ),
-          actions && !actions.inlineInCard && /* @__PURE__ */ jsx44(
-            View37,
-            {
-              style: {
-                borderTopWidth: tokens43.border.defaultWidth,
-                borderTopColor: colors.border,
-                paddingTop: tokens43.dimension.value8,
-                marginTop: tokens43.dimension.value8,
-                alignItems: "flex-end"
-              },
-              children: /* @__PURE__ */ jsx44(View37, { style: { alignSelf: "flex-end" }, children: cell(actions, row, i) })
-            }
-          )
-        ]
-      },
-      state.key(row, i)
-    )),
-    !initialLoading && !state.rows.length && /* @__PURE__ */ jsx44(View37, { style: { padding: tokens43.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
-      color: colors.textTertiary
-    }) })
-  ] });
+                          children: cols.map((col) => /* @__PURE__ */ jsxs31(
+                            View37,
+                            {
+                              style: {
+                                flexBasis: col.fullWidthInCard || section.layout === "stack" ? "100%" : section.layout === "metrics" ? "30%" : "47%",
+                                flexGrow: 1,
+                                minWidth: 0,
+                                gap: tokens43.extensions.tableCard.valueGap
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx44(
+                                  KText,
+                                  {
+                                    style: {
+                                      ...typeStyle("meta"),
+                                      color: colors.textTertiary,
+                                      textAlign: section.labelAlign
+                                    },
+                                    children: col.label
+                                  }
+                                ),
+                                cell(col, row, i)
+                              ]
+                            },
+                            col.key
+                          ))
+                        }
+                      )
+                    ]
+                  },
+                  section.key || index
+                ) : null;
+              }),
+              expandable && expand(row, i),
+              expandable && state.expanded.includes(state.key(row, i)) && /* @__PURE__ */ jsx44(
+                View37,
+                {
+                  style: {
+                    borderTopWidth: tokens43.border.defaultWidth,
+                    borderTopColor: colors.border,
+                    paddingTop: tokens43.dimension.value8,
+                    marginTop: tokens43.dimension.value4
+                  },
+                  children: content(renderExpand == null ? void 0 : renderExpand(row, i))
+                }
+              ),
+              actions && !actions.inlineInCard && /* @__PURE__ */ jsx44(
+                View37,
+                {
+                  style: {
+                    borderTopWidth: tokens43.border.defaultWidth,
+                    borderTopColor: colors.border,
+                    paddingTop: tokens43.dimension.value8,
+                    marginTop: tokens43.dimension.value8,
+                    alignItems: "flex-end"
+                  },
+                  children: /* @__PURE__ */ jsx44(View37, { style: { alignSelf: "flex-end" }, children: cell(actions, row, i) })
+                }
+              )
+            ]
+          },
+          state.key(row, i)
+        )),
+        !initialLoading && !state.rows.length && /* @__PURE__ */ jsx44(View37, { style: { padding: tokens43.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
+          color: colors.textTertiary
+        }) })
+      ]
+    }
+  );
 }
 
 // packages/native/src/table-view.tsx
@@ -7671,6 +7654,9 @@ import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
 function KjunTable(props) {
   const {
     skeletonRows = 8,
+    skeleton = true,
+    loadingText = "\uB85C\uB529 \uC911...",
+    loadingDelay = 0,
     emptyText = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
     hoverable = true,
     searchable = false,
@@ -7691,7 +7677,7 @@ function KjunTable(props) {
     onRowClick,
     onRetry
   } = props;
-  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), mobile = useWindowDimensions7().width < tokens44.table.mobileBreakpoint;
+  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), revealed = useLoadingReveal(query.initialLoading, skeleton ? loadingDelay : 0), mobile = useWindowDimensions7().width < tokens44.table.mobileBreakpoint;
   const layout = tablePresentation(props, mobile);
   const { card, visible } = layout;
   const cell = (col, row, index, role) => {
@@ -7770,8 +7756,11 @@ function KjunTable(props) {
             refreshing: query.queryRefreshing,
             loadingPadding: "none",
             onRetry,
+            loading: skeleton ? void 0 : props.loading,
+            loadingText,
+            loadingDelay: skeleton ? 0 : loadingDelay,
             children: [
-              card ? /* @__PURE__ */ jsx45(TableCards, { ...{ initialLoading: query.initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, layout } }) : /* @__PURE__ */ jsx45(TableGrid, { ...{ initialLoading: query.initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, compact, striped, hoverable }, sortable: props.sortable }),
+              card ? /* @__PURE__ */ jsx45(TableCards, { ...{ initialLoading: query.initialLoading, skeletonRows, skeletonHidden: query.initialLoading && !revealed, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, layout } }) : /* @__PURE__ */ jsx45(TableGrid, { ...{ initialLoading: query.initialLoading, skeletonRows, skeletonHidden: query.initialLoading && !revealed, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, compact, striped, hoverable }, sortable: props.sortable }),
               pagination && /* @__PURE__ */ jsx45(
                 KjunPagination,
                 {
@@ -7832,12 +7821,13 @@ function KjunKpiHero(props) {
     secondary = [],
     animated = true,
     size = "md",
+    surface = "card",
     aside,
     formatter,
     deltaFormatter,
     renderSecondary
   } = props;
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = useWindowDimensions8().width <= tokens45.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), windowWidth = useWindowDimensions8().width, mobile = windowWidth <= tokens45.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
   const geometry2 = tokens45.extensions.kpiHero;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
   const numeric = {
@@ -7867,10 +7857,13 @@ function KjunKpiHero(props) {
     {
       accessibilityState: { busy: loading },
       style: {
-        paddingVertical: spec.paddingY,
-        paddingHorizontal: spec.paddingX,
-        backgroundColor: colors.surface,
-        borderRadius: geometry2.radius
+        // surface="none" sits inside the app's own card or list, so it drops its own card box.
+        ...surface === "none" ? {} : {
+          paddingVertical: spec.paddingY,
+          paddingHorizontal: spec.paddingX,
+          backgroundColor: colors.surface,
+          borderRadius: geometry2.radius
+        }
       },
       children: [
         /* @__PURE__ */ jsxs34(
@@ -7953,70 +7946,75 @@ function KjunKpiHero(props) {
               borderTopWidth: tokens45.border.defaultWidth,
               borderTopColor: colors.border
             },
-            children: secondary.map((item, i) => /* @__PURE__ */ jsxs34(
-              View40,
-              {
-                style: mobile && !small ? {
-                  flex: 1,
-                  minWidth: 0,
-                  paddingLeft: i ? geometry2.itemPadding : 0,
-                  paddingRight: i === secondary.length - 1 ? 0 : geometry2.itemPadding,
-                  borderLeftWidth: i ? tokens45.border.defaultWidth : 0,
-                  borderLeftColor: colors.border
-                } : { minWidth: 0, maxWidth: "100%", flexShrink: 1 },
-                children: [
-                  /* @__PURE__ */ jsx47(
-                    KText,
-                    {
-                      style: {
-                        color: colors.textTertiary,
-                        ...typeStyle("caption"),
-                        marginBottom: spec.secondaryLabelGap
-                      },
-                      children: item.label
-                    }
-                  ),
-                  loading ? /* @__PURE__ */ jsx47(
-                    KjunSkeleton,
-                    {
-                      type: "block",
-                      height: typeStyle("numberMd").lineHeight,
-                      width: geometry2.secondarySkeletonWidth
-                    }
-                  ) : (renderSecondary == null ? void 0 : renderSecondary(item, i)) || /* @__PURE__ */ jsx47(
-                    KpiNumberLine,
-                    {
-                      prefix: item.prefix,
-                      suffix: item.suffix,
-                      prefixGap: geometry2.secondaryAffixGap,
-                      suffixGap: geometry2.secondaryAffixGap,
-                      unitStyle: typeStyle("caption"),
-                      style: { ...numeric, ...typeStyle("numberMd"), color: item.valueColor || (item.semantic === "price" && Number(item.value) !== 0 ? direction(Number(item.value)) : colors.text) },
-                      children: kpiFormat(item)
-                    }
-                  ),
-                  item.desc && (loading ? /* @__PURE__ */ jsx47(
-                    KjunSkeleton,
-                    {
-                      type: "block",
-                      width: geometry2.descriptionSkeletonWidth,
-                      height: typeStyle("caption").lineHeight
-                    }
-                  ) : /* @__PURE__ */ jsx47(
-                    KText,
-                    {
-                      style: {
-                        ...typeStyle("caption"),
-                        marginTop: small ? geometry2.sm.descriptionGap : geometry2.md.descriptionGap,
-                        color: item.descColor || colors.textTertiary
-                      },
-                      children: item.desc
-                    }
-                  ))
-                ]
-              },
-              i
-            ))
+            children: secondary.map((item, i) => {
+              const columns = mobile && !small && windowWidth <= tokens45.responsive.kpiHeroSecondary && secondary.length >= 3 ? 2 : 0;
+              const first = columns ? i % columns === 0 : i === 0;
+              const last = columns ? i % columns === columns - 1 || i === secondary.length - 1 : i === secondary.length - 1;
+              return /* @__PURE__ */ jsxs34(
+                View40,
+                {
+                  style: mobile && !small ? {
+                    ...columns ? { width: `${100 / columns}%`, marginTop: i >= columns ? spec.secondaryPadding : 0 } : { flex: 1 },
+                    minWidth: 0,
+                    paddingLeft: first ? 0 : geometry2.itemPadding,
+                    paddingRight: last ? 0 : geometry2.itemPadding,
+                    borderLeftWidth: first ? 0 : tokens45.border.defaultWidth,
+                    borderLeftColor: colors.border
+                  } : { minWidth: 0, maxWidth: "100%", flexShrink: 1 },
+                  children: [
+                    /* @__PURE__ */ jsx47(
+                      KText,
+                      {
+                        style: {
+                          color: colors.textTertiary,
+                          ...typeStyle("caption"),
+                          marginBottom: spec.secondaryLabelGap
+                        },
+                        children: item.label
+                      }
+                    ),
+                    loading ? /* @__PURE__ */ jsx47(
+                      KjunSkeleton,
+                      {
+                        type: "block",
+                        height: typeStyle("numberMd").lineHeight,
+                        width: geometry2.secondarySkeletonWidth
+                      }
+                    ) : (renderSecondary == null ? void 0 : renderSecondary(item, i)) || /* @__PURE__ */ jsx47(
+                      KpiNumberLine,
+                      {
+                        prefix: item.prefix,
+                        suffix: item.suffix,
+                        prefixGap: geometry2.secondaryAffixGap,
+                        suffixGap: geometry2.secondaryAffixGap,
+                        unitStyle: typeStyle("caption"),
+                        style: { ...numeric, ...typeStyle("numberMd"), color: item.valueColor || (item.semantic === "price" && Number(item.value) !== 0 ? direction(Number(item.value)) : colors.text) },
+                        children: kpiFormat(item)
+                      }
+                    ),
+                    item.desc && (loading ? /* @__PURE__ */ jsx47(
+                      KjunSkeleton,
+                      {
+                        type: "block",
+                        width: geometry2.descriptionSkeletonWidth,
+                        height: typeStyle("caption").lineHeight
+                      }
+                    ) : /* @__PURE__ */ jsx47(
+                      KText,
+                      {
+                        style: {
+                          ...typeStyle("caption"),
+                          marginTop: small ? geometry2.sm.descriptionGap : geometry2.md.descriptionGap,
+                          color: item.descColor || colors.textTertiary
+                        },
+                        children: item.desc
+                      }
+                    ))
+                  ]
+                },
+                i
+              );
+            })
           }
         )
       ]
@@ -8026,7 +8024,7 @@ function KjunKpiHero(props) {
 
 // packages/native/src/kpi-row.tsx
 import { tokens as tokens46 } from "@kjun-ui/tokens";
-import { useState as useState35 } from "react";
+import { useState as useState37 } from "react";
 import {
   Text as Text6,
   View as View41,
@@ -8037,6 +8035,7 @@ function KjunKpiRow({
   loading = false,
   items,
   size = "md",
+  surface = "card",
   mobileSummary = true,
   onItemClick,
   renderValue
@@ -8044,7 +8043,7 @@ function KjunKpiRow({
   const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = useWindowDimensions9().width <= tokens46.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
   const geometry2 = tokens46.extensions.kpiRow;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
-  const [width, setWidth] = useState35(0);
+  const [width, setWidth] = useState37(0);
   const paddingX = summary ? geometry2.summary.paddingX : spec.paddingX;
   const gapX = summary ? geometry2.summary.gapX : 0;
   const explicit = items.some(
@@ -8085,10 +8084,13 @@ function KjunKpiRow({
       style: {
         flexDirection: "row",
         flexWrap: mobile ? "wrap" : "nowrap",
-        paddingVertical: summary ? geometry2.summary.paddingY : spec.paddingY,
-        paddingHorizontal: paddingX,
-        borderRadius: geometry2.radius,
-        backgroundColor: colors.surface,
+        // surface="none" sits inside the app's own card or list, so it drops its own card box.
+        ...surface === "none" ? {} : {
+          paddingVertical: summary ? geometry2.summary.paddingY : spec.paddingY,
+          paddingHorizontal: paddingX,
+          borderRadius: geometry2.radius,
+          backgroundColor: colors.surface
+        },
         rowGap: summary ? geometry2.summary.gapY : 0,
         columnGap: gapX
       },
@@ -8260,7 +8262,7 @@ import { tokens as tokens48 } from "@kjun-ui/tokens";
 import { ScrollView as ScrollView10, View as View43 } from "react-native";
 
 // shared/package-runtime/market-cards.ts
-import { useEffect as useEffect24, useRef as useRef32, useState as useState36 } from "react";
+import { useEffect as useEffect25, useRef as useRef32, useState as useState38 } from "react";
 function useMarketCardsModel(props, persistence) {
   const {
     columns,
@@ -8276,7 +8278,7 @@ function useMarketCardsModel(props, persistence) {
     sortKey: c.sortable ? metricConfig[c.key].sortKey : null,
     isDefaultSort: c.defaultSort
   }));
-  const [key, setKey] = useState36(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
+  const [key, setKey] = useState38(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
   const mounted = useRef32("");
   const save = (key2) => {
     var _a;
@@ -8285,7 +8287,7 @@ function useMarketCardsModel(props, persistence) {
     } catch (e) {
     }
   };
-  useEffect24(() => {
+  useEffect25(() => {
     var _a, _b;
     if (mounted.current === restoreSignature) return;
     mounted.current = restoreSignature;
@@ -8527,7 +8529,7 @@ function KjunMarketCards(props) {
           ...props,
           loadingPadding: "none",
           empty: !rows.length,
-          loadingContent: /* @__PURE__ */ jsx50(KjunListSkeleton, { variant: "compact" }),
+          loadingContent: props.skeleton === false ? void 0 : /* @__PURE__ */ jsx50(KjunListSkeleton, { variant: "compact" }),
           emptyContent: /* @__PURE__ */ jsx50(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
           children: /* @__PURE__ */ jsxs37(View43, { children: [
             state.pill && /* @__PURE__ */ jsx50(KText, { style: { textAlign: "right", paddingHorizontal: tokens48.dimension.value16, paddingVertical: tokens48.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
@@ -8638,7 +8640,7 @@ function KjunMarketSimpleList(props) {
         loadingPadding: "none",
         empty: !rows.length,
         emptyText: emptyMessage,
-        loadingContent: /* @__PURE__ */ jsx51(KjunListSkeleton, {}),
+        loadingContent: props.skeleton === false ? void 0 : /* @__PURE__ */ jsx51(KjunListSkeleton, {}),
         emptyContent: /* @__PURE__ */ jsx51(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
         children: /* @__PURE__ */ jsx51(View44, { children: rows.map((row, i) => {
           var _a, _b;
@@ -8765,9 +8767,9 @@ function KjunMarketListPanel({
 
 // packages/native/src/market-table.tsx
 import { tokens as tokens51 } from "@kjun-ui/tokens";
-import { useId as useId10, useState as useState37 } from "react";
+import { useId as useId10, useState as useState39 } from "react";
 import { ScrollView as ScrollView11, View as View46 } from "react-native";
-import Svg8, { Defs as Defs4, LinearGradient as LinearGradient4, Rect as Rect5, Stop as Stop4 } from "react-native-svg";
+import Svg8, { Defs as Defs4, LinearGradient as LinearGradient4, Rect as Rect4, Stop as Stop4 } from "react-native-svg";
 import { jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
 function KjunMarketTable(props) {
   const {
@@ -8851,7 +8853,7 @@ function KjunMarketTable(props) {
     );
   };
   const layout = useMarketLayout(columns, showActions);
-  const [scroll, setScroll] = useState37({ viewport: 0, x: 0 }), fadeId = "kjun-market-fade-" + useId10().replace(/[^a-z0-9]/gi, "");
+  const [scroll, setScroll] = useState39({ viewport: 0, x: 0 }), fadeId = "kjun-market-fade-" + useId10().replace(/[^a-z0-9]/gi, "");
   const tableQuote = { price: {}, change: { fontWeight: typeStyle("body").fontWeight } };
   return /* @__PURE__ */ jsxs40(
     View46,
@@ -8869,7 +8871,7 @@ function KjunMarketTable(props) {
             loadingPadding: "none",
             empty: !rows.length,
             emptyText: emptyMessage,
-            loadingContent: /* @__PURE__ */ jsx53(KjunMarketTableSkeleton, { columns, showActions }),
+            loadingContent: props.skeleton === false ? void 0 : /* @__PURE__ */ jsx53(KjunMarketTableSkeleton, { columns, showActions }),
             emptyContent: /* @__PURE__ */ jsx53(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
             children: /* @__PURE__ */ jsx53(MarketQuoteTypeContext.Provider, { value: tableQuote, children: /* @__PURE__ */ jsxs40(View46, { style: { position: "relative", minWidth: 0 }, children: [
               /* @__PURE__ */ jsx53(
@@ -9061,7 +9063,7 @@ function KjunMarketTable(props) {
                   /* @__PURE__ */ jsx53(Stop4, { offset: "0", stopColor: colors.surface, stopOpacity: 0 }),
                   /* @__PURE__ */ jsx53(Stop4, { offset: "1", stopColor: colors.surface, stopOpacity: 1 })
                 ] }) }),
-                /* @__PURE__ */ jsx53(Rect5, { width: "100%", height: "100%", fill: `url(#${fadeId})` })
+                /* @__PURE__ */ jsx53(Rect4, { width: "100%", height: "100%", fill: `url(#${fadeId})` })
               ] }) })
             ] }) })
           }
@@ -9075,7 +9077,7 @@ function KjunMarketTable(props) {
 // packages/native/src/list.tsx
 import { tokens as tokens52 } from "@kjun-ui/tokens";
 import { Children as Children4, createContext as createContext20, useContext as useContext17 } from "react";
-import { View as View47, Platform as Platform24 } from "react-native";
+import { View as View47, Platform as Platform25 } from "react-native";
 import { Fragment as Fragment18, jsx as jsx54, jsxs as jsxs41 } from "react/jsx-runtime";
 var LastListRow = createContext20(false);
 function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, onPress }) {
@@ -9090,8 +9092,8 @@ function KjunListRow({ title, description, leading, trailing, actions, href, dis
   ] });
   const style = { flex: 1, minWidth: 0, minHeight: tokens52.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: tokens52.extensions.list.gap, padding: tokens52.extensions.list.padding };
   return /* @__PURE__ */ jsxs41(View47, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: tokens52.extensions.list.gap, borderBottomWidth: last ? 0 : tokens52.border.defaultWidth, borderBottomColor: colors.divider }, children: [
-    onPress || href ? /* @__PURE__ */ jsx54(AccessiblePressable, { ...Platform24.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? tokens52.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx54(View47, { style, children: parts }),
-    actions && /* @__PURE__ */ jsx54(View47, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform24.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens52.extensions.list.actionsGap, paddingRight: tokens52.extensions.list.actionsPadding, opacity: disabled ? tokens52.states.opacity.disabled : 1 }, children: content(actions) })
+    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 ? tokens52.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx54(View47, { style, children: parts }),
+    actions && /* @__PURE__ */ jsx54(View47, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform25.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens52.extensions.list.actionsGap, paddingRight: tokens52.extensions.list.actionsPadding, opacity: disabled ? tokens52.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
 function KjunListSection({ title, description, actions, children, ariaLabel }) {
@@ -9110,16 +9112,16 @@ function KjunListSection({ title, description, actions, children, ariaLabel }) {
 
 // packages/native/src/app-navigation.tsx
 import { tokens as tokens53 } from "@kjun-ui/tokens";
-import { Children as Children5, Fragment as Fragment19, isValidElement as isValidElement7, useState as useState38 } from "react";
-import { View as View48, Platform as Platform25 } from "react-native";
+import { Children as Children5, Fragment as Fragment19, isValidElement as isValidElement7, useState as useState40 } from "react";
+import { View as View48, Platform as Platform26 } from "react-native";
 import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
 function KjunTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
   const { colors } = useKjunStyles();
   const geometry2 = tokens53.extensions.topNavigation;
   const titleInset = Math.max(0, (geometry2.controlSize - tokens53.typography.sectionTitle.lineHeightPx) / 2);
-  const wrapping = Platform25.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
+  const wrapping = Platform26.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   const edgeInset = (geometry2.controlSize - geometry2.iconSize) / 2;
-  const [iconEdges, setIconEdges] = useState38({ leading: false, trailing: false });
+  const [iconEdges, setIconEdges] = useState40({ leading: false, trailing: false });
   const square = (key) => (event) => {
     const { width, height } = event.nativeEvent.layout;
     const next = Math.abs(width - height) < 1 && Math.abs(height - geometry2.controlSize) < 1;
@@ -9164,8 +9166,8 @@ function KjunBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\u
       AccessiblePressable,
       {
         focusRingInset: true,
-        ...Platform25.OS === "web" ? { href: item.disabled ? void 0 : item.href, "aria-current": selected ? "page" : void 0 } : {},
-        accessibilityRole: Platform25.OS === "web" && item.href ? "link" : "button",
+        ...Platform26.OS === "web" ? { href: item.disabled ? void 0 : item.href, "aria-current": selected ? "page" : void 0 } : {},
+        accessibilityRole: Platform26.OS === "web" && item.href ? "link" : "button",
         accessibilityLabel: item.label + (item.badge != null ? ", " + item.badge : ""),
         accessibilityState: { selected, disabled: !!item.disabled },
         disabled: item.disabled,
@@ -9199,10 +9201,10 @@ function KjunBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\u
 }
 function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = false }) {
   const { colors } = useKjunStyles();
-  const [width, setWidth] = useState38(0);
+  const [width, setWidth] = useState40(0);
   const geometry2 = tokens53.extensions.navigation;
   const wide = width >= tokens53.responsive.bottomAction + geometry2.padding * 2;
-  const wrapping = Platform25.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
+  const wrapping = Platform26.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   if (keyboardVisible && hideOnKeyboard) return null;
   return /* @__PURE__ */ jsx55(BottomActionBarContext.Provider, { value: !wide, children: /* @__PURE__ */ jsxs42(View48, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: {
     flexShrink: 0,
@@ -9221,7 +9223,7 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
 }
 
 // packages/native/src/media.tsx
-import { useRef as useRef33, useState as useState39 } from "react";
+import { useRef as useRef33, useState as useState41 } from "react";
 import { Image, View as View49 } from "react-native";
 import { tokens as tokens54 } from "@kjun-ui/tokens";
 import { jsx as jsx56 } from "react/jsx-runtime";
@@ -9230,7 +9232,7 @@ function KjunImage({ src, source, alt, decorative = false, aspectRatio = 1, fit
   const request = JSON.stringify(source != null ? source : src), current = useRef33({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
   const version = current.current.version;
-  const [failed, setFailed] = useState39(null);
+  const [failed, setFailed] = useState41(null);
   const missing = !source && !src;
   return /* @__PURE__ */ jsx56(View49, { accessibilityElementsHidden: decorative, importantForAccessibility: decorative ? "no-hide-descendants" : "auto", "aria-hidden": decorative || void 0, style: { width: "100%", aspectRatio: aspectRatio > 0 ? aspectRatio : 1, overflow: "hidden", backgroundColor: colors.secondary }, children: !missing && failed !== version ? /* @__PURE__ */ jsx56(Image, { source: source != null ? source : { uri: src }, accessible: !decorative, accessibilityLabel: decorative ? void 0 : alt, resizeMode: fit, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, onLoad: () => {
     if (version === current.current.version) onLoad == null ? void 0 : onLoad();
@@ -9260,8 +9262,8 @@ function KjunChip({ label, icon, removable = false, disabled = false, size = "md
 }
 
 // packages/native/src/range-input.tsx
-import { useEffect as useEffect25, useMemo as useMemo2, useRef as useRef34, useState as useState40 } from "react";
-import { PanResponder, Platform as Platform26, Pressable as Pressable3, View as View51 } from "react-native";
+import { useEffect as useEffect26, useMemo as useMemo2, useRef as useRef34, useState as useState42 } from "react";
+import { PanResponder, Platform as Platform27, Pressable as Pressable3, View as View51 } from "react-native";
 import { tokens as tokens56, createSliderDomain, sliderKey } from "@kjun-ui/tokens";
 import { jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
 var geometry = tokens56.extensions.slider;
@@ -9284,18 +9286,18 @@ function RangeInput({
   const valid = domain.valid && (!Array.isArray(value) || value.length === 2) && values.every(domain.accepts) && (values.length === 1 || values[0] <= values[1]);
   const blocked = disabled || !valid;
   const effectiveMax = valid ? domain.snap(max) : min;
-  const [hovered, setHovered] = useState40(null);
-  const [dragging, setDragging] = useState40(null);
-  const [focused, setFocused] = useState40(null);
+  const [hovered, setHovered] = useState42(null);
+  const [dragging, setDragging] = useState42(null);
+  const [focused, setFocused] = useState42(null);
   const track = useRef34(null), measured = useRef34({ x: 0, width: 1 }), selected = useRef34(0), dirty = useRef34(false);
   const latest = useRef34(values);
   latest.current = values;
   const callbacks = useRef34({ onValueChange, onChangeCommit });
   callbacks.current = { onValueChange, onChangeCommit };
-  useEffect25(() => {
+  useEffect26(() => {
     if (!valid) console.warn("KJUN Slider: \uBC94\uC704\xB7step\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (blocked) {
       setDragging(null);
       setHovered(null);
@@ -9492,7 +9494,7 @@ function RangeInput({
                     setFocused(null);
                     commit();
                   },
-                  ...Platform26.OS === "web" ? {
+                  ...Platform27.OS === "web" ? {
                     "aria-valuenow": number,
                     "aria-valuemin": index === 1 ? values[0] : min,
                     "aria-valuemax": values.length === 2 && index === 0 ? values[1] : domain.snap(max),
@@ -9516,7 +9518,7 @@ function RangeInput({
                     alignItems: "center",
                     justifyContent: "center",
                     zIndex: focused === index || dragging === index ? 1 : 0,
-                    ...Platform26.OS === "web" ? {
+                    ...Platform27.OS === "web" ? {
                       outlineStyle: "solid",
                       outlineWidth: 0,
                       cursor: blocked ? "default" : dragging === index ? "grabbing" : "grab"
@@ -9533,7 +9535,7 @@ function RangeInput({
                         borderWidth: tokens56.border.controlWidth,
                         borderColor: !blocked && dragging === index ? colors.brandActive : !blocked && hovered === index ? colors.brandHover : colors.brand,
                         backgroundColor: colors.surface,
-                        ...Platform26.OS === "web" && !blocked && focused === index ? {
+                        ...Platform27.OS === "web" && !blocked && focused === index ? {
                           outlineStyle: "solid",
                           outlineWidth: tokens56.states.focus.width,
                           outlineOffset: tokens56.states.focus.choiceOffset,
@@ -9560,8 +9562,8 @@ function KjunRangeSlider(props) {
 }
 
 // packages/native/src/quantity-stepper.tsx
-import { useEffect as useEffect26, useRef as useRef35, useState as useState41 } from "react";
-import { Platform as Platform27, View as View52 } from "react-native";
+import { useEffect as useEffect27, useRef as useRef35, useState as useState43 } from "react";
+import { Platform as Platform28, View as View52 } from "react-native";
 import { createNumberDomain, quantityKeyAction, tokens as tokens57 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/component-icons.ts
@@ -9582,16 +9584,16 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const increaseStyle = { ...buttonStyle, borderRadius: 0, borderTopRightRadius: outer, borderBottomRightRadius: outer };
   const domain = createNumberDomain({ min, max, step, precision }), valid = domain.valid && domain.accepts(value), blocked = disabled || !valid;
   const surface = useFieldSurface(size, { disabled: blocked, invalid });
-  const [draft, setDraft] = useState41(String(value));
+  const [draft, setDraft] = useState43(String(value));
   const inputRef = useRef35(null);
   const composing = useRef35(false), dirty = useRef35(false), accepted = useRef35(value);
   const cancelledEscape = useRef35(false);
-  useEffect26(() => {
+  useEffect27(() => {
     setDraft(String(value));
     accepted.current = value;
     dirty.current = false;
   }, [value, precision, min, max, step]);
-  useEffect26(() => {
+  useEffect27(() => {
     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) => {
@@ -9636,8 +9638,8 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     dirty.current = true;
     setDraft(text);
   } };
-  useEffect26(() => {
-    if (Platform27.OS !== "web") return;
+  useEffect27(() => {
+    if (Platform28.OS !== "web") return;
     const input = inputRef.current;
     const keydown = (event) => handlers.current.key(event);
     const keyup = (event) => {
@@ -9666,7 +9668,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     };
   }, []);
   const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: tokens57.input[size].height, marginTop: -tokens57.input[size].height / 2, borderRadius: surface.spec.radius };
-  const hug = Platform27.OS === "web" && !block ? { width: "fit-content" } : {};
+  const hug = Platform28.OS === "web" && !block ? { width: "fit-content" } : {};
   return /* @__PURE__ */ jsx59(IconFallbacks, { icons: componentIcons, children: /* @__PURE__ */ jsxs45(View52, { style: { flexDirection: "row", alignItems: "center", alignSelf: block ? "stretch" : "flex-start", maxWidth: "100%", borderRadius: surface.spec.radius, ...hug }, children: [
     /* @__PURE__ */ jsx59(View52, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, backgroundColor: colors.inputBg } }),
     /* @__PURE__ */ jsx59(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx59(KjunButton, { size, style: decreaseStyle, variant: "ghost", ariaLabel: "\uC218\uB7C9 \uC904\uC774\uAE30", disabled: blocked || value <= min, onPress: () => move(-1), prefixIcon: "minus" }) }),
@@ -9697,8 +9699,8 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
           surface.setFocused(false);
           commit();
         },
-        onSubmitEditing: Platform27.OS === "web" ? void 0 : commit,
-        ...Platform27.OS === "web" ? { "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-labelledby": labelledBy, "aria-describedby": field == null ? void 0 : field.describedBy, "aria-invalid": invalid || void 0, "aria-required": (field == null ? void 0 : field.required) || void 0 } : { onKeyPress: key },
+        onSubmitEditing: Platform28.OS === "web" ? void 0 : commit,
+        ...Platform28.OS === "web" ? { "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-labelledby": labelledBy, "aria-describedby": field == null ? void 0 : field.describedBy, "aria-invalid": invalid || void 0, "aria-required": (field == null ? void 0 : field.required) || void 0 } : { onKeyPress: key },
         style: { width: "100%", minWidth: 0, ...surface.style, borderRadius: 0, borderTopColor: "transparent", borderBottomColor: "transparent", borderLeftColor: "transparent", borderRightColor: "transparent", backgroundColor: !blocked && (surface.active || surface.hovered) ? colors.hover : "transparent", outlineWidth: 0, color: surface.ink, fontFamily, ...inputTypeStyle(size), textAlign: "center", paddingHorizontal: surface.spec.padding - tokens57.border.controlWidth, paddingVertical: 0 }
       }
     ) }),
@@ -9708,7 +9710,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
 }
 
 // packages/native/src/time-picker.tsx
-import { Fragment as Fragment20, useEffect as useEffect27, useId as useId11, useMemo as useMemo3, useRef as useRef36, useState as useState42 } from "react";
+import { Fragment as Fragment20, useEffect as useEffect28, useId as useId11, useMemo as useMemo3, useRef as useRef36, useState as useState44 } from "react";
 import { View as View53 } from "react-native";
 import { createTimeDomain, tokens as tokens58 } from "@kjun-ui/tokens";
 import { jsx as jsx60, jsxs as jsxs46 } from "react/jsx-runtime";
@@ -9716,11 +9718,11 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
   const geometry2 = tokens58.extensions.timePicker, spec = tokens58.input[size];
   const { colors } = useKjunStyles();
   const first = useRef36(null);
-  const [focused, setFocused] = useState42(false), [opened, setOpened] = useState42(null);
+  const [focused, setFocused] = useState44(false), [opened, setOpened] = useState44(null);
   const field = useKjunField(), uid = useId11();
   const fieldId = (field == null ? void 0 : field.id) || `kjun-time-${uid}`;
   const domain = useMemo3(() => createTimeDomain({ precision, min, max, minuteStep, secondStep }), [precision, min, max, minuteStep, secondStep]), valid = domain.valid && domain.accepts(value);
-  useEffect27(() => {
+  useEffect28(() => {
     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) => {