@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/hooks/usePressAnimation.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePressAnimation = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../theme/index.js");
+const usePressAnimation = ({
+  scaleTo = 0.97,
+  pressDuration,
+  enabled = true
+} = {}) => {
+  const theme = (0, _index.useTheme)();
+  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const pressIn = (0, _react.useCallback)(() => {
+    if (!enabled) {
+      return;
+    }
+    _reactNative.Animated.timing(scale, {
+      toValue: scaleTo,
+      duration: pressDuration ?? theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }).start();
+  }, [enabled, scale, scaleTo, pressDuration, theme]);
+  const pressOut = (0, _react.useCallback)(() => {
+    if (!enabled) {
+      return;
+    }
+    _reactNative.Animated.spring(scale, {
+      toValue: 1,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    }).start();
+  }, [enabled, scale, theme]);
+  return {
+    scale,
+    pressIn,
+    pressOut
+  };
+};
+exports.usePressAnimation = usePressAnimation;
+//# sourceMappingURL=usePressAnimation.js.map

package/lib/commonjs/hooks/useReducedMotion.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReducedMotion = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+/**
+ * Tracks the OS "Reduce Motion" accessibility setting. The library's
+ * ThemeProvider uses this to collapse `theme.motion` (durations → 0, springs →
+ * near-instant) so animations don't trigger vestibular discomfort; consumers
+ * can also read it directly to swap an animated path for a static one.
+ */
+const useReducedMotion = () => {
+  const [reduced, setReduced] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    let mounted = true;
+    _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(value => {
+      if (mounted) {
+        setReduced(value);
+      }
+    });
+    const sub = _reactNative.AccessibilityInfo.addEventListener('reduceMotionChanged', value => setReduced(value));
+    return () => {
+      mounted = false;
+      sub.remove();
+    };
+  }, []);
+  return reduced;
+};
+exports.useReducedMotion = useReducedMotion;
+//# sourceMappingURL=useReducedMotion.js.map

package/lib/commonjs/hooks/useToggle.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToggle = void 0;
+var _react = require("react");
+const useToggle = (initial = false) => {
+  const [value, setValue] = (0, _react.useState)(initial);
+  const toggle = (0, _react.useCallback)(() => setValue(v => !v), []);
+  const setOn = (0, _react.useCallback)(() => setValue(true), []);
+  const setOff = (0, _react.useCallback)(() => setValue(false), []);
+  return {
+    value,
+    toggle,
+    setOn,
+    setOff,
+    setValue
+  };
+};
+exports.useToggle = useToggle;
+//# sourceMappingURL=useToggle.js.map

package/lib/commonjs/index.js

