@kjun-ui/native 0.13.0 → 0.15.0

package/dist/styles.css

@@ -654,6 +654,12 @@
   --_kjun-extension-progress-heights-sm: 4px;
   --_kjun-extension-progress-heights-md: 8px;
   --_kjun-extension-progress-heights-lg: 12px;
+  --_kjun-extension-progress-circle-sm-size: 24px;
+  --_kjun-extension-progress-circle-sm-stroke: 4px;
+  --_kjun-extension-progress-circle-md-size: 48px;
+  --_kjun-extension-progress-circle-md-stroke: 4px;
+  --_kjun-extension-progress-circle-lg-size: 64px;
+  --_kjun-extension-progress-circle-lg-stroke: 6px;
   --_kjun-extension-icon-toggle-compact-size: 24px;
   --_kjun-extension-icon-toggle-sizes-xs: 24px;
   --_kjun-extension-icon-toggle-sizes-sm: 24px;
@@ -2228,8 +2234,50 @@
   font-weight: var(--_kjun-type-caption-weight);
   letter-spacing: var(--_kjun-type-caption-tracking);
 }
+/* Circle progress: circle, then label and subLabel centred below it. */
+.kjun-progress[data-shape="circle"] {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.kjun-progress-circle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.kjun-progress-circle > svg { position: absolute; inset: 0; display: block; }
+.kjun-progress-circle-track { stroke: var(--_kjun-color-secondary); }
+.kjun-progress-circle-value { transition: stroke-dashoffset var(--_kjun-motion-progress) var(--_kjun-ease-out); }
+.kjun-progress-circle-percent {
+  position: relative;
+  font-family: var(--_kjun-font-numeric);
+  font-variant-numeric: tabular-nums;
+  color: var(--_kjun-color-text);
+  font-size: var(--_kjun-type-meta-size);
+  line-height: var(--_kjun-type-meta-line);
+  font-weight: var(--_kjun-type-meta-weight);
+  letter-spacing: var(--_kjun-type-meta-tracking);
+}
+.kjun-progress[data-size="lg"] .kjun-progress-circle-percent {
+  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);
+}
+.kjun-progress-circle-label {
+  margin-top: var(--_kjun-geometry-dimension-value8);
+  font-size: var(--_kjun-type-caption-size);
+  color: var(--_kjun-color-text-secondary);
+  line-height: var(--_kjun-type-caption-line);
+  font-weight: var(--_kjun-type-caption-weight);
+  letter-spacing: var(--_kjun-type-caption-tracking);
+}
 @media (prefers-reduced-motion: reduce) {
   .kjun-progress-track > div,
+  .kjun-progress-circle-value,
   .kjun-card {
     transition: none;
   }
@@ -4595,6 +4643,13 @@
 .kjun-card[data-dividers="false"] > .kjun-card-header + .kjun-card-footer { padding-top: 0; }
 .kjun-card[data-dividers="true"] > .kjun-card-header:has(+ .kjun-card-body) { border-bottom: var(--_kjun-border-default-width) solid var(--_kjun-card-border); }
 .kjun-card[data-dividers="true"] > .kjun-card-footer:not(:first-child) { border-top: var(--_kjun-border-default-width) solid var(--_kjun-card-border); }
+/* A pressable card is one button: it lifts on hover, presses in on activation and shows the focus ring. */
+.kjun-card[data-pressable] { box-shadow: var(--_kjun-card-shadow); cursor: pointer; transition: box-shadow var(--_kjun-motion-control) var(--_kjun-ease-out), transform var(--_kjun-motion-control) var(--_kjun-ease-out); }
+.kjun-card[data-pressable]:hover:not([aria-disabled="true"]) { box-shadow: var(--_kjun-elevation-floating); }
+.kjun-card[data-pressable]:active:not([aria-disabled="true"]) { transform: scale(0.99); }
+.kjun-card[data-pressable]:focus-visible { outline: var(--_kjun-state-focus-width) solid var(--_kjun-color-focus-ring); outline-offset: var(--_kjun-state-focus-offset); }
+.kjun-card[data-pressable][aria-disabled="true"] { cursor: not-allowed; opacity: var(--_kjun-state-opacity-disabled); }
+@media (prefers-reduced-motion: reduce) { .kjun-card[data-pressable] { transition: none; } .kjun-card[data-pressable]:active { transform: none; } }
 
 .kjun-toast-stack {
   position: fixed;
@@ -4745,7 +4800,7 @@
 
 .kjun-list-section,.kjun-top-navigation,.kjun-bottom-navigation,.kjun-bottom-action-bar{min-width:0;max-width:100%;color:var(--_kjun-color-text);background:var(--_kjun-color-surface)}
 .kjun-list-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--_kjun-extension-list-gap);padding:var(--_kjun-extension-list-padding)}.kjun-list-heading h3{font-size:var(--_kjun-type-card-title-size);margin:0;line-height:var(--_kjun-type-card-title-line);font-weight:var(--_kjun-type-card-title-weight);letter-spacing:var(--_kjun-type-card-title-tracking)}.kjun-list-heading p{margin:var(--_kjun-geometry-dimension-value4) 0 0;font-size:var(--_kjun-type-caption-size);color:var(--_kjun-color-text-secondary);overflow-wrap:anywhere;line-height:var(--_kjun-type-caption-line);font-weight:var(--_kjun-type-caption-weight);letter-spacing:var(--_kjun-type-caption-tracking)}
