"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InputGroup = exports.Addon = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _useTheme = require("../theme/use-theme.js");
var _useInteractionState = require("../hooks/useInteractionState.js");
var _index = require("../typography/index.js");
var _tokens = require("../styles/tokens.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); }
const SIZE_CONFIG = {
  sm: {
    minHeight: 36,
    paddingHorizontal: _tokens.space.sm
  },
  md: {
    minHeight: 44,
    paddingHorizontal: _tokens.space.md
  },
  lg: {
    minHeight: 52,
    paddingHorizontal: _tokens.space.lg
  }
};
const InputGroupContext = /*#__PURE__*/(0, _react.createContext)({
  size: 'md'
});
InputGroupContext.displayName = 'InputGroupContext';
const AddonComponent = function InputGroupAddon({
  children,
  divider = false,
  noPadding = false,
  style,
  testID
}) {
  const theme = (0, _useTheme.useTheme)();
  const {
    size
  } = (0, _react.useContext)(InputGroupContext);
  const cfg = SIZE_CONFIG[size];

  // Plain string/number content is wrapped in a themed Text so it reads as a
  // subdued addon label (and never trips RN's "raw text outside <Text>" rule).
  const content = typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
    numberOfLines: 1,
    style: {
      color: theme.colors.textSecondary,
      fontSize: _tokens.fontSize.md
    },
    children: children
  }) : children;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    testID: testID,
    style: [styles.addon, !noPadding && {
      paddingHorizontal: cfg.paddingHorizontal
    }, style],
    children: [divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.divider, {
        backgroundColor: theme.colors.borderLight
      }]
    }) : null, content]
  });
};
const Addon = exports.Addon = /*#__PURE__*/(0, _react.memo)(AddonComponent);
Addon.displayName = 'InputGroup.Addon';

/**
 * Horizontal group that wraps an input with leading/trailing addons (icons,
 * text, buttons, `Kbd`). Renders a single bordered chrome — radii, border,
 * focus/error colors match Bloom's `TextField` so a group reads as one field.
 * The input child stretches to fill the middle.
 *
 * ```tsx
 * <InputGroup>
 *   <InputGroup.Addon>https://</InputGroup.Addon>
 *   <TextField.Input label="Domain" value={v} onChangeText={setV} />
 *   <InputGroup.Addon divider>
 *     <Button size="small" variant="ghost" onPress={go}>Go</Button>
 *   </InputGroup.Addon>
 * </InputGroup>
 * ```
 */
const InputGroupComponent = function InputGroup({
  children,
  isInvalid = false,
  disabled = false,
  size = 'md',
  style,
  testID
}) {
  const theme = (0, _useTheme.useTheme)();
  const cfg = SIZE_CONFIG[size];
  const {
    state: focused,
    onIn: onFocus,
    onOut: onBlur
  } = (0, _useInteractionState.useInteractionState)();
  const {
    state: hovered,
    onIn: onHoverIn,
    onOut: onHoverOut
  } = (0, _useInteractionState.useInteractionState)();
  const borderColor = isInvalid ? theme.colors.negative : focused ? theme.colors.primary : hovered ? theme.colors.borderLight : 'transparent';
  const backgroundColor = isInvalid ? theme.colors.negativeSubtle : theme.colors.contrast50;
  const ctx = (0, _react.useMemo)(() => ({
    size
  }), [size]);
  const webHandlers = _reactNative.Platform.OS === 'web' ? {
    onMouseOver: onHoverIn,
    onMouseOut: onHoverOut
  } : {};
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InputGroupContext.Provider, {
    value: ctx,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      testID: testID,
      accessibilityState: disabled ? {
        disabled: true
      } : undefined
      // Capture focus bubbling from a nested input so the whole chrome
      // reflects focus — RN-web bubbles focus/blur, native does not but a
      // nested TextInput's own focus ring is sufficient there.
      ,
      onFocus: onFocus,
      onBlur: onBlur,
      ...webHandlers,
      style: [styles.container, {
        minHeight: cfg.minHeight,
        backgroundColor,
        borderColor
      }, disabled && styles.disabled, style],
      children: children
    })
  });
};
const styles = _reactNative.StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'stretch',
    width: '100%',
    borderRadius: _tokens.borderRadius.sm,
    borderWidth: 2,
    overflow: 'hidden'
  },
  addon: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: _tokens.space.xs,
    flexShrink: 0,
    position: 'relative'
  },
  divider: {
    position: 'absolute',
    left: 0,
    top: _tokens.space.sm,
    bottom: _tokens.space.sm,
    width: _reactNative.StyleSheet.hairlineWidth
  },
  disabled: {
    opacity: 0.5
  }
});
const InputGroupBase = /*#__PURE__*/(0, _react.memo)(InputGroupComponent);
InputGroupBase.displayName = 'InputGroup';
const InputGroup = exports.InputGroup = Object.assign(InputGroupBase, {
  Addon
});
//# sourceMappingURL=InputGroup.js.map