@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -1,241 +1 @@
-"use strict";
-
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Pressable, StyleSheet, TextInput, View } from 'react-native';
-import { useDebounce } from "../../hooks/useDebounce.js";
-import { useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
-import { mergeRefs } from "../../utils/mergeRefs.js";
-import { defaultIcons } from "../AppIcon/defaultIcons.js";
-import { renderSlotIcon } from "../AppIcon/slotIcon.js";
-import { FieldBase, FieldLabel, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
-import { useFloatingLabel } from "../FieldBase/useFloatingLabel.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    value: rawValue,
-    onChangeText,
-    onSubmit,
-    placeholder = 'Search…',
-    autoFocus = false,
-    disabled = false,
-    onClear,
-    leftIcon,
-    debounceMs,
-    size = 'md',
-    variant: variantProp,
-    borderRadius: borderRadiusProp,
-    label,
-    labelMode = 'top',
-    labelStyle,
-    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.
-  // `underline` is the field family's bottom-rule row: no fill, no pill, the
-  // magnifier and text flush with the rule's ends, like Input's underline.
-  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'filled';
-  const isUnderline = variant === 'underline';
-  const fieldTokens = resolveFieldSize(theme, size);
-  const sizeStyles = {
-    ...fieldTokens,
-    ...(theme.components.searchBar?.[size] ?? {})
-  };
-  const fieldText = resolveFieldTextStyle(theme, {
-    disabled
-  });
-  // A tap anywhere on the box (padding, icon, gap) focuses the input, not
-  // only a tap on its text.
-  const inputRef = useRef(null);
-  const setInputRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
-  const focusInput = useCallback(() => {
-    if (!disabled) {
-      inputRef.current?.focus();
-    }
-  }, [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);
-
-  // Equivalent-mutant note: removing the `debounceMs === undefined` guard
-  // below cannot change observable behaviour. `internalValue` is only ever
-  // read (via `displayValue`) when `debounceMs !== undefined`; without the
-  // guard, a non-debounced instance would keep resyncing `internalValue`
-  // from `value` on every prop change, but that resynced value is never
-  // displayed or sent anywhere while non-debounced, so no test can observe
-  // the difference.
-  // 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 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 handleSubmit = useCallback(() => {
-    onSubmit?.(debounceMs !== undefined ? internalValue : value);
-  }, [onSubmit, debounceMs, internalValue, value]);
-  const displayValue = debounceMs !== undefined ? internalValue : value;
-  const hasValue = displayValue.length > 0;
-  const leadingState = {
-    size: sizeStyles.iconSize,
-    color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary,
-    disabled
-  };
-  const leading = leftIcon ? renderSlotIcon(leftIcon, leadingState) : (theme.icons?.search ?? defaultIcons.search)(leadingState);
-
-  // Floating label: rests over the text past the magnifier, rises on focus or
-  // value; the outlined pill gets the field family's notch. Static labels use
-  // FieldLabel above the row.
-  const showFloatingLabel = Boolean(label) && labelMode === 'float';
-  const floating = useFloatingLabel({
-    label,
-    enabled: showFloatingLabel,
-    floated: isFocused || hasValue,
-    variant,
-    sizeTokens: {
-      ...fieldTokens,
-      ...sizeStyles
-    },
-    leadingOffset: sizeStyles.iconSize + theme.spacing.md,
-    trailingOffset: hasValue ? sizeStyles.iconSize + theme.spacing.md : 0,
-    paddingLeft: isUnderline ? 0 : sizeStyles.paddingHorizontal,
-    color: theme.colors.field.label,
-    style: labelStyle
-  });
-  const trailing = hasValue && !disabled ? /*#__PURE__*/_jsx(Pressable, {
-    onPress: handleClear,
-    hitSlop: 8,
-    accessibilityRole: "button",
-    accessibilityLabel: "Clear search",
-    children: (theme.icons?.close ?? defaultIcons.close)({
-      size: sizeStyles.iconSize,
-      color: theme.colors.text.secondary
-    })
-  }) : null;
-  return /*#__PURE__*/_jsxs(View, {
-    style: style,
-    testID: testID,
-    children: [label && !showFloatingLabel ? /*#__PURE__*/_jsx(FieldLabel, {
-      size: size,
-      style: labelStyle,
-      children: label
-    }) : null, /*#__PURE__*/_jsx(View, {
-      style: styles.root,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.fieldWrap,
-        children: [/*#__PURE__*/_jsx(FieldBase, {
-          size: size,
-          variant: variant,
-          focused: isFocused,
-          disabled: disabled,
-          filled: hasValue,
-          minHeight: sizeStyles.minHeight,
-          paddingHorizontal: isUnderline ? 0 : sizeStyles.paddingHorizontal,
-          borderRadius: borderRadiusProp ?? sizeStyles.borderRadius,
-          leading: leading,
-          trailing: trailing,
-          topNotch: floating.topNotch,
-          onPress: focusInput,
-          pressFeedback: false,
-          accessibilityRole: "search",
-          accessibilityLabel: accessibilityLabel ?? placeholder,
-          children: /*#__PURE__*/_jsx(TextInput, {
-            ref: setInputRef,
-            style: [styles.input, {
-              fontSize: sizeStyles.fontSize,
-              color: fieldText.color,
-              ...fieldText.weightStyle
-            }],
-            value: displayValue,
-            onChangeText: handleChangeText,
-            onSubmitEditing: handleSubmit,
-            onFocus: () => setIsFocused(true),
-            onBlur: () => setIsFocused(false),
-            placeholder: showFloatingLabel && !(isFocused || hasValue) ? undefined : placeholder,
-            placeholderTextColor: fieldText.placeholderColor,
-            autoFocus: autoFocus,
-            editable: !disabled,
-            returnKeyType: "search",
-            selectionColor: resolveVariantColors(theme, variant).borderFocusedRepresentative,
-            accessibilityLabel: accessibilityLabel ?? placeholder,
-            accessibilityState: {
-              disabled
-            },
-            ...rest
-          })
-        }), floating.node]
-      })
-    })]
-  });
-});
-SearchBar.displayName = 'SearchBar';
-const buildStyles = _theme => StyleSheet.create({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-    position: 'relative',
-    // The floated label sits over the box's top edge.
-    overflow: 'visible'
-  },
-  fieldWrap: {
-    flex: 1,
-    position: 'relative',
-    overflow: 'visible'
-  },
-  input: {
-    flex: 1,
-    padding: 0,
-    margin: 0,
-    includeFontPadding: false
-  }
-});
-export { SearchBar };
-export default SearchBar;
-//# sourceMappingURL=SearchBar.js.map
+"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,TextInput,View}from"react-native";import{useDebounce}from"../../hooks/useDebounce.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldBase,FieldLabel,resolveFieldSize,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SearchBar=forwardRef((e,o)=>{const{value:l,onChangeText:s,onSubmit:i,placeholder:t="Search…",autoFocus:r=!1,disabled:a=!1,onClear:n,leftIcon:c,debounceMs:d,size:u="md",variant:f,borderRadius:p,label:b,labelMode:m="top",labelStyle:h,haptic:S,style:g,inputStyle:y,accessibilityLabel:v,testID:x,...j}=e,F=useTheme(),z=f??F.components.searchBar?.defaultVariant??F.components.field?.defaultVariant??"filled",I="underline"===z,B=resolveFieldSize(F,u),C={...B,...F.components.searchBar?.[u]??{}},R=resolveFieldTextStyle(F,{disabled:a}),w=useRef(null),T=useMemo(()=>mergeRefs(w,o),[o]),L=useCallback(()=>{a||w.current?.focus()},[a]),H=useMemo(()=>buildStyles(F),[F]),_="string"==typeof l?l:"",[k,V]=useState(!1),[D,M]=useState(_),P=useDebounce(D,d??0);useEffect(()=>{void 0!==d&&_!==D&&M(_)},[_,d]);const E=useRef(_);useEffect(()=>{void 0!==d&&P!==E.current&&(E.current=P,s(P))},[P,d,s]);const N=useCallback(e=>{void 0===d?s(e):M(e)},[d,s]),A=useCallback(()=>{const e=resolveHaptic(S,"selection");e&&triggerHaptic(e),void 0!==d&&(M(""),E.current=""),s(""),n?.()},[S,d,s,n]),O=useCallback(()=>{i?.(void 0!==d?D:_)},[i,d,D,_]),W=void 0!==d?D:_,K=W.length>0,U={size:C.iconSize,color:a?F.colors.text.disabled:F.colors.text.tertiary,disabled:a},q=c?renderSlotIcon(c,U):(F.icons?.search??defaultIcons.search)(U),G=Boolean(b)&&"float"===m,J=useFloatingLabel({label:b,enabled:G,floated:k||K,variant:z,sizeTokens:{...B,...C},leadingOffset:C.iconSize+F.spacing.md,trailingOffset:K?C.iconSize+F.spacing.md:0,paddingLeft:I?0:C.paddingHorizontal,color:F.colors.field.label,style:h}),Q=K&&!a?_jsx(Pressable,{onPress:A,hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(F.icons?.close??defaultIcons.close)({size:C.iconSize,color:F.colors.text.secondary})}):null;return _jsxs(View,{style:g,testID:x,children:[b&&!G?_jsx(FieldLabel,{size:u,style:h,children:b}):null,_jsx(View,{style:H.root,children:_jsxs(View,{style:H.fieldWrap,children:[_jsx(FieldBase,{size:u,variant:z,focused:k,disabled:a,filled:K,minHeight:C.minHeight,paddingHorizontal:I?0:C.paddingHorizontal,borderRadius:p??C.borderRadius,leading:q,trailing:Q,topNotch:J.topNotch,onPress:L,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:v??t,children:_jsx(TextInput,{ref:T,style:[H.input,{fontSize:C.fontSize,color:R.color,...R.weightStyle},y],value:W,onChangeText:N,onSubmitEditing:O,onFocus:()=>V(!0),onBlur:()=>V(!1),placeholder:!G||k||K?t:void 0,placeholderTextColor:R.placeholderColor,autoFocus:r,editable:!a,returnKeyType:"search",selectionColor:resolveVariantColors(F,z).borderFocusedRepresentative,accessibilityLabel:v??t,accessibilityState:{disabled:a},...j})}),J.node]})})]})});SearchBar.displayName="SearchBar";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",width:"100%",position:"relative",overflow:"visible"},fieldWrap:{flex:1,position:"relative",overflow:"visible"},input:{flex:1,padding:0,margin:0,includeFontPadding:!1}});export{SearchBar};export default SearchBar;

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

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

