@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/controls/CheckboxGroup.js

@@ -0,0 +1,102 @@
+const _excluded = ["children", "label", "accessibilityLabel", "onChange", "selectedValues", "testID"],
+  _excluded2 = ["value", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { Children, forwardRef, isValidElement, memo, useMemo } from 'react';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { Checkbox } from './Checkbox';
+import { ControlGroup } from './ControlGroup';
+
+/**
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="combobox" instead.
+ *
+ * @example
+ * // Instead of:
+ * <CheckboxGroup selectedValues={new Set(['value1'])} onChange={onChange}>
+ *   <Checkbox value="value1">Option 1</Checkbox>
+ * </CheckboxGroup>
+ *
+ * // Use:
+ * <ControlGroup
+ *   accessibilityRole="combobox"
+ *   ControlComponent={Checkbox}
+ *   options={[{ value: 'value1', children: 'Option 1' }]}
+ *   value={['value1']}
+ *   onChange={(value) => onChange(value)}
+ * />
+ */
+
+/**
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="combobox" instead.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+// Follows behavior describe in https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-2/checkbox-2.html
+const CheckboxGroupWithRef = /*#__PURE__*/forwardRef(function CheckboxGroupWithRef(_ref, ref) {
+  let {
+      children,
+      label,
+      accessibilityLabel,
+      onChange,
+      selectedValues,
+      testID
+    } = _ref,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (isDevelopment()) {
+    console.warn('CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="combobox" instead.');
+  }
+  if (isDevelopment() && !label && !accessibilityLabel) {
+    console.warn('Please specify an accessibility label for the checkbox group.');
+  }
+
+  // Convert children to ControlGroup options format
+  const controlGroupOptions = useMemo(() => {
+    return Children.map(children, child => {
+      if (! /*#__PURE__*/isValidElement(child)) {
+        return null;
+      }
+      const _child$props = child.props,
+        {
+          value,
+          children: checkboxChildren
+        } = _child$props,
+        childProps = _objectWithoutPropertiesLoose(_child$props, _excluded2);
+      if (isDevelopment() && typeof value === 'undefined') {
+        console.error('Checkboxes inside CheckboxGroup should have values.');
+        return null;
+      }
+      return _extends({
+        value: value,
+        children: checkboxChildren
+      }, childProps);
+    }).filter(Boolean);
+  }, [children]);
+
+  // Convert Set to Array for ControlGroup
+  const selectedValuesArray = Array.from(selectedValues);
+
+  // Handle onChange signature conversion
+  const handleChange = value => {
+    if (onChange) {
+      onChange(value);
+    }
+  };
+  return /*#__PURE__*/_jsx(ControlGroup, _extends({
+    ref: ref,
+    ControlComponent: Checkbox,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "combobox",
+    gap: 0,
+    label: label,
+    onChange: handleChange,
+    options: controlGroupOptions || [],
+    testID: testID,
+    value: selectedValuesArray
+  }, restProps));
+  // Make forwardRef result function stay generic function type
+});
+
+// Make memoized function stay generic function type
+/**
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="combobox" instead.
+ */
+export const CheckboxGroup = /*#__PURE__*/memo(CheckboxGroupWithRef);

package/esm/controls/Control.js

@@ -0,0 +1,155 @@
+const _excluded = ["testID", "label", "checked", "indeterminate", "disabled", "readOnly", "onChange", "hitSlop", "value", "controlColor", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "shouldUseSwitchTransition", "accessible", "style", "color", "background", "borderColor", "borderRadius", "borderWidth"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { I18nManager, Keyboard, Pressable, View } from 'react-native';
+import { accessibleOpacityDisabled, opacityPressed } from '@coinbase/cds-common/tokens/interactable';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { useTheme } from '../hooks/useTheme';
+import { Text } from '../typography/Text';
+import { Haptics } from '../utils/haptics';
+import { useControlMotionProps } from './useControlMotionProps';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref) {
+  let {
+      testID,
+      label,
+      checked,
+      indeterminate,
+      disabled = false,
+      readOnly = false,
+      onChange,
+      hitSlop = 4,
+      value,
+      controlColor,
+      accessibilityRole,
+      accessibilityLabel,
+      accessibilityHint,
+      children: ControlIcon,
+      shouldUseSwitchTransition,
+      accessible = true,
+      style,
+      color,
+      background,
+      borderColor,
+      borderRadius,
+      borderWidth
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  if (isDevelopment() && accessible && !label && !accessibilityLabel) {
+    console.warn("Please specify an accessibility label for the " + accessibilityRole + " control with value " + value + ".");
+  }
+  const bodyLineHeight = theme.lineHeight.body;
+  const isMounted = useRef(false);
+  const {
+    animation,
+    animatedBoxValue,
+    animatedScaleValue,
+    animatedOpacityValue
+  } = useControlMotionProps({
+    checked: checked || indeterminate,
+    disabled,
+    shouldUseSwitchTransition
+  });
+  const pressDisabled = disabled || readOnly;
+  useEffect(() => {
+    if (isMounted.current) animation.start();else isMounted.current = true;
+  }, [checked, indeterminate, animation]);
+  const handlePress = useCallback(() => {
+    void Haptics.lightImpact();
+    const newChecked = typeof checked === 'boolean' ? !checked : undefined;
+    onChange == null || onChange(value, newChecked);
+    Keyboard.dismiss();
+  }, [checked, onChange, value]);
+  const iconWrapperStyles = useMemo(() => ({
+    height: bodyLineHeight,
+    justifyContent: 'center'
+  }), [bodyLineHeight]);
+  const pressableStyle = useMemo(() => _extends({
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+    alignItems: 'flex-start',
+    gap: theme.space[1]
+  }, style), [theme.space, style]);
+  const getLabelStyle = useCallback(state => ({
+    color: color ? theme.color[color] : animatedBoxValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [theme.color.fgMuted, theme.color.fg]
+    }),
+    // Prevent text element from expanding beyond available width.
+    flexShrink: 1,
+    opacity: state.pressed ? opacityPressed : pressDisabled ? accessibleOpacityDisabled : 1
+  }), [animatedBoxValue, color, pressDisabled, theme.color]);
+  const accessibilityProps = useMemo(() => accessible ? {
+    accessibilityActions: [{
+      name: 'activate'
+    }],
+    accessibilityHint,
+    accessibilityLabel,
+    accessibilityRole,
+    accessibilityState: {
+      disabled: pressDisabled,
+      checked: Boolean(checked || indeterminate)
+    }
+  } : {}, [accessible, accessibilityHint, accessibilityLabel, accessibilityRole, pressDisabled, checked, indeterminate]);
+  const handleAccessibilityAction = useCallback(event => {
+    if (event.nativeEvent.actionName === 'activate') handlePress();
+  }, [handlePress]);
+  const controlIcon = useCallback(_ref2 => {
+    let {
+      pressed
+    } = _ref2;
+    /**
+     * If the control has label, the label's lineHeight doesn't match the icon size. We need to
+     * wrap the icon with a container that match the lineHeight of the label typography and
+     * center the icon inside the wrapper so that the icon will be aligned properly with the
+     * first line of the label text.
+     */
+    const iconElement = /*#__PURE__*/_jsx(ControlIcon, {
+      animatedOpacityValue: animatedOpacityValue,
+      animatedScaleValue: animatedScaleValue,
+      background: background,
+      borderColor: borderColor,
+      borderRadius: borderRadius,
+      borderWidth: borderWidth,
+      checked: checked,
+      controlColor: controlColor,
+      disabled: pressDisabled,
+      indeterminate: indeterminate,
+      pressed: pressed,
+      testID: testID
+    });
+    if (!label) return iconElement;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: iconWrapperStyles,
+        children: iconElement
+      }), /*#__PURE__*/_jsx(Text, {
+        animated: true,
+        disabled: disabled || readOnly,
+        font: "body",
+        style: getLabelStyle({
+          pressed
+        }),
+        testID: testID + "Label",
+        children: label
+      })]
+    });
+  }, [ControlIcon, animatedOpacityValue, animatedScaleValue, background, borderColor, borderRadius, borderWidth, checked, controlColor, disabled, getLabelStyle, iconWrapperStyles, indeterminate, label, pressDisabled, readOnly, testID]);
+  return /*#__PURE__*/_jsx(Pressable, _extends({
+    ref: ref,
+    accessible: accessible
+  }, accessibilityProps, {
+    disabled: pressDisabled,
+    hitSlop: hitSlop,
+    onAccessibilityAction: handleAccessibilityAction,
+    onPress: handlePress,
+    style: pressableStyle
+  }, props, {
+    children: controlIcon
+  }));
+  // Make forwardRef result function stay generic function type
+});
+
+// Make memoized function stay generic function type
+export const Control = /*#__PURE__*/memo(ControlWithRef);

