@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/Radio/Radio.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRadioGroup = exports.default = exports.RadioGroupContext = exports.Radio = 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 _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 RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
+const useRadioGroup = () => (0, _react.useContext)(RadioGroupContext);
+exports.useRadioGroup = useRadioGroup;
+const sizeMap = {
+  sm: {
+    outer: 16,
+    inner: 8
+  },
+  md: {
+    outer: 20,
+    inner: 10
+  },
+  lg: {
+    outer: 24,
+    inner: 12
+  }
+};
+const toneColor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    case 'primary':
+    default:
+      return theme.colors.primary;
+  }
+};
+const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value,
+    selected: selectedProp,
+    onSelect,
+    disabled: disabledProp = false,
+    label,
+    size = 'md',
+    tone = 'primary',
+    accessibilityLabel,
+    haptic = 'selection',
+    style,
+    circleStyle,
+    testID,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const ctx = useRadioGroup();
+  const selected = ctx ? ctx.selectedValue === value : !!selectedProp;
+  const disabled = ctx ? ctx.disabled || disabledProp : disabledProp;
+  const fillColor = toneColor(theme, tone);
+  const {
+    outer,
+    inner
+  } = sizeMap[size];
+  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(selected ? 1 : 0)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.spring(progress, {
+      toValue: selected ? 1 : 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    }).start();
+  }, [selected, progress, theme.motion.spring.snappy]);
+  const scale = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1]
+  });
+  const handlePress = event => {
+    if (disabled) return;
+    if (haptic !== false) (0, _hapticUtils.triggerHaptic)(haptic);
+    if (ctx) {
+      ctx.onSelect(value);
+    } else {
+      onSelect?.(value);
+    }
+    rest.onPressOut?.(event);
+  };
+  const accessibleLabel = accessibilityLabel ?? label;
+  const borderColor = disabled ? theme.colors.border.primary : selected ? fillColor : theme.colors.border.primary;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    disabled: disabled,
+    accessibilityRole: "radio",
+    accessibilityLabel: accessibleLabel,
+    accessibilityState: {
+      checked: selected,
+      disabled
+    },
+    testID: testID,
+    hitSlop: 6,
+    ...rest,
+    style: ({
+      pressed
+    }) => [styles.row, {
+      opacity: disabled ? 0.55 : pressed ? 0.85 : 1
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.outer, {
+        width: outer,
+        height: outer,
+        borderRadius: outer / 2,
+        borderColor
+      }, circleStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [styles.inner, {
+          width: inner,
+          height: inner,
+          borderRadius: inner / 2,
+          backgroundColor: disabled ? theme.colors.text.disabled : fillColor,
+          opacity: progress,
+          transform: [{
+            scale
+          }]
+        }]
+      })
+    }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label, {
+        color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
+        fontSize: theme.typography.fontSize.base
+      }],
+      numberOfLines: 2,
+      children: label
+    }) : null]
+  });
+});
+Radio.displayName = 'Radio';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  outer: {
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  inner: {},
+  label: {
+    marginLeft: 10,
+    flexShrink: 1
+  }
+});
+var _default = exports.default = Radio;
+//# sourceMappingURL=Radio.js.map

