@webority-technologies/mobile 0.0.1

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

@@ -0,0 +1,180 @@
+"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 } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { 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,
+    onChange,
+    size = 'md',
+    fullWidth = true,
+    disabled = false,
+    tone = 'primary',
+    accessibilityLabel,
+    style,
+    segmentStyle,
+    textStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const sizeStyles = sizeMap[size];
+
+  // Total track width — measured from onLayout; thumb width = trackWidth / segments.length.
+  const trackWidthRef = useRef(0);
+  const thumbTranslateX = useRef(new Animated.Value(0)).current;
+  const thumbWidth = useRef(new Animated.Value(0)).current;
+  const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
+  const animateThumb = 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;
+    Animated.parallel([Animated.spring(thumbTranslateX, {
+      toValue: targetX,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      useNativeDriver: true
+    }), 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]);
+  useEffect(() => {
+    if (trackWidthRef.current > 0) {
+      animateThumb(activeIndex, trackWidthRef.current);
+    }
+  }, [activeIndex, animateThumb]);
+  const handleTrackLayout = 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 = useCallback(segment => {
+    if (disabled) return;
+    if (segment.value === value) return;
+    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__*/_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: TRACK_PADDING,
+      opacity: disabled ? 0.55 : 1,
+      alignSelf: fullWidth ? 'stretch' : 'flex-start'
+    }, style],
+    onLayout: handleTrackLayout,
+    children: [/*#__PURE__*/_jsx(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__*/_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],
+          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',
+    top: TRACK_PADDING,
+    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 { SegmentedControl, default } from "./SegmentedControl.js";
+//# sourceMappingURL=index.js.map