package/lib/module/components/SectionHeader/SectionHeader.js

@@ -0,0 +1 @@
+"use strict";import React,{useMemo}from"react";import{useTheme}from"../../theme/index.js";import{RequiredMark}from"../FieldBase/index.js";import{Text}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const SectionHeader=({children:e,variant:t="title",flush:i=!1,required:r=!1,style:s,testID:o})=>{const a=useTheme(),l=useMemo(()=>({marginTop:i?0:a.spacing.lg,marginBottom:a.spacing.sm}),[a,i]),n="caps"===t?{variant:"overline",color:"tertiary",weight:void 0}:"sub"===t?{variant:"label",color:"primary",weight:"semibold"}:{variant:"title",color:void 0,weight:void 0};return _jsxs(Text,{variant:n.variant,color:n.color,weight:n.weight,accessibilityRole:"header",accessibilityLabel:r&&"string"==typeof e?`${e}, required`:void 0,style:[l,s],testID:o,children:[e,r?_jsx(RequiredMark,{}):null]})};export default SectionHeader;

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

@@ -0,0 +1 @@
+"use strict";export{default,SectionHeader}from"./SectionHeader.js";

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

@@ -1,317 +1 @@
-"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).
- *
- * The `variant` prop borrows Tabs' other two looks: `underline` slides a bar
- * under the selected label above a hairline divider, `pills` slides a tinted
- * pill behind it. Both drop the filled track and its inset; the indicator is
- * the same Animated.View as the thumb, drawn with that look's colour, corner
- * and vertical extent. It is a look, not a semantic change: the roles stay
- * radiogroup / radio, and screen navigation is still Tabs.
- */
-
-import { 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 { smoothCorners } from "../../utils/corners.js";
-import { renderSlotIcon } from "../AppIcon/slotIcon.js";
-import { SquircleFill, useSquircle } from "../SquircleFill/SquircleFill.js";
-
-/** The same three looks as `Tabs`; `segmented` is the filled track with a thumb. */
-
-/** A theme radius token or a pixel number. */
-
-/** What a segment knows about itself when it draws its icon. */
-
-/**
- * A segment icon speaks the library's slot language: an AppIcon name
- * (`icon: 'sun-1'`), `{ name, variant }`, a render function that gets
- * `{ color, size, selected, disabled }`, or any node drawn as is. A name is
- * drawn in the label's colour at the size's icon size.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * The control's sizes. Exported so `Tabs`' segmented variant draws from the
- * same numbers and the two looks cannot drift.
- */
-export const segmentedControlSizes = {
-  sm: {
-    height: 32,
-    fontSize: 12,
-    paddingHorizontal: 10,
-    iconSize: 14
-  },
-  md: {
-    height: 40,
-    fontSize: 14,
-    paddingHorizontal: 14,
-    iconSize: 16
-  },
-  lg: {
-    height: 48,
-    fontSize: 16,
-    paddingHorizontal: 18,
-    iconSize: 18
-  }
-};
-
-/** Inset between the track edge and the thumb; also read by `Tabs`' segmented variant. */
-export const segmentedControlTrackPadding = 4;
-const sizeMap = segmentedControlSizes;
-const TRACK_PADDING = segmentedControlTrackPadding;
-const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    segments,
-    value: valueProp,
-    defaultValue,
-    onChange,
-    size = 'md',
-    fullWidth = true,
-    disabled = false,
-    tone = 'primary',
-    variant = 'segmented',
-    radius,
-    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,
-    iconSize: segTheme?.[size]?.iconSize ?? baseSize.iconSize
-  };
-  const isSegmented = variant === 'segmented';
-  const isUnderline = variant === 'underline';
-  const isPills = variant === 'pills';
-  // Only the filled track has an inset; the underline and the pill sit in a
-  // row that spans the control's full height and width.
-  const trackPadding = isSegmented ? segTheme?.trackPadding ?? TRACK_PADDING : 0;
-  const underlineHeight = segTheme?.underlineHeight ?? 2;
-  const pillInset = segTheme?.pillInset ?? 4;
-
-  // Corner radius: the prop, else the theme token, else each variant's own
-  // default (md track with an sm thumb, full pill, square underline). With a
-  // radius given, the thumb nests inside the track with a concentric corner
-  // (the track's minus the inset), never negative.
-  const chosenRadius = typeof radius === 'number' ? radius : radius ? theme.radius[radius] : segTheme?.radius;
-  const trackRadius = chosenRadius ?? theme.radius.md;
-  const thumbRadius = chosenRadius === undefined ? theme.radius.sm : Math.max(chosenRadius - trackPadding, 0);
-  const pillRadius = chosenRadius ?? theme.radius.full;
-  const underlineRadius = chosenRadius ?? 0;
-
-  // 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;
-    }
-    // The thumb lives in the row inside the track's inset, so its origin is
-    // the first segment's left edge.
-    const targetX = segWidth * index;
-    const spring = theme.motion.spring.snappy;
-    // Clamped: the `snappy` preset is underdamped and would carry the thumb
-    // past the segment and back, poking it out of the track at either end.
-    // With the clamp it decelerates into the target and stops there.
-    const anim = Animated.spring(thumbTranslateX, {
-      toValue: targetX,
-      damping: spring.damping,
-      stiffness: spring.stiffness,
-      mass: spring.mass,
-      overshootClamping: true,
-      useNativeDriver: true
-    });
-    anim.start();
-    return anim;
-  }, [theme.motion.spring.snappy, thumbTranslateX]);
-  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]);
-
-  // The indicator per look: the elevated thumb, the brand-colour bar, or the
-  // tinted pill; the same colours Tabs gives its three variants.
-  const indicatorBg = isSegmented ? theme.colors.background.elevated : isPills ? theme.colors.primaryMuted : theme.colors.primary;
-  const indicatorRadius = isSegmented ? thumbRadius : isPills ? pillRadius : underlineRadius;
-  // The selected label and icon: brand colour by default (like the active
-  // tab), the dark text colour on the neutral tone.
-  const activeTextColor = tone === 'neutral' ? theme.colors.text.primary : theme.colors.primary;
-
-  // Android smooth corners: the track's fill is drawn as an SVG squircle over
-  // a transparent host. The thumb keeps its native corner: its radius sits
-  // under the squircle floor. It is flat (no shadow), by the team's choice.
-  // The other two looks have no fill, so the hook only forwards the layout.
-  const trackFill = theme.colors.background.tertiary;
-  const squircle = useSquircle(isSegmented, trackRadius, handleTrackLayout);
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    accessibilityRole: "radiogroup",
-    accessibilityLabel: accessibilityLabel,
-    testID: testID,
-    style: [styles.track, {
-      height: sizeStyles.height,
-      opacity: disabled ? 0.55 : 1,
-      alignSelf: fullWidth ? 'stretch' : 'flex-start'
-    }, isSegmented ? {
-      borderRadius: trackRadius,
-      ...smoothCorners,
-      backgroundColor: squircle.active ? 'transparent' : trackFill,
-      padding: trackPadding
-    } : isUnderline ? {
-      borderBottomColor: theme.colors.border.secondary,
-      borderBottomWidth: StyleSheet.hairlineWidth
-    } : null, containerStyle, style],
-    onLayout: squircle.onLayout,
-    children: [squircle.active && squircle.size ? /*#__PURE__*/_jsx(SquircleFill, {
-      width: squircle.size.width,
-      height: squircle.size.height,
-      radius: trackRadius,
-      fill: trackFill
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: styles.row,
-      children: [segmentWidth > 0 ? /*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
-        style: [styles.thumb, isSegmented ? {
-          top: 0,
-          height: sizeStyles.height - trackPadding * 2
-        } : isPills ? {
-          top: pillInset,
-          bottom: pillInset
-        } : {
-          bottom: 0,
-          height: underlineHeight
-        }, {
-          width: segmentWidth,
-          borderRadius: indicatorRadius,
-          ...smoothCorners,
-          backgroundColor: indicatorBg,
-          transform: [{
-            translateX: thumbTranslateX
-          }]
-        }, selectedIndicatorStyle]
-      }) : null, segments.map(segment => {
-        const isActive = segment.value === current;
-        const labelColor = isActive ? activeTextColor : theme.colors.text.tertiary;
-        const iconNode = renderSlotIcon(segment.icon, {
-          color: labelColor,
-          size: sizeStyles.iconSize,
-          selected: isActive,
-          disabled
-        });
-        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: [iconNode ? /*#__PURE__*/_jsx(View, {
-            style: styles.segmentIcon,
-            children: iconNode
-          }) : null, /*#__PURE__*/_jsx(Text, {
-            style: [styles.segmentLabel, {
-              color: labelColor,
-              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'
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'stretch',
-    position: 'relative',
-    overflow: 'hidden'
-  },
-  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
+"use strict";import{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{smoothCorners}from"../../utils/corners.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldLabel,FieldMessage,hasFieldText}from"../FieldBase/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const segmentedControlSizes={sm:{height:32,fontSize:12,paddingHorizontal:10,iconSize:14},md:{height:40,fontSize:14,paddingHorizontal:14,iconSize:16},lg:{height:48,fontSize:16,paddingHorizontal:18,iconSize:18}};export const segmentedControlTrackPadding=4;const sizeMap=segmentedControlSizes,TRACK_PADDING=4,SegmentedControl=forwardRef((e,t)=>{const{segments:i,label:o,helperText:r,error:s,value:l,defaultValue:n,onChange:a,size:d="md",fullWidth:c=!0,disabled:m=!1,tone:u="primary",variant:g="segmented",radius:h,haptic:p,accessibilityLabel:f,style:S,containerStyle:b,segmentStyle:y,selectedIndicatorStyle:x,textStyle:z,labelStyle:v,testID:C}=e,[j,w]=useControllableState({value:l,defaultValue:n??i[0]?.value,onChange:a}),F=useTheme(),I=F.components.segmentedControl,k=useMemo(()=>buildStyles(F),[F]),H=sizeMap[d],_={height:I?.[d]?.height??H.height,fontSize:I?.[d]?.fontSize??H.fontSize,paddingHorizontal:I?.[d]?.paddingHorizontal??H.paddingHorizontal,iconSize:I?.[d]?.iconSize??H.iconSize},T="segmented"===g,V="underline"===g,L="pills"===g,M=T?I?.trackPadding??4:0,R=I?.underlineHeight??2,A=I?.pillInset??4,D="number"==typeof h?h:h?F.radius[h]:I?.radius,P=D??F.radius.md,q=void 0===D?F.radius.sm:Math.max(D-M,0),W=D??F.radius.full,E=D??0,[B,N]=useState(0),G=useRef(createAnimatedValue(0)).current,K=Math.max(0,i.findIndex(e=>e.value===j)),O=B>0?(B-2*M)/Math.max(i.length,1):0,X=useCallback((e,t)=>{if(t<=0)return;const i=t*e,o=F.motion.spring.snappy,r=Animated.spring(G,{toValue:i,damping:o.damping,stiffness:o.stiffness,mass:o.mass,overshootClamping:!0,useNativeDriver:!0});return r.start(),r},[F.motion.spring.snappy,G]);useEffect(()=>{if(O>0){const e=X(K,O);return()=>e?.stop()}},[K,O,X]);const J=useCallback(e=>{const t=e.nativeEvent.layout.width;t!==B&&N(t)},[B]),Q=useCallback(e=>{if(m)return;if(e.value===j)return;const t=resolveHaptic(p,"selection");t&&triggerHaptic(t),w(e.value)},[m,w,j,p]),U=T?F.colors.background.elevated:L?F.colors.primaryMuted:F.colors.primary,Y=T?q:L?W:E,Z="neutral"===u?F.colors.text.primary:F.colors.primary,$=F.colors.background.tertiary,ee=useSquircle(T,P,J),te=hasFieldText(o),ie=hasFieldText(s)?s:r,oe=hasFieldText(ie),re=_jsxs(View,{ref:t,accessibilityRole:"radiogroup",accessibilityLabel:f??("string"==typeof o?o:void 0),testID:C,style:[k.track,{height:_.height,opacity:m?.55:1,alignSelf:c?"stretch":"flex-start"},T?{borderRadius:P,...smoothCorners,backgroundColor:ee.active?"transparent":$,padding:M}:V?{borderBottomColor:F.colors.border.secondary,borderBottomWidth:StyleSheet.hairlineWidth}:null,b,S],onLayout:ee.onLayout,children:[ee.active&&ee.size?_jsx(SquircleFill,{width:ee.size.width,height:ee.size.height,radius:P,fill:$}):null,_jsxs(View,{style:k.row,children:[O>0?_jsx(Animated.View,{pointerEvents:"none",style:[k.thumb,T?{top:0,height:_.height-2*M}:L?{top:A,bottom:A}:{bottom:0,height:R},{width:O,borderRadius:Y,...smoothCorners,backgroundColor:U,transform:[{translateX:G}]},x]}):null,i.map(e=>{const t=e.value===j,i=t?Z:F.colors.text.tertiary,o=renderSlotIcon(e.icon,{color:i,size:_.iconSize,selected:t,disabled:m});return _jsxs(Pressable,{onPress:()=>Q(e),disabled:m,accessibilityRole:"radio",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:m},style:({pressed:e})=>[k.segment,{paddingHorizontal:_.paddingHorizontal,opacity:e&&!t?.7:1},y],children:[o?_jsx(View,{style:k.segmentIcon,children:o}):null,_jsx(Text,{style:[k.segmentLabel,{color:i,fontSize:_.fontSize,fontWeight:t?F.typography.fontWeight.semibold:F.typography.fontWeight.medium},z,v],numberOfLines:1,children:e.label})]},String(e.value))})]})]});return te||oe?_jsxs(View,{style:{alignSelf:c?"stretch":"flex-start"},children:[te?_jsx(FieldLabel,{size:d,children:o}):null,re,oe?_jsx(FieldMessage,{size:d,text:ie,error:hasFieldText(s)}):null]}):re});SegmentedControl.displayName="SegmentedControl";const buildStyles=e=>StyleSheet.create({track:{flexDirection:"row",alignItems:"stretch",position:"relative"},row:{flex:1,flexDirection:"row",alignItems:"stretch",position:"relative",overflow:"hidden"},thumb:{position:"absolute",left:0},segment:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center"},segmentIcon:{marginRight:6},segmentLabel:{includeFontPadding:!1}});export{SegmentedControl};export default SegmentedControl;

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

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