
"use client";
import { UniversalInputProps } from "../../../types/dist/index.js";
import { IconPropsWithSVGProps } from "../../../tokens/types.js";
import { BoxProps } from "../../Box.js";
import * as _$react from "react";
import { InputHTMLAttributes } from "react";
import { HTMLMotionProps } from "motion/react";

//#region src/components/client/Input/Input.d.ts
type HtmlInputProps = React.InputHTMLAttributes<HTMLInputElement> & HTMLMotionProps<'input'>;
type NativeInputProps = Omit<HtmlInputProps, 'height' | 'size' | 'width' | 'color' | 'required'>;
type DataAttributes = {
  [name: `data-${string}`]: string;
};
interface InputProps extends NativeInputProps, UniversalInputProps {
  /** The type of the input element. Reduced set of options from the HTML input type attribute.
   * @default 'text'
   */
  type?: Exclude<NativeInputProps['type'], 'button' | 'checkbox' | 'color' | 'file' | 'radio' | 'range' | 'reset' | 'submit' | 'search'>;
  /** Props to be passed into various slots within the component. */
  slotProps?: {
    input?: Partial<InputHTMLAttributes<HTMLInputElement> & DataAttributes>;
    inputWrapper?: Partial<BoxProps & DataAttributes>;
    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
    label?: Partial<React.LabelHTMLAttributes<HTMLLabelElement> & DataAttributes>;
    helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
    helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
  };
}
/**
 * **📦 An input that allows users to enter text and collect data.**
 *
 * @componentType Client component
 *
 * @description
 * An input field is a component that takes text typed into it. It can also serve as a way to display a selection and trigger a dropdown menu. Inputs are interactive elements that users can click, tap, or otherwise engage with to collect data and open dropdowns, or both.
 *
 * @see
 * Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
 *
 * @usage
 * - Forms: For collecting data like names, emails, passwords, etc. (e.g., sign-up, login, or contact forms).
 * - Search Bars: Allowing users to enter search queries to find content.
 * - Filters/Settings: When users need to specify preferences, like selecting a date or adjusting a number value.
 * - Feedback/Comments: Letting users leave reviews, comments, or feedback.
 *
 * @example
 * ```tsx
 * 'use client';
 * import { Input } from "@yahoo/uds";
 *
 * <Input label="Name" placeholder="Enter your name" required />
 *```
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
 **/
declare const Input: _$react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & _$react.RefAttributes<HTMLInputElement>>;
//#endregion
export { Input, type InputProps };