@webority-technologies/mobile 0.0.15 → 0.0.20

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

@@ -4,7 +4,7 @@ import React, { createContext, useCallback, useContext, useEffect, useMemo, useR
 import { Animated, Easing, LayoutAnimation, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
-import { SkeletonContent } from "../Skeleton/index.js";
+import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionGroupContext = /*#__PURE__*/createContext(null);
 const useAccordionGroup = () => useContext(AccordionGroupContext);
@@ -87,6 +87,8 @@ const Accordion = props => {
     style,
     headerStyle,
     contentStyle,
+    contentWrapperStyle,
+    containerStyle,
     testID,
     loading = false
   } = props;
@@ -133,7 +135,9 @@ const Accordion = props => {
   }, [measuredHeight]);
   const handlePress = useCallback(() => {
     if (disabled) return;
-    triggerHaptic('selection');
+    if (theme.components.accordion?.pressHaptic ?? false) {
+      triggerHaptic('selection');
+    }
     if (group && id) {
       group.toggle(id);
       onChange?.(!expanded);
@@ -141,7 +145,7 @@ const Accordion = props => {
     }
     if (!isControlled) setInternalExpanded(!expanded);
     onChange?.(!expanded);
-  }, [disabled, group, id, expanded, isControlled, onChange]);
+  }, [disabled, group, id, expanded, isControlled, onChange, theme.components.accordion]);
   const rotate = rotateAnim.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '180deg']
@@ -155,24 +159,12 @@ const Accordion = props => {
     borderRadius: theme.radius.md
   }] : null;
   if (loading) {
-    return /*#__PURE__*/_jsx(SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      style: [cardStyle, style],
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.header,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.title, {
-            fontSize: theme.typography.fontSize.base
-          }],
-          numberOfLines: 1,
-          children: title ?? ' '
-        })
-      })
+    return /*#__PURE__*/_jsx(AccordionSkeleton, {
+      ...props
     });
   }
   return /*#__PURE__*/_jsxs(View, {
-    style: [cardStyle, style],
+    style: [cardStyle, style, containerStyle],
     testID: testID,
     children: [/*#__PURE__*/_jsxs(Pressable, {
       onPress: handlePress,
@@ -218,7 +210,7 @@ const Accordion = props => {
       } : {
         height: animatedHeight,
         opacity: opacityAnim
-      }]
+      }, contentWrapperStyle]
       // Re-measure if children change size by listening to layout of inner
       ,
       children: /*#__PURE__*/_jsx(View, {
@@ -231,12 +223,61 @@ const Accordion = props => {
 };
 Accordion.displayName = 'Accordion';
 
+/**
+ * Placeholder shape for `<Accordion>`. Header pill with a title-line
+ * skeleton; content is collapsed (matches the closed-by-default behaviour).
+ */
+const AccordionSkeleton = ({
+  variant = 'plain',
+  style
+}) => {
+  const theme = useTheme();
+  const isCard = variant === 'card';
+  return /*#__PURE__*/_jsx(View, {
+    style: [isCard ? {
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm,
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.md
+    } : {
+      paddingVertical: theme.spacing.sm
+    }, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "60%",
+        height: 18,
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        width: 16,
+        height: 16,
+        radius: "sm",
+        style: {
+          marginLeft: theme.spacing.sm
+        }
+      })]
+    })
+  });
+};
+AccordionSkeleton.displayName = 'AccordionSkeleton';
+Accordion.Skeleton = AccordionSkeleton;
+
 // Suppress unused warnings on platforms that don't support LayoutAnimation
 void LayoutAnimation;
 const buildStyles = theme => StyleSheet.create({
   card: {
     paddingHorizontal: theme.spacing.md,
-    paddingVertical: 4,
+    paddingVertical: theme.components.accordion?.cardPaddingVertical ?? 4,
     marginVertical: theme.spacing.xs
   },
   header: {

package/lib/module/components/AppBar/AppBar.js

@@ -35,7 +35,8 @@ const variantSize = (theme, variant) => {
 };
 const ActionButton = ({
   action,
-  side
+  side,
+  badgeStyle
 }) => {
   const theme = useTheme();
   const {
@@ -47,7 +48,9 @@ const ActionButton = ({
   });
   const styles = useMemo(() => buildActionStyles(theme), [theme]);
   const onPress = () => {
-    triggerHaptic('selection');
+    if (theme.components.appBar?.pressHaptic ?? false) {
+      triggerHaptic('selection');
+    }
     action.onPress();
   };
   const badgeValue = action.badge;
@@ -76,7 +79,7 @@ const ActionButton = ({
         style: styles.iconWrap,
         children: action.icon
       }), badgeValue !== undefined && !badgeIsDot ? /*#__PURE__*/_jsx(View, {
-        style: styles.badge,
+        style: [styles.badge, badgeStyle],
         pointerEvents: "none",
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.badgeText,
@@ -101,6 +104,10 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     transparent = false,
     scrollY,
     style,
+    containerStyle,
+    titleStyle,
+    subtitleStyle,
+    badgeStyle,
     testID
   } = props;
   const theme = useTheme();
@@ -112,6 +119,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
   // Interpolations for the collapsing-app-bar behaviour. Native driver supports
   // transform/opacity; height + borderBottomWidth must run on the JS driver and
   // are wired through the same scrollY (RN coalesces the listener).
+  const collapseTranslateDistance = theme.components.appBar?.collapseTranslateDistance ?? -20;
   const collapse = useMemo(() => {
     if (!scrollY) return null;
     const clamp = {
@@ -127,7 +135,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       // area. Approximate vertical travel = (large 96 - default 56) / 2.
       titleTranslateY: scrollY.interpolate({
         ...clamp,
-        outputRange: [0, -20]
+        outputRange: [0, collapseTranslateDistance]
       }),
       titleTranslateX: scrollY.interpolate({
         ...clamp,
@@ -148,7 +156,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
         outputRange: [0, 1]
       })
     };
-  }, [scrollY, titleAlignment]);
+  }, [scrollY, titleAlignment, collapseTranslateDistance]);
   const titleNode = title ? /*#__PURE__*/_jsx(Animated.Text, {
     style: [styles.title, {
       fontSize: v.titleSize,
@@ -162,7 +170,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       }, {
         scale: collapse.titleScale
       }]
-    } : null],
+    } : null, titleStyle],
     numberOfLines: 1,
     children: title
   }) : null;
