@webority-technologies/mobile 0.0.1

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

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Badge = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/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 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 = exports.Badge = /*#__PURE__*/(0, _react.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 = (0, _index.useTheme)();
+  const tones = (0, _react.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 = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  (0, _react.useEffect)(() => {
+    if (!pulse || !shouldRender) {
+      pulseScale.setValue(1);
+      return;
+    }
+    const loop = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(pulseScale, {
+      toValue: 1.15,
+      duration: theme.motion.duration.slow,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(pulseScale, {
+      toValue: 1,
+      duration: theme.motion.duration.slow,
+      easing: _reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      ref: ref,
+      style: [styles.wrapper, style],
+      testID: testID,
+      children: [children, badgeContent]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    style: style,
+    testID: testID,
+    children: badgeContent
+  });
+});
+Badge.displayName = 'Badge';
+const styles = _reactNative.StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    alignSelf: 'flex-start'
+  },
+  badge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row'
+  },
+  text: {
+    textAlign: 'center',
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = Badge;
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.Badge;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Badge.default;
+  }
+});
+var _Badge = _interopRequireWildcard(require("./Badge.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

package/lib/commonjs/components/Banner/Banner.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Banner = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/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 Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    title,
+    message,
+    variant = 'info',
+    icon,
+    actions,
+    dismissible = false,
+    onDismiss,
+    visible = true,
+    animateMount = true,
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const tint = (0, _react.useMemo)(() => tintFor(theme, variant), [theme, variant]);
+  const translateY = (0, _react.useRef)(new _reactNative.Animated.Value(animateMount && visible ? -20 : 0)).current;
+  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(animateMount && visible ? 0 : visible ? 1 : 0)).current;
+  const [mounted, setMounted] = (0, _react.useState)(visible);
+  const isFirstRun = (0, _react.useRef)(true);
+  (0, _react.useEffect)(() => {
+    // Skip running an animation on first mount if animateMount is false.
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      if (!animateMount) return;
+    }
+    if (visible) {
+      setMounted(true);
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
+        toValue: 0,
+        duration: theme.motion.duration.normal,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        useNativeDriver: true
+      })]).start();
+    } else if (mounted) {
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
+        toValue: -20,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(opacity, {
+        toValue: 0,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })]).start(() => {
+        setMounted(false);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+  if (!mounted) return null;
+  const renderIcon = () => {
+    if (icon === false) return null;
+    if (icon) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.iconWrap,
+      children: icon
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.iconCircle, {
+        backgroundColor: tint.bar + '22'
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.iconGlyph, {
+          color: tint.glyphColor
+        }],
+        accessible: false,
+        children: tint.glyph
+      })
+    });
+  };
+  const messageString = typeof message === 'string' ? message : '';
+  const builtA11y = accessibilityLabel ?? (title ? `${title}. ${messageString}` : messageString || undefined);
+  const liveRegion = variant === 'error' ? 'assertive' : 'polite';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    ref: ref,
+    accessibilityRole: 'alert',
+    accessibilityLiveRegion: liveRegion,
+    accessibilityLabel: builtA11y,
+    testID: testID,
+    style: [styles.container, {
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.radius.md,
+      padding: theme.spacing.md,
+      opacity,
+      transform: [{
+        translateY
+      }]
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.tintBar, {
+        backgroundColor: tint.bar
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textBlock,
+        children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.base,
+            fontWeight: theme.typography.fontWeight.semibold,
+            lineHeight: 20
+          },
+          numberOfLines: 2,
+          children: title
+        }) : null, typeof message === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm,
+            lineHeight: 18,
+            marginTop: title ? 2 : 0
+          },
+          children: message
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            marginTop: title ? 2 : 0
+          },
+          children: message
+        })]
+      }), dismissible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss banner",
+        onPress: onDismiss,
+        hitSlop: 8,
+        style: ({
+          pressed
+        }) => [styles.closeBtn, {
+          backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: theme.colors.text.secondary,
+            fontSize: 18,
+            fontWeight: theme.typography.fontWeight.bold,
+            lineHeight: 18
+          },
+          accessible: false,
+          children: "\xD7"
+        })
+      }) : null]
+    }), actions && actions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.actionsRow,
+      children: actions.map((action, idx) => {
+        const isPrimary = (action.tone ?? 'primary') === 'primary';
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: action.label,
+          onPress: action.onPress,
+          style: ({
+            pressed
+          }) => [styles.actionBtn, {
+            backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: {
+              color: isPrimary ? tint.glyphColor : theme.colors.text.secondary,
+              fontSize: theme.typography.fontSize.sm,
+              fontWeight: theme.typography.fontWeight.semibold
+            },
+            numberOfLines: 1,
+            children: action.label
+          })
+        }, `${action.label}-${idx}`);
+      })
+    }) : null]
+  });
+});
+Banner.displayName = 'Banner';
+const tintFor = (theme, variant) => {
+  switch (variant) {
+    case 'success':
+      return {
+        bar: theme.colors.success,
+        glyphColor: theme.colors.success,
+        glyph: '✓'
+      };
+    case 'warning':
+      return {
+        bar: theme.colors.warning,
+        glyphColor: theme.colors.warning,
+        glyph: '⚠'
+      };
+    case 'error':
+      return {
+        bar: theme.colors.error,
+        glyphColor: theme.colors.error,
+        glyph: '✗'
+      };
+    case 'neutral':
+      return {
+        bar: theme.colors.text.tertiary,
+        glyphColor: theme.colors.text.secondary,
+        glyph: 'i'
+      };
+    case 'info':
+    default:
+      return {
+        bar: theme.colors.primary,
+        glyphColor: theme.colors.primary,
+        glyph: 'i'
+      };
+  }
+};
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    paddingLeft: 16
+  },
+  tintBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: 4
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
+  },
+  iconWrap: {
+    marginRight: 12
+  },
+  iconCircle: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12
+  },
+  iconGlyph: {
+    fontSize: 15,
+    fontWeight: '700',
+    lineHeight: 17
+  },
+  textBlock: {
+    flex: 1,
+    paddingRight: 8
+  },
+  closeBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 4
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 8,
+    gap: 4
+  },
+  actionBtn: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8
+  }
+});
+var _default = exports.default = Banner;
+//# sourceMappingURL=Banner.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Banner", {
+  enumerable: true,
+  get: function () {
+    return _Banner.Banner;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Banner.default;
+  }
+});
+var _Banner = _interopRequireWildcard(require("./Banner.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