@webority-technologies/mobile 0.0.1

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

@@ -0,0 +1,278 @@
+"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 { useTheme } from "../../theme/index.js";
+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();
+};
+const PALETTE = ['#5B5BD6', '#0EA5A4', '#D97706', '#DB2777', '#2563EB', '#7C3AED', '#059669', '#DC2626'];
+const hashColor = seed => {
+  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,
+    name,
+    size = 'md',
+    shape = 'circle',
+    status = null,
+    statusPosition = 'bottomRight',
+    backgroundColor,
+    color,
+    accessibilityLabel,
+    style,
+    textStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const [imageFailed, setImageFailed] = useState(false);
+  const dimension = useMemo(() => resolveSize(size), [size]);
+  const borderRadius = useMemo(() => resolveRadius(shape, dimension), [shape, dimension]);
+  const initials = useMemo(() => initialsFromName(name), [name]);
+  const resolvedBackground = useMemo(() => {
+    if (backgroundColor) return backgroundColor;
+    return hashColor(name ?? '');
+  }, [backgroundColor, name]);
+  const resolvedTextColor = color ?? theme.colors.text.inverse;
+  const showImage = !!source && !imageFailed;
+  const fontSize = Math.max(10, Math.round(dimension * 0.4));
+  const statusSize = Math.max(8, Math.round(dimension * 0.25));
+  const statusBorder = 2;
+  const a11yLabel = accessibilityLabel ?? (name ? `${name}'s avatar` : 'Avatar');
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [styles.root, {
+      width: dimension,
+      height: dimension,
+      borderRadius,
+      backgroundColor: showImage ? theme.colors.background.tertiary : resolvedBackground
+    }, style],
+    accessible: true,
+    accessibilityRole: "image",
+    accessibilityLabel: a11yLabel,
+    testID: testID,
+    children: [showImage ? /*#__PURE__*/_jsx(Image, {
+      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.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: theme.colors.background.elevated
+      }],
+      accessible: false,
+      pointerEvents: "none"
+    }) : null]
+  });
+});
+Avatar.displayName = 'Avatar';
+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(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: ENTRANCE_DURATION_MS,
+      delay,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }).start();
+  }, [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,208 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/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.text.inverse
+      };
+    case 'success':
+      return {
+        background: theme.colors.success,
+        text: theme.colors.text.inverse
+      };
+    case 'warning':
+      return {
+        background: theme.colors.warning,
+        text: theme.colors.text.inverse
+      };
+    case 'info':
+      return {
+        background: theme.colors.info,
+        text: theme.colors.text.inverse
+      };
+    case 'neutral':
+      return {
+        background: theme.colors.background.tertiary,
+        text: theme.colors.text.primary
+      };
+    case 'error':
+    default:
+      return {
+        background: theme.colors.error,
+        text: theme.colors.text.inverse
+      };
+  }
+};
+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 => {
+  switch (anchor) {
+    case 'topLeft':
+      return {
+        top: -4,
+        left: -4
+      };
+    case 'bottomRight':
+      return {
+        bottom: -4,
+        right: -4
+      };
+    case 'bottomLeft':
+      return {
+        bottom: -4,
+        left: -4
+      };
+    case 'topRight':
+    default:
+      return {
+        top: -4,
+        right: -4
+      };
+  }
+};
+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,
+    children,
+    anchor = 'topRight',
+    pulse = false,
+    accessibilityLabel,
+    style,
+    badgeStyle,
+    textStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const tones = useMemo(() => toneFor(theme, tone), [theme, tone]);
+  const sz = sizeMap[size];
+  const formatted = variant === 'dot' ? null : formatValue(value, max);
+  const shouldRender = !invisible && (variant === 'dot' || formatted !== null);
+  const pulseScale = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    if (!pulse || !shouldRender) {
+      pulseScale.setValue(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: 1.5,
+      borderColor: theme.colors.background.elevated,
+      ...anchorPosition(anchor)
+    } : null, badgeStyle],
+    accessible: true,
+    accessibilityRole: a11yRole,
+    accessibilityLabel: a11yLabel,
+    children: !isDot && formatted !== null ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: tones.text,
+        fontSize: sz.fontSize,
+        fontWeight: theme.typography.fontWeight.bold
+      }, textStyle],
+      numberOfLines: 1,
+      allowFontScaling: false,
+      children: formatted
+    }) : null
+  }) : null;
+  if (children) {
+    return /*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      style: [styles.wrapper, style],
+      testID: testID,
+      children: [children, badgeContent]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: style,
+    testID: testID,
+    children: badgeContent
+  });
+});
+Badge.displayName = 'Badge';
+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