@react-md/core 6.5.1 → 7.0.0

package/dist/form/Label.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement } from "react";
 import { type LabelProps } from "./types.js";
 /**
  * Most of the form components already use this `Label` internally when a
@@ -11,4 +12,4 @@ import { type LabelProps } from "./types.js";
  * @since 6.0.0 Updated to be usable externally and combines the
  * floating label styles instead of having separate components.
  */
-export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare function Label(props: LabelProps): ReactElement;

package/dist/form/Label.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { label } from "./labelStyles.js";
 /**
  * Most of the form components already use this `Label` internally when a
@@ -12,8 +11,8 @@ import { label } from "./labelStyles.js";
  * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}
  * @since 6.0.0 Updated to be usable externally and combines the
  * floating label styles instead of having separate components.
- */ export const Label = /*#__PURE__*/ forwardRef(function Label(props, ref) {
-    const { gap, error, dense, active, stacked, reversed, disabled, floating, inactive, floatingActive = active, className, children, ...remaining } = props;
+ */ export function Label(props) {
+    const { ref, gap, error, dense, active, stacked, reversed, disabled, floating, inactive, floatingActive = active, className, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("label", {
         ref: ref,
         ...remaining,
@@ -32,6 +31,6 @@ import { label } from "./labelStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Label.js.map

package/dist/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { label } from \"./labelStyles.js\";\nimport { type LabelProps } from \"./types.js\";\n\n/**\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @see {@link https://react-md.dev/components/select | Select Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}\n * @since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(props, ref) {\n    const {\n      gap,\n      error,\n      dense,\n      active,\n      stacked,\n      reversed,\n      disabled,\n      floating,\n      inactive,\n      floatingActive = active,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <label\n        ref={ref}\n        {...remaining}\n        className={label({\n          gap,\n          error,\n          dense,\n          active,\n          stacked,\n          reversed,\n          disabled,\n          floating,\n          floatingActive,\n          inactive,\n          className,\n        })}\n      >\n        {children}\n      </label>\n    );\n  }\n);\n"],"names":["forwardRef","label","Label","props","ref","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","className","children","remaining"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,KAAK,QAAQ,mBAAmB;AAGzC;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBN,MAAM,EACvBO,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGd;IAEJ,qBACE,KAACF;QACCG,KAAKA;QACJ,GAAGa,SAAS;QACbF,WAAWd,MAAM;YACfI;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAE;QACF;kBAECC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Label.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\n\nimport { label } from \"./labelStyles.js\";\nimport { type LabelProps } from \"./types.js\";\n\n/**\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @see {@link https://react-md.dev/components/select | Select Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}\n * @since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport function Label(props: LabelProps): ReactElement {\n  const {\n    ref,\n    gap,\n    error,\n    dense,\n    active,\n    stacked,\n    reversed,\n    disabled,\n    floating,\n    inactive,\n    floatingActive = active,\n    className,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <label\n      ref={ref}\n      {...remaining}\n      className={label({\n        gap,\n        error,\n        dense,\n        active,\n        stacked,\n        reversed,\n        disabled,\n        floating,\n        floatingActive,\n        inactive,\n        className,\n      })}\n    >\n      {children}\n    </label>\n  );\n}\n"],"names":["label","Label","props","ref","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","className","children","remaining"],"mappings":";AAEA,SAASA,KAAK,QAAQ,mBAAmB;AAGzC;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,MAAMC,KAAiB;IACrC,MAAM,EACJC,GAAG,EACHC,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBN,MAAM,EACvBO,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGd;IAEJ,qBACE,KAACF;QACCG,KAAKA;QACJ,GAAGa,SAAS;QACbF,WAAWd,MAAM;YACfI;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAE;QACF;kBAECC;;AAGP"}

package/dist/form/Legend.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement, type Ref } from "react";
 import { type TypographyProps } from "../typography/Typography.js";
 import { type LegendClassNameOptions } from "./legendStyles.js";
 /**
@@ -5,6 +6,7 @@ import { type LegendClassNameOptions } from "./legendStyles.js";
  * @since 6.4.0 Extends the `LegendClassNameOptions`
  */
 export interface LegendProps extends TypographyProps, LegendClassNameOptions {
+    ref?: Ref<HTMLLegendElement>;
 }
 /**
  * This should be used within a `Fieldset` to apply a label.
@@ -36,4 +38,4 @@ export interface LegendProps extends TypographyProps, LegendClassNameOptions {
  * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
  * @since 6.0.0
  */
-export declare const Legend: import("react").ForwardRefExoticComponent<LegendProps & import("react").RefAttributes<HTMLLegendElement>>;
+export declare function Legend(props: LegendProps): ReactElement;

package/dist/form/Legend.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Typography } from "../typography/Typography.js";
 import { legend } from "./legendStyles.js";
 /**
@@ -31,8 +30,8 @@ import { legend } from "./legendStyles.js";
  *
  * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
  * @since 6.0.0
- */ export const Legend = /*#__PURE__*/ forwardRef(function Legend(props, ref) {
-    const { srOnly, floating, theme, gap, dense, active, error, disabled, stacked, reversed, className, children, ...remaining } = props;
+ */ export function Legend(props) {
+    const { ref, srOnly, floating, theme, gap, dense, active, error, disabled, stacked, reversed, className, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx(Typography, {
         ...remaining,
         as: "legend",
@@ -52,6 +51,6 @@ import { legend } from "./legendStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Legend.js.map

package/dist/form/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Legend.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type LegendClassNameOptions, legend } from \"./legendStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.4.0 Extends the `LegendClassNameOptions`\n */\nexport interface LegendProps extends TypographyProps, LegendClassNameOptions {}\n\n/**\n * This should be used within a `Fieldset` to apply a label.\n *\n * @example Simple Example\n * ```tsx\n * <Fieldset>\n *   <Legend>I am legend</Legend>\n *   {children}\n * </Fieldset>\n * ```\n *\n * @example Visible to Screen readers only\n * ```tsx\n * <Fieldset>\n *   <Legend srOnly>I am legend</Legend>\n *   {children}\n * </Fieldset>\n * ```\n *\n * @example Acting as a floating label\n * ```tsx\n * <Fieldset floatingLegend>\n *   <Legend floating>I am legend</Legend>\n *   {children}\n * </Fieldset>\n * ```\n *\n * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}\n * @since 6.0.0\n */\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  function Legend(props, ref) {\n    const {\n      srOnly,\n      floating,\n      theme,\n      gap,\n      dense,\n      active,\n      error,\n      disabled,\n      stacked,\n      reversed,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        as=\"legend\"\n        ref={ref}\n        className={legend({\n          srOnly,\n          floating,\n          theme,\n          gap,\n          dense,\n          active,\n          error,\n          disabled,\n          stacked,\n          reversed,\n          className,\n        })}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["forwardRef","Typography","legend","Legend","props","ref","srOnly","floating","theme","gap","dense","active","error","disabled","stacked","reversed","className","children","remaining","as"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,UAAU,QAA8B,8BAA8B;AAC/E,SAAsCC,MAAM,QAAQ,oBAAoB;AAQxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,GAAG,EACHC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGd;IAEJ,qBACE,KAACH;QACE,GAAGiB,SAAS;QACbC,IAAG;QACHd,KAAKA;QACLW,WAAWd,OAAO;YAChBI;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Legend.tsx"],"sourcesContent":["import { type ReactElement, type Ref } from \"react\";\n\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type LegendClassNameOptions, legend } from \"./legendStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.4.0 Extends the `LegendClassNameOptions`\n */\nexport interface LegendProps extends TypographyProps, LegendClassNameOptions {\n  ref?: Ref<HTMLLegendElement>;\n}\n\n/**\n * This should be used within a `Fieldset` to apply a label.\n *\n * @example Simple Example\n * ```tsx\n * <Fieldset>\n *   <Legend>I am legend</Legend>\n *   {children}\n * </Fieldset>\n * ```\n *\n * @example Visible to Screen readers only\n * ```tsx\n * <Fieldset>\n *   <Legend srOnly>I am legend</Legend>\n *   {children}\n * </Fieldset>\n * ```\n *\n * @example Acting as a floating label\n * ```tsx\n * <Fieldset floatingLegend>\n *   <Legend floating>I am legend</Legend>\n *   {children}\n * </Fieldset>\n * ```\n *\n * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}\n * @since 6.0.0\n */\nexport function Legend(props: LegendProps): ReactElement {\n  const {\n    ref,\n    srOnly,\n    floating,\n    theme,\n    gap,\n    dense,\n    active,\n    error,\n    disabled,\n    stacked,\n    reversed,\n    className,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <Typography\n      {...remaining}\n      as=\"legend\"\n      ref={ref}\n      className={legend({\n        srOnly,\n        floating,\n        theme,\n        gap,\n        dense,\n        active,\n        error,\n        disabled,\n        stacked,\n        reversed,\n        className,\n      })}\n    >\n      {children}\n    </Typography>\n  );\n}\n"],"names":["Typography","legend","Legend","props","ref","srOnly","floating","theme","gap","dense","active","error","disabled","stacked","reversed","className","children","remaining","as"],"mappings":";AAEA,SAASA,UAAU,QAA8B,8BAA8B;AAC/E,SAAsCC,MAAM,QAAQ,oBAAoB;AAUxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EACJC,GAAG,EACHC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,GAAG,EACHC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGd;IAEJ,qBACE,KAACH;QACE,GAAGiB,SAAS;QACbC,IAAG;QACHd,KAAKA;QACLW,WAAWd,OAAO;YAChBI;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP"}

package/dist/form/NativeSelect.d.ts

@@ -1,10 +1,11 @@
-import { type CSSProperties, type HTMLAttributes, type ReactNode, type SelectHTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes, type ReactElement, type ReactNode, type Ref, type SelectHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type FormFieldOptions, type UserAgentAutocompleteProps } from "./types.js";
 /**
  * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
  */
 export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">, UserAgentAutocompleteProps, FormFieldOptions {
+    ref?: Ref<HTMLSelectElement>;
     /**
      * A custom dropdown icon to use instead of the browser's default select
      * dropdown icon.
@@ -84,4 +85,4 @@ export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectE
  *
  * @see {@link https://react-md.dev/components/native-select | NativeSelect Demos}
  */
-export declare const NativeSelect: import("react").ForwardRefExoticComponent<NativeSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+export declare function NativeSelect(props: NativeSelectProps): ReactElement;

package/dist/form/NativeSelect.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { getIcon } from "../icon/config.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";
@@ -51,8 +50,8 @@ import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
  * ```
  *
  * @see {@link https://react-md.dev/components/native-select | NativeSelect Demos}
- */ export const NativeSelect = /*#__PURE__*/ forwardRef(function NativeSelect(props, ref) {
-    const { id: propId, style, className, icon: propIcon, label, labelProps, labelStyle, labelClassName, selectStyle, selectClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense, error, active, inline, leftAddon, rightAddon: propRightAddon, leftAddonProps, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, theme: propTheme, underlineDirection: propUnderlineDirection, messageProps, messageContainerProps, containerProps, children, ...remaining } = props;
+ */ export function NativeSelect(props) {
+    const { ref, id: propId, style, className, icon: propIcon, label, labelProps, labelStyle, labelClassName, selectStyle, selectClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense, error, active, inline, leftAddon, rightAddon: propRightAddon, leftAddonProps, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, theme: propTheme, underlineDirection: propUnderlineDirection, messageProps, messageContainerProps, containerProps, children, ...remaining } = props;
     const { disabled, readOnly, multiple } = props;
     const id = useEnsuredId(propId, "select");
     const theme = getFormConfig("theme", propTheme);
@@ -125,6 +124,6 @@ import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
             ]
         })
     });
-});
+}
 
 //# sourceMappingURL=NativeSelect.js.map

package/dist/form/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type SelectHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\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 { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}\n */\nexport interface NativeSelectProps\n  extends\n    Omit<SelectHTMLAttributes<HTMLSelectElement>, \"autoComplete\">,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  /**\n   * A custom dropdown icon to use instead of the browser's default select\n   * dropdown icon.\n   *\n   * Set this to `null` if the browser's default icon should be used instead.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * This applies custom inline styles to the `<select>` element since the\n   * `style` prop is applied to the container element instead.\n   */\n  selectStyle?: CSSProperties;\n\n  /**\n   * This applies custom className to the `<select>` element since the\n   * `className` prop is applied to the container element instead.\n   */\n  selectClassName?: string;\n\n  /**\n   * This should be a list of `<option>` elements for specific values within the\n   * `<select>`.\n   *\n   * Check out the {@link NativeSelect} for examples around using \"placeholder\"\n   * text and requiring a value to be selected.\n   */\n  children: ReactNode;\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>>;\n}\n\n/**\n * This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n *\n * @example Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n *   <option value=\"a\">Value 1</option>\n *   <option value=\"b\">Value 2</option>\n *   <option value=\"c\">Value 3</option>\n *   <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n *\n * @example Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n *   // using `defaultValue=\"\"` makes it so the first option selected by default\n *   // and considered an \"invalid\" value since it is `disabled`\n *   //\n *   // a `name` must be set with `required` so that the form validation will\n *   // fire if the value is still the empty string when the form is submitted\n *   //\n *   // the first `<option>` is kind of like placeholder text since it doesn't\n *   // have a value and is disabled by default\n *\n *   return (\n *     <NativeSelect\n *       label=\"State\"\n *       name=\"state\"\n *       required\n *       defaultValue=\"\"\n *     >\n *       <option value=\"\" disabled>Choose a state</option>\n *       {states.map(({ name, code }) => (\n *         <option key={code} value={code}>{name}</option>\n *       ))}\n *     </NativeSelect>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/native-select | NativeSelect Demos}\n */\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n  function NativeSelect(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      icon: propIcon,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      selectStyle,\n      selectClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense,\n      error,\n      active,\n      inline,\n      leftAddon,\n      rightAddon: propRightAddon,\n      leftAddonProps,\n      rightAddonProps,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled, readOnly, multiple } = props;\n    const id = useEnsuredId(propId, \"select\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const icon = getIcon(\"dropdown\", propIcon);\n    const underlined = theme === \"underline\" || theme === \"filled\";\n\n    let rightAddon = propRightAddon;\n    if (propRightAddon === undefined && !multiple) {\n      rightAddon = icon;\n    }\n\n    return (\n      <FormMessageContainer\n        inline={inline}\n        {...messageContainerProps}\n        messageProps={\n          messageProps && {\n            error,\n            theme,\n            ...messageProps,\n          }\n        }\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={nativeSelectContainer({\n            label: !!label,\n            multiple,\n            underlined,\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          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          <select\n            {...remaining}\n            id={id}\n            ref={ref}\n            autoComplete={autoComplete}\n            name={name}\n            disabled={disabled}\n            style={selectStyle}\n            className={nativeSelect({\n              icon: !!icon,\n              className: selectClassName,\n            })}\n          >\n            {children}\n          </select>\n          {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        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","undefined","select","htmlFor","floating"],"mappings":";AAAA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAqD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASS,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGpC;IACJ,MAAM,EAAEqC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGvC;IACzC,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAMyB,QAAQhC,cAAc,SAASiC;IACrC,MAAMC,qBAAqBlC,cACzB,sBACAmC;IAEF,MAAMzB,OAAOf,QAAQ,YAAYgB;IACjC,MAAMiC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAIA,mBAAmBkB,aAAa,CAACF,UAAU;QAC7CjB,aAAahB;IACf;IAEA,qBACE,KAACb;QACC2B,QAAQA;QACP,GAAGa,qBAAqB;QACzBD,cACEA,gBAAgB;YACdd;YACAU;YACA,GAAGI,YAAY;QACjB;kBAGF,cAAA,MAACrC;YACE,GAAGuC,cAAc;YAClB9B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACT+B;gBACAC;gBACAnC;YACF;YACAuB,OAAOA;YACPpB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRmB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACe;oBACE,GAAGN,SAAS;oBACblC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNqB,UAAUA;oBACVjC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECsB;;gBAEF3B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdkC,SAASzC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCiC,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRkB,UAAUA;8BAET7B;;;;;AAMb,GACA"}
+{"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type SelectHTMLAttributes,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\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 { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}\n */\nexport interface NativeSelectProps\n  extends\n    Omit<SelectHTMLAttributes<HTMLSelectElement>, \"autoComplete\">,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  ref?: Ref<HTMLSelectElement>;\n\n  /**\n   * A custom dropdown icon to use instead of the browser's default select\n   * dropdown icon.\n   *\n   * Set this to `null` if the browser's default icon should be used instead.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * This applies custom inline styles to the `<select>` element since the\n   * `style` prop is applied to the container element instead.\n   */\n  selectStyle?: CSSProperties;\n\n  /**\n   * This applies custom className to the `<select>` element since the\n   * `className` prop is applied to the container element instead.\n   */\n  selectClassName?: string;\n\n  /**\n   * This should be a list of `<option>` elements for specific values within the\n   * `<select>`.\n   *\n   * Check out the {@link NativeSelect} for examples around using \"placeholder\"\n   * text and requiring a value to be selected.\n   */\n  children: ReactNode;\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>>;\n}\n\n/**\n * This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n *\n * @example Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n *   <option value=\"a\">Value 1</option>\n *   <option value=\"b\">Value 2</option>\n *   <option value=\"c\">Value 3</option>\n *   <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n *\n * @example Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n *   // using `defaultValue=\"\"` makes it so the first option selected by default\n *   // and considered an \"invalid\" value since it is `disabled`\n *   //\n *   // a `name` must be set with `required` so that the form validation will\n *   // fire if the value is still the empty string when the form is submitted\n *   //\n *   // the first `<option>` is kind of like placeholder text since it doesn't\n *   // have a value and is disabled by default\n *\n *   return (\n *     <NativeSelect\n *       label=\"State\"\n *       name=\"state\"\n *       required\n *       defaultValue=\"\"\n *     >\n *       <option value=\"\" disabled>Choose a state</option>\n *       {states.map(({ name, code }) => (\n *         <option key={code} value={code}>{name}</option>\n *       ))}\n *     </NativeSelect>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/native-select | NativeSelect Demos}\n */\nexport function NativeSelect(props: NativeSelectProps): ReactElement {\n  const {\n    ref,\n    id: propId,\n    style,\n    className,\n    icon: propIcon,\n    label,\n    labelProps,\n    labelStyle,\n    labelClassName,\n    selectStyle,\n    selectClassName,\n    autoCompleteValue,\n    autoComplete = autoCompleteValue,\n    name = autoCompleteValue,\n    dense,\n    error,\n    active,\n    inline,\n    leftAddon,\n    rightAddon: propRightAddon,\n    leftAddonProps,\n    rightAddonProps,\n    disableLeftAddonStyles,\n    disableRightAddonStyles,\n    theme: propTheme,\n    underlineDirection: propUnderlineDirection,\n    messageProps,\n    messageContainerProps,\n    containerProps,\n    children,\n    ...remaining\n  } = props;\n  const { disabled, readOnly, multiple } = props;\n  const id = useEnsuredId(propId, \"select\");\n  const theme = getFormConfig(\"theme\", propTheme);\n  const underlineDirection = getFormConfig(\n    \"underlineDirection\",\n    propUnderlineDirection\n  );\n  const icon = getIcon(\"dropdown\", propIcon);\n  const underlined = theme === \"underline\" || theme === \"filled\";\n\n  let rightAddon = propRightAddon;\n  if (propRightAddon === undefined && !multiple) {\n    rightAddon = icon;\n  }\n\n  return (\n    <FormMessageContainer\n      inline={inline}\n      {...messageContainerProps}\n      messageProps={\n        messageProps && {\n          error,\n          theme,\n          ...messageProps,\n        }\n      }\n    >\n      <TextFieldContainer\n        {...containerProps}\n        style={style}\n        className={nativeSelectContainer({\n          label: !!label,\n          multiple,\n          underlined,\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        leftAddonProps={leftAddonProps}\n        rightAddon={rightAddon}\n        rightAddonProps={rightAddonProps}\n        underlineDirection={underlineDirection}\n        disableLeftAddonStyles={disableLeftAddonStyles}\n        disableRightAddonStyles={disableRightAddonStyles}\n      >\n        <select\n          {...remaining}\n          id={id}\n          ref={ref}\n          autoComplete={autoComplete}\n          name={name}\n          disabled={disabled}\n          style={selectStyle}\n          className={nativeSelect({\n            icon: !!icon,\n            className: selectClassName,\n          })}\n        >\n          {children}\n        </select>\n        {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      </TextFieldContainer>\n    </FormMessageContainer>\n  );\n}\n"],"names":["getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","undefined","select","htmlFor","floating"],"mappings":";AASA,SAASA,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAuD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EACJC,GAAG,EACHC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGpC;IACJ,MAAM,EAAEqC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGvC;IACzC,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAMyB,QAAQhC,cAAc,SAASiC;IACrC,MAAMC,qBAAqBlC,cACzB,sBACAmC;IAEF,MAAMzB,OAAOf,QAAQ,YAAYgB;IACjC,MAAMiC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAIA,mBAAmBkB,aAAa,CAACF,UAAU;QAC7CjB,aAAahB;IACf;IAEA,qBACE,KAACb;QACC2B,QAAQA;QACP,GAAGa,qBAAqB;QACzBD,cACEA,gBAAgB;YACdd;YACAU;YACA,GAAGI,YAAY;QACjB;kBAGF,cAAA,MAACrC;YACE,GAAGuC,cAAc;YAClB9B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACT+B;gBACAC;gBACAnC;YACF;YACAuB,OAAOA;YACPpB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRmB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACe;oBACE,GAAGN,SAAS;oBACblC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNqB,UAAUA;oBACVjC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECsB;;gBAEF3B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdkC,SAASzC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCiC,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRkB,UAAUA;8BAET7B;;;;;AAMb"}

package/dist/form/OptGroup.d.ts

@@ -1,9 +1,10 @@
-import { type ReactNode } from "react";
+import { type ReactElement, type ReactNode, type Ref } from "react";
 import { type ListElement, type ListProps } from "../list/List.js";
 import { type ListSubheaderProps } from "../list/ListSubheader.js";
 import { type PropsWithRef } from "../types.js";
 /** @since 6.0.0 */
 export interface OptGroupProps extends Omit<ListProps, "role"> {
+    ref?: Ref<ListElement>;
     /**
      * This is really the `children` to display in a `ListSubheader` that
      * describes the optgroup. It was named `label` to match the native
@@ -58,4 +59,4 @@ export interface OptGroupProps extends Omit<ListProps, "role"> {
  * @see {@link https://react-md.dev/components/select | Select Demos}
  * @since 6.0.0
  */
-export declare const OptGroup: import("react").ForwardRefExoticComponent<OptGroupProps & import("react").RefAttributes<ListElement>>;
+export declare function OptGroup(props: OptGroupProps): ReactElement;

package/dist/form/OptGroup.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { ListSubheader } from "../list/ListSubheader.js";
 import { MenuItemGroup } from "../menu/MenuItemGroup.js";
 import { useEnsuredId } from "../useEnsuredId.js";
@@ -39,8 +38,8 @@ import { useEnsuredId } from "../useEnsuredId.js";
  *
  * @see {@link https://react-md.dev/components/select | Select Demos}
  * @since 6.0.0
- */ export const OptGroup = /*#__PURE__*/ forwardRef(function OptGroup(props, ref) {
-    const { children, label, labelProps, ...remaining } = props;
+ */ export function OptGroup(props) {
+    const { ref, children, label, labelProps, ...remaining } = props;
     const labelId = useEnsuredId(labelProps?.id, "optgroup");
     return /*#__PURE__*/ _jsxs(MenuItemGroup, {
         "aria-labelledby": labelId,
@@ -55,6 +54,6 @@ import { useEnsuredId } from "../useEnsuredId.js";
             children
         ]
     });
-});
+}
 
 //# sourceMappingURL=OptGroup.js.map

package/dist/form/OptGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/OptGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport {\n  ListSubheader,\n  type ListSubheaderProps,\n} from \"../list/ListSubheader.js\";\nimport { MenuItemGroup } from \"../menu/MenuItemGroup.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/** @since 6.0.0 */\nexport interface OptGroupProps extends Omit<ListProps, \"role\"> {\n  /**\n   * This is really the `children` to display in a `ListSubheader` that\n   * describes the optgroup. It was named `label` to match the native\n   * `<optgroup>` element.\n   *\n   * @see {@link labelProps} for additional styling and options.\n   */\n  label: ReactNode;\n\n  /**\n   * This can be used to apply any additional props to the `ListSubheader` that\n   * describes the group of options.\n   */\n  labelProps?: PropsWithRef<Omit<ListSubheaderProps, \"role\" | \"children\">>;\n\n  /**\n   * This should be any `Option`s to display within the group.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is more of a \"convenience component\" to help enforce the\n * correct accessibility when creating an `<optgroup>` with the `Select`\n * component.\n *\n * @example Simple Example\n * ```tsx\n * import { Select } from \"@react-md/core/form/Select\";\n * import { OptGroup } from \"@react-md/core/form/OptGroup\";\n * import { Option } from \"@react-md/core/form/Option\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Select label=\"Choose an animal\">\n *       <OptGroup label=\"Land\" labelProps={{ className: \"custom-class-name\" }}>\n *         <Option value={0}>Cat</Option>\n *         <Option value={1}>Dog</Option>\n *         <Option value={2}>Tiger</Option>\n *       </OptGroup>\n *       <OptGroup label=\"Water\" labelProps={{ rightAddon: <FavoriteIcon /> }}>\n *         <Option value={3}>Dolphin</Option>\n *         <Option value={4}>Flounder</Option>\n *       </OptGroup>\n *     </Select>\n *\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/select | Select Demos}\n * @since 6.0.0\n */\nexport const OptGroup = forwardRef<ListElement, OptGroupProps>(\n  function OptGroup(props, ref) {\n    const { children, label, labelProps, ...remaining } = props;\n    const labelId = useEnsuredId(labelProps?.id, \"optgroup\");\n\n    return (\n      <MenuItemGroup aria-labelledby={labelId} {...remaining} ref={ref}>\n        <ListSubheader {...labelProps} id={labelId}>\n          {label}\n        </ListSubheader>\n        {children}\n      </MenuItemGroup>\n    );\n  }\n);\n"],"names":["forwardRef","ListSubheader","MenuItemGroup","useEnsuredId","OptGroup","props","ref","children","label","labelProps","remaining","labelId","id","aria-labelledby"],"mappings":"AAAA;;AAEA,SAAyBA,UAAU,QAAQ,QAAQ;AAGnD,SACEC,aAAa,QAER,2BAA2B;AAClC,SAASC,aAAa,QAAQ,2BAA2B;AAEzD,SAASC,YAAY,QAAQ,qBAAqB;AAyBlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,MAAMC,yBAAWJ,WACtB,SAASI,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGC,WAAW,GAAGL;IACtD,MAAMM,UAAUR,aAAaM,YAAYG,IAAI;IAE7C,qBACE,MAACV;QAAcW,mBAAiBF;QAAU,GAAGD,SAAS;QAAEJ,KAAKA;;0BAC3D,KAACL;gBAAe,GAAGQ,UAAU;gBAAEG,IAAID;0BAChCH;;YAEFD;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/OptGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode, type Ref } from \"react\";\n\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport {\n  ListSubheader,\n  type ListSubheaderProps,\n} from \"../list/ListSubheader.js\";\nimport { MenuItemGroup } from \"../menu/MenuItemGroup.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/** @since 6.0.0 */\nexport interface OptGroupProps extends Omit<ListProps, \"role\"> {\n  ref?: Ref<ListElement>;\n\n  /**\n   * This is really the `children` to display in a `ListSubheader` that\n   * describes the optgroup. It was named `label` to match the native\n   * `<optgroup>` element.\n   *\n   * @see {@link labelProps} for additional styling and options.\n   */\n  label: ReactNode;\n\n  /**\n   * This can be used to apply any additional props to the `ListSubheader` that\n   * describes the group of options.\n   */\n  labelProps?: PropsWithRef<Omit<ListSubheaderProps, \"role\" | \"children\">>;\n\n  /**\n   * This should be any `Option`s to display within the group.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is more of a \"convenience component\" to help enforce the\n * correct accessibility when creating an `<optgroup>` with the `Select`\n * component.\n *\n * @example Simple Example\n * ```tsx\n * import { Select } from \"@react-md/core/form/Select\";\n * import { OptGroup } from \"@react-md/core/form/OptGroup\";\n * import { Option } from \"@react-md/core/form/Option\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Select label=\"Choose an animal\">\n *       <OptGroup label=\"Land\" labelProps={{ className: \"custom-class-name\" }}>\n *         <Option value={0}>Cat</Option>\n *         <Option value={1}>Dog</Option>\n *         <Option value={2}>Tiger</Option>\n *       </OptGroup>\n *       <OptGroup label=\"Water\" labelProps={{ rightAddon: <FavoriteIcon /> }}>\n *         <Option value={3}>Dolphin</Option>\n *         <Option value={4}>Flounder</Option>\n *       </OptGroup>\n *     </Select>\n *\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/select | Select Demos}\n * @since 6.0.0\n */\nexport function OptGroup(props: OptGroupProps): ReactElement {\n  const { ref, children, label, labelProps, ...remaining } = props;\n  const labelId = useEnsuredId(labelProps?.id, \"optgroup\");\n\n  return (\n    <MenuItemGroup aria-labelledby={labelId} {...remaining} ref={ref}>\n      <ListSubheader {...labelProps} id={labelId}>\n        {label}\n      </ListSubheader>\n      {children}\n    </MenuItemGroup>\n  );\n}\n"],"names":["ListSubheader","MenuItemGroup","useEnsuredId","OptGroup","props","ref","children","label","labelProps","remaining","labelId","id","aria-labelledby"],"mappings":"AAAA;;AAKA,SACEA,aAAa,QAER,2BAA2B;AAClC,SAASC,aAAa,QAAQ,2BAA2B;AAEzD,SAASC,YAAY,QAAQ,qBAAqB;AA2BlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGC,WAAW,GAAGL;IAC3D,MAAMM,UAAUR,aAAaM,YAAYG,IAAI;IAE7C,qBACE,MAACV;QAAcW,mBAAiBF;QAAU,GAAGD,SAAS;QAAEJ,KAAKA;;0BAC3D,KAACL;gBAAe,GAAGQ,UAAU;gBAAEG,IAAID;0BAChCH;;YAEFD;;;AAGP"}

