@kjun-ui/native 0.12.2 → 0.14.0

package/dist/styles.css

@@ -78,6 +78,7 @@
   --_kjun-color-brand-light: var(--kjun-brand-light, var(--kjun-border));
   --_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-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));
@@ -180,6 +181,7 @@
   --_kjun-brand-light: var(--_kjun-color-brand-light);
   --_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-on-danger: var(--_kjun-color-on-danger);
   --_kjun-on-success: var(--_kjun-color-on-success);
   --_kjun-on-warning: var(--_kjun-color-on-warning);
@@ -256,9 +258,14 @@
   --_kjun-extension-state-padding-sm: 24px;
   --_kjun-extension-state-padding-md: 48px;
   --_kjun-extension-state-padding-lg: 80px;
+  --_kjun-extension-fab-size: 56px;
+  --_kjun-extension-fab-inset: 16px;
+  --_kjun-extension-fab-icon-size: 24px;
   --_kjun-extension-list-padding: 16px;
   --_kjun-extension-list-gap: 12px;
   --_kjun-extension-list-minimum-height: 56px;
+  --_kjun-extension-list-compact-minimum-height: 44px;
+  --_kjun-extension-list-compact-padding-y: 12px;
   --_kjun-extension-list-description-gap: 4px;
   --_kjun-extension-list-actions-gap: 8px;
   --_kjun-extension-list-actions-padding: 16px;
@@ -647,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;
@@ -1255,6 +1268,11 @@
 .kjun-scope .kjun-choice:not(.kjun-choice--disabled):active .kjun-radio,
 .kjun-scope .kjun-choice:not(.kjun-choice--disabled) input:active + .kjun-radio { border-color: var(--_kjun-brand-active); }
 .kjun-scope .kjun-switch + .kjun-choice-label { margin-left: var(--_kjun-extension-switch-label-gap); }
+/* A switch description sits under its label and starts where the label starts. */
+.kjun-scope .kjun-choice-text { display: flex; flex-direction: column; min-width: 0; }
+.kjun-scope .kjun-switch + .kjun-choice-text { margin-left: var(--_kjun-extension-switch-label-gap); }
+.kjun-scope .kjun-choice-text > .kjun-choice-label { margin-left: 0; }
+.kjun-scope .kjun-choice-description { margin-top: var(--_kjun-geometry-dimension-value4); font-size: var(--_kjun-type-caption-size); line-height: var(--_kjun-type-caption-line); font-weight: var(--_kjun-type-caption-weight); letter-spacing: var(--_kjun-type-caption-tracking); color: var(--_kjun-color-text-secondary); }
 .kjun-scope .kjun-switch {
   position: relative;
   flex-shrink: 0;
@@ -1289,7 +1307,7 @@
 .kjun-scope .kjun-switch--on .kjun-switch-thumb {
   --_kjun-switch-thumb-inset: var(--_kjun-extension-switch-padding);
   margin: 0;
-  background: var(--_kjun-on-brand);
+  background: var(--_kjun-switch-thumb-on);
   transform: translateX(calc(var(--_kjun-switch-width) - var(--_kjun-switch-height)));
 }
 
@@ -1506,6 +1524,10 @@
 .kjun-button[data-variant="secondary"]:active:not(:disabled) {
   background: var(--_kjun-color-button-secondary-active);
 }
+/* A link button hugs its text: no fill, no inset, the brand ink, underlined on hover and keyboard focus. */
+.kjun-button[data-variant="link"] { background: transparent; color: var(--_kjun-color-brand); }
+.kjun-button[data-variant="link"]:is(:hover, [data-focus-visible], :focus-visible):not(:disabled) { text-decoration: underline; }
+.kjun-button[data-variant="link"]:active:not(:disabled) { color: var(--_kjun-color-brand-active); }
 .kjun-button[data-variant="ghost"],
 .kjun-button[data-variant="danger-ghost"] {
   background: transparent;
@@ -1592,6 +1614,7 @@
 .kjun-form-group:last-child {
   margin-bottom: 0;
 }
+.kjun-form-optional { color: var(--_kjun-color-text-tertiary); font-weight: var(--_kjun-type-caption-weight); }
 .kjun-form-label {
   display: block;
   font-size: var(--_kjun-type-label-size);
@@ -2211,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;
   }
@@ -2273,18 +2338,22 @@
   cursor: pointer;
   transition: color var(--_kjun-motion-indicator) var(--_kjun-ease-out);
 }
+/* The selected segment carries an inset edge so it reads apart from the track even when surface and
+   secondary are close (light palettes). Inset keeps the segment's size. */
 .kjun-button-group button[aria-pressed="true"] {
   background: var(--_kjun-color-surface);
+  box-shadow: inset 0 0 0 var(--_kjun-border-default-width) var(--_kjun-color-border);
   color: var(--_kjun-color-text);
   font-weight: var(--_kjun-type-control-weight);
 }
-.kjun-button-group[data-indicator] button[aria-pressed="true"] { background: transparent; }
+.kjun-button-group[data-indicator] button[aria-pressed="true"] { background: transparent; box-shadow: none; }
 .kjun-button-group-indicator {
   position: absolute;
   left: 0;
   pointer-events: none;
   border-radius: var(--_kjun-geometry-button-group-item-radii-md);
   background: var(--_kjun-color-surface);
+  box-shadow: inset 0 0 0 var(--_kjun-border-default-width) var(--_kjun-color-border);
 }
 .kjun-button-group-indicator[data-animate="true"] {
   transition: transform var(--_kjun-motion-indicator) var(--_kjun-ease-out), width var(--_kjun-motion-indicator) var(--_kjun-ease-out);
@@ -4574,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;
@@ -4724,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-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-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}
@@ -4733,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)}
@@ -4937,6 +5015,21 @@
 
 .kjun-list-heading > div { flex:1; min-width:0; overflow-wrap:anywhere; }
 
