@webority/mobile-ui 0.18.1 → 0.19.1

package/lib/typescript/commonjs/utils/index.d.ts

@@ -10,8 +10,6 @@ export { mergeRefs } from './mergeRefs';
 export type { BreakpointKey, ResponsiveScales, ScreenInfo } from './responsive';
 export { Breakpoints, isScreenSize, isTablet, Responsive, ScreenDimensions, useScreenDimensions } from './responsive';
 export { shadowStyle } from './shadows';
-export type { SpacingToken } from './spacing';
-export { Margin, Padding, Spacing } from './spacing';
 export type { SquirclePathParams } from './squircle';
 export { SQUIRCLE_MIN_RADIUS, SQUIRCLE_SMOOTHING, squircleApplies, squircleHostRadius, squirclePath } from './squircle';
 export { warnUnknownProps } from './warnUnknownProps';

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

@@ -24,10 +24,10 @@ import type { SlotIcon, SlotIconState } from '../AppIcon/index.js';
 export type BottomNavigationVariant = 'pill' | 'underline' | 'floating' | 'bubble' | 'expand' | 'solid' | 'tile';
 export type BottomNavigationIndicatorPosition = 'top' | 'bottom';
 /**
- * Corner radius of the bar surface in pixels, or `full`: half the surface's
+ * Corner radius of the bar surface in pixels, or `pill`: half the surface's
  * own height, so the bar's ends are round whatever the bar's height comes to.
  */
-export type BottomNavigationRadius = number | 'full';
+export type BottomNavigationRadius = number | 'pill';
 /**
  * Corner radius of the active tab's background: `auto` follows the bar's
  * radius, a number sets its own in pixels. Every value is capped at half the
@@ -142,9 +142,9 @@ export interface BottomNavigationProps {
     /**
      * Corner radius of the bar's own surface: the docked bar for every variant
      * but `floating` and `tile`, where it rounds the detached capsule instead.
-     * A pixel value, or `full`, which rounds the ends completely at half the
+     * A pixel value, or `pill`, which rounds the ends completely at half the
      * surface's measured height. Defaults to square for the docked
-     * bar, to `floatingRadius` (28) for the `floating` capsule and to fully
+     * bar, to `floatingRadius` (20) for the `floating` capsule and to fully
      * round for the `tile` capsule.
      *
      * Set the radius here rather than through `style`: the `underline` variant
@@ -157,7 +157,7 @@ export interface BottomNavigationProps {
     /**
      * Corner radius of the active tab's background on the `pill`, `floating`,
      * `solid`, `tile` and `expand` variants. `auto` (default) takes the bar's
-     * radius once one is set through `radius` or the `borderRadius` token, and
+     * radius once one is set through `radius` or the `radius` token, and
      * stays fully round while none is. A number sets the background's own
      * radius whatever the bar's. Capped at half the background's height, since
      * Android squares off a larger radius, so a large number is fully round.
@@ -197,7 +197,7 @@ export interface BottomNavigationProps {
     paddingHorizontal?: number;
     /**
      * Air inside the bar surface above and below the tab row, in pixels.
-     * Default 6 (8 above the `bubble` row). On a docked bar that is not lifted
+     * Default 4 (8 above the `bubble` row). On a docked bar that is not lifted
      * by `marginVertical`, the bottom takes the safe-area inset instead when
      * that is larger. The `underline` line sits on this padding's outer edge.
      */

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

@@ -1,33 +1,31 @@
 import type React from 'react';
 import type { View as RNView, StyleProp, ViewProps, ViewStyle } from 'react-native';