-.kjun-list{list-style:none;padding:0;margin:0}.kjun-list-row{display:flex;align-items:center;gap:var(--_kjun-extension-list-gap);border-bottom:var(--_kjun-border-default-width) solid var(--_kjun-color-divider);min-width:0}.kjun-list-row:last-child{border-bottom:0}.kjun-list[data-divider=false]>.kjun-list-row{border-bottom:0}.kjun-list[data-density=compact] .kjun-list-main{min-height:var(--_kjun-extension-list-compact-minimum-height);padding-block:var(--_kjun-extension-list-compact-padding-y)}.kjun-list-main{display:flex;align-items:center;gap:var(--_kjun-extension-list-gap);flex:1;min-width:0;min-height:var(--_kjun-extension-list-minimum-height);padding:var(--_kjun-extension-list-padding);text-align:start;color:inherit;text-decoration:none;background:transparent;border:0;font:inherit}.kjun-list-main:is(button,a):hover{background:var(--_kjun-color-hover)}.kjun-list-body{flex:1;min-width:0}.kjun-list-title,.kjun-list-description{display:block;overflow-wrap:anywhere;line-height:1.5}.kjun-list-title{font-size:var(--_kjun-type-label-size);line-height:var(--_kjun-type-label-line);font-weight:var(--_kjun-type-label-weight);letter-spacing:var(--_kjun-type-label-tracking)}.kjun-list-description{font-size:var(--_kjun-type-caption-size);color:var(--_kjun-color-text-secondary);line-height:var(--_kjun-type-caption-line);font-weight:var(--_kjun-type-caption-weight);letter-spacing:var(--_kjun-type-caption-tracking)}.kjun-list-leading{flex-shrink:0}.kjun-list-trailing{overflow-wrap:anywhere;max-width:35%}.kjun-list-actions{display:flex;flex-wrap:wrap;gap:var(--_kjun-extension-list-actions-gap);padding-inline-end:var(--_kjun-extension-list-actions-padding);max-width:45%}
+.kjun-list{list-style:none;padding:0;margin:0}.kjun-list-row{display:flex;align-items:center;gap:var(--_kjun-extension-list-gap);border-bottom:var(--_kjun-border-default-width) solid var(--_kjun-color-divider);min-width:0}.kjun-list-row:last-child{border-bottom:0}.kjun-list[data-divider=false]>.kjun-list-row{border-bottom:0}.kjun-list[data-density=compact] .kjun-list-main{min-height:var(--_kjun-extension-list-compact-minimum-height);padding-block:var(--_kjun-extension-list-compact-padding-y)}.kjun-list-main{display:flex;align-items:center;gap:var(--_kjun-extension-list-gap);flex:1;min-width:0;min-height:var(--_kjun-extension-list-minimum-height);padding:var(--_kjun-extension-list-padding);text-align:start;color:inherit;text-decoration:none;background:transparent;border:0;font:inherit}.kjun-list-main:is(button,a):hover{background:var(--_kjun-color-hover)}.kjun-list-body{flex:1;min-width:0}.kjun-list-content{display:block;margin-top:var(--_kjun-extension-list-description-gap)}.kjun-list-title,.kjun-list-description{display:block;overflow-wrap:anywhere;line-height:1.5}.kjun-list-title{font-size:var(--_kjun-type-label-size);line-height:var(--_kjun-type-label-line);font-weight:var(--_kjun-type-label-weight);letter-spacing:var(--_kjun-type-label-tracking)}.kjun-list-description{font-size:var(--_kjun-type-caption-size);color:var(--_kjun-color-text-secondary);line-height:var(--_kjun-type-caption-line);font-weight:var(--_kjun-type-caption-weight);letter-spacing:var(--_kjun-type-caption-tracking)}.kjun-list-leading{flex-shrink:0}.kjun-list-trailing{overflow-wrap:anywhere;max-width:35%}.kjun-list-actions{display:flex;flex-wrap:wrap;gap:var(--_kjun-extension-list-actions-gap);padding-inline-end:var(--_kjun-extension-list-actions-padding);max-width:45%}
 /* A disabled row disables its actions too, so the row never reads as partly available. */
 .kjun-list-actions[data-disabled]{opacity:var(--_kjun-state-opacity-disabled)}
 .kjun-navigation-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--_kjun-extension-navigation-actions-gap);min-width:0}