@@ -171,7 +179,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       textAlign: titleAlignment === 'center' ? 'center' : 'left'
     }, isCollapsing && collapse ? {
       opacity: collapse.subtitleOpacity
-    } : null],
+    } : null, subtitleStyle],
     numberOfLines: 1,
     children: subtitle
   }) : null;
@@ -202,7 +210,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     !isCollapsing ? {
       borderBottomWidth: transparent ? 0 : StyleSheet.hairlineWidth,
       borderBottomColor: theme.colors.border.primary
-    } : null, style],
+    } : null, style, containerStyle],
     children: [isCollapsing && collapse && !transparent ? /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "none",
       style: [styles.animatedBorder, {
@@ -226,7 +234,8 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
         style: [styles.sideSlot, styles.sideSlotRight],
         children: rightActions?.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
           action: action,
-          side: "right"
+          side: "right",
+          badgeStyle: badgeStyle
         }, `appbar-right-${index}`))
       })]
     })]
@@ -249,7 +258,7 @@ const buildStyles = theme => StyleSheet.create({
   sideSlot: {
     flexDirection: 'row',
     alignItems: 'center',
-    minWidth: 48
+    minWidth: theme.components.appBar?.sideSlotMinWidth ?? 48
   },
   sideSlotRight: {
     justifyContent: 'flex-end'
@@ -277,7 +286,7 @@ const buildStyles = theme => StyleSheet.create({
     color: theme.colors.text.primary
   },
   subtitle: {
-    marginTop: 2,
+    marginTop: theme.components.appBar?.subtitleMarginTop ?? 2,
     color: theme.colors.text.tertiary,
     fontSize: theme.typography.fontSize.sm,
     fontWeight: theme.typography.fontWeight.normal
@@ -292,8 +301,8 @@ const buildStyles = theme => StyleSheet.create({
 });
 const buildActionStyles = theme => StyleSheet.create({
   actionButton: {
-    width: 40,
-    height: 40,
+    width: theme.components.appBar?.actionButtonSize ?? 40,
+    height: theme.components.appBar?.actionButtonSize ?? 40,
     borderRadius: theme.radius.full,
     alignItems: 'center',
     justifyContent: 'center'
@@ -313,11 +322,11 @@ const buildActionStyles = theme => StyleSheet.create({
   },
   badge: {
     position: 'absolute',
-    top: 4,
-    right: 4,
-    minWidth: 16,
-    height: 16,
-    paddingHorizontal: 4,
+    top: theme.components.appBar?.badgeOffset ?? 4,
+    right: theme.components.appBar?.badgeOffset ?? 4,
+    minWidth: theme.components.appBar?.badgeMinWidth ?? 16,
+    height: theme.components.appBar?.badgeHeight ?? 16,
+    paddingHorizontal: theme.components.appBar?.badgePaddingHorizontal ?? 4,
     borderRadius: theme.radius.full,
     backgroundColor: theme.colors.error,
     alignItems: 'center',
@@ -325,9 +334,9 @@ const buildActionStyles = theme => StyleSheet.create({
   },
   badgeText: {
     color: theme.colors.text.inverse,
-    fontSize: 10,
+    fontSize: theme.components.appBar?.badgeFontSize ?? 10,
     fontWeight: theme.typography.fontWeight.semibold,
-    lineHeight: 12
+    lineHeight: theme.components.appBar?.badgeLineHeight ?? 12
   }
 });
 export { AppBar };

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

@@ -3,7 +3,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, createAnimatedValue } from "../../theme/index.js";
-import { SkeletonContent } from "../Skeleton/index.js";
+import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
   xs: 24,
@@ -65,6 +65,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
     statusPosition = 'bottomRight',
     backgroundColor,
     color,
+    fontSize: fontSizeProp,
     loading = false,
     accessibilityLabel,
     style,
@@ -72,9 +73,14 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
     testID
   } = props;
   const theme = useTheme();
+  const avatarTokens = theme.components.avatar;
   const [imageFailed, setImageFailed] = useState(false);
   const dimension = useMemo(() => resolveSize(size), [size]);
   const borderRadius = useMemo(() => resolveRadius(shape, dimension), [shape, dimension]);
+  const borderWidth = avatarTokens?.borderWidth ?? 0;
+  const borderColor = avatarTokens?.borderColor ?? theme.colors.border.primary;
+  const statusBorder = avatarTokens?.statusBorderWidth ?? 2;
+  const statusBorderColor = avatarTokens?.statusBorderColor ?? theme.colors.background.elevated;
   const initials = useMemo(() => initialsFromName(name), [name]);
   const resolvedBackground = useMemo(() => {
     if (backgroundColor) return backgroundColor;
@@ -82,9 +88,11 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
   }, [backgroundColor, name]);
   const resolvedTextColor = color ?? theme.colors.text.inverse;
   const showImage = !!source && !imageFailed;
-  const fontSize = Math.max(10, Math.round(dimension * 0.4));
+  // Font size resolution: per-instance prop → absolute theme token → ratio
+  // token → library default (40% of avatar dimension, floored at 10px).
+  const fontSizeRatio = avatarTokens?.fontSizeRatio ?? 0.4;
+  const fontSize = fontSizeProp ?? avatarTokens?.fontSize ?? Math.max(10, Math.round(dimension * fontSizeRatio));
   const statusSize = Math.max(8, Math.round(dimension * 0.25));
-  const statusBorder = 2;
   const a11yLabel = accessibilityLabel ?? (name ? `${name}'s avatar` : 'Avatar');
   const rendered = /*#__PURE__*/_jsxs(View, {
     ref: ref,
@@ -92,6 +100,8 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
       width: dimension,
       height: dimension,
       borderRadius,
+      borderWidth,
+      borderColor,
       backgroundColor: showImage ? theme.colors.background.tertiary : resolvedBackground
     }, style],
     accessible: true,
@@ -112,7 +122,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
       style: [styles.initials, {
         color: resolvedTextColor,
         fontSize,
-        fontWeight: theme.typography.fontWeight.semibold
+        fontWeight: theme.typography.fontWeight[avatarTokens?.fontWeight ?? 'semibold']
       }, textStyle],
       numberOfLines: 1,
       allowFontScaling: false,
@@ -124,22 +134,42 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
         borderRadius: statusSize / 2,
         backgroundColor: statusColor(theme, status),
         borderWidth: statusBorder,
-        borderColor: theme.colors.background.elevated
+        borderColor: statusBorderColor
       }],
       accessible: false,
       pointerEvents: "none"
     }) : null]
   });
   if (loading) {
-    return /*#__PURE__*/_jsx(SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/_jsx(AvatarSkeleton, {
+      ...props
     });
   }
   return rendered;
 });
 Avatar.displayName = 'Avatar';