+/* KjunFab: a round action pinned to the viewport's bottom end, above page content and clear of the safe area. */
+.kjun-fab{position:fixed;right:var(--_kjun-extension-fab-inset);z-index:var(--_kjun-layer-page-navigation);display:inline-flex;align-items:center;justify-content:center;width:var(--_kjun-extension-fab-size);height:var(--_kjun-extension-fab-size);padding:0;border:0;border-radius:50%;background:var(--_kjun-color-brand);color:var(--_kjun-color-on-brand);box-shadow:var(--_kjun-elevation-floating);cursor:pointer}
+.kjun-fab:hover:not(:disabled){background:var(--_kjun-color-brand-hover)}.kjun-fab:active:not(:disabled){background:var(--_kjun-color-brand-active)}
+.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);
@@ -5133,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/button.d.cts

@@ -12,6 +12,8 @@ export interface KjunButtonProps extends Omit<PressableProps, "children" | "styl
     children?: ReactNode;
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /** "circle" makes an icon-only button round: as wide as its height with a full radius. */
+    shape?: "default" | "circle";
     loading?: boolean;
     block?: boolean;
     /** Long labels wrap: the size's height becomes a minimum and the button grows instead of overflowing. */

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

@@ -12,6 +12,8 @@ export interface KjunButtonProps extends Omit<PressableProps, "children" | "styl
     children?: ReactNode;
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /** "circle" makes an icon-only button round: as wide as its height with a full radius. */
+    shape?: "default" | "circle";
     loading?: boolean;
     block?: boolean;
     /** Long labels wrap: the size's height becomes a minimum and the button grows instead of overflowing. */

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/choice-controls.d.cts

@@ -27,11 +27,13 @@ export interface KjunSwitchProps {
     ariaLabel?: string;
     disabled?: boolean;
     size?: InputSize;
+    /** Supporting text under the label; screen readers hear it as the hint. */
+    description?: string;
     children?: ReactNode;
     onValueChange?: (value: boolean) => void;
     onChange?: (value: boolean) => void;
 }