@@ -4754,6 +4809,8 @@
 .kjun-avatar .kjun-image-fallback{text-transform:uppercase;font-size:var(--_kjun-type-input-size);line-height:var(--_kjun-type-input-line)}
 .kjun-avatar[data-size=sm] .kjun-image-fallback{font-size:var(--_kjun-type-control-size);line-height:var(--_kjun-type-control-line)}
 .kjun-avatar[data-size=lg] .kjun-image-fallback{font-size:var(--_kjun-type-section-title-size);line-height:var(--_kjun-type-section-title-line)}.kjun-avatar[data-shape=square]{border-radius:var(--_kjun-geometry-radius-radius8)}
+/* App colors (color/textColor) arrive as private custom properties; without them the image roles stay. */
+.kjun-avatar .kjun-image{background:var(--_kjun-avatar-color,var(--_kjun-color-secondary))}.kjun-avatar .kjun-image-fallback{color:var(--_kjun-avatar-text-color,var(--_kjun-color-text-secondary))}
 .kjun-chip{--_kjun-chip-remove-icon:var(--_kjun-extension-chip-remove-icon-sizes-md);display:inline-flex;max-width:100%;align-items:center;gap:var(--_kjun-extension-chip-gap);min-height:var(--_kjun-extension-chip-md);padding:var(--_kjun-extension-chip-padding-y) var(--_kjun-extension-chip-padding-x);border-radius:var(--_kjun-extension-chip-radius);background:var(--_kjun-color-secondary);font-size:var(--_kjun-extension-chip-typography-md-font-size-px);line-height:var(--_kjun-extension-chip-typography-md-line-height-px);font-weight:var(--_kjun-extension-chip-typography-md-font-weight);letter-spacing:var(--_kjun-extension-chip-typography-md-letter-spacing-em)}
 .kjun-chip>span{overflow-wrap:anywhere;min-width:0}
 .kjun-chip[data-size=sm]{--_kjun-chip-remove-icon:var(--_kjun-extension-chip-remove-icon-sizes-sm);min-height:var(--_kjun-extension-chip-sm);font-size:var(--_kjun-extension-chip-typography-sm-font-size-px);line-height:var(--_kjun-extension-chip-typography-sm-line-height-px);font-weight:var(--_kjun-extension-chip-typography-sm-font-weight);letter-spacing:var(--_kjun-extension-chip-typography-sm-letter-spacing-em)}
@@ -4964,6 +5021,15 @@
 .kjun-fab:focus-visible{outline:var(--_kjun-state-focus-width) solid var(--_kjun-color-focus-ring);outline-offset:var(--_kjun-state-focus-offset)}
 .kjun-fab:disabled{opacity:var(--_kjun-state-opacity-disabled);cursor:not-allowed}
 
