{"version":3,"sources":["../src/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport type InputSize = 'small' | 'medium';\nexport type ValidationState = 'default' | 'error' | 'success';\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /**\n   * The size of the input\n   * @default 'medium'\n   */\n  size?: InputSize;\n  /**\n   * The validation state of the input\n   * @default 'default'\n   */\n  state?: ValidationState;\n  /**\n   * Optional label for the input\n   */\n  label?: string;\n  /**\n   * Optional error message to display\n   */\n  error?: string;\n  /**\n   * Optional helper text to display\n   */\n  helperText?: string;\n}\n\n// Arbor Design System input styles\nconst inputStyles = {\n  base: {\n    width: '100%',\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n    backgroundColor: '#ffffff',\n    borderRadius: '8px',\n    transition: 'all 0.2s ease-in-out',\n    outline: 'none',\n    margin: '0',\n    display: 'block',\n  },\n  sizes: {\n    small: {\n      height: '32px',\n      fontSize: '13px',\n      padding: '8px',\n    },\n    medium: {\n      height: '36px',\n      fontSize: '13px',\n      padding: '8px',\n    },\n  },\n  states: {\n    default: {\n      border: '1px solid #d1d1d1', // grey-300\n      color: '#2f2f2f', // grey-900\n      ':focus': {\n        borderColor: '#3cad51', // brand-500\n        outline: '3px solid rgba(60, 173, 81, 0.2)',\n      },\n      ':disabled': {\n        backgroundColor: '#f8f8f8', // grey-050\n        borderColor: '#efefef', // grey-100\n        color: '#7e7e7e', // grey-500\n        cursor: 'not-allowed',\n      },\n    },\n    error: {\n      border: '1px solid #c93232', // destructive-500\n      color: '#2f2f2f',\n      ':focus': {\n        borderColor: '#c93232',\n        outline: '3px solid rgba(201, 50, 50, 0.2)',\n      },\n    },\n    success: {\n      border: '1px solid #16a33d', // success-500\n      color: '#2f2f2f',\n      ':focus': {\n        borderColor: '#16a33d',\n        outline: '3px solid rgba(22, 163, 61, 0.2)',\n      },\n    },\n  },\n};\n\nconst labelStyles: React.CSSProperties = {\n  display: 'block',\n  fontSize: '13px',\n  fontWeight: '600',\n  color: '#2f2f2f', // grey-900\n  marginBottom: '4px',\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n};\n\nconst helperTextStyles: React.CSSProperties = {\n  fontSize: '13px',\n  margin: '0',\n  marginTop: '2px',\n  color: '#595959', // grey-600\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n  lineHeight: '1.4',\n};\n\nconst errorTextStyles: React.CSSProperties = {\n  ...helperTextStyles,\n  color: '#a62323', // destructive-600 (accessible)\n  display: 'flex',\n  alignItems: 'center',\n  gap: '4px',\n};\n\n/**\n * Input component - Arbor Design System\n *\n * A text input component following Arbor's design specifications.\n * Supports labels, validation states (error/success), and helper text.\n * Uses 8px border radius and Inter font family.\n *\n * @example\n * ```tsx\n * <Input\n *   label=\"Email\"\n *   type=\"email\"\n *   placeholder=\"you@example.com\"\n *   helperText=\"We'll never share your email\"\n * />\n * ```\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      size = 'medium',\n      state = 'default',\n      label,\n      error,\n      helperText,\n      className,\n      style,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const inputId = React.useId();\n    const helperTextId = React.useId();\n    const errorId = React.useId();\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    const sizeStyles = inputStyles.sizes[size];\n    const stateStyles = inputStyles.states[error ? 'error' : state];\n\n    const inputStyle: React.CSSProperties = {\n      ...inputStyles.base,\n      ...sizeStyles,\n      ...stateStyles,\n      ...(isFocused && !disabled && stateStyles[':focus']),\n      ...(disabled && inputStyles.states.default[':disabled']),\n    };\n\n    return (\n      <div className={clsx('arbor-input-wrapper', className)} style={style}>\n        {label && (\n          <label htmlFor={inputId} style={labelStyles}>\n            {label}\n          </label>\n        )}\n        <input\n          ref={ref}\n          id={inputId}\n          className=\"arbor-input\"\n          style={inputStyle}\n          disabled={disabled}\n          aria-invalid={error ? 'true' : 'false'}\n          aria-describedby={\n            error ? errorId : helperText ? helperTextId : undefined\n          }\n          onFocus={(e) => {\n            setIsFocused(true);\n            props.onFocus?.(e);\n          }}\n          onBlur={(e) => {\n            setIsFocused(false);\n            props.onBlur?.(e);\n          }}\n          {...props}\n        />\n        {error && (\n          <p id={errorId} style={errorTextStyles} role=\"alert\">\n            {error}\n          </p>\n        )}\n        {!error && helperText && (\n          <p id={helperTextId} style={helperTextStyles}>\n            {helperText}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n"],"mappings":"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","names":[]}