@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
}

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
}

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?: string
  /**
   * 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
}

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
}

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
}

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
}

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
}

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
}

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
}

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
}

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
}

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
}

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
}

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

export { Datefield, type DatefieldProps, Email, type EmailProps, Field, type FieldProps, 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 };