@webority-technologies/mobile 0.0.7 → 0.0.9

package/lib/commonjs/components/Accordion/Accordion.js

@@ -104,9 +104,9 @@ const Accordion = props => {
   const groupExpanded = group && id ? group.isExpanded(id) : null;
   const expanded = groupExpanded !== null ? groupExpanded : isControlled ? !!expandedProp : internalExpanded;
   const [measuredHeight, setMeasuredHeight] = (0, _react.useState)(null);
-  const heightAnim = (0, _react.useRef)(new _reactNative.Animated.Value(expanded ? 1 : 0)).current;
-  const opacityAnim = (0, _react.useRef)(new _reactNative.Animated.Value(expanded ? 1 : 0)).current;
-  const rotateAnim = (0, _react.useRef)(new _reactNative.Animated.Value(expanded ? 1 : 0)).current;
+  const heightAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(expanded ? 1 : 0)).current;
+  const opacityAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(expanded ? 1 : 0)).current;
+  const rotateAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(expanded ? 1 : 0)).current;
   const lastExpandedRef = (0, _react.useRef)(expanded);
   (0, _react.useEffect)(() => {
     // Skip animation when state matches the previous value (e.g. on mount).

package/lib/commonjs/components/Avatar/Avatar.js

@@ -181,7 +181,7 @@ const AvatarGroupItem = ({
   borderWidth,
   children
 }) => {
-  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.timing(opacity, {
       toValue: 1,

package/lib/commonjs/components/Badge/Badge.js

@@ -61,28 +61,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
       };
   }
 };
@@ -115,10 +116,19 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   } = props;
   const theme = (0, _index.useTheme)();
   const tones = (0, _react.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 = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const pulseScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
   (0, _react.useEffect)(() => {
     if (!pulse || !shouldRender) {
       pulseScale.setValue(1);
@@ -161,9 +171,9 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.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,
@@ -172,7 +182,7 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       style: [styles.text, {
         color: tones.text,
         fontSize: sz.fontSize,
-        fontWeight: theme.typography.fontWeight.bold
+        ...(0, _index.fontFor)(theme, 'bold')
       }, textStyle],
       numberOfLines: 1,
       allowFontScaling: false,

package/lib/commonjs/components/Banner/Banner.js

@@ -29,8 +29,8 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const tint = (0, _react.useMemo)(() => tintFor(theme, variant), [theme, variant]);
-  const translateY = (0, _react.useRef)(new _reactNative.Animated.Value(animateMount && visible ? -20 : 0)).current;
-  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(animateMount && visible ? 0 : visible ? 1 : 0)).current;
+  const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(animateMount && visible ? -20 : 0)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(animateMount && visible ? 0 : visible ? 1 : 0)).current;
   const [mounted, setMounted] = (0, _react.useState)(visible);
   const isFirstRun = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {

package/lib/commonjs/components/BottomNavigation/BottomNavigation.js

@@ -63,7 +63,7 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
   const [tabWidth, setTabWidth] = _react.default.useState(0);
-  const indicatorTranslateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const indicatorTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const iconScales = (0, _react.useRef)({});
 
   // Ensure each tab has a persistent scale value

package/lib/commonjs/components/BottomSheet/BottomSheet.js

@@ -48,6 +48,7 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     enablePanDownToClose = true,
     enableBackdropPress = true,
     backdropOpacity = 0.5,
+    keyboardBehavior = 'none',
     handleIndicatorStyle,
     containerStyle,
     children,
@@ -240,12 +241,45 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     });
   }, [closedY, dragStartY, enablePanDownToClose, handleSnapEnd, minTopY, snapTargets, translateY]);
 
+  // ───────── Keyboard tracking ─────────
+  // keyboardOffset is added to translateY in sheetStyle so we don't disturb
+  // snap-point math. iOS gets keyboardWillShow/Hide (smoother), Android only
+  // emits keyboardDidShow/Hide.
+  const keyboardOffset = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    if (keyboardBehavior === 'none') return;
+    const showEvt = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvt = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const onShow = e => {
+      const h = e.endCoordinates?.height ?? 0;
+      keyboardOffset.value = (0, _reactNativeReanimated.withTiming)(-h, {
+        duration: 220
+      });
+    };
+    const onHide = () => {
+      keyboardOffset.value = (0, _reactNativeReanimated.withTiming)(0, {
+        duration: 220
+      });
+    };
+    const showSub = _reactNative.Keyboard.addListener(showEvt, onShow);
+    const hideSub = _reactNative.Keyboard.addListener(hideEvt, onHide);
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [keyboardBehavior, keyboardOffset]);
+
   // ───────── Animated styles ─────────