package/dist/form/Option.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ReactElement, type ReactNode, type Ref } from "react";
 import { type TextIconSpacingProps } from "../icon/TextIconSpacing.js";
 import { type MenuItemProps } from "../menu/MenuItem.js";
 /**
@@ -42,6 +42,7 @@ export interface OptionSelectedIconProps {
  * `selectedIconAfter`, and `iconSpacingProps` props.
  */
 export interface OptionProps extends MenuItemProps, OptionSelectedIconProps {
+    ref?: Ref<HTMLLIElement>;
     /**
      * @defaultValue `"option"`
      */
@@ -108,4 +109,4 @@ export interface OptionProps extends MenuItemProps, OptionSelectedIconProps {
  * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
  * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.
  */
-export declare const Option: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare function Option(props: OptionProps): ReactElement;

package/dist/form/Option.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { Fragment, forwardRef } from "react";
+import { Fragment } from "react";
 import { TextIconSpacing } from "../icon/TextIconSpacing.js";
 import { getIcon } from "../icon/config.js";
 import { icon } from "../icon/styles.js";
@@ -35,8 +35,8 @@ const noop = ()=>{
  * @since 6.0.0 removed the `selected` and `focused` props.
  * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
  * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.
- */ export const Option = /*#__PURE__*/ forwardRef(function Option(props, ref) {
-    const { id: propId, role = "option", value, children: propChildren, onClick = noop, className, selectedClassName, selectedIcon: propSelectedIcon, unselectedIcon: propUnselectedIcon, selectedIconAfter: propSelectedIconAfter, disableSelectedIcon: propDisableSelectedIcon, textIconSpacingProps, leftAddon: propLeftAddon, leftAddonType, leftAddonClassName, rightAddon: propRightAddon, rightAddonType, rightAddonClassName, secondaryText, height: propHeight, disableTextChildren: propDisableTextChildren, ...remaining } = props;
+ */ export function Option(props) {
+    const { ref, id: propId, role = "option", value, children: propChildren, onClick = noop, className, selectedClassName, selectedIcon: propSelectedIcon, unselectedIcon: propUnselectedIcon, selectedIconAfter: propSelectedIconAfter, disableSelectedIcon: propDisableSelectedIcon, textIconSpacingProps, leftAddon: propLeftAddon, leftAddonType, leftAddonClassName, rightAddon: propRightAddon, rightAddonType, rightAddonClassName, secondaryText, height: propHeight, disableTextChildren: propDisableTextChildren, ...remaining } = props;
     const id = useEnsuredId(propId, "option");
     const { selectOption, isOptionSelected, disableSelectedIcon: contextDisableSelectedIcon, selectedIcon: contextSelectedIcon, unselectedIcon: contextUnselectedIcon, selectedIconAfter: contextSelectedIconAfter } = useListboxContext();
     const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;
@@ -111,6 +111,6 @@ const noop = ()=>{
         disableTextChildren: disableTextChildren,
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Option.js.map

package/dist/form/Option.js.map

@@ -1 +1 @@
-{"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://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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"}
+{"version":3,"sources":["../../src/form/Option.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Fragment, type ReactElement, type ReactNode, type Ref } 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  ref?: Ref<HTMLLIElement>;\n\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://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 function Option(props: OptionProps): ReactElement {\n  const {\n    ref,\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"],"names":["cnb","Fragment","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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import { type ButtonProps } from "../button/Button.js";
 import { type PropsWithRef } from "../types.js";
 import { type TextFieldProps } from "./TextField.js";
@@ -118,4 +118,4 @@ export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon
  *
  * @see {@link https://react-md.dev/components/password | Password Demos}
  */
-export declare const Password: import("react").ForwardRefExoticComponent<PasswordProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function Password(props: PasswordProps): ReactElement;

package/dist/form/Password.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Button } from "../button/Button.js";
 import { getIcon } from "../icon/config.js";
 import { useEnsuredId } from "../useEnsuredId.js";
@@ -20,8 +19,8 @@ import { password, passwordInput, passwordInputToggle } from "./passwordStyles.j
  * ```
  *
  * @see {@link https://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;
+ */ export function Password(props) {
+    const { ref, id: propId, name = "password", className, inputClassName, visibilityIcon: propVisibilityIcon, visibilityLabel = "Show password", visibilityProps, ...remaining } = props;
     const { toggled: isPasswordVisible, toggle } = useToggle(false);
     let currentVisibilityIcon;
     if (propVisibilityIcon && typeof propVisibilityIcon === "object" && "visible" in propVisibilityIcon) {
@@ -64,6 +63,6 @@ import { password, passwordInput, passwordInputToggle } from "./passwordStyles.j
         }),
         disableRightAddonStyles: true
     });
-});
+}
 
 //# sourceMappingURL=Password.js.map

package/dist/form/Password.js.map

@@ -1 +1 @@
-{"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\n/**\n * @since 6.0.0 Removed the `visibilityStyle`, `visibilityClassName`, and\n * `onVisibilityClick` props in favor of `visibilityProps` object.\n * @since 6.0.0 Removed the `disableVisibility` and `rightChildren` props in\n * favor of just using a `TextField` instead of the `Password` component.\n * @since 6.0.0 Merged the `getVisibilityIcon` prop behavior into the\n * `visibilityIcon` prop.\n */\nexport interface PasswordProps extends Omit<\n  TextFieldProps,\n  \"type\" | \"rightAddon\"\n> {\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   * @since 6.0.0 Supports dynamically getting the visibility icon with a\n   * callback function.\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>;\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  <Password label=\"Password\" required />;\n * }\n * ```\n *\n * @see {@link https://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;AAuH7B;;;;;;;;;;;;;CAaC,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"}
+{"version":3,"sources":["../../src/form/Password.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } 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\n/**\n * @since 6.0.0 Removed the `visibilityStyle`, `visibilityClassName`, and\n * `onVisibilityClick` props in favor of `visibilityProps` object.\n * @since 6.0.0 Removed the `disableVisibility` and `rightChildren` props in\n * favor of just using a `TextField` instead of the `Password` component.\n * @since 6.0.0 Merged the `getVisibilityIcon` prop behavior into the\n * `visibilityIcon` prop.\n */\nexport interface PasswordProps extends Omit<\n  TextFieldProps,\n  \"type\" | \"rightAddon\"\n> {\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   * @since 6.0.0 Supports dynamically getting the visibility icon with a\n   * callback function.\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>;\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  <Password label=\"Password\" required />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/password | Password Demos}\n */\nexport function Password(props: PasswordProps): ReactElement {\n  const {\n    ref,\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"],"names":["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;;AAIA,SAASA,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;AAuH7B;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EACJC,GAAG,EACHC,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"}

package/dist/form/Radio.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement } from "react";
 import { type RadioProps } from "./InputToggle.js";
 /**
  * **Client Component**
@@ -20,4 +21,4 @@ import { type RadioProps } from "./InputToggle.js";
  *
  * @see {@link https://react-md.dev/components/radio | Radio Demos}
  */
-export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function Radio(props: RadioProps): ReactElement;

package/dist/form/Radio.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { InputToggle } from "./InputToggle.js";
 /**
  * **Client Component**
@@ -22,12 +21,13 @@ import { InputToggle } from "./InputToggle.js";
  * ```
  *
  * @see {@link https://react-md.dev/components/radio | Radio Demos}
- */ export const Radio = /*#__PURE__*/ forwardRef(function Radio(props, ref) {
+ */ export function Radio(props) {
+    const { ref, ...remaininig } = props;
     return /*#__PURE__*/ _jsx(InputToggle, {
-        ...props,
+        ...remaininig,
         ref: ref,
         type: "radio"
     });
-});
+}
 
 //# sourceMappingURL=Radio.js.map

package/dist/form/Radio.js.map

@@ -1 +1 @@
-{"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://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"}
+{"version":3,"sources":["../../src/form/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } 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://react-md.dev/components/radio | Radio Demos}\n */\nexport function Radio(props: RadioProps): ReactElement {\n  const { ref, ...remaininig } = props;\n\n  return <InputToggle {...remaininig} ref={ref} type=\"radio\" />;\n}\n"],"names":["InputToggle","Radio","props","ref","remaininig","type"],"mappings":"AAAA;;AAIA,SAASA,WAAW,QAAyB,mBAAmB;AAEhE;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASC,MAAMC,KAAiB;IACrC,MAAM,EAAEC,GAAG,EAAE,GAAGC,YAAY,GAAGF;IAE/B,qBAAO,KAACF;QAAa,GAAGI,UAAU;QAAED,KAAKA;QAAKE,MAAK;;AACrD"}

package/dist/form/ResizingTextAreaWrapper.d.ts

@@ -1,9 +1,10 @@
-import { type CSSProperties, type HTMLAttributes, type Ref, type TextareaHTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes, type ReactElement, type Ref, type TextareaHTMLAttributes } from "react";
 /**
  * @since 6.0.0
  * @internal
  */
 export interface ResizingTextAreaWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
     maskId: string;
     maskRef: Ref<HTMLTextAreaElement>;
     defaultValue?: TextareaHTMLAttributes<HTMLTextAreaElement>["defaultValue"];
@@ -16,4 +17,4 @@ export interface ResizingTextAreaWrapperProps extends HTMLAttributes<HTMLDivElem
  * @since 6.0.0
  * @internal
  */
-export declare const ResizingTextAreaWrapper: import("react").ForwardRefExoticComponent<ResizingTextAreaWrapperProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ResizingTextAreaWrapper: (props: ResizingTextAreaWrapperProps) => ReactElement;

package/dist/form/ResizingTextAreaWrapper.js

@@ -1,12 +1,11 @@
 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;
+ */ export const ResizingTextAreaWrapper = function ResizingTextAreaWrapper(props) {
+    const { ref, className, rows, maskId, maskRef, areaStyle, areaClassName, defaultValue, disableTransition, children, ...remaining } = props;
     return /*#__PURE__*/ _jsxs("div", {
         ...remaining,
         ref: ref,
@@ -30,6 +29,6 @@ import { textArea } from "./textAreaStyles.js";
             })
         ]
     });
-});
+};
 
 //# sourceMappingURL=ResizingTextAreaWrapper.js.map

package/dist/form/ResizingTextAreaWrapper.js.map

@@ -1 +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 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;AAgB/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"}
+{"version":3,"sources":["../../src/form/ResizingTextAreaWrapper.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from \"react\";\n\nimport { textArea } from \"./textAreaStyles.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ResizingTextAreaWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<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 = function ResizingTextAreaWrapper(\n  props: ResizingTextAreaWrapperProps\n): ReactElement {\n  const {\n    ref,\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","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;AAShC,SAASC,QAAQ,QAAQ,sBAAsB;AAiB/C;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,SAASA,wBAC9CC,KAAmC;IAEnC,MAAM,EACJC,GAAG,EACHC,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,WAAWL,IACT,iCACA,CAACY,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,EAAE"}