@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,343 @@
+"use strict";
+
+import React, { Children, cloneElement, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { Skeleton } from "../Skeleton/index.js";
+
+/**
+ * Props passed to a custom {@link AvatarProps.ImageComponent}. They mirror what
+ * the built-in `<Image>` receives, so a plain RN `Image` is a valid drop-in.
+ * Supply a custom component to render images that need authenticated fetching,
+ * caching, or token refresh (the library stays auth-agnostic).
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 48,
+  lg: 64,
+  xl: 80
+};
+const resolveSize = size => typeof size === 'number' ? size : sizeMap[size];
+const resolveRadius = (shape, dimension) => {
+  switch (shape) {
+    case 'circle':
+      return dimension / 2;
+    case 'rounded':
+      return Math.max(6, Math.round(dimension * 0.22));
+    case 'square':
+    default:
+      return 0;
+  }
+};
+const initialsFromName = name => {
+  if (!name) {
+    return '';
+  }
+  const parts = name.trim().split(/\s+/u).filter(Boolean);
+  if (parts.length === 0) {
+    return '';
+  }
+  if (parts.length === 1) {
+    return parts[0].charAt(0).toUpperCase();
+  }
+  return (parts[0].charAt(0) + parts[1].charAt(0)).toUpperCase();
+};
+
+// Stable per-user colour is deliberate: the same name must always hash to
+// the same palette index, so don't "fix" this to something random.
+const hashColor = (seed, palette) => {
+  if (!seed) {
+    return palette[0];
+  }
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = (hash << 5) - hash + seed.charCodeAt(i);
+    hash |= 0;
+  }
+  const idx = Math.abs(hash) % palette.length;
+  return palette[idx];
+};
+const statusColor = (theme, status) => {
+  switch (status) {
+    case 'online':
+      return theme.colors.success;
+    case 'busy':
+      return theme.colors.error;
+    case 'away':
+      return theme.colors.warning;
+    case 'offline':
+    default:
+      return theme.colors.text.tertiary;
+  }
+};
+const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    source,
+    ImageComponent,
+    name,
+    size = 'md',
+    shape = 'circle',
+    status = null,
+    statusPosition = 'bottomRight',
+    backgroundColor,
+    color,
+    fontSize: fontSizeProp,
+    loading = false,
+    accessibilityLabel,
+    style,
+    textStyle,
+    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;
+    }
+    return hashColor(name ?? '', theme.colors.avatarPalette);
+  }, [backgroundColor, name, theme.colors.avatarPalette]);
+  const resolvedTextColor = color ?? theme.colors.text.inverse;
+  const showImage = !!source && !imageFailed;
+  // 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 a11yLabel = accessibilityLabel ?? (name ? `${name}'s avatar` : 'Avatar');
+  const rendered = /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [styles.root, {
+      width: dimension,
+      height: dimension,
+      borderRadius,
+      borderWidth,
+      borderColor,
+      backgroundColor: showImage ? theme.colors.background.tertiary : resolvedBackground
+    }, style],
+    accessible: true,
+    accessibilityRole: "image",
+    accessibilityLabel: a11yLabel,
+    testID: testID,
+    children: [showImage ? (() => {
+      const ImageEl = ImageComponent ?? Image;
+      return /*#__PURE__*/_jsx(ImageEl, {
+        source: source,
+        onError: () => setImageFailed(true),
+        style: {
+          width: dimension,
+          height: dimension,
+          borderRadius
+        },
+        resizeMode: "cover",
+        accessibilityIgnoresInvertColors: true
+      });
+    })() : /*#__PURE__*/_jsx(Text, {
+      style: [styles.initials, {
+        color: resolvedTextColor,
+        fontSize,
+        fontWeight: theme.typography.fontWeight[avatarTokens?.fontWeight ?? 'semibold']
+      }, textStyle],
+      numberOfLines: 1,
+      allowFontScaling: false,
+      children: initials ?? ' '
+    }), status ? /*#__PURE__*/_jsx(View, {
+      style: [styles.status, statusPosition === 'topRight' ? styles.statusTopRight : styles.statusBottomRight, {
+        width: statusSize,
+        height: statusSize,
+        borderRadius: statusSize / 2,
+        backgroundColor: statusColor(theme, status),
+        borderWidth: statusBorder,
+        borderColor: statusBorderColor
+      }],
+      accessible: false,
+      pointerEvents: "none"
+    }) : null]
+  });
+  if (loading) {
+    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',
+    justifyContent: 'center',
+    overflow: 'visible',
+    position: 'relative'
+  },
+  initials: {
+    textAlign: 'center'
+  },
+  status: {
+    position: 'absolute'
+  },
+  statusTopRight: {
+    top: 0,
+    right: 0
+  },
+  statusBottomRight: {
+    bottom: 0,
+    right: 0
+  }
+});
+const SPACING_OFFSET = {
+  tight: -16,
+  normal: -12,
+  loose: -8
+};
+const STAGGER_MS = 50;
+const ENTRANCE_DURATION_MS = 220;
+const AvatarGroupItem = ({
+  delay,
+  marginLeft,
+  borderColor,
+  borderWidth,
+  children
+}) => {
+  const opacity = useRef(createAnimatedValue(0)).current;
+  useEffect(() => {
+    const anim = Animated.timing(opacity, {
+      toValue: 1,
+      duration: ENTRANCE_DURATION_MS,
+      delay,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [delay, opacity]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [groupStyles.item, {
+      marginLeft,
+      borderColor,
+      borderWidth,
+      opacity
+    }],
+    children: children
+  });
+};
+const AvatarGroup = props => {
+  const {
+    children,
+    max = 4,
+    size = 'md',
+    spacing = 'normal',
+    overflowVariant = 'count',
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const validChildren = useMemo(() => Children.toArray(children).filter(c => /*#__PURE__*/isValidElement(c)), [children]);
+  const total = validChildren.length;
+  const visible = validChildren.slice(0, max);
+  const overflow = Math.max(0, total - max);
+  const showOverflow = overflow > 0;
+  const offset = SPACING_OFFSET[spacing];
+  const borderColor = theme.colors.background.elevated;
+  const borderWidth = 1.5;
+  const a11yLabel = accessibilityLabel ?? `Group of ${total} ${total === 1 ? 'person' : 'people'}`;
+
+  // Render the "+N" / "+" overflow avatar styled to match.
+  const overflowDimension = useMemo(() => resolveSize(size), [size]);
+  const overflowFontSize = Math.max(10, Math.round(overflowDimension * 0.34));
+  return /*#__PURE__*/_jsxs(View, {
+    style: [groupStyles.row, style],
+    accessible: true,
+    accessibilityLabel: a11yLabel,
+    accessibilityRole: "summary",
+    testID: testID,
+    children: [visible.map((child, index) => {
+      const childKey = child.key ?? `avatar-${index}`;
+      const cloned = /*#__PURE__*/cloneElement(child, {
+        size
+      });
+      return /*#__PURE__*/_jsx(AvatarGroupItem, {
+        delay: index * STAGGER_MS,
+        marginLeft: index === 0 ? 0 : offset,
+        borderColor: borderColor,
+        borderWidth: borderWidth,
+        children: cloned
+      }, childKey);
+    }), showOverflow ? /*#__PURE__*/_jsx(AvatarGroupItem, {
+      delay: visible.length * STAGGER_MS,
+      marginLeft: visible.length === 0 ? 0 : offset,
+      borderColor: borderColor,
+      borderWidth: borderWidth,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [groupStyles.overflow, {
+          width: overflowDimension,
+          height: overflowDimension,
+          borderRadius: overflowDimension / 2,
+          backgroundColor: theme.colors.surface.disabled
+        }],
+        accessible: true,
+        accessibilityRole: "text",
+        accessibilityLabel: overflowVariant === 'count' ? `${overflow} more` : 'More avatars',
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.text.secondary,
+            fontSize: overflowFontSize,
+            fontWeight: theme.typography.fontWeight.semibold
+          },
+          numberOfLines: 1,
+          allowFontScaling: false,
+          children: overflowVariant === 'count' ? `+${overflow}` : '+'
+        })
+      })
+    }, "avatar-overflow") : null]
+  });
+};
+const groupStyles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  item: {
+    borderRadius: 9999
+  },
+  overflow: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+const AvatarWithGroup = Avatar;
+AvatarWithGroup.Group = AvatarGroup;
+export { Avatar, AvatarGroup };
+export default AvatarWithGroup;
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Avatar, AvatarGroup, default } from "./Avatar.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,291 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/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) {
+    case 'primary':
+      return {
+        background: theme.colors.primary,
+        text: theme.colors.onPrimary
+      };
+    case 'success':
+      return {
+        background: theme.colors.success,
+        text: theme.colors.onSuccess
+      };
+    case 'warning':
+      return {
+        background: theme.colors.warning,
+        text: theme.colors.onWarning
+      };
+    case 'info':
+      return {
+        background: theme.colors.info,
+        text: theme.colors.onInfo
+      };
+    case 'neutral':
+      return {
+        background: theme.colors.background.tertiary,
+        text: theme.colors.text.primary
+      };
+    case 'error':
+    default:
+      return {
+        background: theme.colors.error,
+        text: theme.colors.onError
+      };
+  }
+};
+const sizeMap = {
+  sm: {
+    fontSize: 10,
+    minWidth: 16,
+    height: 16,
+    paddingH: 5,
+    dot: 8
+  },
+  md: {
+    fontSize: 11,
+    minWidth: 20,
+    height: 20,
+    paddingH: 6,
+    dot: 10
+  }
+};
+const anchorPosition = (anchor, offset) => {
+  const o = -offset;
+  switch (anchor) {
+    case 'topLeft':
+      return {
+        top: o,
+        left: o
+      };
+    case 'bottomRight':
+      return {
+        bottom: o,
+        right: o
+      };
+    case 'bottomLeft':
+      return {
+        bottom: o,
+        left: o
+      };
+    case 'topRight':
+    default:
+      return {
+        top: o,
+        right: o
+      };
+  }
+};
+const formatValue = (value, max) => {
+  if (value === undefined || value === null) {
+    return null;
+  }
+  if (typeof value === 'number') {
+    if (value <= 0) {
+      return null;
+    }
+    return value > max ? `${max}+` : String(value);
+  }
+  const str = String(value);
+  return str.length === 0 ? null : str;
+};
+const Badge = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value,
+    max = 99,
+    variant = 'standard',
+    tone = 'error',
+    size = 'sm',
+    invisible = false,
+    loading = false,
+    children,
+    anchor = 'topRight',
+    pulse = false,
+    accessibilityLabel,
+    style,
+    badgeStyle,
+    textStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const tones = useMemo(() => toneFor(theme, tone), [theme, tone]);
+  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(createAnimatedValue(1)).current;
+  useEffect(() => {
+    if (!pulse || !shouldRender) {
+      setNativeValue(pulseScale, 1);
+      return;
+    }
+    const loop = Animated.loop(Animated.sequence([Animated.timing(pulseScale, {
+      toValue: 1.15,
+      duration: theme.motion.duration.slow,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }), Animated.timing(pulseScale, {
+      toValue: 1,
+      duration: theme.motion.duration.slow,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    })]));
+    loop.start();
+    return () => {
+      loop.stop();
+    };
+  }, [pulse, shouldRender, pulseScale, theme]);
+  const isDot = variant === 'dot';
+  const a11yRole = isDot ? 'image' : 'text';
+  const a11yLabel = accessibilityLabel ?? (isDot ? 'Notification indicator' : formatted ? `${formatted} unread` : undefined);
+  const badgeContent = shouldRender ? /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.badge, isDot ? {
+      width: sz.dot,
+      height: sz.dot,
+      borderRadius: sz.dot / 2,
+      paddingHorizontal: 0
+    } : {
+      minWidth: sz.minWidth,
+      height: sz.height,
+      borderRadius: theme.radius.full,
+      paddingHorizontal: sz.paddingH
+    }, {
+      backgroundColor: tones.background,
+      transform: [{
+        scale: pulseScale
+      }]
+    }, children ? {
+      position: 'absolute',
+      borderWidth: badgeBorderWidth,
+      borderColor: theme.colors.background.elevated,
+      ...anchorPosition(anchor, badgeAnchorOffset)
+    } : null, badgeStyle],
+    accessible: true,
+    accessibilityRole: a11yRole,
+    accessibilityLabel: a11yLabel,
+    children: !isDot && formatted !== null ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: tones.text,
+        fontSize: sz.fontSize,
+        ...fontFor(theme, 'bold')
+      }, textStyle],
+      numberOfLines: 1,
+      allowFontScaling: false,
+      children: formatted ?? ' '
+    }) : null
+  }) : null;
+  const rendered = children ? /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [styles.wrapper, style],
+    testID: testID,
+    children: [children, badgeContent]
+  }) : /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: style,
+    testID: testID,
+    children: badgeContent
+  });
+  if (loading) {
+    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',
+    alignSelf: 'flex-start'
+  },
+  badge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row'
+  },
+  text: {
+    textAlign: 'center',
+    includeFontPadding: false
+  }
+});
+export { Badge };
+export default Badge;
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Badge, default } from "./Badge.js";
+//# sourceMappingURL=index.js.map