@kjun-ui/native 0.8.0 → 0.8.1

package/dist/index.cjs

@@ -6236,8 +6236,12 @@ function chartSkeletonCount(value) {
 function chartMatrixMuted(row, column) {
   return (row + column + 2) % 3 === 0;
 }
+var chartDonutRatio = 0.8;
 function chartDonutHole(height, thickness) {
-  return Math.max(0, height * 0.8 - 2 * 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
@@ -6399,7 +6403,7 @@ function KjunFormSkeleton({
 }
 var chartPart = (name) => import_react_native42.Platform.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
-  kind = "frame",
+  kind: requestedKind = "frame",
   height = import_tokens39.tokens.extensions.chartSkeleton.height,
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   skeleton = true,
@@ -6407,7 +6411,7 @@ function KjunChartSkeleton({
   rows = 8,
   columns = 14
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react53.useRef)(new import_react_native42.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react53.useState)(0), thickness = import_tokens39.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" };
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react53.useRef)(new import_react_native42.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react53.useState)(0), thickness = import_tokens39.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_react53.useEffect)(() => {
     if (reduced || !skeleton) return;
     const loop = import_react_native42.Animated.loop(
@@ -6439,7 +6443,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: "80%", aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens39.tokens.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens39.tokens.radius.radius9999 }
           }
         ) : kind === "matrix" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: import_tokens39.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_tokens39.tokens.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           import_react_native42.View,
@@ -6459,6 +6463,7 @@ function KjunChartSkeleton({
           {
             ...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)(

package/dist/index.js

@@ -6263,8 +6263,12 @@ function chartSkeletonCount(value) {
 function chartMatrixMuted(row, column) {
   return (row + column + 2) % 3 === 0;
 }
+var chartDonutRatio = 0.8;
 function chartDonutHole(height, thickness) {
-  return Math.max(0, height * 0.8 - 2 * 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
@@ -6426,7 +6430,7 @@ function KjunFormSkeleton({
 }
 var chartPart = (name) => Platform24.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
-  kind = "frame",
+  kind: requestedKind = "frame",
   height = tokens37.extensions.chartSkeleton.height,
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   skeleton = true,
@@ -6434,7 +6438,7 @@ function KjunChartSkeleton({
   rows = 8,
   columns = 14
 }) {
-  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" };
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef28(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState32(0), thickness = tokens37.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
   useEffect22(() => {
     if (reduced || !skeleton) return;
     const loop = Animated17.loop(
@@ -6466,7 +6470,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: "80%", aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens37.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens37.radius.radius9999 }
           }
         ) : 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,
@@ -6486,6 +6490,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("status"),
             role: status,
+            accessibilityLiveRegion: status ? "polite" : void 0,
             pointerEvents: "none",
             style: { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center" },
             children: /* @__PURE__ */ jsx39(

package/dist/index.web.cjs

@@ -6491,8 +6491,12 @@ function chartSkeletonCount(value) {
 function chartMatrixMuted(row, column) {
   return (row + column + 2) % 3 === 0;
 }
+var chartDonutRatio = 0.8;
 function chartDonutHole(height, thickness) {
-  return Math.max(0, height * 0.8 - 2 * 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
@@ -6654,7 +6658,7 @@ function KjunFormSkeleton({
 }
 var chartPart = (name) => import_react_native42.Platform.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
-  kind = "frame",
+  kind: requestedKind = "frame",
   height = import_tokens40.tokens.extensions.chartSkeleton.height,
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   skeleton = true,
@@ -6662,7 +6666,7 @@ function KjunChartSkeleton({
   rows = 8,
   columns = 14
 }) {
-  const { 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" };
+  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 || !skeleton) return;
     const loop = import_react_native42.Animated.loop(
@@ -6694,7 +6698,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: "80%", aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens40.tokens.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens40.tokens.radius.radius9999 }
           }
         ) : 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,
@@ -6714,6 +6718,7 @@ function KjunChartSkeleton({
           {
             ...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)(

package/dist/index.web.js

@@ -6518,8 +6518,12 @@ function chartSkeletonCount(value) {
 function chartMatrixMuted(row, column) {
   return (row + column + 2) % 3 === 0;
 }
+var chartDonutRatio = 0.8;
 function chartDonutHole(height, thickness) {
-  return Math.max(0, height * 0.8 - 2 * 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
@@ -6681,7 +6685,7 @@ function KjunFormSkeleton({
 }
 var chartPart = (name) => Platform24.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
-  kind = "frame",
+  kind: requestedKind = "frame",
   height = tokens38.extensions.chartSkeleton.height,
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   skeleton = true,
@@ -6689,7 +6693,7 @@ function KjunChartSkeleton({
   rows = 8,
   columns = 14
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef30(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens38.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" };
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef30(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens38.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
   useEffect22(() => {
     if (reduced || !skeleton) return;
     const loop = Animated17.loop(
@@ -6721,7 +6725,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: "80%", aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens38.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens38.radius.radius9999 }
           }
         ) : kind === "matrix" ? /* @__PURE__ */ jsx39(View33, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: tokens38.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ jsx39(View33, { style: { flex: 1, flexDirection: "row", gap: tokens38.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ jsx39(
           View33,
@@ -6741,6 +6745,7 @@ function KjunChartSkeleton({
           {
             ...chartPart("status"),
             role: status,
+            accessibilityLiveRegion: status ? "polite" : void 0,
             pointerEvents: "none",
             style: { position: "absolute", inset: 0, alignItems: "center", justifyContent: "center" },
             children: /* @__PURE__ */ jsx39(

package/dist/styles.css

@@ -3100,6 +3100,8 @@
   height: 100%;
 }
 .kjun-chart-skeleton-donut {
+  /* The hole is 80% − 2 × thickness only in border-box, whatever the app's reset. */
+  box-sizing: border-box;
   height: 80%;
   aspect-ratio: 1;
   border: var(--_kjun-extension-chart-skeleton-donut-thickness) solid var(--_kjun-color-skeleton);
@@ -3135,7 +3137,7 @@
 
 .kjun-chart-skeleton-status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--_kjun-extension-skeleton-gap); pointer-events:none; }
 .kjun-chart-skeleton-status>span { max-width:90%; padding:var(--_kjun-geometry-dimension-value4) var(--_kjun-geometry-dimension-value12); border-radius:var(--_kjun-geometry-radius-radius6); font-size:var(--_kjun-type-body-size); text-align:center; overflow-wrap:anywhere; background:var(--_kjun-color-surface); color:var(--_kjun-color-text-secondary); line-height: var(--_kjun-type-body-line); font-weight: var(--_kjun-type-body-weight); letter-spacing: var(--_kjun-type-body-tracking); border:var(--_kjun-border-default-width) solid var(--_kjun-color-chart-grid); }
-.kjun-chart-skeleton[data-kjun-chart-kind="donut"] .kjun-chart-skeleton-status>span { border:0; max-width:calc(80cqh - 2 * var(--_kjun-extension-chart-skeleton-donut-thickness)); }
+.kjun-chart-skeleton[data-kjun-chart-kind="donut"] .kjun-chart-skeleton-status>span { box-sizing:border-box; border:0; max-width:calc(80cqh - 2 * var(--_kjun-extension-chart-skeleton-donut-thickness)); }
 
 .kjun-data-status > .kjun-spinner { flex-shrink: 0; }
 .kjun-data-status > span:last-child { min-width: 0; overflow-wrap: anywhere; }

package/dist/types/packages/native/src/skeletons.d.cts

@@ -28,6 +28,6 @@ export interface KjunChartSkeletonProps {
     rows?: number;
     columns?: number;
 }
-export declare function KjunChartSkeleton({ kind, height, loadingText, skeleton, loadingDelay, rows, columns, }: KjunChartSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunChartSkeleton({ kind: requestedKind, height, loadingText, skeleton, loadingDelay, rows, columns, }: KjunChartSkeletonProps): import("react/jsx-runtime").JSX.Element;
 export { KjunMarketTableSkeleton } from "./market-skeleton.cjs";
 export type { KjunMarketTableSkeletonProps } from "./market-skeleton.cjs";

package/dist/types/packages/native/src/skeletons.d.ts

@@ -28,6 +28,6 @@ export interface KjunChartSkeletonProps {
     rows?: number;
     columns?: number;
 }
-export declare function KjunChartSkeleton({ kind, height, loadingText, skeleton, loadingDelay, rows, columns, }: KjunChartSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunChartSkeleton({ kind: requestedKind, height, loadingText, skeleton, loadingDelay, rows, columns, }: KjunChartSkeletonProps): import("react/jsx-runtime").JSX.Element;
 export { KjunMarketTableSkeleton } from "./market-skeleton.js";
 export type { KjunMarketTableSkeletonProps } from "./market-skeleton.js";

package/dist/types/shared/package-runtime/chart-skeleton.d.cts

@@ -8,5 +8,9 @@ export declare const chartSkeletonMaxCount = 100;
 export declare function chartSkeletonCount(value: number): number;
 /** Every third diagonal cell is drawn at the pending opacity so the matrix reads as a heatmap. */
 export declare function chartMatrixMuted(row: number, column: number): boolean;
-/** Inner diameter of the donut ring, which is 80% of the skeleton height. */
+/** Donut ring diameter as a share of the skeleton height; data-state.css repeats it as 80% and 80cqh. */
+export declare const chartDonutRatio = 0.8;
+/** Inner diameter of the donut ring. */
 export declare function chartDonutHole(height: number, thickness: number): number;
+/** Kinds removed in 0.8.0 (line, bar, candle, grid) or any other value draw, and are named, frame. */
+export declare function chartSkeletonKind(kind: unknown): KjunChartSkeletonKind;

package/dist/types/shared/package-runtime/chart-skeleton.d.ts

@@ -8,5 +8,9 @@ export declare const chartSkeletonMaxCount = 100;
 export declare function chartSkeletonCount(value: number): number;
 /** Every third diagonal cell is drawn at the pending opacity so the matrix reads as a heatmap. */
 export declare function chartMatrixMuted(row: number, column: number): boolean;
-/** Inner diameter of the donut ring, which is 80% of the skeleton height. */
+/** Donut ring diameter as a share of the skeleton height; data-state.css repeats it as 80% and 80cqh. */
+export declare const chartDonutRatio = 0.8;
+/** Inner diameter of the donut ring. */
 export declare function chartDonutHole(height: number, thickness: number): number;
+/** Kinds removed in 0.8.0 (line, bar, candle, grid) or any other value draw, and are named, frame. */
+export declare function chartSkeletonKind(kind: unknown): KjunChartSkeletonKind;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjun-ui/native",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "license": "MIT",
   "homepage": "https://ui.kjun.dev",
   "repository": {
@@ -47,8 +47,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@kjun-ui/tokens": "0.8.0",
-    "@kjun-ui/icons": "0.8.0"
+    "@kjun-ui/tokens": "0.8.1",
+    "@kjun-ui/icons": "0.8.1"
   },
   "peerDependencies": {
     "react": "^19.2.3",