@webority-technologies/mobile-ui 0.0.1

package/README.md

@@ -0,0 +1,15 @@
+# @webority-technologies/mobile-ui
+
+64 animated, accessible React Native components with a full theme system (light and dark), hooks,
+and a dependency-free form engine. The platform layer (HTTP, auth, config, logging) lives in
+[`@webority-technologies/mobile-core`](https://www.npmjs.com/package/@webority-technologies/mobile-core).
+
+```bash
+npm install @webority-technologies/mobile-ui
+```
+
+No external runtime dependencies beyond `@webority-technologies/mobile-core`. Requires
+`react-native-gesture-handler`, `react-native-reanimated` and `react-native-safe-area-context` as
+peers; `react-native-linear-gradient` and `react-native-haptic-feedback` are optional.
+
+Full documentation lives in the repository's `docs/` directory.

package/lib/commonjs/components/Accordion/Accordion.js

@@ -0,0 +1,331 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AccordionGroup = exports.Accordion = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.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); }
+const AccordionGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
+const useAccordionGroup = () => (0, _react.useContext)(AccordionGroupContext);
+const AccordionGroup = ({
+  children,
+  allowMultiple = false,
+  defaultExpandedKeys,
+  expandedKeys: expandedKeysProp,
+  onChange,
+  style,
+  testID
+}) => {
+  const isControlled = expandedKeysProp !== undefined;
+  const [internalKeys, setInternalKeys] = (0, _react.useState)(defaultExpandedKeys ?? []);
+  const keys = isControlled ? expandedKeysProp : internalKeys;
+  const setKeys = (0, _react.useCallback)(next => {
+    if (!isControlled) {
+      setInternalKeys(next);
+    }
+    onChange?.(next);
+  }, [isControlled, onChange]);
+  const toggle = (0, _react.useCallback)(id => {
+    const isOpen = keys.includes(id);
+    let next;
+    if (isOpen) {
+      next = keys.filter(k => k !== id);
+    } else if (allowMultiple) {
+      next = [...keys, id];
+    } else {
+      next = [id];
+    }
+    setKeys(next);
+  }, [keys, allowMultiple, setKeys]);
+  const isExpanded = (0, _react.useCallback)(id => keys.includes(id), [keys]);
+  const ctx = (0, _react.useMemo)(() => ({
+    isExpanded,
+    toggle,
+    allowMultiple
+  }), [isExpanded, toggle, allowMultiple]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionGroupContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: style,
+      testID: testID,
+      children: children
+    })
+  });
+};
+exports.AccordionGroup = AccordionGroup;
+AccordionGroup.displayName = 'AccordionGroup';
+const Chevron = ({
+  rotate,
+  color
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
+  style: [chevronStyles.icon, {
+    color,
+    transform: [{
+      rotate
+    }]
+  }],
+  accessible: false,
+  children: '▾'
+});
+const chevronStyles = _reactNative.StyleSheet.create({
+  icon: {
+    fontSize: 14,
+    lineHeight: 14,
+    includeFontPadding: false
+  }
+});
+const Accordion = props => {
+  const {
+    title,
+    children,
+    id,
+    expanded: expandedProp,
+    defaultExpanded = false,
+    onChange,
+    icon,
+    disabled = false,
+    variant = 'plain',
+    accessibilityLabel,
+    style,
+    headerStyle,
+    contentStyle,
+    contentWrapperStyle,
+    containerStyle,
+    testID,
+    loading = false,
+    haptic
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const group = useAccordionGroup();
+  const isControlled = expandedProp !== undefined;
+  const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
+  const groupExpanded = group && id ? group.isExpanded(id) : null;
+  const expanded = groupExpanded !== null ? groupExpanded : isControlled ? !!expandedProp : internalExpanded;
+  const [measuredHeight, setMeasuredHeight] = (0, _react.useState)(null);
+  const heightAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(expanded ? 1 : 0)).current;
+  const opacityAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(expanded ? 1 : 0)).current;
+  const rotateAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(expanded ? 1 : 0)).current;
+  const lastExpandedRef = (0, _react.useRef)(expanded);
+  (0, _react.useEffect)(() => {
+    // Skip animation when state matches the previous value (e.g. on mount).
+    if (lastExpandedRef.current === expanded) {
+      return;
+    }
+    lastExpandedRef.current = expanded;
+    const anim = _reactNative.Animated.parallel([_reactNative.Animated.timing(heightAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }),
+    // Opacity & rotate run alongside the height interpolation (which must
+    // use the JS driver). Driving them on JS too keeps everything in lockstep
+    // with no driver-mixing warnings, and is fine for two small properties.
+    _reactNative.Animated.timing(opacityAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(rotateAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    })]);
+    anim.start();
+    return () => anim.stop();
+  }, [expanded, heightAnim, opacityAnim, rotateAnim, theme.motion]);
+  const onContentLayout = (0, _react.useCallback)(e => {
+    const h = e.nativeEvent.layout.height;
+    if (h > 0 && h !== measuredHeight) {
+      setMeasuredHeight(h);
+    }
+  }, [measuredHeight]);
+  const handlePress = (0, _react.useCallback)(() => {
+    if (disabled) {
+      return;
+    }
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _hapticUtils.triggerHaptic)(h);
+    }
+    if (group && id) {
+      group.toggle(id);
+      onChange?.(!expanded);
+      return;
+    }
+    if (!isControlled) {
+      setInternalExpanded(!expanded);
+    }
+    onChange?.(!expanded);
+  }, [disabled, group, id, expanded, isControlled, onChange, haptic]);
+  const rotate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg']
+  });
+  const animatedHeight = measuredHeight === null ? undefined : heightAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, measuredHeight]
+  });
+  const cardStyle = variant === 'card' ? [styles.card, theme.shadows.sm, {
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radius.md
+  }] : null;
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSkeleton, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [cardStyle, style, containerStyle],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      onPress: handlePress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityState: {
+        expanded,
+        disabled
+      },
+      style: ({
+        pressed
+      }) => [styles.header, headerStyle, {
+        opacity: disabled ? 0.55 : pressed ? 0.85 : 1
+      }],
+      children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconLeft,
+        children: icon
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.title, {
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
+          fontSize: theme.typography.fontSize.base,
+          fontWeight: theme.typography.fontWeight.semibold
+        }],
+        numberOfLines: 2,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
+        rotate: rotate,
+        color: disabled ? theme.colors.text.disabled : theme.colors.text.secondary
+      })]
+    }), measuredHeight === null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.measurer,
+      pointerEvents: "none",
+      onLayout: onContentLayout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.content, contentStyle],
+        children: children
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.contentWrapper, measuredHeight === null ? {
+        height: 0,
+        opacity: 0
+      } : {
+        height: animatedHeight,
+        opacity: opacityAnim
+      }, contentWrapperStyle]
+      // Re-measure if children change size by listening to layout of inner
+      ,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        onLayout: onContentLayout,
+        style: [styles.content, contentStyle],
+        children: children
+      })
+    })]
+  });
+};
+exports.Accordion = Accordion;
+Accordion.displayName = 'Accordion';
+
+/**
+ * Placeholder shape for `<Accordion>`. Header pill with a title-line
+ * skeleton; content is collapsed (matches the closed-by-default behaviour).
+ */
+const AccordionSkeleton = ({
+  variant = 'plain',
+  style
+}) => {
+  const theme = (0, _index.useTheme)();
+  const isCard = variant === 'card';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [isCard ? {
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm,
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.md
+    } : {
+      paddingVertical: theme.spacing.sm
+    }, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        shape: "text",
+        width: "60%",
+        height: 18,
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        width: 16,
+        height: 16,
+        radius: "sm",
+        style: {
+          marginLeft: theme.spacing.sm
+        }
+      })]
+    })
+  });
+};
+AccordionSkeleton.displayName = 'AccordionSkeleton';
+Accordion.Skeleton = AccordionSkeleton;
+
+// Suppress unused warnings on platforms that don't support LayoutAnimation
+void _reactNative.LayoutAnimation;
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  card: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.components.accordion?.cardPaddingVertical ?? 4,
+    marginVertical: theme.spacing.xs
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: theme.spacing.sm
+  },
+  iconLeft: {
+    marginRight: theme.spacing.sm
+  },
+  title: {
+    flex: 1
+  },
+  contentWrapper: {
+    overflow: 'hidden'
+  },
+  content: {
+    paddingBottom: theme.spacing.sm
+  },
+  measurer: {
+    position: 'absolute',
+    opacity: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    zIndex: -1
+  }
+});
+var _default = exports.default = Accordion;
+//# sourceMappingURL=Accordion.js.map

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

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AnimatePresence = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../../hooks/index.js");
+var _index2 = 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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Animates a single child in on mount and out on unmount. Thin, theme-aware
+ * wrapper over Reanimated's `entering`/`exiting` — Reanimated keeps the view
+ * alive to play the exit, so the parent only toggles a condition. Honors the OS
+ * Reduce Motion setting (renders instantly when reduced).
+ *
+ * For animating items inside a list, use Reanimated's `itemLayoutAnimation`
+ * on `Animated.FlatList` instead — this wrapper targets single conditional nodes.
+ */
+const AnimatePresence = ({
+  children,
+  preset = 'fade',
+  duration,
+  style,
+  testID
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const reduceMotion = (0, _index.useReducedMotion)();
+  const visible = children !== null && children !== undefined && children !== false;
+  if (!visible) {
+    return null;
+  }
+  const dur = duration ?? theme.motion.duration.normal;
+  let entering;
+  let exiting;
+  if (!reduceMotion) {
+    switch (preset) {
+      case 'scale':
+        entering = _reactNativeReanimated.ZoomIn.duration(dur);
+        exiting = _reactNativeReanimated.ZoomOut.duration(dur);
+        break;
+      case 'slide-up':
+        entering = _reactNativeReanimated.FadeInUp.duration(dur);
+        exiting = _reactNativeReanimated.FadeOutDown.duration(dur);
+        break;
+      case 'slide-down':
+        entering = _reactNativeReanimated.FadeInDown.duration(dur);
+        exiting = _reactNativeReanimated.FadeOutUp.duration(dur);
+        break;
+      case 'fade':
+      default:
+        entering = _reactNativeReanimated.FadeIn.duration(dur);
+        exiting = _reactNativeReanimated.FadeOut.duration(dur);
+        break;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    entering: entering,
+    exiting: exiting,
+    style: style,
+    testID: testID,
+    children: children
+  });
+};
+exports.AnimatePresence = AnimatePresence;
+AnimatePresence.displayName = 'AnimatePresence';
+var _default = exports.default = AnimatePresence;
+//# sourceMappingURL=AnimatePresence.js.map

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

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