-import type { ColorPalette, RadiusScale, SpacingScale, Theme } from '../../theme/types.js';
-export type SpacingToken = keyof SpacingScale;
-export type RadiusToken = keyof RadiusScale;
+import type { ColorPalette, RadiusKey, SpacingKey, Theme } from '../../theme/types.js';
 export type BackgroundToken = keyof ColorPalette['background'];
 export interface BoxProps extends ViewProps {
     /** padding (all sides) */
-    p?: SpacingToken;
+    p?: SpacingKey;
     /** paddingHorizontal */
-    px?: SpacingToken;
+    px?: SpacingKey;
     /** paddingVertical */
-    py?: SpacingToken;
-    pt?: SpacingToken;
-    pr?: SpacingToken;
-    pb?: SpacingToken;
-    pl?: SpacingToken;
+    py?: SpacingKey;
+    pt?: SpacingKey;
+    pr?: SpacingKey;
+    pb?: SpacingKey;
+    pl?: SpacingKey;
     /** margin (all sides) */
-    m?: SpacingToken;
-    mx?: SpacingToken;
-    my?: SpacingToken;
-    mt?: SpacingToken;
-    mr?: SpacingToken;
-    mb?: SpacingToken;
-    ml?: SpacingToken;
+    m?: SpacingKey;
+    mx?: SpacingKey;
+    my?: SpacingKey;
+    mt?: SpacingKey;
+    mr?: SpacingKey;
+    mb?: SpacingKey;
+    ml?: SpacingKey;
     /** Flexbox gap between children (spacing token). */
-    gap?: SpacingToken;
+    gap?: SpacingKey;
     /** Background — a `colors.background.*` token or a raw colour string. */
     bg?: BackgroundToken | (string & {});
-    radius?: RadiusToken;
+    radius?: RadiusKey;
     /** Draw a hairline border in `colors.border.primary`. */
     border?: boolean;
     flex?: number;
@@ -48,7 +46,7 @@ export type RowProps = Omit<BoxProps, 'direction'>;
 declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<RNView>>;
 export interface SpacerProps {
     /** Fixed spacer of this spacing token. Omit for a flexible spacer (`flex: 1`). */
-    size?: SpacingToken;
+    size?: SpacingKey;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/module/components/Calendar/calendarStyles.d.ts

@@ -67,7 +67,7 @@ export declare const buildCalendarStyles: (theme: Theme) => {
     dayCell: {
         alignItems: "center";
         justifyContent: "center";
-        padding: number;
+        padding: 0;
     };
     barLeft: {
         position: "absolute";

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

@@ -11,7 +11,7 @@ export interface CardTextAction {
     accessibilityLabel?: string;
 }
 export type CardElevation = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-export type CardRadius = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type CardRadius = 'sm' | 'md' | 'lg' | 'xl';
 export type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
 export type CardBackground = keyof ColorPalette['background'] | (string & {});
 export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {

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

@@ -24,7 +24,7 @@
 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';
+import type { FieldSide, FieldVariantTokens, Theme } from '../../theme/types.js';
 export type FieldBaseSize = 'sm' | 'md' | 'lg';
 export type FieldBaseVariant = 'outlined' | 'filled' | 'underline';
 /**
@@ -114,7 +114,7 @@ export interface FieldBaseProps {
     paddingRight?: number;
     /** Override vertical padding (single-line). Multiline parents usually leave this default. */
     paddingVertical?: number;
-    /** Override corner radius (shorthand — all four corners). SearchBar pill uses this to apply `radius.full`. */
+    /** Override corner radius (shorthand — all four corners). SearchBar pill uses this to apply `radius.pill`. */
     borderRadius?: number;
     /** Top-left corner radius. Wins over `borderRadius`. */
     borderTopLeftRadius?: number;
@@ -253,12 +253,6 @@ export declare const FieldMessage: React.FC<{
     size?: FieldBaseSize;
     style?: StyleProp<TextStyle>;
 }>;
-/**
- * Public re-export of the resolved size tokens — components that need to
- * compute their own padding adjustments (e.g. multiline Input, icon-slot
- * sizing) read from this rather than re-hardcoding the size table.
- */
-export declare const resolveFieldSize: (theme: Theme, size: FieldBaseSize) => ResolvedFieldSizeTokens;
 /**
  * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
  * but every border colour / width is expanded to a 4-side record by the time

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

@@ -1,5 +1,5 @@
 export type { FieldBaseProps, FieldBaseSize, FieldBaseVariant, FieldTextStyle, FieldTextStyleResolverOptions } from './FieldBase.js';
-export { default, FieldBase, FieldErrorGlyph, FieldLabel, FieldMessage, fieldTextAsString, hasFieldText, RequiredMark, RequiredPlaceholder, resolveFieldSize, resolveFieldTextStyle } from './FieldBase.js';
+export { default, FieldBase, FieldErrorGlyph, FieldLabel, FieldMessage, fieldTextAsString, hasFieldText, RequiredMark, RequiredPlaceholder, resolveFieldTextStyle } from './FieldBase.js';
 export type { UseFloatingLabelOptions, UseFloatingLabelResult } from './useFloatingLabel.js';
 export { FLOATED_LABEL_SCALE, useFloatingLabel } from './useFloatingLabel.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -15,7 +15,8 @@
  */
 import type React from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
-import type { ResolvedFieldSizeTokens } from '../../theme/types.js';
+import { type Resolved } from '../../theme/index.js';
+import type { FieldSizeTokens } from '../../theme/types.js';
 import type { FieldBaseProps, FieldBaseVariant } from './FieldBase.js';
 /** The floated label's scale; the outlined notch is sized from it. */
 export declare const FLOATED_LABEL_SCALE = 0.85;
@@ -28,7 +29,7 @@ export interface UseFloatingLabelOptions {
     floated: boolean;
     required?: boolean;
     variant: FieldBaseVariant;
-    sizeTokens: ResolvedFieldSizeTokens;
+    sizeTokens: Resolved<FieldSizeTokens>;
     /** Where the text starts past the leading slot (icon, gaps, divider), px. */
     leadingOffset: number;
     /** Width the trailing slot takes, for a right-aligned label, px. */

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

@@ -75,7 +75,7 @@ export interface InlineSelectProps<T = SelectOption> {
     color?: string;
     /** Chevron colour override — falls back to `color`'s resolution. */
     chevronColor?: string;
-    /** Chevron size in pixels. Default: the field size's `iconSize`. */
+    /** Chevron size in pixels. Default: the field size's `icon`. */
     chevronSize?: number;
     textStyle?: StyleProp<TextStyle>;
     style?: StyleProp<ViewStyle>;

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

@@ -164,7 +164,7 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
     labelStyle?: StyleProp<TextStyle>;
     /** Style applied to the helper/error text below the field. */
     messageStyle?: StyleProp<TextStyle>;
-    /** Per-instance override for the field's corner radius. Wins over `theme.components.input.borderRadius` and size defaults. */
+    /** Per-instance override for the field's corner radius. Wins over the field size's radius. */
     borderRadius?: number;
     onFocus?: (e: FocusEvent) => void;
     onBlur?: (e: BlurEvent) => void;

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

@@ -179,7 +179,7 @@ export interface PhoneNumberInputProps extends Pick<TextInputProps, 'returnKeyTy
     disabled?: boolean;
     size?: FieldBaseSize;
     variant?: FieldBaseVariant;
-    /** Per-instance corner radius. Wins over `theme.components.phoneNumberInput.borderRadius` and the field default. */
+    /** Per-instance corner radius. Wins over the field size's radius. */
     borderRadius?: number;
     countrySheetTitle?: string;
     haptic?: HapticType | false;

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

@@ -31,7 +31,7 @@ export interface SearchBarProps extends Omit<TextInputProps, 'style' | 'value' |
     size?: SearchBarSize;
     variant?: SearchBarVariant;
     /**
-     * Corner radius. Default: the theme's `components.searchBar.<size>.borderRadius`
+     * Corner radius. Default: the theme's `components.searchBar.<size>.radius`
      * (the pill). Ignored on `underline`, which is always square.
      */
     borderRadius?: number;

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

@@ -70,7 +70,7 @@ export interface SegmentedControlProps {
      * Corner radius, a theme token or a pixel number. Rounds the segmented
      * track (the thumb nests inside with the track's corner minus the inset),
      * the pill, and the ends of the underline. Unset, each variant keeps its
-     * own default: `md` track with an `sm` thumb, a `full` pill, a square
+     * own default: `md` track with an `sm` thumb, a `pill`-radius pill, a square
      * underline. The theme's `segmentedControl.radius` token is the app-wide
      * default under this prop.
      */
@@ -93,20 +93,6 @@ export interface SegmentedControlProps {
     labelStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
-export interface SegmentedControlSizeStyle {
-    height: number;
-    fontSize: number;
-    paddingHorizontal: number;
-    /** Pixel size a named icon is drawn at. */
-    iconSize: number;
-}
-/**
- * The control's sizes. Exported so `Tabs`' segmented variant draws from the
- * same numbers and the two looks cannot drift.
- */
-export declare const segmentedControlSizes: Record<SegmentedControlSize, SegmentedControlSizeStyle>;
-/** Inset between the track edge and the thumb; also read by `Tabs`' segmented variant. */
-export declare const segmentedControlTrackPadding = 4;
 declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<RNView>>;
 export { SegmentedControl };
 export default SegmentedControl;

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

@@ -111,9 +111,9 @@ interface BaseSelectProps<T = SelectOption> {
     rightIcon?: SlotIcon;
     /** Colour of the built-in chevron. Ignored when `rightIcon` is set. Default: `colors.text.tertiary` (`text.disabled` when disabled). */
     chevronColor?: string;
-    /** Size of the built-in chevron in pixels. Ignored when `rightIcon` is set. Default: the field size's `iconSize`. */
+    /** Size of the built-in chevron in pixels. Ignored when `rightIcon` is set. Default: the field size's `icon`. */
     chevronSize?: number;
-    /** Per-instance override for the trigger's corner radius. Wins over `components.select.borderRadius` and size defaults. */
+    /** Per-instance override for the trigger's corner radius. Wins over the field size's radius. */
     borderRadius?: number;
     accessibilityLabel?: string;
     /** Style for the field label text above the trigger; the same prop as Input's and NumberInput's. */

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

@@ -33,7 +33,7 @@ export type SkeletonSpeed = 'slow' | 'normal' | 'fast';
 /** Pre-defined shape archetype. Plays nicely with `width`/`height` overrides. */
 export type SkeletonShape = 'rect' | 'rounded' | 'circle' | 'text';
 /** `theme.radius` token name or a literal pixel value. */
-export type SkeletonRadius = keyof Pick<RadiusScale, 'sm' | 'md' | 'lg' | 'xl' | 'full'> | number;
+export type SkeletonRadius = keyof Pick<RadiusScale, 'sm' | 'md' | 'lg' | 'xl' | 'pill'> | number;
 export type SkeletonWidth = number | 'auto' | '100%' | `${number}%`;
 export interface SkeletonProps {
     /**

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

@@ -52,7 +52,7 @@ export interface TabsProps {
      * Corner radius, a theme token or a pixel number. Rounds the segmented
      * track (the thumb nests inside it, its corner the track's minus the inset),
      * the pill, and the ends of the underline. Unset, each variant keeps its own
-     * default: `md` track with an `sm` thumb, a `full` pill, a square underline.
+     * default: `md` track with an `sm` thumb, a `pill`-radius pill, a square underline.
      * The theme's `tabs.radius` token is the app-wide default under this prop.
      */
     radius?: TabsRadius;

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

@@ -9,8 +9,8 @@ export type { InitUIOptions } from './initUI.js';
 export { initUI } from './initUI.js';
 export type { NetworkStatusBannerProps } from './network/index.js';
 export { NetworkStatusBanner } from './network/index.js';
-export type { ColorMode, ColorPalette, ColorSchemePreference, DeepPartial, IconRegistry, IconRenderer, MotionScale, RadiusScale, ShadowDefinition, ShadowScale, SpacingScale, TextVariantSpec, Theme, ThemeOverrides, ThemeProviderProps, TypographyScale } from './theme/index.js';
-export { darkTheme, getColorMode, getTheme, lightTheme, mergeTheme, resetTheme, setColorMode, setTheme, subscribeTheme, ThemeProvider, useTheme, useThemeMode } from './theme/index.js';
-export type { AnnounceOptions, BreakpointKey, FeedbackIntent, HapticType, ResponsiveScales, ScreenInfo, SpacingToken, SquirclePathParams } from './utils/index.js';
-export { announce, Breakpoints, configureFeedback, feedback, hapticForIntent, isFeedbackEnabled, isScreenSize, isTablet, Margin, Padding, Responsive, ScreenDimensions, Spacing, SQUIRCLE_MIN_RADIUS, SQUIRCLE_SMOOTHING, setHapticImplementation, shadowStyle, smoothCorners, squircleApplies, squircleHostRadius, squirclePath, triggerHaptic, useScreenDimensions, warnUnknownProps } from './utils/index.js';
+export type { ColorMode, ColorPalette, ColorSchemePreference, ComponentTokens, DeepPartial, FontSizeKey, IconRegistry, IconRenderer, MotionScale, RadiusKey, RadiusScale, Resolved, ShadowDefinition, ShadowScale, SpacingKey, SpacingScale, TextVariantSpec, Theme, ThemeOverrides, ThemeProviderProps, TypographyScale } from './theme/index.js';
+export { darkTheme, fontSizeOf, getColorMode, getTheme, lightTheme, mergeTheme, radiusOf, resetTheme, resolveBadgeSize, resolveButtonSize, resolveCheckboxSize, resolveChipSize, resolveEmptyStateSize, resolveFieldSize, resolveFloatingActionButtonSize, resolveListItemSize, resolveOtpInputSize, resolveRadioSize, resolveSegmentedControlSize, resolveSliderSize, resolveSwitchSize, resolveTabsSize, setColorMode, setTheme, spaceOf, subscribeTheme, ThemeProvider, useTheme, useThemeMode } from './theme/index.js';
+export type { AnnounceOptions, BreakpointKey, FeedbackIntent, HapticType, ResponsiveScales, ScreenInfo, SquirclePathParams } from './utils/index.js';
+export { announce, Breakpoints, configureFeedback, feedback, hapticForIntent, isFeedbackEnabled, isScreenSize, isTablet, Responsive, ScreenDimensions, SQUIRCLE_MIN_RADIUS, SQUIRCLE_SMOOTHING, setHapticImplementation, shadowStyle, smoothCorners, squircleApplies, squircleHostRadius, squirclePath, triggerHaptic, useScreenDimensions, warnUnknownProps } from './utils/index.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,27 @@
+import type { BadgeSizeTokens, ButtonSizeTokens, CheckboxSizeTokens, ChipSizeTokens, ComponentSizeKey, EmptyStateSizeTokens, FieldSizeTokens, FloatingActionButtonSizeTokens, ListItemSizeTokens, OTPInputSizeTokens, RadioSizeTokens, SegmentedControlSizeTokens, SliderSizeTokens, SwitchSizeTokens, TabsSizeTokens } from './componentTokens.js';
+import type { Theme } from './types.js';
+/** A size token with every scale name turned into pixels. */
+export type Resolved<T> = {
+    [K in keyof T]: number;
+};
+export declare const resolveButtonSize: (theme: Theme, size: ComponentSizeKey) => Resolved<ButtonSizeTokens>;
+export declare const resolveFieldSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<FieldSizeTokens>;
+export declare const resolveEmptyStateSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<EmptyStateSizeTokens>;
+export declare const resolveListItemSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<ListItemSizeTokens>;
+export declare const resolveBadgeSize: (theme: Theme, size: "sm" | "md") => Resolved<BadgeSizeTokens>;
+export declare const resolveChipSize: (theme: Theme, size: "sm" | "md") => Resolved<ChipSizeTokens>;
+export declare const resolveCheckboxSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<CheckboxSizeTokens>;
+export declare const resolveRadioSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<RadioSizeTokens>;
+export declare const resolveSwitchSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<SwitchSizeTokens>;
+export declare const resolveOtpInputSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<OTPInputSizeTokens>;
+export declare const resolveSegmentedControlSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<SegmentedControlSizeTokens>;
+export declare const resolveTabsSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<TabsSizeTokens>;
+export declare const resolveSliderSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<SliderSizeTokens>;
+export declare const resolveFloatingActionButtonSize: (theme: Theme, size: "sm" | "md" | "lg") => Resolved<FloatingActionButtonSizeTokens>;
+/**
+ * Resolves every scale-named component token once, so a theme override that
+ * names a missing scale step stops the app where the theme is built, with the
+ * token's path, instead of drawing a component with no padding.
+ */
+export declare const validateComponentTokens: (theme: Theme) => void;
+//# sourceMappingURL=componentSizes.d.ts.map