@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/form/useNumberField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useNumberField.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n  type ProvidedTextFieldMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldHookState,\n  type TextFieldImplementation,\n  type ValidatedTextFieldImplementation,\n  useTextField,\n} from \"./useTextField.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 2.5.0 */\nexport interface NumberFieldConstraints {\n  /**\n   * An optional min value for the number field.\n   */\n  min?: number;\n\n  /**\n   * An optional max value for the number field.\n   */\n  max?: number;\n\n  /**\n   * An optional step amount to use.\n   *\n   * Note: The `min` and `max` values must be divisible by this value when any\n   * are defined.\n   */\n  step?: number;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0\n * - Removed `updateOnChange` in favor of `updateValue`\n * - Renamed `fixOnBlur` to `updateValueOnBlur`\n */\nexport interface NumberFieldHookOptions\n  extends Omit<\n      TextFieldHookOptions<HTMLInputElement>,\n      \"defaultValue\" | \"isNumber\"\n    >,\n    NumberFieldConstraints {\n  /**\n   * @defaultValue `undefined`\n   */\n  defaultValue?: UseStateInitializer<number>;\n\n  /**\n   * This controls the behavior for the `value` returned by this hook. If you\n   * need access to the current value immediately as the user types to update\n   * other components, keep this as the default of `\"change\"`. Otherwise, set\n   * this to `\"blur\"`.\n   *\n   * @example Deferring Updates on Blur\n   * ```tsx\n   * import { TextField, useNumberField } from \"@react-md/core\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldProps, value } = useNumberField({\n   *     min: 0,\n   *     max: 100,\n   *     name: \"someName\",\n   *     defaultValue: 0,\n   *     updateValue: \"blur\",\n   *   });\n   *\n   *   const result = useMemo(() => someExpensiveComputation(value), [value]);\n   *\n   *   return <TextField {...fieldProps} label=\"Label\" />;\n   * }\n   * ```\n   *\n   * @defaultValue `\"change\"`\n   */\n  updateValue?: \"blur\" | \"change\";\n\n  /**\n   * This option is used to update the `number` value and text field value to be\n   * within the `min` and `max` range or just format the text field value when\n   * the input is blurred. This update will only be applied if the text field\n   * contains a valid number. Using `min = 0` and `max = 10`:\n   *\n   * | text value | updated value |\n   * | ---------- | ------------- |\n   * | 000001     | 1             |\n   * | -1         | 0             |\n   * | 20         | 10            |\n   * | -12        | 0             |\n   * | --1        | --1           |\n   * | fjdka      | fjdka         |\n   *\n   *\n   * Set this to `false` if no changed should be applied and force the user to\n   * fix any min/max errors manually and maintain weird formatting.\n   *\n   * @defaultValue `true`\n   * @since 6.0.0 This was renamed from `fixOnBlur` and removed the\n   * `\"min\"` and `\"max\"` behavior.\n   */\n  updateValueOnBlur?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldHookState\n  extends Omit<TextFieldHookState, \"value\"> {\n  value: number | undefined;\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldProps\n  extends ProvidedTextFieldProps<HTMLInputElement>,\n    NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldMessageProps\n  extends ProvidedTextFieldMessageProps<HTMLInputElement>,\n    NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldImplementation\n  extends Omit<\n    TextFieldImplementation<HTMLInputElement>,\n    \"value\" | \"setState\"\n  > {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldWithMessageImplementation\n  extends NumberFieldImplementation {\n  fieldProps: ProvidedNumberFieldMessageProps;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedNumberFieldImplementation\n  extends Omit<\n    ValidatedTextFieldImplementation<HTMLInputElement>,\n    \"value\" | \"setState\"\n  > {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;\n}\n\n/**\n * @example Enforce Number Value and No Error Messages\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     disableMessage: true,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n * ```\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    disableMessage: true;\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * @example No Error Messages\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     disableMessage: true,\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & { disableMessage: true }\n): NumberFieldImplementation;\n\n/**\n * @example Enforce Number Value\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Enforce Number Value and Deferring Updates\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     updateValue: \"blur\",\n *   });\n *\n *   // the `value` will only be updated whenever the `TextField` is blurred.\n *   // This is helpful if the `value` is used in expensive computations or\n *   // updates that do not need to be updated as the user types\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldWithMessageImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * The `useNumberField` hook is used to control the state of a `TextField` or\n * `<input type=\"number\">`\n *\n * @example Default Implementation\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   // whenever there is an error, an error message will be displayed below the\n *   // `TextField`\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { TextField, useNumberField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *     min: 0,\n *     max: 100,\n *     step: 2,\n *     required: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @see {@link useTextField}\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): NumberFieldWithMessageImplementation;\n\n/**\n * @internal\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): ValidatedNumberFieldImplementation {\n  const {\n    min,\n    max,\n    step,\n    onBlur = noop,\n    onChange = noop,\n    updateValue = \"change\",\n    updateValueOnBlur = true,\n    defaultValue,\n    ...textOptions\n  } = options;\n\n  const [number, setNumber] = useState(defaultValue);\n  const initial = useRef(number);\n  const {\n    value: _value,\n    reset: resetTextField,\n    fieldProps,\n    setState: setTextFieldState,\n    ...remaining\n  } = useTextField({\n    ...textOptions,\n    isNumber: true,\n    defaultValue: `${number ?? \"\"}`,\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.setCustomValidity(\"\");\n      input.checkValidity();\n      if (\n        !updateValueOnBlur ||\n        // do nothing else since it's a weird value like: `\"--0\"` which causes\n        // the value to be `\"\"` and `numberAsValue` to be `NaN`\n        input.validity.badInput\n      ) {\n        return;\n      }\n\n      let value = input.valueAsNumber;\n      if (input.value === \"\" && typeof initial.current === \"number\") {\n        value = min ?? initial.current;\n      }\n\n      // can't have both rangeUnderflow and rangeOverflow at the same time, so\n      // it's \"safe\" to always provide both\n      value = withinRange({ min, max, value });\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n        input.value = `${value}`;\n      } else if (typeof initial.current === \"undefined\") {\n        setNumber(undefined);\n      }\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped() || updateValue === \"blur\") {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.checkValidity();\n      const value = withinRange({\n        min,\n        max,\n        value: event.currentTarget.valueAsNumber,\n      });\n      if (\n        !input.validity.valid &&\n        !input.validity.rangeUnderflow &&\n        !input.validity.rangeOverflow\n      ) {\n        return;\n      }\n\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n      } else if (initial.current === undefined) {\n        setNumber(undefined);\n      }\n    },\n  });\n\n  const reset = useCallback(() => {\n    resetTextField();\n    setNumber(initial.current);\n  }, [resetTextField]);\n  const setState = useCallback<UseStateSetter<NumberFieldHookState>>(\n    (nextState) => {\n      if (typeof nextState === \"function\") {\n        setNumber((prevNumber) => {\n          let nextNumber: number | undefined = prevNumber;\n          setTextFieldState((prevState) => {\n            const updated = nextState({\n              ...prevState,\n              value: prevNumber,\n            });\n\n            nextNumber = updated.value;\n\n            return {\n              ...updated,\n              value: `${nextNumber ?? \"\"}`,\n            };\n          });\n\n          return nextNumber;\n        });\n        return;\n      }\n\n      const { value, error, errorMessage } = nextState;\n      setNumber(value);\n      setTextFieldState({\n        value: `${value ?? \"\"}`,\n        error,\n        errorMessage,\n      });\n    },\n    [setTextFieldState]\n  );\n\n  return {\n    ...remaining,\n    reset,\n    value: number,\n    setState,\n    fieldProps: {\n      ...fieldProps,\n      min,\n      max,\n      step,\n      type: \"number\",\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","withinRange","useTextField","noop","useNumberField","options","min","max","step","onBlur","onChange","updateValue","updateValueOnBlur","defaultValue","textOptions","number","setNumber","initial","value","_value","reset","resetTextField","fieldProps","setState","setTextFieldState","remaining","isNumber","event","isPropagationStopped","input","currentTarget","setCustomValidity","checkValidity","validity","badInput","valueAsNumber","current","Number","isNaN","undefined","valid","rangeUnderflow","rangeOverflow","nextState","prevNumber","nextNumber","prevState","updated","error","errorMessage","type"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/useNumberField.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n  type ProvidedTextFieldMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldHookState,\n  type TextFieldImplementation,\n  type ValidatedTextFieldImplementation,\n  useTextField,\n} from \"./useTextField.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 2.5.0 */\nexport interface NumberFieldConstraints {\n  /**\n   * An optional min value for the number field.\n   */\n  min?: number;\n\n  /**\n   * An optional max value for the number field.\n   */\n  max?: number;\n\n  /**\n   * An optional step amount to use.\n   *\n   * Note: The `min` and `max` values must be divisible by this value when any\n   * are defined.\n   */\n  step?: number;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0\n * - Removed `updateOnChange` in favor of `updateValue`\n * - Renamed `fixOnBlur` to `updateValueOnBlur`\n */\nexport interface NumberFieldHookOptions\n  extends Omit<\n      TextFieldHookOptions<HTMLInputElement>,\n      \"defaultValue\" | \"isNumber\"\n    >,\n    NumberFieldConstraints {\n  /**\n   * @defaultValue `undefined`\n   */\n  defaultValue?: UseStateInitializer<number>;\n\n  /**\n   * This controls the behavior for the `value` returned by this hook. If you\n   * need access to the current value immediately as the user types to update\n   * other components, keep this as the default of `\"change\"`. Otherwise, set\n   * this to `\"blur\"`.\n   *\n   * @example Deferring Updates on Blur\n   * ```tsx\n   * import { TextField } from \"@react-md/core/form/TextField\";\n   * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldProps, value } = useNumberField({\n   *     min: 0,\n   *     max: 100,\n   *     name: \"someName\",\n   *     defaultValue: 0,\n   *     updateValue: \"blur\",\n   *   });\n   *\n   *   const result = useMemo(() => someExpensiveComputation(value), [value]);\n   *\n   *   return <TextField {...fieldProps} label=\"Label\" />;\n   * }\n   * ```\n   *\n   * @defaultValue `\"change\"`\n   */\n  updateValue?: \"blur\" | \"change\";\n\n  /**\n   * This option is used to update the `number` value and text field value to be\n   * within the `min` and `max` range or just format the text field value when\n   * the input is blurred. This update will only be applied if the text field\n   * contains a valid number. Using `min = 0` and `max = 10`:\n   *\n   * | text value | updated value |\n   * | ---------- | ------------- |\n   * | 000001     | 1             |\n   * | -1         | 0             |\n   * | 20         | 10            |\n   * | -12        | 0             |\n   * | --1        | --1           |\n   * | fjdka      | fjdka         |\n   *\n   *\n   * Set this to `false` if no changed should be applied and force the user to\n   * fix any min/max errors manually and maintain weird formatting.\n   *\n   * @defaultValue `true`\n   * @since 6.0.0 This was renamed from `fixOnBlur` and removed the\n   * `\"min\"` and `\"max\"` behavior.\n   */\n  updateValueOnBlur?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldHookState\n  extends Omit<TextFieldHookState, \"value\"> {\n  value: number | undefined;\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldProps\n  extends ProvidedTextFieldProps<HTMLInputElement>,\n    NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldMessageProps\n  extends ProvidedTextFieldMessageProps<HTMLInputElement>,\n    NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldImplementation\n  extends Omit<\n    TextFieldImplementation<HTMLInputElement>,\n    \"value\" | \"setState\"\n  > {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldWithMessageImplementation\n  extends NumberFieldImplementation {\n  fieldProps: ProvidedNumberFieldMessageProps;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedNumberFieldImplementation\n  extends Omit<\n    ValidatedTextFieldImplementation<HTMLInputElement>,\n    \"value\" | \"setState\"\n  > {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;\n}\n\n/**\n * @example Enforce Number Value and No Error Messages\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     disableMessage: true,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n * ```\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    disableMessage: true;\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * @example No Error Messages\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     disableMessage: true,\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & { disableMessage: true }\n): NumberFieldImplementation;\n\n/**\n * @example Enforce Number Value\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Enforce Number Value and Deferring Updates\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     updateValue: \"blur\",\n *   });\n *\n *   // the `value` will only be updated whenever the `TextField` is blurred.\n *   // This is helpful if the `value` is used in expensive computations or\n *   // updates that do not need to be updated as the user types\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldWithMessageImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * The `useNumberField` hook is used to control the state of a `TextField` or\n * `<input type=\"number\">`\n *\n * @example Default Implementation\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   // whenever there is an error, an error message will be displayed below the\n *   // `TextField`\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *     min: 0,\n *     max: 100,\n *     step: 2,\n *     required: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @see {@link https://next.react-md.dev/components/text-field#number | Number TextField Demos}\n * @see {@link https://next.react-md.dev/hooks/use-number-field | useNumberField Demos}\n * @see {@link useTextField}\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): NumberFieldWithMessageImplementation;\n\n/**\n * @internal\n * @see {@link https://next.react-md.dev/components/text-field#number | Number TextField Demos}\n * @see {@link https://next.react-md.dev/hooks/use-number-field | useNumberField Demos}\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): ValidatedNumberFieldImplementation {\n  const {\n    min,\n    max,\n    step,\n    onBlur = noop,\n    onChange = noop,\n    updateValue = \"change\",\n    updateValueOnBlur = true,\n    defaultValue,\n    ...textOptions\n  } = options;\n\n  const [number, setNumber] = useState(defaultValue);\n  const initial = useRef(number);\n  const {\n    value: _value,\n    reset: resetTextField,\n    fieldProps,\n    setState: setTextFieldState,\n    ...remaining\n  } = useTextField({\n    ...textOptions,\n    isNumber: true,\n    defaultValue: `${number ?? \"\"}`,\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.setCustomValidity(\"\");\n      input.checkValidity();\n      if (\n        !updateValueOnBlur ||\n        // do nothing else since it's a weird value like: `\"--0\"` which causes\n        // the value to be `\"\"` and `numberAsValue` to be `NaN`\n        input.validity.badInput\n      ) {\n        return;\n      }\n\n      let value = input.valueAsNumber;\n      if (input.value === \"\" && typeof initial.current === \"number\") {\n        value = min ?? initial.current;\n      }\n\n      // can't have both rangeUnderflow and rangeOverflow at the same time, so\n      // it's \"safe\" to always provide both\n      value = withinRange({ min, max, value });\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n        input.value = `${value}`;\n      } else if (typeof initial.current === \"undefined\") {\n        setNumber(undefined);\n      }\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped() || updateValue === \"blur\") {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.checkValidity();\n      const value = withinRange({\n        min,\n        max,\n        value: event.currentTarget.valueAsNumber,\n      });\n      if (\n        !input.validity.valid &&\n        !input.validity.rangeUnderflow &&\n        !input.validity.rangeOverflow\n      ) {\n        return;\n      }\n\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n      } else if (initial.current === undefined) {\n        setNumber(undefined);\n      }\n    },\n  });\n\n  const reset = useCallback(() => {\n    resetTextField();\n    setNumber(initial.current);\n  }, [resetTextField]);\n  const setState = useCallback<UseStateSetter<NumberFieldHookState>>(\n    (nextState) => {\n      if (typeof nextState === \"function\") {\n        setNumber((prevNumber) => {\n          let nextNumber: number | undefined = prevNumber;\n          setTextFieldState((prevState) => {\n            const updated = nextState({\n              ...prevState,\n              value: prevNumber,\n            });\n\n            nextNumber = updated.value;\n\n            return {\n              ...updated,\n              value: `${nextNumber ?? \"\"}`,\n            };\n          });\n\n          return nextNumber;\n        });\n        return;\n      }\n\n      const { value, error, errorMessage } = nextState;\n      setNumber(value);\n      setTextFieldState({\n        value: `${value ?? \"\"}`,\n        error,\n        errorMessage,\n      });\n    },\n    [setTextFieldState]\n  );\n\n  return {\n    ...remaining,\n    reset,\n    value: number,\n    setState,\n    fieldProps: {\n      ...fieldProps,\n      min,\n      max,\n      step,\n      type: \"number\",\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","withinRange","useTextField","noop","useNumberField","options","min","max","step","onBlur","onChange","updateValue","updateValueOnBlur","defaultValue","textOptions","number","setNumber","initial","value","_value","reset","resetTextField","fieldProps","setState","setTextFieldState","remaining","isNumber","event","isPropagationStopped","input","currentTarget","setCustomValidity","checkValidity","validity","badInput","valueAsNumber","current","Number","isNaN","undefined","valid","rangeUnderflow","rangeOverflow","nextState","prevNumber","nextNumber","prevState","updated","error","errorMessage","type"],"mappings":"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"}

