@webority/mobile-ui 0.8.1 → 0.9.0

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils.js';
 import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase/index.js';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 /**
  * The status vocabulary is shared with the web library's AppTimeline so a

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils.js';
 export type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';

package/lib/typescript/module/components/Toast/ToastProvider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { HapticType } from '../../utils/hapticUtils.js';
 import type { ToastOptions, ToastPosition, ToastVariant } from './Toast.js';
 export interface ToastApi {

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

@@ -21,7 +21,7 @@
  * a `source` prop would force re-implementing that per app. Wrapping keeps
  * this component ignorant of how the image is fetched.
  */
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 export interface ZoomableImageProps {

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

@@ -26,6 +26,8 @@ export type { BoxProps, RowProps, SpacerProps, StackProps } from './Box/index.js
 export { Box, Row, Spacer, Stack } from './Box/index.js';
 export type { ButtonProps, ButtonSize, ButtonTone, ButtonVariant } from './Button/index.js';
 export { Button } from './Button/index.js';
+export type { CalendarMarkedDate, CalendarMarkKind, CalendarMode, CalendarProps, CalendarRange, CalendarWeekStart } from './Calendar/index.js';
+export { Calendar } from './Calendar/index.js';
 export type { CardElevation, CardPadding, CardProps, CardRadius, CardTextAction, CardVariant } from './Card/index.js';
 export { Card } from './Card/index.js';
 export type { CarouselProps, CarouselRef, PaginationStyle } from './Carousel/index.js';
@@ -80,7 +82,7 @@ export type { KeyboardAwareScrollViewProps, KeyboardAwareScrollViewRef } from '.
 export { KeyboardAwareScrollView } from './KeyboardAwareScrollView/index.js';
 export type { KeyboardToolbarProps } from './KeyboardToolbar/index.js';
 export { KeyboardToolbar } from './KeyboardToolbar/index.js';
-export type { ListItemAction, ListItemProps, ListItemSize } from './ListItem/index.js';
+export type { ListItemAction, ListItemProps, ListItemRightPlacement, ListItemSize } from './ListItem/index.js';
 export { ListItem } from './ListItem/index.js';
 export type { LoaderOverlayProps } from './LoaderOverlay/index.js';
 export { LoaderOverlay, loader, useLoader } from './LoaderOverlay/index.js';

package/lib/typescript/module/form/FormContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { FormApi, FormValues } from './types.js';
 export interface FormProps<Values extends FormValues = FormValues> {
     /** The object returned by {@link useForm}. */

package/lib/typescript/module/network/NetworkStatusBanner.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { ViewStyle } from 'react-native';
 export interface NetworkStatusBannerProps {
     /** Override the default offline message. */

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { ColorMode, Theme, ThemeOverrides } from './types.js';
 export type ColorSchemePreference = 'light' | 'dark' | 'system';
 export interface ThemeProviderProps {

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

@@ -10,9 +10,12 @@ export type FontWeightKey = keyof TypographyScale['fontWeight'];
  * file controls the weight glyph itself. Falls back to `fontWeight` when no
  * brand font is registered for that weight.
  *
+ * `face: 'display'` picks `fontFamily.display` when the theme sets it and is
+ * otherwise identical to the call without it.
+ *
  * Note: the fontWeight scale uses `normal` while FontFamilyScale uses
  * `regular` (the conventional font-name suffix). The helper maps between
  * them transparently.
  */
-export declare const fontFor: (theme: Theme, weight: FontWeightKey) => Pick<TextStyle, "fontFamily" | "fontWeight">;
+export declare const fontFor: (theme: Theme, weight: FontWeightKey, face?: "display") => Pick<TextStyle, "fontFamily" | "fontWeight">;
 //# sourceMappingURL=textStyle.d.ts.map

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

@@ -0,0 +1,38 @@
+/** WCAG 2.x contrast ratio of two opaque `#RRGGBB` colours. */
+export declare const contrastRatio: (a: string, b: string) => number;
+/**
+ * A tone colour as text that reads at 4.5:1 on the given surfaces and on the
+ * tone's own soft tint over each. The colour is returned as it is when it
+ * already reads; otherwise its lightness moves (down on a light scheme, up on
+ * a dark one) with hue and saturation kept, so the ink stays the brand's own
+ * colour, only deeper or lighter. A value that is not a six-digit hex has no
+ * lightness to move and is returned unchanged.
+ */
+export declare const deriveToneInk: (tone: string, surfaces: readonly string[], scheme: "light" | "dark") => string;
+/**
+ * A tone colour as a solid fill under its `on*` ink, at 4.5:1. The fill is
+ * returned as it is when the pair already reads; otherwise its lightness moves
+ * away from the ink (darker under a light ink, lighter under a dark one) with
+ * hue and saturation kept. A colour that is not a six-digit hex has no
+ * lightness to move and is returned unchanged.
+ */
+export declare const deriveSolidFill: (fill: string, on: string) => string;
+/**
+ * The hover and pressed fills of a moved or brand-named solid fill, in its own
+ * hue. Each takes the size of the library's lightness step from `reference`
+ * (the library fill and its two state fills) and moves away from the `on` ink,
+ * as the library does (darker under white, lighter under a dark ink), so the
+ * label keeps its contrast while pressed and pressed stays further from the
+ * fill than hover. A fill with no room for the step on that side steps the
+ * other way. A value that is not a six-digit hex has no lightness to step and
+ * returns the reference states.
+ */
+export declare const deriveStateFills: (fill: string, on: string, reference: {
+    fill: string;
+    hover: string;
+    pressed: string;
+}) => {
+    hover: string;
+    pressed: string;
+};
+//# sourceMappingURL=toneInk.d.ts.map

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

@@ -43,10 +43,13 @@ export interface ColorPalette {
      * Foreground (text/icon) colour to render ON a solid fill of each semantic
      * tone. Solid Button / Badge / Chip / Banner backgrounds read these instead
      * of assuming `text.inverse` (white) — white-on-pale (notably `warning`
-     * amber) fails contrast. Library defaults keep the historical white for
-     * primary/success/error/info, use dark ink for `warning`, and `text.primary`
-     * for the surface-like `secondary` tone. Override per-brand to match your
-     * palette's luminance.
+     * amber) fails contrast. Library defaults use white on the light scheme's
+     * primary/success/error/info and dark ink on `warning` and on every dark
+     * scheme tone, each pair at 4.5:1 or more, and `text.primary` for the
+     * surface-like `secondary` tone. A brand that overrides a tone colour (or
+     * its `on*` ink) gets the FILL moved, in its own hue, until the pair reads
+     * at 4.5:1 (`mergeTheme`); override per-brand to match your palette's
+     * luminance.
      */
     onPrimary: string;
     onSecondary: string;
@@ -56,6 +59,24 @@ export interface ColorPalette {
     onInfo: string;
     /** Ink on a scrim (`background.overlay`), which is dark in both schemes. */
     onOverlay: string;
+    /**
+     * Each tone as TEXT, on the page surfaces and on that tone's own soft tint
+     * (14% of the tone). The tone colours above are fills: `warning` amber and
+     * `success` green sit near 2:1 as small text on a light page. These hold
+     * 4.5:1 against every `background.*` and the soft tint in both schemes, in
+     * the tone's own hue. Every component that draws a tone as text (soft and
+     * outline `StatusBadge`, `Banner`, `Chip`, `Button` soft / outline / ghost
+     * labels, `Avatar` initials on a tint, a field's required marker, the
+     * `FormField` hint and `ErrorBoundary` text) reads them. A brand that
+     * overrides a tone colour overrides its ink too.
+     */
+    toneText: {
+        primary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
     text: {
         primary: string;
         secondary: string;
@@ -173,6 +194,14 @@ export interface FontFamilyScale {
     medium?: string;
     semibold?: string;
     bold?: string;
+    /**
+     * The title face (a serif, say). The built-in `display`, `h1`, `h2` and
+     * `title` `Text` variants, and a registered variant with
+     * `fontFamily: 'display'`, draw in it; when unset they use the weight faces
+     * above. It is one face: the variant's weight is not sent alongside it, so
+     * register the weight you want as this face.
+     */
+    display?: string;
 }
 export interface TypographyScale {
     fontSize: {
@@ -377,6 +406,7 @@ export interface ToastTokens {
     iconCircleSize: number;
     iconCircleBorderRadius: number;
     iconGlyphFontSize: number;
+    /** Width of the leading tone bar. Library default: 0 (none; the icon carries the tone). Set 4 to restore the bar. */
     tintBarWidth: number;
     /** Default auto-dismiss duration (ms) when toast.duration is unset. 0 = persistent. Library default: 3000. */
     defaultDurationMs?: number;
@@ -819,6 +849,7 @@ export interface AppBarTokens {
     badgeLineHeight?: number;
 }
 export interface BannerTokens {
+    /** Width of the leading tone bar. Library default: 0 (none; the icon carries the tone). Set 4 to restore the bar. */
     tintBarWidth?: number;
     iconCircleSize?: number;
     iconCircleRadius?: number;
@@ -1129,6 +1160,8 @@ export interface TextVariantSpec {
     letterSpacing?: number | keyof TypographyScale['letterSpacing'];
     italic?: boolean;
     fontVariant?: TextStyle['fontVariant'];
+    /** `'display'` draws the variant in `typography.fontFamily.display` when the theme sets it; otherwise the weight faces. */
+    fontFamily?: 'display';
 }
 export interface Theme {
     mode: ColorMode;

package/lib/typescript/module/utils/ariaState.d.ts

@@ -0,0 +1,10 @@
+import type { AccessibilityState, ViewProps } from 'react-native';
+type AriaStateProps = Pick<ViewProps, 'aria-busy' | 'aria-checked' | 'aria-disabled' | 'aria-expanded' | 'aria-selected'>;
+/**
+ * The `aria-*` twin of an `accessibilityState`. React Native Web reads only the
+ * `aria-*` props, so a control that builds its state at run time spreads this
+ * beside `accessibilityState`; phones read the same values from either.
+ */
+export declare const ariaFromState: (state: AccessibilityState | undefined) => AriaStateProps;
+export {};
+//# sourceMappingURL=ariaState.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -107,7 +107,7 @@
     ]
   },
   "devDependencies": {
-    "@webority/mobile-core": "0.8.1"
+    "@webority/mobile-core": "0.9.0"
   },
   "scripts": {
     "build": "bob build && node ../../scripts/minify-lib.mjs",