@react-md/core 6.3.4 → 6.5.0

package/dist/form/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Fieldset.tsx"],"sourcesContent":["import { type FieldsetHTMLAttributes, forwardRef } from \"react\";\n\nimport { type FieldsetClassNameOptions, fieldset } from \"./fieldsetStyles.js\";\n\n/**\n * @since 6.0.0 Removed the `legend`, `legendStyle`,\n * `legendClassName`, and `legendSROnly` props. You must provide a `Legend`\n * yourself manually instead of using a prop.\n */\nexport interface FieldsetProps\n  extends FieldsetHTMLAttributes<HTMLFieldSetElement>,\n    FieldsetClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Fieldset } from \"@react-md/core/form/Fieldset\";\n * import { Legend } from \"@react-md/core/form/Legend\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Some Title</Legend>\n *         // form components\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}\n */\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(\n  function Fieldset(props, ref) {\n    const {\n      className,\n      fullWidth = false,\n      browserStyles = false,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <fieldset\n        {...remaining}\n        ref={ref}\n        className={fieldset({\n          className,\n          fullWidth,\n          browserStyles,\n        })}\n      >\n        {children}\n      </fieldset>\n    );\n  }\n);\n"],"names":["forwardRef","fieldset","Fieldset","props","ref","className","fullWidth","browserStyles","children","remaining"],"mappings":";AAAA,SAAsCA,UAAU,QAAQ,QAAQ;AAEhE,SAAwCC,QAAQ,QAAQ,sBAAsB;AAW9E;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrBC,QAAQ,EACR,GAAGC,WACJ,GAAGN;IAEJ,qBACE,KAACF;QACE,GAAGQ,SAAS;QACbL,KAAKA;QACLC,WAAWJ,SAAS;YAClBI;YACAC;YACAC;QACF;kBAECC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Fieldset.tsx"],"sourcesContent":["import { type FieldsetHTMLAttributes, forwardRef } from \"react\";\n\nimport { type FieldsetClassNameOptions, fieldset } from \"./fieldsetStyles.js\";\n\n/**\n * @since 6.0.0 Removed the `legend`, `legendStyle`,\n * `legendClassName`, and `legendSROnly` props. You must provide a `Legend`\n * yourself manually instead of using a prop.\n */\nexport interface FieldsetProps\n  extends\n    FieldsetHTMLAttributes<HTMLFieldSetElement>,\n    FieldsetClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Fieldset } from \"@react-md/core/form/Fieldset\";\n * import { Legend } from \"@react-md/core/form/Legend\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Some Title</Legend>\n *         // form components\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @example Floating Legend Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Fieldset } from \"@react-md/core/form/Fieldset\";\n * import { Legend } from \"@react-md/core/form/Legend\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Form>\n *       <Fieldset floatingLegend>\n *         <Legend floating>Some Title</Legend>\n *         // form components\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n * ```\n *\n * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}\n */\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(\n  function Fieldset(props, ref) {\n    const {\n      className,\n      fullWidth,\n      browserStyles,\n      floatingLegend,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <fieldset\n        {...remaining}\n        ref={ref}\n        className={fieldset({\n          className,\n          fullWidth,\n          browserStyles,\n          floatingLegend,\n        })}\n      >\n        {children}\n      </fieldset>\n    );\n  }\n);\n"],"names":["forwardRef","fieldset","Fieldset","props","ref","className","fullWidth","browserStyles","floatingLegend","children","remaining"],"mappings":";AAAA,SAAsCA,UAAU,QAAQ,QAAQ;AAEhE,SAAwCC,QAAQ,QAAQ,sBAAsB;AAY9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACF;QACE,GAAGS,SAAS;QACbN,KAAKA;QACLC,WAAWJ,SAAS;YAClBI;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP,GACA"}

package/dist/form/FormMessageContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessageContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { FormMessage } from \"./FormMessage.js\";\nimport {\n  type FormMessageContainerClassNameOptions,\n  formMessageContainer,\n} from \"./formMessageContainerStyles.js\";\nimport { type FormMessageProps } from \"./types.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface FormMessageContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    FormMessageContainerClassNameOptions {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<FormMessageProps>;\n}\n\n/**\n * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper\n * and renders the {@link FormMessage} component.\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @since 2.5.0\n */\nexport const FormMessageContainer = forwardRef<\n  HTMLDivElement,\n  FormMessageContainerProps\n>(function FormMessageContainer(props, ref) {\n  const { className, children, inline, messageProps, ...remaining } = props;\n  if (!messageProps) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={formMessageContainer({ className, inline })}\n    >\n      {children}\n      <FormMessage {...messageProps} />\n    </div>\n  );\n});\n"],"names":["forwardRef","FormMessage","formMessageContainer","FormMessageContainer","props","ref","className","children","inline","messageProps","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAEEC,oBAAoB,QACf,kCAAkC;AAiBzC;;;;;;CAMC,GACD,OAAO,MAAMC,qCAAuBH,WAGlC,SAASG,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,YAAY,EAAE,GAAGC,WAAW,GAAGN;IACpE,IAAI,CAACK,cAAc;QACjB,qBAAO;sBAAGF;;IACZ;IAEA,qBACE,MAACI;QACE,GAAGD,SAAS;QACbL,KAAKA;QACLC,WAAWJ,qBAAqB;YAAEI;YAAWE;QAAO;;YAEnDD;0BACD,KAACN;gBAAa,GAAGQ,YAAY;;;;AAGnC,GAAG"}
+{"version":3,"sources":["../../src/form/FormMessageContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { FormMessage } from \"./FormMessage.js\";\nimport {\n  type FormMessageContainerClassNameOptions,\n  formMessageContainer,\n} from \"./formMessageContainerStyles.js\";\nimport { type FormMessageProps } from \"./types.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface FormMessageContainerProps\n  extends HTMLAttributes<HTMLDivElement>, FormMessageContainerClassNameOptions {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<FormMessageProps>;\n}\n\n/**\n * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper\n * and renders the {@link FormMessage} component.\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @since 2.5.0\n */\nexport const FormMessageContainer = forwardRef<\n  HTMLDivElement,\n  FormMessageContainerProps\n>(function FormMessageContainer(props, ref) {\n  const { className, children, inline, messageProps, ...remaining } = props;\n  if (!messageProps) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={formMessageContainer({ className, inline })}\n    >\n      {children}\n      <FormMessage {...messageProps} />\n    </div>\n  );\n});\n"],"names":["forwardRef","FormMessage","formMessageContainer","FormMessageContainer","props","ref","className","children","inline","messageProps","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAEEC,oBAAoB,QACf,kCAAkC;AAgBzC;;;;;;CAMC,GACD,OAAO,MAAMC,qCAAuBH,WAGlC,SAASG,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,YAAY,EAAE,GAAGC,WAAW,GAAGN;IACpE,IAAI,CAACK,cAAc;QACjB,qBAAO;sBAAGF;;IACZ;IAEA,qBACE,MAACI;QACE,GAAGD,SAAS;QACbL,KAAKA;QACLC,WAAWJ,qBAAqB;YAAEI;YAAWE;QAAO;;YAEnDD;0BACD,KAACN;gBAAa,GAAGQ,YAAY;;;;AAGnC,GAAG"}

package/dist/form/FormMessageCounter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessageCounter.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { formMessageCounter } from \"./formMessageStyles.js\";\n\n/** @since 2.9.0 */\nexport interface FormMessageCounterProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The children to display in the counter. This is normally a string like:\n   *\n   * @example String Example\n   * ```ts\n   * `${min} / ${max}`\n   * ```\n   */\n  children: ReactNode;\n}\n\n/**\n * This component can be used to create a \"counter\" within the\n * {@link FormMessage} component.\n *\n * Note: This is really only useful when using the {@link FormMessage} component\n * without a {@link TextField}.\n *\n * @example Example Usage\n * ```ts\n * interface ExampleProps {\n *   min: number;\n *   max: number;\n * }\n *\n * function Example({ min, max }: ExampleProps) {\n *   return (\n *     <FormMessage disableWrap>\n *       <FormMessageCounter>\n *         {`${min} / ${max}`}\n *       </FormMessageCounter>\n *     </FormMessage>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 2.9.0\n * @since 6.3.0 Supports refs.\n */\nexport const FormMessageCounter = forwardRef<\n  HTMLSpanElement,\n  FormMessageCounterProps\n>(function FormMessageCounter(props, ref): ReactElement {\n  const { children, className, ...remaining } = props;\n\n  return (\n    <span\n      ref={ref}\n      {...remaining}\n      className={formMessageCounter({ className })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["forwardRef","formMessageCounter","FormMessageCounter","props","ref","children","className","remaining","span"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAASC,kBAAkB,QAAQ,yBAAyB;AAgB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,mCAAqBF,WAGhC,SAASE,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QACCJ,KAAKA;QACJ,GAAGG,SAAS;QACbD,WAAWL,mBAAmB;YAAEK;QAAU;kBAEzCD;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/form/FormMessageCounter.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { formMessageCounter } from \"./formMessageStyles.js\";\n\n/** @since 2.9.0 */\nexport interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The children to display in the counter. This is normally a string like:\n   *\n   * @example String Example\n   * ```ts\n   * `${min} / ${max}`\n   * ```\n   */\n  children: ReactNode;\n}\n\n/**\n * This component can be used to create a \"counter\" within the\n * {@link FormMessage} component.\n *\n * Note: This is really only useful when using the {@link FormMessage} component\n * without a {@link TextField}.\n *\n * @example Example Usage\n * ```ts\n * interface ExampleProps {\n *   min: number;\n *   max: number;\n * }\n *\n * function Example({ min, max }: ExampleProps) {\n *   return (\n *     <FormMessage disableWrap>\n *       <FormMessageCounter>\n *         {`${min} / ${max}`}\n *       </FormMessageCounter>\n *     </FormMessage>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 2.9.0\n * @since 6.3.0 Supports refs.\n */\nexport const FormMessageCounter = forwardRef<\n  HTMLSpanElement,\n  FormMessageCounterProps\n>(function FormMessageCounter(props, ref): ReactElement {\n  const { children, className, ...remaining } = props;\n\n  return (\n    <span\n      ref={ref}\n      {...remaining}\n      className={formMessageCounter({ className })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["forwardRef","formMessageCounter","FormMessageCounter","props","ref","children","className","remaining","span"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAASC,kBAAkB,QAAQ,yBAAyB;AAe5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,mCAAqBF,WAGhC,SAASE,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QACCJ,KAAKA;QACJ,GAAGG,SAAS;QACbD,WAAWL,mBAAmB;YAAEK;QAAU;kBAEzCD;;AAGP,GAAG"}

