@kjun-ui/native 0.14.0 → 0.16.0

package/dist/styles.css

@@ -79,6 +79,8 @@
   --_kjun-color-selected-bg: var(--kjun-selected-bg, var(--kjun-active));
   --_kjun-color-on-brand: var(--kjun-on-brand, var(--kjun-inverse));
   --_kjun-color-switch-thumb-on: var(--kjun-switch-thumb-on, var(--kjun-on-brand, var(--kjun-inverse)));
+  --_kjun-color-filter-selected-bg: var(--kjun-filter-selected-bg, var(--kjun-text));
+  --_kjun-color-filter-selected-text: var(--kjun-filter-selected-text, var(--kjun-inverse));
   --_kjun-color-on-danger: var(--kjun-on-danger, var(--kjun-inverse));
   --_kjun-color-on-success: var(--kjun-on-success, var(--kjun-inverse));
   --_kjun-color-on-warning: var(--kjun-on-warning, var(--kjun-inverse));
@@ -182,6 +184,8 @@
   --_kjun-selected-bg: var(--_kjun-color-selected-bg);
   --_kjun-on-brand: var(--_kjun-color-on-brand);
   --_kjun-switch-thumb-on: var(--_kjun-color-switch-thumb-on);
+  --_kjun-filter-selected-bg: var(--_kjun-color-filter-selected-bg);
+  --_kjun-filter-selected-text: var(--_kjun-color-filter-selected-text);
   --_kjun-on-danger: var(--_kjun-color-on-danger);
   --_kjun-on-success: var(--_kjun-color-on-success);
   --_kjun-on-warning: var(--_kjun-color-on-warning);
@@ -532,6 +536,9 @@
   --_kjun-extension-switch-label-gap: 8px;
   --_kjun-extension-tooltip-padding-x: 8px;
   --_kjun-extension-tooltip-padding-y: 4px;
+  --_kjun-extension-tooltip-max-widths-sm: 192px;
+  --_kjun-extension-tooltip-max-widths-md: 256px;
+  --_kjun-extension-tooltip-max-widths-lg: 320px;
   --_kjun-extension-tooltip-max-width: 256px;
   --_kjun-extension-tooltip-arrow-size: 8px;
   --_kjun-extension-financial-affix-gap: 4px;
@@ -833,6 +840,7 @@
   --_kjun-geometry-card-radii-sm: 8px;
   --_kjun-geometry-card-radii-md: 12px;
   --_kjun-geometry-card-radii-lg: 16px;
+  --_kjun-geometry-card-radii-xl: 24px;
   --_kjun-geometry-card-subtitle-gap: 4px;
   --_kjun-geometry-card-title-gap: 8px;
   --_kjun-geometry-card-glass-blur: 10px;
@@ -882,6 +890,7 @@
   --_kjun-geometry-radius-radius9999: 9999px;
   --_kjun-geometry-radius-radius14: 14px;
   --_kjun-geometry-radius-radius20: 20px;
+  --_kjun-geometry-radius-radius24: 24px;
   --_kjun-geometry-native-minimum-touch-target: 44px;
   --_kjun-geometry-space-inline-xs: 4px;
   --_kjun-geometry-space-inline-sm: 8px;
@@ -2421,8 +2430,8 @@
   white-space: nowrap;
 }
 .kjun-filter-chip[aria-pressed="true"] > span {
-  background: var(--_kjun-color-text);
-  color: var(--_kjun-color-inverse);
+  background: var(--_kjun-color-filter-selected-bg);
+  color: var(--_kjun-color-filter-selected-text);
   font-weight: var(--_kjun-type-control-weight);
 }
 .kjun-filter-chip:disabled {
@@ -2520,6 +2529,17 @@
   font-weight: var(--_kjun-type-caption-weight);
   letter-spacing: var(--_kjun-type-caption-tracking);
 }
+/* Title above the body: a bolder small role in the same tooltip text color. */
+.kjun-tooltip-title {
+  display: block;
+  font-size: var(--_kjun-type-control-small-size);
+  line-height: var(--_kjun-type-control-small-line);
+  font-weight: var(--_kjun-type-control-small-weight);
+  letter-spacing: var(--_kjun-type-control-small-tracking);
+}
+.kjun-tooltip-body { display: block; }
+.kjun-tooltip[data-align="start"] { text-align: start; }
+.kjun-tooltip[data-align="center"] { text-align: center; }
 .kjun-tooltip svg {
   display: block;
   color: var(--_kjun-color-chart-tooltip-bg);
@@ -4800,7 +4820,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}
@@ -5023,6 +5043,9 @@
 
 /* 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}
+/* A rounded section clips its rows to the corners; row focus rings move inside so the clip does not cut them. */
+.kjun-list-section[data-radius]{overflow:hidden;overflow:clip}
+.kjun-list-section[data-radius] .kjun-list-main:focus-visible{outline-offset:var(--_kjun-state-focus-inset-offset)}
 .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}

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/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/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