package/dist/form/useRadioGroup.d.ts

@@ -118,6 +118,9 @@ export interface CombinedRadioGroupReturnValue<V extends string | number> {
  *   </>
  * );
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/radio | Radio Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-radio-group | useRadioGroup Demos}
  * @since 6.0.0
  */
 export declare function useRadioGroup<V extends number>(options: RadioGroupOptions<V> & {
@@ -172,6 +175,9 @@ export declare function useRadioGroup<V extends number>(options: RadioGroupOptio
  *   </>
  * );
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/radio | Radio Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-radio-group | useRadioGroup Demos}
  * @since 6.0.0
  */
 export declare function useRadioGroup<V extends string>(options: RadioGroupOptions<V> & {

package/dist/form/useRadioGroup.js

@@ -26,6 +26,9 @@ const noop = ()=>{
  *   </>
  * );
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/radio | Radio Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-radio-group | useRadioGroup Demos}
  * @since 6.0.0
  */ export function useRadioGroup(options) {
     const { name, defaultValue, menu = false, required, onChange = noop, onInvalid = noop } = options;

package/dist/form/useRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useRadioGroup.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEventHandler,\n  type FormEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface RadioGroupOptions<T extends string | number> {\n  /**\n   * A `name` to apply to all the radios within the group. This is required if\n   * unless {@link menu} is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemRadio` component instead of the\n   * `Radio` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * The value of a radio that should be checked by default. If you want to\n   * force the user to select one of the radios, keep this as the empty string\n   * or set it to a string or number that does not represent a valid radio\n   * value.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * Set this to `true` if one of the radios within the group must be checked before\n   * a form can be submitted.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  required?: boolean;\n\n  /**\n   * If you need to prevent the default behavior in a radio group for some\n   * reason, you can provide a custom `onChange` event handler and call\n   * `event.stopPropagation()`. This will be called whenever a new radio button\n   * is checked.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `() => {}`\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n\n  /**\n   * If the radio group has {@link required} set to `true`, the radios will gain\n   * the `error` state if a form is submitted without a checked radio. If you\n   * want to prevent that behavior for some reason, you can provide this\n   * function and call `event.stopPropagation()`.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `() => {}`\n   */\n  onInvalid?: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport interface ProvidedRadioGroupProps<V extends string | number> {\n  name: string;\n  value: V;\n  checked: boolean;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n  error: boolean;\n  required: boolean;\n  onInvalid: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport type GetRadioGroupProps<V extends string | number> = (\n  value: V\n) => Readonly<ProvidedRadioGroupProps<V>>;\n\n/** @since 6.0.0 */\nexport interface RadioGroupImplementation<V extends string | number> {\n  reset: () => void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps: GetRadioGroupProps<V>;\n}\n\nexport type GetMenuItemRadioGroupProps<V extends string | number> = (\n  value: V\n) => Readonly<{ checked: boolean; onCheckedChange: () => void }>;\n\n/** @since 6.0.0 */\nexport interface MenuItemRadioGroupImplementation<V extends string | number> {\n  reset: () => void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps: GetMenuItemRadioGroupProps<V>;\n}\n\n/** @since 6.0.0 */\nexport interface CombinedRadioGroupReturnValue<V extends string | number> {\n  reset: () => void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps: (value: V) => {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    error?: boolean;\n    required?: boolean;\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    onCheckedChange?: () => void;\n    onInvalid?: FormEventHandler<HTMLInputElement>;\n  };\n}\n\n// Note: These overrides are set up so that the value will default to any\n// string.\n\n/**\n * @example Generic Number Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup<number>({\n *   name: \"group\",\n *   defaultValue: -1\n * });\n *\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(0)} label=\"First\" />\n *     <Radio {...getRadioProps(1)} label=\"Second\" />\n *     <Radio {...getRadioProps(2)} label=\"Third\" />\n *   </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends number>(\n  options: RadioGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    defaultValue: UseStateInitializer<V>;\n  }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends number>(\n  options: RadioGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    required?: never;\n    onChange?: never;\n    onInvalid?: never;\n    defaultValue: UseStateInitializer<V>;\n  }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Generic String Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup({ name: \"group\" });\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(\"a\")} label=\"First\" />\n *     <Radio {...getRadioProps(\"b\")} label=\"Second\" />\n *     <Radio {...getRadioProps(\"c\")} label=\"Third\" />\n *   </>\n * );\n * ```\n *\n * @example String Union Example\n * ```tsx\n * const values = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const;\n *\n * type Values = typeof values[number][\"value\"];\n * //   ^ \"a\" | \"b\" | \"c\"\n *\n * const { value, getRadioProps } = useRadioGroup<Values | \"\">({\n *   name: \"group\",\n *   defaultValue: \"\",\n * });\n *\n *\n * return (\n *   <>\n *     {values.map(({ label, value }) => (\n *       <Radio {...getRadioProps(value)} key={value} label={label} />\n *     ))}\n *   </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string>(\n  options: RadioGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    defaultValue?: UseStateInitializer<V>;\n  }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends string>(\n  options: RadioGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    required?: never;\n    onChange?: never;\n    onInvalid?: never;\n    defaultValue?: UseStateInitializer<V>;\n  }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Strict Union Example\n * ```tsx\n * type ValidValues = 1 | 2 | 3 | 4 | \"\" | \"a\" | \"b\";\n *\n * const { value, getRadioProps } = useRadioGroup<ValidValues>({\n *   name: \"group\",\n *   defaultValue: \"\"\n * });\n *\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(1)} label=\"First\" />\n *     <Radio {...getRadioProps(2)} label=\"Second\" />\n *     <Radio {...getRadioProps(3)} label=\"Third\" />\n *     <Radio {...getRadioProps(4)} label=\"Forth\" />\n *     <Radio {...getRadioProps(\"a\")} label=\"Fifth\" />\n *     <Radio {...getRadioProps(\"b\")} label=\"Sixth\" />\n *     <Radio {...getRadioProps(\"c\")} label=\"Seventh\" />\n *   </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string | number>(\n  options: RadioGroupOptions<V>\n): CombinedRadioGroupReturnValue<V> {\n  const {\n    name,\n    defaultValue,\n    menu = false,\n    required,\n    onChange = noop,\n    onInvalid = noop,\n  } = options;\n  const [value, setValue] = useState<V>(() => {\n    if (typeof defaultValue === \"function\") {\n      return defaultValue();\n    }\n\n    return defaultValue ?? (\"\" as V);\n  });\n  const initial = useRef(value);\n  const [error, setError] = useState(false);\n\n  return {\n    reset: useCallback(() => {\n      setError(false);\n      setValue(initial.current);\n    }, []),\n    value,\n    setValue,\n    getRadioProps(radioValue) {\n      const checked = value === radioValue;\n      if (menu) {\n        return {\n          checked,\n          onCheckedChange() {\n            setValue(radioValue);\n          },\n        };\n      }\n\n      return {\n        name,\n        value: radioValue,\n        error,\n        checked,\n        required,\n        onChange(event) {\n          onChange(event);\n          setError(false);\n          setValue(radioValue);\n        },\n        onInvalid(event) {\n          onInvalid(event);\n          setError(true);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","noop","useRadioGroup","options","name","defaultValue","menu","required","onChange","onInvalid","value","setValue","initial","error","setError","reset","current","getRadioProps","radioValue","checked","onCheckedChange","event"],"mappings":"AAAA;AAEA,SAGEA,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAIf,MAAMC,OAAO;AACX,aAAa;AACf;AAqNA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASC,cACdC,OAA6B;IAE7B,MAAM,EACJC,IAAI,EACJC,YAAY,EACZC,OAAO,KAAK,EACZC,QAAQ,EACRC,WAAWP,IAAI,EACfQ,YAAYR,IAAI,EACjB,GAAGE;IACJ,MAAM,CAACO,OAAOC,SAAS,GAAGX,SAAY;QACpC,IAAI,OAAOK,iBAAiB,YAAY;YACtC,OAAOA;QACT;QAEA,OAAOA,gBAAiB;IAC1B;IACA,MAAMO,UAAUb,OAAOW;IACvB,MAAM,CAACG,OAAOC,SAAS,GAAGd,SAAS;IAEnC,OAAO;QACLe,OAAOjB,YAAY;YACjBgB,SAAS;YACTH,SAASC,QAAQI,OAAO;QAC1B,GAAG,EAAE;QACLN;QACAC;QACAM,eAAcC,UAAU;YACtB,MAAMC,UAAUT,UAAUQ;YAC1B,IAAIZ,MAAM;gBACR,OAAO;oBACLa;oBACAC;wBACET,SAASO;oBACX;gBACF;YACF;YAEA,OAAO;gBACLd;gBACAM,OAAOQ;gBACPL;gBACAM;gBACAZ;gBACAC,UAASa,KAAK;oBACZb,SAASa;oBACTP,SAAS;oBACTH,SAASO;gBACX;gBACAT,WAAUY,KAAK;oBACbZ,UAAUY;oBACVP,SAAS;gBACX;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useRadioGroup.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEventHandler,\n  type FormEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface RadioGroupOptions<T extends string | number> {\n  /**\n   * A `name` to apply to all the radios within the group. This is required if\n   * unless {@link menu} is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemRadio` component instead of the\n   * `Radio` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * The value of a radio that should be checked by default. If you want to\n   * force the user to select one of the radios, keep this as the empty string\n   * or set it to a string or number that does not represent a valid radio\n   * value.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * Set this to `true` if one of the radios within the group must be checked before\n   * a form can be submitted.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  required?: boolean;\n\n  /**\n   * If you need to prevent the default behavior in a radio group for some\n   * reason, you can provide a custom `onChange` event handler and call\n   * `event.stopPropagation()`. This will be called whenever a new radio button\n   * is checked.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `() => {}`\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n\n  /**\n   * If the radio group has {@link required} set to `true`, the radios will gain\n   * the `error` state if a form is submitted without a checked radio. If you\n   * want to prevent that behavior for some reason, you can provide this\n   * function and call `event.stopPropagation()`.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `() => {}`\n   */\n  onInvalid?: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport interface ProvidedRadioGroupProps<V extends string | number> {\n  name: string;\n  value: V;\n  checked: boolean;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n  error: boolean;\n  required: boolean;\n  onInvalid: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport type GetRadioGroupProps<V extends string | number> = (\n  value: V\n) => Readonly<ProvidedRadioGroupProps<V>>;\n\n/** @since 6.0.0 */\nexport interface RadioGroupImplementation<V extends string | number> {\n  reset: () => void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps: GetRadioGroupProps<V>;\n}\n\nexport type GetMenuItemRadioGroupProps<V extends string | number> = (\n  value: V\n) => Readonly<{ checked: boolean; onCheckedChange: () => void }>;\n\n/** @since 6.0.0 */\nexport interface MenuItemRadioGroupImplementation<V extends string | number> {\n  reset: () => void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps: GetMenuItemRadioGroupProps<V>;\n}\n\n/** @since 6.0.0 */\nexport interface CombinedRadioGroupReturnValue<V extends string | number> {\n  reset: () => void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps: (value: V) => {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    error?: boolean;\n    required?: boolean;\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    onCheckedChange?: () => void;\n    onInvalid?: FormEventHandler<HTMLInputElement>;\n  };\n}\n\n// Note: These overrides are set up so that the value will default to any\n// string.\n\n/**\n * @example Generic Number Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup<number>({\n *   name: \"group\",\n *   defaultValue: -1\n * });\n *\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(0)} label=\"First\" />\n *     <Radio {...getRadioProps(1)} label=\"Second\" />\n *     <Radio {...getRadioProps(2)} label=\"Third\" />\n *   </>\n * );\n * ```\n *\n * @see {@link https://next.react-md.dev/components/radio | Radio Demos}\n * @see {@link https://next.react-md.dev/hooks/use-radio-group | useRadioGroup Demos}\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends number>(\n  options: RadioGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    defaultValue: UseStateInitializer<V>;\n  }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends number>(\n  options: RadioGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    required?: never;\n    onChange?: never;\n    onInvalid?: never;\n    defaultValue: UseStateInitializer<V>;\n  }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Generic String Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup({ name: \"group\" });\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(\"a\")} label=\"First\" />\n *     <Radio {...getRadioProps(\"b\")} label=\"Second\" />\n *     <Radio {...getRadioProps(\"c\")} label=\"Third\" />\n *   </>\n * );\n * ```\n *\n * @example String Union Example\n * ```tsx\n * const values = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const;\n *\n * type Values = typeof values[number][\"value\"];\n * //   ^ \"a\" | \"b\" | \"c\"\n *\n * const { value, getRadioProps } = useRadioGroup<Values | \"\">({\n *   name: \"group\",\n *   defaultValue: \"\",\n * });\n *\n *\n * return (\n *   <>\n *     {values.map(({ label, value }) => (\n *       <Radio {...getRadioProps(value)} key={value} label={label} />\n *     ))}\n *   </>\n * );\n * ```\n *\n * @see {@link https://next.react-md.dev/components/radio | Radio Demos}\n * @see {@link https://next.react-md.dev/hooks/use-radio-group | useRadioGroup Demos}\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string>(\n  options: RadioGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    defaultValue?: UseStateInitializer<V>;\n  }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends string>(\n  options: RadioGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    required?: never;\n    onChange?: never;\n    onInvalid?: never;\n    defaultValue?: UseStateInitializer<V>;\n  }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Strict Union Example\n * ```tsx\n * type ValidValues = 1 | 2 | 3 | 4 | \"\" | \"a\" | \"b\";\n *\n * const { value, getRadioProps } = useRadioGroup<ValidValues>({\n *   name: \"group\",\n *   defaultValue: \"\"\n * });\n *\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(1)} label=\"First\" />\n *     <Radio {...getRadioProps(2)} label=\"Second\" />\n *     <Radio {...getRadioProps(3)} label=\"Third\" />\n *     <Radio {...getRadioProps(4)} label=\"Forth\" />\n *     <Radio {...getRadioProps(\"a\")} label=\"Fifth\" />\n *     <Radio {...getRadioProps(\"b\")} label=\"Sixth\" />\n *     <Radio {...getRadioProps(\"c\")} label=\"Seventh\" />\n *   </>\n * );\n * ```\n *\n * @see {@link https://next.react-md.dev/components/radio | Radio Demos}\n * @see {@link https://next.react-md.dev/hooks/use-radio-group | useRadioGroup Demos}\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string | number>(\n  options: RadioGroupOptions<V>\n): CombinedRadioGroupReturnValue<V> {\n  const {\n    name,\n    defaultValue,\n    menu = false,\n    required,\n    onChange = noop,\n    onInvalid = noop,\n  } = options;\n  const [value, setValue] = useState<V>(() => {\n    if (typeof defaultValue === \"function\") {\n      return defaultValue();\n    }\n\n    return defaultValue ?? (\"\" as V);\n  });\n  const initial = useRef(value);\n  const [error, setError] = useState(false);\n\n  return {\n    reset: useCallback(() => {\n      setError(false);\n      setValue(initial.current);\n    }, []),\n    value,\n    setValue,\n    getRadioProps(radioValue) {\n      const checked = value === radioValue;\n      if (menu) {\n        return {\n          checked,\n          onCheckedChange() {\n            setValue(radioValue);\n          },\n        };\n      }\n\n      return {\n        name,\n        value: radioValue,\n        error,\n        checked,\n        required,\n        onChange(event) {\n          onChange(event);\n          setError(false);\n          setValue(radioValue);\n        },\n        onInvalid(event) {\n          onInvalid(event);\n          setError(true);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","noop","useRadioGroup","options","name","defaultValue","menu","required","onChange","onInvalid","value","setValue","initial","error","setError","reset","current","getRadioProps","radioValue","checked","onCheckedChange","event"],"mappings":"AAAA;AAEA,SAGEA,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAIf,MAAMC,OAAO;AACX,aAAa;AACf;AA2NA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,cACdC,OAA6B;IAE7B,MAAM,EACJC,IAAI,EACJC,YAAY,EACZC,OAAO,KAAK,EACZC,QAAQ,EACRC,WAAWP,IAAI,EACfQ,YAAYR,IAAI,EACjB,GAAGE;IACJ,MAAM,CAACO,OAAOC,SAAS,GAAGX,SAAY;QACpC,IAAI,OAAOK,iBAAiB,YAAY;YACtC,OAAOA;QACT;QAEA,OAAOA,gBAAiB;IAC1B;IACA,MAAMO,UAAUb,OAAOW;IACvB,MAAM,CAACG,OAAOC,SAAS,GAAGd,SAAS;IAEnC,OAAO;QACLe,OAAOjB,YAAY;YACjBgB,SAAS;YACTH,SAASC,QAAQI,OAAO;QAC1B,GAAG,EAAE;QACLN;QACAC;QACAM,eAAcC,UAAU;YACtB,MAAMC,UAAUT,UAAUQ;YAC1B,IAAIZ,MAAM;gBACR,OAAO;oBACLa;oBACAC;wBACET,SAASO;oBACX;gBACF;YACF;YAEA,OAAO;gBACLd;gBACAM,OAAOQ;gBACPL;gBACAM;gBACAZ;gBACAC,UAASa,KAAK;oBACZb,SAASa;oBACTP,SAAS;oBACTH,SAASO;gBACX;gBACAT,WAAUY,KAAK;oBACbZ,UAAUY;oBACVP,SAAS;gBACX;YACF;QACF;IACF;AACF"}

package/dist/form/useRangeSlider.d.ts

@@ -27,7 +27,11 @@ export interface RangeSliderImplementation extends Required<SliderValueOptions>,
 /**
  * @example Range Slider Example
  * ```tsx
- * import { Fieldset, Form, Legend, Slider, useRangeSlider } from "@react-md/core";
+ * import { Fieldset } from "@react-md/core/form/Fieldset";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Legend } from "@react-md/core/form/Legend";
+ * import { Slider } from "@react-md/core/form/Slider";
+ * import { useRangeSlider } from "@react-md/core/form/useRangeSlider";
  * import type { ReactElement } from "react";
  * import { useId } from "react";
  *
@@ -56,6 +60,7 @@ export interface RangeSliderImplementation extends Required<SliderValueOptions>,
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slider | Slider Demos}
  * @see The `Slider` component for additional examples.
  * @since 2.5.0
  * @since 6.0.0 Now returns an object instead of an ordered tuple and only

package/dist/form/useRangeSlider.js

@@ -3,7 +3,11 @@ import { useState } from "react";
 /**
  * @example Range Slider Example
  * ```tsx
- * import { Fieldset, Form, Legend, Slider, useRangeSlider } from "@react-md/core";
+ * import { Fieldset } from "@react-md/core/form/Fieldset";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Legend } from "@react-md/core/form/Legend";
+ * import { Slider } from "@react-md/core/form/Slider";
+ * import { useRangeSlider } from "@react-md/core/form/useRangeSlider";
  * import type { ReactElement } from "react";
  * import { useId } from "react";
  *
@@ -32,6 +36,7 @@ import { useState } from "react";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slider | Slider Demos}
  * @see The `Slider` component for additional examples.
  * @since 2.5.0
  * @since 6.0.0 Now returns an object instead of an ordered tuple and only

package/dist/form/useRangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useRangeSlider.ts"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { type SliderValueOptions } from \"./useSlider.js\";\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Updated to use labeled tuple.\n */\nexport type RangeSliderValue = readonly [minValue: number, maxValue: number];\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderState {\n  rangeValue: RangeSliderValue;\n  setRangeValue: UseStateSetter<RangeSliderValue>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderOptions extends SliderValueOptions {\n  /** @defaultValue `[min, max]` */\n  defaultValue?: UseStateInitializer<RangeSliderValue>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderImplementation\n  extends Required<SliderValueOptions>,\n    RangeSliderState {}\n\n/**\n * @example Range Slider Example\n * ```tsx\n * import { Fieldset, Form, Legend, Slider, useRangeSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useRangeSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: [0, 100],\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { rangeValue, setRangeValue } = slider;\n *   const [minPrice, maxPrice] = rangeValue;\n *\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Price Range</Legend>\n *         <Slider {...slider} />\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see The `Slider` component for additional examples.\n * @since 2.5.0\n * @since 6.0.0 Now returns an object instead of an ordered tuple and only\n * return the `rangeValue` and `setRangeValue` instead of all the slider\n * functionality. In addition, the hook only accepts a single object argument.\n */\nexport function useRangeSlider(\n  options: RangeSliderOptions = {}\n): RangeSliderImplementation {\n  const { min = 0, max = 100, step = 1, defaultValue } = options;\n  const [rangeValue, setRangeValue] = useState<RangeSliderValue>(\n    defaultValue ?? [min, max]\n  );\n\n  return {\n    min,\n    max,\n    step,\n    rangeValue,\n    setRangeValue,\n  };\n}\n"],"names":["useState","useRangeSlider","options","min","max","step","defaultValue","rangeValue","setRangeValue"],"mappings":"AAAA;AAEA,SAASA,QAAQ,QAAQ,QAAQ;AAkCjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCC,GACD,OAAO,SAASC,eACdC,UAA8B,CAAC,CAAC;IAEhC,MAAM,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEC,OAAO,CAAC,EAAEC,YAAY,EAAE,GAAGJ;IACvD,MAAM,CAACK,YAAYC,cAAc,GAAGR,SAClCM,gBAAgB;QAACH;QAAKC;KAAI;IAG5B,OAAO;QACLD;QACAC;QACAC;QACAE;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useRangeSlider.ts"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { type SliderValueOptions } from \"./useSlider.js\";\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Updated to use labeled tuple.\n */\nexport type RangeSliderValue = readonly [minValue: number, maxValue: number];\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderState {\n  rangeValue: RangeSliderValue;\n  setRangeValue: UseStateSetter<RangeSliderValue>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderOptions extends SliderValueOptions {\n  /** @defaultValue `[min, max]` */\n  defaultValue?: UseStateInitializer<RangeSliderValue>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderImplementation\n  extends Required<SliderValueOptions>,\n    RangeSliderState {}\n\n/**\n * @example Range Slider Example\n * ```tsx\n * import { Fieldset } from \"@react-md/core/form/Fieldset\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Legend } from \"@react-md/core/form/Legend\";\n * import { Slider } from \"@react-md/core/form/Slider\";\n * import { useRangeSlider } from \"@react-md/core/form/useRangeSlider\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useRangeSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: [0, 100],\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { rangeValue, setRangeValue } = slider;\n *   const [minPrice, maxPrice] = rangeValue;\n *\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Price Range</Legend>\n *         <Slider {...slider} />\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/slider | Slider Demos}\n * @see The `Slider` component for additional examples.\n * @since 2.5.0\n * @since 6.0.0 Now returns an object instead of an ordered tuple and only\n * return the `rangeValue` and `setRangeValue` instead of all the slider\n * functionality. In addition, the hook only accepts a single object argument.\n */\nexport function useRangeSlider(\n  options: RangeSliderOptions = {}\n): RangeSliderImplementation {\n  const { min = 0, max = 100, step = 1, defaultValue } = options;\n  const [rangeValue, setRangeValue] = useState<RangeSliderValue>(\n    defaultValue ?? [min, max]\n  );\n\n  return {\n    min,\n    max,\n    step,\n    rangeValue,\n    setRangeValue,\n  };\n}\n"],"names":["useState","useRangeSlider","options","min","max","step","defaultValue","rangeValue","setRangeValue"],"mappings":"AAAA;AAEA,SAASA,QAAQ,QAAQ,QAAQ;AAkCjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,SAASC,eACdC,UAA8B,CAAC,CAAC;IAEhC,MAAM,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEC,OAAO,CAAC,EAAEC,YAAY,EAAE,GAAGJ;IACvD,MAAM,CAACK,YAAYC,cAAc,GAAGR,SAClCM,gBAAgB;QAACH;QAAKC;KAAI;IAG5B,OAAO;QACLD;QACAC;QACAC;QACAE;QACAC;IACF;AACF"}

package/dist/form/useSlider.d.ts

@@ -46,7 +46,9 @@ export interface SliderOptions extends SliderValueOptions {
 /**
  * @example Simple Example
  * ```tsx
- * import { Form, Slider, useSlider } from "@react-md/core";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Slider } from "@react-md/core/form/Slider";
+ * import { useSlider } from "@react-md/core/form/useSlider";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -70,6 +72,7 @@ export interface SliderOptions extends SliderValueOptions {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slider | Slider Demos}
  * @see The `Slider` component for additional examples.
  * @since 2.5.0
  * @since 6.0.0 Now returns an object instead of an ordered tuple and only

package/dist/form/useSlider.js

@@ -4,7 +4,9 @@ import { getRangeDefaultValue } from "../utils/getRangeDefaultValue.js";
 /**
  * @example Simple Example
  * ```tsx
- * import { Form, Slider, useSlider } from "@react-md/core";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Slider } from "@react-md/core/form/Slider";
+ * import { useSlider } from "@react-md/core/form/useSlider";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -28,6 +30,7 @@ import { getRangeDefaultValue } from "../utils/getRangeDefaultValue.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slider | Slider Demos}
  * @see The `Slider` component for additional examples.
  * @since 2.5.0
  * @since 6.0.0 Now returns an object instead of an ordered tuple and only

package/dist/form/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useSlider.ts"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface SliderValueOptions {\n  /**\n   * The min value for the slider.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max value for the slider.\n   *\n   * @defaultValue `100`\n   */\n  max?: number;\n\n  /**\n   * A positive number representing the value to \"jump\" while incrementing or\n   * decrementing the slider's value. This should normally stay as the default\n   * value of `1`, but can also be decimal values if needed.\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderState {\n  value: number;\n  setValue: UseStateSetter<number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderImplementation\n  extends Required<SliderValueOptions>,\n    SliderState {}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderOptions extends SliderValueOptions {\n  /** @defaultValue `(max - min ) / 2` */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form, Slider, useSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see The `Slider` component for additional examples.\n * @since 2.5.0\n * @since 6.0.0 Now returns an object instead of an ordered tuple and only\n * return the `value` and `setValue` instead of all the slider functionality. In\n * addition, the hook only accepts a single object argument.\n */\nexport function useSlider(options: SliderOptions = {}): SliderImplementation {\n  const { min = 0, max = 100, step = 1, defaultValue } = options;\n  const [value, setValue] = useState(\n    getRangeDefaultValue({\n      min,\n      max,\n      step,\n      defaultValue,\n    })\n  );\n\n  return {\n    min,\n    max,\n    step,\n    value,\n    setValue,\n  };\n}\n"],"names":["useState","getRangeDefaultValue","useSlider","options","min","max","step","defaultValue","value","setValue"],"mappings":"AAAA;AAEA,SAASA,QAAQ,QAAQ,QAAQ;AAGjC,SAASC,oBAAoB,QAAQ,mCAAmC;AAqDxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,SAASC,UAAUC,UAAyB,CAAC,CAAC;IACnD,MAAM,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEC,OAAO,CAAC,EAAEC,YAAY,EAAE,GAAGJ;IACvD,MAAM,CAACK,OAAOC,SAAS,GAAGT,SACxBC,qBAAqB;QACnBG;QACAC;QACAC;QACAC;IACF;IAGF,OAAO;QACLH;QACAC;QACAC;QACAE;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useSlider.ts"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface SliderValueOptions {\n  /**\n   * The min value for the slider.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max value for the slider.\n   *\n   * @defaultValue `100`\n   */\n  max?: number;\n\n  /**\n   * A positive number representing the value to \"jump\" while incrementing or\n   * decrementing the slider's value. This should normally stay as the default\n   * value of `1`, but can also be decimal values if needed.\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderState {\n  value: number;\n  setValue: UseStateSetter<number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderImplementation\n  extends Required<SliderValueOptions>,\n    SliderState {}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderOptions extends SliderValueOptions {\n  /** @defaultValue `(max - min ) / 2` */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Slider } from \"@react-md/core/form/Slider\";\n * import { useSlider } from \"@react-md/core/form/useSlider\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/slider | Slider Demos}\n * @see The `Slider` component for additional examples.\n * @since 2.5.0\n * @since 6.0.0 Now returns an object instead of an ordered tuple and only\n * return the `value` and `setValue` instead of all the slider functionality. In\n * addition, the hook only accepts a single object argument.\n */\nexport function useSlider(options: SliderOptions = {}): SliderImplementation {\n  const { min = 0, max = 100, step = 1, defaultValue } = options;\n  const [value, setValue] = useState(\n    getRangeDefaultValue({\n      min,\n      max,\n      step,\n      defaultValue,\n    })\n  );\n\n  return {\n    min,\n    max,\n    step,\n    value,\n    setValue,\n  };\n}\n"],"names":["useState","getRangeDefaultValue","useSlider","options","min","max","step","defaultValue","value","setValue"],"mappings":"AAAA;AAEA,SAASA,QAAQ,QAAQ,QAAQ;AAGjC,SAASC,oBAAoB,QAAQ,mCAAmC;AAqDxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,UAAUC,UAAyB,CAAC,CAAC;IACnD,MAAM,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEC,OAAO,CAAC,EAAEC,YAAY,EAAE,GAAGJ;IACvD,MAAM,CAACK,OAAOC,SAAS,GAAGT,SACxBC,qBAAqB;QACnBG;QACAC;QACAC;QACAC;IACF;IAGF,OAAO;QACLH;QACAC;QACAC;QACAE;QACAC;IACF;AACF"}

package/dist/form/useTextField.d.ts

@@ -120,7 +120,8 @@ export interface TextFieldHookOptions<E extends HTMLInputElement | HTMLTextAreaE
      *
      * @example Accessing TextField DOM Node
      * ```tsx
-     * import { TextField, useTextField } from "@react-md/core";
+     * import { TextField } from "@react-md/core/form/TextField";
+     * import { useTextField } from "@react-md/core/form/useTextField";
      * import { useEffect } from "react";
      * import type { ReactElement } from "react";
      *
@@ -273,6 +274,9 @@ export interface ValidatedTextFieldImplementation<E extends HTMLInputElement | H
  * ```
  *
  * Look at the other {@link useTextField} override for additional examples.
+ *
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}
  */
 export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(options: TextFieldHookOptions<E> & {
     disableMessage: true;
@@ -381,6 +385,8 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}
  * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
  * @since 2.5.6
  * @since 6.0.0 This hook returns an object instead of an ordered list. Also

package/dist/form/useTextField.js

@@ -7,7 +7,11 @@ import { defaultGetErrorIcon, defaultGetErrorMessage, defaultIsErrored } from ".
 const noop = ()=>{
 // do nothing
 };
-export function useTextField(options) {
+/**
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}
+ * @since 6.0.0
+ */ export function useTextField(options) {
     const { id: propId, ref: propRef, name, defaultValue = "", isNumber = false, required, pattern, minLength, maxLength, onBlur = noop, onChange = noop, onInvalid = noop, counter = false, helpText, validationType = "recommended", disableMessage = false, disableMaxLength = false, errorIcon: propErrorIcon, isErrored = defaultIsErrored, onErrorChange = noop, getErrorIcon = defaultGetErrorIcon, getErrorMessage = defaultGetErrorMessage } = options;
     const id = useEnsuredId(propId, "text-field");
     const messageId = `${id}-message`;

package/dist/form/useTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { type TextFieldProps } from \"./TextField.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\nimport {\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Added the `onInvalid` handler\n */\nexport type TextFieldChangeHandlers<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> {\n  /**\n   * A ref containing the `TextField` or `TextArea` if you need access to that\n   * DOM node for error reporting.\n   */\n  ref: RefObject<E>;\n\n  /**\n   * The current name for the `TextField` or `TextArea`.\n   */\n  name: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that reports the error state changing. A good use-case for this is\n * to keep track of all the errors within your form and keep a submit button\n * disabled until they have been resolved.\n *\n * Example:\n *\n * ```ts\n * const [errors, setErrors] = useState<Record<string, boolean | undefined>>({});\n * const onErrorChange: ErrorChangeHandler = ({ name, error }) =>\n *   setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));\n *\n * const invalid = Object.values(errors).some(Boolean);\n *\n * // form implementation is left as an exercise for the reader\n * <Button type=\"submit\" disabled={invalid} onClick={submitForm}>Submit</Button>\n * ```\n *\n * @since 2.5.0\n * @since 6.0.0 Changed to object argument.\n */\nexport type ErrorChangeHandler<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = (options: ErrorChangeHandlerOptions<E>) => void;\n\n/** @since 2.5.6 */\nexport interface TextFieldHookState {\n  /**\n   * The current value for the `TextField` or `TextArea`.\n   */\n  value: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * All the props that will be generated and return from the `useTextField` hook\n * that should be passed to a `FormMessage` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedFormMessageProps\n  extends Pick<FormMessageProps, \"id\" | \"theme\" | \"children\">,\n    Required<Pick<TextFieldProps, \"error\">>,\n    Partial<Pick<FormMessageInputLengthCounterProps, \"length\" | \"maxLength\">> {}\n\n/**\n * All the props that will be generated and returned by the `useTextField` hook\n * that should be passed to a `TextField` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E>,\n    Required<Pick<TextFieldProps, \"id\" | \"name\" | \"value\" | \"error\">>,\n    Pick<TextFieldProps, \"aria-describedby\" | \"rightAddon\"> {\n  /**\n   * A ref that must be passed to the `TextField`/`TextArea` so that the custom\n   * validity behavior can work.\n   *\n   * @since 6.0.0\n   */\n  ref: RefCallback<E>;\n}\n\n/**\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldMessageProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends ProvidedTextFieldProps<E> {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E> {\n  /**\n   * An optional id to use for the `TextField` or `TextArea` that is also used\n   * to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref that should be merged with the ref returned by this hook.\n   * This should really only be used if you are making a custom component using\n   * this hook and forwarding refs. If you need a ref to access the `<input>` or\n   * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook\n   * instead.\n   *\n   * @example Accessing TextField DOM Node\n   * ```tsx\n   * import { TextField, useTextField } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldRef, fieldProps } = useTextField({ name: \"example\" });\n   *\n   *   useEffect(() => {\n   *     fieldRef.current;\n   *     //       ^ HTMLInputElement | null\n   *   }, [fieldRef]);\n   *\n   *   return <TextField {...fieldProps} label=\"Example\" />;\n   * }\n   * ```\n   */\n  ref?: Ref<E>;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea` or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * Boolean if the `FormMessage` should also display a counter for the\n   * remaining letters allowed based on the `maxLength`.\n   *\n   * This will still be considered false if the `maxLength` value is not\n   * provided.\n   *\n   * @defaultValue `false`\n   */\n  counter?: boolean;\n\n  /**\n   * This is used internally for the `useNumberField` hook and probably\n   * shouldn't be used otherwise. This is just passed into the\n   * {@link getErrorMessage} options and is used for additional validation.\n   *\n   * @defaultValue `false`\n   */\n  isNumber?: boolean;\n\n  /**\n   * The default value to use for the `TextField` or `TextArea` one initial\n   * render. If you want to manually change the value to something else after\n   * the initial render, either change the `key` for the component containing\n   * this hook, or use the `setState` function returned from this hook.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<string>;\n\n  /**\n   * An optional help text to display in the `FormMessage` component when there\n   * is not an error.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * A function used to determine if the `TextField` or `TextArea` is an in\n   * errored state.\n   *\n   * @see {@link defaultIsErrored}\n   * @defaultValue `defaultIsErrored`\n   */\n  isErrored?: IsErrored;\n\n  /**\n   * An optional error icon used in the {@link getErrorIcon} option.\n   *\n   * @defaultValue `getIcon(\"error\")`\n   */\n  errorIcon?: ReactNode;\n\n  /**\n   * A function used to get the error icon to display at the right of the\n   * `TextField` or `TextArea`. The default behavior will only show an icon when\n   * the `error` state is `true` and an `errorIcon` option has been provided.\n   *\n   * @see {@link defaultGetErrorIcon}\n   * @defaultValue `defaultGetErrorIcon`\n   */\n  getErrorIcon?: GetErrorIcon;\n\n  /**\n   * A function to get and display an error message based on the `TextField` or\n   * `TextArea` validity.\n   *\n   * @see {@link defaultGetErrorMessage}\n   * @defaultValue `defaultGetErrorMessage`\n   */\n  getErrorMessage?: GetErrorMessage;\n\n  /**\n   * An optional function that will be called whenever the `error` state is\n   * changed. This can be used for more complex forms to `disable` the Submit\n   * button or anything else if any field has an error.\n   *\n   * @defaultValue `() => {}`\n   */\n  onErrorChange?: ErrorChangeHandler<E>;\n\n  /**\n   * Set this to `true` to prevent the `errorMessage` from being\n   * rendered inline below the `TextField`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Only disables the `errorMessage` behavior so\n   * that counters and help text can still be rendered easily.\n   */\n  disableMessage?: boolean;\n\n  /**\n   * Boolean if the `maxLength` prop should not be passed to the `TextField`\n   * component since it will prevent any additional characters from being\n   * entered in the text field which might feel like weird behavior to some\n   * users. This should really only be used when the `counter` option is also\n   * enabled and rendering along with a `FormMessage` component.\n   *\n   * @defaultValue `false`\n   */\n  disableMaxLength?: boolean;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  validationType?: TextFieldValidationType;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E>;\n  reset: () => void;\n  setState: UseStateSetter<Readonly<TextFieldHookState>>;\n  fieldProps: ProvidedTextFieldProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldWithMessageImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;\n}\n\n/**\n * If you do not want to display the error messages below the `TextField` and\n * handle error messages separately, set the `disableMessage` option to `true`.\n *\n * @example No Inline Error Messages\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     disableMessage: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * Look at the other {@link useTextField} override for additional examples.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E> & { disableMessage: true }\n): TextFieldImplementation<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Inline Counter\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     // this allows the user to type beyond the max length limit and display\n *     // an error message. omit or set to `false` to enforce the max length instead\n *     disableMaxLength: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-z]+$\",\n *     minLength: 4,\n *     maxLength: 20,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Custom Validation\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     getErrorMessage(options) {\n *       const {\n *         value,\n *         pattern,\n *         required,\n *         minLength,\n *         maxLength,\n *         validity,\n *         validationMessage,\n *         isNumber,\n *         isBlurEvent,\n *         validationType,\n *       } = options;\n *\n *       if (validity.tooLong) {\n *         return `No more than ${maxLength} characters.`;\n *       }\n *\n *       if (validity.tooShort) {\n *         return `No more than ${minLength} characters.`;\n *       }\n *\n *       if (validity.valueMissing) {\n *         return \"This value is required!\";\n *       }\n *\n *       if (value === \"bad value\") {\n *         return \"Value cannot be bad value\";\n *       }\n *\n *       return defaultGetErrorMessage(options);\n *     }\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @since 2.5.6\n * @since 6.0.0 This hook returns an object instead of an ordered list. Also\n * added the ability to display an inline counter and help text while disabling\n * the error messaging.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): TextFieldWithMessageImplementation<E>;\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    defaultValue = \"\",\n    isNumber = false,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    onBlur = noop,\n    onChange = noop,\n    onInvalid = noop,\n    counter = false,\n    helpText,\n    validationType = \"recommended\",\n    disableMessage = false,\n    disableMaxLength = false,\n    errorIcon: propErrorIcon,\n    isErrored = defaultIsErrored,\n    onErrorChange = noop,\n    getErrorIcon = defaultGetErrorIcon,\n    getErrorMessage = defaultGetErrorMessage,\n  } = options;\n\n  const id = useEnsuredId(propId, \"text-field\");\n  const messageId = `${id}-message`;\n  const [fieldRef, ref] = useEnsuredRef(propRef);\n  const [state, setState] = useState<TextFieldHookState>(() => {\n    const value =\n      typeof defaultValue === \"function\" ? defaultValue() : defaultValue;\n\n    return {\n      value,\n      error: false,\n      errorMessage: \"\",\n    };\n  });\n  const { value, error, errorMessage } = state;\n\n  // using a `ref` instead of a `useCallback` makes it so the `defaultValue`\n  // will always be used once reset.\n  const reset = useRef(() => {\n    fieldRef.current?.setCustomValidity(\"\");\n    setState({ value, error: false, errorMessage: \"\" });\n  }).current;\n\n  const errored = useRef(error);\n  const checkValidity = useCallback(\n    (isBlurEvent: boolean) => {\n      const field = fieldRef.current;\n      if (!field) {\n        throw new Error(\"Unable to check validity due to missing ref\");\n      }\n\n      // need to temporarily set the `maxLength` back so it can be \"verified\"\n      // through the validity api\n      /* istanbul ignore next */\n      if (isBlurEvent && disableMaxLength && typeof maxLength === \"number\") {\n        field.maxLength = maxLength;\n      }\n\n      const { value } = field;\n      field.setCustomValidity(\"\");\n      field.checkValidity();\n\n      // remove the temporarily set `maxLength` attribute after checking the\n      // validity\n      /* istanbul ignore next */\n      if (disableMaxLength && typeof maxLength === \"number\") {\n        field.removeAttribute(\"maxLength\");\n      }\n\n      const options: ErrorMessageOptions = {\n        value,\n        pattern,\n        required,\n        minLength,\n        maxLength,\n        isBlurEvent,\n        isNumber,\n        validationType,\n        validity: field.validity,\n        validationMessage: field.validationMessage,\n      };\n      const errorMessage = getErrorMessage(options);\n      const error = isErrored({ ...options, errorMessage });\n\n      if (errored.current !== error) {\n        errored.current = error;\n        onErrorChange({\n          ref: fieldRef,\n          name,\n          error,\n          errorMessage,\n        });\n      }\n\n      /* istanbul ignore next */\n      if (errorMessage !== field.validationMessage) {\n        field.setCustomValidity(errorMessage);\n      }\n\n      setState((prevState) => {\n        if (\n          prevState.value === value &&\n          prevState.error === error &&\n          prevState.errorMessage === errorMessage\n        ) {\n          return prevState;\n        }\n\n        return {\n          value,\n          error,\n          errorMessage,\n        };\n      });\n    },\n    [\n      disableMaxLength,\n      fieldRef,\n      getErrorMessage,\n      isErrored,\n      isNumber,\n      maxLength,\n      minLength,\n      name,\n      onErrorChange,\n      pattern,\n      required,\n      validationType,\n    ]\n  );\n\n  const errorIcon = getIcon(\"error\", propErrorIcon);\n  const fieldProps: ProvidedTextFieldProps<E> & {\n    messageProps?: ProvidedFormMessageProps;\n  } = {\n    id,\n    ref,\n    name,\n    value,\n    error,\n    required,\n    pattern,\n    minLength,\n    maxLength: disableMaxLength ? undefined : maxLength,\n    rightAddon: getErrorIcon({\n      error,\n      errorIcon,\n      errorMessage,\n    }),\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        const { value } = event.currentTarget;\n        setState((prevState) => ({\n          ...prevState,\n          value,\n        }));\n        return;\n      }\n\n      checkValidity(false);\n    },\n    onInvalid(event) {\n      onInvalid(event);\n      if (\n        event.isPropagationStopped() ||\n        event.currentTarget === document.activeElement\n      ) {\n        return;\n      }\n\n      // this makes it so that if a submit button is clicked in a form, all\n      // textfields will gain the error state immediately\n      // also need to extract the validationMessage immediately because of the\n      // SyntheticEvent behavior in React. By the time the `setState` is called,\n      // the event might've been deleted\n      const { validationMessage } = event.currentTarget;\n\n      setState((prevState) => {\n        if (prevState.error) {\n          return prevState;\n        }\n\n        return {\n          ...prevState,\n          error: true,\n          errorMessage: validationMessage,\n        };\n      });\n    },\n  };\n\n  const isCounter = counter && typeof maxLength === \"number\";\n  if (isCounter || helpText || !disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength: (counter && maxLength) || undefined,\n      children: (!disableMessage && errorMessage) || helpText,\n    };\n  }\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","validationType","disableMessage","disableMaxLength","errorIcon","propErrorIcon","isErrored","onErrorChange","getErrorIcon","getErrorMessage","messageId","fieldRef","state","setState","value","error","errorMessage","reset","current","setCustomValidity","errored","checkValidity","isBlurEvent","field","Error","removeAttribute","validity","validationMessage","prevState","fieldProps","undefined","rightAddon","event","isPropagationStopped","currentTarget","document","activeElement","isCounter","messageProps","length","children"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { type TextFieldProps } from \"./TextField.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\nimport {\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Added the `onInvalid` handler\n */\nexport type TextFieldChangeHandlers<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> {\n  /**\n   * A ref containing the `TextField` or `TextArea` if you need access to that\n   * DOM node for error reporting.\n   */\n  ref: RefObject<E>;\n\n  /**\n   * The current name for the `TextField` or `TextArea`.\n   */\n  name: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that reports the error state changing. A good use-case for this is\n * to keep track of all the errors within your form and keep a submit button\n * disabled until they have been resolved.\n *\n * Example:\n *\n * ```ts\n * const [errors, setErrors] = useState<Record<string, boolean | undefined>>({});\n * const onErrorChange: ErrorChangeHandler = ({ name, error }) =>\n *   setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));\n *\n * const invalid = Object.values(errors).some(Boolean);\n *\n * // form implementation is left as an exercise for the reader\n * <Button type=\"submit\" disabled={invalid} onClick={submitForm}>Submit</Button>\n * ```\n *\n * @since 2.5.0\n * @since 6.0.0 Changed to object argument.\n */\nexport type ErrorChangeHandler<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = (options: ErrorChangeHandlerOptions<E>) => void;\n\n/** @since 2.5.6 */\nexport interface TextFieldHookState {\n  /**\n   * The current value for the `TextField` or `TextArea`.\n   */\n  value: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * All the props that will be generated and return from the `useTextField` hook\n * that should be passed to a `FormMessage` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedFormMessageProps\n  extends Pick<FormMessageProps, \"id\" | \"theme\" | \"children\">,\n    Required<Pick<TextFieldProps, \"error\">>,\n    Partial<Pick<FormMessageInputLengthCounterProps, \"length\" | \"maxLength\">> {}\n\n/**\n * All the props that will be generated and returned by the `useTextField` hook\n * that should be passed to a `TextField` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E>,\n    Required<Pick<TextFieldProps, \"id\" | \"name\" | \"value\" | \"error\">>,\n    Pick<TextFieldProps, \"aria-describedby\" | \"rightAddon\"> {\n  /**\n   * A ref that must be passed to the `TextField`/`TextArea` so that the custom\n   * validity behavior can work.\n   *\n   * @since 6.0.0\n   */\n  ref: RefCallback<E>;\n}\n\n/**\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldMessageProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends ProvidedTextFieldProps<E> {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E> {\n  /**\n   * An optional id to use for the `TextField` or `TextArea` that is also used\n   * to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref that should be merged with the ref returned by this hook.\n   * This should really only be used if you are making a custom component using\n   * this hook and forwarding refs. If you need a ref to access the `<input>` or\n   * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook\n   * instead.\n   *\n   * @example Accessing TextField DOM Node\n   * ```tsx\n   * import { TextField } from \"@react-md/core/form/TextField\";\n   * import { useTextField } from \"@react-md/core/form/useTextField\";\n   * import { useEffect } from \"react\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldRef, fieldProps } = useTextField({ name: \"example\" });\n   *\n   *   useEffect(() => {\n   *     fieldRef.current;\n   *     //       ^ HTMLInputElement | null\n   *   }, [fieldRef]);\n   *\n   *   return <TextField {...fieldProps} label=\"Example\" />;\n   * }\n   * ```\n   */\n  ref?: Ref<E>;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea` or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * Boolean if the `FormMessage` should also display a counter for the\n   * remaining letters allowed based on the `maxLength`.\n   *\n   * This will still be considered false if the `maxLength` value is not\n   * provided.\n   *\n   * @defaultValue `false`\n   */\n  counter?: boolean;\n\n  /**\n   * This is used internally for the `useNumberField` hook and probably\n   * shouldn't be used otherwise. This is just passed into the\n   * {@link getErrorMessage} options and is used for additional validation.\n   *\n   * @defaultValue `false`\n   */\n  isNumber?: boolean;\n\n  /**\n   * The default value to use for the `TextField` or `TextArea` one initial\n   * render. If you want to manually change the value to something else after\n   * the initial render, either change the `key` for the component containing\n   * this hook, or use the `setState` function returned from this hook.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<string>;\n\n  /**\n   * An optional help text to display in the `FormMessage` component when there\n   * is not an error.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * A function used to determine if the `TextField` or `TextArea` is an in\n   * errored state.\n   *\n   * @see {@link defaultIsErrored}\n   * @defaultValue `defaultIsErrored`\n   */\n  isErrored?: IsErrored;\n\n  /**\n   * An optional error icon used in the {@link getErrorIcon} option.\n   *\n   * @defaultValue `getIcon(\"error\")`\n   */\n  errorIcon?: ReactNode;\n\n  /**\n   * A function used to get the error icon to display at the right of the\n   * `TextField` or `TextArea`. The default behavior will only show an icon when\n   * the `error` state is `true` and an `errorIcon` option has been provided.\n   *\n   * @see {@link defaultGetErrorIcon}\n   * @defaultValue `defaultGetErrorIcon`\n   */\n  getErrorIcon?: GetErrorIcon;\n\n  /**\n   * A function to get and display an error message based on the `TextField` or\n   * `TextArea` validity.\n   *\n   * @see {@link defaultGetErrorMessage}\n   * @defaultValue `defaultGetErrorMessage`\n   */\n  getErrorMessage?: GetErrorMessage;\n\n  /**\n   * An optional function that will be called whenever the `error` state is\n   * changed. This can be used for more complex forms to `disable` the Submit\n   * button or anything else if any field has an error.\n   *\n   * @defaultValue `() => {}`\n   */\n  onErrorChange?: ErrorChangeHandler<E>;\n\n  /**\n   * Set this to `true` to prevent the `errorMessage` from being\n   * rendered inline below the `TextField`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Only disables the `errorMessage` behavior so\n   * that counters and help text can still be rendered easily.\n   */\n  disableMessage?: boolean;\n\n  /**\n   * Boolean if the `maxLength` prop should not be passed to the `TextField`\n   * component since it will prevent any additional characters from being\n   * entered in the text field which might feel like weird behavior to some\n   * users. This should really only be used when the `counter` option is also\n   * enabled and rendering along with a `FormMessage` component.\n   *\n   * @defaultValue `false`\n   */\n  disableMaxLength?: boolean;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  validationType?: TextFieldValidationType;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E>;\n  reset: () => void;\n  setState: UseStateSetter<Readonly<TextFieldHookState>>;\n  fieldProps: ProvidedTextFieldProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldWithMessageImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;\n}\n\n/**\n * If you do not want to display the error messages below the `TextField` and\n * handle error messages separately, set the `disableMessage` option to `true`.\n *\n * @example No Inline Error Messages\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     disableMessage: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * Look at the other {@link useTextField} override for additional examples.\n *\n * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E> & { disableMessage: true }\n): TextFieldImplementation<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Inline Counter\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     // this allows the user to type beyond the max length limit and display\n *     // an error message. omit or set to `false` to enforce the max length instead\n *     disableMaxLength: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-z]+$\",\n *     minLength: 4,\n *     maxLength: 20,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Custom Validation\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     getErrorMessage(options) {\n *       const {\n *         value,\n *         pattern,\n *         required,\n *         minLength,\n *         maxLength,\n *         validity,\n *         validationMessage,\n *         isNumber,\n *         isBlurEvent,\n *         validationType,\n *       } = options;\n *\n *       if (validity.tooLong) {\n *         return `No more than ${maxLength} characters.`;\n *       }\n *\n *       if (validity.tooShort) {\n *         return `No more than ${minLength} characters.`;\n *       }\n *\n *       if (validity.valueMissing) {\n *         return \"This value is required!\";\n *       }\n *\n *       if (value === \"bad value\") {\n *         return \"Value cannot be bad value\";\n *       }\n *\n *       return defaultGetErrorMessage(options);\n *     }\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @since 2.5.6\n * @since 6.0.0 This hook returns an object instead of an ordered list. Also\n * added the ability to display an inline counter and help text while disabling\n * the error messaging.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): TextFieldWithMessageImplementation<E>;\n/**\n * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}\n * @since 6.0.0\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    defaultValue = \"\",\n    isNumber = false,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    onBlur = noop,\n    onChange = noop,\n    onInvalid = noop,\n    counter = false,\n    helpText,\n    validationType = \"recommended\",\n    disableMessage = false,\n    disableMaxLength = false,\n    errorIcon: propErrorIcon,\n    isErrored = defaultIsErrored,\n    onErrorChange = noop,\n    getErrorIcon = defaultGetErrorIcon,\n    getErrorMessage = defaultGetErrorMessage,\n  } = options;\n\n  const id = useEnsuredId(propId, \"text-field\");\n  const messageId = `${id}-message`;\n  const [fieldRef, ref] = useEnsuredRef(propRef);\n  const [state, setState] = useState<TextFieldHookState>(() => {\n    const value =\n      typeof defaultValue === \"function\" ? defaultValue() : defaultValue;\n\n    return {\n      value,\n      error: false,\n      errorMessage: \"\",\n    };\n  });\n  const { value, error, errorMessage } = state;\n\n  // using a `ref` instead of a `useCallback` makes it so the `defaultValue`\n  // will always be used once reset.\n  const reset = useRef(() => {\n    fieldRef.current?.setCustomValidity(\"\");\n    setState({ value, error: false, errorMessage: \"\" });\n  }).current;\n\n  const errored = useRef(error);\n  const checkValidity = useCallback(\n    (isBlurEvent: boolean) => {\n      const field = fieldRef.current;\n      if (!field) {\n        throw new Error(\"Unable to check validity due to missing ref\");\n      }\n\n      // need to temporarily set the `maxLength` back so it can be \"verified\"\n      // through the validity api\n      /* istanbul ignore next */\n      if (isBlurEvent && disableMaxLength && typeof maxLength === \"number\") {\n        field.maxLength = maxLength;\n      }\n\n      const { value } = field;\n      field.setCustomValidity(\"\");\n      field.checkValidity();\n\n      // remove the temporarily set `maxLength` attribute after checking the\n      // validity\n      /* istanbul ignore next */\n      if (disableMaxLength && typeof maxLength === \"number\") {\n        field.removeAttribute(\"maxLength\");\n      }\n\n      const options: ErrorMessageOptions = {\n        value,\n        pattern,\n        required,\n        minLength,\n        maxLength,\n        isBlurEvent,\n        isNumber,\n        validationType,\n        validity: field.validity,\n        validationMessage: field.validationMessage,\n      };\n      const errorMessage = getErrorMessage(options);\n      const error = isErrored({ ...options, errorMessage });\n\n      if (errored.current !== error) {\n        errored.current = error;\n        onErrorChange({\n          ref: fieldRef,\n          name,\n          error,\n          errorMessage,\n        });\n      }\n\n      /* istanbul ignore next */\n      if (errorMessage !== field.validationMessage) {\n        field.setCustomValidity(errorMessage);\n      }\n\n      setState((prevState) => {\n        if (\n          prevState.value === value &&\n          prevState.error === error &&\n          prevState.errorMessage === errorMessage\n        ) {\n          return prevState;\n        }\n\n        return {\n          value,\n          error,\n          errorMessage,\n        };\n      });\n    },\n    [\n      disableMaxLength,\n      fieldRef,\n      getErrorMessage,\n      isErrored,\n      isNumber,\n      maxLength,\n      minLength,\n      name,\n      onErrorChange,\n      pattern,\n      required,\n      validationType,\n    ]\n  );\n\n  const errorIcon = getIcon(\"error\", propErrorIcon);\n  const fieldProps: ProvidedTextFieldProps<E> & {\n    messageProps?: ProvidedFormMessageProps;\n  } = {\n    id,\n    ref,\n    name,\n    value,\n    error,\n    required,\n    pattern,\n    minLength,\n    maxLength: disableMaxLength ? undefined : maxLength,\n    rightAddon: getErrorIcon({\n      error,\n      errorIcon,\n      errorMessage,\n    }),\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        const { value } = event.currentTarget;\n        setState((prevState) => ({\n          ...prevState,\n          value,\n        }));\n        return;\n      }\n\n      checkValidity(false);\n    },\n    onInvalid(event) {\n      onInvalid(event);\n      if (\n        event.isPropagationStopped() ||\n        event.currentTarget === document.activeElement\n      ) {\n        return;\n      }\n\n      // this makes it so that if a submit button is clicked in a form, all\n      // textfields will gain the error state immediately\n      // also need to extract the validationMessage immediately because of the\n      // SyntheticEvent behavior in React. By the time the `setState` is called,\n      // the event might've been deleted\n      const { validationMessage } = event.currentTarget;\n\n      setState((prevState) => {\n        if (prevState.error) {\n          return prevState;\n        }\n\n        return {\n          ...prevState,\n          error: true,\n          errorMessage: validationMessage,\n        };\n      });\n    },\n  };\n\n  const isCounter = counter && typeof maxLength === \"number\";\n  if (isCounter || helpText || !disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength: (counter && maxLength) || undefined,\n      children: (!disableMessage && errorMessage) || helpText,\n    };\n  }\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","validationType","disableMessage","disableMaxLength","errorIcon","propErrorIcon","isErrored","onErrorChange","getErrorIcon","getErrorMessage","messageId","fieldRef","state","setState","value","error","errorMessage","reset","current","setCustomValidity","errored","checkValidity","isBlurEvent","field","Error","removeAttribute","validity","validationMessage","prevState","fieldProps","undefined","rightAddon","event","isPropagationStopped","currentTarget","document","activeElement","isCounter","messageProps","length","children"],"mappings":"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"}

package/dist/form/validation.d.ts

@@ -31,6 +31,7 @@ export type TextFieldValidationOptions = Pick<InputHTMLAttributes<HTMLInputEleme
 export type TextFieldValidationType = "blur" | "change" | "recommended" | keyof ValidityState | readonly (keyof ValidityState)[];
 /**
  * @since 2.5.0
+ * @since 6.0.0 Renamed `validateOnChange` to `validationType`
  */
 export interface ErrorMessageOptions extends TextFieldValidationOptions {
     /**

package/dist/form/validation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/validation.ts"],"sourcesContent":["import { type InputHTMLAttributes, type ReactNode } from \"react\";\n\n/**\n * @since 2.5.6\n * @since 6.0.0 Renamed from `TextConstraints` to\n * `TextFieldValidationOptions`\n */\nexport type TextFieldValidationOptions = Pick<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"minLength\" | \"maxLength\" | \"required\" | \"pattern\"\n>;\n\n/**\n * Since the default validation messages can be verbose, this type is used to\n * configure when/how to display the native browser messages when the validation\n * state changes during the `change` event phase. The validation message will\n * always be shown on blur.\n *\n * When this is:\n *\n * - `true` -&gt; always show the browser message when it exists\n * - `false` -&gt; never show the browser message\n * - `\"recommended\"` -&gt; only shows the browser message if it is one of the\n *   `RECOMMENDED_STATE_KEYS`/`RECOMMENDED_NUMBER_STATE_KEYS` validation errors\n * - `keyof ValidityState` -&gt; only shows the browser message if it is not the\n *   specific validation error\n * - `(keyof ValidityState)[]` -&gt; only shows the browser message if it is not\n *   the specific validation errors\n *\n * @see {@link RECOMMENDED_STATE_KEYS}\n * @see {@link RECOMMENDED_NUMBER_STATE_KEYS}\n * @since 2.5.6\n * @since 6.0.0 Renamed from `ChangeValidationBehavior` to\n * `TextFieldValidationType`\n */\nexport type TextFieldValidationType =\n  | \"blur\"\n  | \"change\"\n  | \"recommended\"\n  | keyof ValidityState\n  | readonly (keyof ValidityState)[];\n\n/**\n * @since 2.5.0\n */\nexport interface ErrorMessageOptions extends TextFieldValidationOptions {\n  /**\n   * The current input or textarea's validity state.\n   */\n  validity: ValidityState;\n\n  /**\n   * The browser defined validation message based on the validity state. This\n   * will be the empty string when there are no errors.\n   */\n  validationMessage: string;\n\n  /**\n   * The current `TextField` or `TextArea` value.\n   */\n  value: string;\n\n  /**\n   * This will only be `true` if called by the `useNumberField` hook.\n   */\n  isNumber: boolean;\n\n  /**\n   * Boolean if this is triggered from a blur event instead of a change event.\n   */\n  isBlurEvent: boolean;\n\n  /**\n   * The validation type defined by the `useTextField` hook.\n   */\n  validationType: TextFieldValidationType;\n}\n\n/**\n * A function to get a custom error message for specific errors. This is really\n * useful when using the `pattern` attribute to give additional information or\n * changing the native \"language translated\" error message.\n *\n * @param options - An object containing metadata that can be used to create an\n * error message for your `TextField` or `TextArea`.\n * @returns An error message to display or an empty string.\n * @since 2.5.0\n */\nexport type GetErrorMessage = (options: ErrorMessageOptions) => string;\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Added `\"valid\"` since it exists in the type definition\n */\nconst VALIDITY_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  \"badInput\",\n  \"customError\",\n  \"patternMismatch\",\n  \"rangeOverflow\",\n  \"rangeUnderflow\",\n  \"stepMismatch\",\n  \"tooLong\",\n  \"tooShort\",\n  \"typeMismatch\",\n  \"valid\",\n  \"valueMissing\",\n];\n\n/**\n * @internal\n * @since 2.5.0\n */\nexport const RECOMMENDED_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  \"badInput\",\n  \"tooLong\",\n  \"valueMissing\",\n];\n\n/**\n * @internal\n * @since 2.5.0\n */\nexport const RECOMMENDED_NUMBER_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  ...RECOMMENDED_STATE_KEYS,\n  \"rangeOverflow\",\n  \"rangeUnderflow\",\n  \"tooShort\",\n  \"typeMismatch\",\n];\n\n/**\n * The validation message is actually kind of weird since it's possible for a\n * form element to have multiple errors at once. The validation message will be\n * the first error that appears, so need to make sure that the first error is\n * one of the recommended state keys so the message appears for only those types\n * of errors.\n *\n * @internal\n * @since 2.5.0\n */\nconst isRecommended = (validity: ValidityState, isNumber: boolean): boolean => {\n  const errorable = isNumber\n    ? RECOMMENDED_NUMBER_STATE_KEYS\n    : RECOMMENDED_STATE_KEYS;\n\n  return VALIDITY_STATE_KEYS.every((key) => {\n    const errored = validity[key];\n    return !errored || errorable.includes(key);\n  });\n};\n\n/**\n * The default implementation for getting an error message for the `TextField`\n * or `TextArea` components that relies on the behavior of the\n * {@link ChangeValidationBehavior}\n *\n * @since 2.5.0\n */\nexport const defaultGetErrorMessage: GetErrorMessage = (options) => {\n  const {\n    isNumber,\n    isBlurEvent,\n    validity,\n    validationMessage,\n    validationType: validate,\n  } = options;\n\n  if (isBlurEvent || !validationMessage || validate === \"change\") {\n    return validationMessage;\n  }\n\n  if (validate === \"blur\") {\n    return \"\";\n  }\n\n  if (validate === \"recommended\") {\n    return isRecommended(validity, isNumber) ? validationMessage : \"\";\n  }\n\n  const keys = typeof validate === \"string\" ? [validate] : validate;\n\n  return keys.length &&\n    VALIDITY_STATE_KEYS.some((key) => validity[key] && keys.includes(key))\n    ? validationMessage\n    : \"\";\n};\n\n/**\n * @since 2.5.0\n */\nexport interface IsErroredOptions extends ErrorMessageOptions {\n  /**\n   * The current error message or an empty string.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that is used to determine if a `TextField` or `TextArea` is in an\n * errored state.\n *\n * @param options - All the current options that can be used to determine the\n * error state.\n * @returns True if the component is considered to be in an errored state.\n * @since 2.5.0\n */\nexport type IsErrored = (options: IsErroredOptions) => boolean;\n\n/**\n * The default implementation for checking if a `TextField` or `TextArea` is\n * errored by returning `true` if the `errorMessage` string is truthy or the\n * value is not within the `minLength` and `maxLength` constraints when they\n * exist.\n *\n * @since 2.5.0\n */\nexport const defaultIsErrored: IsErrored = (options) => {\n  const { value, errorMessage, minLength, maxLength, isBlurEvent } = options;\n\n  return (\n    !!errorMessage ||\n    (typeof maxLength === \"number\" && value.length > maxLength) ||\n    (isBlurEvent && typeof minLength === \"number\" && value.length < minLength)\n  );\n};\n\n/**\n * @since 6.0.0\n */\nexport interface GetErrorIconOptions {\n  /**\n   * This will be `true` if the `TextField` or `TextArea` is in an errored state.\n   */\n  error: boolean;\n\n  /**\n   * The current error icon that was provided.\n   */\n  errorIcon: ReactNode;\n\n  /**\n   * The current error message or an empty string.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that can be used to dynamically get an error icon based on the\n * current visible error.\n *\n * @param options - The {@link GetErrorIconOptions}\n * @returns An icon to render or falsey to render nothing.\n * @since 2.5.0\n * @since 6.0.0 Updated to accept a single object argument\n */\nexport type GetErrorIcon = (options: GetErrorIconOptions) => ReactNode;\n\n/**\n * The default implementation for showing an error icon in `TextField` and\n * `TextArea` components that will only display when the error flag is enabled.\n *\n * @since 2.5.0\n */\nexport const defaultGetErrorIcon: GetErrorIcon = (options) => {\n  const { error, errorIcon } = options;\n\n  return error && errorIcon;\n};\n"],"names":["VALIDITY_STATE_KEYS","RECOMMENDED_STATE_KEYS","RECOMMENDED_NUMBER_STATE_KEYS","isRecommended","validity","isNumber","errorable","every","key","errored","includes","defaultGetErrorMessage","options","isBlurEvent","validationMessage","validationType","validate","keys","length","some","defaultIsErrored","value","errorMessage","minLength","maxLength","defaultGetErrorIcon","error","errorIcon"],"mappings":"AA0FA;;;;CAIC,GACD,MAAMA,sBAAwD;IAC5D;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED;;;CAGC,GACD,OAAO,MAAMC,yBAA2D;IACtE;IACA;IACA;CACD,CAAC;AAEF;;;CAGC,GACD,OAAO,MAAMC,gCAAkE;OAC1ED;IACH;IACA;IACA;IACA;CACD,CAAC;AAEF;;;;;;;;;CASC,GACD,MAAME,gBAAgB,CAACC,UAAyBC;IAC9C,MAAMC,YAAYD,WACdH,gCACAD;IAEJ,OAAOD,oBAAoBO,KAAK,CAAC,CAACC;QAChC,MAAMC,UAAUL,QAAQ,CAACI,IAAI;QAC7B,OAAO,CAACC,WAAWH,UAAUI,QAAQ,CAACF;IACxC;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMG,yBAA0C,CAACC;IACtD,MAAM,EACJP,QAAQ,EACRQ,WAAW,EACXT,QAAQ,EACRU,iBAAiB,EACjBC,gBAAgBC,QAAQ,EACzB,GAAGJ;IAEJ,IAAIC,eAAe,CAACC,qBAAqBE,aAAa,UAAU;QAC9D,OAAOF;IACT;IAEA,IAAIE,aAAa,QAAQ;QACvB,OAAO;IACT;IAEA,IAAIA,aAAa,eAAe;QAC9B,OAAOb,cAAcC,UAAUC,YAAYS,oBAAoB;IACjE;IAEA,MAAMG,OAAO,OAAOD,aAAa,WAAW;QAACA;KAAS,GAAGA;IAEzD,OAAOC,KAAKC,MAAM,IAChBlB,oBAAoBmB,IAAI,CAAC,CAACX,MAAQJ,QAAQ,CAACI,IAAI,IAAIS,KAAKP,QAAQ,CAACF,QAC/DM,oBACA;AACN,EAAE;AAuBF;;;;;;;CAOC,GACD,OAAO,MAAMM,mBAA8B,CAACR;IAC1C,MAAM,EAAES,KAAK,EAAEC,YAAY,EAAEC,SAAS,EAAEC,SAAS,EAAEX,WAAW,EAAE,GAAGD;IAEnE,OACE,CAAC,CAACU,gBACD,OAAOE,cAAc,YAAYH,MAAMH,MAAM,GAAGM,aAChDX,eAAe,OAAOU,cAAc,YAAYF,MAAMH,MAAM,GAAGK;AAEpE,EAAE;AAiCF;;;;;CAKC,GACD,OAAO,MAAME,sBAAoC,CAACb;IAChD,MAAM,EAAEc,KAAK,EAAEC,SAAS,EAAE,GAAGf;IAE7B,OAAOc,SAASC;AAClB,EAAE"}
+{"version":3,"sources":["../../src/form/validation.ts"],"sourcesContent":["import { type InputHTMLAttributes, type ReactNode } from \"react\";\n\n/**\n * @since 2.5.6\n * @since 6.0.0 Renamed from `TextConstraints` to\n * `TextFieldValidationOptions`\n */\nexport type TextFieldValidationOptions = Pick<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"minLength\" | \"maxLength\" | \"required\" | \"pattern\"\n>;\n\n/**\n * Since the default validation messages can be verbose, this type is used to\n * configure when/how to display the native browser messages when the validation\n * state changes during the `change` event phase. The validation message will\n * always be shown on blur.\n *\n * When this is:\n *\n * - `true` -&gt; always show the browser message when it exists\n * - `false` -&gt; never show the browser message\n * - `\"recommended\"` -&gt; only shows the browser message if it is one of the\n *   `RECOMMENDED_STATE_KEYS`/`RECOMMENDED_NUMBER_STATE_KEYS` validation errors\n * - `keyof ValidityState` -&gt; only shows the browser message if it is not the\n *   specific validation error\n * - `(keyof ValidityState)[]` -&gt; only shows the browser message if it is not\n *   the specific validation errors\n *\n * @see {@link RECOMMENDED_STATE_KEYS}\n * @see {@link RECOMMENDED_NUMBER_STATE_KEYS}\n * @since 2.5.6\n * @since 6.0.0 Renamed from `ChangeValidationBehavior` to\n * `TextFieldValidationType`\n */\nexport type TextFieldValidationType =\n  | \"blur\"\n  | \"change\"\n  | \"recommended\"\n  | keyof ValidityState\n  | readonly (keyof ValidityState)[];\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Renamed `validateOnChange` to `validationType`\n */\nexport interface ErrorMessageOptions extends TextFieldValidationOptions {\n  /**\n   * The current input or textarea's validity state.\n   */\n  validity: ValidityState;\n\n  /**\n   * The browser defined validation message based on the validity state. This\n   * will be the empty string when there are no errors.\n   */\n  validationMessage: string;\n\n  /**\n   * The current `TextField` or `TextArea` value.\n   */\n  value: string;\n\n  /**\n   * This will only be `true` if called by the `useNumberField` hook.\n   */\n  isNumber: boolean;\n\n  /**\n   * Boolean if this is triggered from a blur event instead of a change event.\n   */\n  isBlurEvent: boolean;\n\n  /**\n   * The validation type defined by the `useTextField` hook.\n   */\n  validationType: TextFieldValidationType;\n}\n\n/**\n * A function to get a custom error message for specific errors. This is really\n * useful when using the `pattern` attribute to give additional information or\n * changing the native \"language translated\" error message.\n *\n * @param options - An object containing metadata that can be used to create an\n * error message for your `TextField` or `TextArea`.\n * @returns An error message to display or an empty string.\n * @since 2.5.0\n */\nexport type GetErrorMessage = (options: ErrorMessageOptions) => string;\n\n/**\n * @internal\n * @since 2.5.0\n * @since 6.0.0 Added `\"valid\"` since it exists in the type definition\n */\nconst VALIDITY_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  \"badInput\",\n  \"customError\",\n  \"patternMismatch\",\n  \"rangeOverflow\",\n  \"rangeUnderflow\",\n  \"stepMismatch\",\n  \"tooLong\",\n  \"tooShort\",\n  \"typeMismatch\",\n  \"valid\",\n  \"valueMissing\",\n];\n\n/**\n * @internal\n * @since 2.5.0\n */\nexport const RECOMMENDED_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  \"badInput\",\n  \"tooLong\",\n  \"valueMissing\",\n];\n\n/**\n * @internal\n * @since 2.5.0\n */\nexport const RECOMMENDED_NUMBER_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  ...RECOMMENDED_STATE_KEYS,\n  \"rangeOverflow\",\n  \"rangeUnderflow\",\n  \"tooShort\",\n  \"typeMismatch\",\n];\n\n/**\n * The validation message is actually kind of weird since it's possible for a\n * form element to have multiple errors at once. The validation message will be\n * the first error that appears, so need to make sure that the first error is\n * one of the recommended state keys so the message appears for only those types\n * of errors.\n *\n * @internal\n * @since 2.5.0\n */\nconst isRecommended = (validity: ValidityState, isNumber: boolean): boolean => {\n  const errorable = isNumber\n    ? RECOMMENDED_NUMBER_STATE_KEYS\n    : RECOMMENDED_STATE_KEYS;\n\n  return VALIDITY_STATE_KEYS.every((key) => {\n    const errored = validity[key];\n    return !errored || errorable.includes(key);\n  });\n};\n\n/**\n * The default implementation for getting an error message for the `TextField`\n * or `TextArea` components that relies on the behavior of the\n * {@link ChangeValidationBehavior}\n *\n * @since 2.5.0\n */\nexport const defaultGetErrorMessage: GetErrorMessage = (options) => {\n  const {\n    isNumber,\n    isBlurEvent,\n    validity,\n    validationMessage,\n    validationType: validate,\n  } = options;\n\n  if (isBlurEvent || !validationMessage || validate === \"change\") {\n    return validationMessage;\n  }\n\n  if (validate === \"blur\") {\n    return \"\";\n  }\n\n  if (validate === \"recommended\") {\n    return isRecommended(validity, isNumber) ? validationMessage : \"\";\n  }\n\n  const keys = typeof validate === \"string\" ? [validate] : validate;\n\n  return keys.length &&\n    VALIDITY_STATE_KEYS.some((key) => validity[key] && keys.includes(key))\n    ? validationMessage\n    : \"\";\n};\n\n/**\n * @since 2.5.0\n */\nexport interface IsErroredOptions extends ErrorMessageOptions {\n  /**\n   * The current error message or an empty string.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that is used to determine if a `TextField` or `TextArea` is in an\n * errored state.\n *\n * @param options - All the current options that can be used to determine the\n * error state.\n * @returns True if the component is considered to be in an errored state.\n * @since 2.5.0\n */\nexport type IsErrored = (options: IsErroredOptions) => boolean;\n\n/**\n * The default implementation for checking if a `TextField` or `TextArea` is\n * errored by returning `true` if the `errorMessage` string is truthy or the\n * value is not within the `minLength` and `maxLength` constraints when they\n * exist.\n *\n * @since 2.5.0\n */\nexport const defaultIsErrored: IsErrored = (options) => {\n  const { value, errorMessage, minLength, maxLength, isBlurEvent } = options;\n\n  return (\n    !!errorMessage ||\n    (typeof maxLength === \"number\" && value.length > maxLength) ||\n    (isBlurEvent && typeof minLength === \"number\" && value.length < minLength)\n  );\n};\n\n/**\n * @since 6.0.0\n */\nexport interface GetErrorIconOptions {\n  /**\n   * This will be `true` if the `TextField` or `TextArea` is in an errored state.\n   */\n  error: boolean;\n\n  /**\n   * The current error icon that was provided.\n   */\n  errorIcon: ReactNode;\n\n  /**\n   * The current error message or an empty string.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that can be used to dynamically get an error icon based on the\n * current visible error.\n *\n * @param options - The {@link GetErrorIconOptions}\n * @returns An icon to render or falsey to render nothing.\n * @since 2.5.0\n * @since 6.0.0 Updated to accept a single object argument\n */\nexport type GetErrorIcon = (options: GetErrorIconOptions) => ReactNode;\n\n/**\n * The default implementation for showing an error icon in `TextField` and\n * `TextArea` components that will only display when the error flag is enabled.\n *\n * @since 2.5.0\n */\nexport const defaultGetErrorIcon: GetErrorIcon = (options) => {\n  const { error, errorIcon } = options;\n\n  return error && errorIcon;\n};\n"],"names":["VALIDITY_STATE_KEYS","RECOMMENDED_STATE_KEYS","RECOMMENDED_NUMBER_STATE_KEYS","isRecommended","validity","isNumber","errorable","every","key","errored","includes","defaultGetErrorMessage","options","isBlurEvent","validationMessage","validationType","validate","keys","length","some","defaultIsErrored","value","errorMessage","minLength","maxLength","defaultGetErrorIcon","error","errorIcon"],"mappings":"AA2FA;;;;CAIC,GACD,MAAMA,sBAAwD;IAC5D;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED;;;CAGC,GACD,OAAO,MAAMC,yBAA2D;IACtE;IACA;IACA;CACD,CAAC;AAEF;;;CAGC,GACD,OAAO,MAAMC,gCAAkE;OAC1ED;IACH;IACA;IACA;IACA;CACD,CAAC;AAEF;;;;;;;;;CASC,GACD,MAAME,gBAAgB,CAACC,UAAyBC;IAC9C,MAAMC,YAAYD,WACdH,gCACAD;IAEJ,OAAOD,oBAAoBO,KAAK,CAAC,CAACC;QAChC,MAAMC,UAAUL,QAAQ,CAACI,IAAI;QAC7B,OAAO,CAACC,WAAWH,UAAUI,QAAQ,CAACF;IACxC;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMG,yBAA0C,CAACC;IACtD,MAAM,EACJP,QAAQ,EACRQ,WAAW,EACXT,QAAQ,EACRU,iBAAiB,EACjBC,gBAAgBC,QAAQ,EACzB,GAAGJ;IAEJ,IAAIC,eAAe,CAACC,qBAAqBE,aAAa,UAAU;QAC9D,OAAOF;IACT;IAEA,IAAIE,aAAa,QAAQ;QACvB,OAAO;IACT;IAEA,IAAIA,aAAa,eAAe;QAC9B,OAAOb,cAAcC,UAAUC,YAAYS,oBAAoB;IACjE;IAEA,MAAMG,OAAO,OAAOD,aAAa,WAAW;QAACA;KAAS,GAAGA;IAEzD,OAAOC,KAAKC,MAAM,IAChBlB,oBAAoBmB,IAAI,CAAC,CAACX,MAAQJ,QAAQ,CAACI,IAAI,IAAIS,KAAKP,QAAQ,CAACF,QAC/DM,oBACA;AACN,EAAE;AAuBF;;;;;;;CAOC,GACD,OAAO,MAAMM,mBAA8B,CAACR;IAC1C,MAAM,EAAES,KAAK,EAAEC,YAAY,EAAEC,SAAS,EAAEC,SAAS,EAAEX,WAAW,EAAE,GAAGD;IAEnE,OACE,CAAC,CAACU,gBACD,OAAOE,cAAc,YAAYH,MAAMH,MAAM,GAAGM,aAChDX,eAAe,OAAOU,cAAc,YAAYF,MAAMH,MAAM,GAAGK;AAEpE,EAAE;AAiCF;;;;;CAKC,GACD,OAAO,MAAME,sBAAoC,CAACb;IAChD,MAAM,EAAEc,KAAK,EAAEC,SAAS,EAAE,GAAGf;IAE7B,OAAOc,SAASC;AAClB,EAAE"}

package/dist/icon/FontIcon.d.ts

@@ -22,6 +22,7 @@ export interface FontIconProps extends HTMLAttributes<HTMLSpanElement>, FontIcon
  * The default is to use the `material-icons` library, but others can be used as
  * well.
  *
+ * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
  * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
  */

package/dist/icon/FontIcon.js

@@ -6,6 +6,7 @@ import { icon } from "./styles.js";
  * The default is to use the `material-icons` library, but others can be used as
  * well.
  *
+ * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
  * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
  */ export const FontIcon = /*#__PURE__*/ forwardRef(function FontIcon(props, ref) {

package/dist/icon/FontIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type FontIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the\n * `inline` and `theme` props.\n */\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    FontIconClassNameOptions {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons. For example:\n   *\n   * ```tsx\n   * <FontIcon>clear</FontIcon>\n   * ```\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * @since 6.0.0 Switched from `<i>` to `<span>` element and removed\n * the `forceSize`/`forceFontSize` props.\n */\nexport const FontIcon = forwardRef<HTMLElement, FontIconProps>(\n  function FontIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      iconClassName = \"material-icons\",\n      dense = false,\n      theme,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"font\",\n          dense,\n          theme,\n          className,\n          iconClassName,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","icon","FontIcon","props","ref","ariaHidden","iconClassName","dense","theme","className","children","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAwCC,IAAI,QAAQ,cAAc;AAuBlE;;;;;;;CAOC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,gBAAgB,gBAAgB,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbE,eAAaR;QACbD,KAAKA;QACLK,WAAWR,KAAK;YACda,MAAM;YACNP;YACAC;YACAC;YACAH;QACF;kBAECI;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type FontIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the\n * `inline` and `theme` props.\n */\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    FontIconClassNameOptions {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons. For example:\n   *\n   * ```tsx\n   * <FontIcon>clear</FontIcon>\n   * ```\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * @see {@link https://next.react-md.dev/components/icon | Icon Demos}\n * @since 6.0.0 Switched from `<i>` to `<span>` element and removed\n * the `forceSize`/`forceFontSize` props.\n */\nexport const FontIcon = forwardRef<HTMLElement, FontIconProps>(\n  function FontIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      iconClassName = \"material-icons\",\n      dense = false,\n      theme,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"font\",\n          dense,\n          theme,\n          className,\n          iconClassName,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","icon","FontIcon","props","ref","ariaHidden","iconClassName","dense","theme","className","children","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAwCC,IAAI,QAAQ,cAAc;AAuBlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,gBAAgB,gBAAgB,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbE,eAAaR;QACbD,KAAKA;QACLK,WAAWR,KAAK;YACda,MAAM;YACNP;YACAC;YACAC;YACAH;QACF;kBAECI;;AAGP,GACA"}

package/dist/icon/IconRotator.d.ts

@@ -29,5 +29,7 @@ export interface IconRotatorProps extends IconRotatorBaseProps {
 /**
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
+ *
+ * @see {@link https://next.react-md.dev/components/icon-rotator | IconRotator Demos}
  */
 export declare const IconRotator: import("react").ForwardRefExoticComponent<IconRotatorProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/icon/IconRotator.js

@@ -5,6 +5,8 @@ import { iconRotator } from "./styles.js";
 /**
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
+ *
+ * @see {@link https://next.react-md.dev/components/icon-rotator | IconRotator Demos}
  */ export const IconRotator = /*#__PURE__*/ forwardRef(function IconRotator(props, ref) {
     const { className: propClassName, rotated, children, forceIconWrap = false, disableTransition = false, ...remaining } = props;
     const className = iconRotator({