@webority/mobile-ui 0.0.38 → 0.1.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
+import{forwardRef as e,useCallback as o,useEffect as i,useMemo as t,useRef as l,useState as r}from"react";import{Pressable as s,StyleSheet as a,TextInput as n,View as c}from"react-native";import{useDebounce as d}from"../../hooks/useDebounce.js";import{useTheme as p}from"../../theme/index.js";import{resolveHaptic as u,triggerHaptic as f}from"../../utils/hapticUtils.js";import{mergeRefs as m}from"../../utils/mergeRefs.js";import{defaultIcons as b}from"../AppIcon/defaultIcons.js";import{renderSlotIcon as h}from"../AppIcon/slotIcon.js";import{FieldBase as g,FieldLabel as y,resolveFieldSize as v,resolveFieldTextStyle as x,resolveVariantColors as z}from"../FieldBase/FieldBase.js";import{useFloatingLabel as S}from"../FieldBase/useFloatingLabel.js";import{jsx as j,jsxs as F}from"react/jsx-runtime";const B=e((e,a)=>{const{value:B,onChangeText:I,onSubmit:C,placeholder:R="Search…",autoFocus:L=!1,disabled:w=!1,onClear:H,leftIcon:T,debounceMs:D,size:k="md",variant:N,borderRadius:P,label:A,labelMode:M="top",labelStyle:O,haptic:V,style:W,inputStyle:E,accessibilityLabel:K,testID:U,...q}=e,G=p(),J=N??G.components.searchBar?.defaultVariant??G.components.field?.defaultVariant??"filled",Q="underline"===J,X=v(G,k),Y={...X,...G.components.searchBar?.[k]??{}},Z=x(G,{disabled:w}),$=l(null),_=t(()=>m($,a),[a]),ee=o(()=>{w||$.current?.focus()},[w]),oe=t(()=>buildStyles(G),[G]),ie="string"==typeof B?B:"",[te,le]=r(!1),[re,se]=r(ie),ae=d(re,D??0);i(()=>{void 0!==D&&ie!==re&&se(ie)},[ie,D]);const ne=l(ie);i(()=>{void 0!==D&&ae!==ne.current&&(ne.current=ae,I(ae))},[ae,D,I]);const ce=o(e=>{void 0===D?I(e):se(e)},[D,I]),de=o(()=>{const e=u(V,"selection");e&&f(e),void 0!==D&&(se(""),ne.current=""),I(""),H?.()},[V,D,I,H]),pe=o(()=>{C?.(void 0!==D?re:ie)},[C,D,re,ie]),ue=void 0!==D?re:ie,fe=ue.length>0,me={size:Y.iconSize,color:w?G.colors.text.disabled:G.colors.text.tertiary,disabled:w},be=T?h(T,me):(G.icons?.search??b.search)(me),he=Boolean(A)&&"float"===M,ge=S({label:A,enabled:he,floated:te||fe,variant:J,sizeTokens:{...X,...Y},leadingOffset:Y.iconSize+G.spacing.md,trailingOffset:fe?Y.iconSize+G.spacing.md:0,paddingLeft:Q?0:Y.paddingHorizontal,color:G.colors.field.label,style:O}),ye=fe&&!w?j(s,{onPress:de,hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(G.icons?.close??b.close)({size:Y.iconSize,color:G.colors.text.secondary})}):null;return F(c,{style:W,testID:U,children:[A&&!he?j(y,{size:k,style:O,children:A}):null,j(c,{style:oe.root,children:F(c,{style:oe.fieldWrap,children:[j(g,{size:k,variant:J,focused:te,disabled:w,filled:fe,minHeight:Y.minHeight,paddingHorizontal:Q?0:Y.paddingHorizontal,borderRadius:P??Y.borderRadius,leading:be,trailing:ye,topNotch:ge.topNotch,onPress:ee,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:K??R,children:j(n,{ref:_,style:[oe.input,{fontSize:Y.fontSize,color:Z.color,...Z.weightStyle},E],value:ue,onChangeText:ce,onSubmitEditing:pe,onFocus:()=>le(!0),onBlur:()=>le(!1),placeholder:!he||te||fe?R:void 0,placeholderTextColor:Z.placeholderColor,autoFocus:L,editable:!w,returnKeyType:"search",selectionColor:z(G,J).borderFocusedRepresentative,accessibilityLabel:K??R,accessibilityState:{disabled:w},...q})}),ge.node]})})]})});B.displayName="SearchBar";const buildStyles=e=>a.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{B as SearchBar};export default B;

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

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

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

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

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

