@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.Skeleton;
+  }
+});
+Object.defineProperty(exports, "SkeletonCircle", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.SkeletonCircle;
+  }
+});
+Object.defineProperty(exports, "SkeletonClockProvider", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonClock.SkeletonClockProvider;
+  }
+});
+Object.defineProperty(exports, "SkeletonContent", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonContent.SkeletonContent;
+  }
+});
+Object.defineProperty(exports, "SkeletonList", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonList.SkeletonList;
+  }
+});
+Object.defineProperty(exports, "SkeletonProvider", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonProvider.SkeletonProvider;
+  }
+});
+Object.defineProperty(exports, "SkeletonSkip", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonSkip.SkeletonSkip;
+  }
+});
+Object.defineProperty(exports, "SkeletonText", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.SkeletonText;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+});
+Object.defineProperty(exports, "useReduceMotion", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonProvider.useReduceMotion;
+  }
+});
+Object.defineProperty(exports, "useSkeletonClock", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonClock.useSkeletonClock;
+  }
+});
+Object.defineProperty(exports, "useSkeletonDefaults", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonProvider.useSkeletonDefaults;
+  }
+});
+var _Skeleton = _interopRequireWildcard(require("./Skeleton.js"));
+var _SkeletonClock = require("./SkeletonClock.js");
+var _SkeletonContent = require("./SkeletonContent.js");
+var _SkeletonList = require("./SkeletonList.js");
+var _SkeletonProvider = require("./SkeletonProvider.js");
+var _SkeletonSkip = require("./SkeletonSkip.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/SlideToConfirm/SlideToConfirm.js

@@ -0,0 +1,258 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SlideToConfirm = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/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 SIZE_MAP = {
+  sm: {
+    height: 44,
+    pad: 4
+  },
+  md: {
+    height: 56,
+    pad: 5
+  },
+  lg: {
+    height: 64,
+    pad: 6
+  }
+};
+const Chevron = ({
+  color,
+  size
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: {
+    width: 0,
+    height: 0,
+    borderTopWidth: size * 0.4,
+    borderBottomWidth: size * 0.4,
+    borderLeftWidth: size * 0.55,
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderLeftColor: color,
+    marginLeft: size * 0.2
+  }
+});
+
+/**
+ * `activate` is what VoiceOver/TalkBack offer on a double-tap; `increment` is
+ * what the adjustable role suggests. Both mean "confirm" here.
+ */
+const ACCESSIBILITY_ACTIONS = [{
+  name: 'activate',
+  label: 'Confirm'
+}, {
+  name: 'increment',
+  label: 'Confirm'
+}];
+const SlideToConfirm = exports.SlideToConfirm = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    onConfirm,
+    label = 'Slide to confirm',
+    confirmedLabel = 'Confirmed',
+    tone = 'primary',
+    size = 'md',
+    disabled = false,
+    threshold = 0.9,
+    resetAfter = false,
+    haptic,
+    icon,
+    style,
+    trackStyle,
+    handleStyle,
+    labelStyle,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const sizeCfg = SIZE_MAP[size];
+  const handleSize = sizeCfg.height - sizeCfg.pad * 2;
+  const styles = (0, _react.useMemo)(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
+  const toneColor = theme.colors[tone];
+  const [confirmed, setConfirmed] = (0, _react.useState)(false);
+  const x = (0, _reactNativeReanimated.useSharedValue)(0);
+  const maxX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const dragStart = (0, _reactNativeReanimated.useSharedValue)(0);
+  const resetTimer = (0, _react.useRef)(null);
+  const fireHaptic = (0, _react.useCallback)(() => {
+    const h = (0, _index2.resolveHaptic)(haptic, 'notificationSuccess');
+    if (h) {
+      (0, _index2.triggerHaptic)(h);
+    }
+  }, [haptic]);
+  const reset = (0, _react.useCallback)(() => {
+    setConfirmed(false);
+    x.value = (0, _reactNativeReanimated.withSpring)(0, {
+      damping: 18,
+      stiffness: 160,
+      mass: 1
+    });
+  }, [x]);
+  const handleConfirm = (0, _react.useCallback)(() => {
+    setConfirmed(true);
+    fireHaptic();
+    onConfirm();
+    if (resetAfter !== false) {
+      if (resetTimer.current) {
+        clearTimeout(resetTimer.current);
+      }
+      resetTimer.current = setTimeout(reset, resetAfter);
+    }
+  }, [fireHaptic, onConfirm, resetAfter, reset]);
+  const handleAccessibilityAction = (0, _react.useCallback)(event => {
+    if (disabled || confirmed) {
+      return;
+    }
+    const {
+      actionName
+    } = event.nativeEvent;
+    if (actionName === 'activate' || actionName === 'increment') {
+      handleConfirm();
+    }
+  }, [disabled, confirmed, handleConfirm]);
+  _react.default.useEffect(() => () => {
+    (0, _reactNativeReanimated.cancelAnimation)(x);
+    if (resetTimer.current) {
+      clearTimeout(resetTimer.current);
+    }
+  }, [x]);
+  const onLayout = (0, _react.useCallback)(e => {
+    maxX.value = Math.max(0, e.nativeEvent.layout.width - handleSize - sizeCfg.pad * 2);
+  }, [maxX, handleSize, sizeCfg.pad]);
+  const pan = (0, _react.useMemo)(() => {
+    const thresholdFrac = threshold;
+    const springCfg = {
+      damping: 18,
+      stiffness: 160,
+      mass: 1
+    };
+    const timingCfg = {
+      duration: theme.motion.duration.fast,
+      easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
+    };
+    return _reactNativeGestureHandler.Gesture.Pan().enabled(!disabled && !confirmed).minDistance(0).onStart(() => {
+      'worklet';
+
+      dragStart.value = x.value;
+    }).onUpdate(event => {
+      'worklet';
+
+      x.value = Math.min(Math.max(dragStart.value + event.translationX, 0), maxX.value);
+    }).onEnd(() => {
+      'worklet';
+
+      if (maxX.value > 0 && x.value >= maxX.value * thresholdFrac) {
+        x.value = (0, _reactNativeReanimated.withTiming)(maxX.value, timingCfg);
+        (0, _reactNativeReanimated.runOnJS)(handleConfirm)();
+      } else {
+        x.value = (0, _reactNativeReanimated.withSpring)(0, springCfg);
+      }
+    });
+  }, [disabled, confirmed, threshold, x, maxX, dragStart, handleConfirm, theme.motion.duration.fast]);
+  const handleAnim = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: x.value
+    }]
+  }));
+  const fillAnim = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    width: x.value + handleSize + sizeCfg.pad
+  }));
+  const labelAnim = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const max = maxX.value > 0 ? maxX.value : 1;
+    return {
+      opacity: Math.max(0, 1 - x.value / (max * 0.6))
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: ref,
+    style: [styles.track, {
+      backgroundColor: theme.colors.background.secondary
+    }, trackStyle, style],
+    onLayout: onLayout,
+    testID: testID,
+    accessibilityRole: "adjustable",
+    accessibilityLabel: confirmed ? confirmedLabel : label,
+    accessibilityState: {
+      disabled
+    }
+    // A drag is the only way to confirm with a finger, which leaves assistive
+    // tech with no way at all — so expose the same outcome as an action.
+    ,
+    accessibilityActions: ACCESSIBILITY_ACTIONS,
+    onAccessibilityAction: handleAccessibilityAction,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.fill, {
+        backgroundColor: toneColor,
+        opacity: disabled ? 0.5 : 1
+      }, fillAnim],
+      pointerEvents: "none"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.labelWrap, labelAnim],
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, {
+          color: theme.colors.text.secondary,
+          fontSize: theme.typography.fontSize.base
+        }, labelStyle],
+        numberOfLines: 1,
+        children: confirmed ? confirmedLabel : label
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: pan,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: [styles.handle, {
+          width: handleSize,
+          height: handleSize,
+          borderRadius: handleSize / 2,
+          backgroundColor: theme.colors.background.elevated,
+          opacity: disabled ? 0.5 : 1,
+          ...theme.shadows.sm
+        }, handleStyle, handleAnim],
+        children: icon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
+          color: toneColor,
+          size: handleSize * 0.5
+        })
+      })
+    })]
+  });
+});
+SlideToConfirm.displayName = 'SlideToConfirm';
+const buildStyles = (theme, sizeCfg) => _reactNative.StyleSheet.create({
+  track: {
+    height: sizeCfg.height,
+    borderRadius: sizeCfg.height / 2,
+    justifyContent: 'center',
+    overflow: 'hidden',
+    padding: sizeCfg.pad
+  },
+  fill: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    borderRadius: sizeCfg.height / 2
+  },
+  labelWrap: {
+    position: 'absolute',
+    left: sizeCfg.height,
+    right: sizeCfg.height
+  },
+  label: {
+    textAlign: 'center',
+    includeFontPadding: false
+  },
+  handle: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = SlideToConfirm;
+//# sourceMappingURL=SlideToConfirm.js.map

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

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