@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -0,0 +1,274 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SearchBar = 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 _useDebounce = require("../../hooks/useDebounce.js");
+var _index2 = require("../Icon/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 sizeMap = {
+  sm: {
+    height: 36,
+    paddingHorizontal: 10,
+    fontSize: 13,
+    iconSize: 16,
+    gap: 6
+  },
+  md: {
+    height: 44,
+    paddingHorizontal: 12,
+    fontSize: 15,
+    iconSize: 18,
+    gap: 8
+  },
+  lg: {
+    height: 52,
+    paddingHorizontal: 14,
+    fontSize: 16,
+    iconSize: 20,
+    gap: 10
+  }
+};
+const CANCEL_WIDTH = 72;
+const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value,
+    onChangeText,
+    onSubmit,
+    placeholder = 'Search…',
+    autoFocus = false,
+    disabled = false,
+    showCancel = false,
+    onCancel,
+    onClear,
+    leftIcon,
+    debounceMs,
+    size = 'md',
+    variant = 'filled',
+    cancelLabel = 'Cancel',
+    style,
+    accessibilityLabel,
+    testID,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const sizeStyles = sizeMap[size];
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [internalValue, setInternalValue] = (0, _react.useState)(value);
+  const debouncedValue = (0, _useDebounce.useDebounce)(internalValue, debounceMs ?? 0);
+  const cancelAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+
+  // Keep internal value in sync with controlled value when debouncing.
+  (0, _react.useEffect)(() => {
+    if (debounceMs === undefined) return;
+    if (value !== internalValue) setInternalValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, debounceMs]);
+
+  // Fire debounced onChangeText when debounce is configured.
+  const lastSentRef = (0, _react.useRef)(value);
+  (0, _react.useEffect)(() => {
+    if (debounceMs === undefined) return;
+    if (debouncedValue === lastSentRef.current) return;
+    lastSentRef.current = debouncedValue;
+    onChangeText(debouncedValue);
+  }, [debouncedValue, debounceMs, onChangeText]);
+  const showCancelButton = showCancel && isFocused;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(cancelAnim, {
+      toValue: showCancelButton ? 1 : 0,
+      duration: 200,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      // Container width / margin animates with this value, so layout-aware.
+      useNativeDriver: false
+    }).start();
+  }, [showCancelButton, cancelAnim, theme.motion.easing.standard]);
+  const handleChangeText = (0, _react.useCallback)(text => {
+    if (debounceMs !== undefined) {
+      setInternalValue(text);
+      return;
+    }
+    onChangeText(text);
+  }, [debounceMs, onChangeText]);
+  const handleClear = (0, _react.useCallback)(() => {
+    (0, _hapticUtils.triggerHaptic)('selection');
+    if (debounceMs !== undefined) {
+      setInternalValue('');
+      lastSentRef.current = '';
+    }
+    onChangeText('');
+    onClear?.();
+  }, [debounceMs, onChangeText, onClear]);
+  const handleCancel = (0, _react.useCallback)(() => {
+    (0, _hapticUtils.triggerHaptic)('selection');
+    if (debounceMs !== undefined) {
+      setInternalValue('');
+      lastSentRef.current = '';
+    }
+    onChangeText('');
+    setIsFocused(false);
+    onCancel?.();
+  }, [debounceMs, onChangeText, onCancel]);
+  const handleSubmit = (0, _react.useCallback)(() => {
+    onSubmit?.(debounceMs !== undefined ? internalValue : value);
+  }, [onSubmit, debounceMs, internalValue, value]);
+  const displayValue = debounceMs !== undefined ? internalValue : value;
+  const hasValue = displayValue.length > 0;
+  const containerBackground = variant === 'filled' ? theme.colors.background.secondary : theme.colors.background.primary;
+  const containerBorder = variant === 'outlined' ? theme.colors.border.primary : 'transparent';
+
+  // Container shrinks left to make room for cancel button on right.
+  const cancelTranslateX = cancelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [CANCEL_WIDTH, 0]
+  });
+  const cancelOpacity = cancelAnim;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.root, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+      style: [styles.searchContainer, {
+        height: sizeStyles.height,
+        paddingHorizontal: sizeStyles.paddingHorizontal,
+        backgroundColor: containerBackground,
+        borderColor: containerBorder,
+        borderWidth: variant === 'outlined' ? 1 : 0,
+        borderRadius: theme.radius.full,
+        opacity: disabled ? 0.55 : 1,
+        marginRight: cancelAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, CANCEL_WIDTH + theme.spacing.sm]
+        })
+      }],
+      accessibilityRole: "search",
+      accessibilityLabel: accessibilityLabel ?? placeholder,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.leftSlot, {
+          marginRight: sizeStyles.gap
+        }],
+        children: leftIcon ? leftIcon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Icon, {
+          name: "search",
+          family: "feather",
+          size: sizeStyles.iconSize,
+          color: theme.colors.text.tertiary
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        ref: ref,
+        style: [styles.input, {
+          fontSize: sizeStyles.fontSize,
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
+        }],
+        value: displayValue,
+        onChangeText: handleChangeText,
+        onSubmitEditing: handleSubmit,
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        placeholder: placeholder,
+        placeholderTextColor: theme.colors.text.tertiary,
+        autoFocus: autoFocus,
+        editable: !disabled,
+        returnKeyType: "search",
+        selectionColor: theme.colors.border.focus,
+        accessibilityLabel: accessibilityLabel ?? placeholder,
+        accessibilityState: {
+          disabled
+        },
+        ...rest
+      }), hasValue && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: handleClear,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: "Clear search",
+        style: [styles.rightSlot, {
+          marginLeft: sizeStyles.gap
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Icon, {
+          name: "x",
+          family: "feather",
+          size: sizeStyles.iconSize,
+          color: theme.colors.text.secondary
+        })
+      }) : null]
+    }), showCancel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      pointerEvents: showCancelButton ? 'auto' : 'none',
+      style: [styles.cancelWrap, {
+        width: CANCEL_WIDTH,
+        transform: [{
+          translateX: cancelTranslateX
+        }],
+        opacity: cancelOpacity
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: handleCancel,
+        accessibilityRole: "button",
+        accessibilityLabel: cancelLabel,
+        hitSlop: 8,
+        style: styles.cancelPressable,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.cancelText, {
+            color: theme.colors.primary,
+            fontSize: sizeStyles.fontSize,
+            fontWeight: theme.typography.fontWeight.medium
+          }],
+          numberOfLines: 1,
+          children: cancelLabel
+        })
+      })
+    }) : null]
+  });
+});
+SearchBar.displayName = 'SearchBar';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  searchContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  leftSlot: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false
+  },
+  rightSlot: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  cancelWrap: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    alignItems: 'flex-end',
+    justifyContent: 'center'
+  },
+  cancelPressable: {
+    paddingHorizontal: 8,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  cancelText: {
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = SearchBar;
+//# sourceMappingURL=SearchBar.js.map

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

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

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SegmentedControl = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+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); }
+/**
+ * SegmentedControl — iOS-style segmented control.
+ *
+ * Rounded container with equal-width segments and an animated thumb that
+ * springs between selected segments. Theme-aware, dark-mode friendly,
+ * fully accessible (radiogroup / radio roles + selected state).
+ */
+
+const sizeMap = {
+  sm: {
+    height: 32,
+    fontSize: 12,
+    paddingHorizontal: 10
+  },
+  md: {
+    height: 40,
+    fontSize: 14,
+    paddingHorizontal: 14
+  }
+};
+const TRACK_PADDING = 2;
+const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    segments,
+    value,
+    onChange,
+    size = 'md',
+    fullWidth = true,
+    disabled = false,
+    tone = 'primary',
+    accessibilityLabel,
+    style,
+    segmentStyle,
+    textStyle,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const sizeStyles = sizeMap[size];
+
+  // Total track width — measured from onLayout; thumb width = trackWidth / segments.length.
+  const trackWidthRef = (0, _react.useRef)(0);
+  const thumbTranslateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const thumbWidth = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
+  const animateThumb = (0, _react.useCallback)((index, totalWidth) => {
+    if (totalWidth <= 0 || segments.length === 0) return;
+    const segWidth = (totalWidth - TRACK_PADDING * 2) / segments.length;
+    const targetX = TRACK_PADDING + segWidth * index;
+    const spring = theme.motion.spring.snappy;
+    _reactNative.Animated.parallel([_reactNative.Animated.spring(thumbTranslateX, {
+      toValue: targetX,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      useNativeDriver: true
+    }), _reactNative.Animated.spring(thumbWidth, {
+      toValue: segWidth,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      useNativeDriver: false
+    })]).start();
+  }, [segments.length, theme.motion.spring.snappy, thumbTranslateX, thumbWidth]);
+  (0, _react.useEffect)(() => {
+    if (trackWidthRef.current > 0) {
+      animateThumb(activeIndex, trackWidthRef.current);
+    }
+  }, [activeIndex, animateThumb]);
+  const handleTrackLayout = (0, _react.useCallback)(e => {
+    const width = e.nativeEvent.layout.width;
+    if (width === trackWidthRef.current) return;
+    trackWidthRef.current = width;
+    // Initial-position the thumb without animation jitter — set then animate to active.
+    const segWidth = (width - TRACK_PADDING * 2) / Math.max(segments.length, 1);
+    thumbWidth.setValue(segWidth);
+    thumbTranslateX.setValue(TRACK_PADDING + segWidth * activeIndex);
+  }, [activeIndex, segments.length, thumbTranslateX, thumbWidth]);
+  const handlePress = (0, _react.useCallback)(segment => {
+    if (disabled) return;
+    if (segment.value === value) return;
+    (0, _index2.triggerHaptic)('selection');
+    onChange(segment.value);
+  }, [disabled, onChange, value]);
+  const thumbBg = tone === 'primary' ? theme.colors.background.elevated : theme.colors.background.elevated;
+  const activeTextColor = tone === 'primary' ? theme.colors.text.primary : theme.colors.text.primary;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: ref,
+    accessibilityRole: "radiogroup",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    style: [styles.track, {
+      height: sizeStyles.height,
+      borderRadius: theme.radius.md,
+      backgroundColor: theme.colors.background.tertiary,
+      padding: TRACK_PADDING,
+      opacity: disabled ? 0.55 : 1,
+      alignSelf: fullWidth ? 'stretch' : 'flex-start'
+    }, style],
+    onLayout: handleTrackLayout,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      pointerEvents: "none",
+      style: [styles.thumb, {
+        width: thumbWidth,
+        height: sizeStyles.height - TRACK_PADDING * 2,
+        borderRadius: theme.radius.sm,
+        backgroundColor: thumbBg,
+        transform: [{
+          translateX: thumbTranslateX
+        }],
+        ...theme.shadows.sm
+      }]
+    }), segments.map(segment => {
+      const isActive = segment.value === value;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+        onPress: () => handlePress(segment),
+        disabled: disabled,
+        accessibilityRole: "radio",
+        accessibilityLabel: segment.label,
+        accessibilityState: {
+          selected: isActive,
+          disabled
+        },
+        style: ({
+          pressed
+        }) => [styles.segment, {
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          opacity: pressed && !isActive ? 0.7 : 1
+        }, segmentStyle],
+        children: [segment.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.segmentIcon,
+          children: segment.icon
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.segmentLabel, {
+            color: isActive ? activeTextColor : theme.colors.text.tertiary,
+            fontSize: sizeStyles.fontSize,
+            fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
+          }, textStyle],
+          numberOfLines: 1,
+          children: segment.label
+        })]
+      }, String(segment.value));
+    })]
+  });
+});
+SegmentedControl.displayName = 'SegmentedControl';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  track: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    position: 'relative'
+  },
+  thumb: {
+    position: 'absolute',
+    top: TRACK_PADDING,
+    left: 0
+  },
+  segment: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  segmentIcon: {
+    marginRight: 6
+  },
+  segmentLabel: {
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = SegmentedControl;
+//# sourceMappingURL=SegmentedControl.js.map

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

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