@asphalt-react/textfield/dist/index.d.ts

Textfield

type Override<T, U> = Omit<U, keyof T> & T

interface InputWrapperProps {
  /**
   * React node
   */
  children?: React.ReactNode
  /**
   * Controls size of the input. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Input matches the width of its container.
   */
  stretch?: boolean
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Removes the spacing between its children.
   */
  shrink?: boolean
  /**
   * Adds padding in the container.
   */
  bezel?: boolean
  /**
   * Makes field non interactive.
   */
  disabled?: boolean
  /**
   * Set this props to true if stretch is true and there is a qualifier/addOn at the end.
   */
  hasEndSlot?: boolean
  /**
   * Removes the background.
   */
  nude?: boolean
  /**
   * Displays only the bottom border as an underline.
   */
  underline?: boolean
}

declare function InputWrapper(
  props: Override<
    InputWrapperProps,
    React.InputHTMLAttributes<HTMLInputElement>
  >
): JSX.Element

interface URLProps {
  /**
   * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Icon or text to render as start qualifier. Accepts SVG for icons.
   */
  qualifierStart?: React.ReactElement | string
  /**
   * Icon or text to render as end qualifier. Accepts SVG for icons.
   */
  qualifierEnd?: React.ReactElement | string
  /**
   * React node to render before the field content.
   */
  addOnStart?: React.ReactElement
  /**
   * React node to render after the field content.
   */
  addOnEnd?: React.ReactElement
  /**
   * Swap the slots for qualifiers and addOns.
   */
  swapSlots?: boolean
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  ref?: React.Ref<any>
}