@@ -0,0 +1,341 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  deletePath: true,
+  Form: true,
+  getPath: true,
+  rules: true,
+  setPath: true,
+  useField: true,
+  useFieldArray: true,
+  useForm: true,
+  useFormContext: true,
+  useOptionalFormContext: true,
+  useControllableState: true,
+  useDebounce: true,
+  usePressAnimation: true,
+  useReducedMotion: true,
+  useToggle: true,
+  initUI: true,
+  NetworkStatusBanner: true,
+  darkTheme: true,
+  getColorMode: true,
+  getTheme: true,
+  lightTheme: true,
+  mergeTheme: true,
+  resetTheme: true,
+  setColorMode: true,
+  setTheme: true,
+  subscribeTheme: true,
+  ThemeProvider: true,
+  useTheme: true,
+  useThemeMode: true,
+  Breakpoints: true,
+  configureFeedback: true,
+  feedback: true,
+  hapticForIntent: true,
+  isFeedbackEnabled: true,
+  isScreenSize: true,
+  isTablet: true,
+  Margin: true,
+  Padding: true,
+  Responsive: true,
+  ScreenDimensions: true,
+  Spacing: true,
+  setHapticImplementation: true,
+  shadowStyle: true,
+  triggerHaptic: true,
+  warnUnknownProps: true
+};
+Object.defineProperty(exports, "Breakpoints", {
+  enumerable: true,
+  get: function () {
+    return _index6.Breakpoints;
+  }
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () {
+    return _index2.Form;
+  }
+});
+Object.defineProperty(exports, "Margin", {
+  enumerable: true,
+  get: function () {
+    return _index6.Margin;
+  }
+});
+Object.defineProperty(exports, "NetworkStatusBanner", {
+  enumerable: true,
+  get: function () {
+    return _index4.NetworkStatusBanner;
+  }
+});
+Object.defineProperty(exports, "Padding", {
+  enumerable: true,
+  get: function () {
+    return _index6.Padding;
+  }
+});
+Object.defineProperty(exports, "Responsive", {
+  enumerable: true,
+  get: function () {
+    return _index6.Responsive;
+  }
+});
+Object.defineProperty(exports, "ScreenDimensions", {
+  enumerable: true,
+  get: function () {
+    return _index6.ScreenDimensions;
+  }
+});
+Object.defineProperty(exports, "Spacing", {
+  enumerable: true,
+  get: function () {
+    return _index6.Spacing;
+  }
+});
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _index5.ThemeProvider;
+  }
+});
+Object.defineProperty(exports, "configureFeedback", {
+  enumerable: true,
+  get: function () {
+    return _index6.configureFeedback;
+  }
+});
+Object.defineProperty(exports, "darkTheme", {
+  enumerable: true,
+  get: function () {
+    return _index5.darkTheme;
+  }
+});
+Object.defineProperty(exports, "deletePath", {
+  enumerable: true,
+  get: function () {
+    return _index2.deletePath;
+  }
+});
+Object.defineProperty(exports, "feedback", {
+  enumerable: true,
+  get: function () {
+    return _index6.feedback;
+  }
+});
+Object.defineProperty(exports, "getColorMode", {
+  enumerable: true,
+  get: function () {
+    return _index5.getColorMode;
+  }
+});
+Object.defineProperty(exports, "getPath", {
+  enumerable: true,
+  get: function () {
+    return _index2.getPath;
+  }
+});
+Object.defineProperty(exports, "getTheme", {
+  enumerable: true,
+  get: function () {
+    return _index5.getTheme;
+  }
+});
+Object.defineProperty(exports, "hapticForIntent", {
+  enumerable: true,
+  get: function () {
+    return _index6.hapticForIntent;
+  }
+});
+Object.defineProperty(exports, "initUI", {
+  enumerable: true,
+  get: function () {
+    return _initUI.initUI;
+  }
+});
+Object.defineProperty(exports, "isFeedbackEnabled", {
+  enumerable: true,
+  get: function () {
+    return _index6.isFeedbackEnabled;
+  }
+});
+Object.defineProperty(exports, "isScreenSize", {
+  enumerable: true,
+  get: function () {
+    return _index6.isScreenSize;
+  }
+});
+Object.defineProperty(exports, "isTablet", {
+  enumerable: true,
+  get: function () {
+    return _index6.isTablet;
+  }
+});
+Object.defineProperty(exports, "lightTheme", {
+  enumerable: true,
+  get: function () {
+    return _index5.lightTheme;
+  }
+});
+Object.defineProperty(exports, "mergeTheme", {
+  enumerable: true,
+  get: function () {
+    return _index5.mergeTheme;
+  }
+});
+Object.defineProperty(exports, "resetTheme", {
+  enumerable: true,
+  get: function () {
+    return _index5.resetTheme;
+  }
+});
+Object.defineProperty(exports, "rules", {
+  enumerable: true,
+  get: function () {
+    return _index2.rules;
+  }
+});
+Object.defineProperty(exports, "setColorMode", {
+  enumerable: true,
+  get: function () {
+    return _index5.setColorMode;
+  }
+});
+Object.defineProperty(exports, "setHapticImplementation", {
+  enumerable: true,
+  get: function () {
+    return _index6.setHapticImplementation;
+  }
+});
+Object.defineProperty(exports, "setPath", {
+  enumerable: true,
+  get: function () {
+    return _index2.setPath;
+  }
+});
+Object.defineProperty(exports, "setTheme", {
+  enumerable: true,
+  get: function () {
+    return _index5.setTheme;
+  }
+});
+Object.defineProperty(exports, "shadowStyle", {
+  enumerable: true,
+  get: function () {
+    return _index6.shadowStyle;
+  }
+});
+Object.defineProperty(exports, "subscribeTheme", {
+  enumerable: true,
+  get: function () {
+    return _index5.subscribeTheme;
+  }
+});
+Object.defineProperty(exports, "triggerHaptic", {
+  enumerable: true,
+  get: function () {
+    return _index6.triggerHaptic;
+  }
+});
+Object.defineProperty(exports, "useControllableState", {
+  enumerable: true,
+  get: function () {
+    return _index3.useControllableState;
+  }
+});
+Object.defineProperty(exports, "useDebounce", {
+  enumerable: true,
+  get: function () {
+    return _index3.useDebounce;
+  }
+});
+Object.defineProperty(exports, "useField", {
+  enumerable: true,
+  get: function () {
+    return _index2.useField;
+  }
+});
+Object.defineProperty(exports, "useFieldArray", {
+  enumerable: true,
+  get: function () {
+    return _index2.useFieldArray;
+  }
+});
+Object.defineProperty(exports, "useForm", {
+  enumerable: true,
+  get: function () {
+    return _index2.useForm;
+  }
+});
+Object.defineProperty(exports, "useFormContext", {
+  enumerable: true,
+  get: function () {
+    return _index2.useFormContext;
+  }
+});
+Object.defineProperty(exports, "useOptionalFormContext", {
+  enumerable: true,
+  get: function () {
+    return _index2.useOptionalFormContext;
+  }
+});
+Object.defineProperty(exports, "usePressAnimation", {
+  enumerable: true,
+  get: function () {
+    return _index3.usePressAnimation;
+  }
+});
+Object.defineProperty(exports, "useReducedMotion", {
+  enumerable: true,
+  get: function () {
+    return _index3.useReducedMotion;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _index5.useTheme;
+  }
+});
+Object.defineProperty(exports, "useThemeMode", {
+  enumerable: true,
+  get: function () {
+    return _index5.useThemeMode;
+  }
+});
+Object.defineProperty(exports, "useToggle", {
+  enumerable: true,
+  get: function () {
+    return _index3.useToggle;
+  }
+});
+Object.defineProperty(exports, "warnUnknownProps", {
+  enumerable: true,
+  get: function () {
+    return _index6.warnUnknownProps;
+  }
+});
+var _index = require("./components/index.js");
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index[key];
+    }
+  });
+});
+var _index2 = require("./form/index.js");
+var _index3 = require("./hooks/index.js");
+var _initUI = require("./initUI.js");
+var _index4 = require("./network/index.js");
+var _index5 = require("./theme/index.js");
+var _index6 = require("./utils/index.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/initUI.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initUI = void 0;
+var _index = require("./theme/index.js");
+/**
+ * Configure the global functional theme API used outside of React tree
+ * (use ThemeProvider for React-tree consumers; both can coexist).
+ */
+const initUI = (options = {}) => {
+  if (options.defaultMode) {
+    (0, _index.setColorMode)(options.defaultMode);
+  }
+  if (options.light) {
+    (0, _index.setTheme)(options.light, 'light');
+  }
+  if (options.dark) {
+    (0, _index.setTheme)(options.dark, 'dark');
+  }
+};
+exports.initUI = initUI;
+//# sourceMappingURL=initUI.js.map

package/lib/commonjs/network/NetworkStatusBanner.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NetworkStatusBanner = void 0;
+var _mobileCore = require("@webority-technologies/mobile-core");
+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); }
+/**
+ * A subtle animated banner that slides in when the device goes offline.
+ * Mount once near the app root (above your navigation tree).
+ */
+const NetworkStatusBanner = ({
+  message = 'You are offline. Some features may be unavailable.',
+  position = 'top',
+  style,
+  disabled = false
+}) => {
+  const theme = (0, _index.useTheme)();
+  const {
+    isConnected,
+    isInternetReachable
+  } = (0, _mobileCore.useNetworkStatus)();
+  const offline = !disabled && (!isConnected || isInternetReachable === false);
+  const slide = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(slide, {
+      toValue: offline ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(opacity, {
+      toValue: offline ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      useNativeDriver: true
+    })]).start();
+  }, [offline, slide, opacity, theme.motion.duration.normal]);
+  const styles = (0, _react.useMemo)(() => buildStyles(), []);
+  const translateY = slide.interpolate({
+    inputRange: [0, 1],
+    outputRange: [position === 'top' ? -56 : 56, 0]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    pointerEvents: offline ? 'auto' : 'none',
+    accessibilityRole: "alert",
+    accessibilityLiveRegion: offline ? 'polite' : 'none',
+    style: [styles.container, position === 'top' ? styles.top : styles.bottom, {
+      backgroundColor: theme.colors.error,
+      opacity,
+      transform: [{
+        translateY
+      }]
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: {
+        color: theme.colors.text.inverse,
+        fontSize: theme.typography.fontSize.sm,
+        fontWeight: theme.typography.fontWeight.semibold,
+        textAlign: 'center'
+      },
+      numberOfLines: 2,
+      children: message
+    })
+  });
+};
+exports.NetworkStatusBanner = NetworkStatusBanner;
+const buildStyles = () => _reactNative.StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    zIndex: 1000,
+    elevation: 8
+  },
+  top: {
+    top: 0
+  },
+  bottom: {
+    bottom: 0
+  }
+});
+var _default = exports.default = NetworkStatusBanner;
+//# sourceMappingURL=NetworkStatusBanner.js.map

