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

package/dist/form/InputToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/InputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\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\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface InputToggleIconProps {\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>, 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<\n    LabelHTMLAttributes<HTMLLabelElement>,\n    HTMLLabelElement\n  >;\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    InputToggleIconProps,\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 * @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;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAML,QAAQ;AAEf,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,KAAK,QAAQ,aAAa;AAgNnC;;;;;CAKC,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\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface InputToggleIconProps {\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>, 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<\n    LabelHTMLAttributes<HTMLLabelElement>,\n    HTMLLabelElement\n  >;\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    InputToggleIconProps,\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 * @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;AAgNnC;;;;;CAKC,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/InputToggleIcon.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { FORM_CONFIG } from "./formConfig.js";
 import { inputToggle } from "./inputToggleStyles.js";
 /**

package/dist/form/InputToggleIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/InputToggleIcon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { FORM_CONFIG } from \"./formConfig.js\";\nimport { inputToggle, type InputToggleSize } from \"./inputToggleStyles.js\";\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Removed the `circle` and `overlay` props since they are no\n * longer needed. Added the `icon`, `disableEm`, `checkedIcon` and\n * `indeterminateIcon` props.\n * @internal\n */\nexport interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {\n  type: \"checkbox\" | \"radio\";\n  /**\n   * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,\n   * the icon state won't work.\n   */\n  checked?: boolean;\n\n  /**\n   * The icon to display while {@link checked} is `false`.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to display while {@link checked} is `true` and\n   * {@link indeterminate} is `false`.\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * The icon to display while both {@link checked} and {@link indeterminate}\n   * are `true`.\n   */\n  indeterminateIcon?: ReactNode;\n\n  /** @defaultValue `\"normal\"` */\n  size?: InputToggleSize;\n\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  disableEm?: boolean;\n\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Updated to use different icons for each checked state instead\n * of a css overlay hack.\n * @internal\n */\nexport const InputToggleIcon = forwardRef<\n  HTMLSpanElement,\n  InputToggleIconProps\n>(function InputToggleIcon(props, ref) {\n  const {\n    type,\n    size = \"normal\",\n    icon: propIcon,\n    error,\n    checked,\n    children,\n    disabled,\n    indeterminate,\n    className,\n    disableEm = false,\n    checkedIcon: propCheckedIcon,\n    indeterminateIcon: propIndeterminateIcon,\n    ...remaining\n  } = props;\n  const uncheckedIcon = getIcon(type, propIcon);\n  const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);\n  const indeterminateIcon = getIcon(\n    \"checkboxIndeterminate\",\n    propIndeterminateIcon\n  );\n\n  let icon: ReactNode;\n  let active = false;\n  const uncontrolled = typeof checked !== \"boolean\";\n  if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {\n    active = !!checked && !error;\n    icon = checked\n      ? indeterminate\n        ? indeterminateIcon\n        : checkedIcon\n      : uncheckedIcon;\n  } else {\n    icon = (\n      <>\n        {uncheckedIcon}\n        {indeterminate ? indeterminateIcon : checkedIcon}\n      </>\n    );\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        inputToggle({\n          em: !disableEm,\n          size,\n          type,\n          error,\n          active,\n          disabled,\n          uncontrolled,\n          className,\n        })\n      )}\n    >\n      {children}\n      {icon}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","getIcon","FORM_CONFIG","inputToggle","InputToggleIcon","props","ref","type","size","icon","propIcon","error","checked","children","disabled","indeterminate","className","disableEm","checkedIcon","propCheckedIcon","indeterminateIcon","propIndeterminateIcon","remaining","uncheckedIcon","active","uncontrolled","uncontrolledToggles","span","em"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,WAAW,QAA8B,yBAAyB;AAkD3E;;;;;CAKC,GACD,OAAO,MAAMC,gCAAkBJ,WAG7B,SAASI,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,IAAI,EACJC,OAAO,QAAQ,EACfC,MAAMC,QAAQ,EACdC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,YAAY,KAAK,EACjBC,aAAaC,eAAe,EAC5BC,mBAAmBC,qBAAqB,EACxC,GAAGC,WACJ,GAAGjB;IACJ,MAAMkB,gBAAgBtB,QAAQM,MAAMG;IACpC,MAAMQ,cAAcjB,QAAQ,GAAGM,KAAK,OAAO,CAAC,EAAEY;IAC9C,MAAMC,oBAAoBnB,QACxB,yBACAoB;IAGF,IAAIZ;IACJ,IAAIe,SAAS;IACb,MAAMC,eAAe,OAAOb,YAAY;IACxC,IAAI,CAACa,gBAAgB,CAACvB,YAAYwB,mBAAmB,EAAE;QACrDF,SAAS,CAAC,CAACZ,WAAW,CAACD;QACvBF,OAAOG,UACHG,gBACEK,oBACAF,cACFK;IACN,OAAO;QACLd,qBACE;;gBACGc;gBACAR,gBAAgBK,oBAAoBF;;;IAG3C;IAEA,qBACE,MAACS;QACE,GAAGL,SAAS;QACbhB,KAAKA;QACLU,WAAWjB,IACTI,YAAY;YACVyB,IAAI,CAACX;YACLT;YACAD;YACAI;YACAa;YACAV;YACAW;YACAT;QACF;;YAGDH;YACAJ;;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/form/InputToggleIcon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { FORM_CONFIG } from \"./formConfig.js\";\nimport { type InputToggleSize, inputToggle } from \"./inputToggleStyles.js\";\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Removed the `circle` and `overlay` props since they are no\n * longer needed. Added the `icon`, `disableEm`, `checkedIcon` and\n * `indeterminateIcon` props.\n * @internal\n */\nexport interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {\n  type: \"checkbox\" | \"radio\";\n  /**\n   * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,\n   * the icon state won't work.\n   */\n  checked?: boolean;\n\n  /**\n   * The icon to display while {@link checked} is `false`.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to display while {@link checked} is `true` and\n   * {@link indeterminate} is `false`.\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * The icon to display while both {@link checked} and {@link indeterminate}\n   * are `true`.\n   */\n  indeterminateIcon?: ReactNode;\n\n  /** @defaultValue `\"normal\"` */\n  size?: InputToggleSize;\n\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  disableEm?: boolean;\n\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Updated to use different icons for each checked state instead\n * of a css overlay hack.\n * @internal\n */\nexport const InputToggleIcon = forwardRef<\n  HTMLSpanElement,\n  InputToggleIconProps\n>(function InputToggleIcon(props, ref) {\n  const {\n    type,\n    size = \"normal\",\n    icon: propIcon,\n    error,\n    checked,\n    children,\n    disabled,\n    indeterminate,\n    className,\n    disableEm = false,\n    checkedIcon: propCheckedIcon,\n    indeterminateIcon: propIndeterminateIcon,\n    ...remaining\n  } = props;\n  const uncheckedIcon = getIcon(type, propIcon);\n  const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);\n  const indeterminateIcon = getIcon(\n    \"checkboxIndeterminate\",\n    propIndeterminateIcon\n  );\n\n  let icon: ReactNode;\n  let active = false;\n  const uncontrolled = typeof checked !== \"boolean\";\n  if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {\n    active = !!checked && !error;\n    icon = checked\n      ? indeterminate\n        ? indeterminateIcon\n        : checkedIcon\n      : uncheckedIcon;\n  } else {\n    icon = (\n      <>\n        {uncheckedIcon}\n        {indeterminate ? indeterminateIcon : checkedIcon}\n      </>\n    );\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        inputToggle({\n          em: !disableEm,\n          size,\n          type,\n          error,\n          active,\n          disabled,\n          uncontrolled,\n          className,\n        })\n      )}\n    >\n      {children}\n      {icon}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","getIcon","FORM_CONFIG","inputToggle","InputToggleIcon","props","ref","type","size","icon","propIcon","error","checked","children","disabled","indeterminate","className","disableEm","checkedIcon","propCheckedIcon","indeterminateIcon","propIndeterminateIcon","remaining","uncheckedIcon","active","uncontrolled","uncontrolledToggles","span","em"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAA+BC,WAAW,QAAQ,yBAAyB;AAkD3E;;;;;CAKC,GACD,OAAO,MAAMC,gCAAkBJ,WAG7B,SAASI,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,IAAI,EACJC,OAAO,QAAQ,EACfC,MAAMC,QAAQ,EACdC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,YAAY,KAAK,EACjBC,aAAaC,eAAe,EAC5BC,mBAAmBC,qBAAqB,EACxC,GAAGC,WACJ,GAAGjB;IACJ,MAAMkB,gBAAgBtB,QAAQM,MAAMG;IACpC,MAAMQ,cAAcjB,QAAQ,GAAGM,KAAK,OAAO,CAAC,EAAEY;IAC9C,MAAMC,oBAAoBnB,QACxB,yBACAoB;IAGF,IAAIZ;IACJ,IAAIe,SAAS;IACb,MAAMC,eAAe,OAAOb,YAAY;IACxC,IAAI,CAACa,gBAAgB,CAACvB,YAAYwB,mBAAmB,EAAE;QACrDF,SAAS,CAAC,CAACZ,WAAW,CAACD;QACvBF,OAAOG,UACHG,gBACEK,oBACAF,cACFK;IACN,OAAO;QACLd,qBACE;;gBACGc;gBACAR,gBAAgBK,oBAAoBF;;;IAG3C;IAEA,qBACE,MAACS;QACE,GAAGL,SAAS;QACbhB,KAAKA;QACLU,WAAWjB,IACTI,YAAY;YACVyB,IAAI,CAACX;YACLT;YACAD;YACAI;YACAa;YACAV;YACAW;YACAT;QACF;;YAGDH;YACAJ;;;AAGP,GAAG"}

package/dist/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Label.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions, type LabelProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-label-floating-top\"?: string | number;\n    \"--rmd-label-left-offset\"?: string | number;\n    \"--rmd-label-top-offset\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n  }\n}\n\nconst labelStyles = bem(\"rmd-label\");\n\n/**\n * @since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap,\n    error,\n    dense,\n    active,\n    stacked,\n    reversed,\n    disabled,\n    floating,\n    inactive,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    labelStyles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n\n/**\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(props, ref) {\n    const {\n      gap,\n      error,\n      dense,\n      active,\n      stacked,\n      reversed,\n      disabled,\n      floating,\n      inactive,\n      floatingActive = active,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <label\n        ref={ref}\n        {...remaining}\n        className={label({\n          gap,\n          error,\n          dense,\n          active,\n          stacked,\n          reversed,\n          disabled,\n          floating,\n          floatingActive,\n          inactive,\n          className,\n        })}\n      >\n        {children}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","labelStyles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor","Label","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,cAAcD,IAAI;AAExB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOlB,IACLI,YAAY;QACVI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMY,sBAAQlB,WACnB,SAASkB,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJb,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBN,MAAM,EACvBJ,SAAS,EACTe,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACf;QACCgB,KAAKA;QACJ,GAAGE,SAAS;QACbhB,WAAWF,MAAM;YACfG;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAT;QACF;kBAECe;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Label.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions, type LabelProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-label-floating-top\"?: string | number;\n    \"--rmd-label-left-offset\"?: string | number;\n    \"--rmd-label-top-offset\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n  }\n}\n\nconst labelStyles = bem(\"rmd-label\");\n\n/**\n * @since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap,\n    error,\n    dense,\n    active,\n    stacked,\n    reversed,\n    disabled,\n    floating,\n    inactive,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    labelStyles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n\n/**\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(props, ref) {\n    const {\n      gap,\n      error,\n      dense,\n      active,\n      stacked,\n      reversed,\n      disabled,\n      floating,\n      inactive,\n      floatingActive = active,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <label\n        ref={ref}\n        {...remaining}\n        className={label({\n          gap,\n          error,\n          dense,\n          active,\n          stacked,\n          reversed,\n          disabled,\n          floating,\n          floatingActive,\n          inactive,\n          className,\n        })}\n      >\n        {children}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","labelStyles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor","Label","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,cAAcD,IAAI;AAExB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOlB,IACLI,YAAY;QACVI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMY,sBAAQlB,WACnB,SAASkB,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJb,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBN,MAAM,EACvBJ,SAAS,EACTe,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACf;QACCgB,KAAKA;QACJ,GAAGE,SAAS;QACbhB,WAAWF,MAAM;YACfG;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAT;QACF;kBAECe;;AAGP,GACA"}

package/dist/form/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Legend.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\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 * @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;AACnC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,UAAU,QAA8B,8BAA8B;AAY/E;;;;CAIC,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 { 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 * @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;;;;CAIC,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"}

package/dist/form/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Listbox.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useMemo,\n} from \"react\";\nimport { Menu, type MenuProps } from \"../menu/Menu.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { ListboxProvider } from \"./ListboxProvider.js\";\nimport { type OptionSelectedIconProps } from \"./Option.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ListboxValue = string | number | null | Record<string, unknown>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ListboxProps<Value extends ListboxValue>\n  extends MenuProps,\n    OptionSelectedIconProps {\n  nodeRef?: Ref<HTMLDivElement>;\n\n  value: Value | readonly NonNullable<ListboxValue>[];\n  setValue: Dispatch<NonNullable<Value>>;\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  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 (\n    <ListboxProvider\n      value={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      <Menu {...remaining} ref={nodeRef}>\n        {children}\n      </Menu>\n    </ListboxProvider>\n  );\n}\n"],"names":["useMemo","Menu","ListboxProvider","Listbox","props","value","setValue","children","nodeRef","selectedIconAfter","selectedIcon","unselectedIcon","disableSelectedIcon","remaining","values","Array","isArray","Set","selectOption","isOptionSelected","option","has","ref"],"mappings":";AAAA,SAKEA,OAAO,QACF,QAAQ;AACf,SAASC,IAAI,QAAwB,kBAAkB;AAEvD,SAASC,eAAe,QAAQ,uBAAuB;AAuBvD;;;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;IACJ,MAAMU,SAASd,QAAQ;QACrB,IAAIe,MAAMC,OAAO,CAACX,QAAQ;YACxB,OAAO,IAAIY,IAAIZ;QACjB;QAEA,OAAO,IAAIY,IAAI;YAACZ;SAAM;IACxB,GAAG;QAACA;KAAM;IAEV,qBACE,KAACH;QACCG,OAAOL,QACL,IAAO,CAAA;gBACLkB,cAAcZ;gBACda,kBAAiBC,MAAM;oBACrB,OAAON,OAAOO,GAAG,CAACD;gBACpB;gBACAV;gBACAC;gBACAF;gBACAG;YACF,CAAA,GACA;YACEA;YACAF;YACAD;YACAH;YACAK;YACAG;SACD;kBAGH,cAAA,KAACb;YAAM,GAAGY,SAAS;YAAES,KAAKd;sBACvBD;;;AAIT"}
+{"version":3,"sources":["../../src/form/Listbox.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useMemo,\n} from \"react\";\n\nimport { Menu, type MenuProps } from \"../menu/Menu.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { ListboxProvider } from \"./ListboxProvider.js\";\nimport { type OptionSelectedIconProps } from \"./Option.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ListboxValue = string | number | null | Record<string, unknown>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ListboxProps<Value extends ListboxValue>\n  extends MenuProps,\n    OptionSelectedIconProps {\n  nodeRef?: Ref<HTMLDivElement>;\n\n  value: Value | readonly NonNullable<ListboxValue>[];\n  setValue: Dispatch<NonNullable<Value>>;\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  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 (\n    <ListboxProvider\n      value={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      <Menu {...remaining} ref={nodeRef}>\n        {children}\n      </Menu>\n    </ListboxProvider>\n  );\n}\n"],"names":["useMemo","Menu","ListboxProvider","Listbox","props","value","setValue","children","nodeRef","selectedIconAfter","selectedIcon","unselectedIcon","disableSelectedIcon","remaining","values","Array","isArray","Set","selectOption","isOptionSelected","option","has","ref"],"mappings":";AAAA,SAKEA,OAAO,QACF,QAAQ;AAEf,SAASC,IAAI,QAAwB,kBAAkB;AAEvD,SAASC,eAAe,QAAQ,uBAAuB;AAuBvD;;;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;IACJ,MAAMU,SAASd,QAAQ;QACrB,IAAIe,MAAMC,OAAO,CAACX,QAAQ;YACxB,OAAO,IAAIY,IAAIZ;QACjB;QAEA,OAAO,IAAIY,IAAI;YAACZ;SAAM;IACxB,GAAG;QAACA;KAAM;IAEV,qBACE,KAACH;QACCG,OAAOL,QACL,IAAO,CAAA;gBACLkB,cAAcZ;gBACda,kBAAiBC,MAAM;oBACrB,OAAON,OAAOO,GAAG,CAACD;gBACpB;gBACAV;gBACAC;gBACAF;gBACAG;YACF,CAAA,GACA;YACEA;YACAF;YACAD;YACAH;YACAK;YACAG;SACD;kBAGH,cAAA,KAACb;YAAM,GAAGY,SAAS;YAAES,KAAKd;sBACvBD;;;AAIT"}

