@webority-technologies/mobile 0.0.7 → 0.0.8

package/lib/module/components/ListItem/ListItem.js

@@ -2,38 +2,44 @@
 
 import React, { forwardRef, useMemo } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { Swipeable } from "../Swipeable/index.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeFor = (theme, size) => {
-  switch (size) {
-    case 'sm':
-      return {
-        paddingVertical: theme.spacing.sm,
-        titleSize: theme.typography.fontSize.sm,
-        subtitleSize: theme.typography.fontSize.xs,
-        minHeight: 44
-      };
-    case 'lg':
-      return {
-        paddingVertical: theme.spacing.lg,
-        titleSize: theme.typography.fontSize.lg,
-        subtitleSize: theme.typography.fontSize.sm,
-        minHeight: 72
-      };
-    case 'md':
-    default:
-      return {
-        paddingVertical: theme.spacing.md,
-        titleSize: theme.typography.fontSize.base,
-        subtitleSize: theme.typography.fontSize.sm,
-        minHeight: 56
-      };
+const SIZE_FALLBACK = {
+  sm: {
+    paddingVertical: 'sm',
+    titleFontSize: 'sm',
+    subtitleFontSize: 'xs',
+    minHeight: 44
+  },
+  md: {
+    paddingVertical: 'md',
+    titleFontSize: 'base',
+    subtitleFontSize: 'sm',
+    minHeight: 56
+  },
+  lg: {
+    paddingVertical: 'lg',
+    titleFontSize: 'lg',
+    subtitleFontSize: 'sm',
+    minHeight: 72
   }
 };
+const sizeFor = (theme, size) => {
+  const tokens = {
+    ...SIZE_FALLBACK[size],
+    ...(theme.components.listItem?.[size] ?? {})
+  };
+  return {
+    paddingVertical: theme.spacing[tokens.paddingVertical],
+    titleSize: theme.typography.fontSize[tokens.titleFontSize],
+    subtitleSize: theme.typography.fontSize[tokens.subtitleFontSize],
+    minHeight: tokens.minHeight
+  };
+};
 const Chevron = ({
   color
 }) => /*#__PURE__*/_jsx(Text, {
@@ -101,7 +107,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
       children: [/*#__PURE__*/_jsx(Text, {
         style: [styles.title, {
           fontSize: sz.titleSize,
-          fontWeight: theme.typography.fontWeight.medium,
+          ...fontFor(theme, 'medium'),
           color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
         }],
         numberOfLines: 1,
@@ -232,11 +238,11 @@ const buildStyles = theme => StyleSheet.create({
   },
   subtitle: {
     marginTop: 2,
-    fontWeight: theme.typography.fontWeight.normal
+    ...fontFor(theme, 'normal')
   },
   description: {
     marginTop: 2,
-    fontWeight: theme.typography.fontWeight.normal
+    ...fontFor(theme, 'normal')
   }
 });
 export { ListItem };

package/lib/module/components/OTPInput/OTPInput.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -52,7 +52,10 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.otpInput?.[size] ?? {})
+  };
   const inputsRef = useRef([]);
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const previousErrorRef = useRef(null);
@@ -297,7 +300,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
                 style: [styles.input, {
                   fontSize: sizeStyles.fontSize,
                   color: theme.colors.text.primary,
-                  fontWeight: theme.typography.fontWeight.semibold
+                  ...fontFor(theme, 'semibold')
                 }, textStyle]
               }), secure && isFilled ? /*#__PURE__*/_jsx(View, {
                 pointerEvents: "none",
@@ -306,7 +309,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
                   style: [{
                     fontSize: sizeStyles.fontSize,
                     color: theme.colors.text.primary,
-                    fontWeight: theme.typography.fontWeight.semibold
+                    ...fontFor(theme, 'semibold')
                   }, textStyle],
                   children: display
                 })

package/lib/module/components/Radio/Radio.js

@@ -56,10 +56,11 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   const selected = ctx ? ctx.selectedValue === value : !!selectedProp;
   const disabled = ctx ? ctx.disabled || disabledProp : disabledProp;
   const fillColor = toneColor(theme, tone);
-  const {
-    outer,
-    inner
-  } = sizeMap[size];
+  const sizeOverrides = theme.components.radio?.[size];
+  const outer = sizeOverrides?.outer ?? sizeMap[size].outer;
+  const inner = sizeOverrides?.inner ?? sizeMap[size].inner;
+  const radioBorderWidth = theme.components.radio?.borderWidth ?? 1.5;
+  const radioLabelGap = theme.components.radio?.labelGap ?? 10;
   const progress = useRef(new Animated.Value(selected ? 1 : 0)).current;
   useEffect(() => {
     Animated.spring(progress, {
@@ -108,6 +109,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       style: [styles.outer, {
         width: outer,
         height: outer,
+        borderWidth: radioBorderWidth,
         borderRadius: outer / 2,
         borderColor
       }, circleStyle],
@@ -125,6 +127,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       })
     }), label ? /*#__PURE__*/_jsx(Text, {
       style: [styles.label, {
+        marginLeft: radioLabelGap,
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
         fontSize: theme.typography.fontSize.base
       }],
@@ -140,13 +143,11 @@ const buildStyles = _theme => StyleSheet.create({
     alignItems: 'center'
   },
   outer: {
-    borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center'
   },
   inner: {},
   label: {
-    marginLeft: 10,
     flexShrink: 1
   }
 });

package/lib/module/components/SearchBar/SearchBar.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { useDebounce } from "../../hooks/useDebounce.js";
 import { AppIcon } from "../AppIcon/index.js";
@@ -53,7 +53,11 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   } = props;
   const theme = useTheme();
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.searchBar?.[size] ?? {})
+  };
+  const cancelWidth = theme.components.searchBar?.cancelButtonWidth ?? CANCEL_WIDTH;
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const [isFocused, setIsFocused] = useState(false);
   const [internalValue, setInternalValue] = useState(value);
