@webority/mobile-ui 0.0.39 → 0.1.0

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

@@ -1,320 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.segmentedControlTrackPadding = exports.segmentedControlSizes = exports.default = exports.SegmentedControl = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/index.js");
-var _index3 = require("../../utils/index.js");
-var _corners = require("../../utils/corners.js");
-var _slotIcon = require("../AppIcon/slotIcon.js");
-var _SquircleFill = require("../SquircleFill/SquircleFill.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- */
-
-/** 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.
- */
-
-/**
- * The control's sizes. Exported so `Tabs`' segmented variant draws from the
- * same numbers and the two looks cannot drift.
- */
-const segmentedControlSizes = exports.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. */
-const segmentedControlTrackPadding = exports.segmentedControlTrackPadding = 4;
-const sizeMap = segmentedControlSizes;
-const TRACK_PADDING = segmentedControlTrackPadding;
-const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.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] = (0, _index.useControllableState)({
-    value: valueProp,
-    defaultValue: defaultValue ?? segments[0]?.value,
-    onChange
-  });
-  const theme = (0, _index2.useTheme)();
-  const segTheme = theme.components.segmentedControl;
-  const styles = (0, _react.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] = (0, _react.useState)(0);
-  const thumbTranslateX = (0, _react.useRef)((0, _index2.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 = (0, _react.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 = _reactNative.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]);
-  (0, _react.useEffect)(() => {
-    if (segmentWidth > 0) {
-      const anim = animateThumb(activeIndex, segmentWidth);
-      return () => anim?.stop();
-    }
-  }, [activeIndex, segmentWidth, animateThumb]);
-  const handleTrackLayout = (0, _react.useCallback)(e => {
-    const width = e.nativeEvent.layout.width;
-    if (width !== trackWidth) {
-      setTrackWidth(width);
-    }
-  }, [trackWidth]);
-  const handlePress = (0, _react.useCallback)(segment => {
-    if (disabled) {
-      return;
-    }
-    if (segment.value === current) {
-      return;
-    }
-    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index3.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 = (0, _SquircleFill.useSquircle)(isSegmented, trackRadius, handleTrackLayout);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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,
-      ..._corners.smoothCorners,
-      backgroundColor: squircle.active ? 'transparent' : trackFill,
-      padding: trackPadding
-    } : isUnderline ? {
-      borderBottomColor: theme.colors.border.secondary,
-      borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
-    } : null, containerStyle, style],
-    onLayout: squircle.onLayout,
-    children: [squircle.active && squircle.size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SquircleFill.SquircleFill, {
-      width: squircle.size.width,
-      height: squircle.size.height,
-      radius: trackRadius,
-      fill: trackFill
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.row,
-      children: [segmentWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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,
-          ..._corners.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 = (0, _slotIcon.renderSlotIcon)(segment.icon, {
-          color: labelColor,
-          size: sizeStyles.iconSize,
-          selected: isActive,
-          disabled
-        });
-        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: [iconNode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.segmentIcon,
-            children: iconNode
-          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 => _reactNative.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
-  }
-});
-var _default = exports.default = SegmentedControl;
-//# sourceMappingURL=SegmentedControl.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.segmentedControlTrackPadding=exports.segmentedControlSizes=exports.default=exports.SegmentedControl=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index4=require("../FieldBase/index.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_jsxRuntime=require("react/jsx-runtime");const segmentedControlSizes=exports.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}},segmentedControlTrackPadding=exports.segmentedControlTrackPadding=4,sizeMap=segmentedControlSizes,TRACK_PADDING=segmentedControlTrackPadding,SegmentedControl=exports.SegmentedControl=(0,_react.forwardRef)((e,t)=>{const{segments:i,label:r,helperText:n,error:o,value:s,defaultValue:a,onChange:l,size:d="md",fullWidth:c=!0,disabled:u=!1,tone:g="primary",variant:m="segmented",radius:h,haptic:x,accessibilityLabel:p,style:_,containerStyle:f,segmentStyle:S,selectedIndicatorStyle:y,textStyle:b,labelStyle:v,testID:z}=e,[j,C]=(0,_index.useControllableState)({value:s,defaultValue:a??i[0]?.value,onChange:l}),R=(0,_index2.useTheme)(),q=R.components.segmentedControl,I=(0,_react.useMemo)(()=>buildStyles(R),[R]),w=sizeMap[d],k={height:q?.[d]?.height??w.height,fontSize:q?.[d]?.fontSize??w.fontSize,paddingHorizontal:q?.[d]?.paddingHorizontal??w.paddingHorizontal,iconSize:q?.[d]?.iconSize??w.iconSize},N="segmented"===m,F="underline"===m,T="pills"===m,H=N?q?.trackPadding??TRACK_PADDING:0,P=q?.underlineHeight??2,D=q?.pillInset??4,L="number"==typeof h?h:h?R.radius[h]:q?.radius,M=L??R.radius.md,V=void 0===L?R.radius.sm:Math.max(L-H,0),A=L??R.radius.full,W=L??0,[B,E]=(0,_react.useState)(0),G=(0,_react.useRef)((0,_index2.createAnimatedValue)(0)).current,K=Math.max(0,i.findIndex(e=>e.value===j)),O=B>0?(B-2*H)/Math.max(i.length,1):0,X=(0,_react.useCallback)((e,t)=>{if(t<=0)return;const i=t*e,r=R.motion.spring.snappy,n=_reactNative.Animated.spring(G,{toValue:i,damping:r.damping,stiffness:r.stiffness,mass:r.mass,overshootClamping:!0,useNativeDriver:!0});return n.start(),n},[R.motion.spring.snappy,G]);(0,_react.useEffect)(()=>{if(O>0){const e=X(K,O);return()=>e?.stop()}},[K,O,X]);const J=(0,_react.useCallback)(e=>{const t=e.nativeEvent.layout.width;t!==B&&E(t)},[B]),Q=(0,_react.useCallback)(e=>{if(u)return;if(e.value===j)return;const t=(0,_index3.resolveHaptic)(x,"selection");t&&(0,_index3.triggerHaptic)(t),C(e.value)},[u,C,j,x]),U=N?R.colors.background.elevated:T?R.colors.primaryMuted:R.colors.primary,Y=N?V:T?A:W,Z="neutral"===g?R.colors.text.primary:R.colors.primary,$=R.colors.background.tertiary,ee=(0,_SquircleFill.useSquircle)(N,M,J),te=(0,_index4.hasFieldText)(r),ie=(0,_index4.hasFieldText)(o)?o:n,re=(0,_index4.hasFieldText)(ie),ne=p??("string"==typeof r?r:void 0),oe=(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,accessibilityRole:"radiogroup",accessibilityLabel:ne,testID:z,style:[I.track,{height:k.height,opacity:u?.55:1,alignSelf:c?"stretch":"flex-start"},N?{borderRadius:M,..._corners.smoothCorners,backgroundColor:ee.active?"transparent":$,padding:H}:F?{borderBottomColor:R.colors.border.secondary,borderBottomWidth:_reactNative.StyleSheet.hairlineWidth}:null,f,_],onLayout:ee.onLayout,children:[ee.active&&ee.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:ee.size.width,height:ee.size.height,radius:M,fill:$}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:I.row,children:[O>0?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[I.thumb,N?{top:0,height:k.height-2*H}:T?{top:D,bottom:D}:{bottom:0,height:P},{width:O,borderRadius:Y,..._corners.smoothCorners,backgroundColor:U,transform:[{translateX:G}]},y]}):null,i.map(e=>{const t=e.value===j,i=t?Z:R.colors.text.tertiary,r=(0,_slotIcon.renderSlotIcon)(e.icon,{color:i,size:k.iconSize,selected:t,disabled:u});return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>Q(e),disabled:u,accessibilityRole:"radio",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:u},style:({pressed:e})=>[I.segment,{paddingHorizontal:k.paddingHorizontal,opacity:e&&!t?.7:1},S],children:[r?(0,_jsxRuntime.jsx)(_reactNative.View,{style:I.segmentIcon,children:r}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.segmentLabel,{color:i,fontSize:k.fontSize,fontWeight:t?R.typography.fontWeight.semibold:R.typography.fontWeight.medium},b,v],numberOfLines:1,children:e.label})]},String(e.value))})]})]});return te||re?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{alignSelf:c?"stretch":"flex-start"},children:[te?(0,_jsxRuntime.jsx)(_index4.FieldLabel,{size:d,children:r}):null,oe,re?(0,_jsxRuntime.jsx)(_index4.FieldMessage,{size:d,text:ie,error:(0,_index4.hasFieldText)(o)}):null]}):oe});SegmentedControl.displayName="SegmentedControl";const buildStyles=e=>_reactNative.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}});var _default=exports.default=SegmentedControl;

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

@@ -1,20 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SegmentedControl",{enumerable:!0,get:function(){return _SegmentedControl.SegmentedControl}}),Object.defineProperty(exports,"default",{enumerable:!0,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,u,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((u=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(u.get||u.set)?o(i,t,u):i[t]=e[t]);return i})(e,t)}

package/lib/commonjs/components/Select/Select.js

@@ -1,277 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Select = 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 _slotIcon = require("../AppIcon/slotIcon.js");
-var _Chevron = require("../FieldBase/Chevron.js");
-var _FieldBase = require("../FieldBase/FieldBase.js");
-var _OptionSheet = require("../OptionSheet/OptionSheet.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); }
-/**
- * Select — single + multi select with bottom-sheet picker.
- *
- * The trigger is a FieldBase row; the picker itself is the shared OptionSheet
- * primitive (also behind InlineSelect), so the sheet look + behaviour never
- * drift between the two. Supports optional client-side search, theme-aware
- * styling, full a11y, and dark-mode auto.
- */
-
-// `unknown` here keeps the forwardRef signature non-generic — consumers who
-// pass non-`SelectOption` shapes use the accessor props; type inference is
-// preserved at the call site via the `SelectProps<T>` union.
-const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    options,
-    getOptionLabel,
-    getOptionValue,
-    getOptionDisabled,
-    getOptionDescription,
-    getOptionIcon,
-    placeholder,
-    searchable = false,
-    haptic,
-    label,
-    title,
-    required = false,
-    error,
-    disabled = false,
-    size = 'md',
-    variant: variantProp,
-    leftIcon,
-    rightIcon,
-    chevronColor,
-    chevronSize,
-    borderRadius: borderRadiusProp,
-    accessibilityLabel,
-    style,
-    triggerStyle,
-    textStyle,
-    optionStyle,
-    selectedOptionStyle,
-    optionTextStyle,
-    selectedOptionTextStyle,
-    testID
-  } = props;
-  const multi = props.multi === true;
-
-  // Accessors — fall back to SelectOption-shaped reads when unset so the
-  // default/typed call site keeps zero boilerplate.
-  const labelOf = (0, _react.useCallback)(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
-  const valueOf = (0, _react.useCallback)(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
-  const disabledOf = (0, _react.useCallback)(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
-  const descriptionOf = (0, _react.useCallback)(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
-  const iconOf = (0, _react.useCallback)(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
-  const theme = (0, _index.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
-  const fieldText = (0, _FieldBase.resolveFieldTextStyle)(theme, {
-    disabled
-  });
-
-  // Variant resolution mirrors Input: caller prop → component-specific token →
-  // shared field-family token → library default. Lets a brand flip every
-  // input-style control in one place while keeping a Select-specific override.
-  const variant = variantProp ?? theme.components.select?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'outlined';
-
-  // Bridge the legacy fill-colour API (components.select.fillColors[variant])
-  // onto FieldBase's FieldVariantTokens shape — same mapping Input uses.
-  const fillOverrides = (0, _react.useMemo)(() => {
-    const legacy = theme.components.select?.fillColors?.[variant];
-    if (!legacy) {
-      return undefined;
-    }
-    const overrides = {};
-    if (legacy.idleEmpty !== undefined) {
-      overrides.backgroundIdleEmpty = legacy.idleEmpty;
-    }
-    if (legacy.idleFilled !== undefined) {
-      overrides.backgroundIdleFilled = legacy.idleFilled;
-    }
-    if (legacy.focus !== undefined) {
-      overrides.backgroundFocused = legacy.focus;
-    }
-    if (legacy.error !== undefined) {
-      overrides.backgroundError = legacy.error;
-    }
-    if (legacy.disabled !== undefined) {
-      overrides.backgroundDisabled = legacy.disabled;
-    }
-    return Object.keys(overrides).length > 0 ? overrides : undefined;
-  }, [theme.components.select?.fillColors, variant]);
-  const borderRadiusOverride = borderRadiusProp ?? theme.components.select?.borderRadius;
-  const [open, setOpen] = (0, _react.useState)(false);
-
-  // Selection helpers — typed to keep callbacks fully type-safe.
-  const isSelected = (0, _react.useCallback)(optValue => {
-    if (multi) {
-      const arr = props.value ?? [];
-      return arr.includes(optValue);
-    }
-    return props.value === optValue;
-  }, [multi, props.value]);
-  const selectedOptions = (0, _react.useMemo)(() => {
-    if (multi) {
-      const arr = props.value ?? [];
-      return options.filter(o => arr.includes(valueOf(o)));
-    }
-    const v = props.value;
-    if (v === undefined || v === null) {
-      return [];
-    }
-    const found = options.find(o => valueOf(o) === v);
-    return found ? [found] : [];
-  }, [multi, options, props.value, valueOf]);
-  const handleOpen = (0, _react.useCallback)(() => {
-    if (disabled) {
-      return;
-    }
-    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index2.triggerHaptic)(h);
-    }
-    setOpen(true);
-  }, [disabled, haptic]);
-  const handleClose = (0, _react.useCallback)(() => {
-    setOpen(false);
-  }, []);
-  const handleSelect = (0, _react.useCallback)(option => {
-    if (disabledOf(option)) {
-      return;
-    }
-    const optValue = valueOf(option);
-    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index2.triggerHaptic)(h);
-    }
-    if (multi) {
-      const current = props.value ?? [];
-      const next = current.includes(optValue) ? current.filter(v => v !== optValue) : [...current, optValue];
-      props.onChange(next);
-      return;
-    }
-    props.onChange(optValue);
-    handleClose();
-  }, [multi, props, handleClose, disabledOf, valueOf, haptic]);
-
-  // Trigger label / placeholder text.
-  const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');
-  const showingPlaceholder = selectedOptions.length === 0;
-  const hasError = typeof error === 'string' && error.length > 0;
-
-  // Named slot icons follow the field palette the way Input's do: grey at
-  // rest, dark while the sheet is open, dimmed while disabled.
-  const slotState = {
-    color: disabled ? theme.colors.field.iconDisabled : open ? theme.colors.field.iconFocused : theme.colors.field.icon,
-    size: sizeTokens.iconSize,
-    disabled,
-    focused: open,
-    error: hasError
-  };
-  const a11ySummary = selectedOptions.length === 0 ? placeholder ?? 'No selection' : `Selected: ${selectedOptions.map(o => labelOf(o)).join(', ')}`;
-  const a11yLabel = accessibilityLabel ?? `${label ?? 'Select'}. ${a11ySummary}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.container, style],
-    testID: testID,
-    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldLabel, {
-      size: size,
-      required: required,
-      children: label
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      ref: ref,
-      collapsable: false,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldBase, {
-        size: size,
-        variant: variant,
-        disabled: disabled,
-        error: hasError,
-        filled: selectedOptions.length > 0,
-        onPress: handleOpen,
-        borderRadius: borderRadiusOverride,
-        fillOverrides: fillOverrides
-        // The underline row has no box: its text and chevron sit flush with
-        // the rule's ends, the same as Input's underline text.
-        ,
-        paddingHorizontal: variant === 'underline' ? 0 : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: a11yLabel,
-        accessibilityState: {
-          disabled,
-          expanded: open
-        },
-        style: triggerStyle,
-        leading: leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          children: (0, _slotIcon.renderSlotIcon)(leftIcon, slotState)
-        }) : null,
-        trailing: rightIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          children: (0, _slotIcon.renderSlotIcon)(rightIcon, slotState)
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chevron.Chevron, {
-          color: chevronColor ?? (disabled ? theme.colors.text.disabled : theme.colors.text.tertiary),
-          size: chevronSize ?? sizeTokens.iconSize,
-          open: open,
-          style: styles.chevron
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [styles.triggerText, {
-            color: showingPlaceholder ? fieldText.placeholderColor : fieldText.color,
-            fontSize: sizeTokens.fontSize,
-            ...fieldText.weightStyle
-          }, textStyle],
-          numberOfLines: 1,
-          children: [triggerText, showingPlaceholder && required && !label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.RequiredMark, {}) : null]
-        })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldMessage, {
-      size: size,
-      error: true,
-      text: hasError ? error : undefined
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionSheet.OptionSheet, {
-      open: open,
-      onClose: handleClose,
-      title: title,
-      accessibilityLabel: label ?? placeholder ?? 'Options',
-      options: options,
-      labelOf: labelOf,
-      getValue: valueOf,
-      disabledOf: disabledOf,
-      descriptionOf: descriptionOf,
-      iconOf: iconOf,
-      isSelected: isSelected,
-      onSelect: handleSelect,
-      multi: multi,
-      searchable: searchable,
-      optionStyle: optionStyle,
-      selectedOptionStyle: selectedOptionStyle,
-      optionTextStyle: optionTextStyle,
-      selectedOptionTextStyle: selectedOptionTextStyle,
-      searchSelectionColor: (0, _FieldBase.resolveVariantColors)(theme, variant, fillOverrides).borderFocusedRepresentative
-    })]
-  });
-});
-Select.displayName = 'Select';
-const buildStyles = _theme => _reactNative.StyleSheet.create({
-  container: {
-    width: '100%'
-  },
-  label: {
-    includeFontPadding: false
-  },
-  triggerText: {
-    flex: 1,
-    includeFontPadding: false
-  },
-  errorText: {
-    includeFontPadding: false
-  },
-  chevron: {
-    marginLeft: 8
-  }
-});
-var _default = exports.default = Select;
-//# sourceMappingURL=Select.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Select=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_Chevron=require("../FieldBase/Chevron.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,l=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,n,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(r=t?l:i){if(r.has(e))return r.get(e);r.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?r(o,t,n):o[t]=e[t]);return o})(e,t)}const sameSelectValue=(e,t)=>String(e)===String(t),containsValue=(e,t)=>e.some(e=>sameSelectValue(e,t)),Select=exports.Select=(0,_react.forwardRef)((e,t)=>{const{options:i,getOptionLabel:l,getOptionValue:r,getOptionDisabled:n,getOptionDescription:o,getOptionIcon:s,placeholder:a,searchable:c=!1,haptic:d,label:u,help:p,title:_,required:x=!1,error:f,helperText:b,prefix:h,numberOfLines:g=1,disabled:S=!1,size:v="md",variant:m,leftIcon:y,rightIcon:j,chevronColor:F,chevronSize:O,borderRadius:R,accessibilityLabel:C,labelStyle:k,style:V,triggerStyle:z,textStyle:B,optionStyle:T,selectedOptionStyle:q,optionTextStyle:I,selectedOptionTextStyle:N,testID:w}=e,M=!0===e.multi,H=(0,_react.useCallback)(e=>l?l(e):e.label??"",[l]),L=(0,_react.useCallback)(e=>r?r(e):e.value,[r]),P=(0,_react.useCallback)(e=>n?n(e):!0===e.disabled,[n]),D=(0,_react.useCallback)(e=>o?o(e):e.description,[o]),W=(0,_react.useCallback)(e=>s?s(e):e.icon,[s]),E=(0,_index.useTheme)(),A=(0,_react.useMemo)(()=>buildStyles(E),[E]),$=(0,_FieldBase.resolveFieldSize)(E,v),G=(0,_FieldBase.resolveFieldTextStyle)(E,{disabled:S}),J=m??E.components.select?.defaultVariant??E.components.field?.defaultVariant??"outlined",K=(0,_react.useMemo)(()=>{const e=E.components.select?.fillColors?.[J];if(!e)return;const t={};return void 0!==e.idleEmpty&&(t.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(t.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(t.backgroundFocused=e.focus),void 0!==e.error&&(t.backgroundError=e.error),void 0!==e.disabled&&(t.backgroundDisabled=e.disabled),Object.keys(t).length>0?t:void 0},[E.components.select?.fillColors,J]),Q=R??E.components.select?.borderRadius,[U,X]=(0,_react.useState)(!1),Y=(0,_react.useCallback)(t=>{if(M){const i=e.value??[];return containsValue(i,t)}return null!=e.value&&sameSelectValue(e.value,t)},[M,e.value]),Z=(0,_react.useMemo)(()=>{if(M){const t=e.value??[];return i.filter(e=>containsValue(t,L(e)))}const t=e.value;if(null==t)return[];const l=i.find(e=>sameSelectValue(L(e),t));return l?[l]:[]},[M,i,e.value,L]),ee=(0,_react.useCallback)(()=>{if(S)return;const e=(0,_index2.resolveHaptic)(d,"selection");e&&(0,_index2.triggerHaptic)(e),X(!0)},[S,d]),te=(0,_react.useCallback)(()=>{X(!1)},[]),ie=(0,_react.useCallback)(t=>{if(P(t))return;const i=L(t),l=(0,_index2.resolveHaptic)(d,"selection");if(l&&(0,_index2.triggerHaptic)(l),M){const t=e.value??[],l=containsValue(t,i)?t.filter(e=>!sameSelectValue(e,i)):[...t,i];return void e.onChange(l)}e.onChange(i),te()},[M,e,te,P,L,d]),le=0===Z.length?a??"Select…":Z.map(e=>H(e)).join(", "),re=0===Z.length,ne=(0,_FieldBase.hasFieldText)(f),oe=(0,_FieldBase.hasFieldText)(u),se=(0,_FieldBase.fieldTextAsString)(u),ae=Math.round(1.4*$.fontSize),ce={color:S?E.colors.field.iconDisabled:U?E.colors.field.iconFocused:E.colors.field.icon,size:$.iconSize,disabled:S,focused:U,error:ne},de=0===Z.length?a??"No selection":`Selected: ${Z.map(e=>H(e)).join(", ")}`,ue=C??`${se??"Select"}. ${de}`;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[A.container,V],testID:w,children:[oe?(0,_jsxRuntime.jsx)(_FieldBase.FieldLabel,{size:v,required:x,help:p,style:k,children:u}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,collapsable:!1,children:(0,_jsxRuntime.jsxs)(_FieldBase.FieldBase,{size:v,variant:J,disabled:S,error:ne,filled:Z.length>0,onPress:ee,borderRadius:Q,fillOverrides:K,paddingHorizontal:"underline"===J?0:void 0,accessibilityRole:"button",accessibilityLabel:ue,accessibilityState:{disabled:S,expanded:U},style:z,slotAlign:1===g?"center":"top",slotLineHeight:1===g?void 0:ae,leading:y?(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_slotIcon.renderSlotIcon)(y,ce)}):null,trailing:j?(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_slotIcon.renderSlotIcon)(j,ce)}):(0,_jsxRuntime.jsx)(_Chevron.Chevron,{color:F??(S?E.colors.text.disabled:E.colors.text.tertiary),size:O??$.iconSize,open:U,style:A.chevron}),children:[(0,_FieldBase.hasFieldText)(h)?"string"==typeof h||"number"==typeof h?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[A.prefix,{color:G.placeholderColor,fontSize:$.fontSize,lineHeight:1===g?void 0:ae,marginRight:E.spacing.xs}],children:h}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[A.prefixNode,{minHeight:1===g?void 0:ae,justifyContent:"center",marginRight:E.spacing.xs}],children:h}):null,(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[A.triggerText,{color:re?G.placeholderColor:G.color,fontSize:$.fontSize,lineHeight:1===g?void 0:ae,...G.weightStyle},B],numberOfLines:g,children:[le,re&&x&&!oe?(0,_jsxRuntime.jsx)(_FieldBase.RequiredMark,{}):null]})]})}),(0,_jsxRuntime.jsx)(_FieldBase.FieldMessage,{size:v,error:ne,text:ne?f:b}),(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:U,onClose:te,title:_??se,accessibilityLabel:se??(oe?_:void 0)??a??"Options",options:i,labelOf:H,getValue:L,disabledOf:P,descriptionOf:D,iconOf:W,isSelected:Y,onSelect:ie,multi:M,searchable:c,optionStyle:T,selectedOptionStyle:q,optionTextStyle:I,selectedOptionTextStyle:N,searchSelectionColor:(0,_FieldBase.resolveVariantColors)(E,J,K).borderFocusedRepresentative})]})});Select.displayName="Select";const buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},label:{includeFontPadding:!1},triggerText:{flex:1,includeFontPadding:!1},errorText:{includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},chevron:{marginLeft:8}});var _default=exports.default=Select;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Select", {
-  enumerable: true,
-  get: function () {
-    return _Select.Select;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Select.default;
-  }
-});
-var _Select = _interopRequireWildcard(require("./Select.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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Select",{enumerable:!0,get:function(){return _Select.Select}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Select.default}});var _Select=_interopRequireWildcard(require("./Select.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,u,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((u=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(u.get||u.set)?o(i,t,u):i[t]=e[t]);return i})(e,t)}