@kjun-ui/native 0.7.0 → 0.8.1

package/dist/index.web.cjs

@@ -2417,36 +2417,6 @@ function KjunSkeleton({
             ))
           }
         ),
-        type === "chart" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: [frame, { height: height || import_tokens13.tokens.extensions.skeleton.chartHeight }], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            import_react_native16.View,
-            {
-              style: {
-                flex: 1,
-                flexDirection: "row",
-                alignItems: "flex-end",
-                justifyContent: "space-around",
-                gap: import_tokens13.tokens.extensions.skeleton.gap
-                // Bars stand on the axis line, like ChartSkeleton.
-              },
-              children: [40, 65, 50, 80, 60, 90, 75].map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                import_react_native16.Animated.View,
-                {
-                  style: {
-                    flex: 1,
-                    maxWidth: import_tokens13.tokens.extensions.skeleton.chartBarMaxWidth,
-                    height: `${h}%`,
-                    backgroundColor: shimmer,
-                    borderTopLeftRadius: import_tokens13.tokens.radius.radius4,
-                    borderTopRightRadius: import_tokens13.tokens.radius.radius4
-                  }
-                },
-                i
-              ))
-            }
-          ),
-          block("100%", import_tokens13.tokens.extensions.skeleton.chartAxisHeight, { backgroundColor: colors.border })
-        ] }),
         type === "stat" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           import_react_native16.View,
           {
@@ -6511,6 +6481,24 @@ var import_react57 = require("react");
 var import_react_native42 = require("react-native");
 var import_react_native_svg5 = __toESM(require("react-native-svg"), 1);
 
+// 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;
+}
+var chartDonutRatio = 0.8;
+function chartDonutHole(height, thickness) {
+  return Math.max(0, height * chartDonutRatio - 2 * thickness);
+}
+function chartSkeletonKind(kind) {
+  return kind === "donut" || kind === "matrix" ? kind : "frame";
+}
+
 // packages/native/src/market-skeleton.tsx
 var import_tokens39 = require("@kjun-ui/tokens");
 var import_react_native41 = require("react-native");
@@ -6668,26 +6656,23 @@ function KjunFormSkeleton({
     }
   );
 }
