@webority/mobile-ui 0.7.4 → 0.8.1

package/lib/typescript/module/components/AppIcon/defaultIcons.d.ts

@@ -1,9 +1,9 @@
 /**
  * The library's own renderers for the affordances components draw
  * themselves: the password eye, the error glyph, SearchBar's magnifier and
- * clear button, FilePicker's attachment. Every one is an AppIcon, so an app
- * gets the design system's glyphs with zero setup; `theme.icons` still wins
- * when an app registers its own.
+ * clear button, FilePicker's attachment, OptionSheet's selected tick. Every
+ * one is an AppIcon, so an app gets the design system's glyphs with zero
+ * setup; `theme.icons` still wins when an app registers its own.
  */
 import type { IconRegistry } from '../../theme/types.js';
 export declare const defaultIcons: Required<IconRegistry>;

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

@@ -21,7 +21,7 @@
  *   - Helper / error / counter text rendered below the field.
  *   - Shake-on-error or any cross-field animation.
  */
-import React from 'react';
+import type React from 'react';
 import type { AccessibilityRole, AccessibilityState, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { Animated } from 'react-native';
 import type { FieldSide, FieldVariantTokens, ResolvedFieldSizeTokens, Theme } from '../../theme/types.js';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { BlurEvent, FocusEvent, StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
 import { TextInput } from 'react-native';
 import type { SlotIcon, SlotIconState } from '../AppIcon/slotIcon.js';
@@ -65,7 +65,10 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
     placeholder?: string;
     value?: string;
     onChangeText?: (text: string) => void;
-    /** A string or a node. A non-empty value puts the field in the error state and replaces the helper. */
+    /**
+     * A string or a node puts the field in the error state and replaces the helper; `true` shows the
+     * error state without a message.
+     */
     error?: React.ReactNode;
     /** A string or a node. */
     helperText?: React.ReactNode;

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import type { ColorValue } from 'react-native';
 export interface NotationRun {
     text: string;
     /** The subscript that follows `text`, when the run is a symbol. */
@@ -17,17 +18,27 @@ export interface NotationProps {
      * 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. Renders its own Text. */
+    /** 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. */
+    /**
+     * Subscript ink. Inside a field label it defaults to the label's ink, elsewhere 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[];
+/** The size and ink of the Text a Notation sits in, which the subscript's View cannot inherit. */
+export interface NotationInk {
+    fontSize: number;
+    color: ColorValue;
+}
+/** Provided by a label Text (FieldLabel) so a subscript inside it scales and inks with the label. */
+export declare const NotationInkContext: React.Context<NotationInk | null>;
 /** 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. */

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

@@ -26,7 +26,10 @@ export interface NumberInputProps {
     help?: React.ReactNode;
     /** A string or a node. */
     helperText?: React.ReactNode;
-    /** A string or a node. A non-empty value puts the field in the error state and replaces the helper. */
+    /**
+     * A string or a node puts the field in the error state and replaces the helper; `true` shows the
+     * error state without a message.
+     */
     error?: React.ReactNode;
     disabled?: boolean;
     size?: NumberInputSize;

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,16 +4,17 @@
  * 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
  * re-exports them so the public import path is unchanged.
  */
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 export type SelectValue = string | number;
 export interface SelectOption {
@@ -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/PickerTrigger/PickerTrigger.d.ts

@@ -11,7 +11,7 @@
  *     internally and manages its own open/close.
  *   - Render PickerTrigger themselves alongside a controlled picker.
  */
-import React from 'react';
+import type React from 'react';
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase/index.js';
 export type PickerTriggerSize = FieldBaseSize;
@@ -27,7 +27,10 @@ export interface PickerTriggerProps {
     help?: React.ReactNode;
     /** Helper text shown below the field. Hidden when `error` is set. A string or a node. */
     helperText?: React.ReactNode;
-    /** Error message shown below the field (and red-borders the field). A string or a node. */
+    /**
+     * Error message shown below the field (and red-borders the field). A string or a node; `true`
+     * shows the error state without a message.
+     */
     error?: React.ReactNode;
     /**
      * Appends the required marker to the label. Marker text + colour come from

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

@@ -6,7 +6,7 @@
  * drift between the two. Supports optional client-side search, theme-aware
  * styling, full a11y, and dark-mode auto.
  */
-import React from 'react';
+import type React from 'react';
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 import type { SlotIcon } from '../AppIcon/slotIcon.js';
@@ -66,7 +66,10 @@ interface BaseSelectProps<T = SelectOption> {
      * `'*'` in `colors.error`).
      */
     required?: boolean;
-    /** A string or a node. A non-empty value puts the trigger in the error state. */
+    /**
+     * A string or a node puts the trigger in the error state and shows it below; `true` shows the
+     * error state without a message.
+     */
     error?: React.ReactNode;
     /** Hint under the field, shown while there is no `error`. A string or a node. */
     helperText?: React.ReactNode;

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

@@ -13,7 +13,10 @@ interface SliderFieldCommonProps {
     /** Appends the required marker to the label. */
     required?: boolean;
     helperText?: string;
-    /** Shown in place of `helperText`, in the error colour; the value box turns red with an icon. */
+    /**
+     * Shown in place of `helperText`, in the error colour; the value box turns red with an icon. `true`
+     * shows the error state without a message.
+     */
     error?: React.ReactNode;
     min?: number;
     max?: number;

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;
@@ -1096,6 +1106,11 @@ export interface IconRegistry {
     chevronDown?: IconRenderer;
     /** Trailing "goes somewhere" chevron on ListItem. Default `chevron-right`. */
     chevronRight?: IconRenderer;
+    /**
+     * Mark on the selected row of a single-choice option sheet when
+     * `components.optionSheet.selectedMarker` is `'icon'`. Default `tick-circle`, bulk.
+     */
+    selectedTick?: IconRenderer;
 }
 /**
  * An app's own text style, registered under a name in `theme.textVariants` and
@@ -1121,6 +1136,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.4",
+  "version": "0.8.1",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -59,17 +59,8 @@
       "javaPackageName": "com.webority.mobileui.pdfrasterizer"
     }
   },
-  "scripts": {
-    "prepack": "node ../../scripts/package-guard-pack.mjs --output-dirs lib --allow-file ../../.webority/package-allow.json",
-    "build": "bob build && node ../../scripts/minify-lib.mjs",
-    "clean": "rimraf lib",
-    "lint": "biome lint ./src",
-    "lint:fix": "biome lint --write ./src",
-    "test": "jest",
-    "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",
@@ -116,6 +107,14 @@
     ]
   },
   "devDependencies": {
-    "@webority/mobile-core": "file:../core"
+    "@webority/mobile-core": "0.8.1"
+  },
+  "scripts": {
+    "build": "bob build && node ../../scripts/minify-lib.mjs",
+    "clean": "rimraf lib",
+    "lint": "biome lint ./src",
+    "lint:fix": "biome lint --write ./src",
+    "test": "jest",
+    "typecheck": "tsc --noEmit"
   }
-}
+}