@kjun-ui/native 0.12.2 → 0.13.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;
@@ -1255,6 +1262,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 +1301,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 +1518,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 +1608,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);
@@ -2273,18 +2290,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);
@@ -4724,7 +4745,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}
@@ -4937,6 +4958,12 @@
 
 .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}
+
 /* 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);

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

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

@@ -16,6 +16,8 @@ export interface KjunFormGroupProps {
     label?: string;
     id?: string;
     required?: boolean;
+    /** Marks the field as optional with the "(선택)" / "(optional)" message; required wins when both are set. */
+    optional?: boolean;
     error?: string;
     hint?: string;
     /** Hides the label visually while it still names the field. */
@@ -23,7 +25,7 @@ export interface KjunFormGroupProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-export declare function KjunFormGroup({ label, id, required, error, hint, labelHidden, children, style, }: KjunFormGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunFormGroup({ label, id, required, optional, error, hint, labelHidden, children, style, }: KjunFormGroupProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunInputProps extends Omit<TextInputProps, "value" | "onChange"> {
     value: string | number;
     size?: InputSize;

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

@@ -16,6 +16,8 @@ export interface KjunFormGroupProps {
     label?: string;
     id?: string;
     required?: boolean;
+    /** Marks the field as optional with the "(선택)" / "(optional)" message; required wins when both are set. */
+    optional?: boolean;
     error?: string;
     hint?: string;
     /** Hides the label visually while it still names the field. */
@@ -23,7 +25,7 @@ export interface KjunFormGroupProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-export declare function KjunFormGroup({ label, id, required, error, hint, labelHidden, children, style, }: KjunFormGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunFormGroup({ label, id, required, optional, error, hint, labelHidden, children, style, }: KjunFormGroupProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunInputProps extends Omit<TextInputProps, "value" | "onChange"> {
     value: string | number;
     size?: InputSize;

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

@@ -1,6 +1,10 @@
 import { type ReactNode } from "react";
 import { type ColorValue, type TextProps } from "react-native";
+/** Resolves a text style's family to the face for its weight when the Provider has weight maps. */
+export declare function useResolveFont(): <S extends TextProps["style"]>(style: S) => import("react-native").StyleProp<import("react-native").TextStyle> | S;
 export declare function KText({ style, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+/** A Text without KJUN's default type, for spans that inherit their parent's; it still resolves weight faces. */
+export declare function FontText(props: TextProps): import("react/jsx-runtime").JSX.Element;
 export declare function content(value: ReactNode, style?: TextProps["style"]): bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export declare const finePointer: () => boolean;
 export declare function useReducedMotion(): boolean;

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

@@ -1,6 +1,10 @@
 import { type ReactNode } from "react";
 import { type ColorValue, type TextProps } from "react-native";
+/** Resolves a text style's family to the face for its weight when the Provider has weight maps. */
+export declare function useResolveFont(): <S extends TextProps["style"]>(style: S) => import("react-native").StyleProp<import("react-native").TextStyle> | S;
 export declare function KText({ style, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+/** A Text without KJUN's default type, for spans that inherit their parent's; it still resolves weight faces. */
+export declare function FontText(props: TextProps): import("react/jsx-runtime").JSX.Element;
 export declare function content(value: ReactNode, style?: TextProps["style"]): bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export declare const finePointer: () => boolean;
 export declare function useReducedMotion(): boolean;

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

@@ -17,5 +17,9 @@ export interface KjunListSectionProps {
     actions?: ReactNode;
     children: ReactNode;
     ariaLabel?: string;
+    /** 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 }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListSection({ title, description, actions, children, ariaLabel, divider, density }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -17,5 +17,9 @@ export interface KjunListSectionProps {
     actions?: ReactNode;
     children: ReactNode;
     ariaLabel?: string;
+    /** 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 }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListSection({ title, description, actions, children, ariaLabel, divider, density }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,5 @@
+import { type KjunFontFaces, type KjunFontFamily } from "./fonts.cjs";
+import type { KjunMessages } from "../../../shared/package-runtime/messages/index.cjs";
 import type { KjunIconRegistry } from "@kjun-ui/icons";
 import { type KjunColors, type ResolvedKjunColors, type KjunDomainColors } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
@@ -6,15 +8,25 @@ interface KjunStyles {
     colors: ResolvedKjunColors<ColorValue>;
     fontFamily?: string;
     numericFontFamily?: string;
+    /** Weight maps by face name, from fontFamily / numericFontFamily maps. */
+    fontFaces?: KjunFontFaces;
     domainColors?: KjunDomainColors<ColorValue>;
 }
 export declare function useKjunStyles(): KjunStyles;
-export interface KjunProviderProps extends Omit<KjunStyles, "colors"> {
+export interface KjunProviderProps extends Omit<KjunStyles, "colors" | "fontFamily" | "numericFontFamily" | "fontFaces"> {
+    /** A family name, or names by weight ({ 400: "Pretendard-Regular", 700: "Pretendard-Bold" }) for Android and Expo. */
+    fontFamily?: KjunFontFamily;
+    /** Same as fontFamily, for numbers. */
+    numericFontFamily?: KjunFontFamily;
     icons?: KjunIconRegistry;
+    /** BCP 47 tag (e.g. "en-US") for KJUN copy and Intl formats; without it KJUN stays Korean. */
+    locale?: string;
+    /** Replaces part of KJUN's copy, e.g. with the app's own translations. */
+    messages?: Partial<KjunMessages>;
     colors: KjunColors<ColorValue>;
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-export declare function KjunProvider({ icons, colors, fontFamily, numericFontFamily, domainColors, children, style, }: KjunProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunProvider({ icons, locale, messages, colors, fontFamily, numericFontFamily, domainColors, children, style, }: KjunProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useKjunDomainColors(): Readonly<Record<"priceUp" | "priceUpLight" | "priceUpBg" | "priceUpBgStrong" | "priceDown" | "priceDownLight" | "priceDownBg" | "priceDownBgStrong" | "priceNeutral" | "priceNeutralBg" | "favorite" | "favoriteHover" | "interest", ColorValue>>;
 export {};

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

@@ -1,3 +1,5 @@
+import { type KjunFontFaces, type KjunFontFamily } from "./fonts.js";
+import type { KjunMessages } from "../../../shared/package-runtime/messages/index.js";
 import type { KjunIconRegistry } from "@kjun-ui/icons";
 import { type KjunColors, type ResolvedKjunColors, type KjunDomainColors } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
@@ -6,15 +8,25 @@ interface KjunStyles {
     colors: ResolvedKjunColors<ColorValue>;
     fontFamily?: string;
     numericFontFamily?: string;
+    /** Weight maps by face name, from fontFamily / numericFontFamily maps. */
+    fontFaces?: KjunFontFaces;
     domainColors?: KjunDomainColors<ColorValue>;
 }
 export declare function useKjunStyles(): KjunStyles;
-export interface KjunProviderProps extends Omit<KjunStyles, "colors"> {
+export interface KjunProviderProps extends Omit<KjunStyles, "colors" | "fontFamily" | "numericFontFamily" | "fontFaces"> {
+    /** A family name, or names by weight ({ 400: "Pretendard-Regular", 700: "Pretendard-Bold" }) for Android and Expo. */
+    fontFamily?: KjunFontFamily;
+    /** Same as fontFamily, for numbers. */
+    numericFontFamily?: KjunFontFamily;
     icons?: KjunIconRegistry;
+    /** BCP 47 tag (e.g. "en-US") for KJUN copy and Intl formats; without it KJUN stays Korean. */
+    locale?: string;
+    /** Replaces part of KJUN's copy, e.g. with the app's own translations. */
+    messages?: Partial<KjunMessages>;
     colors: KjunColors<ColorValue>;
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-export declare function KjunProvider({ icons, colors, fontFamily, numericFontFamily, domainColors, children, style, }: KjunProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunProvider({ icons, locale, messages, colors, fontFamily, numericFontFamily, domainColors, children, style, }: KjunProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useKjunDomainColors(): Readonly<Record<"priceUp" | "priceUpLight" | "priceUpBg" | "priceUpBgStrong" | "priceDown" | "priceDownLight" | "priceDownBg" | "priceDownBgStrong" | "priceNeutral" | "priceNeutralBg" | "favorite" | "favoriteHover" | "interest", ColorValue>>;
 export {};

package/dist/types/shared/package-runtime/feedback-dialog.d.cts

@@ -1,5 +1,6 @@
+import { type KjunMessages } from "./messages/index.cjs";
 import type { createFeedbackController, ConfirmOptions, FeedbackRequest, PromptOptions } from "@kjun-ui/tokens";
-export declare function useFeedbackDialog(controller: ReturnType<typeof createFeedbackController>, request: FeedbackRequest): {
+export declare function useFeedbackDialog(controller: ReturnType<typeof createFeedbackController>, request: FeedbackRequest, messages?: KjunMessages): {
     options: PromptOptions & ConfirmOptions;
     value: string;
     error: string;

package/dist/types/shared/package-runtime/feedback-dialog.d.ts

@@ -1,5 +1,6 @@
+import { type KjunMessages } from "./messages/index.js";
 import type { createFeedbackController, ConfirmOptions, FeedbackRequest, PromptOptions } from "@kjun-ui/tokens";
-export declare function useFeedbackDialog(controller: ReturnType<typeof createFeedbackController>, request: FeedbackRequest): {
+export declare function useFeedbackDialog(controller: ReturnType<typeof createFeedbackController>, request: FeedbackRequest, messages?: KjunMessages): {
     options: PromptOptions & ConfirmOptions;
     value: string;
     error: string;

package/dist/types/shared/package-runtime/messages/en.d.cts

@@ -0,0 +1,2 @@
+import type { KjunMessages } from "./ko.cjs";
+export declare const kjunMessagesEn: KjunMessages;

package/dist/types/shared/package-runtime/messages/en.d.ts

@@ -0,0 +1,2 @@
+import type { KjunMessages } from "./ko.js";
+export declare const kjunMessagesEn: KjunMessages;