@@ -122,7 +126,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   // Container shrinks left to make room for cancel button on right.
   const cancelTranslateX = cancelAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [CANCEL_WIDTH, 0]
+    outputRange: [cancelWidth, 0]
   });
   const cancelOpacity = cancelAnim;
   return /*#__PURE__*/_jsxs(View, {
@@ -139,7 +143,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
         opacity: disabled ? 0.55 : 1,
         marginRight: cancelAnim.interpolate({
           inputRange: [0, 1],
-          outputRange: [0, CANCEL_WIDTH + theme.spacing.sm]
+          outputRange: [0, cancelWidth + theme.spacing.sm]
         })
       }],
       accessibilityRole: "search",
@@ -194,7 +198,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     }), showCancel ? /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: showCancelButton ? 'auto' : 'none',
       style: [styles.cancelWrap, {
-        width: CANCEL_WIDTH,
+        width: cancelWidth,
         transform: [{
           translateX: cancelTranslateX
         }],
@@ -210,7 +214,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
           style: [styles.cancelText, {
             color: theme.colors.primary,
             fontSize: sizeStyles.fontSize,
-            fontWeight: theme.typography.fontWeight.medium
+            ...fontFor(theme, 'medium')
           }],
           numberOfLines: 1,
           children: cancelLabel

package/lib/module/components/Switch/Switch.js

@@ -48,6 +48,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     label,
     accessibilityLabel,
     haptic = 'selection',
+    bounce = false,
     style,
     trackStyle,
     thumbStyle,
@@ -55,7 +56,11 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   } = props;
   const theme = useTheme();
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.switch?.[size] ?? {})
+  };
+  const switchThumbColor = theme.components.switch?.thumbColor ?? '#FFFFFF';
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const offTrackColor = theme.mode === 'dark' ? theme.colors.secondary : theme.colors.surface.disabled;
   const onTrackColor = toneColor(theme, tone);