+
+/**
+ * Authored placeholder for `<Avatar>`. Matches the real shape (circle /
+ * rounded / square at the requested size), so the layout doesn't shift
+ * when the image / name resolves.
+ */
+const AvatarSkeleton = ({
+  size = 'md',
+  shape = 'circle',
+  style
+}) => {
+  const dim = resolveSize(size);
+  const skeletonShape = shape === 'circle' ? 'circle' : shape === 'rounded' ? 'rounded' : 'rect';
+  return /*#__PURE__*/_jsx(Skeleton, {
+    shape: skeletonShape,
+    width: dim,
+    height: dim,
+    style: style
+  });
+};
+AvatarSkeleton.displayName = 'AvatarSkeleton';
+Avatar.Skeleton = AvatarSkeleton;
 const styles = StyleSheet.create({
   root: {
     alignItems: 'center',

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

@@ -3,7 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
 import { fontFor, useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
-import { SkeletonContent } from "../Skeleton/index.js";
+import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const toneFor = (theme, tone) => {
   switch (tone) {
@@ -196,15 +196,77 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
     children: badgeContent
   });
   if (loading) {
-    return /*#__PURE__*/_jsx(SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/_jsx(BadgeSkeleton, {
+      ...props
     });
   }
   return rendered;
 });
 Badge.displayName = 'Badge';
+
+/**
+ * Placeholder shape for `<Badge>`. Dot variant renders a small circle at
+ * the dot size; standard variant renders a pill shape at the badge's
+ * resolved height. Anchored badges (with `children`) overlay the badge
+ * shape on a wrapper that hosts the children below.
+ */
+const BadgeSkeleton = ({
+  variant = 'standard',
+  size = 'md',
+  children,
+  anchor,
+  style,
+  badgeStyle
+}) => {
+  const sz = sizeMap[size];
+  if (variant === 'dot') {
+    return /*#__PURE__*/_jsx(Skeleton, {
+      shape: "circle",
+      width: sz.dot,
+      height: sz.dot,
+      style: [badgeStyle, style]
+    });
+  }
+  const pillRadius = sz.height / 2;
+  // Anchored badge: render the children underneath, overlay the badge.
+  if (children !== undefined) {
+    const offsetStyle = anchor === 'topLeft' ? {
+      top: -sz.height / 2,
+      left: -sz.height / 2
+    } : anchor === 'bottomRight' ? {
+      bottom: -sz.height / 2,
+      right: -sz.height / 2
+    } : anchor === 'bottomLeft' ? {
+      bottom: -sz.height / 2,
+      left: -sz.height / 2
+    } : {
+      top: -sz.height / 2,
+      right: -sz.height / 2
+    };
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.wrapper, style],
+      children: [children, /*#__PURE__*/_jsx(View, {
+        style: [{
+          position: 'absolute'
+        }, offsetStyle],
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: sz.minWidth + sz.paddingH,
+          height: sz.height,
+          radius: pillRadius,
+          style: badgeStyle
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(Skeleton, {
+    width: sz.minWidth + sz.paddingH,
+    height: sz.height,
+    radius: pillRadius,
+    style: [badgeStyle, style]
+  });
+};
+BadgeSkeleton.displayName = 'BadgeSkeleton';
+Badge.Skeleton = BadgeSkeleton;
 const styles = StyleSheet.create({
   wrapper: {
     position: 'relative',