declare function URL(
  props: Override<URLProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface PhoneNumberProps {
  /**
   * Controls size of the field. Accepts s, m, l for extra small, small, medium & large.
   */
  size?: "s" | "m" | "l"
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Show custom node when no result is found.
   */
  emptyResult?: React.ReactNode
  /**
   * Hint text to show in input field.
   */
  placeholder?: string
  /**
   * Hint text to show in search input field.
   */
  searchPlaceholder?: string
  /**
   * Show country flag in option and button.
   */
  showFlag?: boolean
  /**
   * Array of country objects.
   *
   * ```js
   * {
   *    id: "+62",
   *    name: "Indonesia",
   *    flag: "https://www.url.co.id/indonesia-flag.svg"
   *    initialSelected: false     // true if this item should be initially selected
   * }
   * ```
   *
   * Out of the above `id` and `name` is required.
   */
  countries?: {
    id: string
    name: string
    flag?: string | React.ReactNode
    initialSelected?: boolean
  }[]
  /**
   * Add default country. By add this props the selection will disabled.
   */
  defaultCountry?: string
  /**
   * Callback to handle the country selection and input field.
   * It has the following signature
   *
   * - countryCode - country code selected by user interaction
   * - inputValue - input value from user
   *
   * ```js
   *  ({countryCode, inputValue}, { event }) => {}
   * ```
   */
  onChange?: (...args: any[]) => any
  /**
   * Adds padding on each sides
   */
  bezel?: boolean
  /**
   * Removes the background.
   */
  nude?: boolean
  /**
   * Displays only the bottom border as an underline.
   */
  underline?: boolean
  /**
   * Enables heading text.
   */
  emphasize?: boolean
  /**
   * Enables separator.
   */
  separator?: boolean
  ref?: React.Ref<any>
}

declare function PhoneNumber(
  props: Override<PhoneNumberProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface InputQualifierProps {
  /**
   * React node for the main content.
   */
  children: React.ReactNode
  /**
   * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
}

declare function InputQualifier(
  props: Override<InputQualifierProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface UseInputProp {
  /* Sets the size of the input (e.g., "xs", "s", "m", "l"). */
  size?: string
  /* Marks the input as invalid when true. */
  invalid?: boolean
  /* Disables the input when true. */
  disabled?: boolean
  /* Stretches the input to fill its container when true. */
  stretch?: boolean
  /* Shrinks the input to fit its content when true. */
  shrink?: boolean
  /* Displays content as a qualifier at the start of the input. */
  qualifierStart?: React.ReactNode
  /* Displays content as a qualifier at the end of the input. */
  qualifierEnd?: React.ReactNode
  /* Displays content as an add-on at the start of the input. */
  addOnStart?: React.ReactNode
  /* Displays content as an add-on at the end of the input. */
  addOnEnd?: React.ReactNode
  /* Swaps the positions of qualifiers and add-ons when true. */
  swapSlots?: boolean
}

interface UseInputReturn {
  /* Returns props for the input element. */
  getInputProps: Function
  /* Returns props for the input wrapper element. */
  getWrapperProps: Function
  /* Returns props for the qualifier elements. */
  getQualifierProps: Function
  /* Returns the start slots (qualifier/add-on) for the input. */
  getStartSlots: Function
  /* Returns the end slots (qualifier/add-on) for the input. */
  getEndSlots: Function
}

declare function useInput(props: UseInputProp): UseInputReturn

interface InputAddOnProps {
  /**
   * React node for the main content.
   */
  children: React.ReactNode
}

declare function InputAddOn(
  props: Override<InputAddOnProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface DatefieldProps {
  /**
   * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Icon or text to render as start qualifier. Accepts SVG for icons.
   */
  qualifierStart?: React.ReactElement | string
  /**
   * Icon or text to render as end qualifier. Accepts SVG for icons.
   */
  qualifierEnd?: React.ReactElement | string
  /**
   * React node to render before the field content.
   */
  addOnStart?: React.ReactElement
  /**
   * React node to render after the field content.
   */
  addOnEnd?: React.ReactElement
  /**
   * Swap the slots for qualifiers and addOns.
   */
  swapSlots?: boolean
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  ref?: React.Ref<any>
}

declare function Datefield(
  props: Override<DatefieldProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface FieldProps {
  /**
   * Type of input control.
   */
  type?: string
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Input matches the width of its container.
   */
  stretch?: boolean
  /**
   * Makes field non interactive.
   */
  disabled?: boolean
  /**
   * className
   */
  className?: string
  ref?: React.Ref<any>
}

declare function Field(
  props: Override<FieldProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface SearchProps {
  /**
   * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Icon or text to render as start qualifier. Accepts SVG for icons.
   */
  qualifierStart?: React.ReactElement | string
  /**
   * Icon or text to render as end qualifier. Accepts SVG for icons.
   */
  qualifierEnd?: React.ReactElement | string
  /**
   * React node to render before the field content.
   */
  addOnStart?: React.ReactElement
  /**
   * React node to render after the field content.
   */
  addOnEnd?: React.ReactElement
  /**
   * Swap the slots for qualifiers and addOns.
   */
  swapSlots?: boolean
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  ref?: React.Ref<any>
}

declare function Search(
  props: Override<SearchProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface PinfieldProps {
  /**
   * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Icon to render as start qualifier, accepts SVG.
   */
  qualifierStart?: React.ReactElement
  /**
   * Icon to render as end qualifier, accepts SVG.
   */
  qualifierEnd?: React.ReactElement
  /**
   * React node to render before the field content.
   */
  addOnStart?: React.ReactElement
  /**
   * React node to render after the field content.
   */
  addOnEnd?: React.ReactElement
  /**
   * Swap the slots for qualifiers and addOns.
   */
  swapSlots?: boolean
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  /**
   * Number of characters allowed in the field.
   */
  length?: number
  /**
   * Aligns the input content in center.
   */
  alignCenter?: boolean
  /**
   * Placeholder value to show in the field.
   */
  placeholder?: string
  /**
   * Adds padding on each sides
   */
  bezel?: boolean
  /**
   * Removes the background.
   */
  nude?: boolean
  /**
   * Displays only the bottom border as an underline.
   */
  underline?: boolean
  /**
   * Enables heading text.
   */
  emphasize?: boolean
  ref?: React.Ref<any>
}

declare function Pinfield(
  props: Override<PinfieldProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface TimefieldProps {
  /**
   * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Icon or text to render as start qualifier. Accepts SVG for icons.
   */
  qualifierStart?: React.ReactElement | string
  /**
   * Icon or text to render as end qualifier. Accepts SVG for icons.
   */
  qualifierEnd?: React.ReactElement | string
  /**
   * React node to render before the field content.
   */
  addOnStart?: React.ReactElement
  /**
   * React node to render after the field content.
   */
  addOnEnd?: React.ReactElement
  /**
   * Swap the slots for qualifiers and addOns.
   */
  swapSlots?: boolean
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  ref?: React.Ref<any>
}

declare function Timefield(
  props: Override<TimefieldProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface InputProps {
  /**
   * Type of input control.
   */
  type?: string
  /**
   * Controls size of the input. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Input matches the width of its container.
   */
  stretch?: boolean
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes field non interactive.
   */
  disabled?: boolean
  /**
   * Add border on each sides
   */
  enclosed?: boolean
  /**
   * Adds padding on each sides
   */
  bezel?: boolean
  /**
   * Removes the background.
   */
  nude?: boolean
  /**
   * Displays only the bottom border as an underline.
   */
  underline?: boolean
  /**
   * Enables heading text.
   */
  emphasize?: boolean
  ref?: React.Ref<any>
}

declare function Input(
  props: Override<InputProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface EmailProps {
  /**
   * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Icon or text to render as start qualifier. Accepts SVG for icons.
   */
  qualifierStart?: React.ReactElement | string
  /**
   * Icon or text to render as end qualifier. Accepts SVG for icons.
   */
  qualifierEnd?: React.ReactElement | string
  /**
   * React node to render before the field content.
   */
  addOnStart?: React.ReactElement
  /**
   * React node to render after the field content.
   */
  addOnEnd?: React.ReactElement
  /**
   * Swap the slots for qualifiers and addOns.
   */
  swapSlots?: boolean
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  ref?: React.Ref<any>
}

declare function Email(
  props: Override<EmailProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface TextfieldProps {
  /**
   * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Enables the field to accept multiple lines of text.
   *
   * > Qualifiers do not work with multiline.
   */
  multiline?: boolean
  /**
   * Icon or text to render as start qualifier. Accepts SVG for icons.
   */
  qualifierStart?: React.ReactElement | string
  /**
   * Icon or text to render as end qualifier. Accepts SVG for icons.
   */
  qualifierEnd?: React.ReactElement | string
  /**
   * React node to render before the field content.
   */
  addOnStart?: React.ReactElement
  /**
   * React node to render after the field content.
   */
  addOnEnd?: React.ReactElement
  /**
   * Swap the slots for qualifiers and addOns.
   */
  swapSlots?: boolean
  /**
   * Controls the height of a `multiline` field. Accepts "low", "mid" & "high".
   */
  extent?: "low" | "mid" | "high"
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  /**
   * Make the field resizeable in horizontal direction.
   *
   * This works only when `multiline` is true.
   */
  resizeHorizontal?: boolean
  /**
   * Make the field resizeable in vertical direction.
   *
   * This works only when `multiline` is true.
   */
  resizeVertical?: boolean
  /**
   * Adds padding on each sides
   */
  bezel?: boolean
  /**
   * Removes the background.
   */
  nude?: boolean
  /**
   * Displays only the bottom border as an underline.
   */
  underline?: boolean
  /**
   * Enables heading text.
   */
  emphasize?: boolean
  ref?: React.Ref<any>
}

declare function Textfield(
  props: Override<TextfieldProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface PasswordProps {
  /**
   * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Icon or text to render as start qualifier. Accepts SVG for icons.
   */
  qualifierStart?: React.ReactElement | string
  /**
   * Icon or text to render as end qualifier. Accepts SVG for icons.
   */
  qualifierEnd?: React.ReactElement | string
  /**
   * React node to render before the field content.
   */
  addOnStart?: React.ReactElement
  /**
   * React node to render after the field content.
   *
   *  > This will override the default show/hide toggle button
   */
  addOnEnd?: React.ReactElement
  /**
   * Swap the slots for qualifiers and addOns.
   */
  swapSlots?: boolean
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  ref?: React.Ref<any>
}

declare function Password(
  props: Override<PasswordProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface NumericProps {
  /**
   * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large.
   */
  size?: "xs" | "s" | "m" | "l"
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Icon or text to render as start qualifier. Accepts SVG for icons.
   */
  qualifierStart?: React.ReactElement | string
  /**
   * Icon or text to render as end qualifier. Accepts SVG for icons.
   */
  qualifierEnd?: React.ReactElement | string
  /**
   * React node to render before the field content.
   */
  addOnStart?: React.ReactElement
  /**
   * React node to render after the field content.
   */
  addOnEnd?: React.ReactElement
  /**
   * Swap the slots for qualifiers and addOns.
   */
  swapSlots?: boolean
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  /**
   * Adds padding on each sides
   */
  bezel?: boolean
  /**
   * Removes the background.
   */
  nude?: boolean
  /**
   * Displays only the bottom border as an underline.
   */
  underline?: boolean
  /**
   * Enables heading text.
   */
  emphasize?: boolean
  ref?: React.Ref<any>
}

declare function Numeric(
  props: Override<NumericProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

interface HeroProps {
  /**
   * Size of the Hero input.
   */
  size?: "s" | "m" | "l"
  /**
   * Adds error styles to the field if true.
   */
  invalid?: boolean
  /**
   * Field matches the width of its container.
   */
  stretch?: boolean
  /**
   * Makes the field disabled if true.
   */
  disabled?: boolean
  /**
   * Aligns the text inside the input.
   */
  align?: "left" | "center" | "right"
  /**
   * Text for the label.
   */
  label?: string
  /**
   * Icon or text to render as start qualifier. Accepts SVG for icons.
   */
  qualifierStart?: React.ReactElement | string
  /**
   * Icon or text to render as end qualifier. Accepts SVG for icons.
   */
  qualifierEnd?: React.ReactElement | string
  /**
   * React node to render before the field content.
   */
  addOnStart?: React.ReactElement
  /**
   * React node to render after the field content.
   */
  addOnEnd?: React.ReactElement
  /**
   * Placeholder text for the input.
   */
  placeholder?: string
  /**
   * Adds a prefix to the input.
   *
   * When using a prefix, combine it with the `mask` prop to control which characters are allowed.
   */
  prefix?: string
  /**
   * Applies an input mask to restrict allowed characters.
   * The default value is an alphanumeric mask of length 12 based on the common case for phone.
   *
   * Mask tokens:
   * - `9` → numeric (0–9)
   * - `a` → alphabetic (A–Z, a–z)
   * - `*` → any character (allows all characters)
   *
   * The mask length is determined by repeating tokens.
   * For example, `"99999999"` allows eight digits, while `"****"` allows four any characters.
   *
   */
  mask?: string
  /**
   * Enables pin placeholder.
   */
  pin?: boolean
  ref?: React.Ref<any>
}

declare function Hero(
  props: Override<HeroProps, React.InputHTMLAttributes<HTMLInputElement>>
): JSX.Element

export { Datefield, type DatefieldProps, Email, type EmailProps, Field, type FieldProps, Hero, type HeroProps, Input, InputAddOn, type InputAddOnProps, type InputProps, InputQualifier, type InputQualifierProps, InputWrapper, type InputWrapperProps, Numeric, type NumericProps, Password, type PasswordProps, PhoneNumber, type PhoneNumberProps, Pinfield, type PinfieldProps, Search, type SearchProps, Textfield, type TextfieldProps, Timefield, type TimefieldProps, URL, type URLProps, useInput };