@webority/mobile-ui 0.112.3 → 0.114.0

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

@@ -12,7 +12,8 @@ export interface KeyboardAwareScrollViewProps extends ControllerScrollViewProps
     /**
      * A tap on empty space inside the content closes the keyboard and blurs the
      * focused field. Taps that a field, button or any other pressable claims are
-     * left alone. Default false. Needed on Android edge-to-edge, where the
+     * left alone. Default true; pass false for content that handles its own taps
+     * on empty space (a canvas, a map). Needed on Android edge-to-edge, where the
      * ScrollView's own tap-out dismissal never fires because React Native sees no
      * keyboard metrics.
      */
@@ -21,9 +22,10 @@ export interface KeyboardAwareScrollViewProps extends ControllerScrollViewProps
 /**
  * react-native-keyboard-controller's `KeyboardAwareScrollView` with the
  * library's defaults: the focused field kept 24 above the keyboard, safe-area
- * padding, a themed pull-to-refresh, and taps and scrolls that keep the
- * keyboard open. The controller follows the keyboard frame by frame on the UI
- * thread, so nothing here listens to keyboard events. Needs the app's
+ * padding, a themed pull-to-refresh, a tap on empty space that closes the
+ * keyboard, and scrolls that keep it open. The controller follows the keyboard
+ * frame by frame on the UI thread, so nothing here listens to keyboard events.
+ * Needs the app's
  * `KeyboardProvider` at the root.
  */
 declare const KeyboardAwareScrollView: import("react").ForwardRefExoticComponent<KeyboardAwareScrollViewProps & import("react").RefAttributes<KeyboardAwareScrollViewRef>>;

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

@@ -22,6 +22,10 @@ export interface ScreenListProps<ItemT> extends Omit<FlatListProps<ItemT>, "onSc
     /** From usePagedList or pagingFromInfiniteQuery: the screen draws PagedListFooter and calls loadMore on end reached. */
     paging?: PagedListPaging;
 }