package/lib/commonjs/network/index.js

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

package/lib/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/commonjs/theme/Gradient.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isGradientAvailable = exports.Gradient = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Render a linear gradient using `react-native-linear-gradient` when available.
+ *
+ * The dep is OPTIONAL — apps that never use gradients don't need it installed.
+ * If `<Gradient>` (or any component that accepts a `gradient` prop) is reached
+ * without the package present, we fall back to a flat View using the first
+ * colour and emit a one-time dev warning so the omission is loud but
+ * non-fatal.
+ */
+let LinearGradientImpl = null;
+let warned = false;
+try {
+  LinearGradientImpl = require('react-native-linear-gradient').default;
+} catch {
+  // Optional peer; resolved lazily by consumers that need gradients.
+}
+const Gradient = ({
+  gradient,
+  style,
+  children
+}) => {
+  if (LinearGradientImpl) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinearGradientImpl, {
+      colors: gradient.colors,
+      locations: gradient.locations,
+      start: gradient.start,
+      end: gradient.end,
+      style: style,
+      children: children
+    });
+  }
+  if (__DEV__ && !warned) {
+    warned = true;
+    console.warn('[@webority-technologies/mobile-ui] gradient prop set but react-native-linear-gradient is not installed. ' + 'Run `npm install react-native-linear-gradient` to enable.');
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      backgroundColor: gradient.colors[0]
+    }, style],
+    children: children
+  });
+};
+exports.Gradient = Gradient;
+const isGradientAvailable = () => LinearGradientImpl != null;
+exports.isGradientAvailable = isGradientAvailable;
+//# sourceMappingURL=Gradient.js.map