package/lib/commonjs/components/Radio/RadioGroup.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RadioGroup = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _Radio = require("./Radio.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 RadioGroup = ({
+  value,
+  onChange,
+  children,
+  disabled = false,
+  accessibilityLabel,
+  style,
+  testID
+}) => {
+  const ctx = (0, _react.useMemo)(() => ({
+    selectedValue: value,
+    onSelect: onChange,
+    disabled
+  }), [value, onChange, disabled]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.RadioGroupContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled
+      },
+      testID: testID,
+      style: style,
+      children: children
+    })
+  });
+};
+exports.RadioGroup = RadioGroup;
+RadioGroup.displayName = 'RadioGroup';
+var _default = exports.default = RadioGroup;
+//# sourceMappingURL=RadioGroup.js.map

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function () {
+    return _Radio.Radio;
+  }
+});
+Object.defineProperty(exports, "RadioGroup", {
+  enumerable: true,
+  get: function () {
+    return _RadioGroup.RadioGroup;
+  }
+});
+Object.defineProperty(exports, "RadioGroupContext", {
+  enumerable: true,
+  get: function () {
+    return _Radio.RadioGroupContext;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Radio.default;
+  }
+});
+Object.defineProperty(exports, "useRadioGroup", {
+  enumerable: true,
+  get: function () {
+    return _Radio.useRadioGroup;
+  }
+});
+var _Radio = _interopRequireWildcard(require("./Radio.js"));
+var _RadioGroup = require("./RadioGroup.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/Rating/Rating.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Rating = 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 _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 sizePxMap = {
+  sm: 16,
+  md: 24,
+  lg: 32
+};
+const resolveSize = size => typeof size === 'number' ? size : sizePxMap[size];
+const toneColorFor = (theme, tone) => {
+  switch (tone) {
+    case 'primary':
+      return theme.colors.primary;
+    case 'warning':
+    default:
+      return theme.colors.warning;
+  }
+};
+const clampToStep = (raw, max, step) => {
+  const clamped = Math.max(0, Math.min(max, raw));
+  const stepped = Math.round(clamped / step) * step;
+  return Number(stepped.toFixed(2));
+};
+const Star = ({
+  index,
+  filled,
+  size,
+  filledColor,
+  emptyColor,
+  scale
+}) => {
+  const fillRatio = Math.max(0, Math.min(1, filled - index));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [starStyles.starWrap, {
+      width: size,
+      height: size,
+      transform: [{
+        scale
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [starStyles.glyph, {
+        color: emptyColor,
+        fontSize: size,
+        lineHeight: size
+      }],
+      accessible: false,
+      children: '☆'
+    }), fillRatio > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      style: [starStyles.fillClip, {
+        width: size * fillRatio,
+        height: size
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [starStyles.glyph, {
+          color: filledColor,
+          fontSize: size,
+          lineHeight: size
+        }],
+        accessible: false,
+        children: '★'
+      })
+    }) : null]
+  });
+};
+const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value,
+    onChange,
+    max = 5,
+    allowHalf = true,
+    readonly: readonlyProp = false,
+    size = 'md',
+    tone = 'warning',
+    label,
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const interactive = !readonlyProp && typeof onChange === 'function';
+  const step = allowHalf ? 0.5 : 1;
+  const starSize = resolveSize(size);
+  const filledColor = toneColorFor(theme, tone);
+  const emptyColor = theme.colors.border.primary;
+  const starWidthRef = (0, _react.useRef)(starSize);
+  const handleStarLayout = (0, _react.useCallback)(e => {
+    starWidthRef.current = e.nativeEvent.layout.width;
+  }, []);
+  const scaleRefs = (0, _react.useRef)([]);
+  if (scaleRefs.current.length !== max) {
+    scaleRefs.current = Array.from({
+      length: max
+    }, (_, i) => scaleRefs.current[i] ?? new _reactNative.Animated.Value(1));
+  }
+  const pulse = (0, _react.useCallback)(idx => {
+    const v = scaleRefs.current[idx];
+    if (!v) return;
+    _reactNative.Animated.sequence([_reactNative.Animated.timing(v, {
+      toValue: 1.2,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }), _reactNative.Animated.spring(v, {
+      toValue: 1,
+      damping: theme.motion.spring.bouncy.damping,
+      stiffness: theme.motion.spring.bouncy.stiffness,
+      mass: theme.motion.spring.bouncy.mass,
+      useNativeDriver: true
+    })]).start();
+  }, [theme.motion]);
+  const commit = (0, _react.useCallback)((next, animatedIndex) => {
+    if (!interactive || !onChange) return;
+    const cleaned = clampToStep(next, max, step);
+    (0, _hapticUtils.triggerHaptic)('selection');
+    if (typeof animatedIndex === 'number') pulse(animatedIndex);
+    onChange(cleaned);
+  }, [interactive, onChange, max, step, pulse]);
+  const handleStarPress = (0, _react.useCallback)(index => e => {
+    if (!interactive) return;
+    const w = starWidthRef.current || starSize;
+    const localX = e.nativeEvent.locationX ?? w;
+    let next;
+    if (allowHalf && localX < w / 2) {
+      next = index + 0.5;
+    } else {
+      next = index + 1;
+    }
+    commit(next, index);
+  }, [interactive, starSize, allowHalf, commit]);
+  const onAccessibilityAction = (0, _react.useCallback)(e => {
+    if (!interactive) return;
+    if (e.nativeEvent.actionName === 'increment') commit(value + step);else if (e.nativeEvent.actionName === 'decrement') commit(value - step);
+  }, [interactive, value, step, commit]);
+  const valueText = `${value} of ${max} stars`;
+  const a11yLabel = accessibilityLabel ?? label ?? valueText;
+  const stars = [];
+  for (let i = 0; i < max; i += 1) {
+    const star = /*#__PURE__*/(0, _jsxRuntime.jsx)(Star, {
+      index: i,
+      filled: value,
+      size: starSize,
+      filledColor: filledColor,
+      emptyColor: emptyColor,
+      scale: scaleRefs.current[i] ?? new _reactNative.Animated.Value(1)
+    }, i);
+    stars.push(interactive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: handleStarPress(i),
+      onLayout: i === 0 ? handleStarLayout : undefined,
+      hitSlop: 4,
+      accessible: false,
+      style: styles.starPress,
+      children: star
+    }, i) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onLayout: i === 0 ? handleStarLayout : undefined,
+      style: styles.starPress,
+      children: star
+    }, i));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.wrapper, style],
+    ref: ref,
+    testID: testID,
+    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label, {
+        color: theme.colors.text.secondary,
+        fontSize: theme.typography.fontSize.sm
+      }],
+      children: label
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.row,
+      accessible: true,
+      accessibilityRole: interactive ? 'adjustable' : 'text',
+      accessibilityLabel: a11yLabel,
+      accessibilityValue: interactive ? {
+        min: 0,
+        max,
+        now: value,
+        text: valueText
+      } : undefined,
+      accessibilityActions: interactive ? [{
+        name: 'increment'
+      }, {
+        name: 'decrement'
+      }] : undefined,
+      onAccessibilityAction: interactive ? onAccessibilityAction : undefined,
+      children: stars
+    })]
+  });
+});
+Rating.displayName = 'Rating';
+const starStyles = _reactNative.StyleSheet.create({
+  starWrap: {
+    position: 'relative',
+    alignItems: 'flex-start',
+    justifyContent: 'center'
+  },
+  glyph: {
+    textAlign: 'left',
+    includeFontPadding: false
+  },
+  fillClip: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    overflow: 'hidden'
+  }
+});
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  wrapper: {
+    flexDirection: 'column'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  starPress: {
+    marginRight: 4
+  },
+  label: {
+    marginBottom: 6
+  }
+});
+var _default = exports.default = Rating;
+//# sourceMappingURL=Rating.js.map

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

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