package/dist/form/InputToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/InputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { Label } from \"./Label.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type LabelClassNameOptions } from \"./types.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableInputToggleIconProps {\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"normal\"`\n   */\n  size?: InputToggleSize;\n\n  /**\n   * The icon to use while unchecked. This defaults to the unchecked\n   * checkbox/radio icon from the `ICON_CONFIG`.\n   *\n   * @defaultValue `getIcon(props.type)`\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to use while unchecked. This defaults to the unchecked\n   * checkbox/radio icon from the `ICON_CONFIG`.\n   *\n   * @defaultValue `getIcon(``${props.type}Checked``)`\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * Any props that should be passed to the `<span>` that surrounds the current\n   * icon element.\n   */\n  iconProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * Optional style to set on the `<span>` that surrounds the current icon\n   * element.\n   */\n  iconStyle?: CSSProperties;\n\n  /**\n   * Optional className to set on the `<span>` that surrounds the current icon\n   * element.\n   */\n  iconClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface InputToggleLabelProps {\n  /**\n   * An optional label to display with the checkbox. If this is omitted, it is\n   * recommended to provide an `aria-label` for accessibility.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any props that should be passed to the `<Label>` component.\n   *\n   * Note: If `style` or `className` are provided in this object, they will be\n   * ignored. Use the top-level `style` and `className` props instead.\n   *\n   * @example\n   * ```\n   *  // bad\n   * labelProps={{\n   *   \"aria-label\": \"checkbox\",\n   *   style: { color: \"red\" },\n   *   className: \"custom\"\n   * }}\n   *\n   * // good\n   * style={{ color: \"red\" }}\n   * className=\"custom\"\n   * labelProps={{\n   *   \"aria-label\": \"checkbox\",\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>>;\n\n  /**\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  disableLabelGap?: boolean;\n\n  /**\n   * Set this to `true` to swap the position of the {@link label} and the current\n   * icon. This prop can be used with the {@link stacked} prop to change the\n   * position if the icon and label:\n   *\n   * ____________________________________\n   * | stacked | iconAfter | position   |\n   * ____________________________________\n   * |         |           | icon label |\n   * ____________________________________\n   * |         | X         | label icon |\n   * ____________________________________\n   * | X       |           | icon       |\n   * |         |           | label      |\n   * ____________________________________\n   * | X       | X         | label      |\n   * |         |           | icon       |\n   * ____________________________________\n   *\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the label should be stacked instead of inline with\n   * the current icon.\n   *\n   * @see {@link iconAfter}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BaseInputToggleProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    FormMessageContainerExtension,\n    FormComponentStates,\n    ConfigurableInputToggleIconProps,\n    InputToggleLabelProps,\n    ComponentWithRippleProps {\n  /**\n   * @see https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing\n   * @defaultValue `type === \"checkbox\" ? \"off\" : undefined`\n   */\n  autoComplete?: string;\n}\n\n/**\n * @since 2.8.5\n * @since 6.0.0 Removed the `aria-controls` prop and added the\n * `indeterminateIcon` prop.\n */\nexport interface IndeterminateCheckboxProps {\n  /**\n   * Set this value to `true` if the checkbox is in an \"indeterminate\" state:\n   *\n   * - this checkbox controls the select all/select none behavior of other\n   *   checkboxes in a group\n   * - at least one of the checkboxes have been checked\n   *   - the `checked` prop for this Checkbox should also be `true`\n   *\n   * You should normally use the `useCheckboxGroup` hook to handle this\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  indeterminate?: boolean;\n\n  /**\n   * The icon to display when the checkbox is checked and the\n   * {@link indeterminate} prop is `true`.\n   *\n   * @defaultValue `getIcon(\"checkboxIndeterminate\")`\n   * @since 6.0.0\n   */\n  indeterminateIcon?: ReactNode;\n}\n\nexport interface CheckboxProps\n  extends BaseInputToggleProps,\n    IndeterminateCheckboxProps {}\n\n/** @since 6.0.0 */\nexport interface CheckboxInputToggleProps extends CheckboxProps {\n  type: \"checkbox\";\n}\n\nexport interface RadioProps extends BaseInputToggleProps {\n  /**\n   * The value for the radio button.\n   *\n   * @since 6.0.0 This is now optional and no longer supports\n   * `string[]` since there isn't much of a use case for array values.\n   */\n  value?: string | number;\n}\n\n/** @since 6.0.0 */\nexport interface RadioInputToggleProps extends RadioProps {\n  type: \"radio\";\n}\n\n/**\n * @since 6.0.0 Updated to be a union between\n * `CheckboxInputToggleProps` and `RadioInputToggleProps`\n */\nexport type InputToggleProps = CheckboxInputToggleProps | RadioInputToggleProps;\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/components/radio | Radio Demos}\n * @since 6.0.0 Now supports the `FormMessage` behavior and requires\n * different icons for each checked state.\n */\nexport const InputToggle = forwardRef<HTMLInputElement, InputToggleProps>(\n  function InputToggle(props, ref) {\n    const {\n      id: propId,\n      type,\n      label,\n      labelProps,\n      style,\n      className,\n      autoComplete = type === \"checkbox\" ? \"off\" : undefined,\n      disableLabelGap = false,\n      stacked = false,\n      iconAfter = false,\n      size = \"normal\",\n      error = false,\n      active = false,\n      indeterminate = false,\n      messageProps,\n      messageContainerProps,\n      icon,\n      checkedIcon,\n      indeterminateIcon,\n      iconProps,\n      iconStyle,\n      iconClassName,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onDragStart,\n      onMouseUp,\n      onTouchEnd,\n      onTouchMove,\n      onTouchStart,\n      disableRipple,\n      ...remaining\n    } = props as CheckboxInputToggleProps;\n    const { disabled = false, checked } = props;\n\n    const id = useEnsuredId(propId, type);\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      mode: disableRipple ? \"none\" : undefined,\n      disabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onDragStart,\n      onMouseUp,\n      onTouchEnd,\n      onTouchMove,\n      onTouchStart,\n    });\n\n    // set on the `remaining` object to bypass the eslint rule about\n    // aria-checked not being valid for textbox role\n    remaining[\"aria-checked\"] =\n      (remaining[\"aria-checked\"] ?? indeterminate) ? \"mixed\" : undefined;\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <Label\n          {...labelProps}\n          gap={!disableLabelGap}\n          style={style}\n          stacked={stacked}\n          reversed={!iconAfter}\n          active={active}\n          error={error}\n          disabled={disabled}\n          className={className}\n        >\n          {label}\n          <InputToggleIcon\n            style={iconStyle}\n            {...iconProps}\n            className={cnb(\n              pressedClassName,\n              iconClassName,\n              iconProps?.className\n            )}\n            error={error}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            type={type}\n            icon={icon}\n            checkedIcon={checkedIcon}\n            indeterminate={indeterminate}\n            indeterminateIcon={indeterminateIcon}\n          >\n            <input\n              {...remaining}\n              {...handlers}\n              autoComplete={autoComplete}\n              id={id}\n              ref={ref}\n              type={type}\n              className=\"rmd-hidden-input\"\n            />\n            {ripples}\n          </InputToggleIcon>\n        </Label>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useEnsuredId","FormMessageContainer","InputToggleIcon","Label","InputToggle","props","ref","id","propId","type","label","labelProps","style","className","autoComplete","undefined","disableLabelGap","stacked","iconAfter","size","error","active","indeterminate","messageProps","messageContainerProps","icon","checkedIcon","indeterminateIcon","iconProps","iconStyle","iconClassName","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onDragStart","onMouseUp","onTouchEnd","onTouchMove","onTouchStart","disableRipple","remaining","disabled","checked","pressedClassName","ripples","handlers","mode","gap","reversed","input"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAMEC,UAAU,QACL,QAAQ;AAGf,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,KAAK,QAAQ,aAAa;AA+MnC;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAAcN,WACzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,eAAeL,SAAS,aAAa,QAAQM,SAAS,EACtDC,kBAAkB,KAAK,EACvBC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,OAAO,QAAQ,EACfC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,gBAAgB,KAAK,EACrBC,YAAY,EACZC,qBAAqB,EACrBC,IAAI,EACJC,WAAW,EACXC,iBAAiB,EACjBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,YAAY,EACZC,aAAa,EACb,GAAGC,WACJ,GAAGtC;IACJ,MAAM,EAAEuC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGxC;IAEtC,MAAME,KAAKP,aAAaQ,QAAQC;IAChC,MAAM,EAAEqC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGjD,sBAAsB;QACpEkD,MAAMP,gBAAgB,SAAS3B;QAC/B6B;QACAb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,gEAAgE;IAChE,gDAAgD;IAChDE,SAAS,CAAC,eAAe,GACvB,AAACA,SAAS,CAAC,eAAe,IAAIrB,gBAAiB,UAAUP;IAE3D,qBACE,KAACd;QACE,GAAGuB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACE,GAAGQ,UAAU;YACduC,KAAK,CAAClC;YACNJ,OAAOA;YACPK,SAASA;YACTkC,UAAU,CAACjC;YACXG,QAAQA;YACRD,OAAOA;YACPwB,UAAUA;YACV/B,WAAWA;;gBAEVH;8BACD,MAACR;oBACCU,OAAOiB;oBACN,GAAGD,SAAS;oBACbf,WAAWhB,IACTiD,kBACAhB,eACAF,WAAWf;oBAEbO,OAAOA;oBACPyB,SAASA;oBACTD,UAAUA;oBACVzB,MAAMA;oBACNV,MAAMA;oBACNgB,MAAMA;oBACNC,aAAaA;oBACbJ,eAAeA;oBACfK,mBAAmBA;;sCAEnB,KAACyB;4BACE,GAAGT,SAAS;4BACZ,GAAGK,QAAQ;4BACZlC,cAAcA;4BACdP,IAAIA;4BACJD,KAAKA;4BACLG,MAAMA;4BACNI,WAAU;;wBAEXkC;;;;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/form/InputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { Label } from \"./Label.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type LabelClassNameOptions } from \"./types.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableInputToggleIconProps {\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"normal\"`\n   */\n  size?: InputToggleSize;\n\n  /**\n   * The icon to use while unchecked. This defaults to the unchecked\n   * checkbox/radio icon from the `ICON_CONFIG`.\n   *\n   * @defaultValue `getIcon(props.type)`\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to use while unchecked. This defaults to the unchecked\n   * checkbox/radio icon from the `ICON_CONFIG`.\n   *\n   * @defaultValue `getIcon(``${props.type}Checked``)`\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * Any props that should be passed to the `<span>` that surrounds the current\n   * icon element.\n   */\n  iconProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * Optional style to set on the `<span>` that surrounds the current icon\n   * element.\n   */\n  iconStyle?: CSSProperties;\n\n  /**\n   * Optional className to set on the `<span>` that surrounds the current icon\n   * element.\n   */\n  iconClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface InputToggleLabelProps {\n  /**\n   * An optional label to display with the checkbox. If this is omitted, it is\n   * recommended to provide an `aria-label` for accessibility.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any props that should be passed to the `<Label>` component.\n   *\n   * Note: If `style` or `className` are provided in this object, they will be\n   * ignored. Use the top-level `style` and `className` props instead.\n   *\n   * @example\n   * ```\n   *  // bad\n   * labelProps={{\n   *   \"aria-label\": \"checkbox\",\n   *   style: { color: \"red\" },\n   *   className: \"custom\"\n   * }}\n   *\n   * // good\n   * style={{ color: \"red\" }}\n   * className=\"custom\"\n   * labelProps={{\n   *   \"aria-label\": \"checkbox\",\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>>;\n\n  /**\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  disableLabelGap?: boolean;\n\n  /**\n   * Set this to `true` to swap the position of the {@link label} and the current\n   * icon. This prop can be used with the {@link stacked} prop to change the\n   * position if the icon and label:\n   *\n   * ____________________________________\n   * | stacked | iconAfter | position   |\n   * ____________________________________\n   * |         |           | icon label |\n   * ____________________________________\n   * |         | X         | label icon |\n   * ____________________________________\n   * | X       |           | icon       |\n   * |         |           | label      |\n   * ____________________________________\n   * | X       | X         | label      |\n   * |         |           | icon       |\n   * ____________________________________\n   *\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the label should be stacked instead of inline with\n   * the current icon.\n   *\n   * @see {@link iconAfter}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BaseInputToggleProps\n  extends\n    Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    FormMessageContainerExtension,\n    FormComponentStates,\n    ConfigurableInputToggleIconProps,\n    InputToggleLabelProps,\n    ComponentWithRippleProps {\n  /**\n   * @see https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing\n   * @defaultValue `type === \"checkbox\" ? \"off\" : undefined`\n   */\n  autoComplete?: string;\n}\n\n/**\n * @since 2.8.5\n * @since 6.0.0 Removed the `aria-controls` prop and added the\n * `indeterminateIcon` prop.\n */\nexport interface IndeterminateCheckboxProps {\n  /**\n   * Set this value to `true` if the checkbox is in an \"indeterminate\" state:\n   *\n   * - this checkbox controls the select all/select none behavior of other\n   *   checkboxes in a group\n   * - at least one of the checkboxes have been checked\n   *   - the `checked` prop for this Checkbox should also be `true`\n   *\n   * You should normally use the `useCheckboxGroup` hook to handle this\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  indeterminate?: boolean;\n\n  /**\n   * The icon to display when the checkbox is checked and the\n   * {@link indeterminate} prop is `true`.\n   *\n   * @defaultValue `getIcon(\"checkboxIndeterminate\")`\n   * @since 6.0.0\n   */\n  indeterminateIcon?: ReactNode;\n}\n\nexport interface CheckboxProps\n  extends BaseInputToggleProps, IndeterminateCheckboxProps {}\n\n/** @since 6.0.0 */\nexport interface CheckboxInputToggleProps extends CheckboxProps {\n  type: \"checkbox\";\n}\n\nexport interface RadioProps extends BaseInputToggleProps {\n  /**\n   * The value for the radio button.\n   *\n   * @since 6.0.0 This is now optional and no longer supports\n   * `string[]` since there isn't much of a use case for array values.\n   */\n  value?: string | number;\n}\n\n/** @since 6.0.0 */\nexport interface RadioInputToggleProps extends RadioProps {\n  type: \"radio\";\n}\n\n/**\n * @since 6.0.0 Updated to be a union between\n * `CheckboxInputToggleProps` and `RadioInputToggleProps`\n */\nexport type InputToggleProps = CheckboxInputToggleProps | RadioInputToggleProps;\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/components/radio | Radio Demos}\n * @since 6.0.0 Now supports the `FormMessage` behavior and requires\n * different icons for each checked state.\n */\nexport const InputToggle = forwardRef<HTMLInputElement, InputToggleProps>(\n  function InputToggle(props, ref) {\n    const {\n      id: propId,\n      type,\n      label,\n      labelProps,\n      style,\n      className,\n      autoComplete = type === \"checkbox\" ? \"off\" : undefined,\n      disableLabelGap = false,\n      stacked = false,\n      iconAfter = false,\n      size = \"normal\",\n      error = false,\n      active = false,\n      indeterminate = false,\n      messageProps,\n      messageContainerProps,\n      icon,\n      checkedIcon,\n      indeterminateIcon,\n      iconProps,\n      iconStyle,\n      iconClassName,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onDragStart,\n      onMouseUp,\n      onTouchEnd,\n      onTouchMove,\n      onTouchStart,\n      disableRipple,\n      ...remaining\n    } = props as CheckboxInputToggleProps;\n    const { disabled = false, checked } = props;\n\n    const id = useEnsuredId(propId, type);\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      mode: disableRipple ? \"none\" : undefined,\n      disabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onDragStart,\n      onMouseUp,\n      onTouchEnd,\n      onTouchMove,\n      onTouchStart,\n    });\n\n    // set on the `remaining` object to bypass the eslint rule about\n    // aria-checked not being valid for textbox role\n    remaining[\"aria-checked\"] =\n      (remaining[\"aria-checked\"] ?? indeterminate) ? \"mixed\" : undefined;\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <Label\n          {...labelProps}\n          gap={!disableLabelGap}\n          style={style}\n          stacked={stacked}\n          reversed={!iconAfter}\n          active={active}\n          error={error}\n          disabled={disabled}\n          className={className}\n        >\n          {label}\n          <InputToggleIcon\n            style={iconStyle}\n            {...iconProps}\n            className={cnb(\n              pressedClassName,\n              iconClassName,\n              iconProps?.className\n            )}\n            error={error}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            type={type}\n            icon={icon}\n            checkedIcon={checkedIcon}\n            indeterminate={indeterminate}\n            indeterminateIcon={indeterminateIcon}\n          >\n            <input\n              {...remaining}\n              {...handlers}\n              autoComplete={autoComplete}\n              id={id}\n              ref={ref}\n              type={type}\n              className=\"rmd-hidden-input\"\n            />\n            {ripples}\n          </InputToggleIcon>\n        </Label>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useEnsuredId","FormMessageContainer","InputToggleIcon","Label","InputToggle","props","ref","id","propId","type","label","labelProps","style","className","autoComplete","undefined","disableLabelGap","stacked","iconAfter","size","error","active","indeterminate","messageProps","messageContainerProps","icon","checkedIcon","indeterminateIcon","iconProps","iconStyle","iconClassName","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onDragStart","onMouseUp","onTouchEnd","onTouchMove","onTouchStart","disableRipple","remaining","disabled","checked","pressedClassName","ripples","handlers","mode","gap","reversed","input"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAMEC,UAAU,QACL,QAAQ;AAGf,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,KAAK,QAAQ,aAAa;AA+MnC;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAAcN,WACzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,eAAeL,SAAS,aAAa,QAAQM,SAAS,EACtDC,kBAAkB,KAAK,EACvBC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,OAAO,QAAQ,EACfC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,gBAAgB,KAAK,EACrBC,YAAY,EACZC,qBAAqB,EACrBC,IAAI,EACJC,WAAW,EACXC,iBAAiB,EACjBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,YAAY,EACZC,aAAa,EACb,GAAGC,WACJ,GAAGtC;IACJ,MAAM,EAAEuC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGxC;IAEtC,MAAME,KAAKP,aAAaQ,QAAQC;IAChC,MAAM,EAAEqC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGjD,sBAAsB;QACpEkD,MAAMP,gBAAgB,SAAS3B;QAC/B6B;QACAb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,gEAAgE;IAChE,gDAAgD;IAChDE,SAAS,CAAC,eAAe,GACvB,AAACA,SAAS,CAAC,eAAe,IAAIrB,gBAAiB,UAAUP;IAE3D,qBACE,KAACd;QACE,GAAGuB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACE,GAAGQ,UAAU;YACduC,KAAK,CAAClC;YACNJ,OAAOA;YACPK,SAASA;YACTkC,UAAU,CAACjC;YACXG,QAAQA;YACRD,OAAOA;YACPwB,UAAUA;YACV/B,WAAWA;;gBAEVH;8BACD,MAACR;oBACCU,OAAOiB;oBACN,GAAGD,SAAS;oBACbf,WAAWhB,IACTiD,kBACAhB,eACAF,WAAWf;oBAEbO,OAAOA;oBACPyB,SAASA;oBACTD,UAAUA;oBACVzB,MAAMA;oBACNV,MAAMA;oBACNgB,MAAMA;oBACNC,aAAaA;oBACbJ,eAAeA;oBACfK,mBAAmBA;;sCAEnB,KAACyB;4BACE,GAAGT,SAAS;4BACZ,GAAGK,QAAQ;4BACZlC,cAAcA;4BACdP,IAAIA;4BACJD,KAAKA;4BACLG,MAAMA;4BACNI,WAAU;;wBAEXkC;;;;;;AAKX,GACA"}