@@ -88,6 +93,28 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     inputRange: [0, 1],
     outputRange: [offTrackColor, onTrackColor]
   });
+  const bounceScale = useRef(new Animated.Value(1)).current;
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (!bounce) return;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    Animated.sequence([Animated.spring(bounceScale, {
+      toValue: 1.15,
+      damping: 10,
+      stiffness: 220,
+      mass: 1,
+      useNativeDriver: true
+    }), Animated.spring(bounceScale, {
+      toValue: 1,
+      damping: 14,
+      stiffness: 240,
+      mass: 1,
+      useNativeDriver: true
+    })]).start();
+  }, [value, bounce, bounceScale]);
   const handlePress = event => {
     if (disabled) return;
     if (haptic !== false) triggerHaptic(haptic);
@@ -122,11 +149,14 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       }, trackStyle],
       children: /*#__PURE__*/_jsx(Animated.View, {
         style: [styles.thumb, theme.shadows.sm, {
+          backgroundColor: switchThumbColor,
           width: sizeStyles.thumbSize,
           height: sizeStyles.thumbSize,
           borderRadius: sizeStyles.thumbSize / 2,
           transform: [{
             translateX
+          }, {
+            scale: bounceScale
           }]
         }, thumbStyle]
       })
@@ -155,7 +185,6 @@ const buildStyles = _theme => StyleSheet.create({
     justifyContent: 'center'
   },
   thumb: {
-    backgroundColor: '#FFFFFF',
     position: 'absolute',
     top: 2
   },

package/lib/module/components/Toast/Toast.js

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, PanResponder, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SWIPE_DISMISS_THRESHOLD = 80;
 const SWIPE_VELOCITY_THRESHOLD = 0.5;
@@ -18,6 +18,11 @@ const Toast = ({
   const position = toast.position ?? 'bottom';
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const tint = useMemo(() => tintFor(theme, variant), [theme, variant]);
+  const toastTokens = theme.components.toast;
+  const iconCircleSize = toastTokens?.iconCircleSize ?? 28;
+  const iconCircleBorderRadius = toastTokens?.iconCircleBorderRadius ?? 14;
+  const iconGlyphFontSize = toastTokens?.iconGlyphFontSize ?? 16;
+  const tintBarWidth = toastTokens?.tintBarWidth ?? 4;
   const enterFrom = position === 'top' ? -120 : 120;
   const translateY = useRef(new Animated.Value(enterFrom)).current;
   const translateX = useRef(new Animated.Value(0)).current;
@@ -107,11 +112,15 @@ const Toast = ({
     if (!glyph) return null;
     return /*#__PURE__*/_jsx(View, {
       style: [styles.iconCircle, {
+        width: iconCircleSize,
+        height: iconCircleSize,
+        borderRadius: iconCircleBorderRadius,
         backgroundColor: tint + '22'
       }],
       children: /*#__PURE__*/_jsx(Text, {
         style: [styles.iconGlyph, {
-          color: tint
+          color: tint,
+          fontSize: iconGlyphFontSize
         }],
         accessible: false,
         children: glyph
@@ -138,9 +147,10 @@ const Toast = ({
       }, {
         scale: stackScale
       }]
-    }],
+    }, toast.style],
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.tintBar, {
+        width: tintBarWidth,
         backgroundColor: tint
       }]
     }), /*#__PURE__*/_jsxs(View, {
@@ -151,8 +161,8 @@ const Toast = ({
           style: [styles.message, {
             color: theme.colors.text.primary,
             fontSize: theme.typography.fontSize.base,
-            fontWeight: theme.typography.fontWeight.semibold
-          }],
+            ...fontFor(theme, 'semibold')
+          }, toast.textStyle],
           numberOfLines: 2,
           children: toast.message
         }), toast.description ? /*#__PURE__*/_jsx(Text, {
@@ -176,7 +186,7 @@ const Toast = ({
           style: {
             color: tint,
             fontSize: theme.typography.fontSize.sm,
-            fontWeight: theme.typography.fontWeight.semibold
+            ...fontFor(theme, 'semibold')
           },
           numberOfLines: 1,
           children: toast.action.label
@@ -224,8 +234,7 @@ const buildStyles = _theme => StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0,
-    bottom: 0,
-    width: 4
+    bottom: 0
   },
   row: {
     flexDirection: 'row',
@@ -233,15 +242,11 @@ const buildStyles = _theme => StyleSheet.create({
     paddingLeft: 8
   },
   iconCircle: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 12
   },
   iconGlyph: {
-    fontSize: 16,
     fontWeight: '700',
     lineHeight: 18
   },

package/lib/module/theme/Gradient.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Render a linear gradient using `react-native-linear-gradient` when available.
+ *
+ * The dep is OPTIONAL — apps that never use gradients don't need it installed.
+ * If `<Gradient>` (or any component that accepts a `gradient` prop) is reached
+ * without the package present, we fall back to a flat View using the first
+ * colour and emit a one-time dev warning so the omission is loud but
+ * non-fatal.
+ */
+let LinearGradientImpl = null;
+let warned = false;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  LinearGradientImpl = require('react-native-linear-gradient').default;
+} catch {
+  // Optional peer; resolved lazily by consumers that need gradients.
+}
+export const Gradient = ({
+  gradient,
+  style,
+  children
+}) => {
+  if (LinearGradientImpl) {
+    return /*#__PURE__*/_jsx(LinearGradientImpl, {
+      colors: gradient.colors,
+      locations: gradient.locations,
+      start: gradient.start,
+      end: gradient.end,
+      style: style,
+      children: children
+    });
+  }
+  if (__DEV__ && !warned) {
+    warned = true;
+    console.warn('[@webority-technologies/mobile] gradient prop set but react-native-linear-gradient is not installed. ' + 'Run `npm install react-native-linear-gradient` to enable.');
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      backgroundColor: gradient.colors[0]
+    }, style],
+    children: children
+  });
+};
+export const isGradientAvailable = () => LinearGradientImpl != null;
+//# sourceMappingURL=Gradient.js.map

package/lib/module/theme/index.js

@@ -45,4 +45,6 @@ export const subscribeTheme = callback => {
 export { ThemeProvider, useTheme, useThemeMode } from "./ThemeContext.js";
 export { lightTheme, darkTheme } from "./tokens.js";
 export { mergeTheme } from "./merge.js";
+export { fontFor } from "./textStyle.js";
+export { Gradient, isGradientAvailable } from "./Gradient.js";
 //# sourceMappingURL=index.js.map

package/lib/module/theme/textStyle.js

@@ -0,0 +1,32 @@
+"use strict";
+
+const FAMILY_KEY = {
+  normal: 'regular',
+  medium: 'medium',
+  semibold: 'semibold',
+  bold: 'bold'
+};
+
+/**
+ * Resolve text-weight style for the active theme.
+ *
+ * When the consumer registers a brand `theme.typography.fontFamily.<weight>`,
+ * we set `fontFamily` and leave `fontWeight` undefined — RN can't combine the
+ * two reliably across iOS/Android once a custom face is in play, so the brand
+ * file controls the weight glyph itself. Falls back to `fontWeight` when no
+ * brand font is registered for that weight.
+ *
+ * Note: the fontWeight scale uses `normal` while FontFamilyScale uses
+ * `regular` (the conventional font-name suffix). The helper maps between
+ * them transparently.
+ */
+export const fontFor = (theme, weight) => {
+  const family = theme.typography.fontFamily?.[FAMILY_KEY[weight]];
+  if (family) return {
+    fontFamily: family
+  };
+  return {
+    fontWeight: theme.typography.fontWeight[weight]
+  };
+};
+//# sourceMappingURL=textStyle.js.map