@kjun-ui/native 0.14.0 → 0.15.0

package/dist/styles.css

@@ -4800,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}

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

@@ -13,8 +13,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;

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

@@ -13,8 +13,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;

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/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.15.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.15.0",
+    "@kjun-ui/icons": "0.15.0"
   },
   "peerDependencies": {
     "react": "^19.2.3",