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

package/dist/form/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Option.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, Fragment, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { icon } from \"../icon/styles.js\";\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport { getListItemHeight } from \"../list/getListItemHeight.js\";\nimport { ListItemText } from \"../list/ListItemText.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { option } from \"./optionStyles.js\";\nimport { useListboxContext } from \"./useListboxProvider.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This icon is used while the option is unselected so that the selected and\n * unselected options have the same alignment.\n *\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_OPTION_UNSELECTED_ICON = (\n  <span className={icon({ type: \"svg\" })} />\n);\n\n/**\n * @remarks\n * \\@since 6.0.0 removed the `selected` and `focused` props.\n * \\@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport interface OptionProps extends MenuItemProps {\n  /**\n   * @defaultValue `\"option\"`\n   */\n  role?: string;\n\n  value: string | number;\n\n  /**\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * @see {@link DEFAULT_OPTION_UNSELECTED_ICON}\n   * @defaultValue `<span className=\"rmd-icon rmd-icon--svg\" />`\n   */\n  unselectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` of the {@link selectedIcon}/{@link unselectedIcon}\n   * should appear as the {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Since the `selectedIcon`/`unselectedIcon` are rendered as\n   * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be\n   * wrapped in the {@link TextIconSpacing} component to maintain the correct\n   * spacing. You can use this prop to provide any additional configuration to\n   * the spacing.\n   *\n   * @example\n   * ```tsx\n   * <Option\n   *   leftAddon={<Avatar>A</Avatar>}\n   *   leftAddonType=\"avatar\"\n   *   value={0}\n   *   textIconSpacingProps={{\n   *     beforeClassName: \"my-custom-class-name\",\n   *   }}\n   * >\n   *   Some Content\n   * </Option>\n   * ```\n   */\n  textIconSpacingProps?: Omit<TextIconSpacingProps, \"icon\" | \"children\">;\n}\n\n/**\n * **Client Component**\n *\n * This component is a wrapper around the {@link MenuItem} to implement custom\n * select option behavior.\n *\n * @remarks\n * \\@since 6.0.0 removed the `selected` and `focused` props.\n * \\@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport const Option = forwardRef<HTMLLIElement, OptionProps>(\n  function Option(props, ref) {\n    const {\n      id: propId,\n      role = \"option\",\n      value,\n      children: propChildren,\n      onClick = noop,\n      className,\n      selectedIcon: propSelectedIcon,\n      unselectedIcon: propUnselectedIcon,\n      selectedIconAfter = false,\n      textIconSpacingProps,\n      leftAddon: propLeftAddon,\n      leftAddonType,\n      leftAddonClassName,\n      rightAddon: propRightAddon,\n      rightAddonType,\n      rightAddonClassName,\n      secondaryText,\n      height: propHeight,\n      disableTextChildren: propDisableTextChildren,\n      ...remaining\n    } = props;\n\n    const id = useEnsuredId(propId, \"option\");\n    const { inputRef, currentValue, disableSelectedIcon } = useListboxContext();\n    const selected = value === currentValue;\n    const selectedIcon = getIcon(\n      \"selected\",\n      disableSelectedIcon ? null : propSelectedIcon\n    );\n    const unselectedIcon = disableSelectedIcon\n      ? null\n      : propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON;\n    const icon = selected ? selectedIcon : unselectedIcon;\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    let children = propChildren;\n    let disableTextChildren = propDisableTextChildren;\n    if (!selectedIconAfter && icon) {\n      leftAddon = icon;\n      if (propLeftAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propLeftAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    } else if (icon) {\n      rightAddon = icon;\n      if (propRightAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propRightAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    }\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon: leftAddon === icon ? null : leftAddon,\n      leftAddonType,\n      rightAddon: rightAddon === icon ? null : rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <MenuItem\n        {...remaining}\n        aria-selected={selected || undefined}\n        id={id}\n        ref={ref}\n        role={role}\n        onClick={(event) => {\n          onClick(event);\n          triggerManualChangeEvent(inputRef.current, value);\n        }}\n        className={option({ icon: !!icon, selected, className })}\n        secondaryText={secondaryText}\n        height={height}\n        leftAddon={leftAddon}\n        leftAddonType={leftAddonType}\n        leftAddonClassName={cnb(\n          leftAddon === icon && \"rmd-option__icon\",\n          leftAddonClassName\n        )}\n        rightAddon={rightAddon}\n        rightAddonType={rightAddonType}\n        rightAddonClassName={cnb(\n          rightAddon === icon && \"rmd-option__icon\",\n          rightAddonClassName\n        )}\n        disableTextChildren={disableTextChildren}\n      >\n        {children}\n      </MenuItem>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Fragment","getIcon","icon","TextIconSpacing","getListItemHeight","ListItemText","MenuItem","useEnsuredId","option","useListboxContext","triggerManualChangeEvent","noop","DEFAULT_OPTION_UNSELECTED_ICON","span","className","type","Option","props","ref","id","propId","role","value","children","propChildren","onClick","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","textIconSpacingProps","leftAddon","propLeftAddon","leftAddonType","leftAddonClassName","rightAddon","propRightAddon","rightAddonType","rightAddonClassName","secondaryText","height","propHeight","disableTextChildren","propDisableTextChildren","remaining","inputRef","currentValue","disableSelectedIcon","selected","Wrapper","aria-selected","undefined","event","current"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,QAAQ,QAAwB,QAAQ;AAC7D,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,IAAI,QAAQ,oBAAoB;AACzC,SACEC,eAAe,QAEV,6BAA6B;AACpC,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAA4B,sBAAsB;AACnE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,wBAAwB,QAAQ,aAAa;AAEtD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;CAKC,GACD,OAAO,MAAMC,+CACX,KAACC;IAAKC,WAAWZ,KAAK;QAAEa,MAAM;IAAM;GACpC;AA2DF;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,uBAASjB,WACpB,SAASiB,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAUC,YAAY,EACtBC,UAAUd,IAAI,EACdG,SAAS,EACTY,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClCC,oBAAoB,KAAK,EACzBC,oBAAoB,EACpBC,WAAWC,aAAa,EACxBC,aAAa,EACbC,kBAAkB,EAClBC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,mBAAmB,EACnBC,aAAa,EACbC,QAAQC,UAAU,EAClBC,qBAAqBC,uBAAuB,EAC5C,GAAGC,WACJ,GAAG5B;IAEJ,MAAME,KAAKZ,aAAaa,QAAQ;IAChC,MAAM,EAAE0B,QAAQ,EAAEC,YAAY,EAAEC,mBAAmB,EAAE,GAAGvC;IACxD,MAAMwC,WAAW3B,UAAUyB;IAC3B,MAAMrB,eAAezB,QACnB,YACA+C,sBAAsB,OAAOrB;IAE/B,MAAMC,iBAAiBoB,sBACnB,OACAnB,sBAAsBjB;IAC1B,MAAMV,OAAO+C,WAAWvB,eAAeE;IAEvC,IAAII,YAAYC;IAChB,IAAIG,aAAaC;IACjB,IAAId,WAAWC;IACf,IAAImB,sBAAsBC;IAC1B,IAAI,CAACd,qBAAqB5B,MAAM;QAC9B8B,YAAY9B;QACZ,IAAI+B,eAAe;YACjBU,sBAAsB;YACtB,MAAMO,UAAUN,0BAA0B5C,WAAWK;YAErDkB,yBACE,KAACpB;gBAAiB,GAAG4B,oBAAoB;gBAAE7B,MAAM+B;0BAC/C,cAAA,KAACiB;8BAAS3B;;;QAGhB;IACF,OAAO,IAAIrB,MAAM;QACfkC,aAAalC;QACb,IAAImC,gBAAgB;YAClBM,sBAAsB;YACtB,MAAMO,UAAUN,0BAA0B5C,WAAWK;YAErDkB,yBACE,KAACpB;gBAAiB,GAAG4B,oBAAoB;gBAAE7B,MAAMmC;0BAC/C,cAAA,KAACa;8BAAS3B;;;QAGhB;IACF;IAEA,MAAMkB,SAASrC,kBAAkB;QAC/BqC,QAAQC;QACRV,WAAWA,cAAc9B,OAAO,OAAO8B;QACvCE;QACAE,YAAYA,eAAelC,OAAO,OAAOkC;QACzCE;QACAE;IACF;IAEA,qBACE,KAAClC;QACE,GAAGuC,SAAS;QACbM,iBAAeF,YAAYG;QAC3BjC,IAAIA;QACJD,KAAKA;QACLG,MAAMA;QACNI,SAAS,CAAC4B;YACR5B,QAAQ4B;YACR3C,yBAAyBoC,SAASQ,OAAO,EAAEhC;QAC7C;QACAR,WAAWN,OAAO;YAAEN,MAAM,CAAC,CAACA;YAAM+C;YAAUnC;QAAU;QACtD0B,eAAeA;QACfC,QAAQA;QACRT,WAAWA;QACXE,eAAeA;QACfC,oBAAoBrC,IAClBkC,cAAc9B,QAAQ,oBACtBiC;QAEFC,YAAYA;QACZE,gBAAgBA;QAChBC,qBAAqBzC,IACnBsC,eAAelC,QAAQ,oBACvBqC;QAEFI,qBAAqBA;kBAEpBpB;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Option.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Fragment, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { icon } from \"../icon/styles.js\";\nimport { ListItemText } from \"../list/ListItemText.js\";\nimport { getListItemHeight } from \"../list/getListItemHeight.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useListboxContext } from \"./ListboxProvider.js\";\nimport { option } from \"./optionStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This icon is used while the option is unselected so that the selected and\n * unselected options have the same alignment.\n *\n * @since 6.0.0\n * @defaultValue `<span className=\"rmd-icon rmd-icon--svg />`\n */\nexport const DEFAULT_OPTION_UNSELECTED_ICON = (\n  <span className={icon({ type: \"svg\" })} />\n);\n\n/**\n * @since 6.0.0\n */\nexport interface OptionSelectedIconProps {\n  /**\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * @see {@link DEFAULT_OPTION_UNSELECTED_ICON}\n   * @defaultValue `<span className=\"rmd-icon rmd-icon--svg\" />`\n   */\n  unselectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` of the {@link selectedIcon}/{@link unselectedIcon}\n   * should appear as the {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to remove selected icon behavior from the `Option`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n}\n\n/**\n * @since 6.0.0 removed the `selected` and `focused` props.\n * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport interface OptionProps extends MenuItemProps, OptionSelectedIconProps {\n  /**\n   * @defaultValue `\"option\"`\n   */\n  role?: string;\n  value: string | number | object;\n\n  /**\n   * An optional className to apply only while the current option is selected to\n   * override any global default selected styles. It is recommended to update\n   * the `react-md.$form-option-selected-styles` map first to change selected\n   * style globally and then any one-off customizations through this prop.\n   *\n   * @example Global Change\n   * ```scss\n   * @use \"@react-md/core\" with (\n   *   // these are the defaults\n   *   $form-option-selected-styles: (\n   *     --rmd-icon-color: currentcolor,\n   *     background-color: colors.$blue-900,\n   *     color: colors.$white,\n   *   ),\n   *\n   *   // so if you wanted to remove the styles globally\n   *   $form-option-selected-styles: (),\n   * );\n   * ```\n   *\n   * This really results in something like:\n   * ```ts\n   * className=\"rmd-list-item ... rmd-menu-item ... rmd-option rmd-option--selected ${selectedClassName}\"\n   * ```\n   */\n  selectedClassName?: string;\n\n  /**\n   * Since the `selectedIcon`/`unselectedIcon` are rendered as\n   * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be\n   * wrapped in the {@link TextIconSpacing} component to maintain the correct\n   * spacing. You can use this prop to provide any additional configuration to\n   * the spacing.\n   *\n   * @example\n   * ```tsx\n   * <Option\n   *   leftAddon={<Avatar>A</Avatar>}\n   *   leftAddonType=\"avatar\"\n   *   value={0}\n   *   textIconSpacingProps={{\n   *     beforeClassName: \"my-custom-class-name\",\n   *   }}\n   * >\n   *   Some Content\n   * </Option>\n   * ```\n   */\n  textIconSpacingProps?: Omit<TextIconSpacingProps, \"icon\" | \"children\">;\n}\n\n/**\n * **Client Component**\n *\n * This component is a wrapper around the {@link MenuItem} to implement custom\n * select option behavior.\n *\n * @see {@link https://next.react-md.dev/components/select | Select Demos}\n * @since 6.0.0 removed the `selected` and `focused` props.\n * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.\n */\nexport const Option = forwardRef<HTMLLIElement, OptionProps>(\n  function Option(props, ref) {\n    const {\n      id: propId,\n      role = \"option\",\n      value,\n      children: propChildren,\n      onClick = noop,\n      className,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      unselectedIcon: propUnselectedIcon,\n      selectedIconAfter: propSelectedIconAfter,\n      disableSelectedIcon: propDisableSelectedIcon,\n      textIconSpacingProps,\n      leftAddon: propLeftAddon,\n      leftAddonType,\n      leftAddonClassName,\n      rightAddon: propRightAddon,\n      rightAddonType,\n      rightAddonClassName,\n      secondaryText,\n      height: propHeight,\n      disableTextChildren: propDisableTextChildren,\n      ...remaining\n    } = props;\n\n    const id = useEnsuredId(propId, \"option\");\n    const {\n      selectOption,\n      isOptionSelected,\n      disableSelectedIcon: contextDisableSelectedIcon,\n      selectedIcon: contextSelectedIcon,\n      unselectedIcon: contextUnselectedIcon,\n      selectedIconAfter: contextSelectedIconAfter,\n    } = useListboxContext();\n    const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;\n    const disableSelectedIcon =\n      propDisableSelectedIcon ?? contextDisableSelectedIcon;\n    const selected = isOptionSelected(value);\n    const selectedIcon = getIcon(\n      \"selected\",\n      disableSelectedIcon ? null : (propSelectedIcon ?? contextSelectedIcon)\n    );\n    const unselectedIcon = disableSelectedIcon\n      ? null\n      : (propUnselectedIcon ??\n        contextUnselectedIcon ??\n        DEFAULT_OPTION_UNSELECTED_ICON);\n    const icon = selected ? selectedIcon : unselectedIcon;\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    let children = propChildren;\n    let disableTextChildren = propDisableTextChildren;\n    if (!selectedIconAfter && icon) {\n      leftAddon = icon;\n      if (propLeftAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propLeftAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    } else if (icon) {\n      rightAddon = icon;\n      if (propRightAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propRightAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    }\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon: leftAddon === icon ? null : leftAddon,\n      leftAddonType,\n      rightAddon: rightAddon === icon ? null : rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <MenuItem\n        {...remaining}\n        aria-selected={selected || undefined}\n        id={id}\n        ref={ref}\n        role={role}\n        onClick={(event) => {\n          onClick(event);\n          selectOption(value);\n        }}\n        className={option({\n          icon: !!icon,\n          selected,\n          selectedClassName,\n          className,\n        })}\n        secondaryText={secondaryText}\n        height={height}\n        leftAddon={leftAddon}\n        leftAddonType={leftAddonType}\n        leftAddonClassName={cnb(\n          leftAddon === icon && \"rmd-option__icon\",\n          leftAddonClassName\n        )}\n        rightAddon={rightAddon}\n        rightAddonType={rightAddonType}\n        rightAddonClassName={cnb(\n          rightAddon === icon && \"rmd-option__icon\",\n          rightAddonClassName\n        )}\n        disableTextChildren={disableTextChildren}\n      >\n        {children}\n      </MenuItem>\n    );\n  }\n);\n"],"names":["cnb","Fragment","forwardRef","TextIconSpacing","getIcon","icon","ListItemText","getListItemHeight","MenuItem","useEnsuredId","useListboxContext","option","noop","DEFAULT_OPTION_UNSELECTED_ICON","span","className","type","Option","props","ref","id","propId","role","value","children","propChildren","onClick","selectedClassName","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","propSelectedIconAfter","disableSelectedIcon","propDisableSelectedIcon","textIconSpacingProps","leftAddon","propLeftAddon","leftAddonType","leftAddonClassName","rightAddon","propRightAddon","rightAddonType","rightAddonClassName","secondaryText","height","propHeight","disableTextChildren","propDisableTextChildren","remaining","selectOption","isOptionSelected","contextDisableSelectedIcon","contextSelectedIcon","contextUnselectedIcon","contextSelectedIconAfter","selected","Wrapper","aria-selected","undefined","event"],"mappings":"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"}

