@webority/mobile-ui 0.17.0 → 0.18.1

package/lib/typescript/commonjs/components/FilePicker/FilePicker.d.ts

@@ -81,18 +81,18 @@ export interface FilePickerTriggerState {
 }
 export interface FilePickerLabels {
     /** Trigger text when no files are attached. Default 'Attach file'. */
-    trigger: string;
+    trigger?: string;
     /** Add-affordance text/tile label once files exist. Default '+'. (card tile) / 'Add more' (list row). */
-    addMore: string;
+    addMore?: string;
     /** Source chooser sheet title. Default 'Add from'. */
-    sheetTitle: string;
+    sheetTitle?: string;
     /** A11y label template for a file's remove button. */
-    removeFile: (name: string) => string;
+    removeFile?: (name: string) => string;
     /** Retry affordance a11y label. Default 'Retry upload'. */
-    retry: string;
-    errorTooMany: (maxFiles: number) => string;
-    errorTooLarge: (name: string, maxSizeMB: number) => string;
-    errorWrongType: (name: string) => string;
+    retry?: string;
+    errorTooMany?: (maxFiles: number) => string;
+    errorTooLarge?: (name: string, maxSizeMB: number) => string;
+    errorWrongType?: (name: string) => string;
 }
 export interface FilePickerRef {
     /** Open a source by key, or the chooser (sheet when >1 source). */
@@ -132,7 +132,7 @@ export interface FilePickerProps {
     helperText?: string;
     /** External error — wins over internal validation errors (form binding). */
     error?: React.ReactNode;
-    labels?: Partial<FilePickerLabels>;
+    labels?: FilePickerLabels;
     /** Haptics for pick/remove (selection) and rejections (error). Pass false to disable. */
     haptic?: HapticType | false;
     /** Files accepted by a pick (post-validation, post-process). */

package/lib/typescript/commonjs/components/ListItem/ListItem.d.ts

@@ -40,6 +40,11 @@ export interface ListItemProps {
     /** Text in the subtitle style, or any node drawn as is. */
     subtitle?: React.ReactNode;
     description?: string;
+    /**
+     * Content drawn in the text column under the description, before a `right`
+     * slot placed below. Inside the row's press target.
+     */
+    children?: React.ReactNode;
     /** Lines a text title may take before it is truncated. Default 1; 0 for no limit. */
     titleLines?: number;
     /** Lines a text subtitle may take before it is truncated. Default 1; 0 for no limit. */

package/lib/typescript/commonjs/components/OTPInput/OTPInput.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { FocusEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils';
 export type OTPInputSize = 'sm' | 'md' | 'lg';
 export interface OTPInputRef {
@@ -33,6 +33,8 @@ export interface OTPInputProps {
      * Haptic feedback for interactions. Off unless a HapticType is passed.
      */
     haptic?: HapticType | false;
+    /** Called when any cell takes focus. */
+    onFocus?: (e: FocusEvent) => void;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     cellStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/ProfilePicker/ProfilePicker.d.ts

@@ -38,13 +38,13 @@ export type ProfilePickerTone = 'primary' | 'success' | 'warning' | 'error' | 'i
 export type ProfilePickerVariant = 'solid' | 'soft' | 'outline';
 export interface ProfilePickerLabels {
     /** A11y label of the photo button. Default 'Change profile photo'. */
-    pick: string;
+    pick?: string;
     /** Label of the "Remove photo" row in the sheet. Default 'Remove photo'. */
-    remove: string;
+    remove?: string;
     /** Source chooser sheet title. Default 'Change photo'. */
-    sheetTitle: string;
-    errorTooLarge: (maxSizeMB: number) => string;
-    errorWrongType: string;
+    sheetTitle?: string;
+    errorTooLarge?: (maxSizeMB: number) => string;
+    errorWrongType?: string;
 }
 export interface ProfilePickerProps {
     /** Current photo URL or local URI, or null for none. */
@@ -109,7 +109,7 @@ export interface ProfilePickerProps {
     subtitle?: React.ReactNode;
     /** Renders the photo, e.g. an authenticated image loader (see Avatar). */
     ImageComponent?: React.ComponentType<AvatarImageProps>;
-    labels?: Partial<ProfilePickerLabels>;
+    labels?: ProfilePickerLabels;
     /** Haptic on an accepted pick and on remove; errors use `notificationError`. Pass false to disable. */
     haptic?: HapticType | false;
     /** Called with the message of a rejected or failed pick. */

package/lib/typescript/commonjs/components/TagInput/TagInput.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
+import type { FocusEvent, TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils';
 import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase';
 export interface TagInputProps {
@@ -28,6 +28,8 @@ export interface TagInputProps {
     /** Characters that commit the current draft in addition to submit. Default [',']. */
     separators?: string[];
     haptic?: HapticType | false;
+    /** Called when the text field takes focus. */
+    onFocus?: (e: FocusEvent) => void;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/commonjs/components/Tour/Tour.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 import type { View as RNView } from 'react-native';
+import type { Theme } from '../../theme/types';
 import type { HapticType } from '../../utils/hapticUtils';
 export interface TourStep {
     /**
@@ -10,6 +11,12 @@ export interface TourStep {
     target: React.RefObject<RNView | null>;
     title?: string;
     description: string;
+    /**
+     * Corner radius of the target view, as a theme radius key, so the cutout and
+     * its outline follow a rounded card. The cutout's own padding is added to it.
+     * Default: `theme.radius.md` for the cutout.
+     */
+    radius?: keyof Theme['radius'];
 }
 /**
  * Where the app remembers that a person has seen a tour: one record per tour

package/lib/typescript/module/canvasKit/index.d.ts

@@ -12,16 +12,23 @@ export interface HomeIndicatorProps {
     colorMode?: ColorMode;
 }
 export declare const HomeIndicator: ({ os, colorMode }: HomeIndicatorProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export interface NavigationBarProps {
+    os: PhoneChromeOs;
+    colorMode?: ColorMode;
+}
+export declare const NavigationBar: ({ os, colorMode }: NavigationBarProps) => import("react").CElement<import("react-native").ViewProps, View> | null;
 export interface SafeAreaProps {
     os: PhoneChromeOs;
     children?: ReactNode;
 }
 export declare const SafeArea: ({ os, children }: SafeAreaProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export type KeyboardPreviewOs = 'ios' | 'android';
 export interface KeyboardFrameProps {
     colorMode?: ColorMode;
+    previewOs?: KeyboardPreviewOs;
     children?: ReactNode;
 }
-export declare const KeyboardFrame: ({ colorMode, children }: KeyboardFrameProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export declare const KeyboardFrame: ({ colorMode, previewOs, children }: KeyboardFrameProps) => import("react").CElement<import("react-native").ViewProps, View>;
 export interface PhoneChromeManifestProp {
     name: string;
     type: 'enum';

package/lib/typescript/module/components/BottomNavigation/BottomNavigation.d.ts

@@ -183,8 +183,9 @@ export interface BottomNavigationProps {
     /**
      * Air above and below the bar surface, in pixels. Default 16 for the
      * `floating` and `tile` capsules and 0 for a docked bar. Above zero it
-     * lifts any variant off the screen edge, and the safe-area inset then goes
-     * into that lift instead of the surface.
+     * lifts any variant off the screen edge. Over a safe-area inset (a home
+     * indicator or Android's system buttons) the lift is the inset plus
+     * `theme.spacing.sm`, never less than this margin.
      */
     marginVertical?: number;
     /**

package/lib/typescript/module/components/Dialog/Dialog.d.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils.js';
 export type DialogVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
-export type DialogActionTone = 'primary' | 'neutral' | 'error';
+export type DialogActionTone = 'primary' | 'neutral' | 'info' | 'error';
 export interface DialogAction {
     label: string;
     onPress: () => void;

package/lib/typescript/module/components/FilePicker/FilePicker.d.ts

@@ -81,18 +81,18 @@ export interface FilePickerTriggerState {
 }
 export interface FilePickerLabels {
     /** Trigger text when no files are attached. Default 'Attach file'. */
-    trigger: string;
+    trigger?: string;
     /** Add-affordance text/tile label once files exist. Default '+'. (card tile) / 'Add more' (list row). */
-    addMore: string;
+    addMore?: string;
     /** Source chooser sheet title. Default 'Add from'. */
-    sheetTitle: string;
+    sheetTitle?: string;
     /** A11y label template for a file's remove button. */
-    removeFile: (name: string) => string;
+    removeFile?: (name: string) => string;
     /** Retry affordance a11y label. Default 'Retry upload'. */
-    retry: string;
-    errorTooMany: (maxFiles: number) => string;
-    errorTooLarge: (name: string, maxSizeMB: number) => string;
-    errorWrongType: (name: string) => string;
+    retry?: string;
+    errorTooMany?: (maxFiles: number) => string;
+    errorTooLarge?: (name: string, maxSizeMB: number) => string;
+    errorWrongType?: (name: string) => string;
 }
 export interface FilePickerRef {
     /** Open a source by key, or the chooser (sheet when >1 source). */
@@ -132,7 +132,7 @@ export interface FilePickerProps {
     helperText?: string;
     /** External error — wins over internal validation errors (form binding). */
     error?: React.ReactNode;
-    labels?: Partial<FilePickerLabels>;
+    labels?: FilePickerLabels;
     /** Haptics for pick/remove (selection) and rejections (error). Pass false to disable. */
     haptic?: HapticType | false;
     /** Files accepted by a pick (post-validation, post-process). */

package/lib/typescript/module/components/ListItem/ListItem.d.ts

@@ -40,6 +40,11 @@ export interface ListItemProps {
     /** Text in the subtitle style, or any node drawn as is. */
     subtitle?: React.ReactNode;
     description?: string;
+    /**
+     * Content drawn in the text column under the description, before a `right`
+     * slot placed below. Inside the row's press target.
+     */
+    children?: React.ReactNode;
     /** Lines a text title may take before it is truncated. Default 1; 0 for no limit. */
     titleLines?: number;
     /** Lines a text subtitle may take before it is truncated. Default 1; 0 for no limit. */

package/lib/typescript/module/components/OTPInput/OTPInput.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { FocusEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 export type OTPInputSize = 'sm' | 'md' | 'lg';
 export interface OTPInputRef {
@@ -33,6 +33,8 @@ export interface OTPInputProps {
      * Haptic feedback for interactions. Off unless a HapticType is passed.
      */
     haptic?: HapticType | false;
+    /** Called when any cell takes focus. */
+    onFocus?: (e: FocusEvent) => void;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     cellStyle?: StyleProp<ViewStyle>;

package/lib/typescript/module/components/ProfilePicker/ProfilePicker.d.ts

@@ -38,13 +38,13 @@ export type ProfilePickerTone = 'primary' | 'success' | 'warning' | 'error' | 'i
 export type ProfilePickerVariant = 'solid' | 'soft' | 'outline';
 export interface ProfilePickerLabels {
     /** A11y label of the photo button. Default 'Change profile photo'. */
-    pick: string;
+    pick?: string;
     /** Label of the "Remove photo" row in the sheet. Default 'Remove photo'. */
-    remove: string;
+    remove?: string;
     /** Source chooser sheet title. Default 'Change photo'. */
-    sheetTitle: string;
-    errorTooLarge: (maxSizeMB: number) => string;
-    errorWrongType: string;
+    sheetTitle?: string;
+    errorTooLarge?: (maxSizeMB: number) => string;
+    errorWrongType?: string;
 }
 export interface ProfilePickerProps {
     /** Current photo URL or local URI, or null for none. */
@@ -109,7 +109,7 @@ export interface ProfilePickerProps {
     subtitle?: React.ReactNode;
     /** Renders the photo, e.g. an authenticated image loader (see Avatar). */
     ImageComponent?: React.ComponentType<AvatarImageProps>;
-    labels?: Partial<ProfilePickerLabels>;
+    labels?: ProfilePickerLabels;
     /** Haptic on an accepted pick and on remove; errors use `notificationError`. Pass false to disable. */
     haptic?: HapticType | false;
     /** Called with the message of a rejected or failed pick. */

package/lib/typescript/module/components/TagInput/TagInput.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
+import type { FocusEvent, TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase/index.js';
 export interface TagInputProps {
@@ -28,6 +28,8 @@ export interface TagInputProps {
     /** Characters that commit the current draft in addition to submit. Default [',']. */
     separators?: string[];
     haptic?: HapticType | false;
+    /** Called when the text field takes focus. */
+    onFocus?: (e: FocusEvent) => void;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/module/components/Tour/Tour.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 import type { View as RNView } from 'react-native';
+import type { Theme } from '../../theme/types.js';
 import type { HapticType } from '../../utils/hapticUtils.js';
 export interface TourStep {
     /**
@@ -10,6 +11,12 @@ export interface TourStep {
     target: React.RefObject<RNView | null>;
     title?: string;
     description: string;
+    /**
+     * Corner radius of the target view, as a theme radius key, so the cutout and
+     * its outline follow a rounded card. The cutout's own padding is added to it.
+     * Default: `theme.radius.md` for the cutout.
+     */
+    radius?: keyof Theme['radius'];
 }
 /**
  * Where the app remembers that a person has seen a tour: one record per tour

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -70,7 +70,7 @@
     }
   },
   "peerDependencies": {
-    "@webority/mobile-core": ">=0.16.0 <0.17.0",
+    "@webority/mobile-core": ">=0.18.0 <0.19.0",
     "expo": ">=57.0.0",
     "expo-file-system": ">=57.0.0",
     "expo-haptics": ">=57.0.0",
@@ -117,7 +117,7 @@
     ]
   },
   "devDependencies": {
-    "@webority/mobile-core": "0.17.0"
+    "@webority/mobile-core": "0.18.1"
   },
   "scripts": {
     "build": "bob build && node ../../scripts/minify-lib.mjs",