@react-md/core 6.0.1 → 6.1.0

package/dist/form/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { ResizingTextAreaWrapper } from \"./ResizingTextAreaWrapper.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textArea, textAreaContainer } from \"./textAreaStyles.js\";\nimport { type FormFieldOptions } from \"./types.js\";\nimport {\n  type TextAreaResize,\n  useResizingTextArea,\n} from \"./useResizingTextArea.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-area-height\"?: string | number;\n    \"--rmd-text-area-padding\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `containerProps`.\n */\nexport interface TextAreaProps\n  extends FormFieldOptions,\n    TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** @defaultValue `\"text-area-\" + useId()` */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Set this to `true` if the auto resizing textarea should not animate for new\n   * height changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * An optional style to apply to the textarea element. The base `style` prop\n   * is applied to the surrounding `div` instead.\n   */\n  areaStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the textarea element. The base `style`\n   * prop is applied to the surrounding `div` instead.\n   */\n  areaClassName?: string;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n   * @defaultValue `2`\n   */\n  rows?: number;\n\n  /**\n   * The maximum number of rows a textarea can expand to before showing a\n   * scrollbar. When this is set to `-1`, there will be no limit.\n   *\n   * @defaultValue `-1`\n   */\n  maxRows?: number;\n\n  /**\n   * @see {@link TextAreaResize}\n   * @defaultValue `\"auto\"`\n   */\n  resize?: TextAreaResize;\n\n  /**\n   * When the {@link resize} prop is set to `\"auto\"`, an additional `<div>` is\n   * added along with a hidden `<textarea>` mask. This prop can be used to add\n   * any additional styling or props to that div.\n   *\n   * This will only be applied when {@link resize} is set to `\"auto\"`.\n   */\n  resizeContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core/form/TextArea\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextArea\n *       label=\"Label\"\n *       placeholder=\"Placeholder\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/text-field#simple-textarea | TextArea Demos}\n */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      areaStyle,\n      areaClassName,\n      resizeContainerProps,\n      resize = \"auto\",\n      dense,\n      error,\n      active,\n      inline: propInline,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      rows = 2,\n      maxRows = -1,\n      onChange: propOnChange,\n      disableTransition: propDisableTransition,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, value, defaultValue } = props;\n    const id = useEnsuredId(propId, \"text-area\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const [areaRef, areaRefCallback] = useEnsuredRef(ref);\n\n    const {\n      maskRef,\n      containerRef,\n      height,\n      onChange,\n      scrollable,\n      disableTransition,\n    } = useResizingTextArea({\n      maxRows,\n      resize,\n      onChange: propOnChange,\n      containerRef: containerProps?.ref,\n      disableTransition: propDisableTransition,\n    });\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    // have to force it inline or else you won't be able to resize\n    // it horizontally.\n    const inline = resize === \"horizontal\" || resize === \"both\" || propInline;\n\n    const area = (\n      <textarea\n        {...remaining}\n        id={id}\n        ref={areaRefCallback}\n        rows={rows}\n        disabled={disabled}\n        onChange={onChange}\n        placeholder={placeholder}\n        style={areaStyle}\n        className={textArea({\n          resize,\n          scrollable,\n          className: areaClassName,\n          placeholderHidden: !!label && !active,\n        })}\n      />\n    );\n\n    const labelNode = label && (\n      <Label\n        {...labelProps}\n        htmlFor={id}\n        style={labelProps?.style ?? labelStyle}\n        className={labelProps?.className ?? labelClassName}\n        floating\n        dense={dense}\n        error={error}\n        active={active}\n        disabled={disabled}\n      >\n        {label}\n      </Label>\n    );\n\n    let children = (\n      <>\n        {area}\n        {labelNode}\n      </>\n    );\n\n    if (resize === \"auto\") {\n      children = (\n        <ResizingTextAreaWrapper\n          {...resizeContainerProps}\n          maskId={`${id}-mask`}\n          maskRef={maskRef}\n          rows={rows}\n          areaStyle={areaStyle}\n          areaClassName={areaClassName}\n          defaultValue={value ?? defaultValue}\n          disableTransition={disableTransition}\n        >\n          {children}\n        </ResizingTextAreaWrapper>\n      );\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-text-area-height\": height,\n          }}\n          className={textAreaContainer({\n            animate: !disableTransition && resize == \"auto\",\n            disabled,\n            height: !!height,\n            underlineLabelled:\n              !!label && (theme === \"underline\" || theme === \"filled\"),\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          rightAddon={rightAddon}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n          onClick={(event) => {\n            // The textarea container adds padding-top when there is a label so\n            // that the label does not cover the text so this makes it so you\n            // can still click anywhere in the \"box\" to focus the textarea.\n            if (!disabled && event.target === event.currentTarget) {\n              areaRef.current?.focus();\n            }\n          }}\n        >\n          {children}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","useEnsuredRef","FormMessageContainer","Label","ResizingTextAreaWrapper","TextFieldContainer","getFormConfig","textArea","textAreaContainer","useResizingTextArea","TextArea","props","ref","id","propId","style","className","label","labelProps","labelStyle","labelClassName","areaStyle","areaClassName","resizeContainerProps","resize","dense","error","active","inline","propInline","leftAddon","rightAddon","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","rows","maxRows","onChange","propOnChange","disableTransition","propDisableTransition","remaining","disabled","readOnly","value","defaultValue","areaRef","areaRefCallback","maskRef","containerRef","height","scrollable","placeholder","area","textarea","placeholderHidden","labelNode","htmlFor","floating","children","maskId","animate","underlineLabelled","onClick","event","target","currentTarget","current","focus"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { ResizingTextAreaWrapper } from \"./ResizingTextAreaWrapper.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textArea, textAreaContainer } from \"./textAreaStyles.js\";\nimport { type FormFieldOptions } from \"./types.js\";\nimport {\n  type TextAreaResize,\n  useResizingTextArea,\n} from \"./useResizingTextArea.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-area-height\"?: string | number;\n    \"--rmd-text-area-padding\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `containerProps`.\n */\nexport interface TextAreaProps\n  extends FormFieldOptions,\n    TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** @defaultValue `\"text-area-\" + useId()` */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Set this to `true` if the auto resizing textarea should not animate for new\n   * height changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * An optional style to apply to the textarea element. The base `style` prop\n   * is applied to the surrounding `div` instead.\n   */\n  areaStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the textarea element. The base `style`\n   * prop is applied to the surrounding `div` instead.\n   */\n  areaClassName?: string;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n   * @defaultValue `2`\n   */\n  rows?: number;\n\n  /**\n   * The maximum number of rows a textarea can expand to before showing a\n   * scrollbar. When this is set to `-1`, there will be no limit.\n   *\n   * @defaultValue `-1`\n   */\n  maxRows?: number;\n\n  /**\n   * @see {@link TextAreaResize}\n   * @defaultValue `\"auto\"`\n   */\n  resize?: TextAreaResize;\n\n  /**\n   * When the {@link resize} prop is set to `\"auto\"`, an additional `<div>` is\n   * added along with a hidden `<textarea>` mask. This prop can be used to add\n   * any additional styling or props to that div.\n   *\n   * This will only be applied when {@link resize} is set to `\"auto\"`.\n   */\n  resizeContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core/form/TextArea\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextArea\n *       label=\"Label\"\n *       placeholder=\"Placeholder\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}\n */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      areaStyle,\n      areaClassName,\n      resizeContainerProps,\n      resize = \"auto\",\n      dense,\n      error,\n      active,\n      inline: propInline,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      rows = 2,\n      maxRows = -1,\n      onChange: propOnChange,\n      disableTransition: propDisableTransition,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, value, defaultValue } = props;\n    const id = useEnsuredId(propId, \"text-area\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const [areaRef, areaRefCallback] = useEnsuredRef(ref);\n\n    const {\n      maskRef,\n      containerRef,\n      height,\n      onChange,\n      scrollable,\n      disableTransition,\n    } = useResizingTextArea({\n      maxRows,\n      resize,\n      onChange: propOnChange,\n      containerRef: containerProps?.ref,\n      disableTransition: propDisableTransition,\n    });\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    // have to force it inline or else you won't be able to resize\n    // it horizontally.\n    const inline = resize === \"horizontal\" || resize === \"both\" || propInline;\n\n    const area = (\n      <textarea\n        {...remaining}\n        id={id}\n        ref={areaRefCallback}\n        rows={rows}\n        disabled={disabled}\n        onChange={onChange}\n        placeholder={placeholder}\n        style={areaStyle}\n        className={textArea({\n          resize,\n          scrollable,\n          className: areaClassName,\n          placeholderHidden: !!label && !active,\n        })}\n      />\n    );\n\n    const labelNode = label && (\n      <Label\n        {...labelProps}\n        htmlFor={id}\n        style={labelProps?.style ?? labelStyle}\n        className={labelProps?.className ?? labelClassName}\n        floating\n        dense={dense}\n        error={error}\n        active={active}\n        disabled={disabled}\n      >\n        {label}\n      </Label>\n    );\n\n    let children = (\n      <>\n        {area}\n        {labelNode}\n      </>\n    );\n\n    if (resize === \"auto\") {\n      children = (\n        <ResizingTextAreaWrapper\n          {...resizeContainerProps}\n          maskId={`${id}-mask`}\n          maskRef={maskRef}\n          rows={rows}\n          areaStyle={areaStyle}\n          areaClassName={areaClassName}\n          defaultValue={value ?? defaultValue}\n          disableTransition={disableTransition}\n        >\n          {children}\n        </ResizingTextAreaWrapper>\n      );\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-text-area-height\": height,\n          }}\n          className={textAreaContainer({\n            animate: !disableTransition && resize === \"auto\",\n            disabled,\n            height: !!height,\n            underlineLabelled:\n              !!label && (theme === \"underline\" || theme === \"filled\"),\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          rightAddon={rightAddon}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n          onClick={(event) => {\n            // The textarea container adds padding-top when there is a label so\n            // that the label does not cover the text so this makes it so you\n            // can still click anywhere in the \"box\" to focus the textarea.\n            if (!disabled && event.target === event.currentTarget) {\n              areaRef.current?.focus();\n            }\n          }}\n        >\n          {children}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","useEnsuredRef","FormMessageContainer","Label","ResizingTextAreaWrapper","TextFieldContainer","getFormConfig","textArea","textAreaContainer","useResizingTextArea","TextArea","props","ref","id","propId","style","className","label","labelProps","labelStyle","labelClassName","areaStyle","areaClassName","resizeContainerProps","resize","dense","error","active","inline","propInline","leftAddon","rightAddon","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","rows","maxRows","onChange","propOnChange","disableTransition","propDisableTransition","remaining","disabled","readOnly","value","defaultValue","areaRef","areaRefCallback","maskRef","containerRef","height","scrollable","placeholder","area","textarea","placeholderHidden","labelNode","htmlFor","floating","children","maskId","animate","underlineLabelled","onClick","event","target","currentTarget","current","focus"],"mappings":"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"}

