@kjun-ui/native 0.6.1 → 0.7.0

package/dist/index.js

@@ -6109,12 +6109,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 +6148,7 @@ function KjunDataState({
   emptyIcon,
   emptyActionText,
   loadingText = "\uB85C\uB529 \uC911...",
+  loadingDelay = 0,
   retryText = "\uB2E4\uC2DC \uC2DC\uB3C4",
   size = "md",
   skeleton = false,
@@ -6146,7 +6162,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 +6195,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,7 +6279,7 @@ 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 { Fragment as Fragment11, useEffect as useEffect22, 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";
 
@@ -6290,9 +6308,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 };
 }
@@ -6428,7 +6446,7 @@ function KjunChartSkeleton({
   height = tokens37.extensions.chartSkeleton.height
 }) {
   const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef28(new Animated17.Value(1)).current;
-  useEffect21(() => {
+  useEffect22(() => {
     if (reduced) return;
     const loop = Animated17.loop(
       Animated17.sequence([
@@ -6540,7 +6558,7 @@ function KjunChartSkeleton({
 }
 
 // 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 +6576,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 useState32 } from "react";
 
 // shared/package-runtime/number-motion.ts
 import { tokens as tokens38 } from "@kjun-ui/tokens";
@@ -6604,7 +6622,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] = useState32(typeof value === "string" || fromPrevious || !animated || reduced ? value : 0);
   const motion = useRef29(null);
   if (!motion.current) motion.current = createNumberMotion(setDisplay);
   useLayoutEffect12(() => {
@@ -6790,6 +6808,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 +6819,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 +6888,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 +6901,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 +7109,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 useState34 } from "react";
 
 // shared/package-runtime/table-model.ts
 function getValue(row, key) {
@@ -7134,11 +7153,11 @@ function useTableModel(props) {
     expandSingle = false,
     onExpandedRowsChange
   } = props;
-  const [internalSort, setSort] = useState33({
+  const [internalSort, setSort] = useState34({
     key: "",
     order: "asc"
-  }), [internalExpanded, setExpanded] = useState33([]), [search, setSearch] = useState33(""), timer = useRef31(void 0);
-  useEffect23(() => () => clearTimeout(timer.current), []);
+  }), [internalExpanded, setExpanded] = useState34([]), [search, setSearch] = useState34(""), 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 +7311,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 { Fragment as Fragment14, useId as useId9, useState as useState35 } from "react";
 import Svg7, { Defs as Defs3, LinearGradient as LinearGradient3, Rect as Rect4, 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] = useState35({ 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,
       {
@@ -7507,6 +7526,7 @@ import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 function TableCards({
   initialLoading,
   skeletonRows,
+  skeletonHidden,
   state,
   onRowClick,
   selectable,
@@ -7521,149 +7541,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 +7698,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 +7721,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 +7800,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 +7865,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 +7901,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 +7990,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 +8068,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 useState36 } from "react";
 import {
   Text as Text6,
   View as View41,
@@ -8037,6 +8079,7 @@ function KjunKpiRow({
   loading = false,
   items,
   size = "md",
+  surface = "card",
   mobileSummary = true,
   onItemClick,
   renderValue
@@ -8044,7 +8087,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] = useState36(0);
   const paddingX = summary ? geometry2.summary.paddingX : spec.paddingX;
   const gapX = summary ? geometry2.summary.gapX : 0;
   const explicit = items.some(
@@ -8085,10 +8128,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 +8306,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 useState37 } from "react";
 function useMarketCardsModel(props, persistence) {
   const {
     columns,
@@ -8276,7 +8322,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] = useState37(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
   const mounted = useRef32("");
   const save = (key2) => {
     var _a;
@@ -8285,7 +8331,7 @@ function useMarketCardsModel(props, persistence) {
     } catch (e) {
     }
   };
-  useEffect24(() => {
+  useEffect25(() => {
     var _a, _b;
     if (mounted.current === restoreSignature) return;
     mounted.current = restoreSignature;
@@ -8527,7 +8573,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 +8684,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,7 +8811,7 @@ 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 useState38 } 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 { jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -8851,7 +8897,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] = useState38({ 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 +8915,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(
@@ -9110,7 +9156,7 @@ 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 { Children as Children5, Fragment as Fragment19, isValidElement as isValidElement7, useState as useState39 } from "react";
 import { View as View48, Platform as Platform25 } from "react-native";
 import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
 function KjunTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
@@ -9119,7 +9165,7 @@ function KjunTopNavigation({ title, description, leading, actions, safeAreaTop =
   const titleInset = Math.max(0, (geometry2.controlSize - tokens53.typography.sectionTitle.lineHeightPx) / 2);
   const wrapping = Platform25.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] = useState39({ 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;
@@ -9199,7 +9245,7 @@ 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] = useState39(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" } : {};
@@ -9221,7 +9267,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 useState40 } 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 +9276,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] = useState40(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,7 +9306,7 @@ 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 { useEffect as useEffect26, useMemo as useMemo2, useRef as useRef34, useState as useState41 } from "react";
 import { PanResponder, Platform as Platform26, 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";
@@ -9284,18 +9330,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] = useState41(null);
+  const [dragging, setDragging] = useState41(null);
+  const [focused, setFocused] = useState41(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);
@@ -9560,7 +9606,7 @@ function KjunRangeSlider(props) {
 }
 
 // packages/native/src/quantity-stepper.tsx
-import { useEffect as useEffect26, useRef as useRef35, useState as useState41 } from "react";
+import { useEffect as useEffect27, useRef as useRef35, useState as useState42 } from "react";
 import { Platform as Platform27, View as View52 } from "react-native";
 import { createNumberDomain, quantityKeyAction, tokens as tokens57 } from "@kjun-ui/tokens";
 
@@ -9582,16 +9628,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] = useState42(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,7 +9682,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     dirty.current = true;
     setDraft(text);
   } };
-  useEffect26(() => {
+  useEffect27(() => {
     if (Platform27.OS !== "web") return;
     const input = inputRef.current;
     const keydown = (event) => handlers.current.key(event);
@@ -9708,7 +9754,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 useState43 } 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 +9762,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] = useState43(false), [opened, setOpened] = useState43(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) => {