@webority-technologies/mobile 0.0.7 → 0.0.8

package/lib/commonjs/components/OTPInput/OTPInput.js

@@ -57,7 +57,10 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.otpInput?.[size] ?? {})
+  };
   const inputsRef = (0, _react.useRef)([]);
   const [focusedIndex, setFocusedIndex] = (0, _react.useState)(-1);
   const previousErrorRef = (0, _react.useRef)(null);
@@ -302,7 +305,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
                 style: [styles.input, {
                   fontSize: sizeStyles.fontSize,
                   color: theme.colors.text.primary,
-                  fontWeight: theme.typography.fontWeight.semibold
+                  ...(0, _index.fontFor)(theme, 'semibold')
                 }, textStyle]
               }), secure && isFilled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 pointerEvents: "none",
@@ -311,7 +314,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
                   style: [{
                     fontSize: sizeStyles.fontSize,
                     color: theme.colors.text.primary,
-                    fontWeight: theme.typography.fontWeight.semibold
+                    ...(0, _index.fontFor)(theme, 'semibold')
                   }, textStyle],
                   children: display
                 })

package/lib/commonjs/components/Radio/Radio.js

@@ -62,10 +62,11 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)(new _reactNative.Animated.Value(selected ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.spring(progress, {
@@ -114,6 +115,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       style: [styles.outer, {
         width: outer,
         height: outer,
+        borderWidth: radioBorderWidth,
         borderRadius: outer / 2,
         borderColor
       }, circleStyle],
@@ -131,6 +133,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       })
     }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.label, {
+        marginLeft: radioLabelGap,
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
         fontSize: theme.typography.fontSize.base
       }],
@@ -146,13 +149,11 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     alignItems: 'center'
   },
   outer: {
-    borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center'
   },
   inner: {},
   label: {
-    marginLeft: 10,
     flexShrink: 1
   }
 });

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -58,7 +58,11 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     ...rest
   } = props;
   const theme = (0, _index.useTheme)();
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.searchBar?.[size] ?? {})
+  };
+  const cancelWidth = theme.components.searchBar?.cancelButtonWidth ?? CANCEL_WIDTH;
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [internalValue, setInternalValue] = (0, _react.useState)(value);
@@ -127,7 +131,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
   // 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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -144,7 +148,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
         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",
@@ -199,7 +203,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     }), showCancel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       pointerEvents: showCancelButton ? 'auto' : 'none',
       style: [styles.cancelWrap, {
-        width: CANCEL_WIDTH,
+        width: cancelWidth,
         transform: [{
           translateX: cancelTranslateX
         }],
@@ -215,7 +219,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
           style: [styles.cancelText, {
             color: theme.colors.primary,
             fontSize: sizeStyles.fontSize,
-            fontWeight: theme.typography.fontWeight.medium
+            ...(0, _index.fontFor)(theme, 'medium')
           }],
           numberOfLines: 1,
           children: cancelLabel

package/lib/commonjs/components/Switch/Switch.js

@@ -53,6 +53,7 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     label,
     accessibilityLabel,
     haptic = 'selection',
+    bounce = false,
     style,
     trackStyle,
     thumbStyle,
@@ -60,7 +61,11 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     ...rest
   } = props;
   const theme = (0, _index.useTheme)();
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.switch?.[size] ?? {})
+  };
+  const switchThumbColor = theme.components.switch?.thumbColor ?? '#FFFFFF';
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const offTrackColor = theme.mode === 'dark' ? theme.colors.secondary : theme.colors.surface.disabled;
   const onTrackColor = toneColor(theme, tone);
@@ -93,6 +98,28 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     inputRange: [0, 1],
     outputRange: [offTrackColor, onTrackColor]
   });
+  const bounceScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const isFirstRender = (0, _react.useRef)(true);
+  (0, _react.useEffect)(() => {
+    if (!bounce) return;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    _reactNative.Animated.sequence([_reactNative.Animated.spring(bounceScale, {
+      toValue: 1.15,
+      damping: 10,
+      stiffness: 220,
+      mass: 1,
+      useNativeDriver: true
+    }), _reactNative.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) (0, _hapticUtils.triggerHaptic)(haptic);
@@ -127,11 +154,14 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       }, trackStyle],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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]
       })
@@ -160,7 +190,6 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     justifyContent: 'center'
   },
   thumb: {
-    backgroundColor: '#FFFFFF',
     position: 'absolute',
     top: 2
   },

package/lib/commonjs/components/Toast/Toast.js