package/dist/form/ListboxProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/ListboxProvider.ts"],"sourcesContent":["\"use client\";\nimport { createContext, useContext } from \"react\";\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"],"names":["createContext","useContext","context","Provider","ListboxProvider","useListboxContext","value","Error"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAclD,MAAMC,UAAUF,cAAqC;AAErD;;;;;CAKC,GACD,OAAO,MAAM,EAAEG,UAAUC,eAAe,EAAE,GAAGF,QAAQ;AAErD;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,QAAQL,WAAWC;IACzB,IAAI,CAACI,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT"}
+{"version":3,"sources":["../../src/form/ListboxProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } 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"],"names":["createContext","useContext","context","Provider","ListboxProvider","useListboxContext","value","Error"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAelD,MAAMC,UAAUF,cAAqC;AAErD;;;;;CAKC,GACD,OAAO,MAAM,EAAEG,UAAUC,eAAe,EAAE,GAAGF,QAAQ;AAErD;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,QAAQL,WAAWC;IACzB,IAAI,CAACI,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT"}

package/dist/form/MenuItemCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemCheckbox.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemCheckboxProps,\n} from \"./MenuItemInputToggle.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type ICON_CONFIG } from \"../icon/iconConfig.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a checkbox and pulling the checkbox icon from the\n * {@link ICON_CONFIG}.\n *\n * @example Simple Example\n * ```tsx\n * import { DropdownMenu, MenuItemCheckbox } from \"@react-md/core\";\n * import { ReactElement, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemCheckbox\n *         checked={checked}\n *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}\n *       >\n *         Checkbox\n *      </MenuItemCheckbox>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @since 2.8.0\n */\nexport const MenuItemCheckbox = forwardRef<\n  HTMLLIElement,\n  MenuItemCheckboxProps\n>(function MenuItemCheckbox(props, ref) {\n  return <MenuItemInputToggle {...props} ref={ref} type=\"checkbox\" />;\n});\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemCheckbox","props","ref","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,mBAAmB,QAEd,2BAA2B;AAIlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,iCAAmBF,WAG9B,SAASE,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GAAG"}
+{"version":3,"sources":["../../src/form/MenuItemCheckbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type ICON_CONFIG } from \"../icon/config.js\";\nimport {\n  type MenuItemCheckboxProps,\n  MenuItemInputToggle,\n} from \"./MenuItemInputToggle.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a checkbox and pulling the checkbox icon from the\n * {@link ICON_CONFIG}.\n *\n * @example Simple Example\n * ```tsx\n * import { DropdownMenu, MenuItemCheckbox } from \"@react-md/core\";\n * import { ReactElement, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemCheckbox\n *         checked={checked}\n *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}\n *       >\n *         Checkbox\n *      </MenuItemCheckbox>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @since 2.8.0\n */\nexport const MenuItemCheckbox = forwardRef<\n  HTMLLIElement,\n  MenuItemCheckboxProps\n>(function MenuItemCheckbox(props, ref) {\n  return <MenuItemInputToggle {...props} ref={ref} type=\"checkbox\" />;\n});\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemCheckbox","props","ref","type"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAInC,SAEEC,mBAAmB,QACd,2BAA2B;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,iCAAmBF,WAG9B,SAASE,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GAAG"}

package/dist/form/MenuItemFileInput.d.ts

@@ -4,7 +4,7 @@ import { type MenuItemProps } from "../menu/MenuItem.js";
  * @since 6.0.0 Removed most of the shared `FileInputProps` from this
  * implementation.
  */
-export interface MenuItemFileInputProps extends Omit<MenuItemProps, "onChange"> {
+export interface MenuItemFileInputProps extends Omit<MenuItemProps, "onChange">, Pick<InputHTMLAttributes<HTMLInputElement>, "accept" | "capture" | "multiple"> {
     /**
      * A change event handler that should do something with the selected files.
      * Usually the `onChange` returned by `useFileUpload` or:
@@ -22,9 +22,6 @@ export interface MenuItemFileInputProps extends Omit<MenuItemProps, "onChange">
      * normal.
      */
     onChange: ChangeEventHandler<HTMLInputElement>;
-    accept?: InputHTMLAttributes<HTMLInputElement>["accept"];
-    capture?: InputHTMLAttributes<HTMLInputElement>["capture"];
-    multiple?: InputHTMLAttributes<HTMLInputElement>["multiple"];
     /**
      * Set this to `true` if the `Menu` should not close when the file input's
      * menu item is clicked.

package/dist/form/MenuItemFileInput.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { MenuItem } from "../menu/MenuItem.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 const noop = ()=>{
@@ -17,7 +17,7 @@ const noop = ()=>{
  * menu item. This allows the menu to be closed immediately when this menu item
  * is clicked.
  */ export const MenuItemFileInput = /*#__PURE__*/ forwardRef(function MenuItemFileInput(props, ref) {
-    const { id: propId, onClick = noop, onChange, accept = "", multiple = false, children, leftAddon: propLeftAddon, preventMenuHideOnClick = false, ...remaining } = props;
+    const { id: propId, onClick = noop, onChange, accept, capture, multiple, children, leftAddon: propLeftAddon, preventMenuHideOnClick = false, ...remaining } = props;
     const id = useEnsuredId(propId, "menu-item");
     const leftAddon = getIcon("upload", propLeftAddon);
     return /*#__PURE__*/ _jsx(MenuItem, {
@@ -30,12 +30,21 @@ const noop = ()=>{
             if (preventMenuHideOnClick) {
                 event.stopPropagation();
             }
-            // create a temporary file input element and click it to trigger the
-            // file upload behavior.
+            // Since the menu closes when the menu item is clicked causing the
+            // elements to be removed from the DOM, a normal `<input type="file" />`
+            // can't be used. Instead, create a temporary file input element and
+            // click it to trigger the file upload behavior.
             let input = document.createElement("input");
             input.type = "file";
-            input.accept = accept;
-            input.multiple = multiple;
+            if (accept) {
+                input.accept = accept;
+            }
+            if (multiple) {
+                input.multiple = multiple;
+            }
+            if (capture) {
+                input.capture = capture === true ? "" : capture;
+            }
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-expect-error
             input.onchange = onChange;

package/dist/form/MenuItemFileInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemFileInput.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type ChangeEventHandler,\n  type InputHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0 Removed most of the shared `FileInputProps` from this\n * implementation.\n */\nexport interface MenuItemFileInputProps\n  extends Omit<MenuItemProps, \"onChange\"> {\n  /**\n   * A change event handler that should do something with the selected files.\n   * Usually the `onChange` returned by `useFileUpload` or:\n   *\n   * ```ts\n   * onChange={(event) => {\n   *   const { files } = event.currentTarget;\n   *   // do something with files\n   * }}\n   * ```\n   *\n   * This is actually a native `Event` and not a `SyntheticEvent` because the\n   * file input is created through `document.createElement` instead of `React`.\n   * You can still access the files through `event.currentTarget.files` like\n   * normal.\n   */\n  onChange: ChangeEventHandler<HTMLInputElement>;\n\n  accept?: InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n  capture?: InputHTMLAttributes<HTMLInputElement>[\"capture\"];\n  multiple?: InputHTMLAttributes<HTMLInputElement>[\"multiple\"];\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the file input's\n   * menu item is clicked.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * A wrapper for the `<input type=\"file\">` element that works within menus.\n *\n * @since 5.0.0\n * @since 6.0.0 No longer creates an invisible file input element within the\n * menu item. This allows the menu to be closed immediately when this menu item\n * is clicked.\n */\nexport const MenuItemFileInput = forwardRef<\n  HTMLLIElement,\n  MenuItemFileInputProps\n>(function MenuItemFileInput(props, ref) {\n  const {\n    id: propId,\n    onClick = noop,\n    onChange,\n    accept = \"\",\n    multiple = false,\n    children,\n    leftAddon: propLeftAddon,\n    preventMenuHideOnClick = false,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"menu-item\");\n  const leftAddon = getIcon(\"upload\", propLeftAddon);\n\n  return (\n    <MenuItem\n      {...remaining}\n      id={id}\n      ref={ref}\n      leftAddon={leftAddon}\n      onClick={(event) => {\n        onClick(event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n\n        // create a temporary file input element and click it to trigger the\n        // file upload behavior.\n        let input: HTMLInputElement | null = document.createElement(\"input\");\n        input.type = \"file\";\n        input.accept = accept;\n        input.multiple = multiple;\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        input.onchange = onChange;\n        input.click();\n        input = null;\n      }}\n    >\n      {children}\n    </MenuItem>\n  );\n});\n"],"names":["forwardRef","getIcon","MenuItem","useEnsuredId","noop","MenuItemFileInput","props","ref","id","propId","onClick","onChange","accept","multiple","children","leftAddon","propLeftAddon","preventMenuHideOnClick","remaining","event","stopPropagation","input","document","createElement","type","onchange","click"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAGL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,QAAQ,QAA4B,sBAAsB;AACnE,SAASC,YAAY,QAAQ,qBAAqB;AAElD,MAAMC,OAAO;AACX,aAAa;AACf;AAuCA;;;;;;;;;CASC,GACD,OAAO,MAAMC,kCAAoBL,WAG/B,SAASK,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,SAAS,EAAE,EACXC,WAAW,KAAK,EAChBC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,yBAAyB,KAAK,EAC9B,GAAGC,WACJ,GAAGZ;IAEJ,MAAME,KAAKL,aAAaM,QAAQ;IAChC,MAAMM,YAAYd,QAAQ,UAAUe;IAEpC,qBACE,KAACd;QACE,GAAGgB,SAAS;QACbV,IAAIA;QACJD,KAAKA;QACLQ,WAAWA;QACXL,SAAS,CAACS;YACRT,QAAQS;YAER,IAAIF,wBAAwB;gBAC1BE,MAAMC,eAAe;YACvB;YAEA,oEAAoE;YACpE,wBAAwB;YACxB,IAAIC,QAAiCC,SAASC,aAAa,CAAC;YAC5DF,MAAMG,IAAI,GAAG;YACbH,MAAMT,MAAM,GAAGA;YACfS,MAAMR,QAAQ,GAAGA;YAEjB,6DAA6D;YAC7D,mBAAmB;YACnBQ,MAAMI,QAAQ,GAAGd;YACjBU,MAAMK,KAAK;YACXL,QAAQ;QACV;kBAECP;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/form/MenuItemFileInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEventHandler,\n  type InputHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0 Removed most of the shared `FileInputProps` from this\n * implementation.\n */\nexport interface MenuItemFileInputProps\n  extends Omit<MenuItemProps, \"onChange\">,\n    Pick<\n      InputHTMLAttributes<HTMLInputElement>,\n      \"accept\" | \"capture\" | \"multiple\"\n    > {\n  /**\n   * A change event handler that should do something with the selected files.\n   * Usually the `onChange` returned by `useFileUpload` or:\n   *\n   * ```ts\n   * onChange={(event) => {\n   *   const { files } = event.currentTarget;\n   *   // do something with files\n   * }}\n   * ```\n   *\n   * This is actually a native `Event` and not a `SyntheticEvent` because the\n   * file input is created through `document.createElement` instead of `React`.\n   * You can still access the files through `event.currentTarget.files` like\n   * normal.\n   */\n  onChange: ChangeEventHandler<HTMLInputElement>;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the file input's\n   * menu item is clicked.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * A wrapper for the `<input type=\"file\">` element that works within menus.\n *\n * @since 5.0.0\n * @since 6.0.0 No longer creates an invisible file input element within the\n * menu item. This allows the menu to be closed immediately when this menu item\n * is clicked.\n */\nexport const MenuItemFileInput = forwardRef<\n  HTMLLIElement,\n  MenuItemFileInputProps\n>(function MenuItemFileInput(props, ref) {\n  const {\n    id: propId,\n    onClick = noop,\n    onChange,\n    accept,\n    capture,\n    multiple,\n    children,\n    leftAddon: propLeftAddon,\n    preventMenuHideOnClick = false,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"menu-item\");\n  const leftAddon = getIcon(\"upload\", propLeftAddon);\n\n  return (\n    <MenuItem\n      {...remaining}\n      id={id}\n      ref={ref}\n      leftAddon={leftAddon}\n      onClick={(event) => {\n        onClick(event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n\n        // Since the menu closes when the menu item is clicked causing the\n        // elements to be removed from the DOM, a normal `<input type=\"file\" />`\n        // can't be used. Instead, create a temporary file input element and\n        // click it to trigger the file upload behavior.\n        let input: HTMLInputElement | null = document.createElement(\"input\");\n        input.type = \"file\";\n        if (accept) {\n          input.accept = accept;\n        }\n        if (multiple) {\n          input.multiple = multiple;\n        }\n        if (capture) {\n          input.capture = capture === true ? \"\" : capture;\n        }\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        input.onchange = onChange;\n        input.click();\n        input = null;\n      }}\n    >\n      {children}\n    </MenuItem>\n  );\n});\n"],"names":["forwardRef","getIcon","MenuItem","useEnsuredId","noop","MenuItemFileInput","props","ref","id","propId","onClick","onChange","accept","capture","multiple","children","leftAddon","propLeftAddon","preventMenuHideOnClick","remaining","event","stopPropagation","input","document","createElement","type","onchange","click"],"mappings":"AAAA;;AAEA,SAGEA,UAAU,QACL,QAAQ;AAEf,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,QAAQ,QAA4B,sBAAsB;AACnE,SAASC,YAAY,QAAQ,qBAAqB;AAElD,MAAMC,OAAO;AACX,aAAa;AACf;AAuCA;;;;;;;;;CASC,GACD,OAAO,MAAMC,kCAAoBL,WAG/B,SAASK,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,yBAAyB,KAAK,EAC9B,GAAGC,WACJ,GAAGb;IAEJ,MAAME,KAAKL,aAAaM,QAAQ;IAChC,MAAMO,YAAYf,QAAQ,UAAUgB;IAEpC,qBACE,KAACf;QACE,GAAGiB,SAAS;QACbX,IAAIA;QACJD,KAAKA;QACLS,WAAWA;QACXN,SAAS,CAACU;YACRV,QAAQU;YAER,IAAIF,wBAAwB;gBAC1BE,MAAMC,eAAe;YACvB;YAEA,kEAAkE;YAClE,wEAAwE;YACxE,oEAAoE;YACpE,gDAAgD;YAChD,IAAIC,QAAiCC,SAASC,aAAa,CAAC;YAC5DF,MAAMG,IAAI,GAAG;YACb,IAAIb,QAAQ;gBACVU,MAAMV,MAAM,GAAGA;YACjB;YACA,IAAIE,UAAU;gBACZQ,MAAMR,QAAQ,GAAGA;YACnB;YACA,IAAID,SAAS;gBACXS,MAAMT,OAAO,GAAGA,YAAY,OAAO,KAAKA;YAC1C;YAEA,6DAA6D;YAC7D,mBAAmB;YACnBS,MAAMI,QAAQ,GAAGf;YACjBW,MAAMK,KAAK;YACXL,QAAQ;QACV;kBAECP;;AAGP,GAAG"}

package/dist/form/MenuItemInputToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemChildrenTextProps,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\nimport {\n  menuItemInputToggle,\n  menuItemInputToggleBall,\n  menuItemInputToggleIcon,\n  menuItemInputToggleTrack,\n} from \"./menuItemInputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps,\n    ListItemChildrenTextProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (type === \"switch\") {\n    icon = (\n      <SwitchTrack\n        style={trackStyle}\n        {...trackProps}\n        className={cnb(\n          menuItemInputToggleTrack(),\n          trackClassName,\n          trackProps?.className\n        )}\n        active={checked}\n        ballProps={ballProps}\n        ballStyle={ballStyle}\n        ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}\n      />\n    );\n  } else {\n    icon = (\n      <InputToggleIcon\n        style={iconStyle}\n        disableEm\n        {...iconProps}\n        className={cnb(\n          menuItemInputToggleIcon(),\n          iconClassName,\n          iconProps?.className\n        )}\n        size={size}\n        type={type}\n        checked={checked}\n        disabled={disabled}\n        icon={propIcon}\n        checkedIcon={checkedIcon}\n        indeterminate={indeterminate}\n        indeterminateIcon={indeterminateIcon}\n      />\n    );\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","InputToggleIcon","SwitchTrack","menuItemInputToggle","menuItemInputToggleBall","menuItemInputToggleIcon","menuItemInputToggleTrack","noop","MenuItemInputToggle","props","ref","id","propId","type","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","className","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemChildrenTextProps,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\nimport {\n  menuItemInputToggle,\n  menuItemInputToggleBall,\n  menuItemInputToggleIcon,\n  menuItemInputToggleTrack,\n} from \"./menuItemInputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps,\n    ListItemChildrenTextProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (type === \"switch\") {\n    icon = (\n      <SwitchTrack\n        style={trackStyle}\n        {...trackProps}\n        className={cnb(\n          menuItemInputToggleTrack(),\n          trackClassName,\n          trackProps?.className\n        )}\n        active={checked}\n        ballProps={ballProps}\n        ballStyle={ballStyle}\n        ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}\n      />\n    );\n  } else {\n    icon = (\n      <InputToggleIcon\n        style={iconStyle}\n        disableEm\n        {...iconProps}\n        className={cnb(\n          menuItemInputToggleIcon(),\n          iconClassName,\n          iconProps?.className\n        )}\n        size={size}\n        type={type}\n        checked={checked}\n        disabled={disabled}\n        icon={propIcon}\n        checkedIcon={checkedIcon}\n        indeterminate={indeterminate}\n        indeterminateIcon={indeterminateIcon}\n      />\n    );\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","InputToggleIcon","SwitchTrack","menuItemInputToggle","menuItemInputToggleBall","menuItemInputToggleIcon","menuItemInputToggleTrack","noop","MenuItemInputToggle","props","ref","id","propId","type","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","className","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"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"}

package/dist/form/MenuItemRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemRadio.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemRadioProps,\n} from \"./MenuItemInputToggle.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type ICON_CONFIG } from \"../icon/iconConfig.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a radio and pulling the radio icon from the\n * {@link ICON_CONFIG}.\n *\n * If a menu or menubar contains more than one group of menuitemradio elements,\n * or if the menu contains one group and other, unrelated menu items, authors\n * SHOULD nest each set of related menuitemradio elements in an element using\n * the group role, and authors SHOULD delimit the group from other menu items\n * with an element using the separator role.\n * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}\n *\n * @example Only Radio Items\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu, MenuItemRadio } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu id=\"dropdown-menu-id\" buttonChildren=\"Button\">\n *       <MenuItemRadio\n *         id=\"radio-1\"\n *         checked={value === \"value1\"}\n *         onCheckedChange={() => setValue(\"value1\")}\n *       >\n *          Radio 1\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-2\"\n *         checked={value === \"value2\"}\n *         onCheckedChange={() => setValue(\"value2\")}\n *       >\n *         Radio 2\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-3\"\n *         checked={value === \"value3\"}\n *         onCheckedChange={() => setValue(\"value3\")}\n *       >\n *         Radio 3\n *       </MenuItemRadio>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @example With Other Items\n * ```tsx\n * import {\n *   DropdownMenu,\n *   MenuItemGroup,\n *   MenuItemRadio,\n *   MenuItemSwitch,\n *   MenuItemSeparator,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={nextChecked => setChecked(nextChecked)}\n *       >\n *         Light mode\n *       </MenuItemSwitch>\n *       <MenuItemSeparator />\n *       <MenuItemGroup aria-label=\"My Group Label\">\n *         <MenuItemRadio\n *           checked={value === \"value1\"}\n *           onCheckedChange={() => setValue(\"value1\")}\n *         >\n *           Radio 1\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value2\"}\n *           onCheckedChange={() => setValue(\"value2\")}\n *         >\n *           Radio 2\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value3\"}\n *           onCheckedChange={() => setValue(\"value3\")}\n *         >\n *           Radio 3\n *         </MenuItemRadio>\n *       </MenuItemGroup>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @since 2.8.0\n */\nexport const MenuItemRadio = forwardRef<HTMLLIElement, MenuItemRadioProps>(\n  function MenuItemRadio(props, ref) {\n    return <MenuItemInputToggle {...props} ref={ref} type=\"radio\" />;\n  }\n);\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemRadio","props","ref","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,mBAAmB,QAEd,2BAA2B;AAIlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GACA"}
+{"version":3,"sources":["../../src/form/MenuItemRadio.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type ICON_CONFIG } from \"../icon/config.js\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemRadioProps,\n} from \"./MenuItemInputToggle.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a radio and pulling the radio icon from the\n * {@link ICON_CONFIG}.\n *\n * If a menu or menubar contains more than one group of menuitemradio elements,\n * or if the menu contains one group and other, unrelated menu items, authors\n * SHOULD nest each set of related menuitemradio elements in an element using\n * the group role, and authors SHOULD delimit the group from other menu items\n * with an element using the separator role.\n * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}\n *\n * @example Only Radio Items\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu, MenuItemRadio } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu id=\"dropdown-menu-id\" buttonChildren=\"Button\">\n *       <MenuItemRadio\n *         id=\"radio-1\"\n *         checked={value === \"value1\"}\n *         onCheckedChange={() => setValue(\"value1\")}\n *       >\n *          Radio 1\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-2\"\n *         checked={value === \"value2\"}\n *         onCheckedChange={() => setValue(\"value2\")}\n *       >\n *         Radio 2\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-3\"\n *         checked={value === \"value3\"}\n *         onCheckedChange={() => setValue(\"value3\")}\n *       >\n *         Radio 3\n *       </MenuItemRadio>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @example With Other Items\n * ```tsx\n * import {\n *   DropdownMenu,\n *   MenuItemGroup,\n *   MenuItemRadio,\n *   MenuItemSwitch,\n *   MenuItemSeparator,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={nextChecked => setChecked(nextChecked)}\n *       >\n *         Light mode\n *       </MenuItemSwitch>\n *       <MenuItemSeparator />\n *       <MenuItemGroup aria-label=\"My Group Label\">\n *         <MenuItemRadio\n *           checked={value === \"value1\"}\n *           onCheckedChange={() => setValue(\"value1\")}\n *         >\n *           Radio 1\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value2\"}\n *           onCheckedChange={() => setValue(\"value2\")}\n *         >\n *           Radio 2\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value3\"}\n *           onCheckedChange={() => setValue(\"value3\")}\n *         >\n *           Radio 3\n *         </MenuItemRadio>\n *       </MenuItemGroup>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @since 2.8.0\n */\nexport const MenuItemRadio = forwardRef<HTMLLIElement, MenuItemRadioProps>(\n  function MenuItemRadio(props, ref) {\n    return <MenuItemInputToggle {...props} ref={ref} type=\"radio\" />;\n  }\n);\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemRadio","props","ref","type"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAInC,SACEC,mBAAmB,QAEd,2BAA2B;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GACA"}

package/dist/form/MenuItemSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemSwitch.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemSwitchProps,\n} from \"./MenuItemInputToggle.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a switch.\n *\n * @example Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu, MenuItemSwitch } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}\n *       >\n *         Switch\n *      </MenuItemSwitch>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @since 2.8.0\n */\nexport const MenuItemSwitch = forwardRef<HTMLLIElement, MenuItemSwitchProps>(\n  function MenuItemSwitch(props, ref) {\n    return <MenuItemInputToggle {...props} ref={ref} type=\"switch\" />;\n  }\n);\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemSwitch","props","ref","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,mBAAmB,QAEd,2BAA2B;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GACA"}
+{"version":3,"sources":["../../src/form/MenuItemSwitch.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport {\n  MenuItemInputToggle,\n  type MenuItemSwitchProps,\n} from \"./MenuItemInputToggle.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a switch.\n *\n * @example Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu, MenuItemSwitch } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}\n *       >\n *         Switch\n *      </MenuItemSwitch>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @since 2.8.0\n */\nexport const MenuItemSwitch = forwardRef<HTMLLIElement, MenuItemSwitchProps>(\n  function MenuItemSwitch(props, ref) {\n    return <MenuItemInputToggle {...props} ref={ref} type=\"switch\" />;\n  }\n);\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemSwitch","props","ref","type"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,mBAAmB,QAEd,2BAA2B;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GACA"}

package/dist/form/MenuItemTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @since 5.0.0\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /** @defaultValue `true` */\n  stretch?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,SAAS,QAA6B,iBAAiB;AAehE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC7C,qBACE,KAACK;QACCC,MAAK;QACJ,GAAGJ,OAAO;QACXK,SAAS,CAACC;YACRN,SAASK,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWd,IAAI,+BAA+BM,SAASQ;kBAEvD,cAAA,KAACZ;YACE,GAAGM,SAAS;YACbH,KAAKA;YACLE,WAAW,CAACK;gBACVL,YAAYK;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}
+{"version":3,"sources":["../../src/form/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @since 5.0.0\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /** @defaultValue `true` */\n  stretch?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAGxD,SAASC,SAAS,QAA6B,iBAAiB;AAehE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC7C,qBACE,KAACK;QACCC,MAAK;QACJ,GAAGJ,OAAO;QACXK,SAAS,CAACC;YACRN,SAASK,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWd,IAAI,+BAA+BM,SAASQ;kBAEvD,cAAA,KAACZ;YACE,GAAGM,SAAS;YACbH,KAAKA;YACLE,WAAW,CAACK;gBACVL,YAAYK;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}

package/dist/form/NativeSelect.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";
 import { Label } from "./Label.js";

package/dist/form/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type SelectHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.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>, 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 */\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        {...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,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,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;QACE,GAAGwC,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 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>, 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 */\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        {...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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,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;QACE,GAAGwC,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/OptGroup.js.map

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

package/dist/form/Option.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef, Fragment } from "react";
-import { getIcon } from "../icon/iconConfig.js";
-import { icon } from "../icon/styles.js";
+import { Fragment, forwardRef } from "react";
 import { TextIconSpacing } from "../icon/TextIconSpacing.js";
-import { getListItemHeight } from "../list/getListItemHeight.js";
+import { getIcon } from "../icon/config.js";
+import { icon } from "../icon/styles.js";
 import { ListItemText } from "../list/ListItemText.js";
+import { getListItemHeight } from "../list/getListItemHeight.js";
 import { MenuItem } from "../menu/MenuItem.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useListboxContext } from "./ListboxProvider.js";

package/dist/form/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Option.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, Fragment, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { icon } from \"../icon/styles.js\";\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport { getListItemHeight } from \"../list/getListItemHeight.js\";\nimport { ListItemText } from \"../list/ListItemText.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useListboxContext } from \"./ListboxProvider.js\";\nimport { option } from \"./optionStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This icon is used while the option is unselected so that the selected and\n * unselected options have the same alignment.\n *\n * @since 6.0.0\n * @defaultValue `<span className=\"rmd-icon rmd-icon--svg />`\n */\nexport const DEFAULT_OPTION_UNSELECTED_ICON = (\n  <span className={icon({ type: \"svg\" })} />\n);\n\n/**\n * @since 6.0.0\n */\nexport interface OptionSelectedIconProps {\n  /**\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * @see {@link DEFAULT_OPTION_UNSELECTED_ICON}\n   * @defaultValue `<span className=\"rmd-icon rmd-icon--svg\" />`\n   */\n  unselectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` of the {@link selectedIcon}/{@link unselectedIcon}\n   * should appear as the {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to remove selected icon behavior from the `Option`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n}\n\n/**\n * @since 6.0.0 removed the `selected` and `focused` props.\n * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport interface OptionProps extends MenuItemProps, OptionSelectedIconProps {\n  /**\n   * @defaultValue `\"option\"`\n   */\n  role?: string;\n  value: string | number | Record<string, unknown>;\n\n  /**\n   * An optional className to apply only while the current option is selected to\n   * override any global default selected styles. It is recommended to update\n   * the `react-md.$form-option-selected-styles` map first to change selected\n   * style globally and then any one-off customizations through this prop.\n   *\n   * @example Global Change\n   * ```scss\n   * @use \"@react-md/core\" with (\n   *   // these are the defaults\n   *   $form-option-selected-styles: (\n   *     --rmd-icon-color: currentcolor,\n   *     background-color: colors.$blue-900,\n   *     color: colors.$white,\n   *   ),\n   *\n   *   // so if you wanted to remove the styles globally\n   *   $form-option-selected-styles: (),\n   * );\n   * ```\n   *\n   * This really results in something like:\n   * ```ts\n   * className=\"rmd-list-item ... rmd-menu-item ... rmd-option rmd-option--selected ${selectedClassName}\"\n   * ```\n   */\n  selectedClassName?: string;\n\n  /**\n   * Since the `selectedIcon`/`unselectedIcon` are rendered as\n   * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be\n   * wrapped in the {@link TextIconSpacing} component to maintain the correct\n   * spacing. You can use this prop to provide any additional configuration to\n   * the spacing.\n   *\n   * @example\n   * ```tsx\n   * <Option\n   *   leftAddon={<Avatar>A</Avatar>}\n   *   leftAddonType=\"avatar\"\n   *   value={0}\n   *   textIconSpacingProps={{\n   *     beforeClassName: \"my-custom-class-name\",\n   *   }}\n   * >\n   *   Some Content\n   * </Option>\n   * ```\n   */\n  textIconSpacingProps?: Omit<TextIconSpacingProps, \"icon\" | \"children\">;\n}\n\n/**\n * **Client Component**\n *\n * This component is a wrapper around the {@link MenuItem} to implement custom\n * select option behavior.\n *\n * @since 6.0.0 removed the `selected` and `focused` props.\n * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.\n */\nexport const Option = forwardRef<HTMLLIElement, OptionProps>(\n  function Option(props, ref) {\n    const {\n      id: propId,\n      role = \"option\",\n      value,\n      children: propChildren,\n      onClick = noop,\n      className,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      unselectedIcon: propUnselectedIcon,\n      selectedIconAfter: propSelectedIconAfter,\n      disableSelectedIcon: propDisableSelectedIcon,\n      textIconSpacingProps,\n      leftAddon: propLeftAddon,\n      leftAddonType,\n      leftAddonClassName,\n      rightAddon: propRightAddon,\n      rightAddonType,\n      rightAddonClassName,\n      secondaryText,\n      height: propHeight,\n      disableTextChildren: propDisableTextChildren,\n      ...remaining\n    } = props;\n\n    const id = useEnsuredId(propId, \"option\");\n    const {\n      selectOption,\n      isOptionSelected,\n      disableSelectedIcon: contextDisableSelectedIcon,\n      selectedIcon: contextSelectedIcon,\n      unselectedIcon: contextUnselectedIcon,\n      selectedIconAfter: contextSelectedIconAfter,\n    } = useListboxContext();\n    const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;\n    const disableSelectedIcon =\n      propDisableSelectedIcon ?? contextDisableSelectedIcon;\n    const selected = isOptionSelected(value);\n    const selectedIcon = getIcon(\n      \"selected\",\n      disableSelectedIcon ? null : (propSelectedIcon ?? contextSelectedIcon)\n    );\n    const unselectedIcon = disableSelectedIcon\n      ? null\n      : (propUnselectedIcon ??\n        contextUnselectedIcon ??\n        DEFAULT_OPTION_UNSELECTED_ICON);\n    const icon = selected ? selectedIcon : unselectedIcon;\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    let children = propChildren;\n    let disableTextChildren = propDisableTextChildren;\n    if (!selectedIconAfter && icon) {\n      leftAddon = icon;\n      if (propLeftAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propLeftAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    } else if (icon) {\n      rightAddon = icon;\n      if (propRightAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propRightAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    }\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon: leftAddon === icon ? null : leftAddon,\n      leftAddonType,\n      rightAddon: rightAddon === icon ? null : rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <MenuItem\n        {...remaining}\n        aria-selected={selected || undefined}\n        id={id}\n        ref={ref}\n        role={role}\n        onClick={(event) => {\n          onClick(event);\n          selectOption(value);\n        }}\n        className={option({\n          icon: !!icon,\n          selected,\n          selectedClassName,\n          className,\n        })}\n        secondaryText={secondaryText}\n        height={height}\n        leftAddon={leftAddon}\n        leftAddonType={leftAddonType}\n        leftAddonClassName={cnb(\n          leftAddon === icon && \"rmd-option__icon\",\n          leftAddonClassName\n        )}\n        rightAddon={rightAddon}\n        rightAddonType={rightAddonType}\n        rightAddonClassName={cnb(\n          rightAddon === icon && \"rmd-option__icon\",\n          rightAddonClassName\n        )}\n        disableTextChildren={disableTextChildren}\n      >\n        {children}\n      </MenuItem>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Fragment","getIcon","icon","TextIconSpacing","getListItemHeight","ListItemText","MenuItem","useEnsuredId","useListboxContext","option","noop","DEFAULT_OPTION_UNSELECTED_ICON","span","className","type","Option","props","ref","id","propId","role","value","children","propChildren","onClick","selectedClassName","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","propSelectedIconAfter","disableSelectedIcon","propDisableSelectedIcon","textIconSpacingProps","leftAddon","propLeftAddon","leftAddonType","leftAddonClassName","rightAddon","propRightAddon","rightAddonType","rightAddonClassName","secondaryText","height","propHeight","disableTextChildren","propDisableTextChildren","remaining","selectOption","isOptionSelected","contextDisableSelectedIcon","contextSelectedIcon","contextUnselectedIcon","contextSelectedIconAfter","selected","Wrapper","aria-selected","undefined","event"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/Option.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Fragment, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { icon } from \"../icon/styles.js\";\nimport { ListItemText } from \"../list/ListItemText.js\";\nimport { getListItemHeight } from \"../list/getListItemHeight.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useListboxContext } from \"./ListboxProvider.js\";\nimport { option } from \"./optionStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This icon is used while the option is unselected so that the selected and\n * unselected options have the same alignment.\n *\n * @since 6.0.0\n * @defaultValue `<span className=\"rmd-icon rmd-icon--svg />`\n */\nexport const DEFAULT_OPTION_UNSELECTED_ICON = (\n  <span className={icon({ type: \"svg\" })} />\n);\n\n/**\n * @since 6.0.0\n */\nexport interface OptionSelectedIconProps {\n  /**\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * @see {@link DEFAULT_OPTION_UNSELECTED_ICON}\n   * @defaultValue `<span className=\"rmd-icon rmd-icon--svg\" />`\n   */\n  unselectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` of the {@link selectedIcon}/{@link unselectedIcon}\n   * should appear as the {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to remove selected icon behavior from the `Option`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n}\n\n/**\n * @since 6.0.0 removed the `selected` and `focused` props.\n * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport interface OptionProps extends MenuItemProps, OptionSelectedIconProps {\n  /**\n   * @defaultValue `\"option\"`\n   */\n  role?: string;\n  value: string | number | Record<string, unknown>;\n\n  /**\n   * An optional className to apply only while the current option is selected to\n   * override any global default selected styles. It is recommended to update\n   * the `react-md.$form-option-selected-styles` map first to change selected\n   * style globally and then any one-off customizations through this prop.\n   *\n   * @example Global Change\n   * ```scss\n   * @use \"@react-md/core\" with (\n   *   // these are the defaults\n   *   $form-option-selected-styles: (\n   *     --rmd-icon-color: currentcolor,\n   *     background-color: colors.$blue-900,\n   *     color: colors.$white,\n   *   ),\n   *\n   *   // so if you wanted to remove the styles globally\n   *   $form-option-selected-styles: (),\n   * );\n   * ```\n   *\n   * This really results in something like:\n   * ```ts\n   * className=\"rmd-list-item ... rmd-menu-item ... rmd-option rmd-option--selected ${selectedClassName}\"\n   * ```\n   */\n  selectedClassName?: string;\n\n  /**\n   * Since the `selectedIcon`/`unselectedIcon` are rendered as\n   * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be\n   * wrapped in the {@link TextIconSpacing} component to maintain the correct\n   * spacing. You can use this prop to provide any additional configuration to\n   * the spacing.\n   *\n   * @example\n   * ```tsx\n   * <Option\n   *   leftAddon={<Avatar>A</Avatar>}\n   *   leftAddonType=\"avatar\"\n   *   value={0}\n   *   textIconSpacingProps={{\n   *     beforeClassName: \"my-custom-class-name\",\n   *   }}\n   * >\n   *   Some Content\n   * </Option>\n   * ```\n   */\n  textIconSpacingProps?: Omit<TextIconSpacingProps, \"icon\" | \"children\">;\n}\n\n/**\n * **Client Component**\n *\n * This component is a wrapper around the {@link MenuItem} to implement custom\n * select option behavior.\n *\n * @since 6.0.0 removed the `selected` and `focused` props.\n * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.\n */\nexport const Option = forwardRef<HTMLLIElement, OptionProps>(\n  function Option(props, ref) {\n    const {\n      id: propId,\n      role = \"option\",\n      value,\n      children: propChildren,\n      onClick = noop,\n      className,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      unselectedIcon: propUnselectedIcon,\n      selectedIconAfter: propSelectedIconAfter,\n      disableSelectedIcon: propDisableSelectedIcon,\n      textIconSpacingProps,\n      leftAddon: propLeftAddon,\n      leftAddonType,\n      leftAddonClassName,\n      rightAddon: propRightAddon,\n      rightAddonType,\n      rightAddonClassName,\n      secondaryText,\n      height: propHeight,\n      disableTextChildren: propDisableTextChildren,\n      ...remaining\n    } = props;\n\n    const id = useEnsuredId(propId, \"option\");\n    const {\n      selectOption,\n      isOptionSelected,\n      disableSelectedIcon: contextDisableSelectedIcon,\n      selectedIcon: contextSelectedIcon,\n      unselectedIcon: contextUnselectedIcon,\n      selectedIconAfter: contextSelectedIconAfter,\n    } = useListboxContext();\n    const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;\n    const disableSelectedIcon =\n      propDisableSelectedIcon ?? contextDisableSelectedIcon;\n    const selected = isOptionSelected(value);\n    const selectedIcon = getIcon(\n      \"selected\",\n      disableSelectedIcon ? null : (propSelectedIcon ?? contextSelectedIcon)\n    );\n    const unselectedIcon = disableSelectedIcon\n      ? null\n      : (propUnselectedIcon ??\n        contextUnselectedIcon ??\n        DEFAULT_OPTION_UNSELECTED_ICON);\n    const icon = selected ? selectedIcon : unselectedIcon;\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    let children = propChildren;\n    let disableTextChildren = propDisableTextChildren;\n    if (!selectedIconAfter && icon) {\n      leftAddon = icon;\n      if (propLeftAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propLeftAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    } else if (icon) {\n      rightAddon = icon;\n      if (propRightAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propRightAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    }\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon: leftAddon === icon ? null : leftAddon,\n      leftAddonType,\n      rightAddon: rightAddon === icon ? null : rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <MenuItem\n        {...remaining}\n        aria-selected={selected || undefined}\n        id={id}\n        ref={ref}\n        role={role}\n        onClick={(event) => {\n          onClick(event);\n          selectOption(value);\n        }}\n        className={option({\n          icon: !!icon,\n          selected,\n          selectedClassName,\n          className,\n        })}\n        secondaryText={secondaryText}\n        height={height}\n        leftAddon={leftAddon}\n        leftAddonType={leftAddonType}\n        leftAddonClassName={cnb(\n          leftAddon === icon && \"rmd-option__icon\",\n          leftAddonClassName\n        )}\n        rightAddon={rightAddon}\n        rightAddonType={rightAddonType}\n        rightAddonClassName={cnb(\n          rightAddon === icon && \"rmd-option__icon\",\n          rightAddonClassName\n        )}\n        disableTextChildren={disableTextChildren}\n      >\n        {children}\n      </MenuItem>\n    );\n  }\n);\n"],"names":["cnb","Fragment","forwardRef","TextIconSpacing","getIcon","icon","ListItemText","getListItemHeight","MenuItem","useEnsuredId","useListboxContext","option","noop","DEFAULT_OPTION_UNSELECTED_ICON","span","className","type","Option","props","ref","id","propId","role","value","children","propChildren","onClick","selectedClassName","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","propSelectedIconAfter","disableSelectedIcon","propDisableSelectedIcon","textIconSpacingProps","leftAddon","propLeftAddon","leftAddonType","leftAddonClassName","rightAddon","propRightAddon","rightAddonType","rightAddonClassName","secondaryText","height","propHeight","disableTextChildren","propDisableTextChildren","remaining","selectOption","isOptionSelected","contextDisableSelectedIcon","contextSelectedIcon","contextUnselectedIcon","contextSelectedIconAfter","selected","Wrapper","aria-selected","undefined","event"],"mappings":"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"}

package/dist/form/Password.js

@@ -2,11 +2,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button } from "../button/Button.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useToggle } from "../useToggle.js";
-import { password, passwordInput, passwordInputToggle } from "./passwordStyles.js";
 import { TextField } from "./TextField.js";
+import { password, passwordInput, passwordInputToggle } from "./passwordStyles.js";
 /**
  * **Client Component**
  *