package/esm/controls/ControlGroup.js

@@ -0,0 +1,46 @@
+const _excluded = ["ControlComponent", "options", "label", "aria-labelledby", "aria-label", "onChange", "value", "testID", "gap", "role"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { Group } from '../layout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_ref, ref) {
+  let {
+      ControlComponent,
+      options,
+      label,
+      'aria-labelledby': ariaLabelledby,
+      'aria-label': ariaLabel,
+      onChange,
+      value,
+      testID,
+      gap = 2,
+      role = 'group'
+    } = _ref,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (isDevelopment() && !label && !ariaLabelledby && !ariaLabel) {
+    console.warn('Please specify a label or aria-labelledby for the ControlGroup.');
+  }
+  const isMultiSelect = Array.isArray(value);
+  return /*#__PURE__*/_jsxs(Group, _extends({
+    ref: ref,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    gap: gap,
+    role: role,
+    testID: testID
+  }, restProps, {
+    children: [label, options.map(optionProps => {
+      const optionValue = optionProps.value;
+      const isChecked = isMultiSelect ? value.includes(optionValue) : value === optionValue;
+      return /*#__PURE__*/_jsx(ControlComponent, _extends({
+        checked: isChecked,
+        onChange: onChange,
+        testID: testID ? testID + "-" + optionValue : undefined,
+        value: optionValue
+      }, optionProps), optionValue);
+    })]
+  }));
+});
+export const ControlGroup = /*#__PURE__*/memo(ControlGroupWithRef);

