@kjun-ui/native 0.6.1 → 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,14 +675,15 @@
   --_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;
   --_kjun-state-opacity-pending: 0.55;
   --_kjun-state-opacity-heat-minimum: 0.08;
   --_kjun-state-opacity-heat-maximum: 0.4;
+  --_kjun-state-opacity-deviation-low: 0.08;
+  --_kjun-state-opacity-deviation-medium: 0.14;
+  --_kjun-state-opacity-deviation-strong: 0.22;
   --_kjun-state-focus-width: 2px;
   --_kjun-state-focus-offset: 2px;
   --_kjun-state-focus-choice-offset: 3px;
@@ -1137,7 +1135,6 @@
 .kjun-scope .kjun-field--suffix { padding-right: calc(var(--_kjun-field-padding) + var(--_kjun-field-clear-size) + var(--_kjun-field-affix-gap) - var(--_kjun-border-control-width)); }
 .kjun-scope .kjun-input-native.kjun-field--prefix { padding-left: calc(var(--_kjun-field-padding) + var(--_kjun-input-prefix-width) + var(--_kjun-field-affix-gap) - var(--_kjun-border-control-width)); }
 .kjun-scope .kjun-input-native.kjun-field--suffix { padding-right: calc(var(--_kjun-field-padding) + var(--_kjun-input-suffix-width) + var(--_kjun-field-affix-gap) - var(--_kjun-border-control-width)); }
-.kjun-scope .kjun-field--clearable > .kj-truncate { padding-right: calc(var(--_kjun-field-clear-size) + var(--_kjun-field-affix-gap)); }
 .kjun-scope .kjun-field--select { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: var(--_kjun-geometry-dimension-value8); }
 .kjun-scope .kjun-field--textarea { height: auto; padding-top: var(--_kjun-field-textarea-padding-y); padding-bottom: var(--_kjun-field-textarea-padding-y); }
 .kjun-scope .kjun-field-shell { position: relative; min-width: 0; --_kjun-input-prefix-width: 0px; --_kjun-input-suffix-width: 0px; }
@@ -1160,7 +1157,7 @@
 .kjun-scope .kjun-form-group { margin-bottom: var(--_kjun-extension-form-item-gap); min-width: 0; }
 .kjun-scope .kjun-form-group:last-child { margin-bottom: 0; }
 /* 그리드·툴바는 부모 gap을 사용하고, 일반 문서 흐름의 기존 폼만 기본 간격을 유지한다. */
