@webority/mobile-ui 0.11.1 → 0.12.1

package/lib/typescript/module/components/FileViewer/useFileViewerZoom.d.ts

@@ -0,0 +1,41 @@
+/** A zoom that ends at or below this counts as none and springs back to 1x. */
+export declare const ZOOM_REST = 1.01;
+interface UseFileViewerZoomOptions {
+    zoomEnabled: boolean;
+    maxZoom: number;
+    viewportWidth: number;
+    viewportHeight: number;
+    /** The furthest the document scrolls, so a pan carried into the scroll stops at the end. */
+    maxScroll: number;
+}
+/**
+ * FileViewer's zoom: a scale and translate on the whole scroll view, so the
+ * maths stays in viewport space. Pinch zooms around the fingers, a double tap
+ * zooms in on the tap or back out, and while zoomed a one-finger drag pans and,
+ * past the zoomed page's top or bottom edge, carries on into the document's
+ * scroll. `zoomLevel` reaches React only when a gesture settles, never per frame.
+ */
+export declare const useFileViewerZoom: ({ zoomEnabled, maxZoom, viewportWidth, viewportHeight, maxScroll }: UseFileViewerZoomOptions) => {
+    scrollRef: import("react-native-reanimated").AnimatedRef<import("react-native").ReactNativeElement>;
+    scrollGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/nativeGesture").NativeGesture;
+    zoomGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/gestureComposition").SimultaneousGesture;
+    zoomStyle: import("react-native-reanimated/lib/typescript/hook/commonTypes").AnimatedStyleHandle<{
+        transform: ({
+            translateX: number;
+            translateY?: undefined;
+            scale?: undefined;
+        } | {
+            translateY: number;
+            translateX?: undefined;
+            scale?: undefined;
+        } | {
+            scale: number;
+            translateX?: undefined;
+            translateY?: undefined;
+        })[];
+    }>;
+    zoomLevel: number;
+    resetZoom: () => void;
+};
+export {};
+//# sourceMappingURL=useFileViewerZoom.d.ts.map

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