@@ -23,6 +23,11 @@ const Toast = ({
   const position = toast.position ?? 'bottom';
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const tint = (0, _react.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 = (0, _react.useRef)(new _reactNative.Animated.Value(enterFrom)).current;
   const translateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
@@ -112,11 +117,15 @@ const Toast = ({
     if (!glyph) return null;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.iconCircle, {
+        width: iconCircleSize,
+        height: iconCircleSize,
+        borderRadius: iconCircleBorderRadius,
         backgroundColor: tint + '22'
       }],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.iconGlyph, {
-          color: tint
+          color: tint,
+          fontSize: iconGlyphFontSize
         }],
         accessible: false,
         children: glyph
@@ -143,9 +152,10 @@ const Toast = ({
       }, {
         scale: stackScale
       }]
-    }],
+    }, toast.style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.tintBar, {
+        width: tintBarWidth,
         backgroundColor: tint
       }]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -156,8 +166,8 @@ const Toast = ({
           style: [styles.message, {
             color: theme.colors.text.primary,
             fontSize: theme.typography.fontSize.base,
-            fontWeight: theme.typography.fontWeight.semibold
-          }],
+            ...(0, _index.fontFor)(theme, 'semibold')
+          }, toast.textStyle],
           numberOfLines: 2,
           children: toast.message
         }), toast.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -181,7 +191,7 @@ const Toast = ({
           style: {
             color: tint,
             fontSize: theme.typography.fontSize.sm,
-            fontWeight: theme.typography.fontWeight.semibold
+            ...(0, _index.fontFor)(theme, 'semibold')
           },
           numberOfLines: 1,
           children: toast.action.label
@@ -230,8 +240,7 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0,
-    bottom: 0,
-    width: 4
+    bottom: 0
   },
   row: {
     flexDirection: 'row',
@@ -239,15 +248,11 @@ const buildStyles = _theme => _reactNative.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/commonjs/theme/Gradient.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isGradientAvailable = exports.Gradient = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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.
+}
+const Gradient = ({
+  gradient,
+  style,
+  children
+}) => {
+  if (LinearGradientImpl) {
+    return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      backgroundColor: gradient.colors[0]
+    }, style],
+    children: children
+  });
+};
+exports.Gradient = Gradient;
+const isGradientAvailable = () => LinearGradientImpl != null;
+exports.isGradientAvailable = isGradientAvailable;
+//# sourceMappingURL=Gradient.js.map

