@kjun-ui/native 0.7.0 → 0.8.0

package/dist/styles.css

@@ -482,9 +482,6 @@
   --_kjun-extension-skeleton-avatar-size: 48px;
   --_kjun-extension-skeleton-card-avatar-size: 40px;
   --_kjun-extension-skeleton-table-line-height: 14px;
-  --_kjun-extension-skeleton-chart-height: 200px;
-  --_kjun-extension-skeleton-chart-bar-max-width: 40px;
-  --_kjun-extension-skeleton-chart-axis-height: 2px;
   --_kjun-extension-skeleton-stat-width: 80px;
   --_kjun-extension-skeleton-stat-height: 40px;
   --_kjun-extension-skeleton-block-height: 100px;
@@ -678,8 +675,6 @@
   --_kjun-extension-market-list-change-skeleton-height: 14px;
   --_kjun-extension-chart-skeleton-height: 240px;
   --_kjun-extension-chart-skeleton-donut-thickness: 22px;
-  --_kjun-extension-chart-skeleton-donut-label-width: 76px;
-  --_kjun-extension-chart-skeleton-donut-label-height: 14px;
   --_kjun-state-opacity-disabled: 0.5;
   --_kjun-state-opacity-disabled-strong: 0.4;
   --_kjun-state-opacity-pressed: 0.8;
@@ -1950,37 +1945,6 @@
   height: var(--_kjun-extension-skeleton-table-line-height);
 }
 
