@webority/mobile-ui 0.7.3 → 0.8.0

package/lib/typescript/commonjs/theme/types.d.ts

@@ -638,6 +638,15 @@ export interface InlineSelectTokens {
     /** Trigger text + chevron colour. Library default: `colors.primary`. */
     color?: string;
 }
+export interface OptionSheetTokens {
+    /**
+     * Mark on the selected row of a single-choice sheet (Select, InlineSelect,
+     * PhoneNumberInput and every other OptionSheet): `'dot'` is an 8 px dot,
+     * `'icon'` the `tick-circle` icon in its bulk style at 20 px. Both are drawn
+     * in `colors.primary`. Multi-select keeps its checkbox. Library default: `'dot'`.
+     */
+    selectedMarker?: 'dot' | 'icon';
+}
 export interface SelectTokens {
     /** Colour of the grab-handle rendered above the bottom-sheet picker. Library default: `colors.border.primary`. */
     handleColor?: string;
@@ -1022,6 +1031,7 @@ export interface ComponentTokens {
     listItem?: ListItemTokens;
     modal?: ModalTokens;
     numberInput?: NumberInputTokens;
+    optionSheet?: OptionSheetTokens;
     otpInput?: OTPInputTokens;
     phoneNumberInput?: PhoneNumberInputTokens;
     profilePicker?: ProfilePickerTokens;
@@ -1121,6 +1131,14 @@ export interface Theme {
     typography: TypographyScale;
     spacing: SpacingScale;
     radius: RadiusScale;
+    /**
+     * Corner smoothing of the squircle Android draws behind Button, Card,
+     * fields, Box and the other smooth-cornered hosts: 0 is a plain rounded
+     * rectangle, 1 the fullest curve. iOS draws Apple's continuous curve, which
+     * has no smoothing setting, so this changes Android only. Library default:
+     * `SQUIRCLE_SMOOTHING` (0.6, Figma's "iOS" preset).
+     */
+    cornerSmoothing: number;
     shadows: ShadowScale;
     motion: MotionScale;
     components: ComponentTokens;

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

@@ -32,7 +32,7 @@ export interface AutocompleteProps<T = string> {
     loadingText?: string;
     placeholder?: string;
     label?: string;
-    error?: string;
+    error?: React.ReactNode;
     helperText?: string;
     disabled?: boolean;
     size?: InputSize;

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

@@ -47,7 +47,7 @@ export interface DatePickerProps {
     label?: string;
     placeholder?: string;
     helperText?: string;
-    error?: string;
+    error?: React.ReactNode;
     required?: boolean;
     disabled?: boolean;
     size?: PickerTriggerSize;

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 import type { PickerTriggerSize, PickerTriggerVariant } from '../PickerTrigger/index.js';
@@ -26,7 +27,7 @@ export interface DateRangePickerProps {
     label?: string;
     placeholder?: string;
     helperText?: string;
-    error?: string;
+    error?: ReactNode;
     required?: boolean;
     disabled?: boolean;
     size?: PickerTriggerSize;

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

@@ -131,7 +131,7 @@ export interface FilePickerProps {
     /** Hint under the trigger (e.g. "Up to 5 files, max 100MB each."). */
     helperText?: string;
     /** External error — wins over internal validation errors (form binding). */
-    error?: string;
+    error?: React.ReactNode;
     labels?: Partial<FilePickerLabels>;
     /** Haptics for pick/remove (selection) and rejections (error). Pass false to disable. */
     haptic?: HapticType | false;

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

@@ -4,24 +4,33 @@ export interface NotationRun {
     /** The subscript that follows `text`, when the run is a symbol. */
     sub?: string;
 }
+/**
+ * One run of a `text` list: a string is ours and its `X_sub` symbols are subscripted; a
+ * `{ verbatim }` run is stored text (a citation, a clause, an option name) printed exactly as given.
+ */
+export type NotationTextRun = string | {
+    verbatim: string;
+};
 export interface NotationProps {
-    /** Engine text where an underscore marks a subscript ("N_SG exceeds N_C"). Needs a parent Text. */
-    text?: string;
-    /** One symbol: the base, drawn with `sub` small after it. Renders its own Text. */
+    /**
+     * Engine text where an underscore marks a subscript ("N_SG exceeds N_C"), or a list of runs that
+     * mixes such text with verbatim stored text. Needs a parent Text.
+     */
+    text?: string | readonly NotationTextRun[];
+    /** One symbol: the base, drawn with `sub` small and lowered after it. Needs a parent Text. */
     base?: string;
     sub?: string;
     /** Follows the symbol after a space. */
     desc?: string;
+    /** Subscript ink. Defaults to `colors.text.primary`; pass the parent's colour when it differs. */
+    color?: string;
     testID?: string;
 }
 /** The text split into runs: `{ text }` for prose, `{ text, sub }` for a symbol and its subscript. */
 export declare const parseNotation: (text: string | null | undefined) => NotationRun[];
-/**
- * A symbol of a standard with its subscript drawn small. React Native has no <sub>, and a nested
- * Text cannot be shifted down, so the subscript is smaller and sits on the baseline.
- */
+/** A symbol of a standard with its subscript drawn small and lowered below the baseline. */
 export declare const Notation: React.FC<NotationProps>;
 /** A symbol as the standard prints it: `sym('C', 'IP')` is C with a small IP, then `desc` if given. */
-export declare const sym: (base: string, sub?: string, desc?: string) => React.ReactElement;
+export declare const sym: (base: string, sub?: string, desc?: string, color?: string) => React.ReactElement;
 export default Notation;
 //# sourceMappingURL=Notation.d.ts.map

package/lib/typescript/module/components/Notation/index.d.ts

@@ -1,3 +1,3 @@
-export type { NotationProps, NotationRun } from './Notation.js';
+export type { NotationProps, NotationRun, NotationTextRun } from './Notation.js';
 export { default, Notation, parseNotation, sym } from './Notation.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 export type OTPInputSize = 'sm' | 'md' | 'lg';
@@ -21,7 +22,11 @@ export interface OTPInputProps {
      */
     autoFocusDelay?: number;
     disabled?: boolean;
-    error?: boolean | string;
+    /**
+     * A string or a node puts the cells in the error state and shows it as the
+     * message below them; `true` shows the error state without a message.
+     */
+    error?: ReactNode;
     size?: OTPInputSize;
     secure?: boolean;
     /**

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

@@ -4,10 +4,11 @@
  * The picker behind Select and InlineSelect, exported so an app can open the
  * same sheet from its own trigger: RN Modal-backed slide-up
  * sheet with backdrop fade, grab handle, optional title, optional client-side
- * search, the option list (icon + label + description, single dot / multi
- * checkbox) and the multi-select Done footer. Owns the open/close animations
- * and the search query; selection STATE stays with the caller — the sheet
- * only reports `onSelect(option)` and asks `isSelected(value)`.
+ * search, the option list (icon + label + description, single dot or tick
+ * icon / multi checkbox) and the multi-select Done footer. Owns the
+ * open/close animations and the search query; selection STATE stays with
+ * the caller — the sheet only reports `onSelect(option)` and asks
+ * `isSelected(value)`.
  *
  * Also the home of the canonical option types (`SelectValue`, `SelectOption`)
  * and accessor signatures shared by every option-picking component. Select
@@ -58,7 +59,7 @@ export interface OptionSheetProps {
     renderSectionHeader?: (title: string) => React.ReactNode;
     /**
      * Replace the row's content (icon + label + description) with your own. The
-     * pressable row, its accessibility state and the selected dot / checkbox
+     * pressable row, its accessibility state and the selected mark / checkbox
      * stay, so a custom row is still a button to a screen reader.
      */
     renderOption?: (option: unknown, state: OptionSheetRowState) => React.ReactNode;

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

@@ -160,7 +160,7 @@ export interface PhoneNumberInputProps extends Pick<TextInputProps, 'returnKeyTy
     placeholder?: string;
     helperText?: string;
     /** The app's own error text. Always wins over the built-in invalid-number message. */
-    error?: string;
+    error?: ReactNode;
     /**
      * Text under the field once the typed number is not a real number for the
      * country under `validation`. Shown after the user leaves the field with

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

@@ -101,7 +101,7 @@ export interface ProfilePickerProps {
     required?: boolean;
     helperText?: string;
     /** App-supplied error; wins over a rejected pick's own message. */
-    error?: string;
+    error?: React.ReactNode;
     layout?: ProfilePickerLayout;
     /** Bold primary text beside / beneath the photo (inline and profile layouts). */
     title?: React.ReactNode;

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils.js';
 export type RadioSize = 'sm' | 'md' | 'lg';
@@ -19,7 +20,7 @@ export interface RadioProps extends Omit<PressableProps, 'style' | 'children' |
     /** Secondary line under the label. */
     description?: string;
     /** Error line under the label (and description); also draws the empty ring in the error colour. */
-    error?: string;
+    error?: ReactNode;
     size?: RadioSize;
     tone?: RadioTone;
     accessibilityLabel?: string;

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

@@ -14,7 +14,7 @@ interface SliderFieldCommonProps {
     required?: boolean;
     helperText?: string;
     /** Shown in place of `helperText`, in the error colour; the value box turns red with an icon. */
-    error?: string;
+    error?: React.ReactNode;
     min?: number;
     max?: number;
     step?: number;

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { PressableProps, View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils.js';
 export type SwitchSize = 'sm' | 'md' | 'lg';
@@ -15,7 +16,7 @@ export interface SwitchProps extends Omit<PressableProps, 'style' | 'children' |
     /** Secondary line under the label. */
     description?: string;
     /** Error line under the label (and description). */
-    error?: string;
+    error?: ReactNode;
     /**
      * Lines the label (and the description) may take before truncating with an
      * ellipsis. Default: no limit, the text wraps in full. `0` also means no limit.

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase/index.js';
@@ -9,7 +10,7 @@ export interface TagInputProps {
     placeholder?: string;
     label?: string;
     helperText?: string;
-    error?: string;
+    error?: ReactNode;
     required?: boolean;
     disabled?: boolean;
     size?: FieldBaseSize;

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

@@ -42,7 +42,7 @@ export interface TimePickerProps {
     label?: string;
     placeholder?: string;
     helperText?: string;
-    error?: string;
+    error?: React.ReactNode;
     required?: boolean;
     disabled?: boolean;
     size?: FieldBaseSize;

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

@@ -88,7 +88,7 @@ export type { MarkdownProps } from './Markdown/index.js';
 export { Markdown } from './Markdown/index.js';
 export type { ModalPresentation, ModalProps } from './Modal/index.js';
 export { MODAL_DISMISS_GRACE_MS, Modal } from './Modal/index.js';
-export type { NotationProps, NotationRun } from './Notation/index.js';
+export type { NotationProps, NotationRun, NotationTextRun } from './Notation/index.js';
 export { Notation, parseNotation, sym } from './Notation/index.js';
 export type { NumberInputProps, NumberInputRef, NumberInputSize, NumberInputVariant } from './NumberInput/index.js';
 export { NumberInput } from './NumberInput/index.js';

package/lib/typescript/module/theme/types.d.ts

@@ -638,6 +638,15 @@ export interface InlineSelectTokens {
     /** Trigger text + chevron colour. Library default: `colors.primary`. */
     color?: string;
 }
+export interface OptionSheetTokens {
+    /**
+     * Mark on the selected row of a single-choice sheet (Select, InlineSelect,
+     * PhoneNumberInput and every other OptionSheet): `'dot'` is an 8 px dot,
+     * `'icon'` the `tick-circle` icon in its bulk style at 20 px. Both are drawn
+     * in `colors.primary`. Multi-select keeps its checkbox. Library default: `'dot'`.
+     */
+    selectedMarker?: 'dot' | 'icon';
+}
 export interface SelectTokens {
     /** Colour of the grab-handle rendered above the bottom-sheet picker. Library default: `colors.border.primary`. */
     handleColor?: string;
@@ -1022,6 +1031,7 @@ export interface ComponentTokens {
     listItem?: ListItemTokens;
     modal?: ModalTokens;
     numberInput?: NumberInputTokens;
+    optionSheet?: OptionSheetTokens;
     otpInput?: OTPInputTokens;
     phoneNumberInput?: PhoneNumberInputTokens;
     profilePicker?: ProfilePickerTokens;
@@ -1121,6 +1131,14 @@ export interface Theme {
     typography: TypographyScale;
     spacing: SpacingScale;
     radius: RadiusScale;
+    /**
+     * Corner smoothing of the squircle Android draws behind Button, Card,
+     * fields, Box and the other smooth-cornered hosts: 0 is a plain rounded
+     * rectangle, 1 the fullest curve. iOS draws Apple's continuous curve, which
+     * has no smoothing setting, so this changes Android only. Library default:
+     * `SQUIRCLE_SMOOTHING` (0.6, Figma's "iOS" preset).
+     */
+    cornerSmoothing: number;
     shadows: ShadowScale;
     motion: MotionScale;
     components: ComponentTokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -69,7 +69,7 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@webority/mobile-core": ">=0.7.0 <0.8.0",
+    "@webority/mobile-core": ">=0.8.0 <0.9.0",
     "expo": ">=57.0.0",
     "expo-file-system": ">=57.0.0",
     "expo-haptics": ">=57.0.0",