@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/SearchBar/SearchBar.js

@@ -0,0 +1,280 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useDebounce } from "../../hooks/useDebounce.js";
+import { createAnimatedValue, fontFor, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { FieldBase, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CANCEL_WIDTH = 72;
+const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value: rawValue,
+    onChangeText,
+    onSubmit,
+    placeholder = 'Search…',
+    autoFocus = false,
+    disabled = false,
+    showCancel = false,
+    onCancel,
+    onClear,
+    leftIcon,
+    debounceMs,
+    size = 'md',
+    variant: variantProp,
+    cancelLabel = 'Cancel',
+    haptic,
+    style,
+    accessibilityLabel,
+    testID,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  // Resolution chain mirrors every other field-family control: caller prop →
+  // component-specific token (`components.searchBar.defaultVariant`) → shared
+  // field-family token (`components.field.defaultVariant`) → library default.
+  // Library default stays `'filled'` so SearchBar reads as the traditional
+  // pill-shaped, borderless search box when no theme opinion is expressed.
+  // SearchBar deliberately only supports 'filled' and 'outlined' — an
+  // underline-only pill makes no visual sense. If the shared field default is
+  // 'underline', fall through to 'filled' rather than carry an unsupported
+  // value down to the variant token lookup.
+  const sharedDefault = theme.components.field?.defaultVariant;
+  const sharedFallback = sharedDefault === 'outlined' || sharedDefault === 'filled' ? sharedDefault : 'filled';
+  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? sharedFallback;
+  const fieldTokens = resolveFieldSize(theme, size);
+  const sizeStyles = {
+    ...fieldTokens,
+    ...(theme.components.searchBar?.[size] ?? {})
+  };
+  const cancelWidth = theme.components.searchBar?.cancelButtonWidth ?? CANCEL_WIDTH;
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+
+  // Coerce nullable inputs to '' once at the top so every downstream read is
+  // a guaranteed string. Required when consumers pass `value={state}` where
+  // `state` may be `undefined` / `null` before being initialised.
+  const value = typeof rawValue === 'string' ? rawValue : '';
+  const [isFocused, setIsFocused] = useState(false);
+  const [internalValue, setInternalValue] = useState(value);
+  const debouncedValue = useDebounce(internalValue, debounceMs ?? 0);
+  const cancelAnim = useRef(createAnimatedValue(0)).current;
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: syncs the internal draft FROM the `value` prop; adding `internalValue` would revert every keystroke while the debounce is still pending
+  useEffect(() => {
+    if (debounceMs === undefined) {
+      return;
+    }
+    if (value !== internalValue) {
+      setInternalValue(value);
+    }
+  }, [value, debounceMs]);
+  const lastSentRef = useRef(value);
+  useEffect(() => {
+    if (debounceMs === undefined) {
+      return;
+    }
+    if (debouncedValue === lastSentRef.current) {
+      return;
+    }
+    lastSentRef.current = debouncedValue;
+    onChangeText(debouncedValue);
+  }, [debouncedValue, debounceMs, onChangeText]);
+  const showCancelButton = showCancel && isFocused;
+  useEffect(() => {
+    const anim = Animated.timing(cancelAnim, {
+      toValue: showCancelButton ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [showCancelButton, cancelAnim, theme.motion.easing.standard, theme.motion.duration.normal]);
+  const handleChangeText = useCallback(text => {
+    if (debounceMs !== undefined) {
+      setInternalValue(text);
+      return;
+    }
+    onChangeText(text);
+  }, [debounceMs, onChangeText]);
+  const handleClear = useCallback(() => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    if (debounceMs !== undefined) {
+      setInternalValue('');
+      lastSentRef.current = '';
+    }
+    onChangeText('');
+    onClear?.();
+  }, [haptic, debounceMs, onChangeText, onClear]);
+  const handleCancel = useCallback(() => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    if (debounceMs !== undefined) {
+      setInternalValue('');
+      lastSentRef.current = '';
+    }
+    onChangeText('');
+    setIsFocused(false);
+    onCancel?.();
+  }, [haptic, debounceMs, onChangeText, onCancel]);
+  const handleSubmit = useCallback(() => {
+    onSubmit?.(debounceMs !== undefined ? internalValue : value);
+  }, [onSubmit, debounceMs, internalValue, value]);
+  const displayValue = debounceMs !== undefined ? internalValue : value;
+  const hasValue = displayValue.length > 0;
+  const cancelTranslateX = cancelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [cancelWidth, 0]
+  });
+  const cancelOpacity = cancelAnim;
+  const fieldMarginRight = cancelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, cancelWidth + theme.spacing.sm]
+  });
+  const leading = leftIcon ? leftIcon : theme.icons?.search ? theme.icons.search({
+    size: sizeStyles.iconSize,
+    color: theme.colors.text.tertiary
+  }) : /*#__PURE__*/_jsx(Text, {
+    style: {
+      fontSize: sizeStyles.iconSize,
+      color: theme.colors.text.tertiary
+    },
+    children: "\uD83D\uDD0D"
+  });
+  const trailing = hasValue && !disabled ? /*#__PURE__*/_jsx(Pressable, {
+    onPress: handleClear,
+    hitSlop: 8,
+    accessibilityRole: "button",
+    accessibilityLabel: "Clear search",
+    children: theme.icons?.close ? theme.icons.close({
+      size: sizeStyles.iconSize,
+      color: theme.colors.text.secondary
+    }) : /*#__PURE__*/_jsx(Text, {
+      style: {
+        fontSize: sizeStyles.iconSize,
+        color: theme.colors.text.secondary
+      },
+      children: "\xD7"
+    })
+  }) : null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.root, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.fieldWrap, {
+        marginRight: fieldMarginRight
+      }],
+      children: /*#__PURE__*/_jsx(FieldBase, {
+        size: size,
+        variant: variant,
+        focused: isFocused,
+        disabled: disabled,
+        filled: hasValue,
+        minHeight: sizeStyles.minHeight,
+        paddingHorizontal: sizeStyles.paddingHorizontal,
+        borderRadius: sizeStyles.borderRadius,
+        leading: leading,
+        trailing: trailing,
+        accessibilityRole: "search",
+        accessibilityLabel: accessibilityLabel ?? placeholder,
+        children: /*#__PURE__*/_jsx(TextInput, {
+          ref: ref,
+          style: [styles.input, {
+            fontSize: sizeStyles.fontSize,
+            color: fieldText.color,
+            ...fieldText.weightStyle
+          }],
+          value: displayValue,
+          onChangeText: handleChangeText,
+          onSubmitEditing: handleSubmit,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          placeholder: placeholder,
+          placeholderTextColor: fieldText.placeholderColor,
+          autoFocus: autoFocus,
+          editable: !disabled,
+          returnKeyType: "search",
+          selectionColor: resolveVariantColors(theme, variant).borderFocusedRepresentative,
+          accessibilityLabel: accessibilityLabel ?? placeholder,
+          accessibilityState: {
+            disabled
+          },
+          ...rest
+        })
+      })
+    }), showCancel ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: showCancelButton ? 'auto' : 'none',
+      style: [styles.cancelWrap, {
+        width: cancelWidth,
+        transform: [{
+          translateX: cancelTranslateX
+        }],
+        opacity: cancelOpacity
+      }],
+      children: /*#__PURE__*/_jsx(Pressable, {
+        onPress: handleCancel,
+        accessibilityRole: "button",
+        accessibilityLabel: cancelLabel,
+        hitSlop: 8,
+        style: styles.cancelPressable,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.cancelText, {
+            color: theme.colors.primary,
+            fontSize: sizeStyles.fontSize,
+            ...fontFor(theme, 'medium')
+          }],
+          numberOfLines: 1,
+          children: cancelLabel
+        })
+      })
+    }) : null]
+  });
+});
+SearchBar.displayName = 'SearchBar';
+const buildStyles = _theme => StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  fieldWrap: {
+    flex: 1
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false
+  },
+  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
+  }
+});
+export { SearchBar };
+export default SearchBar;
+//# sourceMappingURL=SearchBar.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, SearchBar } from "./SearchBar.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,205 @@
+"use strict";
+
+/**
+ * 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).
+ */
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMap = {
+  sm: {
+    height: 32,
+    fontSize: 12,
+    paddingHorizontal: 10
+  },
+  md: {
+    height: 40,
+    fontSize: 14,
+    paddingHorizontal: 14
+  }
+};
+const TRACK_PADDING = 2;
+const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    segments,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    size = 'md',
+    fullWidth = true,
+    disabled = false,
+    tone = 'primary',
+    haptic,
+    accessibilityLabel,
+    style,
+    containerStyle,
+    segmentStyle,
+    selectedIndicatorStyle,
+    textStyle,
+    labelStyle,
+    testID
+  } = props;
+  const [current, setCurrent] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue ?? segments[0]?.value,
+    onChange
+  });
+  const theme = useTheme();
+  const segTheme = theme.components.segmentedControl;
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const baseSize = sizeMap[size];
+  const sizeStyles = {
+    height: segTheme?.[size]?.height ?? baseSize.height,
+    fontSize: segTheme?.[size]?.fontSize ?? baseSize.fontSize,
+    paddingHorizontal: segTheme?.[size]?.paddingHorizontal ?? baseSize.paddingHorizontal
+  };
+  const trackPadding = segTheme?.trackPadding ?? TRACK_PADDING;
+
+  // Track width is measured from onLayout. Thumb width is a regular number (not
+  // animated) — `width` cannot be driven by the native animated module, and mixing
+  // a JS-driven width with a native-driven translateX inside `Animated.parallel`
+  // sends the parallel composite into the native driver and JS setValue/timing
+  // calls on the same value then throw "moved to native". Keep width as state and
+  // only animate translateX via the native driver.
+  const [trackWidth, setTrackWidth] = useState(0);
+  const thumbTranslateX = useRef(createAnimatedValue(0)).current;
+  const activeIndex = Math.max(0, segments.findIndex(s => s.value === current));
+  const segmentWidth = trackWidth > 0 ? (trackWidth - trackPadding * 2) / Math.max(segments.length, 1) : 0;
+  const animateThumb = useCallback((index, segWidth) => {
+    if (segWidth <= 0) {
+      return undefined;
+    }
+    const targetX = trackPadding + segWidth * index;
+    const spring = theme.motion.spring.snappy;
+    const anim = Animated.spring(thumbTranslateX, {
+      toValue: targetX,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      useNativeDriver: true
+    });
+    anim.start();
+    return anim;
+  }, [theme.motion.spring.snappy, thumbTranslateX, trackPadding]);
+  useEffect(() => {
+    if (segmentWidth > 0) {
+      const anim = animateThumb(activeIndex, segmentWidth);
+      return () => anim?.stop();
+    }
+  }, [activeIndex, segmentWidth, animateThumb]);
+  const handleTrackLayout = useCallback(e => {
+    const width = e.nativeEvent.layout.width;
+    if (width !== trackWidth) {
+      setTrackWidth(width);
+    }
+  }, [trackWidth]);
+  const handlePress = useCallback(segment => {
+    if (disabled) {
+      return;
+    }
+    if (segment.value === current) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setCurrent(segment.value);
+  }, [disabled, setCurrent, current, haptic]);
+  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__*/_jsxs(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: trackPadding,
+      opacity: disabled ? 0.55 : 1,
+      alignSelf: fullWidth ? 'stretch' : 'flex-start'
+    }, containerStyle, style],
+    onLayout: handleTrackLayout,
+    children: [segmentWidth > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [styles.thumb, {
+        top: trackPadding,
+        width: segmentWidth,
+        height: sizeStyles.height - trackPadding * 2,
+        borderRadius: theme.radius.sm,
+        backgroundColor: thumbBg,
+        transform: [{
+          translateX: thumbTranslateX
+        }],
+        ...theme.shadows.sm
+      }, selectedIndicatorStyle]
+    }) : null, segments.map(segment => {
+      const isActive = segment.value === current;
+      return /*#__PURE__*/_jsxs(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__*/_jsx(View, {
+          style: styles.segmentIcon,
+          children: segment.icon
+        }) : null, /*#__PURE__*/_jsx(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, labelStyle],
+          numberOfLines: 1,
+          children: segment.label
+        })]
+      }, String(segment.value));
+    })]
+  });
+});
+SegmentedControl.displayName = 'SegmentedControl';
+const buildStyles = _theme => StyleSheet.create({
+  track: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    position: 'relative'
+  },
+  thumb: {
+    position: 'absolute',
+    left: 0
+  },
+  segment: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  segmentIcon: {
+    marginRight: 6
+  },
+  segmentLabel: {
+    includeFontPadding: false
+  }
+});
+export { SegmentedControl };
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, SegmentedControl } from "./SegmentedControl.js";
+//# sourceMappingURL=index.js.map