-.kjun-scope :where(.kj-flex, .kj-inline-flex, .kj-grid, .kj-inline-grid, [data-kjun-layout="form"]) > .kjun-form-group { margin-bottom: 0; }
+.kjun-scope :where([data-kjun-layout="form"]) > .kjun-form-group { margin-bottom: 0; }
 .kjun-scope .kjun-field-menu {
   padding: var(--_kjun-extension-menu-padding);
   border: var(--_kjun-border-default-width) solid var(--_kjun-border-primary);
@@ -1382,12 +1379,12 @@
 .kjun-scope .kjun-type-control-large { font-size: var(--_kjun-type-control-large-size); line-height: var(--_kjun-type-control-large-line); font-weight: var(--_kjun-type-control-large-weight); letter-spacing: var(--_kjun-type-control-large-tracking); }
 .kjun-scope .kjun-type-section-title { font-size: var(--_kjun-type-section-title-size); line-height: var(--_kjun-type-section-title-line); font-weight: var(--_kjun-type-section-title-weight); letter-spacing: var(--_kjun-type-section-title-tracking); }
 .kjun-scope .kjun-type-page-title { font-size: var(--_kjun-type-page-title-size); line-height: var(--_kjun-type-page-title-line); font-weight: var(--_kjun-type-page-title-weight); letter-spacing: var(--_kjun-type-page-title-tracking); }
-.kjun-scope .kjun-type-number-sm { font-size: var(--_kjun-type-number-sm-size); line-height: var(--_kjun-type-number-sm-line); font-weight: var(--_kjun-type-number-sm-weight); letter-spacing: var(--_kjun-type-number-sm-tracking); font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
-.kjun-scope .kjun-type-number-md { font-size: var(--_kjun-type-number-md-size); line-height: var(--_kjun-type-number-md-line); font-weight: var(--_kjun-type-number-md-weight); letter-spacing: var(--_kjun-type-number-md-tracking); font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
-.kjun-scope .kjun-type-number-lg { font-size: var(--_kjun-type-number-lg-size); line-height: var(--_kjun-type-number-lg-line); font-weight: var(--_kjun-type-number-lg-weight); letter-spacing: var(--_kjun-type-number-lg-tracking); font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
-.kjun-scope .kjun-type-display-sm { font-size: var(--_kjun-type-display-sm-size); line-height: var(--_kjun-type-display-sm-line); font-weight: var(--_kjun-type-display-sm-weight); letter-spacing: var(--_kjun-type-display-sm-tracking); font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
-.kjun-scope .kjun-type-display-md { font-size: var(--_kjun-type-display-md-size); line-height: var(--_kjun-type-display-md-line); font-weight: var(--_kjun-type-display-md-weight); letter-spacing: var(--_kjun-type-display-md-tracking); font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
-.kjun-scope .kjun-type-display-lg { font-size: var(--_kjun-type-display-lg-size); line-height: var(--_kjun-type-display-lg-line); font-weight: var(--_kjun-type-display-lg-weight); letter-spacing: var(--_kjun-type-display-lg-tracking); font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
+.kjun-scope .kjun-type-number-sm { font-size: var(--_kjun-type-number-sm-size); line-height: var(--_kjun-type-number-sm-line); font-weight: var(--_kjun-type-number-sm-weight); letter-spacing: var(--_kjun-type-number-sm-tracking); font-family: var(--_kjun-font-numeric); font-variant-numeric: tabular-nums; }
+.kjun-scope .kjun-type-number-md { font-size: var(--_kjun-type-number-md-size); line-height: var(--_kjun-type-number-md-line); font-weight: var(--_kjun-type-number-md-weight); letter-spacing: var(--_kjun-type-number-md-tracking); font-family: var(--_kjun-font-numeric); font-variant-numeric: tabular-nums; }
+.kjun-scope .kjun-type-number-lg { font-size: var(--_kjun-type-number-lg-size); line-height: var(--_kjun-type-number-lg-line); font-weight: var(--_kjun-type-number-lg-weight); letter-spacing: var(--_kjun-type-number-lg-tracking); font-family: var(--_kjun-font-numeric); font-variant-numeric: tabular-nums; }
+.kjun-scope .kjun-type-display-sm { font-size: var(--_kjun-type-display-sm-size); line-height: var(--_kjun-type-display-sm-line); font-weight: var(--_kjun-type-display-sm-weight); letter-spacing: var(--_kjun-type-display-sm-tracking); font-family: var(--_kjun-font-numeric); font-variant-numeric: tabular-nums; }
+.kjun-scope .kjun-type-display-md { font-size: var(--_kjun-type-display-md-size); line-height: var(--_kjun-type-display-md-line); font-weight: var(--_kjun-type-display-md-weight); letter-spacing: var(--_kjun-type-display-md-tracking); font-family: var(--_kjun-font-numeric); font-variant-numeric: tabular-nums; }
+.kjun-scope .kjun-type-display-lg { font-size: var(--_kjun-type-display-lg-size); line-height: var(--_kjun-type-display-lg-line); font-weight: var(--_kjun-type-display-lg-weight); letter-spacing: var(--_kjun-type-display-lg-tracking); font-family: var(--_kjun-font-numeric); font-variant-numeric: tabular-nums; }
 
 @keyframes kjun-price-flash-up {
   0%, 20% {
@@ -1948,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;
@@ -2019,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(
@@ -2954,12 +2919,14 @@
   opacity: var(--_kjun-state-opacity-disabled);
   cursor: not-allowed;
 }
-.kjun-icon-toggle svg {
+.kjun-icon-toggle svg:not([data-kjun-color-class]) {
   color: var(--_kjun-icon-toggle-color, currentColor);
+}
+.kjun-icon-toggle svg {
   transition: color var(--_kjun-motion-control) var(--_kjun-ease-out), transform var(--_kjun-motion-control) var(--_kjun-ease-out);
 }
 /* Like RefreshButton, an inactive icon darkens on hover; the selected color stays as set. */
-.kjun-icon-toggle[aria-pressed="false"]:hover:not(:disabled) svg {
+.kjun-icon-toggle[aria-pressed="false"]:hover:not(:disabled) svg:not([data-kjun-color-class]) {
   color: var(--_kjun-color-text-secondary);
 }
 .kjun-icon-toggle:hover:not(:disabled) svg {
@@ -3112,7 +3079,7 @@
   }
 }
 .kjun-chart-skeleton {
-  position:relative;
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3120,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%;
@@ -3129,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% {
@@ -3149,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; }
@@ -4126,6 +4112,22 @@
   }
 }
 
+/* 좁은 화면에서 보조 지표가 셋 이상이면 두 열로 감싼다. 한 줄에 몰아 숫자가 자릿수 사이에서 끊기지 않게 한다. */
+@media (width <= 400px) {
+  .kjun-kpi-hero:not(.kjun-kpi-hero--sm) .kjun-kpi-hero__secondary:has(> .kjun-kpi-hero__sec-item:nth-child(3)) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    row-gap: var(--_kjun-extension-kpi-hero-mobile-secondary-padding);
+  }
+  .kjun-kpi-hero:not(.kjun-kpi-hero--sm) .kjun-kpi-hero__secondary:has(> .kjun-kpi-hero__sec-item:nth-child(3)) > .kjun-kpi-hero__sec-item:nth-child(odd) {
+    padding-left: 0;
+    border-left: none;
+  }
+  .kjun-kpi-hero:not(.kjun-kpi-hero--sm) .kjun-kpi-hero__secondary:has(> .kjun-kpi-hero__sec-item:nth-child(3)) > .kjun-kpi-hero__sec-item:nth-child(even) {
+    padding-right: 0;
+  }
+}
+
 /* size=sm — 모달, 컴팩트 카드 내부용 */
 .kjun-kpi-hero--sm {
   padding: var(--_kjun-extension-kpi-hero-sm-padding-y) var(--_kjun-extension-kpi-hero-sm-padding-x);
@@ -4167,6 +4169,14 @@
   }
 }
 
+/* surface="none": 앱의 카드·모달·전폭 목록 안에서는 자체 카드 표면을 그리지 않는다. 미디어 규칙보다 뒤에 두어 좁은 화면에서도 이긴다. */
+/* 클래스를 겹쳐 모바일 규칙(.kjun-kpi-hero:not(.kjun-kpi-hero--sm))보다 명시도를 높인다. */
+.kjun-kpi-hero.kjun-kpi-hero[data-surface="none"] {
+  padding: 0;
+  background: transparent;
+  border-radius: 0;
+}
+
 .kjun-kpi-row {
   display: flex;
   padding: var(--_kjun-extension-kpi-row-md-padding-y) var(--_kjun-extension-kpi-row-md-padding-x);
@@ -4455,6 +4465,14 @@
   }
 }
 
+/* surface="none": 앱의 카드·모달·전폭 목록 안에서는 자체 카드 표면을 그리지 않는다. 미디어 규칙보다 뒤에 두어 좁은 화면에서도 이긴다. */
+/* 클래스를 겹쳐 모바일 요약 규칙(.kjun-kpi-row.kjun-kpi-row--mobile-summary:not(...))과 같은 명시도로 맞춘다. */
+.kjun-kpi-row.kjun-kpi-row[data-surface="none"] {
+  padding: 0;
+  background: transparent;
+  border-radius: 0;
+}
+
 .kjun-card {
   position: relative;
   min-width: 0;

package/dist/types/packages/native/src/data-state.d.cts

@@ -19,6 +19,8 @@ export interface KjunDataStateProps extends QueryDisplayProps {
     emptyIcon?: string;
     emptyActionText?: string;
     loadingText?: string;
+    /** Milliseconds a first load must last before its loading display shows; the box keeps its space meanwhile. */
+    loadingDelay?: number;
     retryText?: string;
     size?: "sm" | "md" | "lg";
     skeleton?: boolean;
@@ -31,7 +33,7 @@ export interface KjunDataStateProps extends QueryDisplayProps {
     onRetry?: () => void;
     onEmptyAction?: () => void;
 }
-export declare function KjunDataState({ preserveContent, refreshing, refreshError, refreshingText, loadingPadding, empty, emptyText, emptyIcon, emptyActionText, loadingText, retryText, size, skeleton, skeletonType, skeletonCount, children, loadingContent, emptyContent, errorContent, onRetry, onEmptyAction, ...query }: KjunDataStateProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunDataState({ preserveContent, refreshing, refreshError, refreshingText, loadingPadding, empty, emptyText, emptyIcon, emptyActionText, loadingText, loadingDelay, retryText, size, skeleton, skeletonType, skeletonCount, children, loadingContent, emptyContent, errorContent, onRetry, onEmptyAction, ...query }: KjunDataStateProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunErrorBoundaryProps {
     children: ReactNode;
     fallbackMessage?: string;

package/dist/types/packages/native/src/data-state.d.ts

@@ -19,6 +19,8 @@ export interface KjunDataStateProps extends QueryDisplayProps {
     emptyIcon?: string;
     emptyActionText?: string;
     loadingText?: string;
+    /** Milliseconds a first load must last before its loading display shows; the box keeps its space meanwhile. */
+    loadingDelay?: number;
     retryText?: string;
     size?: "sm" | "md" | "lg";
     skeleton?: boolean;
@@ -31,7 +33,7 @@ export interface KjunDataStateProps extends QueryDisplayProps {
     onRetry?: () => void;
     onEmptyAction?: () => void;
 }
-export declare function KjunDataState({ preserveContent, refreshing, refreshError, refreshingText, loadingPadding, empty, emptyText, emptyIcon, emptyActionText, loadingText, retryText, size, skeleton, skeletonType, skeletonCount, children, loadingContent, emptyContent, errorContent, onRetry, onEmptyAction, ...query }: KjunDataStateProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunDataState({ preserveContent, refreshing, refreshError, refreshingText, loadingPadding, empty, emptyText, emptyIcon, emptyActionText, loadingText, loadingDelay, retryText, size, skeleton, skeletonType, skeletonCount, children, loadingContent, emptyContent, errorContent, onRetry, onEmptyAction, ...query }: KjunDataStateProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunErrorBoundaryProps {
     children: ReactNode;
     fallbackMessage?: string;

package/dist/types/packages/native/src/kpi-hero.d.cts

@@ -27,6 +27,8 @@ export interface KjunKpiHeroProps {
     secondary?: KpiValue[];
     animated?: boolean;
     size?: "md" | "sm";
+    /** "none" drops the card background, padding and radius, for a KPI placed inside a card, modal or full-width list. */
+    surface?: "card" | "none";
     aside?: ReactNode;
     formatter?: (value: number) => string;
     deltaFormatter?: (value: number, kind: "absolute" | "percent") => string;

package/dist/types/packages/native/src/kpi-hero.d.ts

@@ -27,6 +27,8 @@ export interface KjunKpiHeroProps {
     secondary?: KpiValue[];
     animated?: boolean;
     size?: "md" | "sm";
+    /** "none" drops the card background, padding and radius, for a KPI placed inside a card, modal or full-width list. */
+    surface?: "card" | "none";
     aside?: ReactNode;
     formatter?: (value: number) => string;
     deltaFormatter?: (value: number, kind: "absolute" | "percent") => string;

package/dist/types/packages/native/src/kpi-row.d.cts

@@ -25,8 +25,10 @@ export interface KjunKpiRowProps {
     loading?: boolean;
     items: KpiRowItem[];
     size?: "md" | "sm";
+    /** "none" drops the card background, padding and radius, for a KPI placed inside a card, modal or full-width list. */
+    surface?: "card" | "none";
     mobileSummary?: boolean;
     onItemClick?: (item: KpiRowItem, index: number) => void;
     renderValue?: (item: KpiRowItem, index: number) => ReactNode;
 }
-export declare function KjunKpiRow({ loading, items, size, mobileSummary, onItemClick, renderValue, }: KjunKpiRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunKpiRow({ loading, items, size, surface, mobileSummary, onItemClick, renderValue, }: KjunKpiRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/kpi-row.d.ts

@@ -25,8 +25,10 @@ export interface KjunKpiRowProps {
     loading?: boolean;
     items: KpiRowItem[];
     size?: "md" | "sm";
+    /** "none" drops the card background, padding and radius, for a KPI placed inside a card, modal or full-width list. */
+    surface?: "card" | "none";
     mobileSummary?: boolean;
     onItemClick?: (item: KpiRowItem, index: number) => void;
     renderValue?: (item: KpiRowItem, index: number) => ReactNode;
 }
-export declare function KjunKpiRow({ loading, items, size, mobileSummary, onItemClick, renderValue, }: KjunKpiRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunKpiRow({ loading, items, size, surface, mobileSummary, onItemClick, renderValue, }: KjunKpiRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/market-model.d.cts

@@ -17,6 +17,11 @@ export interface MarketBaseProps<Row extends object> extends QueryDisplayProps {
     subMeta?: (row: Row) => string;
     emptyMessage?: string;
     emptySubMessage?: string;
+    /** false shows the shared spinner and loadingText instead of the skeleton. Default true. */
+    skeleton?: boolean;
+    loadingText?: string;
+    /** Milliseconds a first load must last before its loading display shows. */
+    loadingDelay?: number;
     showFooter?: boolean;
     calculatedAt?: string | null;
     footerNote?: string;

package/dist/types/packages/native/src/market-model.d.ts

@@ -17,6 +17,11 @@ export interface MarketBaseProps<Row extends object> extends QueryDisplayProps {
     subMeta?: (row: Row) => string;
     emptyMessage?: string;
     emptySubMessage?: string;
+    /** false shows the shared spinner and loadingText instead of the skeleton. Default true. */
+    skeleton?: boolean;
+    loadingText?: string;
+    /** Milliseconds a first load must last before its loading display shows. */
+    loadingDelay?: number;
     showFooter?: boolean;
     calculatedAt?: string | null;
     footerNote?: string;

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/packages/native/src/table-cards.d.cts

@@ -1,2 +1,2 @@
 import type { TableCardsProps } from "../../../shared/package-runtime/table-presentation.cjs";
-export declare function TableCards<Row extends object>({ initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, layout }: TableCardsProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function TableCards<Row extends object>({ initialLoading, skeletonRows, skeletonHidden, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, layout }: TableCardsProps<Row>): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/table-cards.d.ts

@@ -1,2 +1,2 @@
 import type { TableCardsProps } from "../../../shared/package-runtime/table-presentation.js";
-export declare function TableCards<Row extends object>({ initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, layout }: TableCardsProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function TableCards<Row extends object>({ initialLoading, skeletonRows, skeletonHidden, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, layout }: TableCardsProps<Row>): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/table-grid.d.cts

@@ -1,2 +1,2 @@
 import type { TableGridProps } from "../../../shared/package-runtime/table-presentation.cjs";
-export declare function TableGrid<Row extends object>({ initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }: TableGridProps<Row, number>): import("react/jsx-runtime").JSX.Element;
+export declare function TableGrid<Row extends object>({ initialLoading, skeletonRows, skeletonHidden, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }: TableGridProps<Row, number>): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/table-grid.d.ts

@@ -1,2 +1,2 @@
 import type { TableGridProps } from "../../../shared/package-runtime/table-presentation.js";
-export declare function TableGrid<Row extends object>({ initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }: TableGridProps<Row, number>): import("react/jsx-runtime").JSX.Element;
+export declare function TableGrid<Row extends object>({ initialLoading, skeletonRows, skeletonHidden, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }: TableGridProps<Row, number>): import("react/jsx-runtime").JSX.Element;

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/dist/types/shared/package-runtime/table-presentation.d.cts

@@ -18,6 +18,8 @@ export declare function tableCellValue<Row extends object>(props: TableProps<Row
 export interface TableRowsProps<Row extends object> {
     initialLoading: boolean;
     skeletonRows: number;
+    /** A loadingDelay is still running: the skeleton keeps its space but stays out of sight. */
+    skeletonHidden?: boolean;
     state: Pick<ReturnType<typeof useTableModel<Row>>, "rows" | "key" | "expanded" | "selectedRow">;
     onRowClick: TableProps<Row>["onRowClick"];
     selectable: boolean;

package/dist/types/shared/package-runtime/table-presentation.d.ts

@@ -18,6 +18,8 @@ export declare function tableCellValue<Row extends object>(props: TableProps<Row
 export interface TableRowsProps<Row extends object> {
     initialLoading: boolean;
     skeletonRows: number;
+    /** A loadingDelay is still running: the skeleton keeps its space but stays out of sight. */
+    skeletonHidden?: boolean;
     state: Pick<ReturnType<typeof useTableModel<Row>>, "rows" | "key" | "expanded" | "selectedRow">;
     onRowClick: TableProps<Row>["onRowClick"];
     selectable: boolean;

package/dist/types/shared/package-runtime/table.d.cts

@@ -38,6 +38,11 @@ export interface TableProps<Row extends object = Record<string, unknown>, MaxHei
     data?: Row[];
     rowKey?: string;
     skeletonRows?: number;
+    /** false shows the shared spinner and loadingText instead of skeleton rows. Default true. */
+    skeleton?: boolean;
+    loadingText?: string;
+    /** Milliseconds a first load must last before its loading display shows. */
+    loadingDelay?: number;
     emptyText?: string;
     sortable?: boolean;
     sort?: TableSort | null;

package/dist/types/shared/package-runtime/table.d.ts

@@ -38,6 +38,11 @@ export interface TableProps<Row extends object = Record<string, unknown>, MaxHei
     data?: Row[];
     rowKey?: string;
     skeletonRows?: number;
+    /** false shows the shared spinner and loadingText instead of skeleton rows. Default true. */
+    skeleton?: boolean;
+    loadingText?: string;
+    /** Milliseconds a first load must last before its loading display shows. */
+    loadingDelay?: number;
     emptyText?: string;
     sortable?: boolean;
     sort?: TableSort | null;

package/dist/types/shared/package-runtime/use-loading-reveal.d.cts

@@ -0,0 +1,2 @@
+/** True once a loading state has lasted `delay` ms, so a fast result never flashes the loading display. Always true without a delay. */
+export declare function useLoadingReveal(active: boolean, delay?: number): boolean;

package/dist/types/shared/package-runtime/use-loading-reveal.d.ts

@@ -0,0 +1,2 @@
+/** True once a loading state has lasted `delay` ms, so a fast result never flashes the loading display. Always true without a delay. */
+export declare function useLoadingReveal(active: boolean, delay?: number): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjun-ui/native",
-  "version": "0.6.1",
+  "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.6.1",
-    "@kjun-ui/icons": "0.6.1"
+    "@kjun-ui/tokens": "0.8.0",
+    "@kjun-ui/icons": "0.8.0"
   },
   "peerDependencies": {
     "react": "^19.2.3",