@webority/mobile-ui 0.0.0-stage → 0.0.33

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

@@ -0,0 +1,358 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AppBar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _usePressAnimation = require("../../hooks/usePressAnimation.js");
+var _index = require("../../theme/index.js");
+var _corners = require("../../utils/corners.js");
+var _hapticUtils = require("../../utils/hapticUtils.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 variantSize = (theme, variant) => {
+  switch (variant) {
+    case 'compact':
+      return {
+        height: 44,
+        titleSize: theme.typography.fontSize.lg,
+        titleWeight: 'semibold',
+        alignBottom: false
+      };
+    case 'large':
+      return {
+        height: 96,
+        titleSize: theme.typography.fontSize['2xl'],
+        titleWeight: 'bold',
+        alignBottom: true
+      };
+    case 'default':
+    default:
+      return {
+        height: 56,
+        titleSize: theme.typography.fontSize.lg,
+        titleWeight: 'semibold',
+        alignBottom: false
+      };
+  }
+};
+const ActionButton = ({
+  action,
+  side,
+  badgeStyle,
+  haptic
+}) => {
+  const theme = (0, _index.useTheme)();
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = (0, _usePressAnimation.usePressAnimation)({
+    enabled: true
+  });
+  const styles = (0, _react.useMemo)(() => buildActionStyles(theme), [theme]);
+  const onPress = () => {
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _hapticUtils.triggerHaptic)(h);
+    }
+    action.onPress();
+  };
+  const badgeValue = action.badge;
+  const badgeIsDot = typeof badgeValue === 'number' && badgeValue === 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: {
+      transform: [{
+        scale
+      }]
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      onPress: onPress,
+      onPressIn: pressIn,
+      onPressOut: pressOut,
+      accessibilityRole: "button",
+      accessibilityLabel: action.accessibilityLabel,
+      testID: action.testID,
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: true
+      },
+      style: ({
+        pressed
+      }) => [styles.actionButton, side === 'left' ? styles.actionLeft : styles.actionRight, pressed ? styles.actionPressed : null],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconWrap,
+        children: action.icon
+      }), badgeValue !== undefined && !badgeIsDot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.badge, badgeStyle],
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.badgeText,
+          numberOfLines: 1,
+          children: String(badgeValue)
+        })
+      }) : null]
+    })
+  });
+};
+const COLLAPSE_RANGE = 60;
+const LARGE_TITLE_SCALE_END = 0.71; // 2xl(24) -> lg(~17) ≈ 0.71
+
+const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    title,
+    subtitle,
+    titleAlignment = 'left',
+    leftAction,
+    rightActions,
+    variant = 'default',
+    transparent = false,
+    scrollY,
+    style,
+    containerStyle,
+    titleStyle,
+    subtitleStyle,
+    badgeStyle,
+    haptic,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const v = (0, _react.useMemo)(() => variantSize(theme, variant), [theme, variant]);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const isCollapsing = variant === 'large' && scrollY !== undefined;
+
+  // 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 = {
+      inputRange: [0, COLLAPSE_RANGE],
+      extrapolate: 'clamp'
+    };
+    return {
+      titleScale: scrollY.interpolate({
+        ...clamp,
+        outputRange: [1, LARGE_TITLE_SCALE_END]
+      }),
+      // Translate the large title from bottom-left up into the compact bar
+      // area. Approximate vertical travel = (large 96 - default 56) / 2.
+      titleTranslateY: scrollY.interpolate({
+        ...clamp,
+        outputRange: [0, collapseTranslateDistance]
+      }),
+      titleTranslateX: scrollY.interpolate({
+        ...clamp,
+        // Left-align large -> centred compact: nudge slightly toward centre.
+        outputRange: titleAlignment === 'center' ? [0, 0] : [0, 8]
+      }),
+      subtitleOpacity: scrollY.interpolate({
+        inputRange: [0, COLLAPSE_RANGE / 2],
+        outputRange: [1, 0],
+        extrapolate: 'clamp'
+      }),
+      barHeight: scrollY.interpolate({
+        ...clamp,
+        outputRange: [96, 56]
+      }),
+      borderOpacity: scrollY.interpolate({
+        ...clamp,
+        outputRange: [0, 1]
+      })
+    };
+  }, [scrollY, titleAlignment, collapseTranslateDistance]);
+  const titleNode = title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
+    style: [styles.title, {
+      fontSize: v.titleSize,
+      fontWeight: theme.typography.fontWeight[v.titleWeight],
+      textAlign: titleAlignment === 'center' ? 'center' : 'left'
+    }, isCollapsing && collapse ? {
+      transform: [{
+        translateX: collapse.titleTranslateX
+      }, {
+        translateY: collapse.titleTranslateY
+      }, {
+        scale: collapse.titleScale
+      }]
+    } : null, titleStyle],
+    numberOfLines: 1,
+    children: title
+  }) : null;
+  const subtitleNode = subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
+    style: [styles.subtitle, {
+      textAlign: titleAlignment === 'center' ? 'center' : 'left'
+    }, isCollapsing && collapse ? {
+      opacity: collapse.subtitleOpacity
+    } : null, subtitleStyle],
+    numberOfLines: 1,
+    children: subtitle
+  }) : null;
+  const titleBlock = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.titleColumn, titleAlignment === 'center' ? styles.titleColumnCenter : null, v.alignBottom ? styles.titleColumnBottom : null],
+    children: [titleNode, subtitleNode]
+  });
+
+  // Whole-bar height needs the JS driver (height isn't transform/opacity).
+  // Border opacity is animated via a dedicated overlay so the underlying
+  // background stays on the native driver.
+  const RootContainer = isCollapsing ? _reactNative.Animated.View : _reactNative.View;
+  const rootHeightStyle = isCollapsing && collapse ? {
+    height: _reactNative.Animated.add(collapse.barHeight, new _reactNative.Animated.Value(insets.top))
+  } : {
+    height: v.height + insets.top
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootContainer, {
+    ref: ref,
+    accessibilityRole: "header",
+    testID: testID,
+    style: [styles.root, {
+      paddingTop: insets.top,
+      backgroundColor: transparent ? 'transparent' : theme.colors.background.elevated
+    }, rootHeightStyle,
+    // Static border for non-collapsing case; collapsing case overlays an
+    // animated border below.
+    !isCollapsing ? {
+      borderBottomWidth: transparent ? 0 : _reactNative.StyleSheet.hairlineWidth,
+      borderBottomColor: theme.colors.border.primary
+    } : null, style, containerStyle],
+    children: [isCollapsing && collapse && !transparent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      pointerEvents: "none",
+      style: [styles.animatedBorder, {
+        backgroundColor: theme.colors.border.primary,
+        opacity: collapse.borderOpacity
+      }]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.row, v.alignBottom ? styles.rowAlignBottom : null, {
+        flex: 1
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.sideSlot,
+        children: leftAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
+          action: leftAction,
+          side: "left",
+          haptic: haptic
+        }) : null
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.center, titleAlignment === 'center' ? styles.centerAligned : styles.centerLeft],
+        children: titleBlock
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.sideSlot, styles.sideSlotRight],
+        children: rightActions?.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
+          action: action,
+          side: "right",
+          badgeStyle: badgeStyle,
+          haptic: haptic
+        }, `appbar-right-${index}`))
+      })]
+    })]
+  });
+});
+AppBar.displayName = 'AppBar';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  root: {
+    width: '100%'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: theme.spacing.xs
+  },
+  rowAlignBottom: {
+    alignItems: 'flex-end',
+    paddingBottom: theme.spacing.sm
+  },
+  sideSlot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: theme.components.appBar?.sideSlotMinWidth ?? 48
+  },
+  sideSlotRight: {
+    justifyContent: 'flex-end'
+  },
+  center: {
+    flex: 1,
+    paddingHorizontal: theme.spacing.xs
+  },
+  centerAligned: {
+    alignItems: 'center'
+  },
+  centerLeft: {
+    alignItems: 'flex-start'
+  },
+  titleColumn: {
+    flexDirection: 'column'
+  },
+  titleColumnCenter: {
+    alignItems: 'center'
+  },
+  titleColumnBottom: {
+    justifyContent: 'flex-end'
+  },
+  title: {
+    color: theme.colors.text.primary
+  },
+  subtitle: {
+    marginTop: theme.components.appBar?.subtitleMarginTop ?? 2,
+    color: theme.colors.text.tertiary,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.normal
+  },
+  animatedBorder: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: _reactNative.StyleSheet.hairlineWidth
+  }
+});
+const buildActionStyles = theme => _reactNative.StyleSheet.create({
+  actionButton: {
+    width: theme.components.appBar?.actionButtonSize ?? 40,
+    height: theme.components.appBar?.actionButtonSize ?? 40,
+    borderRadius: theme.radius.full,
+    ..._corners.smoothCorners,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  actionLeft: {
+    marginRight: theme.spacing.xs
+  },
+  actionRight: {
+    marginLeft: theme.spacing.xs
+  },
+  actionPressed: {
+    backgroundColor: theme.colors.surface.pressed
+  },
+  iconWrap: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badge: {
+    position: 'absolute',
+    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,
+    ..._corners.smoothCorners,
+    backgroundColor: theme.colors.error,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badgeText: {
+    color: theme.colors.text.inverse,
+    fontSize: theme.components.appBar?.badgeFontSize ?? 10,
+    fontWeight: theme.typography.fontWeight.semibold,
+    lineHeight: theme.components.appBar?.badgeLineHeight ?? 12
+  }
+});
+var _default = exports.default = AppBar;
+//# sourceMappingURL=AppBar.js.map

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

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

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppIcon = exports.APP_ICON_SIZES = void 0;
+Object.defineProperty(exports, "CURATED_ICON_NAMES", {
+  enumerable: true,
+  get: function () {
+    return _glyphsG.CURATED_ICON_NAMES;
+  }
+});
+Object.defineProperty(exports, "ICON_NAMES", {
+  enumerable: true,
+  get: function () {
+    return _catalogG.ICON_NAMES;
+  }
+});
+exports.resolveGlyph = exports.default = exports.buildIconXml = void 0;
+var _mobileCore = require("@webority/mobile-core");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNativeSvg = require("react-native-svg");
+var _index = require("../../theme/index.js");
+var _catalogG = require("./catalog.g.js");
+var _glyphsG = require("./glyphs.g.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); }
+/**
+ * AppIcon — the design system's icon set, on mobile.
+ *
+ * Draws the same Iconsax glyphs webority-ui's `AppIcon` draws on the web,
+ * keyed by the same names, so a feature that says `<AppIcon name="send" />`
+ * looks identical in the portal and in the app. Two tiers, both generated
+ * from webority-ui by `scripts/sync-icons.mjs` (never hand-edit them):
+ *
+ *   - the curated set: the design system's semantic names ("plus",
+ *     "eye-off", "alert-circle") in `glyphs.g.ts` (linear, evaluated at
+ *     import) and `variants.g.ts` (the five other styles, on first use);
+ *   - the full Iconsax catalogue: every name, every style, as one module per
+ *     style and first letter under `catalog/`, reached through the static
+ *     require map in `catalog.g.ts`. A shard is evaluated the first time an
+ *     icon from it is drawn, so app start does not pay for the catalogue.
+ *
+ * Rendering: the bodies are 24x24 SVG markup with `currentColor`; we wrap
+ * them in an `<svg>` at the requested size, substitute the colour, and hand
+ * the string to react-native-svg's `SvgXml`.
+ */
+
+/** `linear` is the default Iconsax style; the rest come from the lazy modules. */
+
+/** Pixel sizes behind the size tokens; a raw number is accepted too. */
+const APP_ICON_SIZES = exports.APP_ICON_SIZES = {
+  xs: 14,
+  sm: 18,
+  md: 22,
+  lg: 28,
+  xl: 36
+};
+/**
+ * The lazy tiers are reached through literal `require` calls (Metro inlines
+ * them). A bundler with no `require` at runtime (the Vite web demo) throws
+ * `require is not defined` the first time one runs; there the tier is simply
+ * absent and the caller falls back to the curated linear glyph or nothing,
+ * which beats taking the screen down for an icon style.
+ */
+const tryRequire = load => {
+  try {
+    return load();
+  } catch {
+    return null;
+  }
+};
+let curatedVariants = null;
+const loadCuratedVariants = () => {
+  if (!curatedVariants) {
+    // A literal require so Metro can inline it: evaluated here, on first use.
+    curatedVariants = tryRequire(() => require('./variants.g').VARIANT_GLYPHS) ?? {};
+  }
+  return curatedVariants;
+};
+
+/** Memoised per-shard lookups so a letter module is required at most once. */
+const shardCache = new Map();
+const loadShard = (style, name) => {
+  const letter = name[0]?.toLowerCase() ?? '';
+  const key = `${style}:${letter}`;
+  const cached = shardCache.get(key);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const loader = _catalogG.CATALOG_LOADERS[style]?.[letter];
+  const shard = loader ? tryRequire(loader) : null;
+  shardCache.set(key, shard);
+  return shard;
+};
+const warned = new Set();
+
+/** Resolve the SVG body for a name + variant, or null when the name is unknown. */
+const resolveGlyph = (name, variant = 'linear') => {
+  // Curated names first: the semantic set is the design system's contract.
+  const curatedLinear = _glyphsG.GLYPHS[name];
+  if (curatedLinear) {
+    if (variant === 'linear') {
+      return curatedLinear;
+    }
+    return loadCuratedVariants()[variant]?.[name] ?? curatedLinear;
+  }
+  // Then the full catalogue: the requested style, falling back to linear.
+  const styled = loadShard(variant, name)?.[name];
+  if (styled) {
+    return styled;
+  }
+  return variant === 'linear' ? null : loadShard('linear', name)?.[name] ?? null;
+};
+
+/** Build the complete SVG document AppIcon hands to react-native-svg. */
+exports.resolveGlyph = resolveGlyph;
+const buildIconXml = (body, size, color) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none">${body.replace(/currentColor/g, color)}</svg>`;
+exports.buildIconXml = buildIconXml;
+const AppIcon = ({
+  name,
+  size = 'md',
+  color,
+  variant = 'linear',
+  style,
+  accessibilityLabel,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const px = typeof size === 'number' ? size : APP_ICON_SIZES[size];
+  const resolvedColor = color ?? theme.colors.text.primary;
+  const body = resolveGlyph(name, variant);
+  const xml = (0, _react.useMemo)(() => body ? buildIconXml(body, px, resolvedColor) : null, [body, px, resolvedColor]);
+  if (!xml) {
+    if (__DEV__ && !warned.has(name)) {
+      warned.add(name);
+      _mobileCore.Logger.warn(`[AppIcon] Unknown icon "${name}". Names come from webority-ui's icon map and the Iconsax catalogue; run scripts/sync-icons.mjs after adding one there.`);
+    }
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.SvgXml, {
+    xml: xml,
+    width: px,
+    height: px,
+    style: style,
+    accessible: accessibilityLabel != null,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityLabel != null ? 'image' : undefined,
+    testID: testID
+  });
+};
+exports.AppIcon = AppIcon;
+AppIcon.displayName = 'AppIcon';
+var _default = exports.default = AppIcon;
+//# sourceMappingURL=AppIcon.js.map