@webority-technologies/mobile 0.0.15 → 0.0.20

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

@@ -93,6 +93,8 @@ const Accordion = props => {
     style,
     headerStyle,
     contentStyle,
+    contentWrapperStyle,
+    containerStyle,
     testID,
     loading = false
   } = props;
@@ -139,7 +141,9 @@ const Accordion = props => {
   }, [measuredHeight]);
   const handlePress = (0, _react.useCallback)(() => {
     if (disabled) return;
-    (0, _hapticUtils.triggerHaptic)('selection');
+    if (theme.components.accordion?.pressHaptic ?? false) {
+      (0, _hapticUtils.triggerHaptic)('selection');
+    }
     if (group && id) {
       group.toggle(id);
       onChange?.(!expanded);
@@ -147,7 +151,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']
@@ -161,24 +165,12 @@ const Accordion = props => {
     borderRadius: theme.radius.md
   }] : null;
   if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      style: [cardStyle, style],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.header,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.title, {
-            fontSize: theme.typography.fontSize.base
-          }],
-          numberOfLines: 1,
-          children: title ?? ' '
-        })
-      })
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSkeleton, {
+      ...props
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [cardStyle, style],
+    style: [cardStyle, style, containerStyle],
     testID: testID,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
       onPress: handlePress,
@@ -224,7 +216,7 @@ const Accordion = props => {
       } : {
         height: animatedHeight,
         opacity: opacityAnim
-      }]
+      }, contentWrapperStyle]
       // Re-measure if children change size by listening to layout of inner
       ,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -238,12 +230,61 @@ const Accordion = props => {
 exports.Accordion = Accordion;
 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 = (0, _index.useTheme)();
+  const isCard = variant === 'card';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        shape: "text",
+        width: "60%",
+        height: 18,
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.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 _reactNative.LayoutAnimation;
 const buildStyles = theme => _reactNative.StyleSheet.create({
   card: {
     paddingHorizontal: theme.spacing.md,
-    paddingVertical: 4,
+    paddingVertical: theme.components.accordion?.cardPaddingVertical ?? 4,
     marginVertical: theme.spacing.xs
   },
   header: {

package/lib/commonjs/components/AppBar/AppBar.js

@@ -40,7 +40,8 @@ const variantSize = (theme, variant) => {
 };
 const ActionButton = ({
   action,
-  side
+  side,
+  badgeStyle
 }) => {
   const theme = (0, _index.useTheme)();
   const {
@@ -52,7 +53,9 @@ const ActionButton = ({
   });
   const styles = (0, _react.useMemo)(() => buildActionStyles(theme), [theme]);
   const onPress = () => {
-    (0, _hapticUtils.triggerHaptic)('selection');
+    if (theme.components.appBar?.pressHaptic ?? false) {
+      (0, _hapticUtils.triggerHaptic)('selection');
+    }
     action.onPress();
   };
   const badgeValue = action.badge;
@@ -81,7 +84,7 @@ const ActionButton = ({
         style: styles.iconWrap,
         children: action.icon
       }), badgeValue !== undefined && !badgeIsDot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.badge,
+        style: [styles.badge, badgeStyle],
         pointerEvents: "none",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.badgeText,
@@ -106,6 +109,10 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     transparent = false,
     scrollY,
     style,
+    containerStyle,
+    titleStyle,
+    subtitleStyle,
+    badgeStyle,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -117,6 +124,7 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.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 = (0, _react.useMemo)(() => {
     if (!scrollY) return null;
     const clamp = {
@@ -132,7 +140,7 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.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,
@@ -153,7 +161,7 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         outputRange: [0, 1]
       })
     };
-  }, [scrollY, titleAlignment]);
+  }, [scrollY, titleAlignment, collapseTranslateDistance]);
   const titleNode = title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
     style: [styles.title, {
       fontSize: v.titleSize,
@@ -167,7 +175,7 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       }, {
         scale: collapse.titleScale
       }]
-    } : null],
+    } : null, titleStyle],
     numberOfLines: 1,
     children: title
   }) : null;