package/dist/form/Legend.d.ts

@@ -1,16 +1,38 @@
 import { type TypographyProps } from "../typography/Typography.js";
+import { type LegendClassNameOptions } from "./legendStyles.js";
 /**
  * @since 6.0.0
+ * @since 6.4.0 Extends the `LegendClassNameOptions`
  */
-export interface LegendProps extends TypographyProps {
-    /**
-     * @defaultValue `false`
-     */
-    srOnly?: boolean;
+export interface LegendProps extends TypographyProps, LegendClassNameOptions {
 }
 /**
  * This should be used within a `Fieldset` to apply a label.
  *
+ * @example Simple Example
+ * ```tsx
+ * <Fieldset>
+ *   <Legend>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
+ * @example Visible to Screen readers only
+ * ```tsx
+ * <Fieldset>
+ *   <Legend srOnly>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
+ * @example Acting as a floating label
+ * ```tsx
+ * <Fieldset floatingLegend>
+ *   <Legend floating>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
  * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
  * @since 6.0.0
  */

package/dist/form/Legend.js

@@ -1,22 +1,55 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { cssUtils } from "../cssUtils.js";
 import { Typography } from "../typography/Typography.js";
+import { legend } from "./legendStyles.js";
 /**
  * This should be used within a `Fieldset` to apply a label.
  *
+ * @example Simple Example
+ * ```tsx
+ * <Fieldset>
+ *   <Legend>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
+ * @example Visible to Screen readers only
+ * ```tsx
+ * <Fieldset>
+ *   <Legend srOnly>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
+ * @example Acting as a floating label
+ * ```tsx
+ * <Fieldset floatingLegend>
+ *   <Legend floating>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
  * @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 = false, className, children, ...remaining } = props;
+    const { srOnly, floating, theme, gap, dense, active, error, disabled, stacked, reversed, className, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx(Typography, {
         ...remaining,
         as: "legend",
         ref: ref,
-        className: cnb("rmd-legend", cssUtils({
-            srOnly
-        }), className),
+        className: legend({
+            srOnly,
+            floating,
+            theme,
+            gap,
+            dense,
+            active,
+            error,
+            disabled,
+            stacked,
+            reversed,
+            className
+        }),
         children: children
     });
 });

package/dist/form/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Legend.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LegendProps extends TypographyProps {\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n}\n\n/**\n * This should be used within a `Fieldset` to apply a label.\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 { srOnly = false, className, children, ...remaining } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        as=\"legend\"\n        ref={ref}\n        className={cnb(\"rmd-legend\", cssUtils({ srOnly }), className)}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","Typography","Legend","props","ref","srOnly","className","children","remaining","as"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,UAAU,QAA8B,8BAA8B;AAY/E;;;;;CAKC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAE9D,qBACE,KAACF;QACE,GAAGO,SAAS;QACbC,IAAG;QACHL,KAAKA;QACLE,WAAWR,IAAI,cAAcE,SAAS;YAAEK;QAAO,IAAIC;kBAElDC;;AAGP,GACA"}
+{"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"}

package/dist/form/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Listbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode, type Ref } from \"react\";\n\nimport { Menu, type MenuProps } from \"../menu/Menu.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n  ListboxProvider,\n  type ListboxProviderOptions,\n  type ListboxValue,\n  useListboxProvider,\n} from \"./ListboxProvider.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ListboxProps<Value extends ListboxValue>\n  extends MenuProps,\n    ListboxProviderOptions<Value> {\n  nodeRef?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function Listbox<T extends ListboxValue>(\n  props: LabelRequiredForA11y<ListboxProps<T>>\n): ReactElement {\n  const {\n    value,\n    setValue,\n    children,\n    nodeRef,\n    selectedIconAfter,\n    selectedIcon,\n    unselectedIcon,\n    disableSelectedIcon,\n    ...remaining\n  } = props;\n\n  return (\n    <ListboxProvider\n      value={useListboxProvider({\n        value,\n        setValue,\n        selectedIcon,\n        selectedIconAfter,\n        disableSelectedIcon,\n        unselectedIcon,\n      })}\n    >\n      <Menu {...remaining} ref={nodeRef}>\n        {children}\n      </Menu>\n    </ListboxProvider>\n  );\n}\n"],"names":["Menu","ListboxProvider","useListboxProvider","Listbox","props","value","setValue","children","nodeRef","selectedIconAfter","selectedIcon","unselectedIcon","disableSelectedIcon","remaining","ref"],"mappings":"AAAA;;AAIA,SAASA,IAAI,QAAwB,kBAAkB;AAEvD,SACEC,eAAe,EAGfC,kBAAkB,QACb,uBAAuB;AAa9B;;;CAGC,GACD,OAAO,SAASC,QACdC,KAA4C;IAE5C,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnB,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCI,OAAOH,mBAAmB;YACxBG;YACAC;YACAI;YACAD;YACAG;YACAD;QACF;kBAEA,cAAA,KAACX;YAAM,GAAGa,SAAS;YAAEC,KAAKN;sBACvBD;;;AAIT"}
+{"version":3,"sources":["../../src/form/Listbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode, type Ref } from \"react\";\n\nimport { Menu, type MenuProps } from \"../menu/Menu.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n  ListboxProvider,\n  type ListboxProviderOptions,\n  type ListboxValue,\n  useListboxProvider,\n} from \"./ListboxProvider.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ListboxProps<Value extends ListboxValue>\n  extends MenuProps, ListboxProviderOptions<Value> {\n  nodeRef?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function Listbox<T extends ListboxValue>(\n  props: LabelRequiredForA11y<ListboxProps<T>>\n): ReactElement {\n  const {\n    value,\n    setValue,\n    children,\n    nodeRef,\n    selectedIconAfter,\n    selectedIcon,\n    unselectedIcon,\n    disableSelectedIcon,\n    ...remaining\n  } = props;\n\n  return (\n    <ListboxProvider\n      value={useListboxProvider({\n        value,\n        setValue,\n        selectedIcon,\n        selectedIconAfter,\n        disableSelectedIcon,\n        unselectedIcon,\n      })}\n    >\n      <Menu {...remaining} ref={nodeRef}>\n        {children}\n      </Menu>\n    </ListboxProvider>\n  );\n}\n"],"names":["Menu","ListboxProvider","useListboxProvider","Listbox","props","value","setValue","children","nodeRef","selectedIconAfter","selectedIcon","unselectedIcon","disableSelectedIcon","remaining","ref"],"mappings":"AAAA;;AAIA,SAASA,IAAI,QAAwB,kBAAkB;AAEvD,SACEC,eAAe,EAGfC,kBAAkB,QACb,uBAAuB;AAY9B;;;CAGC,GACD,OAAO,SAASC,QACdC,KAA4C;IAE5C,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnB,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCI,OAAOH,mBAAmB;YACxBG;YACAC;YACAI;YACAD;YACAG;YACAD;QACF;kBAEA,cAAA,KAACX;YAAM,GAAGa,SAAS;YAAEC,KAAKN;sBACvBD;;;AAIT"}

package/dist/form/ListboxProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/ListboxProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { type Dispatch, createContext, useContext, useMemo } from \"react\";\n\nimport { type OptionSelectedIconProps } from \"./Option.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface ListboxContext extends OptionSelectedIconProps {\n  // NOTE: These are not converted to arrow functions so the option can be\n  // inferred correctly\n  selectOption(option: unknown): void;\n  isOptionSelected(option: unknown): boolean;\n}\n\nconst context = createContext<ListboxContext | null>(null);\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: ListboxProvider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useListboxContext(): ListboxContext {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"The `ListboxProvider` must be a parent component\");\n  }\n\n  return value;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ListboxValue = string | number | null | object;\n\n/**\n * @since 6.3.0\n */\nexport interface ListboxProviderOptions<Value extends ListboxValue>\n  extends OptionSelectedIconProps {\n  value: ListboxValue | readonly NonNullable<ListboxValue>[];\n  setValue: Dispatch<NonNullable<Value>>;\n}\n\n/**\n * @since 6.3.0\n */\nexport function useListboxProvider<Value extends ListboxValue>(\n  options: ListboxProviderOptions<Value>\n): ListboxContext {\n  const {\n    value,\n    setValue,\n    selectedIconAfter,\n    selectedIcon,\n    unselectedIcon,\n    disableSelectedIcon,\n  } = options;\n\n  const values = useMemo(() => {\n    if (Array.isArray(value)) {\n      return new Set(value);\n    }\n\n    return new Set([value]);\n  }, [value]);\n\n  return useMemo(\n    () => ({\n      selectOption: setValue,\n      isOptionSelected(option) {\n        return values.has(option);\n      },\n      selectedIcon,\n      unselectedIcon,\n      selectedIconAfter,\n      disableSelectedIcon,\n    }),\n    [\n      disableSelectedIcon,\n      selectedIcon,\n      selectedIconAfter,\n      setValue,\n      unselectedIcon,\n      values,\n    ]\n  );\n}\n"],"names":["createContext","useContext","useMemo","context","Provider","ListboxProvider","useListboxContext","value","Error","useListboxProvider","options","setValue","selectedIconAfter","selectedIcon","unselectedIcon","disableSelectedIcon","values","Array","isArray","Set","selectOption","isOptionSelected","option","has"],"mappings":"AAAA;AAEA,SAAwBA,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAe1E,MAAMC,UAAUH,cAAqC;AAErD;;;;;CAKC,GACD,OAAO,MAAM,EAAEI,UAAUC,eAAe,EAAE,GAAGF,QAAQ;AAErD;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,QAAQN,WAAWE;IACzB,IAAI,CAACI,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT;AAiBA;;CAEC,GACD,OAAO,SAASE,mBACdC,OAAsC;IAEtC,MAAM,EACJH,KAAK,EACLI,QAAQ,EACRC,iBAAiB,EACjBC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACpB,GAAGL;IAEJ,MAAMM,SAASd,QAAQ;QACrB,IAAIe,MAAMC,OAAO,CAACX,QAAQ;YACxB,OAAO,IAAIY,IAAIZ;QACjB;QAEA,OAAO,IAAIY,IAAI;YAACZ;SAAM;IACxB,GAAG;QAACA;KAAM;IAEV,OAAOL,QACL,IAAO,CAAA;YACLkB,cAAcT;YACdU,kBAAiBC,MAAM;gBACrB,OAAON,OAAOO,GAAG,CAACD;YACpB;YACAT;YACAC;YACAF;YACAG;QACF,CAAA,GACA;QACEA;QACAF;QACAD;QACAD;QACAG;QACAE;KACD;AAEL"}
+{"version":3,"sources":["../../src/form/ListboxProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { type Dispatch, createContext, useContext, useMemo } from \"react\";\n\nimport { type OptionSelectedIconProps } from \"./Option.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface ListboxContext extends OptionSelectedIconProps {\n  // NOTE: These are not converted to arrow functions so the option can be\n  // inferred correctly\n  selectOption(option: unknown): void;\n  isOptionSelected(option: unknown): boolean;\n}\n\nconst context = createContext<ListboxContext | null>(null);\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: ListboxProvider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useListboxContext(): ListboxContext {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"The `ListboxProvider` must be a parent component\");\n  }\n\n  return value;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ListboxValue = string | number | null | object;\n\n/**\n * @since 6.3.0\n */\nexport interface ListboxProviderOptions<\n  Value extends ListboxValue,\n> extends OptionSelectedIconProps {\n  value: ListboxValue | readonly NonNullable<ListboxValue>[];\n  setValue: Dispatch<NonNullable<Value>>;\n}\n\n/**\n * @since 6.3.0\n */\nexport function useListboxProvider<Value extends ListboxValue>(\n  options: ListboxProviderOptions<Value>\n): ListboxContext {\n  const {\n    value,\n    setValue,\n    selectedIconAfter,\n    selectedIcon,\n    unselectedIcon,\n    disableSelectedIcon,\n  } = options;\n\n  const values = useMemo(() => {\n    if (Array.isArray(value)) {\n      return new Set(value);\n    }\n\n    return new Set([value]);\n  }, [value]);\n\n  return useMemo(\n    () => ({\n      selectOption: setValue,\n      isOptionSelected(option) {\n        return values.has(option);\n      },\n      selectedIcon,\n      unselectedIcon,\n      selectedIconAfter,\n      disableSelectedIcon,\n    }),\n    [\n      disableSelectedIcon,\n      selectedIcon,\n      selectedIconAfter,\n      setValue,\n      unselectedIcon,\n      values,\n    ]\n  );\n}\n"],"names":["createContext","useContext","useMemo","context","Provider","ListboxProvider","useListboxContext","value","Error","useListboxProvider","options","setValue","selectedIconAfter","selectedIcon","unselectedIcon","disableSelectedIcon","values","Array","isArray","Set","selectOption","isOptionSelected","option","has"],"mappings":"AAAA;AAEA,SAAwBA,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAe1E,MAAMC,UAAUH,cAAqC;AAErD;;;;;CAKC,GACD,OAAO,MAAM,EAAEI,UAAUC,eAAe,EAAE,GAAGF,QAAQ;AAErD;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,QAAQN,WAAWE;IACzB,IAAI,CAACI,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT;AAkBA;;CAEC,GACD,OAAO,SAASE,mBACdC,OAAsC;IAEtC,MAAM,EACJH,KAAK,EACLI,QAAQ,EACRC,iBAAiB,EACjBC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACpB,GAAGL;IAEJ,MAAMM,SAASd,QAAQ;QACrB,IAAIe,MAAMC,OAAO,CAACX,QAAQ;YACxB,OAAO,IAAIY,IAAIZ;QACjB;QAEA,OAAO,IAAIY,IAAI;YAACZ;SAAM;IACxB,GAAG;QAACA;KAAM;IAEV,OAAOL,QACL,IAAO,CAAA;YACLkB,cAAcT;YACdU,kBAAiBC,MAAM;gBACrB,OAAON,OAAOO,GAAG,CAACD;YACpB;YACAT;YACAC;YACAF;YACAG;QACF,CAAA,GACA;QACEA;QACAF;QACAD;QACAD;QACAG;QACAE;KACD;AAEL"}

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 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 (typeof 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","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;AAoD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,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,KAACc;oBACE,GAAGL,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;oBACdiC,SAASxC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCgC,QAAQ;oBACR1B,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 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 (typeof 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","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,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,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,KAACc;oBACE,GAAGL,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;oBACdiC,SAASxC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCgC,QAAQ;oBACR1B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRkB,UAAUA;8BAET7B;;;;;AAMb,GACA"}

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\n  extends Omit<TextFieldProps, \"type\" | \"rightAddon\"> {\n  /**\n   * @defaultValue `\"password\"`\n   * @since 6.0.0 Defaults to `\"password\"`\n   */\n  name?: string;\n\n  /**\n   * @example Configurable Visibility Icon Object\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={{\n   *     visible: <SecurityIcon />,\n   *     invisible: <RemoveRedEyeIcon />,\n   *   }}\n   * />\n   * ```\n   *\n   * @example Get Password Visibility Icon Function\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={(isPasswordVisible) => {\n   *     if (isPasswordVisible) {\n   *       return <SecurityIcon />;\n   *     }\n   *\n   *     return <RemoveRedEyeIcon />;\n   *   }}\n   * />\n   * ```\n   *\n   * @example Custom Icon\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={<SomeCustomComponent />}\n   * />\n   * ```\n   *\n   * @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;AAqH7B;;;;;;;;;;;;;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 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"}

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

package/dist/form/Select.d.ts

@@ -2,8 +2,27 @@ import { type ChangeEvent, type HTMLAttributes, type InputHTMLAttributes, type R
 import { type BoxProps } from "../box/Box.js";
 import { type MenuProps } from "../menu/Menu.js";
 import { type LabelA11y, type PropsWithRef, type RequireAtLeastOne } from "../types.js";
+import { type OptionProps } from "./Option.js";
 import { type TextFieldContainerProps } from "./TextFieldContainer.js";
 import { type UserAgentAutocompleteProps } from "./types.js";
+/**
+ * @since 6.5.0
+ */
+export interface GetSelectedOptionChildrenOptions<Value extends string = string> {
+    value: "" | Value;
+    /**
+     * The option will be undefined if there is no value or matching option.
+     */
+    option: OptionProps | undefined;
+    /**
+     * This is a pass-through of the {@link SelectProps.placeholder}
+     */
+    placeholder?: ReactNode;
+    /**
+     * This is a pass-through of the {@link SelectProps.selectedOptionProps}
+     */
+    children?: ReactNode;
+}
 /**
  * This is a convenience type for casting the `event.currentTarget.value` of a
  * `Select`'s change event to be union of available values.
@@ -145,6 +164,11 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldContain
      * @defaultValue `false`
      */
     disableSelectedIcon?: boolean;
+    /**
+     * @since 6.5.0
+     * @defaultValue `({ children, option, placeholder }) => children ?? (option?.children || placeholder)`
+     */
+    getSelectedOptionChildren?: (options: GetSelectedOptionChildrenOptions<Value>) => ReactNode;
     /**
      * This should be the available `Option`s for the select to choose from. It
      * can also contain `OptGroup` or any other elements but only clicking on an

package/dist/form/Select.js

@@ -22,6 +22,12 @@ const EMPTY_STRING = "";
 const noop = ()=>{
 // do nothing
 };
+/**
+ * @since 6.5.0
+ */ const defaultGetSelectedOptionChildren = (options)=>{
+    const { children, option, placeholder } = options;
+    return children ?? (option?.children || placeholder);
+};
 /**
  * **Client Component**
  *
@@ -53,7 +59,7 @@ const noop = ()=>{
  * @see {@link https://react-md.dev/components/select | Select Demos}
  * @since 6.0.0 Rewritten with a new API.
  */ export function Select(props) {
-    const { id, form, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, className, onClick, onFocus, onKeyDown, inputRef: propInputRef, inputProps, containerRef, placeholder, menuProps = {}, label, labelProps = {}, selectedOptionProps, icon: propIcon, value, defaultValue, theme: propTheme, onChange = noop, rightAddon: propRightAddon, active = false, required, selectedIconAfter = false, disableOptionAddon = false, disableSelectedIcon = false, children, ...remaining } = props;
+    const { id, form, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, className, onClick, onFocus, onKeyDown, inputRef: propInputRef, inputProps, containerRef, placeholder, menuProps = {}, label, labelProps = {}, selectedOptionProps, getSelectedOptionChildren = defaultGetSelectedOptionChildren, icon: propIcon, value, defaultValue, theme: propTheme, onChange = noop, rightAddon: propRightAddon, active = false, required, selectedIconAfter = false, disableOptionAddon = false, disableSelectedIcon = false, children, ...remaining } = props;
     const { dense, error, disabled } = props;
     const comboboxId = useEnsuredId(id, "select");
     const inputId = useEnsuredId(inputProps?.id, "select-value");
@@ -117,9 +123,14 @@ const noop = ()=>{
                 children: [
                     /*#__PURE__*/ _jsx(SelectedOption, {
                         option: currentOption,
-                        placeholder: placeholder,
                         disableAddon: disableOptionAddon,
-                        ...selectedOptionProps
+                        ...selectedOptionProps,
+                        children: getSelectedOptionChildren({
+                            value: currentValue,
+                            option: currentOption,
+                            placeholder,
+                            children: selectedOptionProps?.children
+                        })
                     }),
                     /*#__PURE__*/ _jsx("input", {
                         "aria-hidden": true,

package/dist/form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type BoxProps } from \"../box/Box.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type LabelA11y,\n  type PropsWithRef,\n  type RequireAtLeastOne,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { Listbox } from \"./Listbox.js\";\nimport { SelectedOption } from \"./SelectedOption.js\";\nimport {\n  TextFieldContainer,\n  type TextFieldContainerProps,\n} from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label as labelStyles } from \"./labelStyles.js\";\nimport { select } from \"./selectStyles.js\";\nimport { extractOptionsFromChildren } from \"./selectUtils.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport { type UserAgentAutocompleteProps } from \"./types.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport { useSelectCombobox } from \"./useSelectCombobox.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst EMPTY_STRING = \"\" as const;\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This is a convenience type for casting the `event.currentTarget.value` of a\n * `Select`'s change event to be union of available values.\n *\n * Note: The change event does not provide any sort of validation on the value\n * so automation tools like Cypress, Playwright, or Selenium might set an\n * invalid value. This also does not work for numbers, so you will need to\n * implement that yourself.\n *\n * @example Simple Usage\n * ```tsx\n * import { Select, type SelectChangeEvent } from \"@react-md/core/form/Select\";\n * import { Option } from \"@react-md/core/form/Option\";\n * import type { ReactElement } from \"react\";\n *\n * type Value = \"\" | \"a\" | \"b\" | \"c\" | \"d\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState<Value>(\"\");\n *\n *   const handleChange = (event: SelectChangeEvent<Value>): void => {\n *     // No type error!\n *     // `event.currentTarget.value`'s type is `Value` instead of a generic `string`\n *     setValue(event.currentTarget.value);\n *   };\n *\n *   return (\n *     <Select\n *       label=\"Label\"\n *       value={value}\n *       onChange={handleChange}\n *     >\n *       <Option value=\"a\">First</Option>\n *       <Option value=\"b\">Second</Option>\n *       <Option value=\"c\">Third</Option>\n *       <Option value=\"d\">Fourth</Option>\n *     </Select>\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport type SelectChangeEvent<Value extends string> =\n  ChangeEvent<HTMLInputElement> & { currentTarget: { value: Value } };\n\n/**\n * @since 6.0.0 Rewritten with a new API.\n */\nexport interface SelectProps<Value extends string>\n  extends Omit<TextFieldContainerProps, \"label\">,\n    Pick<InputHTMLAttributes<HTMLInputElement>, \"form\" | \"required\">,\n    UserAgentAutocompleteProps {\n  /**\n   * @defaultValue `\"select-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text or element to render while no options have been\n   * selected.\n   */\n  placeholder?: ReactNode;\n\n  /**\n   * Set this to a custom dropdown icon or `null` to not render a dropdown icon.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this value to fully control the value of the select component. The\n   * {@link onChange} handler **must** also be provided if this prop exists.\n   */\n  value?: Value;\n\n  /**\n   * An optional default value when the value of the select component is\n   * uncontrolled.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: Value;\n\n  /** @see {@link SelectChangeEvent} */\n  onChange?: (event: SelectChangeEvent<Value>) => void;\n\n  /**\n   * An optional floating label to display like other form fields.\n   */\n  label?: ReactNode;\n\n  /**\n   * Optional props to pass to the `<span>` that surrounds the {@link label}\n   */\n  labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * An optional ref to pass to the hidden `<input type=\"text\" />` element that\n   * stores the current value. This is really only useful if you'd like to keep\n   * this component uncontrolled and access the value through\n   * `inputRef.current.value`.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n\n  /**\n   * A ref for the container `<div>` element.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * Any additional props to provide to the `Menu` component that renders all\n   * the `Option`s.\n   *\n   * The menu will always have these default values unless explicity\n   * overwritten by this prop:\n   *\n   * - `aria-labelledby={label ? labelId : id}` -- this will be undefined if\n   *   `aria-label` is provided\n   * - `anchor={BELOW_CENTER_ANCHOR}`\n   * - `width=\"min\"`\n   */\n  menuProps?: PropsWithRef<\n    Omit<MenuProps, \"visible\" | \"onRequestClose\" | \"fixedTo\">\n  >;\n\n  /**\n   * Any additional props to pass to the div that contains the current visible\n   * option.\n   */\n  selectedOptionProps?: BoxProps;\n\n  /**\n   * Set this to `true` if all the `Option` components should display the\n   * selected icon after the children instead of before.\n   *\n   * @see {@link disableSelectedIcon} to remove the selected icon instead.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to prevent the current option from rendering the\n   * `leftAddon` in the `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  disableOptionAddon?: boolean;\n\n  /**\n   * Set this to `true` to update all the `Option` components to no longer\n   * render an icon while selected.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * This should be the available `Option`s for the select to choose from. It\n   * can also contain `OptGroup` or any other elements but only clicking on an\n   * `Option` component will update the value.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Option } from \"@react-md/core/form/Option\";\n * import { Select } from \"@react-md/core/form/Select\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"\");\n *\n *   return (\n *     <Select\n *       label=\"Select\"\n *       value={value}\n *       onChange={(event) => setValue(event.currentTarget.value)}\n *       placeholder=\"Select a value\"\n *     >\n *       <Option value=\"a\">Option 1</Option>\n *       <Option value=\"b\">Option 2</Option>\n *       <Option value=\"c\">Option 3</Option>\n *       <Option value=\"d\">Option 4</Option>\n *     </Select>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/select | Select Demos}\n * @since 6.0.0 Rewritten with a new API.\n */\nexport function Select<Value extends string>(\n  props: RequireAtLeastOne<SelectProps<Value>, \"label\" | keyof LabelA11y>\n): ReactElement {\n  const {\n    id,\n    form,\n    autoCompleteValue,\n    autoComplete = autoCompleteValue,\n    name = autoCompleteValue,\n    className,\n    onClick,\n    onFocus,\n    onKeyDown,\n    inputRef: propInputRef,\n    inputProps,\n    containerRef,\n    placeholder,\n    menuProps = {},\n    label,\n    labelProps = {},\n    selectedOptionProps,\n    icon: propIcon,\n    value,\n    defaultValue,\n    theme: propTheme,\n    onChange = noop,\n    rightAddon: propRightAddon,\n    active = false,\n    required,\n    selectedIconAfter = false,\n    disableOptionAddon = false,\n    disableSelectedIcon = false,\n    children,\n    ...remaining\n  } = props;\n  const { dense, error, disabled } = props;\n\n  const comboboxId = useEnsuredId(id, \"select\");\n  const inputId = useEnsuredId(inputProps?.id, \"select-value\");\n  const selectLabelId = useEnsuredId(labelProps.id, \"select-label\");\n  const labelId = label ? selectLabelId : undefined;\n\n  const [localValue, setLocalValue] = useState(() => {\n    if (typeof defaultValue !== \"undefined\") {\n      return defaultValue;\n    }\n\n    return typeof value !== \"undefined\" ? value : EMPTY_STRING;\n  });\n  const currentValue = typeof value === \"undefined\" ? localValue : value;\n  const initialValue = useRef(currentValue);\n  const { options, currentOption } = extractOptionsFromChildren(\n    children,\n    currentValue\n  );\n\n  const { visible, comboboxProps, movementContext, getMenuProps } =\n    useSelectCombobox({\n      form,\n      value: currentValue,\n      values: options,\n      onClick,\n      onFocus,\n      onKeyDown,\n      disabled,\n      popupId: menuProps.id,\n      popupRef: menuProps.ref,\n      comboboxId,\n      comboboxRef: containerRef,\n    });\n\n  const [inputRef, inputRefCallback] = useEnsuredRef(propInputRef);\n  useFormReset({\n    form,\n    elementRef: inputRef,\n    defaultValue: initialValue.current,\n  });\n\n  const icon = getIcon(\"dropdown\", propIcon);\n  const theme = getFormConfig(\"theme\", propTheme);\n  let rightAddon = propRightAddon;\n  if (typeof rightAddon === \"undefined\" && icon) {\n    rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;\n  }\n\n  const { ref: listboxRef, ...listboxProps } = getMenuProps(menuProps);\n  let listboxLabelledBy = menuProps[\"aria-labelledby\"];\n  const listboxLabel = menuProps[\"aria-label\"];\n  if (!listboxLabel && !listboxLabelledBy) {\n    listboxLabelledBy = labelId || comboboxId;\n  }\n\n  return (\n    <KeyboardMovementProvider value={movementContext}>\n      <TextFieldContainer\n        aria-labelledby={labelId}\n        {...remaining}\n        {...comboboxProps}\n        label={!!label}\n        theme={theme}\n        active={active || visible}\n        className={cnb(\"rmd-select-container\", className)}\n        rightAddon={rightAddon}\n      >\n        <SelectedOption\n          option={currentOption}\n          placeholder={placeholder}\n          disableAddon={disableOptionAddon}\n          {...selectedOptionProps}\n        />\n        <input\n          aria-hidden\n          id={inputId}\n          ref={inputRefCallback}\n          type=\"text\"\n          autoComplete={autoComplete}\n          name={name}\n          tabIndex={-1}\n          disabled={disabled}\n          required={required}\n          placeholder=\" \"\n          {...inputProps}\n          value={value}\n          defaultValue={defaultValue}\n          className={cnb(select({ theme }), textField())}\n          onChange={(event) => {\n            onChange(event as SelectChangeEvent<Value>);\n            if (typeof value !== \"undefined\") {\n              return;\n            }\n\n            const nextValue = event.currentTarget.value;\n            const nextOption = options.find((option) => option === nextValue);\n\n            setLocalValue(nextOption ?? initialValue.current);\n          }}\n        />\n        {label && (\n          <span\n            {...labelProps}\n            id={labelId}\n            className={labelStyles({\n              dense,\n              error,\n              disabled,\n              active: active || visible,\n              floating: true,\n              floatingActive: !!placeholder || !!currentOption,\n              className: labelProps.className,\n            })}\n          >\n            {label}\n          </span>\n        )}\n      </TextFieldContainer>\n      <Listbox\n        {...listboxProps}\n        aria-label={listboxLabel}\n        aria-labelledby={listboxLabelledBy as string}\n        nodeRef={listboxRef}\n        value={currentValue}\n        setValue={useCallback(\n          (option: \"\" | Value) => {\n            triggerManualChangeEvent(inputRef.current, option);\n          },\n          [inputRef]\n        )}\n        selectedIconAfter={selectedIconAfter}\n        disableSelectedIcon={disableSelectedIcon}\n      >\n        {children}\n      </Listbox>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["cnb","useCallback","useRef","useState","IconRotator","getIcon","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","Listbox","SelectedOption","TextFieldContainer","getFormConfig","label","labelStyles","select","extractOptionsFromChildren","textField","useFormReset","useSelectCombobox","triggerManualChangeEvent","EMPTY_STRING","noop","Select","props","id","form","autoCompleteValue","autoComplete","name","className","onClick","onFocus","onKeyDown","inputRef","propInputRef","inputProps","containerRef","placeholder","menuProps","labelProps","selectedOptionProps","icon","propIcon","value","defaultValue","theme","propTheme","onChange","rightAddon","propRightAddon","active","required","selectedIconAfter","disableOptionAddon","disableSelectedIcon","children","remaining","dense","error","disabled","comboboxId","inputId","selectLabelId","labelId","undefined","localValue","setLocalValue","currentValue","initialValue","options","currentOption","visible","comboboxProps","movementContext","getMenuProps","values","popupId","popupRef","ref","comboboxRef","inputRefCallback","elementRef","current","rotated","listboxRef","listboxProps","listboxLabelledBy","listboxLabel","aria-labelledby","option","disableAddon","input","aria-hidden","type","tabIndex","event","nextValue","currentTarget","nextOption","find","span","floating","floatingActive","aria-label","nodeRef","setValue"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type BoxProps } from \"../box/Box.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type LabelA11y,\n  type PropsWithRef,\n  type RequireAtLeastOne,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { Listbox } from \"./Listbox.js\";\nimport { type OptionProps } from \"./Option.js\";\nimport { SelectedOption } from \"./SelectedOption.js\";\nimport {\n  TextFieldContainer,\n  type TextFieldContainerProps,\n} from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label as labelStyles } from \"./labelStyles.js\";\nimport { select } from \"./selectStyles.js\";\nimport { extractOptionsFromChildren } from \"./selectUtils.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport { type UserAgentAutocompleteProps } from \"./types.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport { useSelectCombobox } from \"./useSelectCombobox.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst EMPTY_STRING = \"\" as const;\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.5.0\n */\nexport interface GetSelectedOptionChildrenOptions<\n  Value extends string = string,\n> {\n  value: \"\" | Value;\n\n  /**\n   * The option will be undefined if there is no value or matching option.\n   */\n  option: OptionProps | undefined;\n\n  /**\n   * This is a pass-through of the {@link SelectProps.placeholder}\n   */\n  placeholder?: ReactNode;\n\n  /**\n   * This is a pass-through of the {@link SelectProps.selectedOptionProps}\n   */\n  children?: ReactNode;\n}\n\n/**\n * @since 6.5.0\n */\nconst defaultGetSelectedOptionChildren = (\n  options: GetSelectedOptionChildrenOptions\n): ReactNode => {\n  const { children, option, placeholder } = options;\n\n  return children ?? (option?.children || placeholder);\n};\n\n/**\n * This is a convenience type for casting the `event.currentTarget.value` of a\n * `Select`'s change event to be union of available values.\n *\n * Note: The change event does not provide any sort of validation on the value\n * so automation tools like Cypress, Playwright, or Selenium might set an\n * invalid value. This also does not work for numbers, so you will need to\n * implement that yourself.\n *\n * @example Simple Usage\n * ```tsx\n * import { Select, type SelectChangeEvent } from \"@react-md/core/form/Select\";\n * import { Option } from \"@react-md/core/form/Option\";\n * import type { ReactElement } from \"react\";\n *\n * type Value = \"\" | \"a\" | \"b\" | \"c\" | \"d\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState<Value>(\"\");\n *\n *   const handleChange = (event: SelectChangeEvent<Value>): void => {\n *     // No type error!\n *     // `event.currentTarget.value`'s type is `Value` instead of a generic `string`\n *     setValue(event.currentTarget.value);\n *   };\n *\n *   return (\n *     <Select\n *       label=\"Label\"\n *       value={value}\n *       onChange={handleChange}\n *     >\n *       <Option value=\"a\">First</Option>\n *       <Option value=\"b\">Second</Option>\n *       <Option value=\"c\">Third</Option>\n *       <Option value=\"d\">Fourth</Option>\n *     </Select>\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport type SelectChangeEvent<Value extends string> =\n  ChangeEvent<HTMLInputElement> & { currentTarget: { value: Value } };\n\n/**\n * @since 6.0.0 Rewritten with a new API.\n */\nexport interface SelectProps<Value extends string>\n  extends\n    Omit<TextFieldContainerProps, \"label\">,\n    Pick<InputHTMLAttributes<HTMLInputElement>, \"form\" | \"required\">,\n    UserAgentAutocompleteProps {\n  /**\n   * @defaultValue `\"select-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text or element to render while no options have been\n   * selected.\n   */\n  placeholder?: ReactNode;\n\n  /**\n   * Set this to a custom dropdown icon or `null` to not render a dropdown icon.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this value to fully control the value of the select component. The\n   * {@link onChange} handler **must** also be provided if this prop exists.\n   */\n  value?: Value;\n\n  /**\n   * An optional default value when the value of the select component is\n   * uncontrolled.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: Value;\n\n  /** @see {@link SelectChangeEvent} */\n  onChange?: (event: SelectChangeEvent<Value>) => void;\n\n  /**\n   * An optional floating label to display like other form fields.\n   */\n  label?: ReactNode;\n\n  /**\n   * Optional props to pass to the `<span>` that surrounds the {@link label}\n   */\n  labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * An optional ref to pass to the hidden `<input type=\"text\" />` element that\n   * stores the current value. This is really only useful if you'd like to keep\n   * this component uncontrolled and access the value through\n   * `inputRef.current.value`.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n\n  /**\n   * A ref for the container `<div>` element.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * Any additional props to provide to the `Menu` component that renders all\n   * the `Option`s.\n   *\n   * The menu will always have these default values unless explicity\n   * overwritten by this prop:\n   *\n   * - `aria-labelledby={label ? labelId : id}` -- this will be undefined if\n   *   `aria-label` is provided\n   * - `anchor={BELOW_CENTER_ANCHOR}`\n   * - `width=\"min\"`\n   */\n  menuProps?: PropsWithRef<\n    Omit<MenuProps, \"visible\" | \"onRequestClose\" | \"fixedTo\">\n  >;\n\n  /**\n   * Any additional props to pass to the div that contains the current visible\n   * option.\n   */\n  selectedOptionProps?: BoxProps;\n\n  /**\n   * Set this to `true` if all the `Option` components should display the\n   * selected icon after the children instead of before.\n   *\n   * @see {@link disableSelectedIcon} to remove the selected icon instead.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to prevent the current option from rendering the\n   * `leftAddon` in the `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  disableOptionAddon?: boolean;\n\n  /**\n   * Set this to `true` to update all the `Option` components to no longer\n   * render an icon while selected.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * @since 6.5.0\n   * @defaultValue `({ children, option, placeholder }) => children ?? (option?.children || placeholder)`\n   */\n  getSelectedOptionChildren?: (\n    options: GetSelectedOptionChildrenOptions<Value>\n  ) => ReactNode;\n\n  /**\n   * This should be the available `Option`s for the select to choose from. It\n   * can also contain `OptGroup` or any other elements but only clicking on an\n   * `Option` component will update the value.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Option } from \"@react-md/core/form/Option\";\n * import { Select } from \"@react-md/core/form/Select\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"\");\n *\n *   return (\n *     <Select\n *       label=\"Select\"\n *       value={value}\n *       onChange={(event) => setValue(event.currentTarget.value)}\n *       placeholder=\"Select a value\"\n *     >\n *       <Option value=\"a\">Option 1</Option>\n *       <Option value=\"b\">Option 2</Option>\n *       <Option value=\"c\">Option 3</Option>\n *       <Option value=\"d\">Option 4</Option>\n *     </Select>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/select | Select Demos}\n * @since 6.0.0 Rewritten with a new API.\n */\nexport function Select<Value extends string>(\n  props: RequireAtLeastOne<SelectProps<Value>, \"label\" | keyof LabelA11y>\n): ReactElement {\n  const {\n    id,\n    form,\n    autoCompleteValue,\n    autoComplete = autoCompleteValue,\n    name = autoCompleteValue,\n    className,\n    onClick,\n    onFocus,\n    onKeyDown,\n    inputRef: propInputRef,\n    inputProps,\n    containerRef,\n    placeholder,\n    menuProps = {},\n    label,\n    labelProps = {},\n    selectedOptionProps,\n    getSelectedOptionChildren = defaultGetSelectedOptionChildren,\n    icon: propIcon,\n    value,\n    defaultValue,\n    theme: propTheme,\n    onChange = noop,\n    rightAddon: propRightAddon,\n    active = false,\n    required,\n    selectedIconAfter = false,\n    disableOptionAddon = false,\n    disableSelectedIcon = false,\n    children,\n    ...remaining\n  } = props;\n  const { dense, error, disabled } = props;\n\n  const comboboxId = useEnsuredId(id, \"select\");\n  const inputId = useEnsuredId(inputProps?.id, \"select-value\");\n  const selectLabelId = useEnsuredId(labelProps.id, \"select-label\");\n  const labelId = label ? selectLabelId : undefined;\n\n  const [localValue, setLocalValue] = useState(() => {\n    if (typeof defaultValue !== \"undefined\") {\n      return defaultValue;\n    }\n\n    return typeof value !== \"undefined\" ? value : EMPTY_STRING;\n  });\n  const currentValue = typeof value === \"undefined\" ? localValue : value;\n  const initialValue = useRef(currentValue);\n  const { options, currentOption } = extractOptionsFromChildren(\n    children,\n    currentValue\n  );\n\n  const { visible, comboboxProps, movementContext, getMenuProps } =\n    useSelectCombobox({\n      form,\n      value: currentValue,\n      values: options,\n      onClick,\n      onFocus,\n      onKeyDown,\n      disabled,\n      popupId: menuProps.id,\n      popupRef: menuProps.ref,\n      comboboxId,\n      comboboxRef: containerRef,\n    });\n\n  const [inputRef, inputRefCallback] = useEnsuredRef(propInputRef);\n  useFormReset({\n    form,\n    elementRef: inputRef,\n    defaultValue: initialValue.current,\n  });\n\n  const icon = getIcon(\"dropdown\", propIcon);\n  const theme = getFormConfig(\"theme\", propTheme);\n  let rightAddon = propRightAddon;\n  if (typeof rightAddon === \"undefined\" && icon) {\n    rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;\n  }\n\n  const { ref: listboxRef, ...listboxProps } = getMenuProps(menuProps);\n  let listboxLabelledBy = menuProps[\"aria-labelledby\"];\n  const listboxLabel = menuProps[\"aria-label\"];\n  if (!listboxLabel && !listboxLabelledBy) {\n    listboxLabelledBy = labelId || comboboxId;\n  }\n\n  return (\n    <KeyboardMovementProvider value={movementContext}>\n      <TextFieldContainer\n        aria-labelledby={labelId}\n        {...remaining}\n        {...comboboxProps}\n        label={!!label}\n        theme={theme}\n        active={active || visible}\n        className={cnb(\"rmd-select-container\", className)}\n        rightAddon={rightAddon}\n      >\n        <SelectedOption\n          option={currentOption}\n          disableAddon={disableOptionAddon}\n          {...selectedOptionProps}\n        >\n          {getSelectedOptionChildren({\n            value: currentValue,\n            option: currentOption,\n            placeholder,\n            children: selectedOptionProps?.children,\n          })}\n        </SelectedOption>\n        <input\n          aria-hidden\n          id={inputId}\n          ref={inputRefCallback}\n          type=\"text\"\n          autoComplete={autoComplete}\n          name={name}\n          tabIndex={-1}\n          disabled={disabled}\n          required={required}\n          placeholder=\" \"\n          {...inputProps}\n          value={value}\n          defaultValue={defaultValue}\n          className={cnb(select({ theme }), textField())}\n          onChange={(event) => {\n            onChange(event as SelectChangeEvent<Value>);\n            if (typeof value !== \"undefined\") {\n              return;\n            }\n\n            const nextValue = event.currentTarget.value;\n            const nextOption = options.find((option) => option === nextValue);\n\n            setLocalValue(nextOption ?? initialValue.current);\n          }}\n        />\n        {label && (\n          <span\n            {...labelProps}\n            id={labelId}\n            className={labelStyles({\n              dense,\n              error,\n              disabled,\n              active: active || visible,\n              floating: true,\n              floatingActive: !!placeholder || !!currentOption,\n              className: labelProps.className,\n            })}\n          >\n            {label}\n          </span>\n        )}\n      </TextFieldContainer>\n      <Listbox\n        {...listboxProps}\n        aria-label={listboxLabel}\n        aria-labelledby={listboxLabelledBy as string}\n        nodeRef={listboxRef}\n        value={currentValue}\n        setValue={useCallback(\n          (option: \"\" | Value) => {\n            triggerManualChangeEvent(inputRef.current, option);\n          },\n          [inputRef]\n        )}\n        selectedIconAfter={selectedIconAfter}\n        disableSelectedIcon={disableSelectedIcon}\n      >\n        {children}\n      </Listbox>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["cnb","useCallback","useRef","useState","IconRotator","getIcon","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","Listbox","SelectedOption","TextFieldContainer","getFormConfig","label","labelStyles","select","extractOptionsFromChildren","textField","useFormReset","useSelectCombobox","triggerManualChangeEvent","EMPTY_STRING","noop","defaultGetSelectedOptionChildren","options","children","option","placeholder","Select","props","id","form","autoCompleteValue","autoComplete","name","className","onClick","onFocus","onKeyDown","inputRef","propInputRef","inputProps","containerRef","menuProps","labelProps","selectedOptionProps","getSelectedOptionChildren","icon","propIcon","value","defaultValue","theme","propTheme","onChange","rightAddon","propRightAddon","active","required","selectedIconAfter","disableOptionAddon","disableSelectedIcon","remaining","dense","error","disabled","comboboxId","inputId","selectLabelId","labelId","undefined","localValue","setLocalValue","currentValue","initialValue","currentOption","visible","comboboxProps","movementContext","getMenuProps","values","popupId","popupRef","ref","comboboxRef","inputRefCallback","elementRef","current","rotated","listboxRef","listboxProps","listboxLabelledBy","listboxLabel","aria-labelledby","disableAddon","input","aria-hidden","type","tabIndex","event","nextValue","currentTarget","nextOption","find","span","floating","floatingActive","aria-label","nodeRef","setValue"],"mappings":"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"}

package/dist/form/SelectedOption.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 import { type BoxProps } from "../box/Box.js";
 import { type OptionProps } from "./Option.js";
 /**
@@ -7,7 +7,6 @@ import { type OptionProps } from "./Option.js";
  */
 export interface SelectedOptionProps extends BoxProps {
     option: OptionProps | undefined;
-    placeholder?: ReactNode;
     disableAddon: boolean;
 }
 /**

package/dist/form/SelectedOption.js

@@ -9,8 +9,8 @@ import { textField } from "./textFieldStyles.js";
  * @since 6.0.0
  * @internal
  */ export function SelectedOption(props) {
-    const { disableAddon, option, className, disableWrap = true, disablePadding = true, placeholder, ...remaining } = props;
-    let children = option?.children || placeholder;
+    const { disableAddon, option, className, disableWrap = true, disablePadding = true, ...remaining } = props;
+    let { children } = remaining;
     // when the children are a string or number, wrap it in additional span so
     // that overflow can be ellipsis-ed
     if (typeof children === "string" || typeof children === "number") {