package/dist/form/Password.d.ts

@@ -3,8 +3,7 @@ import { type ButtonProps } from "../button/Button.js";
 import { type PropsWithRef } from "../types.js";
 import { type TextFieldProps } from "./TextField.js";
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const getVisibilityIcon: GetPasswordVisibilityIcon = (isPasswordVisible) => {
  *   if (isPasswordVisible) {
@@ -21,8 +20,7 @@ import { type TextFieldProps } from "./TextField.js";
  */
 export type GetPasswordVisibilityIcon = (isPasswordVisible: boolean) => ReactNode;
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const visibilityIcon: ConfigurableVisibilityIcon = {
  *   visible: <SecurityIcon />,
@@ -44,12 +42,11 @@ export interface ConfigurableVisibilityIcon {
 export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon"> {
     /**
      * @defaultValue `"password"`
-     * @remarks \@since 6.0.0 Defaults to `"password"`
+     * @since 6.0.0 Defaults to `"password"`
      */
     name?: string;
     /**
-     * @example
-     * Configurable Visibility Icon Object
+     * @example Configurable Visibility Icon Object
      * ```tsx
      * <Password
      *   {...props}
@@ -60,8 +57,7 @@ export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon
      * />
      * ```
      *
-     * @example
-     * Get Password Visibility Icon Function
+     * @example Get Password Visibility Icon Function
      * ```tsx
      * <Password
      *   {...props}
@@ -75,8 +71,7 @@ export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon
      * />
      * ```
      *
-     * @example
-     * Custom Icon
+     * @example Custom Icon
      * ```tsx
      * <Password
      *   {...props}
@@ -101,10 +96,9 @@ export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { Password } from "@react-md/core";
+ * import { Password } from "@react-md/core/form/Password";
  *
  * function Example(): ReactElement {
  *   return (
@@ -116,5 +110,7 @@ export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/password | Password Demos}
  */
 export declare const Password: import("react").ForwardRefExoticComponent<PasswordProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/form/Password.js

@@ -2,18 +2,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button } from "../button/Button.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useToggle } from "../useToggle.js";
-import { password, passwordInput, passwordInputToggle } from "./passwordStyles.js";
 import { TextField } from "./TextField.js";
+import { password, passwordInput, passwordInputToggle } from "./passwordStyles.js";
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { Password } from "@react-md/core";
+ * import { Password } from "@react-md/core/form/Password";
  *
  * function Example(): ReactElement {
  *   return (
@@ -25,6 +24,8 @@ import { TextField } from "./TextField.js";
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/password | Password Demos}
  */ export const Password = /*#__PURE__*/ forwardRef(function Password(props, ref) {
     const { id: propId, name = "password", className, inputClassName, visibilityIcon: propVisibilityIcon, visibilityLabel = "Show password", visibilityProps, ...remaining } = props;
     const { toggled: isPasswordVisible, toggle } = useToggle(false);

package/dist/form/Password.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Password.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport {\n  password,\n  passwordInput,\n  passwordInputToggle,\n} from \"./passwordStyles.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * const getVisibilityIcon: GetPasswordVisibilityIcon = (isPasswordVisible) => {\n *   if (isPasswordVisible) {\n *     return <SecurityIcon />;\n *   }\n *\n *   return <RemoveRedEyeIcon />;\n * };\n * ```\n *\n * @param isPasswordVisible - `true` when the password is visible and in plain\n * text\n * @returns a custom icon to use for the password visibility toggle.\n */\nexport type GetPasswordVisibilityIcon = (\n  isPasswordVisible: boolean\n) => ReactNode;\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * const visibilityIcon: ConfigurableVisibilityIcon = {\n *   visible: <SecurityIcon />,\n *   invisible: <RemoveRedEyeIcon />,\n * };\n * ```\n */\nexport interface ConfigurableVisibilityIcon {\n  /**\n   * The icon to display while the password is currently visible as plain text.\n   */\n  visible: ReactNode;\n\n  /**\n   * The icon to display while the password is currently invisible as the\n   * password input.\n   */\n  invisible: ReactNode;\n}\n\nexport interface PasswordProps\n  extends Omit<TextFieldProps, \"type\" | \"rightAddon\"> {\n  /**\n   * @defaultValue `\"password\"`\n   * @remarks \\@since 6.0.0 Defaults to `\"password\"`\n   */\n  name?: string;\n\n  /**\n   * @example\n   * Configurable Visibility Icon Object\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={{\n   *     visible: <SecurityIcon />,\n   *     invisible: <RemoveRedEyeIcon />,\n   *   }}\n   * />\n   * ```\n   *\n   * @example\n   * Get Password Visibility Icon Function\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={(isPasswordVisible) => {\n   *     if (isPasswordVisible) {\n   *       return <SecurityIcon />;\n   *     }\n   *\n   *     return <RemoveRedEyeIcon />;\n   *   }}\n   * />\n   * ```\n   *\n   * @example\n   * Custom Icon\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={<SomeCustomComponent />}\n   * />\n   * ```\n   */\n  visibilityIcon?:\n    | ConfigurableVisibilityIcon\n    | GetPasswordVisibilityIcon\n    | ReactNode;\n\n  /**\n   * The `aria-label` to use for the password visibility icon button.\n   *\n   * @defaultValue `\"Show password\"`\n   */\n  visibilityLabel?: string;\n\n  /**\n   * Any props that should be passed to the password visibility icon button. If\n   * `id`, `buttonType`, `aria-label`, `aria-pressed`, or `children` are\n   * provided here, they will override the default implementation.\n   */\n  visibilityProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Password } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Password\n *       label=\"Password\"\n *       name=\"password\"\n *       required\n *     />\n *   );\n * }\n * ```\n */\nexport const Password = forwardRef<HTMLInputElement, PasswordProps>(\n  function Password(props, ref) {\n    const {\n      id: propId,\n      name = \"password\",\n      className,\n      inputClassName,\n      visibilityIcon: propVisibilityIcon,\n      visibilityLabel = \"Show password\",\n      visibilityProps,\n      ...remaining\n    } = props;\n    const { toggled: isPasswordVisible, toggle } = useToggle(false);\n\n    let currentVisibilityIcon: ReactNode;\n    if (\n      propVisibilityIcon &&\n      typeof propVisibilityIcon === \"object\" &&\n      \"visible\" in propVisibilityIcon\n    ) {\n      currentVisibilityIcon = isPasswordVisible\n        ? propVisibilityIcon.visible\n        : propVisibilityIcon.invisible;\n    } else if (typeof propVisibilityIcon === \"function\") {\n      currentVisibilityIcon = propVisibilityIcon(isPasswordVisible);\n    } else {\n      currentVisibilityIcon = propVisibilityIcon;\n    }\n\n    const id = useEnsuredId(propId, \"password\");\n    const visibilityIcon = getIcon(\"password\", currentVisibilityIcon);\n\n    return (\n      <TextField\n        {...remaining}\n        ref={ref}\n        name={name}\n        type={isPasswordVisible ? \"text\" : \"password\"}\n        className={password({ className })}\n        inputClassName={passwordInput({ className: inputClassName })}\n        rightAddon={\n          <Button\n            id={`${id}-toggle`}\n            buttonType=\"icon\"\n            aria-label={visibilityLabel}\n            aria-pressed={isPasswordVisible}\n            // allow all props except the onClick, className, and aria-pressed to\n            // be overridden. onClick can only stop default behavior with\n            // `event.stopPropagation()`\n            {...visibilityProps}\n            className={passwordInputToggle({\n              className: visibilityProps?.className,\n            })}\n            onClick={(event) => {\n              visibilityProps?.onClick?.(event);\n              if (event.isPropagationStopped()) {\n                return;\n              }\n\n              toggle();\n            }}\n          >\n            {visibilityProps?.children ?? visibilityIcon}\n          </Button>\n        }\n        disableRightAddonStyles\n      />\n    );\n  }\n);\n"],"names":["forwardRef","Button","getIcon","useEnsuredId","useToggle","password","passwordInput","passwordInputToggle","TextField","Password","props","ref","id","propId","name","className","inputClassName","visibilityIcon","propVisibilityIcon","visibilityLabel","visibilityProps","remaining","toggled","isPasswordVisible","toggle","currentVisibilityIcon","visible","invisible","type","rightAddon","buttonType","aria-label","aria-pressed","onClick","event","isPropagationStopped","children","disableRightAddonStyles"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAwB,QAAQ;AACnD,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SACEC,QAAQ,EACRC,aAAa,EACbC,mBAAmB,QACd,sBAAsB;AAC7B,SAASC,SAAS,QAA6B,iBAAiB;AA+GhE;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,yBAAWT,WACtB,SAASS,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAO,UAAU,EACjBC,SAAS,EACTC,cAAc,EACdC,gBAAgBC,kBAAkB,EAClCC,kBAAkB,eAAe,EACjCC,eAAe,EACf,GAAGC,WACJ,GAAGX;IACJ,MAAM,EAAEY,SAASC,iBAAiB,EAAEC,MAAM,EAAE,GAAGpB,UAAU;IAEzD,IAAIqB;IACJ,IACEP,sBACA,OAAOA,uBAAuB,YAC9B,aAAaA,oBACb;QACAO,wBAAwBF,oBACpBL,mBAAmBQ,OAAO,GAC1BR,mBAAmBS,SAAS;IAClC,OAAO,IAAI,OAAOT,uBAAuB,YAAY;QACnDO,wBAAwBP,mBAAmBK;IAC7C,OAAO;QACLE,wBAAwBP;IAC1B;IAEA,MAAMN,KAAKT,aAAaU,QAAQ;IAChC,MAAMI,iBAAiBf,QAAQ,YAAYuB;IAE3C,qBACE,KAACjB;QACE,GAAGa,SAAS;QACbV,KAAKA;QACLG,MAAMA;QACNc,MAAML,oBAAoB,SAAS;QACnCR,WAAWV,SAAS;YAAEU;QAAU;QAChCC,gBAAgBV,cAAc;YAAES,WAAWC;QAAe;QAC1Da,0BACE,KAAC5B;YACCW,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAClBkB,YAAW;YACXC,cAAYZ;YACZa,gBAAcT;YAIb,GAAGH,eAAe;YACnBL,WAAWR,oBAAoB;gBAC7BQ,WAAWK,iBAAiBL;YAC9B;YACAkB,SAAS,CAACC;gBACRd,iBAAiBa,UAAUC;gBAC3B,IAAIA,MAAMC,oBAAoB,IAAI;oBAChC;gBACF;gBAEAX;YACF;sBAECJ,iBAAiBgB,YAAYnB;;QAGlCoB,uBAAuB;;AAG7B,GACA"}
+{"version":3,"sources":["../../src/form/Password.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\nimport {\n  password,\n  passwordInput,\n  passwordInputToggle,\n} from \"./passwordStyles.js\";\n\n/**\n * @example Simple Example\n * ```tsx\n * const getVisibilityIcon: GetPasswordVisibilityIcon = (isPasswordVisible) => {\n *   if (isPasswordVisible) {\n *     return <SecurityIcon />;\n *   }\n *\n *   return <RemoveRedEyeIcon />;\n * };\n * ```\n *\n * @param isPasswordVisible - `true` when the password is visible and in plain\n * text\n * @returns a custom icon to use for the password visibility toggle.\n */\nexport type GetPasswordVisibilityIcon = (\n  isPasswordVisible: boolean\n) => ReactNode;\n\n/**\n * @example Simple Example\n * ```tsx\n * const visibilityIcon: ConfigurableVisibilityIcon = {\n *   visible: <SecurityIcon />,\n *   invisible: <RemoveRedEyeIcon />,\n * };\n * ```\n */\nexport interface ConfigurableVisibilityIcon {\n  /**\n   * The icon to display while the password is currently visible as plain text.\n   */\n  visible: ReactNode;\n\n  /**\n   * The icon to display while the password is currently invisible as the\n   * password input.\n   */\n  invisible: ReactNode;\n}\n\nexport interface PasswordProps\n  extends Omit<TextFieldProps, \"type\" | \"rightAddon\"> {\n  /**\n   * @defaultValue `\"password\"`\n   * @since 6.0.0 Defaults to `\"password\"`\n   */\n  name?: string;\n\n  /**\n   * @example Configurable Visibility Icon Object\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={{\n   *     visible: <SecurityIcon />,\n   *     invisible: <RemoveRedEyeIcon />,\n   *   }}\n   * />\n   * ```\n   *\n   * @example Get Password Visibility Icon Function\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={(isPasswordVisible) => {\n   *     if (isPasswordVisible) {\n   *       return <SecurityIcon />;\n   *     }\n   *\n   *     return <RemoveRedEyeIcon />;\n   *   }}\n   * />\n   * ```\n   *\n   * @example Custom Icon\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={<SomeCustomComponent />}\n   * />\n   * ```\n   */\n  visibilityIcon?:\n    | ConfigurableVisibilityIcon\n    | GetPasswordVisibilityIcon\n    | ReactNode;\n\n  /**\n   * The `aria-label` to use for the password visibility icon button.\n   *\n   * @defaultValue `\"Show password\"`\n   */\n  visibilityLabel?: string;\n\n  /**\n   * Any props that should be passed to the password visibility icon button. If\n   * `id`, `buttonType`, `aria-label`, `aria-pressed`, or `children` are\n   * provided here, they will override the default implementation.\n   */\n  visibilityProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Password } from \"@react-md/core/form/Password\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Password\n *       label=\"Password\"\n *       name=\"password\"\n *       required\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/password | Password Demos}\n */\nexport const Password = forwardRef<HTMLInputElement, PasswordProps>(\n  function Password(props, ref) {\n    const {\n      id: propId,\n      name = \"password\",\n      className,\n      inputClassName,\n      visibilityIcon: propVisibilityIcon,\n      visibilityLabel = \"Show password\",\n      visibilityProps,\n      ...remaining\n    } = props;\n    const { toggled: isPasswordVisible, toggle } = useToggle(false);\n\n    let currentVisibilityIcon: ReactNode;\n    if (\n      propVisibilityIcon &&\n      typeof propVisibilityIcon === \"object\" &&\n      \"visible\" in propVisibilityIcon\n    ) {\n      currentVisibilityIcon = isPasswordVisible\n        ? propVisibilityIcon.visible\n        : propVisibilityIcon.invisible;\n    } else if (typeof propVisibilityIcon === \"function\") {\n      currentVisibilityIcon = propVisibilityIcon(isPasswordVisible);\n    } else {\n      currentVisibilityIcon = propVisibilityIcon;\n    }\n\n    const id = useEnsuredId(propId, \"password\");\n    const visibilityIcon = getIcon(\"password\", currentVisibilityIcon);\n\n    return (\n      <TextField\n        {...remaining}\n        ref={ref}\n        name={name}\n        type={isPasswordVisible ? \"text\" : \"password\"}\n        className={password({ className })}\n        inputClassName={passwordInput({ className: inputClassName })}\n        rightAddon={\n          <Button\n            id={`${id}-toggle`}\n            buttonType=\"icon\"\n            aria-label={visibilityLabel}\n            aria-pressed={isPasswordVisible}\n            // allow all props except the onClick, className, and aria-pressed to\n            // be overridden. onClick can only stop default behavior with\n            // `event.stopPropagation()`\n            {...visibilityProps}\n            className={passwordInputToggle({\n              className: visibilityProps?.className,\n            })}\n            onClick={(event) => {\n              visibilityProps?.onClick?.(event);\n              if (event.isPropagationStopped()) {\n                return;\n              }\n\n              toggle();\n            }}\n          >\n            {visibilityProps?.children ?? visibilityIcon}\n          </Button>\n        }\n        disableRightAddonStyles\n      />\n    );\n  }\n);\n"],"names":["forwardRef","Button","getIcon","useEnsuredId","useToggle","TextField","password","passwordInput","passwordInputToggle","Password","props","ref","id","propId","name","className","inputClassName","visibilityIcon","propVisibilityIcon","visibilityLabel","visibilityProps","remaining","toggled","isPasswordVisible","toggle","currentVisibilityIcon","visible","invisible","type","rightAddon","buttonType","aria-label","aria-pressed","onClick","event","isPropagationStopped","children","disableRightAddonStyles"],"mappings":"AAAA;;AAEA,SAAyBA,UAAU,QAAQ,QAAQ;AAEnD,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,SAAS,QAA6B,iBAAiB;AAChE,SACEC,QAAQ,EACRC,aAAa,EACbC,mBAAmB,QACd,sBAAsB;AA0G7B;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,MAAMC,yBAAWT,WACtB,SAASS,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAO,UAAU,EACjBC,SAAS,EACTC,cAAc,EACdC,gBAAgBC,kBAAkB,EAClCC,kBAAkB,eAAe,EACjCC,eAAe,EACf,GAAGC,WACJ,GAAGX;IACJ,MAAM,EAAEY,SAASC,iBAAiB,EAAEC,MAAM,EAAE,GAAGpB,UAAU;IAEzD,IAAIqB;IACJ,IACEP,sBACA,OAAOA,uBAAuB,YAC9B,aAAaA,oBACb;QACAO,wBAAwBF,oBACpBL,mBAAmBQ,OAAO,GAC1BR,mBAAmBS,SAAS;IAClC,OAAO,IAAI,OAAOT,uBAAuB,YAAY;QACnDO,wBAAwBP,mBAAmBK;IAC7C,OAAO;QACLE,wBAAwBP;IAC1B;IAEA,MAAMN,KAAKT,aAAaU,QAAQ;IAChC,MAAMI,iBAAiBf,QAAQ,YAAYuB;IAE3C,qBACE,KAACpB;QACE,GAAGgB,SAAS;QACbV,KAAKA;QACLG,MAAMA;QACNc,MAAML,oBAAoB,SAAS;QACnCR,WAAWT,SAAS;YAAES;QAAU;QAChCC,gBAAgBT,cAAc;YAAEQ,WAAWC;QAAe;QAC1Da,0BACE,KAAC5B;YACCW,IAAI,GAAGA,GAAG,OAAO,CAAC;YAClBkB,YAAW;YACXC,cAAYZ;YACZa,gBAAcT;YAIb,GAAGH,eAAe;YACnBL,WAAWP,oBAAoB;gBAC7BO,WAAWK,iBAAiBL;YAC9B;YACAkB,SAAS,CAACC;gBACRd,iBAAiBa,UAAUC;gBAC3B,IAAIA,MAAMC,oBAAoB,IAAI;oBAChC;gBACF;gBAEAX;YACF;sBAECJ,iBAAiBgB,YAAYnB;;QAGlCoB,uBAAuB;;AAG7B,GACA"}

package/dist/form/Radio.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type RadioProps } from "./InputToggle.js";
 /**
  * **Client Component**
@@ -6,8 +5,7 @@ import { type RadioProps } from "./InputToggle.js";
  * You'll generally want to use the `useRadioGroup` hook along with this
  * component.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const { value, getRadioProps } = useRadioGroup({ name: "group" });
  *
@@ -19,5 +17,7 @@ import { type RadioProps } from "./InputToggle.js";
  *   </>
  * );
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/radio | Radio Demos}
  */
 export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/form/Radio.js

@@ -8,8 +8,7 @@ import { InputToggle } from "./InputToggle.js";
  * You'll generally want to use the `useRadioGroup` hook along with this
  * component.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const { value, getRadioProps } = useRadioGroup({ name: "group" });
  *
@@ -21,6 +20,8 @@ import { InputToggle } from "./InputToggle.js";
  *   </>
  * );
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/radio | Radio Demos}
  */ export const Radio = /*#__PURE__*/ forwardRef(function Radio(props, ref) {
     return /*#__PURE__*/ _jsx(InputToggle, {
         ...props,

package/dist/form/Radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Radio.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { InputToggle, type RadioProps } from \"./InputToggle.js\";\n\n/**\n * **Client Component**\n *\n * You'll generally want to use the `useRadioGroup` hook along with this\n * component.\n *\n * @example\n * Simple 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 */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  function Radio(props, ref) {\n    return <InputToggle {...props} ref={ref} type=\"radio\" />;\n  }\n);\n"],"names":["forwardRef","InputToggle","Radio","props","ref","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,WAAW,QAAyB,mBAAmB;AAEhE;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,qBAAO,KAACH;QAAa,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AAChD,GACA"}
+{"version":3,"sources":["../../src/form/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { InputToggle, type RadioProps } from \"./InputToggle.js\";\n\n/**\n * **Client Component**\n *\n * You'll generally want to use the `useRadioGroup` hook along with this\n * component.\n *\n * @example Simple 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 * @see {@link https://next.react-md.dev/components/radio | Radio Demos}\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  function Radio(props, ref) {\n    return <InputToggle {...props} ref={ref} type=\"radio\" />;\n  }\n);\n"],"names":["forwardRef","InputToggle","Radio","props","ref","type"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,WAAW,QAAyB,mBAAmB;AAEhE;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,qBAAO,KAACH;QAAa,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AAChD,GACA"}

package/dist/form/ResizingTextAreaWrapper.d.ts

@@ -0,0 +1,19 @@
+import { type CSSProperties, type HTMLAttributes, type Ref, type TextareaHTMLAttributes } from "react";
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface ResizingTextAreaWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    maskId: string;
+    maskRef: Ref<HTMLTextAreaElement>;
+    defaultValue?: TextareaHTMLAttributes<HTMLTextAreaElement>["defaultValue"];
+    rows: number;
+    areaStyle?: CSSProperties;
+    areaClassName?: string;
+    disableTransition?: boolean;
+}
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export declare const ResizingTextAreaWrapper: import("react").ForwardRefExoticComponent<ResizingTextAreaWrapperProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/form/ResizingTextAreaWrapper.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { textArea } from "./textAreaStyles.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */ export const ResizingTextAreaWrapper = /*#__PURE__*/ forwardRef(function ResizingTextAreaWrapper(props, ref) {
+    const { className, rows, maskId, maskRef, areaStyle, areaClassName, defaultValue, disableTransition, children, ...remaining } = props;
+    return /*#__PURE__*/ _jsxs("div", {
+        ...remaining,
+        ref: ref,
+        className: cnb("rmd-textarea-container__inner", !disableTransition && "rmd-textarea-container__inner--animate", className),
+        children: [
+            children,
+            /*#__PURE__*/ _jsx("textarea", {
+                "aria-hidden": true,
+                id: maskId,
+                ref: maskRef,
+                defaultValue: defaultValue,
+                readOnly: true,
+                tabIndex: -1,
+                rows: rows,
+                style: areaStyle,
+                className: textArea({
+                    mask: true,
+                    resize: "auto",
+                    className: areaClassName
+                })
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=ResizingTextAreaWrapper.js.map

package/dist/form/ResizingTextAreaWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/ResizingTextAreaWrapper.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type Ref,\n  type TextareaHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { textArea } from \"./textAreaStyles.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ResizingTextAreaWrapperProps\n  extends HTMLAttributes<HTMLDivElement> {\n  maskId: string;\n  maskRef: Ref<HTMLTextAreaElement>;\n  defaultValue?: TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"];\n  rows: number;\n  areaStyle?: CSSProperties;\n  areaClassName?: string;\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const ResizingTextAreaWrapper = forwardRef<\n  HTMLDivElement,\n  ResizingTextAreaWrapperProps\n>(function ResizingTextAreaWrapper(props, ref) {\n  const {\n    className,\n    rows,\n    maskId,\n    maskRef,\n    areaStyle,\n    areaClassName,\n    defaultValue,\n    disableTransition,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        \"rmd-textarea-container__inner\",\n        !disableTransition && \"rmd-textarea-container__inner--animate\",\n        className\n      )}\n    >\n      {children}\n      <textarea\n        aria-hidden\n        id={maskId}\n        ref={maskRef}\n        defaultValue={defaultValue}\n        readOnly\n        tabIndex={-1}\n        rows={rows}\n        style={areaStyle}\n        className={textArea({\n          mask: true,\n          resize: \"auto\",\n          className: areaClassName,\n        })}\n      />\n    </div>\n  );\n});\n"],"names":["cnb","forwardRef","textArea","ResizingTextAreaWrapper","props","ref","className","rows","maskId","maskRef","areaStyle","areaClassName","defaultValue","disableTransition","children","remaining","div","textarea","aria-hidden","id","readOnly","tabIndex","style","mask","resize"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAKEC,UAAU,QACL,QAAQ;AAEf,SAASC,QAAQ,QAAQ,sBAAsB;AAiB/C;;;CAGC,GACD,OAAO,MAAMC,wCAA0BF,WAGrC,SAASE,wBAAwBC,KAAK,EAAEC,GAAG;IAC3C,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EACjBC,QAAQ,EACR,GAAGC,WACJ,GAAGX;IAEJ,qBACE,MAACY;QACE,GAAGD,SAAS;QACbV,KAAKA;QACLC,WAAWN,IACT,iCACA,CAACa,qBAAqB,0CACtBP;;YAGDQ;0BACD,KAACG;gBACCC,aAAW;gBACXC,IAAIX;gBACJH,KAAKI;gBACLG,cAAcA;gBACdQ,QAAQ;gBACRC,UAAU,CAAC;gBACXd,MAAMA;gBACNe,OAAOZ;gBACPJ,WAAWJ,SAAS;oBAClBqB,MAAM;oBACNC,QAAQ;oBACRlB,WAAWK;gBACb;;;;AAIR,GAAG"}

package/dist/form/Select.d.ts

@@ -1,7 +1,9 @@
-import { type ChangeEvent, type ReactElement, type ReactNode, type Ref } from "react";
+import { type ChangeEvent, type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
+import { type BoxProps } from "../box/Box.js";
 import { type MenuProps } from "../menu/Menu.js";
-import { type TextFieldProps } from "./TextField.js";
-import { type FormFieldOptions, type UserAgentAutoCompleteProps } from "./types.js";
+import { type LabelA11y, type PropsWithRef, type RequireAtLeastOne } from "../types.js";
+import { type TextFieldContainerProps } from "./TextFieldContainer.js";
+import { type UserAgentAutocompleteProps } from "./types.js";
 /**
  * This is a convenience type for casting the `event.currentTarget.value` of a
  * `Select`'s change event to be union of available values.
@@ -11,11 +13,10 @@ import { type FormFieldOptions, type UserAgentAutoCompleteProps } from "./types.
  * invalid value. This also does not work for numbers, so you will need to
  * implement that yourself.
  *
- * @example
- * Simple Usage
+ * @example Simple Usage
  * ```tsx
- * import type { SelectedChangeEvent } from "@react-md/core";
- * import { Select, Option } from "@react-md/core";
+ * import { Select, type SelectChangeEvent } from "@react-md/core/form/Select";
+ * import { Option } from "@react-md/core/form/Option";
  * import type { ReactElement } from "react";
  *
  * type Value = "" | "a" | "b" | "c" | "d";
@@ -43,7 +44,7 @@ import { type FormFieldOptions, type UserAgentAutoCompleteProps } from "./types.
  *   );
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type SelectChangeEvent<Value extends string> = ChangeEvent<HTMLInputElement> & {
     currentTarget: {
@@ -51,16 +52,18 @@ export type SelectChangeEvent<Value extends string> = ChangeEvent<HTMLInputEleme
     };
 };
 /**
- * @remarks \@since 6.0.0 Rewritten with a new API.
+ * @since 6.0.0 Rewritten with a new API.
  */
-export interface SelectProps<Value extends string> extends Omit<TextFieldProps, "placeholder" | "type" | "onChange">, UserAgentAutoCompleteProps, FormFieldOptions {
+export interface SelectProps<Value extends string> extends Omit<TextFieldContainerProps, "label">, Pick<InputHTMLAttributes<HTMLInputElement>, "form" | "required">, UserAgentAutocompleteProps {
     /**
-     * An optional ref to pass to the hidden `<input type="text" />` element that
-     * stores the current value. This is really only useful if you'd like to keep
-     * this component uncontrolled and access the value through
-     * `inputRef.current.value`.
+     * @defaultValue `"select-" + useId()`
      */
-    inputRef?: Ref<HTMLInputElement>;
+    id?: string;
+    /**
+     * Optional placeholder text or element to render while no options have been
+     * selected.
+     */
+    placeholder?: ReactNode;
     /**
      * Set this to a custom dropdown icon or `null` to not render a dropdown icon.
      *
@@ -80,7 +83,27 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldProps,
      */
     defaultValue?: Value;
     /** @see {@link SelectChangeEvent} */
-    onChange?(event: SelectChangeEvent<Value>): void;
+    onChange?: (event: SelectChangeEvent<Value>) => void;
+    /**
+     * An optional floating label to display like other form fields.
+     */
+    label?: ReactNode;
+    /**
+     * Optional props to pass to the `<span>` that surrounds the {@link label}
+     */
+    labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+    /**
+     * An optional ref to pass to the hidden `<input type="text" />` element that
+     * stores the current value. This is really only useful if you'd like to keep
+     * this component uncontrolled and access the value through
+     * `inputRef.current.value`.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * A ref for the container `<div>` element.
+     */
+    containerRef?: Ref<HTMLDivElement>;
     /**
      * Any additional props to provide to the `Menu` component that renders all
      * the `Option`s.
@@ -88,25 +111,40 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldProps,
      * The menu will always have these default values unless explicity
      * overwritten by this prop:
      *
-     * - `aria-labelledby={containerId}`
+     * - `aria-labelledby={label ? labelId : id}` -- this will be undefined if
+     *   `aria-label` is provided
      * - `anchor={BELOW_CENTER_ANCHOR}`
      * - `width="min"`
      */
-    menuProps?: Omit<MenuProps, "visible" | "onRequestClose" | "fixedTo">;
+    menuProps?: PropsWithRef<Omit<MenuProps, "visible" | "onRequestClose" | "fixedTo">, HTMLDivElement>;
     /**
-     * Set this to `true` to update all the `Option` components to no longer
-     * render an icon while selected.
+     * Any additional props to pass to the div that contains the current visible
+     * option.
+     */
+    selectedOptionProps?: BoxProps;
+    /**
+     * Set this to `true` if all the `Option` components should display the
+     * selected icon after the children instead of before.
+     *
+     * @see {@link disableSelectedIcon} to remove the selected icon instead.
      *
      * @defaultValue `false`
      */
-    disableSelectedIcon?: boolean;
+    selectedIconAfter?: boolean;
     /**
      * Set this to `true` to prevent the current option from rendering the
      * `leftAddon` in the `TextFieldContainer`.
      *
      * @defaultValue `false`
      */
-    disableValueAddon?: boolean;
+    disableOptionAddon?: boolean;
+    /**
+     * Set this to `true` to update all the `Option` components to no longer
+     * render an icon while selected.
+     *
+     * @defaultValue `false`
+     */
+    disableSelectedIcon?: boolean;
     /**
      * This should be the available `Option`s for the select to choose from. It
      * can also contain `OptGroup` or any other elements but only clicking on an
@@ -117,6 +155,32 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldProps,
 /**
  * **Client Component**
  *
- * @remarks \@since 6.0.0 Rewritten with a new API.
+ * @example Simple Example
+ * ```tsx
+ * import { Option } from "@react-md/core/form/Option";
+ * import { Select } from "@react-md/core/form/Select";
+ * import { useState, type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [value, setValue] = useState("");
+ *
+ *   return (
+ *     <Select
+ *       label="Select"
+ *       value={value}
+ *       onChange={(event) => setValue(event.currentTarget.value)}
+ *       placeholder="Select a value"
+ *     >
+ *       <Option value="a">Option 1</Option>
+ *       <Option value="b">Option 2</Option>
+ *       <Option value="c">Option 3</Option>
+ *       <Option value="d">Option 4</Option>
+ *     </Select>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/select | Select Demos}
+ * @since 6.0.0 Rewritten with a new API.
  */
-export declare function Select<Value extends string>(props: SelectProps<Value>): ReactElement;
+export declare function Select<Value extends string>(props: RequireAtLeastOne<SelectProps<Value>, "label" | keyof LabelA11y>): ReactElement;