-  const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    transform: [{
-      translateY: translateY.value
-    }]
-  }));
+  const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    // Don't push past the screen top — keyboard offset is clamped to minTopY.
+    const yWithKb = translateY.value + keyboardOffset.value;
+    const clamped = yWithKb < minTopY ? minTopY : yWithKb;
+    return {
+      transform: [{
+        translateY: clamped
+      }]
+    };
+  });
   const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     // 0 opacity when sheet is closed, full backdropOpacity at minSnap height (and above).
     const closedAt = screenHeight;

package/lib/commonjs/components/Button/Button.js

@@ -26,6 +26,7 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     rightIcon,
     haptic = 'selection',
     rounded = false,
+    gradient,
     style,
     textStyle,
     pressAnimation = true,
@@ -45,9 +46,22 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     enabled: pressAnimation && isInteractive
   });
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.button?.[size] ?? {})
+  };
   const toneColors = (0, _react.useMemo)(() => toneFor(theme, tone), [theme, tone]);
   const variantStyles = (0, _react.useMemo)(() => variantFor(theme, variant, toneColors, disabled), [theme, variant, toneColors, disabled]);
+
+  // Resolve gradient: string token → theme.gradients[token]; literal passes through.
+  // Skipped when disabled (parity with disabled flat-color treatment).
+  const resolvedGradient = (0, _react.useMemo)(() => {
+    if (!gradient || disabled || variant !== 'solid') return null;
+    if (typeof gradient === 'string') {
+      return theme.gradients[gradient] ?? null;
+    }
+    return gradient;
+  }, [gradient, disabled, variant, theme.gradients]);
   const handlePress = event => {
     if (!isInteractive) return;
     if (haptic !== false) (0, _hapticUtils.triggerHaptic)(haptic);
@@ -69,7 +83,7 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         style: [styles.label, {
           color: variantStyles.textColor,
           fontSize: sizeStyles.fontSize,
-          fontWeight: theme.typography.fontWeight.semibold
+          ...(0, _index.fontFor)(theme, 'semibold')
         }, textStyle],
         numberOfLines: 1,
         children: title
@@ -85,7 +99,7 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         scale
       }]
     }, fullWidth ? styles.fullWidth : null],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
       ref: ref,
       onPress: handlePress,
       onPressIn: pressIn,
@@ -113,15 +127,20 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         paddingVertical: sizeStyles.paddingVertical,
         minHeight: sizeStyles.minHeight,
         borderRadius: rounded ? theme.radius.full : sizeStyles.borderRadius,
-        backgroundColor: variantStyles.backgroundColor,
+        // Hide solid bg when a gradient layer covers it; preserve outline borders.
+        backgroundColor: resolvedGradient ? 'transparent' : variantStyles.backgroundColor,
         borderWidth: variantStyles.borderWidth,
         borderColor: variantStyles.borderColor,
-        opacity: !isInteractive ? 0.55 : 1
+        opacity: !isInteractive ? 0.55 : 1,
+        overflow: resolvedGradient ? 'hidden' : undefined
       }, pressed && variant !== 'solid' ? {
         backgroundColor: theme.colors.surface.pressed
       } : null, fullWidth ? styles.fullWidth : null, style],
       ...rest,
-      children: content
+      children: [resolvedGradient ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Gradient, {
+        gradient: resolvedGradient,
+        style: _reactNative.StyleSheet.absoluteFill
+      }) : null, content]
     })
   });
 });

package/lib/commonjs/components/Card/Card.js

@@ -34,6 +34,7 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     imageAspectRatio,
     imageOverlay,
     loading = false,
+    gradient,
     onPress,
     accessibilityLabel,
     accessibilityHint,
@@ -54,6 +55,11 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const hasImage = Boolean(imageSource);
   const contentPadding = theme.spacing[paddingMap[padding]];