+export interface FloatingActionSlotProps {
+    bottomOffset?: number;
+    size?: "sm" | "md" | "lg";
+}
 export interface ScreenProps<ItemT = unknown> {
     title?: string;
     subtitle?: string;
@@ -44,6 +48,10 @@ export interface ScreenProps<ItemT = unknown> {
     edges?: SafeAreaEdge[];
     /** Extra space under the content and the footer, for a tab bar drawn over the screen. Default 0. */
     bottomInset?: number;
+    /** Side margin of the content from the theme's screen gutter (16). Default true in scroll and fixed modes, false in list mode, where rows carry their own padding. The footer always has it. */
+    gutter?: boolean;
+    /** A FloatingActionButton or FloatingActionButtonGroup. The screen draws it above the tab bar and the footer and leaves room under the content so the last row is never covered. */
+    floatingAction?: React.ReactElement<FloatingActionSlotProps>;
     /** Default true. */
     keyboardToolbar?: boolean;
     scrollRef?: React.Ref<ScrollView | FlatList<ItemT>>;
@@ -54,7 +62,9 @@ export interface ScreenProps<ItemT = unknown> {
 /**
  * The page shell: safe area, app bar with a large title that collapses as the
  * content scrolls, a keyboard-aware scroll view (or a virtualised list), pull to
- * refresh, a pinned footer and the keyboard toolbar. The screen never navigates:
+ * refresh, a pinned footer, a floating action button with room kept under the content
+ * and the keyboard toolbar. Content and footer sit inside the theme's screen gutter (16)
+ * unless `gutter` is false. The screen never navigates:
  * it calls `onBack`; `NavigationScreen` from `@webority/mobile-ui/navigation` binds
  * it to react-navigation and holds the unsaved-changes guard.
  */

package/lib/typescript/module/theme/tokens.generated.d.ts

@@ -194,6 +194,9 @@ export interface ComponentTokens {
     banner: {
         "tint-bar-width": number;
     };
+    screen: {
+        gutter: SpaceName;
+    };
 }
 export type ComponentName = keyof ComponentTokens;
 type SizeKeysOf<C extends ComponentName> = Extract<keyof ComponentTokens[C], "xs" | "sm" | "md" | "lg" | "xl">;
@@ -336,6 +339,9 @@ export declare const COMPONENT_KINDS: {
     readonly banner: {
         readonly "tint-bar-width": "px";
     };
+    readonly screen: {
+        readonly gutter: "space";
+    };
 };
 export interface TokenSet {
     mode: "light" | "dark";

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

@@ -1,6 +1,10 @@
 import type React from "react";
 import type { TextStyle } from "react-native";
 import type { ButtonSize, ButtonVariant } from "../components/Button/Button.js";
+import type { CardPadding, CardRadius, CardTitleFont, CardVariant } from "../components/Card/Card.js";
+import type { EmptyStateSize, EmptyStateVariant } from "../components/EmptyState/EmptyState.js";
+import type { SectionHeaderVariant } from "../components/SectionHeader/SectionHeader.js";
+import type { TextColor } from "../components/Text/Text.js";
 import type { PressAnimationPreset } from "../hooks/usePressAnimation.js";
 import type { FieldVariant } from "../types/vocabulary.js";
 import type { ColorName, FontFaces, FontName, LetterSpacingName, RadiusName, TextName, TokenSet, WeightName } from "./tokens.generated.js";
@@ -87,7 +91,8 @@ export interface TextVariantSpec {
     weight?: WeightName;
     /** Line height in px; when unset the variant takes the heading leading when `heading` is set, else the body leading. */
     lineHeight?: number;
-    color?: ColorName;
+    /** A text role or tone, as the `color` prop takes (`secondary`), or a colour token (`text-muted`). */
+    color?: TextColor | ColorName;
     uppercase?: boolean;
     letterSpacing?: LetterSpacingName;
     italic?: boolean;
@@ -147,6 +152,20 @@ export interface ComponentSettings {
         defaultSize?: ButtonSize;
         defaultPressAnimation?: PressAnimationPreset;
     };
+    card?: {
+        defaultVariant?: CardVariant;
+        defaultPadding?: CardPadding;
+        defaultRadius?: CardRadius;
+        defaultTitleFont?: CardTitleFont;
+    };
+    "section-header"?: {
+        defaultVariant?: SectionHeaderVariant;
+        defaultFlush?: boolean;
+    };
+    "empty-state"?: {
+        defaultSize?: EmptyStateSize;
+        defaultVariant?: EmptyStateVariant;
+    };
     /** NavigationScreen with kind "tab" adds the tab bar's height under content and footer when the app's tab bar floats over the screens. */
     screen?: {
         tabBarFloats?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.112.3",
+  "version": "0.114.0",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -85,7 +85,7 @@
     }
   },
   "dependencies": {
-    "@webority/markdown-core": "0.112.3"
+    "@webority/markdown-core": "0.114.0"
   },
   "peerDependencies": {
     "@react-navigation/bottom-tabs": ">=7.0.0",
@@ -103,8 +103,8 @@
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-svg": ">=15.0.0",
     "react-native-worklets": ">=0.10.0",
-    "@webority/canvas-kit": "0.112.3",
-    "@webority/mobile-core": "0.112.3"
+    "@webority/canvas-kit": "0.114.0",
+    "@webority/mobile-core": "0.114.0"
   },
   "peerDependenciesMeta": {
     "@react-navigation/bottom-tabs": {
@@ -173,10 +173,10 @@
     "react-test-renderer": "19.2.8",
     "rimraf": "6.1.3",
     "typescript": "5.9.3",
-    "@webority/canvas-kit": "0.112.3",
-    "@webority/mobile-dev": "0.0.0",
-    "@webority/mobile-core": "0.112.3",
-    "@webority/tokens": "0.112.3"
+    "@webority/canvas-kit": "0.114.0",
+    "@webority/mobile-core": "0.114.0",
+    "@webority/tokens": "0.114.0",
+    "@webority/mobile-dev": "0.0.0"
   },
   "scripts": {
     "build": "bob build && node ../mobile-dev/scripts/minify-lib.mjs && node -e \"require('node:fs').rmSync('dist/canvas-kit',{recursive:true,force:true})\" && node ../canvas-kit/dist/cli.js build --config canvas-kit.json --out dist/canvas-kit",