@@ -0,0 +1,55 @@
+/**
+ * FilterChipRow: a horizontal row of single-choice filter chips, each with an
+ * optional count ("Open 4"), above a list.
+ *
+ * The row scrolls edge to edge: `bleed` pulls it out by the page gutter on both
+ * sides and pads its content by the same amount, so the first chip lines up
+ * with the page content and the row still runs to the screen edge. Choosing a
+ * chip scrolls the row to centre it, so one past the screen edge never stays
+ * out of sight. The first placement is not animated; later ones glide, unless
+ * the OS asks for reduced motion.
+ *
+ * Accessibility is a radiogroup of radios, like SegmentedControl and
+ * ChoiceGroup: a filter picks a value on the same data. Sections of a screen
+ * are `Tabs`, not this.
+ */
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+import type { ChipSize, ChipTone, ChipVariant } from '../Chip/index.js';
+export interface FilterChipItem {
+    /** Stable id of the chip; `value` and `onChange` carry it. */
+    key: string;
+    label: string;
+    /** Shown after the label; leave it undefined while it loads and the label shows alone. */
+    count?: number | string;
+    disabled?: boolean;
+}
+export interface FilterChipRowProps {
+    items: ReadonlyArray<FilterChipItem>;
+    /** Key of the selected item. */
+    value: string;
+    /** Fired with the key of a chip the person picks. Not fired for the chip that is already selected. */
+    onChange: (key: string) => void;
+    /**
+     * The page gutter in points. The row extends this far past its parent on
+     * both sides and pads its content by the same amount. The theme carries no
+     * screen gutter, so the default is 0 (the row stays inside its parent).
+     */
+    bleed?: number;
+    size?: ChipSize;
+    variant?: ChipVariant;
+    tone?: ChipTone;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    /** Names the radiogroup for screen readers, e.g. "Filter by status". */
+    accessibilityLabel?: string;
+    /** Style of the outer view, applied after the bleed margin. */
+    style?: StyleProp<ViewStyle>;
+    /** Style of the scrolling content, applied after the bleed padding and the chip gap. */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const FilterChipRow: import("react").ForwardRefExoticComponent<FilterChipRowProps & import("react").RefAttributes<RNView>>;
+export { FilterChipRow };
+export default FilterChipRow;
+//# sourceMappingURL=FilterChipRow.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { FilterChipItem, FilterChipRowProps } from './FilterChipRow.js';
+export { default, FilterChipRow } from './FilterChipRow.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -8,7 +8,15 @@ export interface FloatingActionButtonProps {
     /** JSX element for the icon. The FAB sizes it via the `size` prop's iconSize token. */
     icon: React.ReactNode;
     onPress: () => void;
+    /** Text beside the icon; makes the button extended (a pill). */
     label?: string;
+    /**
+     * Folds an extended button to its round icon alone (the size's diameter) with
+     * the label fading out, and unfolds it when false. Drive it from scroll state
+     * to cover less of the rows moving underneath. Does nothing without a `label`;
+     * the accessibility label is unchanged. Independent of `hideOnScroll`.
+     */
+    collapsed?: boolean;
     size?: FloatingActionButtonSize;
     tone?: FloatingActionButtonTone;
     position?: FloatingActionButtonPosition;

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

@@ -0,0 +1,26 @@
+import type React from 'react';
+import { type Dispatch, type SetStateAction } from 'react';
+export interface ModalInsets {
+    top: number;
+    bottom: number;
+}
+/**
+ * Top and bottom insets of the window a native Modal draws in, seeded from the
+ * app-level provider and corrected once the Modal's own provider reports.
+ * Pass the setter to `ModalSafeArea` as `onInsets`.
+ */
+export declare const useModalInsets: () => [ModalInsets, Dispatch<SetStateAction<ModalInsets>>];
+/** Reports the nearest provider's top and bottom insets up; renders nothing. */
+export declare const InsetsProbe: React.FC<{
+    onChange: Dispatch<SetStateAction<ModalInsets>>;
+}>;
+/**
+ * Wrap a native Modal's content in this: the app-level provider measures the
+ * app window (bottom inset 0 under Android's navigation bar when the app is
+ * not edge to edge), not the translucent Modal window the content is drawn in.
+ */
+export declare const ModalSafeArea: React.FC<{
+    onInsets: Dispatch<SetStateAction<ModalInsets>>;
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=ModalSafeArea.d.ts.map

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

@@ -71,9 +71,15 @@ export interface SignaturePadProps {
     height?: number;
     /** Longest typed name. Default 100. */
     maxNameLength?: number;
-    /** Ink of the strokes and the typed name. Defaults to the light theme's primary text, in both colour schemes. */
+    /**
+     * Ink of the strokes and the typed name, on the pad and in `toFile()` and `toSvg()`. With neither
+     * `inkColor` nor `paperColor` set, the pad follows the active theme (primary text on the elevated
+     * surface), while `toFile()` and `toSvg()` stay the library's dark ink on light paper in every
+     * colour scheme so the file is ready for a document. Set one and the other keeps the light
+     * theme's colour.
+     */
     inkColor?: string;
-    /** Ground of the pad and of the PNG. Defaults to the light theme's elevated surface, in both colour schemes. */
+    /** Ground of the pad and of the PNG. See `inkColor` for the defaults. */
     paperColor?: string;
     /**
      * Font family of the typed name. Default a system script face: Snell Roundhand on iOS, `cursive`

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

@@ -0,0 +1,22 @@
+import type { View as RNView, ViewProps } from 'react-native';
+export type SquircleViewProps = ViewProps;
+/**
+ * A `View` whose rounded corners are smooth on both platforms, for a surface
+ * the library has no component for (a photo tile, a signature pad frame).
+ * Give it `borderRadius`, and `backgroundColor` and a border in `style`.
+ *
+ * iOS draws the continuous curve natively (`borderCurve`). Android draws the
+ * fill and border as one SVG path behind the children, with the theme's
+ * `cornerSmoothing`, so it matches Box, Card and Button. The view keeps its
+ * native corner until it is measured, and where the curve cannot apply: a
+ * radius under 6, a pill, a different radius or border per corner or side, a
+ * dashed border, `overflow: 'hidden'`, `elevation`, or a colour that is not a
+ * string.
+ *
+ * Children are not clipped to the curve. Use `Card` or `Box` when the surface
+ * is a themed card or a spacing container.
+ */
+declare const SquircleView: import("react").ForwardRefExoticComponent<ViewProps & import("react").RefAttributes<RNView>>;
+export { SquircleView };
+export default SquircleView;
+//# sourceMappingURL=SquircleView.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { SquircleViewProps } from './SquircleView.js';
+export { SquircleView } from './SquircleView.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -68,6 +68,8 @@ export type { FilePickerFile, FilePickerFileState, FilePickerFileStatus, FilePic
 export { FilePicker, formatFileSize } from './FilePicker/index.js';
 export type { FileViewerProps, FileViewerSource } from './FileViewer/index.js';
 export { FileViewer } from './FileViewer/index.js';
+export type { FilterChipItem, FilterChipRowProps } from './FilterChipRow/index.js';
+export { FilterChipRow } from './FilterChipRow/index.js';
 export type { FloatingActionButtonGroupAction, FloatingActionButtonGroupProps, FloatingActionButtonPosition, FloatingActionButtonProps, FloatingActionButtonSize, FloatingActionButtonTone } from './FloatingActionButton/index.js';
 export { FloatingActionButton, FloatingActionButtonGroup } from './FloatingActionButton/index.js';
 export type { ForceUpdateDialogProps } from './ForceUpdateDialog/index.js';
@@ -160,6 +162,8 @@ export type { SparklineProps, SparklineTone } from './Sparkline/index.js';
 export { Sparkline } from './Sparkline/index.js';
 export type { SpinnerProps, SpinnerSize, SpinnerVariant } from './Spinner/index.js';
 export { Spinner } from './Spinner/index.js';
+export type { SquircleViewProps } from './SquircleView/index.js';
+export { SquircleView } from './SquircleView/index.js';
 export type { StatTileProps, StatTileTrend } from './StatTile/index.js';
 export { StatTile } from './StatTile/index.js';
 export type { StatusBadgeProps, StatusBadgeSize, StatusBadgeTone, StatusBadgeVariant } from './StatusBadge/index.js';

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

@@ -359,6 +359,10 @@ export interface EmptyStateSizeTokens {
     descriptionFontSize: keyof TypographyScale['fontSize'];
     /** Resolves against the active theme's spacing scale. */
     paddingVertical: keyof SpacingScale;
+    /** Space between the icon and the title; a spacing scale key. Library default: "md". */
+    titleGap?: keyof SpacingScale;
+    /** Space between the title and the description; a spacing scale key. Library default: "xs". */
+    descriptionGap?: keyof SpacingScale;
 }
 export interface ListItemSizeTokens {
     /** Resolves against the active theme's spacing scale. */

package/package.json

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