@kjun-ui/native 0.13.0 → 0.14.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;
@@ -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/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/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/list.d.cts

@@ -8,18 +8,29 @@ 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;
 }
-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 }: 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,29 @@ 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;
 }
-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 }: 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjun-ui/native",
-  "version": "0.13.0",
+  "version": "0.14.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.14.0",
+    "@kjun-ui/icons": "0.14.0"
   },
   "peerDependencies": {
     "react": "^19.2.3",