@webority-technologies/mobile 0.0.7 → 0.0.9

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -41,8 +41,8 @@ const Tooltip = props => {
     height: 0
   });
   const wrapperRef = (0, _react.useRef)(null);
-  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(visible ? 1 : 0.85)).current;
-  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(visible ? 1 : 0)).current;
+  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(visible ? 1 : 0.85)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(visible ? 1 : 0)).current;
   const autoHideTimer = (0, _react.useRef)(null);
   const didMount = (0, _react.useRef)(false);
   const setVisible = (0, _react.useCallback)(next => {

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/animatedValue.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAnimatedValue = void 0;
+var _reactNative = require("react-native");
+/**
+ * Create an `Animated.Value` that survives RN 0.85's dev-mode prop deepFreeze.
+ *
+ * RN's Fabric renderer deep-freezes prop trees on host components. If an
+ * `Animated.Value` is reachable from a `style` prop via interpolation chains
+ * (the `_parent` ref on `AnimatedInterpolation` nodes), the recursive freeze
+ * converts the value's `_animation` slot into a throwing setter — the next
+ * `Animated.timing(v).start()` then crashes with
+ *   "_animation: object that is meant to be immutable".
+ *
+ * Sealing the value at construction makes `Object.isSealed(v) === true`,
+ * which causes `deepFreezeAndThrowOnMutationInDev` to skip-and-return at
+ * its top guard. Existing-property mutation (`_animation`, `_value`,
+ * `_listeners`, `_tracking`) keeps working — seal only blocks adding NEW
+ * properties, and `Animated.Value` doesn't add any post-construction.
+ *
+ * Use everywhere the library would otherwise call `new Animated.Value(...)`.
+ */
+const createAnimatedValue = (initial, config) => Object.seal(new _reactNative.Animated.Value(initial, config));
+exports.createAnimatedValue = createAnimatedValue;
+//# sourceMappingURL=animatedValue.js.map

package/lib/commonjs/theme/index.js

@@ -3,19 +3,43 @@
 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 () {
     return _ThemeContext.ThemeProvider;
   }
 });
+Object.defineProperty(exports, "createAnimatedValue", {
+  enumerable: true,
+  get: function () {
+    return _animatedValue.createAnimatedValue;
+  }
+});
 Object.defineProperty(exports, "darkTheme", {
   enumerable: true,
   get: function () {
     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 +68,9 @@ 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 _animatedValue = require("./animatedValue.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

package/lib/module/components/Accordion/Accordion.js

@@ -2,7 +2,7 @@
 
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, LayoutAnimation, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -98,9 +98,9 @@ const Accordion = props => {
   const groupExpanded = group && id ? group.isExpanded(id) : null;
   const expanded = groupExpanded !== null ? groupExpanded : isControlled ? !!expandedProp : internalExpanded;
   const [measuredHeight, setMeasuredHeight] = useState(null);
-  const heightAnim = useRef(new Animated.Value(expanded ? 1 : 0)).current;
-  const opacityAnim = useRef(new Animated.Value(expanded ? 1 : 0)).current;
-  const rotateAnim = useRef(new Animated.Value(expanded ? 1 : 0)).current;
+  const heightAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
+  const opacityAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
+  const rotateAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
   const lastExpandedRef = useRef(expanded);
   useEffect(() => {
     // Skip animation when state matches the previous value (e.g. on mount).

package/lib/module/components/Avatar/Avatar.js

@@ -2,7 +2,7 @@
 
 import React, { Children, cloneElement, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -176,7 +176,7 @@ const AvatarGroupItem = ({
   borderWidth,
   children
 }) => {
-  const opacity = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
     Animated.timing(opacity, {
       toValue: 1,

package/lib/module/components/Badge/Badge.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const toneFor = (theme, tone) => {
@@ -56,28 +56,29 @@ const sizeMap = {
     dot: 10
   }
 };
-const anchorPosition = anchor => {
+const anchorPosition = (anchor, offset) => {
+  const o = -offset;
   switch (anchor) {
     case 'topLeft':
       return {
-        top: -4,
-        left: -4
+        top: o,
+        left: o
       };
     case 'bottomRight':
       return {
-        bottom: -4,
-        right: -4
+        bottom: o,
+        right: o
       };
     case 'bottomLeft':
       return {
-        bottom: -4,
-        left: -4
+        bottom: o,
+        left: o
       };
     case 'topRight':
     default:
       return {
-        top: -4,
-        right: -4
+        top: o,
+        right: o
       };
   }
 };
@@ -110,10 +111,19 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const tones = useMemo(() => toneFor(theme, tone), [theme, tone]);
-  const sz = sizeMap[size];
+  const overrides = theme.components.badge?.[size];
+  const sz = {
+    fontSize: overrides?.fontSize ?? sizeMap[size].fontSize,
+    minWidth: overrides?.minWidth ?? sizeMap[size].minWidth,
+    height: overrides?.height ?? sizeMap[size].height,
+    paddingH: overrides?.paddingHorizontal ?? sizeMap[size].paddingH,
+    dot: overrides?.dotSize ?? sizeMap[size].dot
+  };
+  const badgeBorderWidth = theme.components.badge?.borderWidth ?? 1.5;
+  const badgeAnchorOffset = theme.components.badge?.anchorOffset ?? 4;
   const formatted = variant === 'dot' ? null : formatValue(value, max);
   const shouldRender = !invisible && (variant === 'dot' || formatted !== null);
-  const pulseScale = useRef(new Animated.Value(1)).current;
+  const pulseScale = useRef(createAnimatedValue(1)).current;
   useEffect(() => {
     if (!pulse || !shouldRender) {
       pulseScale.setValue(1);
@@ -156,9 +166,9 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       }]
     }, children ? {
       position: 'absolute',
-      borderWidth: 1.5,
+      borderWidth: badgeBorderWidth,
       borderColor: theme.colors.background.elevated,
-      ...anchorPosition(anchor)
+      ...anchorPosition(anchor, badgeAnchorOffset)
     } : null, badgeStyle],
     accessible: true,
     accessibilityRole: a11yRole,
@@ -167,7 +177,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       style: [styles.text, {
         color: tones.text,
         fontSize: sz.fontSize,
-        fontWeight: theme.typography.fontWeight.bold
+        ...fontFor(theme, 'bold')
       }, textStyle],
       numberOfLines: 1,
       allowFontScaling: false,

package/lib/module/components/Banner/Banner.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Banner = /*#__PURE__*/forwardRef((props, ref) => {
@@ -24,8 +24,8 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const tint = useMemo(() => tintFor(theme, variant), [theme, variant]);
-  const translateY = useRef(new Animated.Value(animateMount && visible ? -20 : 0)).current;
-  const opacity = useRef(new Animated.Value(animateMount && visible ? 0 : visible ? 1 : 0)).current;
+  const translateY = useRef(createAnimatedValue(animateMount && visible ? -20 : 0)).current;
+  const opacity = useRef(createAnimatedValue(animateMount && visible ? 0 : visible ? 1 : 0)).current;
   const [mounted, setMounted] = useState(visible);
   const isFirstRun = useRef(true);
   useEffect(() => {

package/lib/module/components/BottomNavigation/BottomNavigation.js

@@ -3,7 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_SIZE = 24;
@@ -58,7 +58,7 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
   const [tabWidth, setTabWidth] = React.useState(0);
-  const indicatorTranslateX = useRef(new Animated.Value(0)).current;
+  const indicatorTranslateX = useRef(createAnimatedValue(0)).current;
   const iconScales = useRef({});
 
   // Ensure each tab has a persistent scale value