@kjun-ui/native 0.7.0 → 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,
           {
@@ -6279,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 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";
+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";
@@ -6339,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",
@@ -6440,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;
+  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) return;
+    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();
@@ -6467,92 +6448,67 @@ 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 }) })
-      ]
+        )
+      ] })
     }
   );
 }
@@ -6576,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 useState32 } 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";
@@ -6622,7 +6578,7 @@ function createNumberMotion(apply) {
 
 // shared/package-runtime/use-number-motion.ts
 function useNumberMotion(value, animated, fromPrevious, reduced) {
-  const [display, setDisplay] = useState32(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(() => {
@@ -7109,7 +7065,7 @@ function KjunSparkline({
 
 // shared/package-runtime/table.ts
 import { nextTableSort } from "@kjun-ui/tokens";
-import { useEffect as useEffect24, useRef as useRef31, useState as useState34 } from "react";
+import { useEffect as useEffect24, useRef as useRef31, useState as useState35 } from "react";
 
 // shared/package-runtime/table-model.ts
 function getValue(row, key) {
@@ -7153,10 +7109,10 @@ function useTableModel(props) {
     expandSingle = false,
     onExpandedRowsChange
   } = props;
-  const [internalSort, setSort] = useState34({
+  const [internalSort, setSort] = useState35({
     key: "",
     order: "asc"
-  }), [internalExpanded, setExpanded] = useState34([]), [search, setSearch] = useState34(""), timer = useRef31(void 0);
+  }), [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 });
@@ -7311,14 +7267,14 @@ 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 useState35 } 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, 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] = useState35({ 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);
@@ -7505,7 +7461,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
         /* @__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})` })
     ] }) })
   ] });
 }
@@ -8068,7 +8024,7 @@ function KjunKpiHero(props) {
 
 // packages/native/src/kpi-row.tsx
 import { tokens as tokens46 } from "@kjun-ui/tokens";
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 import {
   Text as Text6,
   View as View41,
@@ -8087,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] = useState36(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(
@@ -8306,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 useEffect25, useRef as useRef32, useState as useState37 } from "react";
+import { useEffect as useEffect25, useRef as useRef32, useState as useState38 } from "react";
 function useMarketCardsModel(props, persistence) {
   const {
     columns,
@@ -8322,7 +8278,7 @@ function useMarketCardsModel(props, persistence) {
     sortKey: c.sortable ? metricConfig[c.key].sortKey : null,
     isDefaultSort: c.defaultSort
   }));
-  const [key, setKey] = useState37(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
+  const [key, setKey] = useState38(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
   const mounted = useRef32("");
   const save = (key2) => {
     var _a;
@@ -8811,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 useState38 } 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 {
@@ -8897,7 +8853,7 @@ function KjunMarketTable(props) {
     );
   };
   const layout = useMarketLayout(columns, showActions);
-  const [scroll, setScroll] = useState38({ 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,
@@ -9107,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})` })
               ] }) })
             ] }) })
           }
@@ -9121,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 }) {
@@ -9136,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 }) {
@@ -9156,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 useState39 } 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] = useState39({ 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;
@@ -9210,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,
@@ -9245,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] = useState39(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,
@@ -9267,7 +9223,7 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
 }
 
 // packages/native/src/media.tsx
-import { useRef as useRef33, useState as useState40 } 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";
@@ -9276,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] = useState40(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();
@@ -9306,8 +9262,8 @@ function KjunChip({ label, icon, removable = false, disabled = false, size = "md
 }
 
 // packages/native/src/range-input.tsx
-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 { 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;
@@ -9330,9 +9286,9 @@ 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] = useState41(null);
-  const [dragging, setDragging] = useState41(null);
-  const [focused, setFocused] = useState41(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;
@@ -9538,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),
@@ -9562,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"
@@ -9579,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,
@@ -9606,8 +9562,8 @@ function KjunRangeSlider(props) {
 }
 
 // packages/native/src/quantity-stepper.tsx
-import { useEffect as useEffect27, useRef as useRef35, useState as useState42 } 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
@@ -9628,7 +9584,7 @@ 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] = useState42(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);
@@ -9683,7 +9639,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     setDraft(text);
   } };
   useEffect27(() => {
-    if (Platform27.OS !== "web") return;
+    if (Platform28.OS !== "web") return;
     const input = inputRef.current;
     const keydown = (event) => handlers.current.key(event);
     const keyup = (event) => {
@@ -9712,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" }) }),
@@ -9743,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 }
       }
     ) }),
@@ -9754,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 useEffect28, useId as useId11, useMemo as useMemo3, useRef as useRef36, useState as useState43 } 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";
@@ -9762,7 +9718,7 @@ 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] = useState43(false), [opened, setOpened] = useState43(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);