@@ -176,7 +184,7 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       textAlign: titleAlignment === 'center' ? 'center' : 'left'
     }, isCollapsing && collapse ? {
       opacity: collapse.subtitleOpacity
-    } : null],
+    } : null, subtitleStyle],
     numberOfLines: 1,
     children: subtitle
   }) : null;
@@ -207,7 +215,7 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     !isCollapsing ? {
       borderBottomWidth: transparent ? 0 : _reactNative.StyleSheet.hairlineWidth,
       borderBottomColor: theme.colors.border.primary
-    } : null, style],
+    } : null, style, containerStyle],
     children: [isCollapsing && collapse && !transparent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       pointerEvents: "none",
       style: [styles.animatedBorder, {
@@ -231,7 +239,8 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         style: [styles.sideSlot, styles.sideSlotRight],
         children: rightActions?.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
           action: action,
-          side: "right"
+          side: "right",
+          badgeStyle: badgeStyle
         }, `appbar-right-${index}`))
       })]
     })]
@@ -254,7 +263,7 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
   sideSlot: {
     flexDirection: 'row',
     alignItems: 'center',
-    minWidth: 48
+    minWidth: theme.components.appBar?.sideSlotMinWidth ?? 48
   },
   sideSlotRight: {
     justifyContent: 'flex-end'
@@ -282,7 +291,7 @@ const buildStyles = theme => _reactNative.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
@@ -297,8 +306,8 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
 });
 const buildActionStyles = theme => _reactNative.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'
@@ -318,11 +327,11 @@ const buildActionStyles = theme => _reactNative.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',
@@ -330,9 +339,9 @@ const buildActionStyles = theme => _reactNative.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
   }
 });
 var _default = exports.default = AppBar;

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

@@ -70,6 +70,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     statusPosition = 'bottomRight',
     backgroundColor,
     color,
+    fontSize: fontSizeProp,
     loading = false,
     accessibilityLabel,
     style,
@@ -77,9 +78,14 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     testID
   } = props;
   const theme = (0, _index.useTheme)();
+  const avatarTokens = theme.components.avatar;
   const [imageFailed, setImageFailed] = (0, _react.useState)(false);
   const dimension = (0, _react.useMemo)(() => resolveSize(size), [size]);
   const borderRadius = (0, _react.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 = (0, _react.useMemo)(() => initialsFromName(name), [name]);
   const resolvedBackground = (0, _react.useMemo)(() => {
     if (backgroundColor) return backgroundColor;
@@ -87,9 +93,11 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     ref: ref,
@@ -97,6 +105,8 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       width: dimension,
       height: dimension,
       borderRadius,
+      borderWidth,
+      borderColor,
       backgroundColor: showImage ? theme.colors.background.tertiary : resolvedBackground
     }, style],
     accessible: true,
@@ -117,7 +127,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.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,
@@ -129,22 +139,42 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+    shape: skeletonShape,
+    width: dim,
+    height: dim,
+    style: style
+  });
+};
+AvatarSkeleton.displayName = 'AvatarSkeleton';
+Avatar.Skeleton = AvatarSkeleton;
 const styles = _reactNative.StyleSheet.create({
   root: {
     alignItems: 'center',

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

@@ -201,15 +201,77 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     children: badgeContent
   });
   if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_index2.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.wrapper, style],
+      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [{
+          position: 'absolute'
+        }, offsetStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+          width: sz.minWidth + sz.paddingH,
+          height: sz.height,
+          radius: pillRadius,
+          style: badgeStyle
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+    width: sz.minWidth + sz.paddingH,
+    height: sz.height,
+    radius: pillRadius,
+    style: [badgeStyle, style]
+  });
+};
+BadgeSkeleton.displayName = 'BadgeSkeleton';
+Badge.Skeleton = BadgeSkeleton;
 const styles = _reactNative.StyleSheet.create({
   wrapper: {
     position: 'relative',