-/* Chart */
-.kjun-skeleton-chart {
-  display: flex;
-  flex-direction: column;
-  padding: var(--_kjun-extension-skeleton-padding);
-  border: var(--_kjun-border-default-width) solid var(--_kjun-border-primary);
-  border-radius: var(--_kjun-extension-skeleton-radius);
-  background: var(--_kjun-bg-primary);
-}
-
-.kjun-skeleton-chart-bars {
-  flex: 1;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-around;
-  gap: var(--_kjun-extension-skeleton-gap);
-  /* Bars stand on the axis line, like ChartSkeleton. */
-}
-
-.kjun-skeleton-chart-bar {
-  flex: 1;
-  max-width: var(--_kjun-extension-skeleton-chart-bar-max-width);
-  background: var(--_kjun-skeleton);
-  border-radius: var(--_kjun-extension-skeleton-line-radius) var(--_kjun-geometry-radius-radius4) 0 0;
-}
-
-.kjun-skeleton-chart-axis {
-  height: var(--_kjun-extension-skeleton-chart-axis-height);
-  background: var(--_kjun-border-primary);
-}
-
 /* Stat Card */
 .kjun-skeleton-stat {
   display: flex;
@@ -2021,7 +1985,6 @@
 /* Animation */
 .kjun-skeleton-animated .kjun-skeleton-line,
 .kjun-skeleton-animated .kjun-skeleton-avatar,
-.kjun-skeleton-animated .kjun-skeleton-chart-bar,
 .kjun-skeleton-animated .kjun-skeleton-sparkline,
 .kjun-skeleton-animated .kjun-skeleton-block {
   background: linear-gradient(
@@ -3116,7 +3079,7 @@
   }
 }
 .kjun-chart-skeleton {
-  position:relative;
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3124,6 +3087,14 @@
   min-width: 0;
   animation: kjun-chart-pulse var(--_kjun-motion-shimmer) ease-in-out infinite;
 }
+.kjun-chart-skeleton[data-kjun-chart-kind="donut"] {
+  /* Only the donut label measures the hole against this box's height; size containment elsewhere would
+     drop the frame's intrinsic width inside shrink-to-fit parents. */
+  container-type: size;
+}
+.kjun-chart-skeleton[data-skeleton="false"] {
+  animation: none;
+}
 .kjun-chart-skeleton-plot {
   width: 100%;
   height: 100%;
@@ -3133,9 +3104,19 @@
   aspect-ratio: 1;
   border: var(--_kjun-extension-chart-skeleton-donut-thickness) solid var(--_kjun-color-skeleton);
   border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+}
+.kjun-chart-skeleton-matrix {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  gap: var(--_kjun-geometry-dimension-value4);
+}
+.kjun-chart-skeleton-cell {
+  background: var(--_kjun-color-skeleton);
+  border-radius: var(--_kjun-extension-skeleton-line-radius);
+}
+.kjun-chart-skeleton-cell[data-muted] {
+  opacity: var(--_kjun-state-opacity-pending);
 }
 @keyframes kjun-chart-pulse {
   50% {
@@ -3153,7 +3134,8 @@
 .kjun-error-fallback p { margin:var(--_kjun-geometry-dimension-value8) 0 var(--_kjun-geometry-dimension-value16); font-size:var(--_kjun-extension-state-description-size); line-height:var(--_kjun-type-caption-line); color:var(--_kjun-color-text-secondary); font-weight:var(--_kjun-type-caption-weight);letter-spacing:var(--_kjun-type-caption-tracking);}
 
 .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); }
+.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-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/skeleton-base.d.cts

@@ -1,6 +1,6 @@
 import { type DimensionValue } from "react-native";
 export interface KjunSkeletonProps {
-    type?: "text" | "avatar" | "card" | "table" | "chart" | "stat" | "block";
+    type?: "text" | "avatar" | "card" | "table" | "stat" | "block";
     rows?: number;
     columns?: number;
     height?: DimensionValue;

package/dist/types/packages/native/src/skeleton-base.d.ts

@@ -1,6 +1,6 @@
 import { type DimensionValue } from "react-native";
 export interface KjunSkeletonProps {
-    type?: "text" | "avatar" | "card" | "table" | "chart" | "stat" | "block";
+    type?: "text" | "avatar" | "card" | "table" | "stat" | "block";
     rows?: number;
     columns?: number;
     height?: DimensionValue;

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

@@ -1,5 +1,6 @@
 import { type InputSize } from "@kjun-ui/tokens";
 import { type DimensionValue } from "react-native";
+import { type KjunChartSkeletonKind } from "../../../shared/package-runtime/chart-skeleton.cjs";
 export interface KjunListSkeletonProps {
     rows?: number;
     variant?: "market" | "compact" | "notification";
@@ -19,10 +20,14 @@ export interface KjunFormSkeletonProps {
 }
 export declare function KjunFormSkeleton({ fields, columns, multiline, size, }: KjunFormSkeletonProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunChartSkeletonProps {
-    loadingText?: string;
-    kind?: "grid" | "line" | "bar" | "donut" | "candle" | "matrix";
+    kind?: KjunChartSkeletonKind;
     height?: DimensionValue;
+    loadingText?: string;
+    skeleton?: boolean;
+    loadingDelay?: number;
+    rows?: number;
+    columns?: number;
 }
-export declare function KjunChartSkeleton({ loadingText, kind, height, }: KjunChartSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunChartSkeleton({ kind, 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

@@ -1,5 +1,6 @@
 import { type InputSize } from "@kjun-ui/tokens";
 import { type DimensionValue } from "react-native";
+import { type KjunChartSkeletonKind } from "../../../shared/package-runtime/chart-skeleton.js";
 export interface KjunListSkeletonProps {
     rows?: number;
     variant?: "market" | "compact" | "notification";
@@ -19,10 +20,14 @@ export interface KjunFormSkeletonProps {
 }
 export declare function KjunFormSkeleton({ fields, columns, multiline, size, }: KjunFormSkeletonProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunChartSkeletonProps {
-    loadingText?: string;
-    kind?: "grid" | "line" | "bar" | "donut" | "candle" | "matrix";
+    kind?: KjunChartSkeletonKind;
     height?: DimensionValue;
+    loadingText?: string;
+    skeleton?: boolean;
+    loadingDelay?: number;
+    rows?: number;
+    columns?: number;
 }
-export declare function KjunChartSkeleton({ loadingText, kind, height, }: KjunChartSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunChartSkeleton({ kind, 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

@@ -0,0 +1,12 @@
+export type KjunChartSkeletonKind = "frame" | "donut" | "matrix";
+/** Axes plus three horizontal grid lines in the frame's 600×240 viewBox. */
+export declare const chartFrameViewBox = "0 0 600 240";
+export declare const chartFramePath = "M20 10V220H590 M20 65H590 M20 120H590 M20 175H590";
+/** Upper bound for matrix rows and columns, so counts derived from data never render an unbounded grid. */
+export declare const chartSkeletonMaxCount = 100;
+/** Matrix rows and columns: finite values floor into 1–100; anything else is 1. */
+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. */
+export declare function chartDonutHole(height: number, thickness: number): number;

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

@@ -0,0 +1,12 @@
+export type KjunChartSkeletonKind = "frame" | "donut" | "matrix";
+/** Axes plus three horizontal grid lines in the frame's 600×240 viewBox. */
+export declare const chartFrameViewBox = "0 0 600 240";
+export declare const chartFramePath = "M20 10V220H590 M20 65H590 M20 120H590 M20 175H590";
+/** Upper bound for matrix rows and columns, so counts derived from data never render an unbounded grid. */
+export declare const chartSkeletonMaxCount = 100;
+/** Matrix rows and columns: finite values floor into 1–100; anything else is 1. */
+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. */
+export declare function chartDonutHole(height: number, thickness: number): number;

package/package.json

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