package/dist/form/TextField.d.ts

@@ -79,6 +79,6 @@ export interface TextFieldProps extends TextFieldInputAttributes, UserAgentAutoc
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/textfield | TextField Demos}
+ * @see {@link https://react-md.dev/components/textfield | TextField Demos}
  */
 export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/form/TextField.js

@@ -33,7 +33,7 @@ import { textField } from "./textFieldStyles.js";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/textfield | TextField Demos}
+ * @see {@link https://react-md.dev/components/textfield | TextField Demos}
  */ export const TextField = /*#__PURE__*/ forwardRef(function TextField(props, ref) {
     const { id: propId, style, className, type = "text", label, labelProps, labelStyle, labelClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense, error, active, inline, leftAddon, leftAddonProps, rightAddon, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, inputStyle, inputClassName, theme, underlineDirection, messageProps, messageContainerProps, containerProps, ...remaining } = props;
     const { disabled, readOnly } = props;

package/dist/form/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * These are all the \"supported\" input types for react-md so that they at least\n * render reasonably well by default. There is no built-in validation or\n * anything adding onto existing browser functionality for these types.\n *\n * @since 2.5.0 - `\"search\"` was added\n * @since 6.0.0 Dropped support for `\"week\"` and `\"month\"` input types since\n * they are not available in Firefox and Safari at this time.\n */\nexport type SupportedInputTypes =\n  | \"text\"\n  | \"password\"\n  | \"number\"\n  | \"tel\"\n  | \"email\"\n  | \"date\"\n  | \"time\"\n  | \"datetime-local\"\n  | \"url\"\n  | \"color\"\n  | \"search\";\n\n/**\n * @since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @since 6.0.0 Removed the `containerRef` prop.\n */\nexport interface TextFieldProps\n  extends TextFieldInputAttributes,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  /**\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Any optional inline styles to set on the input.\n   */\n  inputStyle?: CSSProperties;\n\n  /**\n   * An optional `className` to add to the input.\n   */\n  inputClassName?: string;\n\n  /**\n   * The text field type.\n   *\n   * @defaultValue `\"text\"`\n   */\n  type?: SupportedInputTypes;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * The structure for this component is:\n * @example Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextField\n *       label=\"Name\"\n *       placeholder=\"Bob\"\n *       defaultValue=\"\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/textfield | TextField Demos}\n */\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      type = \"text\",\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense,\n      error,\n      active,\n      inline,\n      leftAddon,\n      leftAddonProps,\n      rightAddon,\n      rightAddonProps,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      inputStyle,\n      inputClassName,\n      theme,\n      underlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      ...remaining\n    } = props;\n    const { disabled, readOnly } = props;\n    const id = useEnsuredId(propId, \"text-field\");\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={\n          messageProps && {\n            error,\n            theme,\n            ...messageProps,\n          }\n        }\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={className}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          <input\n            {...remaining}\n            id={id}\n            ref={ref}\n            type={type}\n            name={name}\n            disabled={disabled}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            style={inputStyle}\n            className={textField({\n              className: inputClassName,\n              placeholderHidden: !!label && !active,\n            })}\n          />\n          {label && (\n            <Label\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","textField","TextField","props","ref","id","propId","style","className","type","label","labelProps","labelStyle","labelClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","underlineDirection","messageProps","messageContainerProps","containerProps","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,SAAS,QAAQ,uBAAuB;AAiFjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,OAAO,MAAM,EACbC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,eAAe,EACfC,sBAAsB,EACtBC,uBAAuB,EACvBC,UAAU,EACVC,cAAc,EACdC,KAAK,EACLC,kBAAkB,EAClBC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACd,GAAGC,WACJ,GAAG/B;IACJ,MAAM,EAAEgC,QAAQ,EAAEC,QAAQ,EAAE,GAAGjC;IAC/B,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAI,EAAE+B,cAAc,EAAE,EAAE,GAAGlC;IAC3B,IAAIO,SAAS,CAAC2B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAACvC;QACE,GAAGkC,qBAAqB;QACzBD,cACEA,gBAAgB;YACdb;YACAW;YACA,GAAGE,YAAY;QACjB;kBAGF,cAAA,MAAC/B;YACE,GAAGiC,cAAc;YAClB1B,OAAOA;YACPC,WAAWA;YACXqB,OAAOA;YACPnB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRiB,UAAUA;YACVD,UAAUA;YACVd,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBM,oBAAoBA;YACpBL,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACY;oBACE,GAAGJ,SAAS;oBACb7B,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNmB,UAAUA;oBACVE,aAAaA;oBACbtB,cAAcA;oBACdR,OAAOoB;oBACPnB,WAAWP,UAAU;wBACnBO,WAAWoB;wBACXW,mBAAmB,CAAC,CAAC7B,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACX;oBACCyC,QAAQ;oBACRvB,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRgB,UAAUA;oBACT,GAAGxB,UAAU;oBACd8B,SAASpC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}
+{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * These are all the \"supported\" input types for react-md so that they at least\n * render reasonably well by default. There is no built-in validation or\n * anything adding onto existing browser functionality for these types.\n *\n * @since 2.5.0 - `\"search\"` was added\n * @since 6.0.0 Dropped support for `\"week\"` and `\"month\"` input types since\n * they are not available in Firefox and Safari at this time.\n */\nexport type SupportedInputTypes =\n  | \"text\"\n  | \"password\"\n  | \"number\"\n  | \"tel\"\n  | \"email\"\n  | \"date\"\n  | \"time\"\n  | \"datetime-local\"\n  | \"url\"\n  | \"color\"\n  | \"search\";\n\n/**\n * @since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @since 6.0.0 Removed the `containerRef` prop.\n */\nexport interface TextFieldProps\n  extends TextFieldInputAttributes,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  /**\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Any optional inline styles to set on the input.\n   */\n  inputStyle?: CSSProperties;\n\n  /**\n   * An optional `className` to add to the input.\n   */\n  inputClassName?: string;\n\n  /**\n   * The text field type.\n   *\n   * @defaultValue `\"text\"`\n   */\n  type?: SupportedInputTypes;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * The structure for this component is:\n * @example Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextField\n *       label=\"Name\"\n *       placeholder=\"Bob\"\n *       defaultValue=\"\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/textfield | TextField Demos}\n */\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      type = \"text\",\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense,\n      error,\n      active,\n      inline,\n      leftAddon,\n      leftAddonProps,\n      rightAddon,\n      rightAddonProps,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      inputStyle,\n      inputClassName,\n      theme,\n      underlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      ...remaining\n    } = props;\n    const { disabled, readOnly } = props;\n    const id = useEnsuredId(propId, \"text-field\");\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={\n          messageProps && {\n            error,\n            theme,\n            ...messageProps,\n          }\n        }\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={className}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          <input\n            {...remaining}\n            id={id}\n            ref={ref}\n            type={type}\n            name={name}\n            disabled={disabled}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            style={inputStyle}\n            className={textField({\n              className: inputClassName,\n              placeholderHidden: !!label && !active,\n            })}\n          />\n          {label && (\n            <Label\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","textField","TextField","props","ref","id","propId","style","className","type","label","labelProps","labelStyle","labelClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","underlineDirection","messageProps","messageContainerProps","containerProps","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,SAAS,QAAQ,uBAAuB;AAiFjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,OAAO,MAAM,EACbC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,eAAe,EACfC,sBAAsB,EACtBC,uBAAuB,EACvBC,UAAU,EACVC,cAAc,EACdC,KAAK,EACLC,kBAAkB,EAClBC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACd,GAAGC,WACJ,GAAG/B;IACJ,MAAM,EAAEgC,QAAQ,EAAEC,QAAQ,EAAE,GAAGjC;IAC/B,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAI,EAAE+B,cAAc,EAAE,EAAE,GAAGlC;IAC3B,IAAIO,SAAS,CAAC2B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAACvC;QACE,GAAGkC,qBAAqB;QACzBD,cACEA,gBAAgB;YACdb;YACAW;YACA,GAAGE,YAAY;QACjB;kBAGF,cAAA,MAAC/B;YACE,GAAGiC,cAAc;YAClB1B,OAAOA;YACPC,WAAWA;YACXqB,OAAOA;YACPnB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRiB,UAAUA;YACVD,UAAUA;YACVd,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBM,oBAAoBA;YACpBL,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACY;oBACE,GAAGJ,SAAS;oBACb7B,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNmB,UAAUA;oBACVE,aAAaA;oBACbtB,cAAcA;oBACdR,OAAOoB;oBACPnB,WAAWP,UAAU;wBACnBO,WAAWoB;wBACXW,mBAAmB,CAAC,CAAC7B,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACX;oBACCyC,QAAQ;oBACRvB,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRgB,UAAUA;oBACT,GAAGxB,UAAU;oBACd8B,SAASpC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}

package/dist/form/_form-message.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../icon/icon";
 @use "../typography/typography";
 @use "base";
@@ -37,16 +38,16 @@ $typography-styles: map.merge(
 /// The `gap` between elements in the `FormMessageCounter` component .
 ///
 /// @type Number
-$counter-spacing: icon.$spacing !default;
+$counter-spacing: spacing.get-var(sm) !default;
 
 /// The  `margin-top` for the `FormMessage` component.
 /// @type Number
-$margin-top: 0.5rem !default;
+$margin-top: spacing.get-var(sm) !default;
 
 /// The `margin-bottom` for the `FormMessage` component.
 ///
 /// @type Number
-$margin-bottom: 1rem !default;
+$margin-bottom: spacing.get-var(md) !default;
 
 /// The `min-height` for the `FormMessage` component.
 /// @type Number

package/dist/form/_input-toggle.scss

@@ -5,6 +5,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
 @use "../theme/theme";
 @use "../icon/icon";
 @use "../interaction/interaction";
@@ -32,7 +33,7 @@ $disable-uncontrolled: false !default;
 
 /// The default border-radius for `Checkbox` and `Radio` components.
 /// @type Number
-$border-radius: 50% !default;
+$border-radius: border-radius.get-var(full) !default;
 
 /// The amount of padding to apply around the `Checkbox` and `Radio` icons
 /// @type Number

package/dist/form/_label.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../icon/icon";
 @use "../transition/transition";
 @use "../typography/typography";
@@ -58,7 +59,7 @@ $disable-stacked-reversed: $disable-everything !default;
 ///
 /// @see $disable-gap
 /// @type Number
-$gap: icon.$spacing !default;
+$gap: spacing.get-var(sm) !default;
 
 /// The default `Label` font size.
 ///
@@ -95,7 +96,7 @@ $floating-scale: 0.75 !default;
 /// the outline and add some general spacing.
 ///
 /// @type Number
-$floating-padding: 0.25rem !default;
+$floating-padding: spacing.get-var(xs) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.

package/dist/form/_password.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../button/button";
 @use "base";
 @use "text-field";
@@ -15,7 +16,7 @@ $disable-everything: text-field.$disable-everything !default;
 /// The `padding-left` to apply to a `Password` when there is a visibility
 /// icon.
 /// @type Number
-$visibility-toggle-spacing: 0.25rem !default;
+$visibility-toggle-spacing: spacing.get-var(xs) !default;
 
 /// Generates all the styles based on feature flags.
 ///

package/dist/form/_select.scss

@@ -60,10 +60,10 @@ $option-selected-styles: (
 /// prop has not been enabled.
 ///
 /// @type Number
-$option-padding-left: list.$item-horizontal-padding - math.div(
-    icon.$size - $option-selected-icon-size,
-    2
-  ) !default;
+$option-padding-left: calc(
+  list.$item-horizontal-padding -
+    #{math.div(icon.$size - $option-selected-icon-size, 2)}
+) !default;
 
 /// The spacing between the selected icon and the `Option` content.
 /// @type Number

package/dist/form/_slider.scss

@@ -3,6 +3,7 @@
 ////
 
 @use "../utils";
+@use "../border-radius";
 @use "../theme/colors";
 @use "../theme/theme";
 @use "../icon/icon";
@@ -136,7 +137,7 @@ $mark-width: $track-inactive-size !default;
 
 /// The default border-radius for a discrete `Slider` tick mark.
 /// @type Number
-$mark-border-radius: 50% !default;
+$mark-border-radius: border-radius.get-var(full) !default;
 
 /// The light theme `Slider` tick mark color.
 /// @type Color
@@ -216,7 +217,7 @@ $thumb-size: 1.25rem !default;
 
 /// The `border-radius` for the `Slider` thumb.
 /// @type Number
-$thumb-border-radius: 50% !default;
+$thumb-border-radius: border-radius.get-var(full) !default;
 
 /// The amount of opacity to apply to the focused/active state of the `Slider`
 /// thumb.
@@ -266,7 +267,7 @@ $tooltip-caret-size: 0.3rem !default;
 
 /// The top/left for the discrete `Slider` tooltip.
 /// @type Number
-$tooltip-offset: -($thumb-size + icon.$spacing) !default;
+$tooltip-offset: calc(-1 * ($thumb-size + icon.$spacing)) !default;
 
 /// The `z-index` for the discrete `Slider` tooltip.
 /// @type Number

package/dist/form/_switch.scss

@@ -5,6 +5,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
 @use "../box-shadows";
 @use "../theme/colors";
 @use "../theme/theme";
@@ -41,7 +42,7 @@ $ball-size: 1.25em !default;
 
 /// The `Switch` border radius.
 /// @type Number
-$ball-border-radius: 50% !default;
+$ball-border-radius: border-radius.get-var(full) !default;
 
 /// The distance from the `left` and `right` of the `Switch` track to display
 /// the ball.

package/dist/form/_text-area.scss

@@ -8,6 +8,7 @@
 @use "base";
 @use "label";
 @use "text-field";
+@use "../spacing";
 
 /// Set to `true` to disable the `TextArea` styles
 /// @type Boolean
@@ -31,14 +32,14 @@ $disable-resize-vertical: $disable-everything !default;
 
 /// The default position for addons within a `TextArea`.
 /// @type Number
-$addon-top: 1rem !default;
+$addon-top: spacing.get-var(lg) !default;
 
 /// The default vertical padding to apply to `TextArea` which is useful when
 /// there is a scrollbar visible. This should normally be enough so that the
 /// floating label does not cover the content.
 ///
 /// @type Number
-$vertical-padding: 0.75rem !default;
+$vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.

package/dist/form/_text-field.scss

@@ -4,6 +4,8 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
+@use "../spacing";
 @use "../box/box";
 @use "../theme/colors";
 @use "../theme/theme";
@@ -81,7 +83,7 @@ $label-dense-height: 3.25rem !default;
 
 /// The `border-radius` for a `TextField`.
 /// @type Number
-$border-radius: 0.25rem !default;
+$border-radius: border-radius.get-var(xs) !default;
 
 /// The `border-width` for a `TextField`.
 /// @type Number
@@ -94,12 +96,12 @@ $border-width-active: 2px !default;
 /// The amount of horizontal padding to apply to a `TextField` with the
 /// `theme="filled"`.
 /// @type Number
-$filled-padding: 0.75rem !default;
+$filled-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The amount of horizontal padding to apply to a `TextField` with the
 /// `theme="outline"`.
 /// @type Number
-$outlined-padding: 1rem !default;
+$outlined-padding: spacing.get-var(md) !default;
 
 /// The amount of horizontal padding to apply to a `TextField` with the
 /// `theme="underline"`.
@@ -122,7 +124,7 @@ $underlined-placeholder-height: 2.5rem !default;
 /// `null`.
 ///
 /// @type Number
-$underlined-placeholder-padding-top: 0.5rem !default;
+$underlined-placeholder-padding-top: spacing.get-var(sm) !default;
 
 /// The amount of padding-top to apply to addons in a `TextField` while the
 /// `theme="underline"`.
@@ -131,7 +133,7 @@ $underlined-placeholder-padding-top: 0.5rem !default;
 /// `null`.
 ///
 /// @type Number
-$underlined-placeholder-addon-padding-top: 0.25rem !default;
+$underlined-placeholder-addon-padding-top: spacing.get-var(xs) !default;
 
 /// The amount of padding-top to apply to the `TextFieldContainer` while the
 /// `theme="underline"` and a `label` was provided.
@@ -139,13 +141,13 @@ $underlined-placeholder-addon-padding-top: 0.25rem !default;
 /// NOTE: This is the default height of the label with line-height
 ///
 /// @type Number
-$underlined-label-padding-top: 1.5rem !default;
+$underlined-label-padding-top: spacing.get-var(lg) !default;
 
 /// The position in the `TextFieldContainer` for a `Label` while the
 /// `theme="underline"`.
 ///
 /// @type Number
-$underlined-label-left-offset: icon.$spacing !default;
+$underlined-label-left-offset: spacing.get-var(sm) !default;
 
 /// Set this to `null` if not using `<TextField type="color" />` since this is
 /// used to apply a `min-width` to color inputs.
@@ -157,18 +159,18 @@ $color-min-width: 5rem !default;
 /// i.e. `leftAddon={<><FavoriteIcon /><CloseIcon /></>}`
 ///
 /// @type Number
-$addon-gap: 0.25rem !default;
+$addon-gap: spacing.get-var(xs) !default;
 
 /// The amount of margin to apply to addons when the `TextField`
 /// `theme="underline"`.
 /// @type Number
-$addon-margin: icon.$spacing !default;
+$addon-margin: spacing.get-var(sm) !default;
 
 /// The amount of spacing between a `TextField` addon and the `<input>`
 /// element.
 ///
 /// @type Number
-$addon-spacing: icon.get-var(spacing) !default;
+$addon-spacing: spacing.get-var(sm) !default;
 
 /// The border-color for a `theme="outline"` `TextField` in the light theme.
 /// @type Color
@@ -547,17 +549,19 @@ $variables: (
         }
 
         @if not $disable-addon {
-          $addon-offset: "#{icon.get-var(size)} + #{$underlined-label-left-offset * 2}";
-          @if $underlined-padding {
-            $addon-offset: "#{$addon-offset} + #{$underlined-padding}";
-          }
+          $addon-offset: calc(
+            #{icon.get-var(size) +
+              if($underlined-padding, "#{$underlined-padding} + ", "")} +
+              $underlined-label-left-offset *
+              2
+          );
 
           &--underline-left-addon {
-            @include set-var(padding-left, calc(#{$addon-offset}));
+            @include set-var(padding-left, $addon-offset);
           }
 
           &--underline-right-addon {
-            @include set-var(padding-right, calc(#{$addon-offset}));
+            @include set-var(padding-right, $addon-offset);
           }
         }
       }

package/dist/form/useCheckboxGroup.d.ts

@@ -126,8 +126,8 @@ export interface CombinedCheckboxGroupReturnValue<V extends string> {
  * );
  * ```
  *
- * @see {@link https://next.react-md.dev/components/Checkbox | Checkbox Demos}
- * @see {@link https://next.react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}
+ * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}
+ * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}
  * @since 6.0.0
  */
 export declare function useCheckboxGroup<V extends string>(options: CheckboxGroupOptions<V> & {
@@ -164,8 +164,8 @@ export declare function useCheckboxGroup<V extends string>(options: CheckboxGrou
  * );
  * ```
  *
- * @see {@link https://next.react-md.dev/components/Checkbox | Checkbox Demos}
- * @see {@link https://next.react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}
+ * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}
+ * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}
  * @since 6.0.0
  */
 export declare function useCheckboxGroup<V extends string>(options: CheckboxGroupOptions<V> & {
@@ -193,8 +193,8 @@ export declare function useCheckboxGroup<V extends string>(options: CheckboxGrou
  * );
  * ```
  *
- * @see {@link https://next.react-md.dev/components/Checkbox | Checkbox Demos}
- * @see {@link https://next.react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}
+ * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}
+ * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}
  * @since 6.0.0
  */
 export declare function useCheckboxGroup<V extends string>(options: CheckboxGroupOptions<V> & {
@@ -231,8 +231,8 @@ export declare function useCheckboxGroup<V extends string>(options: CheckboxGrou
  * );
  * ```
  *
- * @see {@link https://next.react-md.dev/components/Checkbox | Checkbox Demos}
- * @see {@link https://next.react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}
+ * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}
+ * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}
  * @since 6.0.0
  */
 export declare function useCheckboxGroup<V extends string>(options: CheckboxGroupOptions<V> & {

package/dist/form/useCheckboxGroup.js

@@ -3,8 +3,8 @@ import { useCallback, useRef } from "react";
 import { useReadonlySet } from "../useReadonlySet.js";
 const EMPTY_LIST = [];
 /**
- * @see {@link https://next.react-md.dev/components/Checkbox | Checkbox Demos}
- * @see {@link https://next.react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}
+ * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}
+ * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}
  * @since 6.0.0
  * @internal
  */ export function useCheckboxGroup(options) {

package/dist/form/useCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useCheckboxGroup.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\n\nconst EMPTY_LIST = [] as const;\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupOptions<V> {\n  /**\n   * A `name` to apply to all the checkboxes within the group. This is required\n   * if the {@link menu} option is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemCheckbox` component instead of the\n   * `Checkbox` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * This prop **must** be defined to enable the indeterminate checkbox feature\n   * from the hook and should be a list of all the possible checkbox values in\n   * the group. This will be used to select all values when the indeterminate\n   * checkbox is checked and determine if all the checkboxes have manually be\n   * selected.\n   *\n   * @example Indeterminate Behavior\n   * ```tsx\n   * const OPTIONS = [\n   *   { label: \"First\", value: \"a\" },\n   *   { label: \"Second\", value: \"b\" },\n   *   { label: \"Third\", value: \"c\" },\n   * ] as const;\n   * const VALUES = OPTIONS.map(({ value }) => value) as const;\n   *\n   * const {\n   *   getCheckboxProps,\n   *   getIndeterminateProps,\n   *   checkedValues,\n   * } = useCheckboxGroup({ name: \"group\", values: VALUES });\n   * ```\n   */\n  values?: readonly V[];\n\n  /**\n   * Set this to a list of checkbox values that should be checked by default.\n   *\n   * @defaultValue `[]`\n   */\n  defaultCheckedValues?: UseStateInitializer<readonly V[]>;\n}\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupImplementation<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    name: string;\n    value: V;\n    checked: boolean;\n    onChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateCheckboxGroupImplementation<V extends string>\n  extends CheckboxGroupImplementation<V> {\n  getIndeterminateProps: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    name: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface MenuItemCheckboxGroupImplementation<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    checked: boolean;\n    onCheckedChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateMenuItemCheckboxGroupImplementation<\n  V extends string,\n> extends MenuItemCheckboxGroupImplementation<V> {\n  getIndeterminateProps: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    checked: boolean;\n    indeterminate: boolean;\n    onCheckedChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface CombinedCheckboxGroupReturnValue<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    onChange?: () => void;\n    onCheckedChange?: () => void;\n  };\n  getIndeterminateProps?: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    name?: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange?: () => void;\n    onCheckedChange?: () => void;\n  };\n}\n\n/**\n * @example Checkbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: \"example\" });\n *\n * return (\n *   <>\n *     <Checkbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </Checkbox>\n *   </>\n * );\n * ```\n *\n * @see {@link https://next.react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://next.react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values?: never;\n  }\n): CheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate Checkbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n *   getCheckboxProps,\n *   getIndeterminateProps,\n *   checkedValues\n * } = useCheckboxGroup({\n *     name: \"example\",\n *     values: VALUES,\n *   });\n *\n * return (\n *   <>\n *     <Checkbox {...getIndeterminateProps()} label=\"Select all\" />\n *     {VALUES.map(({ label, value }) => (\n *       <Checkbox key={value} label={label} {...getCheckboxProps(value)} />\n *     ))}\n *   </>\n * );\n * ```\n *\n * @see {@link https://next.react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://next.react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values: readonly V[];\n  }\n): IndeterminateCheckboxGroupImplementation<V>;\n/**\n * @example MenuItemCheckbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </MenuItemCheckbox>\n *   </>\n * );\n * ```\n *\n * @see {@link https://next.react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://next.react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values?: never;\n  }\n): MenuItemCheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate MenuItemCheckbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const { getCheckboxProps, getIndeterminateProps, checkedValues } = useCheckboxGroup({\n *   menu: true,\n *   values: VALUES,\n * });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getIndeterminateProps()}>\n *       All\n *     <MenuItemCheckbox>\n *     {OPTIONS.map(({ label, value }) => (\n *       <MenuItemCheckbox key={value} {...getCheckboxProps(value)}>\n *         {label}\n *       </MenuItemCheckbox>\n *     ))}\n *   </>\n * );\n * ```\n *\n * @see {@link https://next.react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://next.react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values: readonly V[];\n  }\n): IndeterminateMenuItemCheckboxGroupImplementation<V>;\n/**\n * @see {@link https://next.react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://next.react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V>\n): CombinedCheckboxGroupReturnValue<V> {\n  const {\n    name,\n    menu = false,\n    values,\n    defaultCheckedValues = EMPTY_LIST,\n  } = options;\n  const {\n    value: checkedValues,\n    setValue: setCheckedValues,\n    toggleValue,\n  } = useReadonlySet({\n    defaultValue: defaultCheckedValues,\n  });\n  const initial = useRef(checkedValues);\n\n  let getIndeterminateProps: CombinedCheckboxGroupReturnValue<V>[\"getIndeterminateProps\"];\n  if (values) {\n    getIndeterminateProps = () => {\n      const checked = checkedValues.size > 0;\n      const indeterminate = checked && checkedValues.size < values.length;\n\n      return {\n        \"aria-checked\": indeterminate ? \"mixed\" : undefined,\n        name,\n        checked,\n        indeterminate,\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues((checkedValues) => {\n            if (checkedValues.size === 0 || indeterminate) {\n              return new Set(values);\n            }\n\n            return new Set();\n          });\n        },\n      };\n    };\n  }\n\n  return {\n    reset: useCallback(() => {\n      setCheckedValues(initial.current);\n    }, [setCheckedValues]),\n    checkedValues,\n    setCheckedValues,\n    getIndeterminateProps,\n    getCheckboxProps(value) {\n      return {\n        name,\n        value: menu ? undefined : value,\n        checked: checkedValues.has(value),\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          toggleValue(value);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useReadonlySet","EMPTY_LIST","useCheckboxGroup","options","name","menu","values","defaultCheckedValues","value","checkedValues","setValue","setCheckedValues","toggleValue","defaultValue","initial","getIndeterminateProps","checked","size","indeterminate","length","undefined","Set","reset","current","getCheckboxProps","has"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAG5C,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,MAAMC,aAAa,EAAE;AAuQrB;;;;;CAKC,GACD,OAAO,SAASC,iBACdC,OAAgC;IAEhC,MAAM,EACJC,IAAI,EACJC,OAAO,KAAK,EACZC,MAAM,EACNC,uBAAuBN,UAAU,EAClC,GAAGE;IACJ,MAAM,EACJK,OAAOC,aAAa,EACpBC,UAAUC,gBAAgB,EAC1BC,WAAW,EACZ,GAAGZ,eAAe;QACjBa,cAAcN;IAChB;IACA,MAAMO,UAAUf,OAAOU;IAEvB,IAAIM;IACJ,IAAIT,QAAQ;QACVS,wBAAwB;YACtB,MAAMC,UAAUP,cAAcQ,IAAI,GAAG;YACrC,MAAMC,gBAAgBF,WAAWP,cAAcQ,IAAI,GAAGX,OAAOa,MAAM;YAEnE,OAAO;gBACL,gBAAgBD,gBAAgB,UAAUE;gBAC1ChB;gBACAY;gBACAE;gBACA,CAACb,OAAO,oBAAoB,WAAW;oBACrCM,iBAAiB,CAACF;wBAChB,IAAIA,cAAcQ,IAAI,KAAK,KAAKC,eAAe;4BAC7C,OAAO,IAAIG,IAAIf;wBACjB;wBAEA,OAAO,IAAIe;oBACb;gBACF;YACF;QACF;IACF;IAEA,OAAO;QACLC,OAAOxB,YAAY;YACjBa,iBAAiBG,QAAQS,OAAO;QAClC,GAAG;YAACZ;SAAiB;QACrBF;QACAE;QACAI;QACAS,kBAAiBhB,KAAK;YACpB,OAAO;gBACLJ;gBACAI,OAAOH,OAAOe,YAAYZ;gBAC1BQ,SAASP,cAAcgB,GAAG,CAACjB;gBAC3B,CAACH,OAAO,oBAAoB,WAAW;oBACrCO,YAAYJ;gBACd;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useCheckboxGroup.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\n\nconst EMPTY_LIST = [] as const;\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupOptions<V> {\n  /**\n   * A `name` to apply to all the checkboxes within the group. This is required\n   * if the {@link menu} option is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemCheckbox` component instead of the\n   * `Checkbox` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * This prop **must** be defined to enable the indeterminate checkbox feature\n   * from the hook and should be a list of all the possible checkbox values in\n   * the group. This will be used to select all values when the indeterminate\n   * checkbox is checked and determine if all the checkboxes have manually be\n   * selected.\n   *\n   * @example Indeterminate Behavior\n   * ```tsx\n   * const OPTIONS = [\n   *   { label: \"First\", value: \"a\" },\n   *   { label: \"Second\", value: \"b\" },\n   *   { label: \"Third\", value: \"c\" },\n   * ] as const;\n   * const VALUES = OPTIONS.map(({ value }) => value) as const;\n   *\n   * const {\n   *   getCheckboxProps,\n   *   getIndeterminateProps,\n   *   checkedValues,\n   * } = useCheckboxGroup({ name: \"group\", values: VALUES });\n   * ```\n   */\n  values?: readonly V[];\n\n  /**\n   * Set this to a list of checkbox values that should be checked by default.\n   *\n   * @defaultValue `[]`\n   */\n  defaultCheckedValues?: UseStateInitializer<readonly V[]>;\n}\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupImplementation<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    name: string;\n    value: V;\n    checked: boolean;\n    onChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateCheckboxGroupImplementation<V extends string>\n  extends CheckboxGroupImplementation<V> {\n  getIndeterminateProps: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    name: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface MenuItemCheckboxGroupImplementation<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    checked: boolean;\n    onCheckedChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateMenuItemCheckboxGroupImplementation<\n  V extends string,\n> extends MenuItemCheckboxGroupImplementation<V> {\n  getIndeterminateProps: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    checked: boolean;\n    indeterminate: boolean;\n    onCheckedChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface CombinedCheckboxGroupReturnValue<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    onChange?: () => void;\n    onCheckedChange?: () => void;\n  };\n  getIndeterminateProps?: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    name?: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange?: () => void;\n    onCheckedChange?: () => void;\n  };\n}\n\n/**\n * @example Checkbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: \"example\" });\n *\n * return (\n *   <>\n *     <Checkbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </Checkbox>\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values?: never;\n  }\n): CheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate Checkbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n *   getCheckboxProps,\n *   getIndeterminateProps,\n *   checkedValues\n * } = useCheckboxGroup({\n *     name: \"example\",\n *     values: VALUES,\n *   });\n *\n * return (\n *   <>\n *     <Checkbox {...getIndeterminateProps()} label=\"Select all\" />\n *     {VALUES.map(({ label, value }) => (\n *       <Checkbox key={value} label={label} {...getCheckboxProps(value)} />\n *     ))}\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values: readonly V[];\n  }\n): IndeterminateCheckboxGroupImplementation<V>;\n/**\n * @example MenuItemCheckbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </MenuItemCheckbox>\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values?: never;\n  }\n): MenuItemCheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate MenuItemCheckbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const { getCheckboxProps, getIndeterminateProps, checkedValues } = useCheckboxGroup({\n *   menu: true,\n *   values: VALUES,\n * });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getIndeterminateProps()}>\n *       All\n *     <MenuItemCheckbox>\n *     {OPTIONS.map(({ label, value }) => (\n *       <MenuItemCheckbox key={value} {...getCheckboxProps(value)}>\n *         {label}\n *       </MenuItemCheckbox>\n *     ))}\n *   </>\n * );\n * ```\n *\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values: readonly V[];\n  }\n): IndeterminateMenuItemCheckboxGroupImplementation<V>;\n/**\n * @see {@link https://react-md.dev/components/Checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/hooks/use-checkbox-group | useCheckboxGroup Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V>\n): CombinedCheckboxGroupReturnValue<V> {\n  const {\n    name,\n    menu = false,\n    values,\n    defaultCheckedValues = EMPTY_LIST,\n  } = options;\n  const {\n    value: checkedValues,\n    setValue: setCheckedValues,\n    toggleValue,\n  } = useReadonlySet({\n    defaultValue: defaultCheckedValues,\n  });\n  const initial = useRef(checkedValues);\n\n  let getIndeterminateProps: CombinedCheckboxGroupReturnValue<V>[\"getIndeterminateProps\"];\n  if (values) {\n    getIndeterminateProps = () => {\n      const checked = checkedValues.size > 0;\n      const indeterminate = checked && checkedValues.size < values.length;\n\n      return {\n        \"aria-checked\": indeterminate ? \"mixed\" : undefined,\n        name,\n        checked,\n        indeterminate,\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues((checkedValues) => {\n            if (checkedValues.size === 0 || indeterminate) {\n              return new Set(values);\n            }\n\n            return new Set();\n          });\n        },\n      };\n    };\n  }\n\n  return {\n    reset: useCallback(() => {\n      setCheckedValues(initial.current);\n    }, [setCheckedValues]),\n    checkedValues,\n    setCheckedValues,\n    getIndeterminateProps,\n    getCheckboxProps(value) {\n      return {\n        name,\n        value: menu ? undefined : value,\n        checked: checkedValues.has(value),\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          toggleValue(value);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useReadonlySet","EMPTY_LIST","useCheckboxGroup","options","name","menu","values","defaultCheckedValues","value","checkedValues","setValue","setCheckedValues","toggleValue","defaultValue","initial","getIndeterminateProps","checked","size","indeterminate","length","undefined","Set","reset","current","getCheckboxProps","has"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAG5C,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,MAAMC,aAAa,EAAE;AAuQrB;;;;;CAKC,GACD,OAAO,SAASC,iBACdC,OAAgC;IAEhC,MAAM,EACJC,IAAI,EACJC,OAAO,KAAK,EACZC,MAAM,EACNC,uBAAuBN,UAAU,EAClC,GAAGE;IACJ,MAAM,EACJK,OAAOC,aAAa,EACpBC,UAAUC,gBAAgB,EAC1BC,WAAW,EACZ,GAAGZ,eAAe;QACjBa,cAAcN;IAChB;IACA,MAAMO,UAAUf,OAAOU;IAEvB,IAAIM;IACJ,IAAIT,QAAQ;QACVS,wBAAwB;YACtB,MAAMC,UAAUP,cAAcQ,IAAI,GAAG;YACrC,MAAMC,gBAAgBF,WAAWP,cAAcQ,IAAI,GAAGX,OAAOa,MAAM;YAEnE,OAAO;gBACL,gBAAgBD,gBAAgB,UAAUE;gBAC1ChB;gBACAY;gBACAE;gBACA,CAACb,OAAO,oBAAoB,WAAW;oBACrCM,iBAAiB,CAACF;wBAChB,IAAIA,cAAcQ,IAAI,KAAK,KAAKC,eAAe;4BAC7C,OAAO,IAAIG,IAAIf;wBACjB;wBAEA,OAAO,IAAIe;oBACb;gBACF;YACF;QACF;IACF;IAEA,OAAO;QACLC,OAAOxB,YAAY;YACjBa,iBAAiBG,QAAQS,OAAO;QAClC,GAAG;YAACZ;SAAiB;QACrBF;QACAE;QACAI;QACAS,kBAAiBhB,KAAK;YACpB,OAAO;gBACLJ;gBACAI,OAAOH,OAAOe,YAAYZ;gBAC1BQ,SAASP,cAAcgB,GAAG,CAACjB;gBAC3B,CAACH,OAAO,oBAAoB,WAAW;oBACrCO,YAAYJ;gBACd;YACF;QACF;IACF;AACF"}

package/dist/form/useCombobox.js

@@ -20,6 +20,7 @@ const noop = ()=>{
  */ export function useCombobox(options) {
     const { form, popup = "listbox", onClick = noop, onFocus, onKeyDown, searchable, multiselect, isNegativeOneAllowed, loopable, disabled, visible: propVisible, setVisible: propSetVisible, defaultVisible = false, comboboxId: propComboboxId, comboboxRef: propComboboxRef, popupId: propPopupId, popupRef: propPopupRef, onFocusChange = noop, extendKeyDown = noop, getFocusableElements = getNonDisabledOptions, getEnterDefaultFocusedIndex, getDefaultFocusedIndex } = options;
     const [visible, setVisible] = useEnsuredState({
+        name: "visible",
         value: propVisible,
         setValue: propSetVisible,
         defaultValue: defaultVisible