package/esm/controls/HelperText.js

@@ -0,0 +1,52 @@
+const _excluded = ["color", "errorIconAccessibilityLabel", "errorIconTestID", "children", "align", "dangerouslySetColor"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useMemo } from 'react';
+import { glyphMap } from '@coinbase/cds-icons/glyphMap';
+import { useTheme } from '../hooks/useTheme';
+import { getIconSourceSize } from '../icons/Icon';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const HelperText = /*#__PURE__*/memo(function HelperText(_ref) {
+  let {
+      color,
+      errorIconAccessibilityLabel,
+      errorIconTestID,
+      children,
+      align,
+      dangerouslySetColor
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  // Get info icon for negative variant
+  const iconSize = theme.iconSize.xs;
+  const sourceSize = getIconSourceSize(iconSize);
+  const glyphKey = "info-" + sourceSize + "-active";
+  const glyph = glyphMap[glyphKey];
+  const iconStyle = useMemo(() => ({
+    fontFamily: 'CoinbaseIcons',
+    fontSize: iconSize,
+    height: iconSize,
+    width: iconSize,
+    letterSpacing: 4
+  }), [iconSize]);
+  return /*#__PURE__*/_jsxs(Text, _extends({
+    align: align,
+    color: color,
+    dangerouslySetColor: dangerouslySetColor,
+    font: "label2"
+  }, props, {
+    children: [color === 'fgNegative' && /*#__PURE__*/_jsx(Text, {
+      accessible: true,
+      accessibilityLabel: errorIconAccessibilityLabel,
+      accessibilityRole: "image",
+      align: align,
+      color: color,
+      dangerouslySetColor: dangerouslySetColor,
+      font: "label2",
+      style: iconStyle,
+      testID: errorIconTestID,
+      children: glyph
+    }), children]
+  }));
+});

package/esm/controls/InputIcon.js

@@ -0,0 +1,39 @@
+const _excluded = ["disableInheritFocusStyle", "testID", "color", "compact", "accessibilityLabel", "accessibilityHint"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useContext } from 'react';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { TextInputFocusVariantContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+const variantColorMap = {
+  primary: 'fgPrimary',
+  positive: 'fgPositive',
+  negative: 'fgNegative',
+  foreground: 'fg',
+  foregroundMuted: 'fgMuted',
+  secondary: 'fgMuted'
+};
+export const InputIcon = /*#__PURE__*/memo(function InputIcon(_ref) {
+  let {
+      disableInheritFocusStyle = false,
+      testID,
+      color = 'fg',
+      compact,
+      accessibilityLabel,
+      accessibilityHint
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const variant = useContext(TextInputFocusVariantContext);
+  const variantColor = variant ? variantColorMap[variant] : undefined;
+  return /*#__PURE__*/_jsx(Box, {
+    accessibilityHint: accessibilityHint != null ? accessibilityHint : props.name,
+    accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : props.name,
+    paddingX: compact ? 1 : 2,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(Icon, _extends({
+      color: disableInheritFocusStyle ? color : variantColor != null ? variantColor : color,
+      size: "s"
+    }, props))
+  });
+});

package/esm/controls/InputIconButton.js

@@ -0,0 +1,39 @@
+const _excluded = ["disableInheritFocusStyle", "testID", "variant", "accessibilityLabel", "accessibilityHint"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useContext } from 'react';
+import { IconButton } from '../buttons/IconButton';
+import { Box } from '../layout/Box';
+import { TextInputFocusVariantContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const variantTransformMap = {
+  positive: 'primary',
+  negative: 'primary',
+  foreground: 'primary',
+  primary: 'primary',
+  foregroundMuted: 'foregroundMuted',
+  secondary: 'secondary'
+};
+export const InputIconButton = /*#__PURE__*/memo(function InputIconButton(_ref) {
+  let {
+      disableInheritFocusStyle = false,
+      testID,
+      variant = 'primary',
+      accessibilityLabel,
+      accessibilityHint
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const contextVariant = useContext(TextInputFocusVariantContext);
+  const transformedVariant = contextVariant ? variantTransformMap[contextVariant] : variant;
+  return /*#__PURE__*/_jsx(Box, {
+    paddingEnd: 0.5,
+    paddingStart: 1,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(IconButton, _extends({
+      transparent: true,
+      accessibilityHint: accessibilityHint != null ? accessibilityHint : props.name,
+      accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : props.name,
+      variant: disableInheritFocusStyle ? variant : transformedVariant
+    }, props))
+  });
+});

package/esm/controls/InputLabel.js

@@ -0,0 +1,17 @@
+const _excluded = ["color"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo } from 'react';
+import { Text } from '../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const InputLabel = /*#__PURE__*/memo(function InputLabel(_ref) {
+  let {
+      color
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Text, _extends({
+    color: color,
+    font: "label1",
+    paddingY: 0.5
+  }, props));
+});

package/esm/controls/InputStack.js

@@ -0,0 +1,131 @@
+const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderStyle", "variant", "labelNode", "testID", "borderRadius", "borderFocusedStyle", "focused", "enableColorSurge", "labelVariant"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useMemo } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { focusedInputBorderWidth, inputBorderWidth } from '@coinbase/cds-common/tokens/input';
+import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { useLayout } from '../hooks/useLayout';
+import { useTheme } from '../hooks/useTheme';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { ColorSurge } from '../motion/ColorSurge';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const variantColorMap = {
+  primary: 'fgPrimary',
+  positive: 'fgPositive',
+  negative: 'fgNegative',
+  foreground: 'fg',
+  foregroundMuted: 'fgMuted',
+  secondary: 'bgSecondary'
+};
+export const InputStack = /*#__PURE__*/memo(function InputStack(_ref) {
+  let {
+      /** CDS custom props */
+      width = '100%',
+      prependNode,
+      endNode,
+      appendNode,
+      startNode,
+      disabled = false,
+      inputNode,
+      helperTextNode,
+      borderStyle,
+      variant,
+      labelNode,
+      testID = '',
+      borderRadius = 200,
+      borderFocusedStyle,
+      focused,
+      enableColorSurge,
+      labelVariant = 'outside'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const [inputAreaSize, onInputAreaLayout] = useLayout();
+  const inputAreaStyle = useMemo(() => {
+    const inputBorderRadius = _extends({}, prependNode ? {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    } : {}, appendNode ? {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    } : {});
+    return _extends({
+      borderColor: variant === 'secondary' ? 'transparent' : theme.color[variant === 'foregroundMuted' || !variant ? 'bgLineHeavy' : variantColorMap[variant]],
+      flexDirection: 'row',
+      flexGrow: 1,
+      backgroundColor: variant === 'secondary' ? theme.color.bgSecondary : theme.color.bg,
+      borderRadius: theme.borderRadius[borderRadius],
+      overflow: 'hidden'
+    }, inputBorderRadius);
+  }, [prependNode, appendNode, variant, theme.color, theme.borderRadius, borderRadius]);
+  const inputAreaStyles = useMemo(() => {
+    return [inputAreaStyle, borderStyle];
+  }, [borderStyle, inputAreaStyle]);
+  const borderFocusedStyles = useMemo(() => {
+    return [inputAreaStyle, borderFocusedStyle, {
+      transform: [{
+        translateX: inputAreaSize.x - inputBorderWidth
+      }, {
+        translateY: inputAreaSize.y - inputBorderWidth
+      }],
+      width: inputAreaSize.width + focusedInputBorderWidth,
+      height: inputAreaSize.height + focusedInputBorderWidth,
+      x: inputAreaSize.x,
+      y: inputAreaSize.y,
+      position: 'absolute',
+      borderWidth: focusedInputBorderWidth
+    }];
+  }, [borderFocusedStyle, inputAreaSize, inputAreaStyle]);
+  return /*#__PURE__*/_jsxs(VStack, _extends({
+    gap: 0.5,
+    opacity: disabled ? accessibleOpacityDisabled : 1,
+    testID: testID,
+    width: width
+  }, props, {
+    children: [!!labelNode && labelVariant === 'outside' && /*#__PURE__*/_jsx(_Fragment, {
+      children: labelNode
+    }), /*#__PURE__*/_jsxs(HStack, {
+      children: [!!prependNode && /*#__PURE__*/_jsx(_Fragment, {
+        children: prependNode
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.inputAreaContainerStyle,
+        children: [focused && /*#__PURE__*/_jsx(Animated.View, {
+          style: borderFocusedStyles
+        }), /*#__PURE__*/_jsxs(Animated.View, {
+          onLayout: onInputAreaLayout,
+          style: inputAreaStyles,
+          testID: testID && testID + "-input-area",
+          children: [focused && enableColorSurge && /*#__PURE__*/_jsx(ColorSurge, {
+            background: variant ? variantColorMap[variant] : undefined
+          }), !!startNode && /*#__PURE__*/_jsx(_Fragment, {
+            children: startNode
+          }), !!labelNode && labelVariant === 'inside' ? /*#__PURE__*/_jsxs(VStack, {
+            flexGrow: 1,
+            minHeight: 60,
+            paddingY: 1,
+            children: [labelNode, inputNode]
+          }) : inputNode, !!endNode && /*#__PURE__*/_jsx(_Fragment, {
+            children: endNode
+          })]
+        })]
+      }), !!appendNode && /*#__PURE__*/_jsx(_Fragment, {
+        children: appendNode
+      })]
+    }), !!helperTextNode && /*#__PURE__*/_jsx(_Fragment, {
+      children: helperTextNode
+    })]
+  }));
+});
+
+// Fixes a problem found in Accordion children element.
+// When `overflow: auto` is set the thickened border when focused is not accounted for
+// hence you see a cutoff.
+// Fix was to add this so there is always 2px outer layer space
+const styles = StyleSheet.create({
+  inputAreaContainerStyle: {
+    padding: 1,
+    flexGrow: 1
+  }
+});

package/esm/controls/Menu.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SelectProvider } from './SelectContext';
+import { useSelect } from './useSelect';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Menu = _ref => {
+  let {
+    onChange,
+    value,
+    children
+  } = _ref;
+  const context = useSelect({
+    onChange,
+    value
+  });
+  return /*#__PURE__*/_jsx(SelectProvider, {
+    value: context,
+    children: children
+  });
+};

package/esm/controls/NativeInput.js

@@ -0,0 +1,61 @@
+const _excluded = ["containerSpacing", "testID", "align", "disabled", "textAlign", "accessibilityLabel", "compact", "style"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { TextInput } from 'react-native';
+import { useTextAlign } from '../hooks/useTextAlign';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      containerSpacing,
+      testID = '',
+      align = 'start',
+      disabled,
+      textAlign,
+      accessibilityLabel,
+      compact,
+      style
+    } = _ref,
+    editableInputAddonProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const textAlignInputTransformed = useTextAlign(align).textAlign;
+  const inputTextStyle = useMemo(() => ({
+    fontSize: theme.fontSize.body,
+    fontFamily: theme.fontFamily.body,
+    minHeight: theme.lineHeight.body,
+    padding: 0,
+    margin: 0,
+    color: theme.color.fg
+  }), [theme.fontSize, theme.fontFamily, theme.lineHeight, theme.color.fg]);
+  const containerStyle = useMemo(() => {
+    return _extends({
+      flex: 2,
+      padding: theme.space[compact ? 1 : 2]
+    }, containerSpacing, !disabled && editableInputAddonProps.readOnly && {
+      backgroundColor: theme.color.bgSecondary
+    });
+  }, [containerSpacing, theme.space, theme.color, compact, editableInputAddonProps.readOnly, disabled]);
+  const inputRootStyles = useMemo(() => {
+    return [inputTextStyle, containerStyle,
+    /**
+     * To workaround a known RN bug (link below) where long text does not ellipsis correctly in TextInput
+     * @link https://github.com/facebook/react-native/issues/29068
+     */
+    {
+      textAlign: textAlign === 'unset' ? undefined : textAlignInputTransformed
+    }, style];
+  }, [inputTextStyle, containerStyle, textAlign, textAlignInputTransformed, style]);
+  return /*#__PURE__*/_jsx(TextInput, _extends({
+    ref: ref,
+    accessibilityHint: accessibilityLabel,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "search",
+    editable: !disabled,
+    keyboardAppearance: theme.activeColorScheme,
+    placeholderTextColor: theme.color.fgMuted,
+    style: inputRootStyles,
+    testID: testID,
+    textAlign: textAlign !== 'unset' ? textAlign : undefined
+  }, editableInputAddonProps));
+}));