package/lib/commonjs/theme/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Gradient", {
+  enumerable: true,
+  get: function () {
+    return _Gradient.Gradient;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () {
@@ -15,7 +21,19 @@ Object.defineProperty(exports, "darkTheme", {
     return _tokens.darkTheme;
   }
 });
+Object.defineProperty(exports, "fontFor", {
+  enumerable: true,
+  get: function () {
+    return _textStyle.fontFor;
+  }
+});
 exports.getTheme = exports.getColorMode = void 0;
+Object.defineProperty(exports, "isGradientAvailable", {
+  enumerable: true,
+  get: function () {
+    return _Gradient.isGradientAvailable;
+  }
+});
 Object.defineProperty(exports, "lightTheme", {
   enumerable: true,
   get: function () {
@@ -44,6 +62,8 @@ Object.defineProperty(exports, "useThemeMode", {
 var _tokens = require("./tokens.js");
 var _merge = require("./merge.js");
 var _ThemeContext = require("./ThemeContext.js");
+var _textStyle = require("./textStyle.js");
+var _Gradient = require("./Gradient.js");
 let currentMode = 'light';
 let currentTheme = _tokens.lightTheme;
 let lightOverridesGlobal;

package/lib/commonjs/theme/textStyle.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fontFor = void 0;
+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.
+ */
+const fontFor = (theme, weight) => {
+  const family = theme.typography.fontFamily?.[FAMILY_KEY[weight]];
+  if (family) return {
+    fontFamily: family
+  };
+  return {
+    fontWeight: theme.typography.fontWeight[weight]
+  };
+};
+exports.fontFor = fontFor;
+//# sourceMappingURL=textStyle.js.map

package/lib/commonjs/theme/tokens.js

@@ -54,6 +54,260 @@ const radius = {
   '2xl': 28,
   full: 9999
 };
+const components = {
+  button: {
+    xs: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      minHeight: 28,
+      fontSize: 12,
+      borderRadius: 8
+    },
+    sm: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      minHeight: 34,
+      fontSize: 13,
+      borderRadius: 10
+    },
+    md: {
+      paddingHorizontal: 16,
+      paddingVertical: 9,
+      minHeight: 42,
+      fontSize: 15,
+      borderRadius: 12
+    },
+    lg: {
+      paddingHorizontal: 20,
+      paddingVertical: 12,
+      minHeight: 50,
+      fontSize: 16,
+      borderRadius: 14
+    },
+    xl: {
+      paddingHorizontal: 24,
+      paddingVertical: 14,
+      minHeight: 58,
+      fontSize: 17,
+      borderRadius: 16
+    }
+  },
+  input: {
+    sm: {
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      minHeight: 38,
+      multilineMinHeight: 72,
+      fontSize: 13,
+      borderRadius: 10,
+      iconSize: 16
+    },
+    md: {
+      paddingHorizontal: 14,
+      paddingVertical: 11,
+      minHeight: 46,
+      multilineMinHeight: 92,
+      fontSize: 15,
+      borderRadius: 12,
+      iconSize: 18
+    },
+    lg: {
+      paddingHorizontal: 16,
+      paddingVertical: 14,
+      minHeight: 54,
+      multilineMinHeight: 110,
+      fontSize: 16,
+      borderRadius: 14,
+      iconSize: 20
+    }
+  },
+  searchBar: {
+    sm: {
+      height: 36,
+      paddingHorizontal: 10,
+      fontSize: 13,
+      iconSize: 16,
+      gap: 6
+    },
+    md: {
+      height: 44,
+      paddingHorizontal: 12,
+      fontSize: 15,
+      iconSize: 18,
+      gap: 8
+    },
+    lg: {
+      height: 52,
+      paddingHorizontal: 14,
+      fontSize: 16,
+      iconSize: 20,
+      gap: 10
+    },
+    cancelButtonWidth: 72
+  },
+  emptyState: {
+    sm: {
+      iconSize: 48,
+      titleFontSize: 'lg',
+      descriptionFontSize: 'sm',
+      paddingVertical: 'lg'
+    },
+    md: {
+      iconSize: 64,
+      titleFontSize: 'xl',
+      descriptionFontSize: 'base',
+      paddingVertical: 'xl'
+    },
+    lg: {
+      iconSize: 80,
+      titleFontSize: '2xl',
+      descriptionFontSize: 'base',
+      paddingVertical: '2xl'
+    }
+  },
+  listItem: {
+    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
+    }
+  },
+  badge: {
+    sm: {
+      fontSize: 10,
+      minWidth: 16,
+      height: 16,
+      paddingHorizontal: 5,
+      dotSize: 8
+    },
+    md: {
+      fontSize: 11,
+      minWidth: 20,
+      height: 20,
+      paddingHorizontal: 6,
+      dotSize: 10
+    },
+    borderWidth: 1.5,
+    anchorOffset: 4
+  },
+  chip: {
+    sm: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      fontSize: 12,
+      minHeight: 26,
+      closeSize: 16,
+      closeFontSize: 12,
+      gap: 6
+    },
+    md: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      fontSize: 13,
+      minHeight: 32,
+      closeSize: 18,
+      closeFontSize: 13,
+      gap: 8
+    }
+  },
+  checkbox: {
+    sm: {
+      boxSize: 16
+    },
+    md: {
+      boxSize: 20
+    },
+    lg: {
+      boxSize: 24
+    },
+    borderWidth: 1.5,
+    labelGap: 10
+  },
+  radio: {
+    sm: {
+      outer: 16,
+      inner: 8
+    },
+    md: {
+      outer: 20,
+      inner: 10
+    },
+    lg: {
+      outer: 24,
+      inner: 12
+    },
+    borderWidth: 1.5,
+    labelGap: 10
+  },
+  switch: {
+    sm: {
+      trackWidth: 42,
+      trackHeight: 26,
+      thumbSize: 22,
+      padding: 2
+    },
+    md: {
+      trackWidth: 51,
+      trackHeight: 31,
+      thumbSize: 27,
+      padding: 2
+    },
+    lg: {
+      trackWidth: 60,
+      trackHeight: 36,
+      thumbSize: 32,
+      padding: 2
+    },
+    thumbColor: '#FFFFFF'
+  },
+  otpInput: {
+    sm: {
+      cell: 36,
+      fontSize: 16,
+      borderRadius: 8,
+      gap: 8
+    },
+    md: {
+      cell: 48,
+      fontSize: 20,
+      borderRadius: 10,
+      gap: 10
+    },
+    lg: {
+      cell: 56,
+      fontSize: 24,
+      borderRadius: 12,
+      gap: 12
+    }
+  },
+  dialog: {
+    iconWrapperSize: 48,
+    iconWrapperBorderRadius: 24,
+    actionButtonMinHeight: 44
+  },
+  toast: {
+    iconCircleSize: 28,
+    iconCircleBorderRadius: 14,
+    iconGlyphFontSize: 16,
+    tintBarWidth: 4
+  },
+  formField: {
+    inlineLabelWidth: '35%'
+  }
+};
 const motion = {
   duration: {
     instant: 80,
@@ -262,7 +516,9 @@ const lightTheme = exports.lightTheme = {
   spacing,
   radius,
   shadows: lightShadows,
-  motion
+  motion,
+  components,
+  gradients: {}
 };
 const darkTheme = exports.darkTheme = {
   mode: 'dark',
@@ -314,6 +570,8 @@ const darkTheme = exports.darkTheme = {
   spacing,
   radius,
   shadows: darkShadows,
-  motion
+  motion,
+  components,
+  gradients: {}
 };
 //# sourceMappingURL=tokens.js.map