-export declare function KjunSwitch({ value, label, ariaLabel, disabled, size, children, onValueChange, onChange, }: KjunSwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunSwitch({ value, label, ariaLabel, disabled, size, description, children, onValueChange, onChange, }: KjunSwitchProps): import("react/jsx-runtime").JSX.Element;
 export declare const RadioContext: import("react").Context<{
     value: ChoiceValue;
     change: (v: ChoiceValue) => void;

package/dist/types/packages/native/src/choice-controls.d.ts

@@ -27,11 +27,13 @@ export interface KjunSwitchProps {
     ariaLabel?: string;
     disabled?: boolean;
     size?: InputSize;
+    /** Supporting text under the label; screen readers hear it as the hint. */
+    description?: string;
     children?: ReactNode;
     onValueChange?: (value: boolean) => void;
     onChange?: (value: boolean) => void;
 }
-export declare function KjunSwitch({ value, label, ariaLabel, disabled, size, children, onValueChange, onChange, }: KjunSwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunSwitch({ value, label, ariaLabel, disabled, size, description, children, onValueChange, onChange, }: KjunSwitchProps): import("react/jsx-runtime").JSX.Element;
 export declare const RadioContext: import("react").Context<{
     value: ChoiceValue;
     change: (v: ChoiceValue) => void;

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

@@ -1,3 +1,4 @@
+import type { KjunMessageScope } from "../../../shared/package-runtime/messages/index.cjs";
 import { type QueryDisplayProps } from "@kjun-ui/tokens";
 import { Component, type ErrorInfo, type ReactNode } from "react";
 import { type KjunSkeletonProps } from "./display.cjs";
@@ -44,6 +45,8 @@ export interface KjunErrorBoundaryProps {
 export declare class KjunErrorBoundary extends Component<KjunErrorBoundaryProps, {
     error: boolean;
 }> {
+    static contextType: import("react").Context<KjunMessageScope>;
+    context: KjunMessageScope;
     state: {
         error: boolean;
     };

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

@@ -1,3 +1,4 @@
+import type { KjunMessageScope } from "../../../shared/package-runtime/messages/index.js";
 import { type QueryDisplayProps } from "@kjun-ui/tokens";
 import { Component, type ErrorInfo, type ReactNode } from "react";
 import { type KjunSkeletonProps } from "./display.js";
@@ -44,6 +45,8 @@ export interface KjunErrorBoundaryProps {
 export declare class KjunErrorBoundary extends Component<KjunErrorBoundaryProps, {
     error: boolean;
 }> {
+    static contextType: import("react").Context<KjunMessageScope>;
+    context: KjunMessageScope;
     state: {
         error: boolean;
     };

package/dist/types/packages/native/src/date-picker.d.cts

@@ -1,6 +1,8 @@
 import { type InputSize } from "@kjun-ui/tokens";
 export interface KjunDatePickerProps {
     value: string;
+    /** Shows a clear button while there is a value; it reports an empty string. */
+    clearable?: boolean;
     min?: string;
     max?: string;
     placeholder?: string;
@@ -11,4 +13,4 @@ export interface KjunDatePickerProps {
     onValueChange?: (v: string) => void;
     onChange?: (v: string) => void;
 }
-export declare function KjunDatePicker({ value, min, max, placeholder, size, disabled, ariaLabel, error, onValueChange, onChange, }: KjunDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunDatePicker({ value, min, max, clearable, placeholder, size, disabled, ariaLabel, error, onValueChange, onChange, }: KjunDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/date-picker.d.ts

@@ -1,6 +1,8 @@
 import { type InputSize } from "@kjun-ui/tokens";
 export interface KjunDatePickerProps {
     value: string;
+    /** Shows a clear button while there is a value; it reports an empty string. */
+    clearable?: boolean;
     min?: string;
     max?: string;
     placeholder?: string;
@@ -11,4 +13,4 @@ export interface KjunDatePickerProps {
     onValueChange?: (v: string) => void;
     onChange?: (v: string) => void;
 }
-export declare function KjunDatePicker({ value, min, max, placeholder, size, disabled, ariaLabel, error, onValueChange, onChange, }: KjunDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunDatePicker({ value, min, max, clearable, placeholder, size, disabled, ariaLabel, error, onValueChange, onChange, }: KjunDatePickerProps): 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/fab.d.cts

@@ -0,0 +1,14 @@
+import type { GestureResponderEvent } from "react-native";
+export interface KjunFabProps {
+    icon: string;
+    /** The FAB has no visible text, so it needs a name. */
+    ariaLabel: string;
+    disabled?: boolean;
+    /** Bottom safe area (pt) the FAB stays above. */
+    safeAreaBottom?: number;
+    /** Extra space below, e.g. a bottom navigation's height. */
+    offsetBottom?: number;
+    onPress?: (event: GestureResponderEvent) => void;
+}
+/** A round primary action at the bottom end of its parent (place it in the screen's root view). */
+export declare function KjunFab({ icon, ariaLabel, disabled, safeAreaBottom, offsetBottom, onPress }: KjunFabProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import type { GestureResponderEvent } from "react-native";
+export interface KjunFabProps {
+    icon: string;
+    /** The FAB has no visible text, so it needs a name. */
+    ariaLabel: string;
+    disabled?: boolean;
+    /** Bottom safe area (pt) the FAB stays above. */
+    safeAreaBottom?: number;
+    /** Extra space below, e.g. a bottom navigation's height. */
+    offsetBottom?: number;
+    onPress?: (event: GestureResponderEvent) => void;
+}
+/** A round primary action at the bottom end of its parent (place it in the screen's root view). */
+export declare function KjunFab({ icon, ariaLabel, disabled, safeAreaBottom, offsetBottom, onPress }: KjunFabProps): 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/field-surface.d.cts

@@ -1,5 +1,6 @@
 import { Animated, TextInput, type ViewStyle } from "react-native";
 import { type InputSize } from "@kjun-ui/tokens";
+/** Field text input whose font family follows the Provider's weight maps, like KText. */
 export declare const FieldTextInput: typeof TextInput;
 export declare const FieldPressable: import("react").ForwardRefExoticComponent<import("react-native").PressableProps & {
     focusRingInset?: boolean;

package/dist/types/packages/native/src/field-surface.d.ts

@@ -1,5 +1,6 @@
 import { Animated, TextInput, type ViewStyle } from "react-native";
 import { type InputSize } from "@kjun-ui/tokens";
+/** Field text input whose font family follows the Provider's weight maps, like KText. */
 export declare const FieldTextInput: typeof TextInput;
 export declare const FieldPressable: import("react").ForwardRefExoticComponent<import("react-native").PressableProps & {
     focusRingInset?: boolean;

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

@@ -36,35 +36,35 @@ export declare function KjunCollectionMark({ kind, active, size, }: KjunCollecti
 export declare const executionStates: {
     readonly queued: readonly [
         "secondary",
-        "대기 중"
+        "statusQueued"
     ];
     readonly starting: readonly [
         "primary",
-        "시작 중"
+        "statusStarting"
     ];
     readonly running: readonly [
         "primary",
-        "실행 중"
+        "statusRunning"
     ];
     readonly stopping: readonly [
         "warning",
-        "중단 중"
+        "statusStopping"
     ];
     readonly stopped: readonly [
         "secondary",
-        "중단됨"
+        "statusStopped"
     ];
     readonly completed: readonly [
         "success",
-        "완료"
+        "statusCompleted"
     ];
     readonly completed_with_errors: readonly [
         "warning",
-        "완료 (오류)"
+        "statusCompletedWithErrors"
     ];
     readonly failed: readonly [
         "danger",
-        "실패"
+        "statusFailed"
     ];
 };
 export interface KjunExecutionStatusBadgeProps {

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

@@ -36,35 +36,35 @@ export declare function KjunCollectionMark({ kind, active, size, }: KjunCollecti
 export declare const executionStates: {
     readonly queued: readonly [
         "secondary",
-        "대기 중"
+        "statusQueued"
     ];
     readonly starting: readonly [
         "primary",
-        "시작 중"
+        "statusStarting"
     ];
     readonly running: readonly [
         "primary",
-        "실행 중"
+        "statusRunning"
     ];
     readonly stopping: readonly [
         "warning",
-        "중단 중"
+        "statusStopping"
     ];
     readonly stopped: readonly [
         "secondary",
-        "중단됨"
+        "statusStopped"
     ];
     readonly completed: readonly [
         "success",
-        "완료"
+        "statusCompleted"
     ];
     readonly completed_with_errors: readonly [
         "warning",
-        "완료 (오류)"
+        "statusCompletedWithErrors"
     ];
     readonly failed: readonly [
         "danger",
-        "실패"
+        "statusFailed"
     ];
 };
 export interface KjunExecutionStatusBadgeProps {

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

@@ -0,0 +1,14 @@
+import { type StyleProp, type TextStyle } from "react-native";
+export type KjunFontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+/** Font names by weight, for platforms (Android, Expo) that load every weight as its own family. */
+export type KjunFontWeights = Partial<Record<KjunFontWeight, string>>;
+export type KjunFontFamily = string | KjunFontWeights;
+/** Every face name of a weight map points back to its map, so a style naming any face can be re-resolved. */
+export type KjunFontFaces = Record<string, KjunFontWeights>;
+/** The face closest to `weight`; a tie takes the heavier face. */
+export declare function nearestFace(faces: KjunFontWeights, weight: number): string | undefined;
+/** The family name components use as their base: the string itself, or the face closest to 400. */
+export declare const baseFontFamily: (family?: KjunFontFamily) => string | undefined;
+export declare function fontFacesOf(family?: KjunFontFamily): KjunFontFaces;
+/** Swaps the family for the face matching the final fontWeight. Native then draws that face at its own weight. */
+export declare function resolveFontStyle<S extends StyleProp<TextStyle>>(style: S, faces: KjunFontFaces, base?: string): S | StyleProp<TextStyle>;

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

@@ -0,0 +1,14 @@
+import { type StyleProp, type TextStyle } from "react-native";
+export type KjunFontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+/** Font names by weight, for platforms (Android, Expo) that load every weight as its own family. */
+export type KjunFontWeights = Partial<Record<KjunFontWeight, string>>;
+export type KjunFontFamily = string | KjunFontWeights;
+/** Every face name of a weight map points back to its map, so a style naming any face can be re-resolved. */
+export type KjunFontFaces = Record<string, KjunFontWeights>;
+/** The face closest to `weight`; a tie takes the heavier face. */
+export declare function nearestFace(faces: KjunFontWeights, weight: number): string | undefined;
+/** The family name components use as their base: the string itself, or the face closest to 400. */
+export declare const baseFontFamily: (family?: KjunFontFamily) => string | undefined;
+export declare function fontFacesOf(family?: KjunFontFamily): KjunFontFaces;
+/** Swaps the family for the face matching the final fontWeight. Native then draws that face at its own weight. */
+export declare function resolveFontStyle<S extends StyleProp<TextStyle>>(style: S, faces: KjunFontFaces, base?: string): S | StyleProp<TextStyle>;

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

@@ -34,7 +34,9 @@ export * from "./list.cjs";
 export * from "./app-navigation.cjs";
 export * from "./media.cjs";
 export * from "./chip.cjs";
+export * from "./fab.cjs";
 export * from "./range-input.cjs";
 export * from "./quantity-stepper.cjs";
 export * from "./time-picker.cjs";
 export type { ShadowLayer, ElevationRole, CardElevation } from "@kjun-ui/tokens";
+export { kjunMessagesKo, kjunMessagesEn, type KjunMessages } from "../../../shared/package-runtime/messages/index.cjs";

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

@@ -34,7 +34,9 @@ export * from "./list.js";
 export * from "./app-navigation.js";
 export * from "./media.js";
 export * from "./chip.js";
+export * from "./fab.js";
 export * from "./range-input.js";
 export * from "./quantity-stepper.js";
 export * from "./time-picker.js";
 export type { ShadowLayer, ElevationRole, CardElevation } from "@kjun-ui/tokens";
+export { kjunMessagesKo, kjunMessagesEn, type KjunMessages } from "../../../shared/package-runtime/messages/index.js";