+  const resolvedGradient = (0, _react.useMemo)(() => {
+    if (!gradient) return null;
+    if (typeof gradient === 'string') return theme.gradients[gradient] ?? null;
+    return gradient;
+  }, [gradient, theme.gradients]);
   const containerStyle = (0, _react.useMemo)(() => {
     const base = {
       borderRadius: theme.radius[radius],
@@ -113,7 +119,7 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
       children: footer
     }) : null]
   });
-  const content = hasImage ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  const baseContent = hasImage ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.imageWrapper,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
@@ -134,6 +140,12 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
       children: innerContent
     })]
   }) : innerContent;
+  const content = resolvedGradient ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Gradient, {
+      gradient: resolvedGradient,
+      style: _reactNative.StyleSheet.absoluteFillObject
+    }), baseContent]
+  }) : baseContent;
   let rendered;
   if (isInteractive) {
     const handlePress = event => {

package/lib/commonjs/components/Carousel/Carousel.js

@@ -65,7 +65,7 @@ const CarouselInner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const resolvedItemWidth = itemWidth === 'screen' ? containerWidth : itemWidth;
   const slideStride = resolvedItemWidth + spacing;
   const flatListRef = (0, _react.useRef)(null);
-  const scrollX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const scrollX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const initialIndex = clamp(isControlled ? controlledIndex : defaultIndex, 0, Math.max(0, data.length - 1));
   const [currentIndex, setCurrentIndex] = (0, _react.useState)(initialIndex);
 
@@ -386,7 +386,7 @@ const ThumbnailItem = ({
   onPress,
   theme
 }) => {
-  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(isActive ? 1.1 : 1)).current;
+  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(isActive ? 1.1 : 1)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.spring(scale, {
       toValue: isActive ? 1.1 : 1,

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -46,10 +46,12 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const boxSize = sizeMap[size];
+  const boxSize = theme.components.checkbox?.[size]?.boxSize ?? sizeMap[size];
+  const checkboxBorderWidth = theme.components.checkbox?.borderWidth ?? 1.5;
+  const checkboxLabelGap = theme.components.checkbox?.labelGap ?? 10;
   const fillColor = toneColor(theme, tone);
   const isActive = checked || indeterminate;
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(isActive ? 1 : 0)).current;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(isActive ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.spring(progress, {
       toValue: isActive ? 1 : 0,
@@ -98,6 +100,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
       style: [styles.box, {
         width: boxSize,
         height: boxSize,
+        borderWidth: checkboxBorderWidth,
         borderRadius: theme.radius.xs,
         borderColor,
         backgroundColor
@@ -128,6 +131,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
       })
     }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.label, {
+        marginLeft: checkboxLabelGap,
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
         fontSize: theme.typography.fontSize.base
       }],
@@ -143,7 +147,6 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     alignItems: 'center'
   },
   box: {
-    borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center'
   },
@@ -157,7 +160,6 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     includeFontPadding: false
   },
   label: {
-    marginLeft: 10,
     flexShrink: 1
   }
 });

package/lib/commonjs/components/Chip/Chip.js

@@ -118,7 +118,16 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     enabled: isPressable
   });
   const tones = (0, _react.useMemo)(() => toneFor(theme, tone), [theme, tone]);
