@webority-technologies/mobile 0.0.6 → 0.0.8

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/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 } 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,7 +111,16 @@ 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;
@@ -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/BottomSheet/BottomSheet.js

@@ -20,7 +20,7 @@
  */
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Dimensions, Pressable, StyleSheet, View } from 'react-native';
+import { Dimensions, Keyboard, Platform, Pressable, StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -43,6 +43,7 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     enablePanDownToClose = true,
     enableBackdropPress = true,
     backdropOpacity = 0.5,
+    keyboardBehavior = 'none',
     handleIndicatorStyle,
     containerStyle,
     children,
@@ -235,12 +236,45 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     });
   }, [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 = useSharedValue(0);
+  useEffect(() => {
+    if (keyboardBehavior === 'none') return;
+    const showEvt = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvt = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const onShow = e => {
+      const h = e.endCoordinates?.height ?? 0;
+      keyboardOffset.value = withTiming(-h, {
+        duration: 220
+      });
+    };
+    const onHide = () => {
+      keyboardOffset.value = withTiming(0, {
+        duration: 220
+      });
+    };
+    const showSub = Keyboard.addListener(showEvt, onShow);
+    const hideSub = Keyboard.addListener(hideEvt, onHide);
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [keyboardBehavior, keyboardOffset]);
+
   // ───────── Animated styles ─────────
-  const sheetStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateY: translateY.value
-    }]
-  }));
+  const sheetStyle = 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 = useAnimatedStyle(() => {
     // 0 opacity when sheet is closed, full backdropOpacity at minSnap height (and above).
     const closedAt = screenHeight;

package/lib/module/components/Button/Button.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useMemo } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, Gradient, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { Spinner } from "../Spinner/index.js";
@@ -21,6 +21,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     rightIcon,
     haptic = 'selection',
     rounded = false,
+    gradient,
     style,
     textStyle,
     pressAnimation = true,
@@ -40,9 +41,22 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     enabled: pressAnimation && isInteractive
   });
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.button?.[size] ?? {})
+  };
   const toneColors = useMemo(() => toneFor(theme, tone), [theme, tone]);
   const variantStyles = 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 = 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) triggerHaptic(haptic);
@@ -64,7 +78,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
         style: [styles.label, {
           color: variantStyles.textColor,
           fontSize: sizeStyles.fontSize,
-          fontWeight: theme.typography.fontWeight.semibold
+          ...fontFor(theme, 'semibold')
         }, textStyle],
         numberOfLines: 1,
         children: title
@@ -80,7 +94,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
         scale
       }]
     }, fullWidth ? styles.fullWidth : null],
-    children: /*#__PURE__*/_jsx(Pressable, {
+    children: /*#__PURE__*/_jsxs(Pressable, {
       ref: ref,
       onPress: handlePress,
       onPressIn: pressIn,
@@ -108,15 +122,20 @@ const Button = /*#__PURE__*/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__*/_jsx(Gradient, {
+        gradient: resolvedGradient,
+        style: StyleSheet.absoluteFill
+      }) : null, content]
     })
   });
 });

package/lib/module/components/Card/Card.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useMemo } from 'react';
 import { Animated, Image, Pressable, StyleSheet, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { Gradient, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { SkeletonContent } from "../Skeleton/index.js";
@@ -29,6 +29,7 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
     imageAspectRatio,
     imageOverlay,
     loading = false,
+    gradient,
     onPress,
     accessibilityLabel,
     accessibilityHint,
@@ -49,6 +50,11 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const hasImage = Boolean(imageSource);
   const contentPadding = theme.spacing[paddingMap[padding]];
+  const resolvedGradient = useMemo(() => {
+    if (!gradient) return null;
+    if (typeof gradient === 'string') return theme.gradients[gradient] ?? null;
+    return gradient;
+  }, [gradient, theme.gradients]);
   const containerStyle = useMemo(() => {
     const base = {
       borderRadius: theme.radius[radius],
@@ -108,7 +114,7 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
       children: footer
     }) : null]
   });
-  const content = hasImage ? /*#__PURE__*/_jsxs(_Fragment, {
+  const baseContent = hasImage ? /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.imageWrapper,
       children: [/*#__PURE__*/_jsx(Image, {
@@ -129,6 +135,12 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
       children: innerContent
     })]
   }) : innerContent;
+  const content = resolvedGradient ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Gradient, {
+      gradient: resolvedGradient,
+      style: StyleSheet.absoluteFillObject
+    }), baseContent]
+  }) : baseContent;
   let rendered;
   if (isInteractive) {
     const handlePress = event => {

package/lib/module/components/Checkbox/Checkbox.js

@@ -41,7 +41,9 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const styles = 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 = useRef(new Animated.Value(isActive ? 1 : 0)).current;
@@ -93,6 +95,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       style: [styles.box, {
         width: boxSize,
         height: boxSize,
+        borderWidth: checkboxBorderWidth,
         borderRadius: theme.radius.xs,
         borderColor,
         backgroundColor
@@ -123,6 +126,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       })
     }), label ? /*#__PURE__*/_jsx(Text, {
       style: [styles.label, {
+        marginLeft: checkboxLabelGap,
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
         fontSize: theme.typography.fontSize.base
       }],
@@ -138,7 +142,6 @@ const buildStyles = _theme => StyleSheet.create({
     alignItems: 'center'
   },
   box: {
-    borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center'
   },
@@ -152,7 +155,6 @@ const buildStyles = _theme => StyleSheet.create({
     includeFontPadding: false
   },
   label: {
-    marginLeft: 10,
     flexShrink: 1
   }
 });

package/lib/module/components/Chip/Chip.js

@@ -2,7 +2,7 @@
 
 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 { SkeletonContent } from "../Skeleton/index.js";
@@ -113,7 +113,16 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     enabled: isPressable
   });
   const tones = 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';
@@ -153,7 +162,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
       style: [styles.label, {
         color: textColor,
         fontSize: sz.fontSize,
-        fontWeight: theme.typography.fontWeight.medium
+        ...fontFor(theme, 'medium')
       }, textStyle],
       numberOfLines: 1,
       children: label ?? ' '
@@ -179,7 +188,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
         style: {
           color: textColor,
           fontSize: sz.closeFont,
-          fontWeight: theme.typography.fontWeight.bold,
+          ...fontFor(theme, 'bold'),
           lineHeight: sz.closeFont + 2
         },
         allowFontScaling: false,