@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,225 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Autocomplete = Autocomplete;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../hooks/index.js");
+var _index2 = require("../../theme/index.js");
+var _index3 = require("../../utils/index.js");
+var _index4 = require("../Input/index.js");
+var _index5 = require("../Spinner/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const defaultGetLabel = o => typeof o === 'string' ? o : String(o);
+function Autocomplete(props) {
+  const {
+    options,
+    value,
+    defaultValue,
+    onChangeText,
+    onSelect,
+    getOptionLabel,
+    getOptionKey,
+    filter,
+    minChars = 1,
+    maxResults = 8,
+    emptyText = 'No matches',
+    loading = false,
+    filterMode = 'client',
+    loadingText = 'Searching…',
+    placeholder,
+    label,
+    error,
+    helperText,
+    disabled = false,
+    size = 'md',
+    variant,
+    haptic,
+    style,
+    listStyle,
+    optionTextStyle,
+    testID
+  } = props;
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const [text, setText] = (0, _index.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? '',
+    onChange: onChangeText
+  });
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const [fieldHeight, setFieldHeight] = (0, _react.useState)(0);
+  const blurTimer = (0, _react.useRef)(null);
+  const labelOf = (0, _react.useCallback)(o => getOptionLabel ? getOptionLabel(o) : defaultGetLabel(o), [getOptionLabel]);
+  const filtered = (0, _react.useMemo)(() => {
+    // Server-side search: trust the provided options, don't re-filter them away.
+    if (filterMode === 'none') {
+      return options.slice(0, maxResults);
+    }
+    const q = text.trim();
+    if (q.length < minChars) {
+      return [];
+    }
+    const lower = q.toLowerCase();
+    const match = filter ? o => filter(o, q) : o => labelOf(o).toLowerCase().includes(lower);
+    return options.filter(match).slice(0, maxResults);
+  }, [options, text, minChars, maxResults, filter, labelOf, filterMode]);
+  const showList = focused && (loading || text.trim().length >= minChars);
+  const handleSelect = (0, _react.useCallback)(o => {
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index3.triggerHaptic)(h);
+    }
+    if (blurTimer.current) {
+      clearTimeout(blurTimer.current);
+    }
+    setText(labelOf(o));
+    setFocused(false);
+    _reactNative.Keyboard.dismiss();
+    onSelect(o);
+  }, [haptic, setText, labelOf, onSelect]);
+  _react.default.useEffect(() => () => {
+    if (blurTimer.current) {
+      clearTimeout(blurTimer.current);
+    }
+  }, []);
+  const onFieldLayout = (0, _react.useCallback)(e => {
+    setFieldHeight(e.nativeEvent.layout.height);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onLayout: onFieldLayout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Input, {
+        value: text,
+        onChangeText: setText,
+        onFocus: () => {
+          if (blurTimer.current) {
+            clearTimeout(blurTimer.current);
+          }
+          setFocused(true);
+        },
+        onBlur: () => {
+          blurTimer.current = setTimeout(() => setFocused(false), 120);
+        },
+        placeholder: placeholder,
+        label: label,
+        error: error,
+        helperText: helperText,
+        editable: !disabled
+        // editable={false} stops typing but says nothing to a screen reader,
+        // so a disabled field announced as editable is the bug this closes.
+        ,
+        accessibilityState: {
+          disabled
+        },
+        size: size,
+        variant: variant,
+        autoCorrect: false,
+        autoCapitalize: "none"
+      })
+    }), showList ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.list, {
+        top: fieldHeight,
+        backgroundColor: theme.colors.background.elevated,
+        borderColor: theme.colors.border.primary,
+        borderRadius: theme.radius.md,
+        ...theme.shadows.lg
+      }, listStyle],
+      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.loadingRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Spinner, {
+          size: "sm"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.loadingText, {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          children: loadingText
+        })]
+      }) : filtered.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.empty, {
+          color: theme.colors.text.tertiary,
+          fontSize: theme.typography.fontSize.sm
+        }],
+        children: emptyText
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        keyboardShouldPersistTaps: "handled",
+        style: styles.scroll,
+        children: filtered.map((o, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          onPress: () => handleSelect(o),
+          android_ripple: {
+            color: theme.colors.surface.pressed
+          },
+          style: ({
+            pressed
+          }) => [styles.option, {
+            paddingHorizontal: theme.spacing.md,
+            paddingVertical: theme.spacing.sm,
+            backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+          }],
+          accessibilityRole: "button",
+          accessibilityLabel: labelOf(o),
+          accessibilityState: {
+            selected: labelOf(o) === text
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.optionText, {
+              color: theme.colors.text.primary,
+              fontSize: theme.typography.fontSize.base
+            }, optionTextStyle],
+            numberOfLines: 1,
+            children: labelOf(o)
+          })
+        }, getOptionKey ? getOptionKey(o) : `${labelOf(o)}-${i}`))
+      })
+    }) : null]
+  });
+}
+Autocomplete.displayName = 'Autocomplete';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative',
+    zIndex: 10
+  },
+  list: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    overflow: 'hidden',
+    zIndex: 20,
+    maxHeight: 240
+  },
+  scroll: {
+    maxHeight: 240
+  },
+  option: {
+    width: '100%'
+  },
+  optionText: {
+    includeFontPadding: false
+  },
+  empty: {
+    padding: theme.spacing.md,
+    textAlign: 'center',
+    includeFontPadding: false
+  },
+  loadingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.sm,
+    padding: theme.spacing.md
+  },
+  loadingText: {
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = Autocomplete;
+//# sourceMappingURL=Autocomplete.js.map

package/lib/commonjs/components/Autocomplete/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Autocomplete", {
+  enumerable: true,
+  get: function () {
+    return _Autocomplete.Autocomplete;
+  }
+});
+var _Autocomplete = require("./Autocomplete.js");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,348 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AvatarGroup = exports.Avatar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../Skeleton/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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).
+ */
+
+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 = exports.Avatar = /*#__PURE__*/(0, _react.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 = (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;
+    }
+    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__*/(0, _jsxRuntime.jsxs)(_reactNative.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 ?? _reactNative.Image;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageEl, {
+        source: source,
+        onError: () => setImageFailed(true),
+        style: {
+          width: dimension,
+          height: dimension,
+          borderRadius
+        },
+        resizeMode: "cover",
+        accessibilityIgnoresInvertColors: true
+      });
+    })() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.initials, {
+        color: resolvedTextColor,
+        fontSize,
+        fontWeight: theme.typography.fontWeight[avatarTokens?.fontWeight ?? 'semibold']
+      }, textStyle],
+      numberOfLines: 1,
+      allowFontScaling: false,
+      children: initials ?? ' '
+    }), status ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(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',
+    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 = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  (0, _react.useEffect)(() => {
+    const anim = _reactNative.Animated.timing(opacity, {
+      toValue: 1,
+      duration: ENTRANCE_DURATION_MS,
+      delay,
+      easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [delay, opacity]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (0, _index.useTheme)();
+  const validChildren = (0, _react.useMemo)(() => _react.Children.toArray(children).filter(c => /*#__PURE__*/(0, _react.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 = (0, _react.useMemo)(() => resolveSize(size), [size]);
+  const overflowFontSize = Math.max(10, Math.round(overflowDimension * 0.34));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _react.cloneElement)(child, {
+        size
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarGroupItem, {
+        delay: index * STAGGER_MS,
+        marginLeft: index === 0 ? 0 : offset,
+        borderColor: borderColor,
+        borderWidth: borderWidth,
+        children: cloned
+      }, childKey);
+    }), showOverflow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarGroupItem, {
+      delay: visible.length * STAGGER_MS,
+      marginLeft: visible.length === 0 ? 0 : offset,
+      borderColor: borderColor,
+      borderWidth: borderWidth,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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]
+  });
+};
+exports.AvatarGroup = AvatarGroup;
+const groupStyles = _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  item: {
+    borderRadius: 9999
+  },
+  overflow: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+const AvatarWithGroup = Avatar;
+AvatarWithGroup.Group = AvatarGroup;
+var _default = exports.default = AvatarWithGroup;
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function () {
+    return _Avatar.Avatar;
+  }
+});
+Object.defineProperty(exports, "AvatarGroup", {
+  enumerable: true,
+  get: function () {
+    return _Avatar.AvatarGroup;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Avatar.default;
+  }
+});
+var _Avatar = _interopRequireWildcard(require("./Avatar.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map