-  const sz = sizeMap[size];
+  const overrides = theme.components.chip?.[size];
+  const sz = {
+    paddingH: overrides?.paddingHorizontal ?? sizeMap[size].paddingH,
+    paddingV: overrides?.paddingVertical ?? sizeMap[size].paddingV,
+    fontSize: overrides?.fontSize ?? sizeMap[size].fontSize,
+    minHeight: overrides?.minHeight ?? sizeMap[size].minHeight,
+    closeSize: overrides?.closeSize ?? sizeMap[size].closeSize,
+    closeFont: overrides?.closeFontSize ?? sizeMap[size].closeFont,
+    gap: overrides?.gap ?? sizeMap[size].gap
+  };
   const isFilled = variant === 'filled';
   const backgroundColor = (() => {
     if (selected) return isFilled ? tones.selectedBg : 'transparent';
@@ -158,7 +167,7 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
       style: [styles.label, {
         color: textColor,
         fontSize: sz.fontSize,
-        fontWeight: theme.typography.fontWeight.medium
+        ...(0, _index.fontFor)(theme, 'medium')
       }, textStyle],
       numberOfLines: 1,
       children: label ?? ' '
@@ -184,7 +193,7 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
         style: {
           color: textColor,
           fontSize: sz.closeFont,
-          fontWeight: theme.typography.fontWeight.bold,
+          ...(0, _index.fontFor)(theme, 'bold'),
           lineHeight: sz.closeFont + 2
         },
         allowFontScaling: false,

package/lib/commonjs/components/DatePicker/DatePicker.js

@@ -111,14 +111,14 @@ const DatePicker = props => {
   const [viewMode, setViewMode] = (0, _react.useState)('days');
 
   // Animations
-  const backdrop = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const sheet = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const monthSlide = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const monthFade = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const selectScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const viewFade = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const viewScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const headerScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const backdrop = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheet = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const monthSlide = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const monthFade = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const selectScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const viewFade = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const viewScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const headerScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
 
   // Sync anchor / pending when value prop changes.
   (0, _react.useEffect)(() => {

package/lib/commonjs/components/DateRangePicker/DateRangePicker.js

@@ -96,10 +96,10 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
   const [pendingEnd, setPendingEnd] = (0, _react.useState)(value.end ? startOfDay(value.end) : null);
 
   // Animations
-  const backdrop = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const sheet = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const monthSlide = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const monthFade = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const backdrop = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheet = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const monthSlide = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const monthFade = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
 
   // Sync external value -> pending state when it changes.
   (0, _react.useEffect)(() => {

package/lib/commonjs/components/Dialog/Dialog.js

@@ -22,11 +22,17 @@ const Dialog = props => {
     actions,
     dismissOnAction = true,
     accessibilityLabel,
+    contentStyle,
+    containerStyle,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const variantTint = (0, _react.useMemo)(() => tintForVariant(theme, variant), [theme, variant]);
+  const dialogTokens = theme.components.dialog;
+  const iconWrapperSize = dialogTokens?.iconWrapperSize ?? 48;
+  const iconWrapperBorderRadius = dialogTokens?.iconWrapperBorderRadius ?? 24;
+  const actionButtonMinHeight = dialogTokens?.actionButtonMinHeight ?? 44;
   const handleAction = (0, _react.useCallback)(action => {
     if (action.loading) return;
     (0, _hapticUtils.triggerHaptic)('selection');
@@ -40,13 +46,17 @@ const Dialog = props => {
     onRequestClose: onClose,
     presentation: "centered",
     accessibilityLabel: accessibilityLabel ?? title,
+    contentStyle: contentStyle,
     testID: testID,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       accessibilityRole: 'alertdialog',
       accessibilityLabel: accessibilityLabel ?? title,
-      style: styles.container,
+      style: [styles.container, containerStyle],
       children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.iconWrapper, {
+          width: iconWrapperSize,
+          height: iconWrapperSize,
+          borderRadius: iconWrapperBorderRadius,
           backgroundColor: variantTint.muted,
           marginBottom: theme.spacing.md
         }],
@@ -55,7 +65,7 @@ const Dialog = props => {
         style: [styles.title, {
           color: theme.colors.text.primary,
           fontSize: theme.typography.fontSize.xl,
-          fontWeight: theme.typography.fontWeight.semibold,
+          ...(0, _index.fontFor)(theme, 'semibold'),
           marginBottom: message ? theme.spacing.sm : theme.spacing.md
         }],
         accessibilityRole: "header",
@@ -91,6 +101,7 @@ const Dialog = props => {
             style: ({
               pressed
             }) => [styles.actionButton, {
+              minHeight: actionButtonMinHeight,
               backgroundColor: buttonStyle.backgroundColor,
               borderColor: buttonStyle.borderColor,
               borderWidth: buttonStyle.borderWidth,
@@ -107,7 +118,7 @@ const Dialog = props => {
               style: {
                 color: buttonStyle.textColor,
                 fontSize: theme.typography.fontSize.base,
-                fontWeight: theme.typography.fontWeight.semibold,
+                ...(0, _index.fontFor)(theme, 'semibold'),
                 textAlign: 'center'
               },
               numberOfLines: 1,
@@ -186,9 +197,6 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     alignItems: 'stretch'
   },
   iconWrapper: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
     alignItems: 'center',
     justifyContent: 'center',
     alignSelf: 'center'
@@ -207,8 +215,7 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
   actionButton: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 44
+    justifyContent: 'center'
   }
 });
 var _default = exports.default = Dialog;

package/lib/commonjs/components/EmptyState/EmptyState.js

@@ -11,32 +11,38 @@ var _usePressAnimation = require("../../hooks/usePressAnimation.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const sizeFor = (theme, size) => {
-  switch (size) {
-    case 'sm':
-      return {
-        iconSize: 48,
-        titleSize: theme.typography.fontSize.lg,
-        descriptionSize: theme.typography.fontSize.sm,
-        paddingVertical: theme.spacing.lg
-      };
-    case 'lg':
-      return {
-        iconSize: 80,
-        titleSize: theme.typography.fontSize['2xl'],
-        descriptionSize: theme.typography.fontSize.base,
-        paddingVertical: theme.spacing['2xl']
-      };
-    case 'md':
-    default:
-      return {
-        iconSize: 64,
-        titleSize: theme.typography.fontSize.xl,
-        descriptionSize: theme.typography.fontSize.base,
-        paddingVertical: theme.spacing.xl
-      };
+const SIZE_FALLBACK = {
+  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'
   }
 };
+const sizeFor = (theme, size) => {
+  const tokens = {
+    ...SIZE_FALLBACK[size],
+    ...(theme.components.emptyState?.[size] ?? {})
+  };
+  return {
+    iconSize: tokens.iconSize,
+    titleSize: theme.typography.fontSize[tokens.titleFontSize],
+    descriptionSize: theme.typography.fontSize[tokens.descriptionFontSize],
+    paddingVertical: theme.spacing[tokens.paddingVertical]
+  };
+};
 const ActionButton = ({
   action,
   variant
@@ -115,7 +121,7 @@ const EmptyState = exports.EmptyState = /*#__PURE__*/(0, _react.forwardRef)((pro
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.title, {
         fontSize: sz.titleSize,
-        fontWeight: theme.typography.fontWeight.semibold
+        ...(0, _index.fontFor)(theme, 'semibold')
       }],
       children: title
     }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -188,7 +194,7 @@ const buildActionStyles = theme => _reactNative.StyleSheet.create({
   },
   buttonText: {
     fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.semibold
+    ...(0, _index.fontFor)(theme, 'semibold')
   },
   buttonTextPrimary: {
     color: theme.colors.text.inverse

package/lib/commonjs/components/FloatingActionButton/FloatingActionButton.js

@@ -83,7 +83,7 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
   } = (0, _usePressAnimation.usePressAnimation)({
     enabled: !disabled
   });
-  const hideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const hideAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   (0, _react.useEffect)(() => {
     if (!hideOnScroll) {
       hideAnim.setValue(0);
@@ -239,7 +239,7 @@ const FloatingActionButtonGroup = props => {
   const isOpen = isControlled ? controlledOpen : internalOpen;
 
   // Animation drivers
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(isOpen ? 1 : 0)).current;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(isOpen ? 1 : 0)).current;
   const itemAnims = (0, _react.useRef)([]);
 
   // Resize per-item anim array if action count changes

package/lib/commonjs/components/FormField/FormField.js

@@ -26,7 +26,7 @@ const FormField = exports.FormField = /*#__PURE__*/(0, _react.forwardRef)((props
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const errorOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(error ? 1 : 0)).current;
+  const errorOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(error ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.timing(errorOpacity, {
       toValue: error ? 1 : 0,
@@ -97,15 +97,15 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
   },
   label: {
     fontSize: theme.typography.fontSize.sm,
-    fontWeight: theme.typography.fontWeight.medium,
+    ...(0, _index.fontFor)(theme, 'medium'),
     color: theme.colors.text.secondary
   },
   labelInline: {
-    width: '35%'
+    width: theme.components.formField?.inlineLabelWidth ?? '35%'
   },
   requiredMark: {
     color: theme.colors.error,
-    fontWeight: theme.typography.fontWeight.medium
+    ...(0, _index.fontFor)(theme, 'medium')
   },
   inputStacked: {
     width: '100%'