"use strict";

import React, { createContext, memo, useContext, useMemo } from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { useInteractionState } from "../hooks/useInteractionState.js";
import { Text } from "../typography/index.js";
import { borderRadius, fontSize, space } from "../styles/tokens.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SIZE_CONFIG = {
  sm: {
    minHeight: 36,
    paddingHorizontal: space.sm
  },
  md: {
    minHeight: 44,
    paddingHorizontal: space.md
  },
  lg: {
    minHeight: 52,
    paddingHorizontal: space.lg
  }
};
const InputGroupContext = /*#__PURE__*/createContext({
  size: 'md'
});
InputGroupContext.displayName = 'InputGroupContext';
const AddonComponent = function InputGroupAddon({
  children,
  divider = false,
  noPadding = false,
  style,
  testID
}) {
  const theme = useTheme();
  const {
    size
  } = 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__*/_jsx(Text, {
    numberOfLines: 1,
    style: {
      color: theme.colors.textSecondary,
      fontSize: fontSize.md
    },
    children: children
  }) : children;
  return /*#__PURE__*/_jsxs(View, {
    testID: testID,
    style: [styles.addon, !noPadding && {
      paddingHorizontal: cfg.paddingHorizontal
    }, style],
    children: [divider ? /*#__PURE__*/_jsx(View, {
      style: [styles.divider, {
        backgroundColor: theme.colors.borderLight
      }]
    }) : null, content]
  });
};
export const Addon = /*#__PURE__*/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 = useTheme();
  const cfg = SIZE_CONFIG[size];
  const {
    state: focused,
    onIn: onFocus,
    onOut: onBlur
  } = useInteractionState();
  const {
    state: hovered,
    onIn: onHoverIn,
    onOut: onHoverOut
  } = 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 = useMemo(() => ({
    size
  }), [size]);
  const webHandlers = Platform.OS === 'web' ? {
    onMouseOver: onHoverIn,
    onMouseOut: onHoverOut
  } : {};
  return /*#__PURE__*/_jsx(InputGroupContext.Provider, {
    value: ctx,
    children: /*#__PURE__*/_jsx(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 = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'stretch',
    width: '100%',
    borderRadius: borderRadius.sm,
    borderWidth: 2,
    overflow: 'hidden'
  },
  addon: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: space.xs,
    flexShrink: 0,
    position: 'relative'
  },
  divider: {
    position: 'absolute',
    left: 0,
    top: space.sm,
    bottom: space.sm,
    width: StyleSheet.hairlineWidth
  },
  disabled: {
    opacity: 0.5
  }
});
const InputGroupBase = /*#__PURE__*/memo(InputGroupComponent);
InputGroupBase.displayName = 'InputGroup';
export const InputGroup = Object.assign(InputGroupBase, {
  Addon
});
//# sourceMappingURL=InputGroup.js.map