+/* 0.14.0: plain sections, destructive rows, decorative chevrons and non-row list items share the row inset. */
+.kjun-list-section[data-surface="false"]{background:transparent}
+.kjun-list-row[data-destructive] .kjun-list-title{color:var(--_kjun-color-danger)}
+.kjun-list-chevron{flex-shrink:0;color:var(--_kjun-color-text-tertiary)}
+.kjun-list-item{padding:var(--_kjun-extension-list-padding);border-bottom:var(--_kjun-border-default-width) solid var(--_kjun-color-divider);min-width:0}
+.kjun-list-item:last-child{border-bottom:0}
+.kjun-list[data-divider=false]>.kjun-list-item{border-bottom:0}
+.kjun-list[data-density=compact]>.kjun-list-item{padding-block:var(--_kjun-extension-list-compact-padding-y)}
+
 /* Compound fields share input geometry; buttons retain their own size contract. */
 .kjun-quantity,.kjun-time-picker {
   --_kjun-compound-height: var(--_kjun-geometry-input-md-height);
@@ -5160,6 +5226,12 @@
 .kjun-text.kjun-text[data-tone="secondary"] { color: var(--_kjun-color-text-secondary); }
 .kjun-text.kjun-text[data-tone="tertiary"] { color: var(--_kjun-color-text-tertiary); }
 .kjun-text.kjun-text[data-tone="disabled"] { color: var(--_kjun-color-text-disabled); }
+.kjun-text.kjun-text[data-tone="brand"] { color: var(--_kjun-color-brand); }
+.kjun-text.kjun-text[data-tone="danger"] { color: var(--_kjun-color-danger); }
+.kjun-text.kjun-text[data-tone="success"] { color: var(--_kjun-color-success); }
+.kjun-text.kjun-text[data-tone="warning"] { color: var(--_kjun-color-warning); }
+/* inverse is text on the brand surface. */
+.kjun-text.kjun-text[data-tone="inverse"] { color: var(--_kjun-color-on-brand); }
 .kjun-text[data-align="start"] { text-align: start; }
 .kjun-text[data-align="center"] { text-align: center; }
 .kjun-text[data-align="end"] { text-align: end; }

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

@@ -1,6 +1,6 @@
 import { type CardElevation, type CardPadding, type CardRadius, type CardSurface } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
-import { type StyleProp, type ViewStyle } from "react-native";
+import { type GestureResponderEvent, type StyleProp, type ViewStyle } from "react-native";
 export interface KjunCardProps {
     title?: string;
     subtitle?: string;
@@ -17,5 +17,12 @@ export interface KjunCardProps {
     dividers?: boolean;
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
+    /** Makes the whole card one button (onPress). Do not put buttons or links inside a pressable card. */
+    pressable?: boolean;
+    /** Blocks a pressable card and dims it. */
+    disabled?: boolean;
+    /** Button name of a pressable card; defaults to the title. */
+    ariaLabel?: string;
+    onPress?: (event: GestureResponderEvent) => void;
 }
-export declare function KjunCard({ title, subtitle, header, headerActions, media, footer, padding, bodyPadding, radius, surface, elevation, border, dividers, children, style, }: KjunCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunCard({ title, subtitle, header, headerActions, media, footer, padding, bodyPadding, radius, surface, elevation, border, dividers, children, style, pressable, disabled, ariaLabel, onPress, }: KjunCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { type CardElevation, type CardPadding, type CardRadius, type CardSurface } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
-import { type StyleProp, type ViewStyle } from "react-native";
+import { type GestureResponderEvent, type StyleProp, type ViewStyle } from "react-native";
 export interface KjunCardProps {
     title?: string;
     subtitle?: string;
@@ -17,5 +17,12 @@ export interface KjunCardProps {
     dividers?: boolean;
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
+    /** Makes the whole card one button (onPress). Do not put buttons or links inside a pressable card. */
+    pressable?: boolean;
+    /** Blocks a pressable card and dims it. */
+    disabled?: boolean;
+    /** Button name of a pressable card; defaults to the title. */
+    ariaLabel?: string;
+    onPress?: (event: GestureResponderEvent) => void;
 }
-export declare function KjunCard({ title, subtitle, header, headerActions, media, footer, padding, bodyPadding, radius, surface, elevation, border, dividers, children, style, }: KjunCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunCard({ title, subtitle, header, headerActions, media, footer, padding, bodyPadding, radius, surface, elevation, border, dividers, children, style, pressable, disabled, ariaLabel, onPress, }: KjunCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
-export declare function Collapse({ open, children }: {
+/** keepMounted: once opened, the body stays mounted (height 0, hidden from assistive technology) while closed. */
+export declare function Collapse({ open, keepMounted, children }: {
     open: boolean;
+    keepMounted?: boolean;
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
-export declare function Collapse({ open, children }: {
+/** keepMounted: once opened, the body stays mounted (height 0, hidden from assistive technology) while closed. */
+export declare function Collapse({ open, keepMounted, children }: {
     open: boolean;
+    keepMounted?: boolean;
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/packages/native/src/display-primitives.d.cts

@@ -49,5 +49,6 @@ export interface KjunProgressProps {
     showLabel?: boolean;
     label?: ReactNode;
     subLabel?: ReactNode;
+    shape?: "bar" | "circle";
 }
-export declare function KjunProgress({ value, max, size, variant, showLabel, label, subLabel, }: KjunProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunProgress({ value, max, size, variant, showLabel, label, subLabel, shape, }: KjunProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/display-primitives.d.ts

@@ -49,5 +49,6 @@ export interface KjunProgressProps {
     showLabel?: boolean;
     label?: ReactNode;
     subLabel?: ReactNode;
+    shape?: "bar" | "circle";
 }
-export declare function KjunProgress({ value, max, size, variant, showLabel, label, subLabel, }: KjunProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunProgress({ value, max, size, variant, showLabel, label, subLabel, shape, }: KjunProgressProps): import("react/jsx-runtime").JSX.Element;

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

@@ -13,6 +13,8 @@ export interface KjunDrawerProps {
     footer?: ReactNode;
     children: ReactNode;
     onClose?: () => void;
+    /** Called once after the close finishes and the layer has left the screen (not when it mounts closed or reopens during the exit). */
+    onAfterClose?: () => void;
     ariaLabel?: string;
     /** Top safe area, padded inside top and side drawers and kept clear above a bottom sheet. */
     safeAreaTop?: number;
@@ -23,4 +25,4 @@ export interface KjunDrawerProps {
     /** Keeps the panel above the on-screen keyboard (devices only). */
     avoidKeyboard?: boolean;
 }
-export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, safeAreaTop, safeAreaBottom, maxHeight, avoidKeyboard, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, onAfterClose, ariaLabel, safeAreaTop, safeAreaBottom, maxHeight, avoidKeyboard, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -13,6 +13,8 @@ export interface KjunDrawerProps {
     footer?: ReactNode;
     children: ReactNode;
     onClose?: () => void;
+    /** Called once after the close finishes and the layer has left the screen (not when it mounts closed or reopens during the exit). */
+    onAfterClose?: () => void;
     ariaLabel?: string;
     /** Top safe area, padded inside top and side drawers and kept clear above a bottom sheet. */
     safeAreaTop?: number;
@@ -23,4 +25,4 @@ export interface KjunDrawerProps {
     /** Keeps the panel above the on-screen keyboard (devices only). */
     avoidKeyboard?: boolean;
 }
-export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, safeAreaTop, safeAreaBottom, maxHeight, avoidKeyboard, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, onAfterClose, ariaLabel, safeAreaTop, safeAreaBottom, maxHeight, avoidKeyboard, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,10 @@ export declare function useKjunFeedback(): KjunFeedback;
 export interface KjunFeedbackProviderProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
+    /** A feedback API from createKjunFeedback(), for calls outside components. */
+    controller?: KjunFeedback;
 }
-export declare function KjunFeedbackProvider({ children, style }: KjunFeedbackProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunFeedbackProvider({ children, style, controller: controllerProp }: KjunFeedbackProviderProps): import("react/jsx-runtime").JSX.Element;
 export type { ConfirmOptions, KjunFeedback, PromptOptions, ToastOptions } from "@kjun-ui/tokens";
+/** An app-owned feedback API that plain functions can call; pass it to KjunFeedbackProvider controller. */
+export { createKjunFeedback } from "@kjun-ui/tokens";

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

@@ -5,6 +5,10 @@ export declare function useKjunFeedback(): KjunFeedback;
 export interface KjunFeedbackProviderProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
+    /** A feedback API from createKjunFeedback(), for calls outside components. */
+    controller?: KjunFeedback;
 }
-export declare function KjunFeedbackProvider({ children, style }: KjunFeedbackProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunFeedbackProvider({ children, style, controller: controllerProp }: KjunFeedbackProviderProps): import("react/jsx-runtime").JSX.Element;
 export type { ConfirmOptions, KjunFeedback, PromptOptions, ToastOptions } from "@kjun-ui/tokens";
+/** An app-owned feedback API that plain functions can call; pass it to KjunFeedbackProvider controller. */
+export { createKjunFeedback } from "@kjun-ui/tokens";

package/dist/types/packages/native/src/layout-primitives.d.cts

@@ -1,8 +1,10 @@
 import { type ReactNode } from "react";
-import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { type StyleProp, type TextProps, type TextStyle, type ViewStyle } from "react-native";
 import { type InlineAlign, type InlineGap, type InlineJustify, type StackAlign, type StackGap, type TextAlign, type TextTone, type TextVariant } from "../../../shared/package-runtime/layout-primitives.cjs";
 export type { InlineAlign, InlineGap, InlineJustify, StackAlign, StackGap, TextAlign, TextTone, TextVariant };
-export interface KjunTextProps {
+/** Other React Native Text props (accessibilityLabel, testID, selectable, allowFontScaling, adjustsFontSizeToFit…) pass through.
+ * adjustsFontSizeToFit only shrinks: the variant size stays the largest. */
+export interface KjunTextProps extends Omit<TextProps, "style" | "children" | "numberOfLines"> {
     /** Typography role; every size, line height and weight comes from tokens.typography. */
     variant?: TextVariant;
     /** Text color role. */
@@ -13,7 +15,7 @@ export interface KjunTextProps {
     style?: StyleProp<TextStyle>;
     children?: ReactNode;
 }
-export declare function KjunText({ variant, tone, align, maxLines, style, children }: KjunTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunText({ variant, tone, align, maxLines, style, children, ...rest }: KjunTextProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunStackProps {
     /** Space between children: space.stack (sm·md·lg) or space.section (section-sm·md·lg). */
     gap?: StackGap;

package/dist/types/packages/native/src/layout-primitives.d.ts

@@ -1,8 +1,10 @@
 import { type ReactNode } from "react";
-import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { type StyleProp, type TextProps, type TextStyle, type ViewStyle } from "react-native";
 import { type InlineAlign, type InlineGap, type InlineJustify, type StackAlign, type StackGap, type TextAlign, type TextTone, type TextVariant } from "../../../shared/package-runtime/layout-primitives.js";
 export type { InlineAlign, InlineGap, InlineJustify, StackAlign, StackGap, TextAlign, TextTone, TextVariant };
-export interface KjunTextProps {
+/** Other React Native Text props (accessibilityLabel, testID, selectable, allowFontScaling, adjustsFontSizeToFit…) pass through.
+ * adjustsFontSizeToFit only shrinks: the variant size stays the largest. */
+export interface KjunTextProps extends Omit<TextProps, "style" | "children" | "numberOfLines"> {
     /** Typography role; every size, line height and weight comes from tokens.typography. */
     variant?: TextVariant;
     /** Text color role. */
@@ -13,7 +15,7 @@ export interface KjunTextProps {
     style?: StyleProp<TextStyle>;
     children?: ReactNode;
 }
-export declare function KjunText({ variant, tone, align, maxLines, style, children }: KjunTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunText({ variant, tone, align, maxLines, style, children, ...rest }: KjunTextProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunStackProps {
     /** Space between children: space.stack (sm·md·lg) or space.section (section-sm·md·lg). */
     gap?: StackGap;

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

@@ -8,18 +8,33 @@ export interface KjunListRowProps {
     actions?: ReactNode;
     href?: string;
     disabled?: boolean;
+    /** Draws the title in the danger role, for rows such as "Delete account". */
+    destructive?: boolean;
+    /** Ends the row with a decorative chevron that marks it as navigation. */
+    chevron?: boolean;
     onPress?: (event: GestureResponderEvent) => void;
+    /** Name of a pressable or link row, e.g. with the amount a screen reader should hear. */
+    ariaLabel?: string;
+    /** Display-only content under the description (a budget bar); no buttons or links inside a pressable row. */
+    children?: ReactNode;
 }
-export declare function KjunListRow({ title, description, leading, trailing, actions, href, disabled, onPress }: KjunListRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListRow({ title, description, leading, trailing, actions, href, disabled, destructive, chevron, onPress, ariaLabel, children }: KjunListRowProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunListSectionProps {
     title?: string;
     description?: string;
     actions?: ReactNode;
     children: ReactNode;
     ariaLabel?: string;
+    /** Paints the surface background (default true); false lets the page background show through. */
+    surface?: boolean;
     /** Draws dividers between rows (default true). */
     divider?: boolean;
     /** "compact" rows keep the 16px inset but are 44 tall (the touch minimum) instead of 56. */
     density?: "default" | "compact";
 }
-export declare function KjunListSection({ title, description, actions, children, ariaLabel, divider, density }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListSection({ title, description, actions, children, ariaLabel, surface, divider, density }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
+export interface KjunListItemProps {
+    children: ReactNode;
+}
+/** Non-row content inside a KjunListSection (a theme switcher, a note) on the rows' inset and dividers. */
+export declare function KjunListItem({ children }: KjunListItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -8,18 +8,33 @@ export interface KjunListRowProps {
     actions?: ReactNode;
     href?: string;
     disabled?: boolean;
+    /** Draws the title in the danger role, for rows such as "Delete account". */
+    destructive?: boolean;
+    /** Ends the row with a decorative chevron that marks it as navigation. */
+    chevron?: boolean;
     onPress?: (event: GestureResponderEvent) => void;
+    /** Name of a pressable or link row, e.g. with the amount a screen reader should hear. */
+    ariaLabel?: string;
+    /** Display-only content under the description (a budget bar); no buttons or links inside a pressable row. */
+    children?: ReactNode;
 }
-export declare function KjunListRow({ title, description, leading, trailing, actions, href, disabled, onPress }: KjunListRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListRow({ title, description, leading, trailing, actions, href, disabled, destructive, chevron, onPress, ariaLabel, children }: KjunListRowProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunListSectionProps {
     title?: string;
     description?: string;
     actions?: ReactNode;
     children: ReactNode;
     ariaLabel?: string;
+    /** Paints the surface background (default true); false lets the page background show through. */
+    surface?: boolean;
     /** Draws dividers between rows (default true). */
     divider?: boolean;
     /** "compact" rows keep the 16px inset but are 44 tall (the touch minimum) instead of 56. */
     density?: "default" | "compact";
 }
-export declare function KjunListSection({ title, description, actions, children, ariaLabel, divider, density }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListSection({ title, description, actions, children, ariaLabel, surface, divider, density }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
+export interface KjunListItemProps {
+    children: ReactNode;
+}
+/** Non-row content inside a KjunListSection (a theme switcher, a note) on the rows' inset and dividers. */
+export declare function KjunListItem({ children }: KjunListItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
+import { type ColorValue, type ImageSourcePropType } from "react-native";
 export interface KjunImageProps {
     src?: string;
     source?: ImageSourcePropType;
@@ -20,8 +20,10 @@ export interface KjunAvatarProps {
     decorative?: boolean;
     size?: "sm" | "md" | "lg";
     shape?: "circle" | "square";
+    color?: ColorValue;
+    textColor?: ColorValue;
     fallback?: ReactNode;
     onLoad?: () => void;
     onError?: () => void;
 }
-export declare function KjunAvatar({ src, source, name, alt, decorative, size, shape, fallback, onLoad, onError }: KjunAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunAvatar({ src, source, name, alt, decorative, size, shape, color, textColor, fallback, onLoad, onError }: KjunAvatarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
+import { type ColorValue, type ImageSourcePropType } from "react-native";
 export interface KjunImageProps {
     src?: string;
     source?: ImageSourcePropType;
@@ -20,8 +20,10 @@ export interface KjunAvatarProps {
     decorative?: boolean;
     size?: "sm" | "md" | "lg";
     shape?: "circle" | "square";
+    color?: ColorValue;
+    textColor?: ColorValue;
     fallback?: ReactNode;
     onLoad?: () => void;
     onError?: () => void;
 }
-export declare function KjunAvatar({ src, source, name, alt, decorative, size, shape, fallback, onLoad, onError }: KjunAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunAvatar({ src, source, name, alt, decorative, size, shape, color, textColor, fallback, onLoad, onError }: KjunAvatarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -19,6 +19,8 @@ export interface KjunModalProps {
     open: boolean;
     onOpenChange: (value: boolean) => void;
     onClose?: () => void;
+    /** Called once after the close finishes and the layer has left the screen (not when it mounts closed or reopens during the exit). */
+    onAfterClose?: () => void;
     onCancel?: () => void;
     onConfirm?: () => void;
     title?: string;
@@ -43,4 +45,4 @@ export interface KjunModalProps {
     children: ReactNode;
     ariaLabel?: string;
 }
-export declare function KjunModal({ open, onOpenChange, onClose, onCancel, onConfirm, title, size, closable, closeOnOverlay, closeOnEsc, showHeader, showFooter, showConfirmButton, showCancelButton, confirmText, cancelText, confirmDisabled, loading, noPadding, height, confirmVariant, footerSize, header, footer, children, ariaLabel, }: KjunModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunModal({ open, onOpenChange, onClose, onAfterClose, onCancel, onConfirm, title, size, closable, closeOnOverlay, closeOnEsc, showHeader, showFooter, showConfirmButton, showCancelButton, confirmText, cancelText, confirmDisabled, loading, noPadding, height, confirmVariant, footerSize, header, footer, children, ariaLabel, }: KjunModalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -19,6 +19,8 @@ export interface KjunModalProps {
     open: boolean;
     onOpenChange: (value: boolean) => void;
     onClose?: () => void;
+    /** Called once after the close finishes and the layer has left the screen (not when it mounts closed or reopens during the exit). */
+    onAfterClose?: () => void;
     onCancel?: () => void;
     onConfirm?: () => void;
     title?: string;
@@ -43,4 +45,4 @@ export interface KjunModalProps {
     children: ReactNode;
     ariaLabel?: string;
 }
-export declare function KjunModal({ open, onOpenChange, onClose, onCancel, onConfirm, title, size, closable, closeOnOverlay, closeOnEsc, showHeader, showFooter, showConfirmButton, showCancelButton, confirmText, cancelText, confirmDisabled, loading, noPadding, height, confirmVariant, footerSize, header, footer, children, ariaLabel, }: KjunModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunModal({ open, onOpenChange, onClose, onAfterClose, onCancel, onConfirm, title, size, closable, closeOnOverlay, closeOnEsc, showHeader, showFooter, showConfirmButton, showCancelButton, confirmText, cancelText, confirmDisabled, loading, noPadding, height, confirmVariant, footerSize, header, footer, children, ariaLabel, }: KjunModalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,11 +9,17 @@ export declare function KjunAccordion({ multiple, tone, children, }: KjunAccordi
 export interface KjunAccordionItemProps {
     title?: string;
     defaultOpen?: boolean;
+    /** Controlled open state. A controlled item follows this value only and stays out of the Accordion's single-open rule. */
+    open?: boolean;
+    /** Requests a change on a controlled item; reports every change on an uncontrolled one (also when a sibling closes it). */
+    onOpenChange?: (open: boolean) => void;
+    /** Keeps the body mounted after it first opens, so inputs keep their state while closed. */
+    keepMounted?: boolean;
     disabled?: boolean;
     header?: ReactNode;
     children: ReactNode;
 }
-export declare function KjunAccordionItem({ title, defaultOpen, disabled, header, children, }: KjunAccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunAccordionItem({ title, defaultOpen, disabled, header, open: openProp, onOpenChange, keepMounted, children, }: KjunAccordionItemProps): import("react/jsx-runtime").JSX.Element;
 export interface BreadcrumbItem {
     label: string;
     to?: string;

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

@@ -9,11 +9,17 @@ export declare function KjunAccordion({ multiple, tone, children, }: KjunAccordi
 export interface KjunAccordionItemProps {
     title?: string;
     defaultOpen?: boolean;
+    /** Controlled open state. A controlled item follows this value only and stays out of the Accordion's single-open rule. */
+    open?: boolean;
+    /** Requests a change on a controlled item; reports every change on an uncontrolled one (also when a sibling closes it). */
+    onOpenChange?: (open: boolean) => void;
+    /** Keeps the body mounted after it first opens, so inputs keep their state while closed. */
+    keepMounted?: boolean;
     disabled?: boolean;
     header?: ReactNode;
     children: ReactNode;
 }
-export declare function KjunAccordionItem({ title, defaultOpen, disabled, header, children, }: KjunAccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunAccordionItem({ title, defaultOpen, disabled, header, open: openProp, onOpenChange, keepMounted, children, }: KjunAccordionItemProps): import("react/jsx-runtime").JSX.Element;
 export interface BreadcrumbItem {
     label: string;
     to?: string;

package/dist/types/shared/package-runtime/layout-primitives.d.cts

@@ -1,5 +1,5 @@
 export type TextVariant = "pageTitle" | "sectionTitle" | "cardTitle" | "body" | "label" | "meta" | "caption" | "numberSm" | "numberMd" | "numberLg" | "displaySm" | "displayMd" | "displayLg";
-export type TextTone = "default" | "secondary" | "tertiary" | "disabled";
+export type TextTone = "default" | "secondary" | "tertiary" | "disabled" | "brand" | "danger" | "success" | "warning" | "inverse";
 export type TextAlign = "start" | "center" | "end";
 export type TextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
 export type StackGap = "none" | "sm" | "md" | "lg" | "section-sm" | "section-md" | "section-lg";

package/dist/types/shared/package-runtime/layout-primitives.d.ts

@@ -1,5 +1,5 @@
 export type TextVariant = "pageTitle" | "sectionTitle" | "cardTitle" | "body" | "label" | "meta" | "caption" | "numberSm" | "numberMd" | "numberLg" | "displaySm" | "displayMd" | "displayLg";
-export type TextTone = "default" | "secondary" | "tertiary" | "disabled";
+export type TextTone = "default" | "secondary" | "tertiary" | "disabled" | "brand" | "danger" | "success" | "warning" | "inverse";
 export type TextAlign = "start" | "center" | "end";
 export type TextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
 export type StackGap = "none" | "sm" | "md" | "lg" | "section-sm" | "section-md" | "section-lg";

package/dist/types/shared/package-runtime/progress-circle.d.cts

@@ -0,0 +1,11 @@
+export type ProgressCircleSize = "sm" | "md" | "lg";
+/** Circle progress geometry: the arc is a dashed stroke whose visible length is the percentage of the circumference. */
+export declare function progressCircle(size: ProgressCircleSize, percentage: number): {
+    diameter: 24 | 48 | 64;
+    stroke: 4 | 6;
+    radius: number;
+    centre: number;
+    circumference: number;
+    offset: number;
+    showsPercentage: boolean;
+};

package/dist/types/shared/package-runtime/progress-circle.d.ts

@@ -0,0 +1,11 @@
+export type ProgressCircleSize = "sm" | "md" | "lg";
+/** Circle progress geometry: the arc is a dashed stroke whose visible length is the percentage of the circumference. */
+export declare function progressCircle(size: ProgressCircleSize, percentage: number): {
+    diameter: 24 | 48 | 64;
+    stroke: 4 | 6;
+    radius: number;
+    centre: number;
+    circumference: number;
+    offset: number;
+    showsPercentage: boolean;
+};

package/dist/types/shared/package-runtime/use-after-close.d.cts

@@ -0,0 +1,6 @@
+/** Calls onAfterClose once when a layer leaves the screen (present true → false). A reopen during the exit keeps
+ * present true, so it reports nothing; a layer mounted closed reports nothing either. */
+export declare function useAfterClose(present: boolean, onAfterClose?: () => void, enabled?: boolean): void;
+/** Web overlays can outlive present by a render (react-aria finishes its exit first), so this reports when the
+ * overlay element itself leaves the DOM while closed. Attach the returned ref to the overlay. */
+export declare function useAfterCloseRef(open: boolean, onAfterClose?: () => void): (node: Element | null) => void;

package/dist/types/shared/package-runtime/use-after-close.d.ts

@@ -0,0 +1,6 @@
+/** Calls onAfterClose once when a layer leaves the screen (present true → false). A reopen during the exit keeps
+ * present true, so it reports nothing; a layer mounted closed reports nothing either. */
+export declare function useAfterClose(present: boolean, onAfterClose?: () => void, enabled?: boolean): void;
+/** Web overlays can outlive present by a render (react-aria finishes its exit first), so this reports when the
+ * overlay element itself leaves the DOM while closed. Attach the returned ref to the overlay. */
+export declare function useAfterCloseRef(open: boolean, onAfterClose?: () => void): (node: Element | null) => void;

package/package.json

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