+var chartPart = (name) => import_react_native42.Platform.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
+  kind: requestedKind = "frame",
+  height = import_tokens40.tokens.extensions.chartSkeleton.height,
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
-  kind = "line",
-  height = import_tokens40.tokens.extensions.chartSkeleton.height
+  skeleton = true,
+  loadingDelay = 0,
+  rows = 8,
+  columns = 14
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react57.useRef)(new import_react_native42.Animated.Value(1)).current;
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react57.useRef)(new import_react_native42.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react57.useState)(0), thickness = import_tokens40.tokens.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" };
   (0, import_react57.useEffect)(() => {
-    if (reduced) return;
+    if (reduced || !skeleton) return;
     const loop = import_react_native42.Animated.loop(
       import_react_native42.Animated.sequence([
-        import_react_native42.Animated.timing(opacity, {
-          toValue: 0.55,
-          duration: import_tokens40.tokens.motion.shimmer / 2,
-          useNativeDriver: true
-        }),
-        import_react_native42.Animated.timing(opacity, {
-          toValue: 1,
-          duration: import_tokens40.tokens.motion.shimmer / 2,
-          useNativeDriver: true
-        })
+        import_react_native42.Animated.timing(opacity, { toValue: 0.55, duration: import_tokens40.tokens.motion.shimmer / 2, useNativeDriver: true }),
+        import_react_native42.Animated.timing(opacity, { toValue: 1, duration: import_tokens40.tokens.motion.shimmer / 2, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -6695,92 +6680,68 @@ function KjunChartSkeleton({
       loop.stop();
       opacity.setValue(1);
     };
-  }, [opacity, reduced]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  }, [opacity, reduced, skeleton]);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     import_react_native42.Animated.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",
+      ...import_react_native42.Platform.OS === "web" ? { dataSet: { kjunChartKind: kind, skeleton: skeleton ? void 0 : "false" } } : {},
+      children: !skeleton ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native42.View, { ...chartPart("loading"), role: status, style: { alignItems: "center", gap: import_tokens40.tokens.dimension.value12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { ...hidden, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSpinner, { size: "md" }) }),
+        !!loadingText && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
         kind === "donut" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           import_react_native42.View,
           {
-            style: {
-              height: "80%",
-              aspectRatio: 1,
-              borderWidth: import_tokens40.tokens.extensions.chartSkeleton.donutThickness,
-              borderColor: colors.skeleton,
-              borderRadius: import_tokens40.tokens.radius.radius9999,
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSkeleton, { type: "block", width: import_tokens40.tokens.extensions.chartSkeleton.donutLabelWidth, height: import_tokens40.tokens.extensions.chartSkeleton.donutLabelHeight })
+            ...chartPart("donut"),
+            ...hidden,
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens40.tokens.radius.radius9999 }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-          import_react_native_svg5.default,
+        ) : kind === "matrix" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: import_tokens40.tokens.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { style: { flex: 1, flexDirection: "row", gap: import_tokens40.tokens.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_react_native42.View,
           {
-            viewBox: "0 0 600 240",
-            preserveAspectRatio: "none",
-            width: "100%",
-            height: "100%",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                import_react_native_svg5.Path,
-                {
-                  d: "M20 10V220H590 M20 65H590 M20 120H590 M20 175H590",
-                  fill: "none",
-                  stroke: colors.border,
-                  strokeWidth: 1
-                }
-              ),
-              kind === "line" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native_svg5.Path, { 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__ */ (0, import_jsx_runtime39.jsx)(import_react_native_svg5.G, { children: Array.from({ length: 14 }, (_2, col) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                import_react_native_svg5.Rect,
-                {
-                  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: import_tokens40.tokens.extensions.skeleton.lineRadius,
+              backgroundColor: colors.skeleton,
+              opacity: chartMatrixMuted(row, column) ? import_tokens40.tokens.states.opacity.pending : 1
+            }
+          },
+          column
+        )) }, row)) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { ...chartPart("plot"), ...hidden, style: { alignSelf: "stretch", flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native_svg5.default, { viewBox: chartFrameViewBox, preserveAspectRatio: "none", width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native_svg5.Path, { d: chartFramePath, fill: "none", stroke: colors.chartGrid, strokeWidth: import_tokens40.tokens.border.defaultWidth, vectorEffect: "non-scaling-stroke" }) }) }),
+        !!loadingText && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_react_native42.View,
+          {
+            ...chartPart("status"),
+            role: status,
+            accessibilityLiveRegion: status ? "polite" : void 0,
+            pointerEvents: "none",
+            style: { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              KText,
+              {
+                style: {
+                  ...typeStyle("body"),
+                  paddingHorizontal: import_tokens40.tokens.dimension.value12,
+                  paddingVertical: import_tokens40.tokens.dimension.value4,
+                  borderRadius: import_tokens40.tokens.radius.radius6,
+                  borderWidth: kind === "donut" ? 0 : import_tokens40.tokens.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__ */ (0, import_jsx_runtime39.jsxs)(import_react57.Fragment, { children: [
-                kind === "candle" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                  import_react_native_svg5.Path,
-                  {
-                    d: `M${55 + i * 75} ${195 - h}V${225 - h / 2}`,
-                    fill: "none",
-                    stroke: colors.skeleton,
-                    strokeWidth: 4
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                  import_react_native_svg5.Rect,
-                  {
-                    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__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { pointerEvents: "none", style: { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center", gap: import_tokens40.tokens.dimension.value12 }, children: !!loadingText && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KText, { style: { ...typeStyle("body"), paddingHorizontal: import_tokens40.tokens.dimension.value12, paddingVertical: import_tokens40.tokens.dimension.value4, borderRadius: import_tokens40.tokens.radius.radius6, backgroundColor: colors.surface, color: colors.textSecondary, maxWidth: "90%", textAlign: "center" }, children: loadingText }) })
-      ]
+        )
+      ] })
     }
   );
 }