@@ -1,3 +1,4 @@
+import { type CardRadius } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
 import { type GestureResponderEvent } from "react-native";
 export interface KjunListRowProps {
@@ -13,8 +14,12 @@ export interface KjunListRowProps {
     /** 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, destructive, chevron, 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;
@@ -27,8 +32,10 @@ export interface KjunListSectionProps {
     divider?: boolean;
     /** "compact" rows keep the 16px inset but are 44 tall (the touch minimum) instead of 56. */
     density?: "default" | "compact";
+    /** Rounds the section on the card radius steps and clips its rows to the corners (default "none"). */
+    radius?: CardRadius;
 }
-export declare function KjunListSection({ title, description, actions, children, ariaLabel, surface, divider, density }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListSection({ title, description, actions, children, ariaLabel, surface, divider, density, radius }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunListItemProps {
     children: ReactNode;
 }

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

@@ -1,3 +1,4 @@
+import { type CardRadius } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
 import { type GestureResponderEvent } from "react-native";
 export interface KjunListRowProps {
@@ -13,8 +14,12 @@ export interface KjunListRowProps {
     /** 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, destructive, chevron, 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;
@@ -27,8 +32,10 @@ export interface KjunListSectionProps {
     divider?: boolean;
     /** "compact" rows keep the 16px inset but are 44 tall (the touch minimum) instead of 56. */
     density?: "default" | "compact";
+    /** Rounds the section on the card radius steps and clips its rows to the corners (default "none"). */
+    radius?: CardRadius;
 }
-export declare function KjunListSection({ title, description, actions, children, ariaLabel, surface, divider, density }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListSection({ title, description, actions, children, ariaLabel, surface, divider, density, radius }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunListItemProps {
     children: ReactNode;
 }

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

@@ -21,6 +21,11 @@ export interface KjunPopoverProps {
 export declare function KjunPopover({ noPadding, open: controlled, onOpenChange, manualTrigger, matchTriggerWidth, maxHeight, flip, focusOnOpen, ariaLabel, placement, header, modal, trigger, children, }: KjunPopoverProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunTooltipProps extends Pick<PressableProps, "onPress" | "disabled"> {
     content?: string;
+    /** A bolder line above content (a file name above its path). Read together with content. */
+    title?: string;
+    align?: "start" | "center";
+    /** Maximum width step (tooltip.maxWidths); default is md, the earlier width. */
+    width?: "sm" | "md" | "lg";
     placement?: "top" | "bottom" | "left" | "right";
     delay?: number;
     /** Controlled visibility; omit to let hover and focus drive it. */
@@ -28,4 +33,4 @@ export interface KjunTooltipProps extends Pick<PressableProps, "onPress" | "disa
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export declare function KjunTooltip({ content: message, placement, delay, children, onPress, disabled, open: controlled, onOpenChange, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunTooltip({ content: body, title, align, width, placement, delay, children, onPress, disabled, open: controlled, onOpenChange, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -21,6 +21,11 @@ export interface KjunPopoverProps {
 export declare function KjunPopover({ noPadding, open: controlled, onOpenChange, manualTrigger, matchTriggerWidth, maxHeight, flip, focusOnOpen, ariaLabel, placement, header, modal, trigger, children, }: KjunPopoverProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunTooltipProps extends Pick<PressableProps, "onPress" | "disabled"> {
     content?: string;
+    /** A bolder line above content (a file name above its path). Read together with content. */
+    title?: string;
+    align?: "start" | "center";
+    /** Maximum width step (tooltip.maxWidths); default is md, the earlier width. */
+    width?: "sm" | "md" | "lg";
     placement?: "top" | "bottom" | "left" | "right";
     delay?: number;
     /** Controlled visibility; omit to let hover and focus drive it. */
@@ -28,4 +33,4 @@ export interface KjunTooltipProps extends Pick<PressableProps, "onPress" | "disa
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export declare function KjunTooltip({ content: message, placement, delay, children, onPress, disabled, open: controlled, onOpenChange, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunTooltip({ content: body, title, align, width, placement, delay, children, onPress, disabled, open: controlled, onOpenChange, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;

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.14.0",
+  "version": "0.16.0",
   "license": "MIT",
   "homepage": "https://ui.kjun.dev",
   "repository": {
@@ -47,8 +47,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@kjun-ui/tokens": "0.14.0",
-    "@kjun-ui/icons": "0.14.0"
+    "@kjun-ui/tokens": "0.16.0",
+    "@kjun-ui/icons": "0.16.0"
   },
   "peerDependencies": {
     "react": "^19.2.3",