@@ -0,0 +1 @@
+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
+import{forwardRef as e,useCallback as t,useEffect as i,useMemo as o,useRef as r,useState as n}from"react";import{Animated as l,Pressable as s,StyleSheet as a,Text as d,View as c}from"react-native";import{useControllableState as m}from"../../hooks/index.js";import{createAnimatedValue as g,useTheme as h}from"../../theme/index.js";import{resolveHaptic as p,triggerHaptic as u}from"../../utils/index.js";import{smoothCorners as f}from"../../utils/corners.js";import{renderSlotIcon as y}from"../AppIcon/slotIcon.js";import{FieldLabel as b,FieldMessage as z,hasFieldText as S}from"../FieldBase/index.js";import{SquircleFill as x,useSquircle as v}from"../SquircleFill/SquircleFill.js";import{jsx as C,jsxs as I}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 j=segmentedControlSizes,w=e((e,w)=>{const{segments:k,label:H,helperText:L,error:D,value:W,defaultValue:R,onChange:F,size:M="md",fullWidth:P=!0,disabled:V=!1,tone:B="primary",variant:q="segmented",radius:E,haptic:N,accessibilityLabel:T,style:A,containerStyle:O,segmentStyle:X,selectedIndicatorStyle:G,textStyle:J,labelStyle:K,testID:Q}=e,[U,Y]=m({value:W,defaultValue:R??k[0]?.value,onChange:F}),Z=h(),$=Z.components.segmentedControl,_=o(()=>buildStyles(Z),[Z]),ee=j[M],te={height:$?.[M]?.height??ee.height,fontSize:$?.[M]?.fontSize??ee.fontSize,paddingHorizontal:$?.[M]?.paddingHorizontal??ee.paddingHorizontal,iconSize:$?.[M]?.iconSize??ee.iconSize},ie="segmented"===q,oe="underline"===q,re="pills"===q,ne=ie?$?.trackPadding??4:0,le=$?.underlineHeight??2,se=$?.pillInset??4,ae="number"==typeof E?E:E?Z.radius[E]:$?.radius,de=ae??Z.radius.md,ce=void 0===ae?Z.radius.sm:Math.max(ae-ne,0),me=ae??Z.radius.full,ge=ae??0,[he,pe]=n(0),ue=r(g(0)).current,fe=Math.max(0,k.findIndex(e=>e.value===U)),ye=he>0?(he-2*ne)/Math.max(k.length,1):0,be=t((e,t)=>{if(t<=0)return;const i=t*e,o=Z.motion.spring.snappy,r=l.spring(ue,{toValue:i,damping:o.damping,stiffness:o.stiffness,mass:o.mass,overshootClamping:!0,useNativeDriver:!0});return r.start(),r},[Z.motion.spring.snappy,ue]);i(()=>{if(ye>0){const e=be(fe,ye);return()=>e?.stop()}},[fe,ye,be]);const ze=t(e=>{const t=e.nativeEvent.layout.width;t!==he&&pe(t)},[he]),Se=t(e=>{if(V)return;if(e.value===U)return;const t=p(N,"selection");t&&u(t),Y(e.value)},[V,Y,U,N]),xe=ie?Z.colors.background.elevated:re?Z.colors.primaryMuted:Z.colors.primary,ve=ie?ce:re?me:ge,Ce="neutral"===B?Z.colors.text.primary:Z.colors.primary,Ie=Z.colors.background.tertiary,je=v(ie,de,ze),we=S(H),ke=S(D)?D:L,He=S(ke),Le=I(c,{ref:w,accessibilityRole:"radiogroup",accessibilityLabel:T??("string"==typeof H?H:void 0),testID:Q,style:[_.track,{height:te.height,opacity:V?.55:1,alignSelf:P?"stretch":"flex-start"},ie?{borderRadius:de,...f,backgroundColor:je.active?"transparent":Ie,padding:ne}:oe?{borderBottomColor:Z.colors.border.secondary,borderBottomWidth:a.hairlineWidth}:null,O,A],onLayout:je.onLayout,children:[je.active&&je.size?C(x,{width:je.size.width,height:je.size.height,radius:de,fill:Ie}):null,I(c,{style:_.row,children:[ye>0?C(l.View,{pointerEvents:"none",style:[_.thumb,ie?{top:0,height:te.height-2*ne}:re?{top:se,bottom:se}:{bottom:0,height:le},{width:ye,borderRadius:ve,...f,backgroundColor:xe,transform:[{translateX:ue}]},G]}):null,k.map(e=>{const t=e.value===U,i=t?Ce:Z.colors.text.tertiary,o=y(e.icon,{color:i,size:te.iconSize,selected:t,disabled:V});return I(s,{onPress:()=>Se(e),disabled:V,accessibilityRole:"radio",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:V},style:({pressed:e})=>[_.segment,{paddingHorizontal:te.paddingHorizontal,opacity:e&&!t?.7:1},X],children:[o?C(c,{style:_.segmentIcon,children:o}):null,C(d,{style:[_.segmentLabel,{color:i,fontSize:te.fontSize,fontWeight:t?Z.typography.fontWeight.semibold:Z.typography.fontWeight.medium},J,K],numberOfLines:1,children:e.label})]},String(e.value))})]})]});return we||He?I(c,{style:{alignSelf:P?"stretch":"flex-start"},children:[we?C(b,{size:M,children:H}):null,Le,He?C(z,{size:M,text:ke,error:S(D)}):null]}):Le});w.displayName="SegmentedControl";const buildStyles=e=>a.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{w as SegmentedControl};export default w;

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

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