@react-md/core 6.3.0 → 6.3.2

package/dist/form/_text-area.scss

@@ -82,7 +82,8 @@ $variables: (height, padding);
 @mixin textarea-container-styles($disable-layer: false) {
   @include utils.optional-layer(text-area, $disable-layer) {
     .rmd-textarea-container {
-      @include text-field.set-var(addon-top, $addon-top);
+      @include text-field.set-var(addon-top, 0);
+      @include text-field.set-var(addon-margin-top, $addon-top);
 
       height: auto;
       max-width: 100%;

package/dist/form/_text-field.scss

@@ -665,6 +665,7 @@ $variables: (
       {
         @include use-var(margin-top, addon-margin-top);
       }
+      @include use-var(top, addon-top);
 
       // this makes it so that this container element is the same size as the
       // child (normally icons). without this, icons would have a height of 30.5px

package/dist/form/types.d.ts

@@ -4,6 +4,26 @@ declare module "react" {
     interface CSSProperties {
         "--rmd-form-active-color"?: string;
         "--rmd-form-focus-color"?: string;
+        "--rmd-label-floating-x"?: string | number;
+        "--rmd-label-floating-y"?: string | number;
+        "--rmd-label-floating-active-x"?: string | number;
+        "--rmd-label-floating-active-y"?: string | number;
+        "--rmd-label-active-padding"?: string | number;
+        "--rmd-label-active-background-color"?: string;
+        "--rmd-text-field-addon-top"?: string | number;
+        "--rmd-text-field-addon-spacing"?: string | number;
+        "--rmd-text-field-addon-margin-top"?: string | number;
+        "--rmd-text-field-addon-left-offset"?: string | number;
+        "--rmd-text-field-height"?: string | number;
+        "--rmd-text-field-padding-left"?: string | number;
+        "--rmd-text-field-padding-right"?: string | number;
+        "--rmd-text-field-padding-top"?: string | number;
+        "--rmd-text-field-border-color"?: string;
+        "--rmd-text-field-hover-border-color"?: string;
+        "--rmd-text-field-filled-color"?: string;
+        "--rmd-text-field-filled-padding"?: string | number;
+        "--rmd-text-field-outlined-padding"?: string | number;
+        "--rmd-text-field-underlined-padding"?: string | number;
     }
 }
 /**

package/dist/form/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteAttributeValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutocompleteAttributeValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteAttributeValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * Optional props to provide to inline counter.\n   *\n   * @since 6.3.0\n   */\n  counterProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * Optional props to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   *\n   * @since 6.3.0\n   */\n  messageProps?: PropsWithRef<HTMLAttributes<HTMLParagraphElement>>;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n}\n\n/** @since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`\n */\nexport interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   * Set this to `true` if the addon should not be wrapped in a `<span>` with some\n   * additional styles.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0 Renamed the `leftChildren` / `rightChildren` props to\n * `leftAddon` / `rightAddon`. Renamed `isLeftAddon` / `isRightAddon` to\n * `disableLeftAddonStyles` / `disableRightAddonStyles`. Added\n * `leftAddonProps` / `rightAddonProps`. Removed `stretch`\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAsiBA,WAmDC"}
+{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n\n    // NOTE: The label properties are in this file since all label types are\n    // in this file. If they are able to be moved to labelStyles or Label and\n    // the compiled `.d.ts` includes the types from those files, this can be\n    // moved.\n    \"--rmd-label-floating-x\"?: string | number;\n    \"--rmd-label-floating-y\"?: string | number;\n    \"--rmd-label-floating-active-x\"?: string | number;\n    \"--rmd-label-floating-active-y\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n\n    // NOTE: The text field properties are in this file since there are no\n    // typedefs included from `TextFieldContainer` or\n    // `textFieldContainerStyles`.\n    \"--rmd-text-field-addon-top\"?: string | number;\n    \"--rmd-text-field-addon-spacing\"?: string | number;\n    \"--rmd-text-field-addon-margin-top\"?: string | number;\n    \"--rmd-text-field-addon-left-offset\"?: string | number;\n    \"--rmd-text-field-height\"?: string | number;\n    \"--rmd-text-field-padding-left\"?: string | number;\n    \"--rmd-text-field-padding-right\"?: string | number;\n    \"--rmd-text-field-padding-top\"?: string | number;\n    \"--rmd-text-field-border-color\"?: string;\n    \"--rmd-text-field-hover-border-color\"?: string;\n    \"--rmd-text-field-filled-color\"?: string;\n    \"--rmd-text-field-filled-padding\"?: string | number;\n    \"--rmd-text-field-outlined-padding\"?: string | number;\n    \"--rmd-text-field-underlined-padding\"?: string | number;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteAttributeValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutocompleteAttributeValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteAttributeValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * Optional props to provide to inline counter.\n   *\n   * @since 6.3.0\n   */\n  counterProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * Optional props to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   *\n   * @since 6.3.0\n   */\n  messageProps?: PropsWithRef<HTMLAttributes<HTMLParagraphElement>>;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n}\n\n/** @since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`\n */\nexport interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   * Set this to `true` if the addon should not be wrapped in a `<span>` with some\n   * additional styles.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0 Renamed the `leftChildren` / `rightChildren` props to\n * `leftAddon` / `rightAddon`. Renamed `isLeftAddon` / `isRightAddon` to\n * `disableLeftAddonStyles` / `disableRightAddonStyles`. Added\n * `leftAddonProps` / `rightAddonProps`. Removed `stretch`\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAmkBA,WAmDC"}

package/dist/hoverMode/useHoverModeProvider.d.ts

@@ -93,7 +93,15 @@ export interface HoverModeContext extends SimpleHoverModeContext {
  */
 export interface CreateHoverModeContextOptions {
     /**
-     * TODO: I think this has something to do with how I implemented the MenuBar.
+     * This should only be used if creating nested hover mode behavior where the
+     * hover mode should default to being enabled if a parent element is hovered.
+     * So set this to an element's `id` if a parent element is being hovered when
+     * the component **mounts**.
+     *
+     * The use case for this is the `MenuBar` component since after clicking a
+     * menu button or hovering it long enough to enable the hover mode, all child
+     * menus should also be in the hover mode until the top-most element is
+     * closed.
      *
      * @defaultValue `""`
      */

package/dist/hoverMode/useHoverModeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hoverMode/useHoverModeProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { type NonNullMutableRef, type NonNullRef } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface SimpleHoverModeContext {\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseEnter(event) {\n   *   const hoverTimeout = hoverTimeoutRef.current;\n   *   if (typeof hoverTimeout !== \"number\" || mode === \"touch\") {\n   *     return;\n   *   }\n   *\n   *   const { id } = event.currentTarget;\n   *   clearDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     enableHoverMode(id);\n   *     setVisible(true);\n   *   }, hoverTimeout);\n   * }\n   * ```\n   */\n  hoverTimeoutRef: NonNullRef<number | undefined>;\n\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseLeave() {\n   *   if (mode === \"touch\") {\n   *     return\n   *   }\n   *\n   *   startDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     setVisible(false)\n   *   }, leaveTimeoutRef.current);\n   * }\n   * ```\n   */\n  leaveTimeoutRef: NonNullRef<number>;\n\n  /**\n   * When this is called, the {@link hoverTimeoutRef} will be set to `0` and the\n   * {@link HoverModeContext.activeId} will be set to this `activeId` value.\n   *\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  enableHoverMode: (activeId: string) => void;\n\n  /**\n   * Disables all hover mode behavior by clearing all timeouts and resetting\n   * internal state.\n   */\n  disableHoverMode: () => void;\n\n  /**\n   * @see {@link leaveTimeoutRef} for an example.\n   */\n  startDisableTimer: () => void;\n\n  /**\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  clearDisableTimer: () => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Uses refs to increase performance by preventing unneeded\n * re-renders of the entire hover mode provider's component tree. The API also\n * changed to support custom hover mode providers.\n */\nexport interface HoverModeContext extends SimpleHoverModeContext {\n  /**\n   * This will only be updated if {@link HoverModeConfiguration.forceRerender} is `true`\n   */\n  activeId: string;\n\n  /**\n   * This ref contains the current DOM `id` for the element that is being\n   * hovered within the `HoverModeProvider`. This will be an empty string\n   * when the hover mode is not active.\n   */\n  activeIdRef: NonNullMutableRef<string>;\n\n  /**\n   * This ref can be used to disable transitions for a group of components using\n   * the same hover mode provider. The general flow would be:\n   *\n   * - set `disableTransition: animatedOnceRef.current` on hover mode components\n   * - set `animatedOnceRef.current = true` when the `onEntered` transition callback fires\n   * - set `animatedOnceRef.current = false` when the hover mode behavior is\n   *   disabled. This would normally be after a timeout for the `onExited`\n   *   callback\n   */\n  animatedOnceRef: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CreateHoverModeContextOptions {\n  /**\n   * TODO: I think this has something to do with how I implemented the MenuBar.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultActiveId?: string;\n\n  /**\n   * When this is `undefined`, the hover mode behavior will be disabled.\n   * Otherwise, this will be the amount of time to wait on a `mouseenter` event\n   * before setting the visibility to `true`.\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait after a `mouseleave` event before setting the\n   * visibility to `false`.\n   *\n   * @defaultValue `0`\n   * @since 6.0.0 This was renamed from `exitVisibilityDelay` and the\n   * default value changed from `300` to `0`.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport function createHoverModeContext(\n  options: CreateHoverModeContextOptions = {}\n): Readonly<HoverModeContext> {\n  const { defaultActiveId = \"\", hoverTimeout, leaveTimeout = 0 } = options;\n\n  return {\n    activeId: defaultActiveId,\n    activeIdRef: { current: defaultActiveId },\n    hoverTimeoutRef: { current: hoverTimeout },\n    leaveTimeoutRef: { current: leaveTimeout },\n    animatedOnceRef: { current: false },\n    enableHoverMode: noop,\n    disableHoverMode: noop,\n    startDisableTimer: noop,\n    clearDisableTimer: noop,\n  };\n}\n\n/** @since 6.0.0 */\nexport interface HoverModeConfiguration extends CreateHoverModeContextOptions {\n  /**\n   * The amount of time to wait before disabling the hover mode behavior if none\n   * of the components are being hovered.\n   *\n   * If this is `undefined`, {@link HoverModeContext.startDisableTimer} will do\n   * nothing. You must manually call {@link HoverModeContext.disableHoverMode}\n   * to disable the hover mode instead.\n   */\n  disableTimeout?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  forceRerender?: boolean;\n}\n\n/**\n * @example Creating a Hover Mode Group\n * ```tsx\n * import {\n *   type HoverModeContext,\n *   createHoverModeContext,\n *   useHoverModeProvider,\n * } from \"@react-md/core/hoverMode/useHoverModeProvider\";\n * import {\n *   type ReactElement,\n *   type ReactNode,\n *   createContext,\n *   useContext,\n * } from \"react\";\n *\n * export interface CustomHoverContext extends HoverModeContext {\n *   // any additional fields in the context\n * }\n *\n * const context = createContext<CustomHoverContext>(\n *   createHoverModeContext()\n *   // you can also provide default values if needed when the context provider\n *   // isn't a parent component. the following are the defaults\n *   // createHoverModeContext({\n *   //    hoverTimeout: undefined,\n *   //    leaveTimeout: 0,\n *   //    defaultActiveId: \"\",\n *   // })\n * );\n * const { Provider } = context;\n *\n * interface Props extends HoverModeConfiguration {\n *   children: ReactNode;\n * }\n *\n * export function CustomHoverModeProvider({\n *   children,\n *   // change to whatever defaults you want\n *   hoverTimeout = 3000,\n *   leaveTimeout = 3000,\n *   defaultActiveId = \"\",\n *   disableTimeout = 5000,\n * }: Props): ReactElement {\n *   const context = useHoverModeProvider({\n *     hoverTimeout,\n *     leaveTimeout,\n *     defaultActiveId,\n *     disableTimeout,\n *   });\n *\n *   return <Provider value={context}>{children}</Provider>;\n * }\n * ```\n *\n * @see {@link CreateHoverModeContextOptions}\n * @see {@link useHoverMode}\n * @since 6.0.0 The `HoverModeProvider` component was replaced by this\n * hook implementation. After developing the `MenuBar`, I realized the hover\n * mode should normally be grouped by related components or types instead of a\n * top-level catch all.\n */\nexport function useHoverModeProvider(\n  options: HoverModeConfiguration\n): Readonly<HoverModeContext> {\n  const {\n    hoverTimeout,\n    leaveTimeout = 0,\n    forceRerender = false,\n    defaultActiveId = \"\",\n    disableTimeout,\n  } = options;\n\n  const [activeId, setActiveId] = useState(defaultActiveId);\n  const activeIdRef = useRef(defaultActiveId);\n  const hoverTimeoutRef = useRef(hoverTimeout);\n  const leaveTimeoutRef = useRef(leaveTimeout);\n  const animatedOnceRef = useRef(!!defaultActiveId);\n  const disableHoverModeTimeout = useRef<number | undefined>();\n  const clearDisableTimer = useCallback(() => {\n    window.clearTimeout(disableHoverModeTimeout.current);\n  }, []);\n  const enableHoverMode = useCallback(\n    (activeId: string) => {\n      clearDisableTimer();\n      activeIdRef.current = activeId;\n      hoverTimeoutRef.current = 0;\n\n      if (forceRerender) {\n        setActiveId(activeId);\n      }\n    },\n    [clearDisableTimer, forceRerender]\n  );\n  const disableHoverMode = useCallback(() => {\n    clearDisableTimer();\n    activeIdRef.current = \"\";\n    hoverTimeoutRef.current = hoverTimeout;\n    animatedOnceRef.current = false;\n    if (forceRerender) {\n      setActiveId(\"\");\n    }\n  }, [clearDisableTimer, forceRerender, hoverTimeout]);\n  const startDisableTimer = useCallback(() => {\n    if (typeof disableTimeout !== \"number\") {\n      return;\n    }\n\n    clearDisableTimer();\n    disableHoverModeTimeout.current = window.setTimeout(() => {\n      disableHoverMode();\n    }, disableTimeout);\n  }, [clearDisableTimer, disableHoverMode, disableTimeout]);\n\n  useEffect(() => {\n    hoverTimeoutRef.current = hoverTimeout;\n    return () => {\n      window.clearTimeout(disableHoverModeTimeout.current);\n    };\n  }, [hoverTimeout]);\n\n  return useMemo<HoverModeContext>(\n    () => ({\n      activeId,\n      activeIdRef,\n      hoverTimeoutRef,\n      leaveTimeoutRef,\n      animatedOnceRef,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    }),\n    [\n      activeId,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    ]\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useRef","useState","noop","createHoverModeContext","options","defaultActiveId","hoverTimeout","leaveTimeout","activeId","activeIdRef","current","hoverTimeoutRef","leaveTimeoutRef","animatedOnceRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","useHoverModeProvider","forceRerender","disableTimeout","setActiveId","disableHoverModeTimeout","window","clearTimeout","setTimeout"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAI1E,MAAMC,OAAO;AACX,aAAa;AACf;AAmIA;;CAEC,GACD,OAAO,SAASC,uBACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,kBAAkB,EAAE,EAAEC,YAAY,EAAEC,eAAe,CAAC,EAAE,GAAGH;IAEjE,OAAO;QACLI,UAAUH;QACVI,aAAa;YAAEC,SAASL;QAAgB;QACxCM,iBAAiB;YAAED,SAASJ;QAAa;QACzCM,iBAAiB;YAAEF,SAASH;QAAa;QACzCM,iBAAiB;YAAEH,SAAS;QAAM;QAClCI,iBAAiBZ;QACjBa,kBAAkBb;QAClBc,mBAAmBd;QACnBe,mBAAmBf;IACrB;AACF;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,SAASgB,qBACdd,OAA+B;IAE/B,MAAM,EACJE,YAAY,EACZC,eAAe,CAAC,EAChBY,gBAAgB,KAAK,EACrBd,kBAAkB,EAAE,EACpBe,cAAc,EACf,GAAGhB;IAEJ,MAAM,CAACI,UAAUa,YAAY,GAAGpB,SAASI;IACzC,MAAMI,cAAcT,OAAOK;IAC3B,MAAMM,kBAAkBX,OAAOM;IAC/B,MAAMM,kBAAkBZ,OAAOO;IAC/B,MAAMM,kBAAkBb,OAAO,CAAC,CAACK;IACjC,MAAMiB,0BAA0BtB;IAChC,MAAMiB,oBAAoBpB,YAAY;QACpC0B,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;IACrD,GAAG,EAAE;IACL,MAAMI,kBAAkBjB,YACtB,CAACW;QACCS;QACAR,YAAYC,OAAO,GAAGF;QACtBG,gBAAgBD,OAAO,GAAG;QAE1B,IAAIS,eAAe;YACjBE,YAAYb;QACd;IACF,GACA;QAACS;QAAmBE;KAAc;IAEpC,MAAMJ,mBAAmBlB,YAAY;QACnCoB;QACAR,YAAYC,OAAO,GAAG;QACtBC,gBAAgBD,OAAO,GAAGJ;QAC1BO,gBAAgBH,OAAO,GAAG;QAC1B,IAAIS,eAAe;YACjBE,YAAY;QACd;IACF,GAAG;QAACJ;QAAmBE;QAAeb;KAAa;IACnD,MAAMU,oBAAoBnB,YAAY;QACpC,IAAI,OAAOuB,mBAAmB,UAAU;YACtC;QACF;QAEAH;QACAK,wBAAwBZ,OAAO,GAAGa,OAAOE,UAAU,CAAC;YAClDV;QACF,GAAGK;IACL,GAAG;QAACH;QAAmBF;QAAkBK;KAAe;IAExDtB,UAAU;QACRa,gBAAgBD,OAAO,GAAGJ;QAC1B,OAAO;YACLiB,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;QACrD;IACF,GAAG;QAACJ;KAAa;IAEjB,OAAOP,QACL,IAAO,CAAA;YACLS;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAM;QACAC;QACAC;QACAC;KACD;AAEL"}
+{"version":3,"sources":["../../src/hoverMode/useHoverModeProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { type NonNullMutableRef, type NonNullRef } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface SimpleHoverModeContext {\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseEnter(event) {\n   *   const hoverTimeout = hoverTimeoutRef.current;\n   *   if (typeof hoverTimeout !== \"number\" || mode === \"touch\") {\n   *     return;\n   *   }\n   *\n   *   const { id } = event.currentTarget;\n   *   clearDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     enableHoverMode(id);\n   *     setVisible(true);\n   *   }, hoverTimeout);\n   * }\n   * ```\n   */\n  hoverTimeoutRef: NonNullRef<number | undefined>;\n\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseLeave() {\n   *   if (mode === \"touch\") {\n   *     return\n   *   }\n   *\n   *   startDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     setVisible(false)\n   *   }, leaveTimeoutRef.current);\n   * }\n   * ```\n   */\n  leaveTimeoutRef: NonNullRef<number>;\n\n  /**\n   * When this is called, the {@link hoverTimeoutRef} will be set to `0` and the\n   * {@link HoverModeContext.activeId} will be set to this `activeId` value.\n   *\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  enableHoverMode: (activeId: string) => void;\n\n  /**\n   * Disables all hover mode behavior by clearing all timeouts and resetting\n   * internal state.\n   */\n  disableHoverMode: () => void;\n\n  /**\n   * @see {@link leaveTimeoutRef} for an example.\n   */\n  startDisableTimer: () => void;\n\n  /**\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  clearDisableTimer: () => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Uses refs to increase performance by preventing unneeded\n * re-renders of the entire hover mode provider's component tree. The API also\n * changed to support custom hover mode providers.\n */\nexport interface HoverModeContext extends SimpleHoverModeContext {\n  /**\n   * This will only be updated if {@link HoverModeConfiguration.forceRerender} is `true`\n   */\n  activeId: string;\n\n  /**\n   * This ref contains the current DOM `id` for the element that is being\n   * hovered within the `HoverModeProvider`. This will be an empty string\n   * when the hover mode is not active.\n   */\n  activeIdRef: NonNullMutableRef<string>;\n\n  /**\n   * This ref can be used to disable transitions for a group of components using\n   * the same hover mode provider. The general flow would be:\n   *\n   * - set `disableTransition: animatedOnceRef.current` on hover mode components\n   * - set `animatedOnceRef.current = true` when the `onEntered` transition callback fires\n   * - set `animatedOnceRef.current = false` when the hover mode behavior is\n   *   disabled. This would normally be after a timeout for the `onExited`\n   *   callback\n   */\n  animatedOnceRef: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CreateHoverModeContextOptions {\n  /**\n   * This should only be used if creating nested hover mode behavior where the\n   * hover mode should default to being enabled if a parent element is hovered.\n   * So set this to an element's `id` if a parent element is being hovered when\n   * the component **mounts**.\n   *\n   * The use case for this is the `MenuBar` component since after clicking a\n   * menu button or hovering it long enough to enable the hover mode, all child\n   * menus should also be in the hover mode until the top-most element is\n   * closed.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultActiveId?: string;\n\n  /**\n   * When this is `undefined`, the hover mode behavior will be disabled.\n   * Otherwise, this will be the amount of time to wait on a `mouseenter` event\n   * before setting the visibility to `true`.\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait after a `mouseleave` event before setting the\n   * visibility to `false`.\n   *\n   * @defaultValue `0`\n   * @since 6.0.0 This was renamed from `exitVisibilityDelay` and the\n   * default value changed from `300` to `0`.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport function createHoverModeContext(\n  options: CreateHoverModeContextOptions = {}\n): Readonly<HoverModeContext> {\n  const { defaultActiveId = \"\", hoverTimeout, leaveTimeout = 0 } = options;\n\n  return {\n    activeId: defaultActiveId,\n    activeIdRef: { current: defaultActiveId },\n    hoverTimeoutRef: { current: hoverTimeout },\n    leaveTimeoutRef: { current: leaveTimeout },\n    animatedOnceRef: { current: false },\n    enableHoverMode: noop,\n    disableHoverMode: noop,\n    startDisableTimer: noop,\n    clearDisableTimer: noop,\n  };\n}\n\n/** @since 6.0.0 */\nexport interface HoverModeConfiguration extends CreateHoverModeContextOptions {\n  /**\n   * The amount of time to wait before disabling the hover mode behavior if none\n   * of the components are being hovered.\n   *\n   * If this is `undefined`, {@link HoverModeContext.startDisableTimer} will do\n   * nothing. You must manually call {@link HoverModeContext.disableHoverMode}\n   * to disable the hover mode instead.\n   */\n  disableTimeout?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  forceRerender?: boolean;\n}\n\n/**\n * @example Creating a Hover Mode Group\n * ```tsx\n * import {\n *   type HoverModeContext,\n *   createHoverModeContext,\n *   useHoverModeProvider,\n * } from \"@react-md/core/hoverMode/useHoverModeProvider\";\n * import {\n *   type ReactElement,\n *   type ReactNode,\n *   createContext,\n *   useContext,\n * } from \"react\";\n *\n * export interface CustomHoverContext extends HoverModeContext {\n *   // any additional fields in the context\n * }\n *\n * const context = createContext<CustomHoverContext>(\n *   createHoverModeContext()\n *   // you can also provide default values if needed when the context provider\n *   // isn't a parent component. the following are the defaults\n *   // createHoverModeContext({\n *   //    hoverTimeout: undefined,\n *   //    leaveTimeout: 0,\n *   //    defaultActiveId: \"\",\n *   // })\n * );\n * const { Provider } = context;\n *\n * interface Props extends HoverModeConfiguration {\n *   children: ReactNode;\n * }\n *\n * export function CustomHoverModeProvider({\n *   children,\n *   // change to whatever defaults you want\n *   hoverTimeout = 3000,\n *   leaveTimeout = 3000,\n *   defaultActiveId = \"\",\n *   disableTimeout = 5000,\n * }: Props): ReactElement {\n *   const context = useHoverModeProvider({\n *     hoverTimeout,\n *     leaveTimeout,\n *     defaultActiveId,\n *     disableTimeout,\n *   });\n *\n *   return <Provider value={context}>{children}</Provider>;\n * }\n * ```\n *\n * @see {@link CreateHoverModeContextOptions}\n * @see {@link useHoverMode}\n * @since 6.0.0 The `HoverModeProvider` component was replaced by this\n * hook implementation. After developing the `MenuBar`, I realized the hover\n * mode should normally be grouped by related components or types instead of a\n * top-level catch all.\n */\nexport function useHoverModeProvider(\n  options: HoverModeConfiguration\n): Readonly<HoverModeContext> {\n  const {\n    hoverTimeout,\n    leaveTimeout = 0,\n    forceRerender = false,\n    defaultActiveId = \"\",\n    disableTimeout,\n  } = options;\n\n  const [activeId, setActiveId] = useState(defaultActiveId);\n  const activeIdRef = useRef(defaultActiveId);\n  const hoverTimeoutRef = useRef(hoverTimeout);\n  const leaveTimeoutRef = useRef(leaveTimeout);\n  const animatedOnceRef = useRef(!!defaultActiveId);\n  const disableHoverModeTimeout = useRef<number | undefined>();\n  const clearDisableTimer = useCallback(() => {\n    window.clearTimeout(disableHoverModeTimeout.current);\n  }, []);\n  const enableHoverMode = useCallback(\n    (activeId: string) => {\n      clearDisableTimer();\n      activeIdRef.current = activeId;\n      hoverTimeoutRef.current = 0;\n\n      if (forceRerender) {\n        setActiveId(activeId);\n      }\n    },\n    [clearDisableTimer, forceRerender]\n  );\n  const disableHoverMode = useCallback(() => {\n    clearDisableTimer();\n    activeIdRef.current = \"\";\n    hoverTimeoutRef.current = hoverTimeout;\n    animatedOnceRef.current = false;\n    if (forceRerender) {\n      setActiveId(\"\");\n    }\n  }, [clearDisableTimer, forceRerender, hoverTimeout]);\n  const startDisableTimer = useCallback(() => {\n    if (typeof disableTimeout !== \"number\") {\n      return;\n    }\n\n    clearDisableTimer();\n    disableHoverModeTimeout.current = window.setTimeout(() => {\n      disableHoverMode();\n    }, disableTimeout);\n  }, [clearDisableTimer, disableHoverMode, disableTimeout]);\n\n  useEffect(() => {\n    hoverTimeoutRef.current = hoverTimeout;\n    return () => {\n      window.clearTimeout(disableHoverModeTimeout.current);\n    };\n  }, [hoverTimeout]);\n\n  return useMemo<HoverModeContext>(\n    () => ({\n      activeId,\n      activeIdRef,\n      hoverTimeoutRef,\n      leaveTimeoutRef,\n      animatedOnceRef,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    }),\n    [\n      activeId,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    ]\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useRef","useState","noop","createHoverModeContext","options","defaultActiveId","hoverTimeout","leaveTimeout","activeId","activeIdRef","current","hoverTimeoutRef","leaveTimeoutRef","animatedOnceRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","useHoverModeProvider","forceRerender","disableTimeout","setActiveId","disableHoverModeTimeout","window","clearTimeout","setTimeout"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAI1E,MAAMC,OAAO;AACX,aAAa;AACf;AA2IA;;CAEC,GACD,OAAO,SAASC,uBACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,kBAAkB,EAAE,EAAEC,YAAY,EAAEC,eAAe,CAAC,EAAE,GAAGH;IAEjE,OAAO;QACLI,UAAUH;QACVI,aAAa;YAAEC,SAASL;QAAgB;QACxCM,iBAAiB;YAAED,SAASJ;QAAa;QACzCM,iBAAiB;YAAEF,SAASH;QAAa;QACzCM,iBAAiB;YAAEH,SAAS;QAAM;QAClCI,iBAAiBZ;QACjBa,kBAAkBb;QAClBc,mBAAmBd;QACnBe,mBAAmBf;IACrB;AACF;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,SAASgB,qBACdd,OAA+B;IAE/B,MAAM,EACJE,YAAY,EACZC,eAAe,CAAC,EAChBY,gBAAgB,KAAK,EACrBd,kBAAkB,EAAE,EACpBe,cAAc,EACf,GAAGhB;IAEJ,MAAM,CAACI,UAAUa,YAAY,GAAGpB,SAASI;IACzC,MAAMI,cAAcT,OAAOK;IAC3B,MAAMM,kBAAkBX,OAAOM;IAC/B,MAAMM,kBAAkBZ,OAAOO;IAC/B,MAAMM,kBAAkBb,OAAO,CAAC,CAACK;IACjC,MAAMiB,0BAA0BtB;IAChC,MAAMiB,oBAAoBpB,YAAY;QACpC0B,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;IACrD,GAAG,EAAE;IACL,MAAMI,kBAAkBjB,YACtB,CAACW;QACCS;QACAR,YAAYC,OAAO,GAAGF;QACtBG,gBAAgBD,OAAO,GAAG;QAE1B,IAAIS,eAAe;YACjBE,YAAYb;QACd;IACF,GACA;QAACS;QAAmBE;KAAc;IAEpC,MAAMJ,mBAAmBlB,YAAY;QACnCoB;QACAR,YAAYC,OAAO,GAAG;QACtBC,gBAAgBD,OAAO,GAAGJ;QAC1BO,gBAAgBH,OAAO,GAAG;QAC1B,IAAIS,eAAe;YACjBE,YAAY;QACd;IACF,GAAG;QAACJ;QAAmBE;QAAeb;KAAa;IACnD,MAAMU,oBAAoBnB,YAAY;QACpC,IAAI,OAAOuB,mBAAmB,UAAU;YACtC;QACF;QAEAH;QACAK,wBAAwBZ,OAAO,GAAGa,OAAOE,UAAU,CAAC;YAClDV;QACF,GAAGK;IACL,GAAG;QAACH;QAAmBF;QAAkBK;KAAe;IAExDtB,UAAU;QACRa,gBAAgBD,OAAO,GAAGJ;QAC1B,OAAO;YACLiB,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;QACrD;IACF,GAAG;QAACJ;KAAa;IAEjB,OAAOP,QACL,IAAO,CAAA;YACLS;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAM;QACAC;QACAC;QACAC;KACD;AAEL"}

package/dist/interaction/types.d.ts

@@ -1,7 +1,6 @@
 import type { DragEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, TouchEventHandler } from "react";
 declare module "react" {
     interface CSSProperties {
-        "--rmd-ripple-background-color"?: string;
         "--rmd-interaction-background-color"?: string;
         "--rmd-hover-background-color"?: string;
         "--rmd-focus-background-color"?: string;
@@ -9,6 +8,11 @@ declare module "react" {
         "--rmd-selected-background-color"?: string;
         "--rmd-focus-color"?: string;
         "--rmd-focus-width"?: string | number;
+        "--rmd-ripple-inset"?: string | number;
+        "--rmd-ripple-border-radius"?: string | number;
+        "--rmd-ripple-background-color"?: string;
+        "--rmd-surface-inset"?: string | number;
+        "--rmd-surface-border-radius"?: string | number;
     }
 }
 /**

package/dist/interaction/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/types.ts"],"sourcesContent":["import type {\n  DragEventHandler,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  TouchEventHandler,\n} from \"react\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-ripple-background-color\"?: string;\n    \"--rmd-interaction-background-color\"?: string;\n    \"--rmd-hover-background-color\"?: string;\n    \"--rmd-focus-background-color\"?: string;\n    \"--rmd-press-background-color\"?: string;\n    \"--rmd-selected-background-color\"?: string;\n    \"--rmd-focus-color\"?: string;\n    \"--rmd-focus-width\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComponentWithRippleProps {\n  /**\n   * Set this to `true` to disable the ripple behavior for this single component\n   * only. If all components should have the ripple disabled:\n   *\n   * ```ts\n   * INTERACTION_CONFIG.mode = \"none\";\n   * // or\n   * INTERACTION_CONFIG.mode = \"press\";\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disableRipple?: boolean;\n}\n\n/**\n * This is used to provide feedback to the user that they are interacting with\n * elements on the page. It is recommended to not set this to `\"none\"` unless\n * you will implement your own version.\n *\n * When this is set to `\"press\"`, the `background-color` for the element will\n * become slightly darker while the user:\n * - is holding the mouse down on the element\n * - holding the enter or space key on the element\n * - holding their finger on the element for touch devices\n *\n * The `background-color` will transition in and out based on the pressed state.\n *\n * When this is set to `\"ripple\"`, a water droplet type of animation will appear\n * from the current coordinates of the mouse or touch event within the element.\n * Keyboard events will just trigger the animation from the center of the\n * element. Once the user stops pressing the element, the animation will start\n * to fade out.\n *\n * Note: this should match the `$interaction-mode` SCSS variable.\n *\n * @defaultValue `\"ripple\"`\n * @since 6.0.0\n */\nexport type ElementInteractionMode = \"ripple\" | \"press\" | \"none\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionHandlers<E extends HTMLElement> {\n  onBlur: FocusEventHandler<E>;\n\n  /**\n   * The click event handler is is only used to display a ripple for\n   * `<button type=\"submit\" />` since pressing enter on form elements should\n   * submit the form. This ripple is really just to help show that the form has\n   * been submitted.\n   */\n  onClick: MouseEventHandler<E>;\n\n  /**\n   * The keydown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation when the `enter` or `space`\n   * keys are pressed. It will also trigger a click event for elements that do\n   * not support this natively (`<button>`, `<a>`).\n   *\n   * When the space key is pressed, `event.preventDefault()` will also be called\n   * to prevent the page from scrolling.\n   */\n  onKeyDown: KeyboardEventHandler<E>;\n\n  /**\n   * The keyup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the keydown event.\n   */\n  onKeyUp: KeyboardEventHandler<E>;\n\n  /**\n   * The mousedown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onMouseDown: MouseEventHandler<E>;\n\n  /**\n   * The mouseup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the mousedown event.\n   */\n  onMouseUp: MouseEventHandler<E>;\n\n  /**\n   * The mouseleave event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"mouse\"`.\n   *\n   * The ripples have to be cancelled since the user might release the mouse\n   * outside of the element which would never trigger the `onMouseUp` flow.\n   */\n  onMouseLeave: MouseEventHandler<E>;\n\n  /**\n   * The dragstart event handler will remove the ripples and prevent any other\n   * interactions.\n   */\n  onDragStart: DragEventHandler<E>;\n\n  /**\n   * The touchstart event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onTouchStart: TouchEventHandler<E>;\n\n  /**\n   * The touchend event handler is used to either deactivate the `pressed`\n   * state for the element or start the exit animation for the ripple if the\n   * ripple was activated by the touchstart event.\n   */\n  onTouchEnd: TouchEventHandler<E>;\n\n  /**\n   * The touchmove event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"touch\"`.\n   */\n  onTouchMove: TouchEventHandler<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleStyle {\n  readonly left: number;\n  readonly top: number;\n  readonly height: number;\n  readonly width: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleState {\n  readonly style: RippleStyle;\n  readonly exiting: boolean;\n  readonly entered: boolean;\n  readonly startTime: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RippleStateList = readonly RippleState[];\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleTransitionCallbacks {\n  onEntered: (ripple: RippleState) => void;\n  onExited: (ripple: RippleState) => void;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ProvidedRippleContainerProps\n  extends RippleTransitionCallbacks {\n  ripples: RippleStateList;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ElementInteractionState {\n  pressed: boolean;\n  ripples: RippleStateList;\n}\n"],"names":[],"mappings":"AA8LA;;;CAGC,GACD,WAGC"}
+{"version":3,"sources":["../../src/interaction/types.ts"],"sourcesContent":["import type {\n  DragEventHandler,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  TouchEventHandler,\n} from \"react\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-interaction-background-color\"?: string;\n    \"--rmd-hover-background-color\"?: string;\n    \"--rmd-focus-background-color\"?: string;\n    \"--rmd-press-background-color\"?: string;\n    \"--rmd-selected-background-color\"?: string;\n    \"--rmd-focus-color\"?: string;\n    \"--rmd-focus-width\"?: string | number;\n    \"--rmd-ripple-inset\"?: string | number;\n    \"--rmd-ripple-border-radius\"?: string | number;\n    \"--rmd-ripple-background-color\"?: string;\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComponentWithRippleProps {\n  /**\n   * Set this to `true` to disable the ripple behavior for this single component\n   * only. If all components should have the ripple disabled:\n   *\n   * ```ts\n   * INTERACTION_CONFIG.mode = \"none\";\n   * // or\n   * INTERACTION_CONFIG.mode = \"press\";\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disableRipple?: boolean;\n}\n\n/**\n * This is used to provide feedback to the user that they are interacting with\n * elements on the page. It is recommended to not set this to `\"none\"` unless\n * you will implement your own version.\n *\n * When this is set to `\"press\"`, the `background-color` for the element will\n * become slightly darker while the user:\n * - is holding the mouse down on the element\n * - holding the enter or space key on the element\n * - holding their finger on the element for touch devices\n *\n * The `background-color` will transition in and out based on the pressed state.\n *\n * When this is set to `\"ripple\"`, a water droplet type of animation will appear\n * from the current coordinates of the mouse or touch event within the element.\n * Keyboard events will just trigger the animation from the center of the\n * element. Once the user stops pressing the element, the animation will start\n * to fade out.\n *\n * Note: this should match the `$interaction-mode` SCSS variable.\n *\n * @defaultValue `\"ripple\"`\n * @since 6.0.0\n */\nexport type ElementInteractionMode = \"ripple\" | \"press\" | \"none\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionHandlers<E extends HTMLElement> {\n  onBlur: FocusEventHandler<E>;\n\n  /**\n   * The click event handler is is only used to display a ripple for\n   * `<button type=\"submit\" />` since pressing enter on form elements should\n   * submit the form. This ripple is really just to help show that the form has\n   * been submitted.\n   */\n  onClick: MouseEventHandler<E>;\n\n  /**\n   * The keydown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation when the `enter` or `space`\n   * keys are pressed. It will also trigger a click event for elements that do\n   * not support this natively (`<button>`, `<a>`).\n   *\n   * When the space key is pressed, `event.preventDefault()` will also be called\n   * to prevent the page from scrolling.\n   */\n  onKeyDown: KeyboardEventHandler<E>;\n\n  /**\n   * The keyup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the keydown event.\n   */\n  onKeyUp: KeyboardEventHandler<E>;\n\n  /**\n   * The mousedown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onMouseDown: MouseEventHandler<E>;\n\n  /**\n   * The mouseup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the mousedown event.\n   */\n  onMouseUp: MouseEventHandler<E>;\n\n  /**\n   * The mouseleave event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"mouse\"`.\n   *\n   * The ripples have to be cancelled since the user might release the mouse\n   * outside of the element which would never trigger the `onMouseUp` flow.\n   */\n  onMouseLeave: MouseEventHandler<E>;\n\n  /**\n   * The dragstart event handler will remove the ripples and prevent any other\n   * interactions.\n   */\n  onDragStart: DragEventHandler<E>;\n\n  /**\n   * The touchstart event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onTouchStart: TouchEventHandler<E>;\n\n  /**\n   * The touchend event handler is used to either deactivate the `pressed`\n   * state for the element or start the exit animation for the ripple if the\n   * ripple was activated by the touchstart event.\n   */\n  onTouchEnd: TouchEventHandler<E>;\n\n  /**\n   * The touchmove event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"touch\"`.\n   */\n  onTouchMove: TouchEventHandler<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleStyle {\n  readonly left: number;\n  readonly top: number;\n  readonly height: number;\n  readonly width: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleState {\n  readonly style: RippleStyle;\n  readonly exiting: boolean;\n  readonly entered: boolean;\n  readonly startTime: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RippleStateList = readonly RippleState[];\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleTransitionCallbacks {\n  onEntered: (ripple: RippleState) => void;\n  onExited: (ripple: RippleState) => void;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ProvidedRippleContainerProps\n  extends RippleTransitionCallbacks {\n  ripples: RippleStateList;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ElementInteractionState {\n  pressed: boolean;\n  ripples: RippleStateList;\n}\n"],"names":[],"mappings":"AAkMA;;;CAGC,GACD,WAGC"}

package/dist/link/Link.d.ts

@@ -1,12 +1,5 @@
 import { type AnchorHTMLAttributes, type ForwardRefExoticComponent } from "react";
 import { type LinkClassNameOptions } from "./styles.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-link-color"?: string;
-        "--rmd-link-visited-color"?: string;
-        "--rmd-link-hover-color"?: string;
-    }
-}
 /**
  * @since 6.0.0
  */

package/dist/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/link/Link.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  forwardRef,\n} from \"react\";\n\nimport { type LinkClassNameOptions, link } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-link-color\"?: string;\n    \"--rmd-link-visited-color\"?: string;\n    \"--rmd-link-hover-color\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport type CustomLinkComponent =\n  | ForwardRefExoticComponent<{ href: string }>\n  | ForwardRefExoticComponent<{ to: string }>\n  | \"a\";\n\n/**\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport interface LinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    LinkClassNameOptions {\n  /**\n   * All links **must** have a valid href.\n   */\n  href: string;\n\n  /**\n   * Set this to `true` if your link contains icons that should be centered and\n   * spaced with additional text. This is not used by default so that links can\n   * correctly line wrap while rendered within paragraphs of text.\n   *\n   * @defaultValue `false`\n   */\n  flex?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Link } from \"@react-md/core/link/Link\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Element(): ReactElement {\n *   return (\n *     <Typography>\n *       Here is a paragraph of text with a {\" \"}\n *       <Link href=\"/some-url\">link to some content</Link>.\n *     </Typography>\n *   );\n * }\n * ```\n *\n *\n * @see {@link https://react-md.dev/components/link | Link Demos}\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  function Link(props, ref) {\n    const { className, flex, children, ...remaining } = props;\n\n    return (\n      <a {...remaining} ref={ref} className={link({ flex, className })}>\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["forwardRef","link","Link","props","ref","className","flex","children","remaining","a"],"mappings":";AAAA,SAGEA,UAAU,QACL,QAAQ;AAEf,SAAoCC,IAAI,QAAQ,cAAc;AA4C9D;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEpD,qBACE,KAACM;QAAG,GAAGD,SAAS;QAAEJ,KAAKA;QAAKC,WAAWJ,KAAK;YAAEK;YAAMD;QAAU;kBAC3DE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/link/Link.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  forwardRef,\n} from \"react\";\n\nimport { type LinkClassNameOptions, link } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomLinkComponent =\n  | ForwardRefExoticComponent<{ href: string }>\n  | ForwardRefExoticComponent<{ to: string }>\n  | \"a\";\n\n/**\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport interface LinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    LinkClassNameOptions {\n  /**\n   * All links **must** have a valid href.\n   */\n  href: string;\n\n  /**\n   * Set this to `true` if your link contains icons that should be centered and\n   * spaced with additional text. This is not used by default so that links can\n   * correctly line wrap while rendered within paragraphs of text.\n   *\n   * @defaultValue `false`\n   */\n  flex?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Link } from \"@react-md/core/link/Link\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Element(): ReactElement {\n *   return (\n *     <Typography>\n *       Here is a paragraph of text with a {\" \"}\n *       <Link href=\"/some-url\">link to some content</Link>.\n *     </Typography>\n *   );\n * }\n * ```\n *\n *\n * @see {@link https://react-md.dev/components/link | Link Demos}\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  function Link(props, ref) {\n    const { className, flex, children, ...remaining } = props;\n\n    return (\n      <a {...remaining} ref={ref} className={link({ flex, className })}>\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["forwardRef","link","Link","props","ref","className","flex","children","remaining","a"],"mappings":";AAAA,SAGEA,UAAU,QACL,QAAQ;AAEf,SAAoCC,IAAI,QAAQ,cAAc;AAoC9D;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEpD,qBACE,KAACM;QAAG,GAAGD,SAAS;QAAEJ,KAAKA;QAAKC,WAAWJ,KAAK;YAAEK;YAAMD;QAAU;kBAC3DE;;AAGP,GACA"}

package/dist/link/styles.d.ts

@@ -1,3 +1,10 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-link-color"?: string;
+        "--rmd-link-visited-color"?: string;
+        "--rmd-link-hover-color"?: string;
+    }
+}
 /** @since 6.0.0 */
 export interface LinkClassNameOptions {
     className?: string;

package/dist/link/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/link/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-link\");\n\n/** @since 6.0.0 */\nexport interface LinkClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  flex?: boolean;\n}\n\n/**\n * This really doesn't do much at this time since it only merges `rmd-link` with\n * the optional className. This was mostly added just for convention purposes.\n *\n * @since 6.0.0\n */\nexport function link(options: LinkClassNameOptions = {}): string {\n  const { flex, className } = options;\n\n  return cnb(styles({ flex }), className);\n}\n\n/** @since 6.0.0 */\nexport interface SkipToMainContentClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  unstyled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function skipToMainContent(\n  options: SkipToMainContentClassNameOptions = {}\n): string {\n  const { unstyled = false, className } = options;\n\n  return cnb(\n    styles({\n      skip: true,\n      \"skip-styled\": !unstyled,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","link","options","flex","className","skipToMainContent","unstyled","skip"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAUnB;;;;;CAKC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGF;IAE5B,OAAOJ,IAAIE,OAAO;QAAEG;IAAK,IAAIC;AAC/B;AAYA;;CAEC,GACD,OAAO,SAASC,kBACdH,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEI,WAAW,KAAK,EAAEF,SAAS,EAAE,GAAGF;IAExC,OAAOJ,IACLE,OAAO;QACLO,MAAM;QACN,eAAe,CAACD;IAClB,IACAF;AAEJ"}
+{"version":3,"sources":["../../src/link/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-link\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-link-color\"?: string;\n    \"--rmd-link-visited-color\"?: string;\n    \"--rmd-link-hover-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface LinkClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  flex?: boolean;\n}\n\n/**\n * This really doesn't do much at this time since it only merges `rmd-link` with\n * the optional className. This was mostly added just for convention purposes.\n *\n * @since 6.0.0\n */\nexport function link(options: LinkClassNameOptions = {}): string {\n  const { flex, className } = options;\n\n  return cnb(styles({ flex }), className);\n}\n\n/** @since 6.0.0 */\nexport interface SkipToMainContentClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  unstyled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function skipToMainContent(\n  options: SkipToMainContentClassNameOptions = {}\n): string {\n  const { unstyled = false, className } = options;\n\n  return cnb(\n    styles({\n      skip: true,\n      \"skip-styled\": !unstyled,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","link","options","flex","className","skipToMainContent","unstyled","skip"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkBnB;;;;;CAKC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGF;IAE5B,OAAOJ,IAAIE,OAAO;QAAEG;IAAK,IAAIC;AAC/B;AAYA;;CAEC,GACD,OAAO,SAASC,kBACdH,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEI,WAAW,KAAK,EAAEF,SAAS,EAAE,GAAGF;IAExC,OAAOJ,IACLE,OAAO;QACLO,MAAM;QACN,eAAe,CAACD;IAClB,IACAF;AAEJ"}

package/dist/list/List.d.ts

@@ -1,23 +1,14 @@
 import { type HTMLAttributes } from "react";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-list-padding-h"?: string | number;
-        "--rmd-list-padding-v"?: string | number;
-    }
-}
+import { type ListClassNameOptions } from "./listStyles.js";
 export type ListElement = HTMLUListElement | HTMLOListElement;
-export interface ListProps extends HTMLAttributes<ListElement> {
+/**
+ * @since 6.3.1 Extends the ListClassNameOptions
+ */
+export interface ListProps extends HTMLAttributes<ListElement>, ListClassNameOptions {
     /**
      * @defaultValue `"none"`
      */
     role?: HTMLAttributes<ListElement>["role"];
-    /**
-     * Set to `true` to decrease the amount of padding and font size within the
-     * list.
-     *
-     * @defaultValue `false`
-     */
-    dense?: boolean;
     /**
      * Set this to `true` to render as `<ol>` instead of `<ul>` when the children
      * are in a specific order. For example: steps within a recipe.
@@ -25,12 +16,6 @@ export interface ListProps extends HTMLAttributes<ListElement> {
      * @defaultValue `false`
      */
     ordered?: boolean;
-    /**
-     * Set this to `true` to render horizontally instead of vertically.
-     *
-     * @defaultValue `false`
-     */
-    horizontal?: boolean;
 }
 /**
  * The `List` component is used to render a collection of clickable actions

package/dist/list/List.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/List.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { list } from \"./listStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-list-padding-h\"?: string | number;\n    \"--rmd-list-padding-v\"?: string | number;\n  }\n}\n\nexport type ListElement = HTMLUListElement | HTMLOListElement;\n\nexport interface ListProps extends HTMLAttributes<ListElement> {\n  /**\n   * @defaultValue `\"none\"`\n   */\n  role?: HTMLAttributes<ListElement>[\"role\"];\n\n  /**\n   * Set to `true` to decrease the amount of padding and font size within the\n   * list.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to render as `<ol>` instead of `<ul>` when the children\n   * are in a specific order. For example: steps within a recipe.\n   *\n   * @defaultValue `false`\n   */\n  ordered?: boolean;\n\n  /**\n   * Set this to `true` to render horizontally instead of vertically.\n   *\n   * @defaultValue `false`\n   */\n  horizontal?: boolean;\n}\n\n/**\n * The `List` component is used to render a collection of clickable actions\n * vertically or horizontally and does not include the default `ol`/`ul` styles.\n *\n * @example Simple Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import { ListItemLink } from \"@react-md/core/list/ListItemLink\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 3\n *       </ListItem>\n *       <ListItemLink href=\"/some-route\">Link Example</ListItemLink>\n *     </List>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/list | List Demos}\n */\nexport const List = forwardRef<ListElement, ListProps>(\n  function List(props, ref) {\n    const {\n      className,\n      children,\n      role = \"none\",\n      dense = false,\n      ordered = false,\n      horizontal = false,\n      ...remaining\n    } = props;\n    const Component = (ordered ? \"ol\" : \"ul\") as \"ul\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        role={role}\n        className={list({\n          dense,\n          horizontal,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","list","List","props","ref","className","children","role","dense","ordered","horizontal","remaining","Component"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,IAAI,QAAQ,kBAAkB;AAyCvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,MAAM,EACbC,QAAQ,KAAK,EACbC,UAAU,KAAK,EACfC,aAAa,KAAK,EAClB,GAAGC,WACJ,GAAGR;IACJ,MAAMS,YAAaH,UAAU,OAAO;IACpC,qBACE,KAACG;QACE,GAAGD,SAAS;QACbP,KAAKA;QACLG,MAAMA;QACNF,WAAWJ,KAAK;YACdO;YACAE;YACAL;QACF;kBAECC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/list/List.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type ListClassNameOptions, list } from \"./listStyles.js\";\n\nexport type ListElement = HTMLUListElement | HTMLOListElement;\n\n/**\n * @since 6.3.1 Extends the ListClassNameOptions\n */\nexport interface ListProps\n  extends HTMLAttributes<ListElement>,\n    ListClassNameOptions {\n  /**\n   * @defaultValue `\"none\"`\n   */\n  role?: HTMLAttributes<ListElement>[\"role\"];\n\n  /**\n   * Set this to `true` to render as `<ol>` instead of `<ul>` when the children\n   * are in a specific order. For example: steps within a recipe.\n   *\n   * @defaultValue `false`\n   */\n  ordered?: boolean;\n}\n\n/**\n * The `List` component is used to render a collection of clickable actions\n * vertically or horizontally and does not include the default `ol`/`ul` styles.\n *\n * @example Simple Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import { ListItemLink } from \"@react-md/core/list/ListItemLink\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 3\n *       </ListItem>\n *       <ListItemLink href=\"/some-route\">Link Example</ListItemLink>\n *     </List>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/list | List Demos}\n */\nexport const List = forwardRef<ListElement, ListProps>(\n  function List(props, ref) {\n    const {\n      className,\n      children,\n      role = \"none\",\n      dense = false,\n      ordered = false,\n      horizontal = false,\n      ...remaining\n    } = props;\n    const Component = (ordered ? \"ol\" : \"ul\") as \"ul\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        role={role}\n        className={list({\n          dense,\n          horizontal,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","list","List","props","ref","className","children","role","dense","ordered","horizontal","remaining","Component"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAAoCC,IAAI,QAAQ,kBAAkB;AAwBlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,MAAM,EACbC,QAAQ,KAAK,EACbC,UAAU,KAAK,EACfC,aAAa,KAAK,EAClB,GAAGC,WACJ,GAAGR;IACJ,MAAMS,YAAaH,UAAU,OAAO;IACpC,qBACE,KAACG;QACE,GAAGD,SAAS;QACbP,KAAKA;QACLG,MAAMA;QACNF,WAAWJ,KAAK;YACdO;YACAE;YACAL;QACF;kBAECC;;AAGP,GACA"}

package/dist/list/ListItem.d.ts

@@ -1,27 +1,13 @@
 import { type HTMLAttributes } from "react";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
-import { type ListItemChildrenProps, type ListItemHeight } from "./types.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-list-item-keyline"?: string | number;
-        "--rmd-list-item-padding-h"?: string | number;
-        "--rmd-list-item-padding-v"?: string | number;
-        "--rmd-list-item-height"?: string | number;
-        "--rmd-list-item-medium-height"?: string | number;
-        "--rmd-list-item-large-height"?: string | number;
-        "--rmd-list-item-extra-large-height"?: string | number;
-        "--rmd-list-item-multiline-clamp"?: string | number;
-        "--rmd-list-item-multiline-height"?: string | number;
-        "--rmd-list-item-media-size"?: string | number;
-        "--rmd-list-item-media-spacing"?: string | number;
-        "--rmd-list-item-text-multiline-height"?: string | number;
-    }
-}
+import { type BaseListItemClassNameOptions } from "./listItemStyles.js";
+import { type ListItemChildrenProps } from "./types.js";
 /**
  * @since 6.0.0 Renamed `threeLines` to `multiline` since it can
  * support more than three lines of text.
+ * @since 6.3.1 Extends the BaseListItemClassNameOptions
  */
-export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemChildrenProps, ComponentWithRippleProps {
+export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemChildrenProps, BaseListItemClassNameOptions, ComponentWithRippleProps {
     /**
      * @defaultValue `"button"`
      */
@@ -30,26 +16,6 @@ export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemCh
      * @defaultValue `disabled ? -1 : 0`
      */
     tabIndex?: number;
-    /**
-     * @see {@link ListItemHeight}
-     * @defaultValue `"auto"`
-     */
-    height?: ListItemHeight;
-    /**
-     * @defaultValue `false`
-     */
-    multiline?: boolean;
-    /**
-     * @defaultValue `false`
-     */
-    disabled?: boolean;
-    /**
-     * Note: This does nothing if the `disabled` prop is not enabled.
-     *
-     * @defaultValue `false`
-     * @since 2.4.3
-     */
-    disabledOpacity?: boolean;
     /**
      * Set this to `false` if the list item should not gain the interaction
      * states: hover, focus, press, etc. This is kind of like being disabled

package/dist/list/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/ListItem.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport { listItem } from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps, type ListItemHeight } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-list-item-keyline\"?: string | number;\n    \"--rmd-list-item-padding-h\"?: string | number;\n    \"--rmd-list-item-padding-v\"?: string | number;\n    \"--rmd-list-item-height\"?: string | number;\n    \"--rmd-list-item-medium-height\"?: string | number;\n    \"--rmd-list-item-large-height\"?: string | number;\n    \"--rmd-list-item-extra-large-height\"?: string | number;\n    \"--rmd-list-item-multiline-clamp\"?: string | number;\n    \"--rmd-list-item-multiline-height\"?: string | number;\n    \"--rmd-list-item-media-size\"?: string | number;\n    \"--rmd-list-item-media-spacing\"?: string | number;\n    \"--rmd-list-item-text-multiline-height\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0 Renamed `threeLines` to `multiline` since it can\n * support more than three lines of text.\n */\nexport interface ListItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    ListItemChildrenProps,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"button\"`\n   */\n  role?: HTMLAttributes<HTMLLIElement>[\"role\"];\n\n  /**\n   * @defaultValue `disabled ? -1 : 0`\n   */\n  tabIndex?: number;\n\n  /**\n   * @see {@link ListItemHeight}\n   * @defaultValue `\"auto\"`\n   */\n  height?: ListItemHeight;\n\n  /**\n   * @defaultValue `false`\n   */\n  multiline?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Note: This does nothing if the `disabled` prop is not enabled.\n   *\n   * @defaultValue `false`\n   * @since 2.4.3\n   */\n  disabledOpacity?: boolean;\n\n  /**\n   * Set this to `false` if the list item should not gain the interaction\n   * states: hover, focus, press, etc. This is kind of like being disabled\n   * without the disabled styles being applied.\n   *\n   * @defaultValue `role === \"presentation\"`\n   */\n  presentational?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItem` is used to create a clickable/focusable button within a\n * `List` and removes the normal `<li>` styles.\n *\n * @example Simple Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *         secondaryText={<span>Some <strong>additional</strong> content.</span>}\n *       >\n *         Item 2\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n *\n * @example Applying Addons Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem leftAddon={<FavoriteIcon />}>\n *         Item 1\n *       </ListItem>\n *       <ListItem rightAddon={<FavoriteIcon />}>\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         leftAddon={<FavoriteIcon />}\n *         rightAddon={<img alt=\"\" src=\"/some-image.png\" />}\n *         rightAddonType=\"media\"\n *       >\n *         Item 3\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/list | List Demos}\n */\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(\n  function ListItem(props, ref) {\n    const {\n      className,\n      textProps,\n      textClassName,\n      secondaryTextClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextProps,\n      disableTextChildren = false,\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      leftAddonPosition,\n      leftAddonClassName,\n      leftAddonForceWrap,\n      rightAddon,\n      rightAddonType,\n      rightAddonPosition,\n      rightAddonClassName,\n      rightAddonForceWrap,\n      disableLeftAddonSpacing,\n      disableLeftAddonCenteredMedia,\n      disableRightAddonCenteredMedia,\n      multiline = false,\n      disabled = false,\n      disableRipple,\n      disabledOpacity = false,\n      role = \"button\",\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      tabIndex: propTabIndex,\n      children: propChildren,\n      presentational = role === \"presentation\",\n      ...remaining\n    } = props;\n\n    let tabIndex = propTabIndex;\n    if (!presentational && typeof tabIndex === \"undefined\") {\n      tabIndex = disabled ? -1 : 0;\n    }\n\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      mode: disableRipple ? \"none\" : undefined,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled: disabled || presentational,\n    });\n    const children = useHigherContrastChildren(\n      propChildren,\n      !disableTextChildren\n    );\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <li\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={listItem({\n          className,\n          height,\n          disabled,\n          disabledOpacity,\n          multiline,\n          clickable: !presentational,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          multiline={multiline}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={leftAddon}\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={leftAddonClassName}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={rightAddon}\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonSpacing={disableLeftAddonSpacing}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","ListItemChildren","getListItemHeight","listItem","ListItem","props","ref","className","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonSpacing","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","multiline","disabled","disableRipple","disabledOpacity","role","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","tabIndex","propTabIndex","children","propChildren","presentational","remaining","pressedClassName","ripples","handlers","mode","undefined","li","aria-disabled","clickable"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,QAAQ,QAAQ,sBAAsB;AAwE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEC,GACD,OAAO,MAAMC,yBAAWN,WACtB,SAASM,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,UAAU,EAClBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,aAAa,EACbC,kBAAkB,KAAK,EACvBC,OAAO,QAAQ,EACfC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,iBAAiBhB,SAAS,cAAc,EACxC,GAAGiB,WACJ,GAAG9C;IAEJ,IAAIyC,WAAWC;IACf,IAAI,CAACG,kBAAkB,OAAOJ,aAAa,aAAa;QACtDA,WAAWf,WAAW,CAAC,IAAI;IAC7B;IAEA,MAAM,EAAEqB,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGvD,sBAAsB;QACpEwD,MAAMvB,gBAAgB,SAASwB;QAC/BrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd,UAAUA,YAAYmB;IACxB;IACA,MAAMF,WAAWhD,0BACfiD,cACA,CAACnC;IAGH,MAAMC,SAASb,kBAAkB;QAC/Ba,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,MAAC6C;QACE,GAAGN,SAAS;QACZ,GAAGG,QAAQ;QACZI,iBAAe3B,YAAYyB;QAC3BlD,KAAKA;QACL4B,MAAMA;QACNY,UAAUA;QACVvC,WAAWJ,SAAS;YAClBI;YACAQ;YACAgB;YACAE;YACAH;YACA6B,WAAW,CAACT;YACZE;QACF;;0BAEA,KAACnD;gBACC6B,WAAWA;gBACXrB,eAAeA;gBACfC,wBAAwBA;gBACxBI,qBAAqBA;gBACrBH,aAAaA;gBACbH,WAAWA;gBACXI,eAAeA;gBACfC,oBAAoBA;gBACpBI,WAAWA;gBACXC,eAAeA;gBACfC,mBAAmBA;gBACnBC,oBAAoBA;gBACpBC,oBAAoBA;gBACpBC,YAAYA;gBACZC,gBAAgBA;gBAChBC,oBAAoBA;gBACpBC,qBAAqBA;gBACrBC,qBAAqBA;gBACrBC,yBAAyBA;gBACzBC,+BAA+BA;gBAC/BC,gCAAgCA;0BAE/BmB;;YAEFK;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/list/ListItem.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport {\n  type BaseListItemClassNameOptions,\n  listItem,\n} from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed `threeLines` to `multiline` since it can\n * support more than three lines of text.\n * @since 6.3.1 Extends the BaseListItemClassNameOptions\n */\nexport interface ListItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    ListItemChildrenProps,\n    BaseListItemClassNameOptions,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"button\"`\n   */\n  role?: HTMLAttributes<HTMLLIElement>[\"role\"];\n\n  /**\n   * @defaultValue `disabled ? -1 : 0`\n   */\n  tabIndex?: number;\n\n  /**\n   * Set this to `false` if the list item should not gain the interaction\n   * states: hover, focus, press, etc. This is kind of like being disabled\n   * without the disabled styles being applied.\n   *\n   * @defaultValue `role === \"presentation\"`\n   */\n  presentational?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItem` is used to create a clickable/focusable button within a\n * `List` and removes the normal `<li>` styles.\n *\n * @example Simple Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *         secondaryText={<span>Some <strong>additional</strong> content.</span>}\n *       >\n *         Item 2\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n *\n * @example Applying Addons Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem leftAddon={<FavoriteIcon />}>\n *         Item 1\n *       </ListItem>\n *       <ListItem rightAddon={<FavoriteIcon />}>\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         leftAddon={<FavoriteIcon />}\n *         rightAddon={<img alt=\"\" src=\"/some-image.png\" />}\n *         rightAddonType=\"media\"\n *       >\n *         Item 3\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/list | List Demos}\n */\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(\n  function ListItem(props, ref) {\n    const {\n      className,\n      textProps,\n      textClassName,\n      secondaryTextClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextProps,\n      disableTextChildren = false,\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      leftAddonPosition,\n      leftAddonClassName,\n      leftAddonForceWrap,\n      rightAddon,\n      rightAddonType,\n      rightAddonPosition,\n      rightAddonClassName,\n      rightAddonForceWrap,\n      disableLeftAddonSpacing,\n      disableLeftAddonCenteredMedia,\n      disableRightAddonCenteredMedia,\n      multiline = false,\n      disabled = false,\n      disableRipple,\n      disabledOpacity = false,\n      role = \"button\",\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      tabIndex: propTabIndex,\n      children: propChildren,\n      presentational = role === \"presentation\",\n      ...remaining\n    } = props;\n\n    let tabIndex = propTabIndex;\n    if (!presentational && typeof tabIndex === \"undefined\") {\n      tabIndex = disabled ? -1 : 0;\n    }\n\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      mode: disableRipple ? \"none\" : undefined,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled: disabled || presentational,\n    });\n    const children = useHigherContrastChildren(\n      propChildren,\n      !disableTextChildren\n    );\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <li\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={listItem({\n          className,\n          height,\n          disabled,\n          disabledOpacity,\n          multiline,\n          clickable: !presentational,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          multiline={multiline}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={leftAddon}\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={leftAddonClassName}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={rightAddon}\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonSpacing={disableLeftAddonSpacing}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","ListItemChildren","getListItemHeight","listItem","ListItem","props","ref","className","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonSpacing","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","multiline","disabled","disableRipple","disabledOpacity","role","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","tabIndex","propTabIndex","children","propChildren","presentational","remaining","pressedClassName","ripples","handlers","mode","undefined","li","aria-disabled","clickable"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAEEC,QAAQ,QACH,sBAAsB;AAiC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEC,GACD,OAAO,MAAMC,yBAAWN,WACtB,SAASM,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,UAAU,EAClBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,aAAa,EACbC,kBAAkB,KAAK,EACvBC,OAAO,QAAQ,EACfC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,iBAAiBhB,SAAS,cAAc,EACxC,GAAGiB,WACJ,GAAG9C;IAEJ,IAAIyC,WAAWC;IACf,IAAI,CAACG,kBAAkB,OAAOJ,aAAa,aAAa;QACtDA,WAAWf,WAAW,CAAC,IAAI;IAC7B;IAEA,MAAM,EAAEqB,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGvD,sBAAsB;QACpEwD,MAAMvB,gBAAgB,SAASwB;QAC/BrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd,UAAUA,YAAYmB;IACxB;IACA,MAAMF,WAAWhD,0BACfiD,cACA,CAACnC;IAGH,MAAMC,SAASb,kBAAkB;QAC/Ba,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,MAAC6C;QACE,GAAGN,SAAS;QACZ,GAAGG,QAAQ;QACZI,iBAAe3B,YAAYyB;QAC3BlD,KAAKA;QACL4B,MAAMA;QACNY,UAAUA;QACVvC,WAAWJ,SAAS;YAClBI;YACAQ;YACAgB;YACAE;YACAH;YACA6B,WAAW,CAACT;YACZE;QACF;;0BAEA,KAACnD;gBACC6B,WAAWA;gBACXrB,eAAeA;gBACfC,wBAAwBA;gBACxBI,qBAAqBA;gBACrBH,aAAaA;gBACbH,WAAWA;gBACXI,eAAeA;gBACfC,oBAAoBA;gBACpBI,WAAWA;gBACXC,eAAeA;gBACfC,mBAAmBA;gBACnBC,oBAAoBA;gBACpBC,oBAAoBA;gBACpBC,YAAYA;gBACZC,gBAAgBA;gBAChBC,oBAAoBA;gBACpBC,qBAAqBA;gBACrBC,qBAAqBA;gBACrBC,yBAAyBA;gBACzBC,+BAA+BA;gBAC/BC,gCAAgCA;0BAE/BmB;;YAEFK;;;AAGP,GACA"}

package/dist/list/listItemStyles.d.ts

@@ -1,6 +1,22 @@
 import { type ListItemAddonPosition, type ListItemAddonType, type ListItemHeight } from "./types.js";
-/** @since 6.0.0 */
-export interface ListItemClassNameOptions {
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-list-item-keyline"?: string | number;
+        "--rmd-list-item-padding-h"?: string | number;
+        "--rmd-list-item-padding-v"?: string | number;
+        "--rmd-list-item-height"?: string | number;
+        "--rmd-list-item-medium-height"?: string | number;
+        "--rmd-list-item-large-height"?: string | number;
+        "--rmd-list-item-extra-large-height"?: string | number;
+        "--rmd-list-item-multiline-height"?: string | number;
+        "--rmd-list-item-media-size"?: string | number;
+        "--rmd-list-item-media-spacing"?: string | number;
+        "--rmd-list-item-text-multiline-height"?: string | number;
+        "--rmd-list-item-multiline-clamp"?: string | number;
+    }
+}
+/** @since 6.3.1 */
+export interface BaseListItemClassNameOptions {
     className?: string;
     /**
      * @see {@link ListItemHeight}
@@ -12,7 +28,10 @@ export interface ListItemClassNameOptions {
      */
     multiline?: boolean;
     /**
+     * Note: This does nothing if the `disabled` prop is not enabled.
+     *
      * @defaultValue `false`
+     * @since 2.4.3
      */
     disabled?: boolean;
     /**
@@ -22,6 +41,9 @@ export interface ListItemClassNameOptions {
      * @since 2.4.3
      */
     disabledOpacity?: boolean;
+}
+/** @since 6.0.0 */
+export interface ListItemClassNameOptions extends BaseListItemClassNameOptions {
     /**
      * Set this to `false` if the list item should not gain the interaction
      * states: hover, focus, press, etc. This is kind of like being disabled

package/dist/list/listItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/listItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"./types.js\";\n\nconst styles = bem(\"rmd-list-item\");\n\n/** @since 6.0.0 */\nexport interface ListItemClassNameOptions {\n  className?: string;\n  /**\n   * @see {@link ListItemHeight}\n   * @defaultValue `\"auto\"`\n   */\n  height?: ListItemHeight;\n\n  /**\n   * @defaultValue `false`\n   */\n  multiline?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Note: This does nothing if the `disabled` prop is not enabled.\n   *\n   * @defaultValue `false`\n   * @since 2.4.3\n   */\n  disabledOpacity?: boolean;\n\n  /**\n   * Set this to `false` if the list item should not gain the interaction\n   * states: hover, focus, press, etc. This is kind of like being disabled\n   * without the disabled styles being applied.\n   *\n   * @defaultValue `true`\n   */\n  clickable?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface InternalListItemClassNameOptions\n  extends ListItemClassNameOptions {\n  /**\n   * @defaultValue `false`\n   */\n  link?: boolean;\n\n  /**\n   * This is prop is used internally when integrating with the\n   * {@link useElementInteraction} hook.\n   */\n  pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function listItem(\n  options: InternalListItemClassNameOptions = {}\n): string {\n  const {\n    className,\n    link = false,\n    height = \"auto\",\n    clickable = true,\n    multiline = false,\n    disabled = false,\n    disabledOpacity = false,\n    pressedClassName,\n  } = options;\n\n  return cnb(\n    styles({\n      link,\n      [height]: height !== \"auto\",\n      multiline,\n      \"disabled-color\": disabled && !disabledOpacity,\n      \"disabled-opacity\": disabled && disabledOpacity,\n    }),\n    cssUtils({ surface: clickable }),\n    pressedClassName,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface ListItemTextClassNameOptions {\n  className?: string;\n  /**\n   * @defaultValue `false`\n   */\n  clamped?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  secondary?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function listItemText(\n  options: ListItemTextClassNameOptions = {}\n): string {\n  const { className, secondary = false, clamped = false } = options;\n\n  return cnb(\n    styles(\"text\", {\n      clamped: secondary && clamped,\n      secondary,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface ListItemAddonClassNameOptions {\n  className?: string;\n\n  /**\n   * The addon type that is used to adjust the spacing styles.\n   *\n   * @defaultValue `\"icon\"`\n   */\n  type?: ListItemAddonType;\n\n  /**\n   * The vertical position to use for the addon.\n   *\n   * @defaultValue `\"middle\"`\n   */\n  position?: ListItemAddonPosition;\n\n  /**\n   * Boolean if the addon should appear after the `children`.\n   *\n   * @defaultValue `false`\n   */\n  addonAfter?: boolean;\n\n  /**\n   * The media items are centered by default using:\n   * ```scss\n   * align-items: center;\n   * display: flex;\n   * justify-content: center;\n   * ```\n   *\n   * When this is set to `true`, the flex styles will not be applied.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  disableCenteredMedia?: boolean;\n\n  /**\n   * Set this to `true` to disable the additional spacing applied to the addons\n   * that appear before the `children` and the normal `--rmd-text-icon-spacing`\n   * value is used instead.\n   *\n   * @defaultValue `false`\n   */\n  disableBeforeSpacing?: boolean;\n}\n\n/**\n *\n * @since 6.0.0\n */\nexport function listItemAddon(\n  options: ListItemAddonClassNameOptions = {}\n): string {\n  const {\n    type = \"icon\",\n    position = \"middle\",\n    className,\n    addonAfter = false,\n    disableCenteredMedia = false,\n    disableBeforeSpacing = false,\n  } = options;\n\n  const isMedia = type === \"media\" || type === \"large-media\";\n  const isAvatar = type === \"avatar\";\n\n  return cnb(\n    styles(\"addon\", {\n      [position]: position !== \"middle\",\n      before: !disableBeforeSpacing && !addonAfter,\n      \"avatar-before\": !disableBeforeSpacing && !addonAfter && isAvatar,\n      media: isMedia,\n      \"media-large\": type === \"large-media\",\n      \"media-centered\": isMedia && !disableCenteredMedia,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","listItem","options","className","link","height","clickable","multiline","disabled","disabledOpacity","pressedClassName","surface","listItemText","secondary","clamped","listItemAddon","type","position","addonAfter","disableCenteredMedia","disableBeforeSpacing","isMedia","isAvatar","before","media"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAOtC,MAAMC,SAASD,IAAI;AAsDnB;;CAEC,GACD,OAAO,SAASE,SACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,SAAS,EACTC,OAAO,KAAK,EACZC,SAAS,MAAM,EACfC,YAAY,IAAI,EAChBC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,gBAAgB,EACjB,GAAGR;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACA,CAACC,OAAO,EAAEA,WAAW;QACrBE;QACA,kBAAkBC,YAAY,CAACC;QAC/B,oBAAoBD,YAAYC;IAClC,IACAX,SAAS;QAAEa,SAASL;IAAU,IAC9BI,kBACAP;AAEJ;AAgBA;;CAEC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEU,YAAY,KAAK,EAAEC,UAAU,KAAK,EAAE,GAAGZ;IAE1D,OAAOL,IACLG,OAAO,QAAQ;QACbc,SAASD,aAAaC;QACtBD;IACF,IACAV;AAEJ;AAoDA;;;CAGC,GACD,OAAO,SAASY,cACdb,UAAyC,CAAC,CAAC;IAE3C,MAAM,EACJc,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBd,SAAS,EACTe,aAAa,KAAK,EAClBC,uBAAuB,KAAK,EAC5BC,uBAAuB,KAAK,EAC7B,GAAGlB;IAEJ,MAAMmB,UAAUL,SAAS,WAAWA,SAAS;IAC7C,MAAMM,WAAWN,SAAS;IAE1B,OAAOnB,IACLG,OAAO,SAAS;QACd,CAACiB,SAAS,EAAEA,aAAa;QACzBM,QAAQ,CAACH,wBAAwB,CAACF;QAClC,iBAAiB,CAACE,wBAAwB,CAACF,cAAcI;QACzDE,OAAOH;QACP,eAAeL,SAAS;QACxB,kBAAkBK,WAAW,CAACF;IAChC,IACAhB;AAEJ"}
+{"version":3,"sources":["../../src/list/listItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"./types.js\";\n\nconst styles = bem(\"rmd-list-item\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-list-item-keyline\"?: string | number;\n    \"--rmd-list-item-padding-h\"?: string | number;\n    \"--rmd-list-item-padding-v\"?: string | number;\n    \"--rmd-list-item-height\"?: string | number;\n    \"--rmd-list-item-medium-height\"?: string | number;\n    \"--rmd-list-item-large-height\"?: string | number;\n    \"--rmd-list-item-extra-large-height\"?: string | number;\n    \"--rmd-list-item-multiline-height\"?: string | number;\n    \"--rmd-list-item-media-size\"?: string | number;\n    \"--rmd-list-item-media-spacing\"?: string | number;\n    \"--rmd-list-item-text-multiline-height\"?: string | number;\n    \"--rmd-list-item-multiline-clamp\"?: string | number;\n  }\n}\n\n/** @since 6.3.1 */\nexport interface BaseListItemClassNameOptions {\n  className?: string;\n\n  /**\n   * @see {@link ListItemHeight}\n   * @defaultValue `\"auto\"`\n   */\n  height?: ListItemHeight;\n\n  /**\n   * @defaultValue `false`\n   */\n  multiline?: boolean;\n\n  /**\n   * Note: This does nothing if the `disabled` prop is not enabled.\n   *\n   * @defaultValue `false`\n   * @since 2.4.3\n   */\n  disabled?: boolean;\n\n  /**\n   * Note: This does nothing if the `disabled` prop is not enabled.\n   *\n   * @defaultValue `false`\n   * @since 2.4.3\n   */\n  disabledOpacity?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface ListItemClassNameOptions extends BaseListItemClassNameOptions {\n  /**\n   * Set this to `false` if the list item should not gain the interaction\n   * states: hover, focus, press, etc. This is kind of like being disabled\n   * without the disabled styles being applied.\n   *\n   * @defaultValue `true`\n   */\n  clickable?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface InternalListItemClassNameOptions\n  extends ListItemClassNameOptions {\n  /**\n   * @defaultValue `false`\n   */\n  link?: boolean;\n\n  /**\n   * This is prop is used internally when integrating with the\n   * {@link useElementInteraction} hook.\n   */\n  pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function listItem(\n  options: InternalListItemClassNameOptions = {}\n): string {\n  const {\n    className,\n    link = false,\n    height = \"auto\",\n    clickable = true,\n    multiline = false,\n    disabled = false,\n    disabledOpacity = false,\n    pressedClassName,\n  } = options;\n\n  return cnb(\n    styles({\n      link,\n      [height]: height !== \"auto\",\n      multiline,\n      \"disabled-color\": disabled && !disabledOpacity,\n      \"disabled-opacity\": disabled && disabledOpacity,\n    }),\n    cssUtils({ surface: clickable }),\n    pressedClassName,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface ListItemTextClassNameOptions {\n  className?: string;\n  /**\n   * @defaultValue `false`\n   */\n  clamped?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  secondary?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function listItemText(\n  options: ListItemTextClassNameOptions = {}\n): string {\n  const { className, secondary = false, clamped = false } = options;\n\n  return cnb(\n    styles(\"text\", {\n      clamped: secondary && clamped,\n      secondary,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface ListItemAddonClassNameOptions {\n  className?: string;\n\n  /**\n   * The addon type that is used to adjust the spacing styles.\n   *\n   * @defaultValue `\"icon\"`\n   */\n  type?: ListItemAddonType;\n\n  /**\n   * The vertical position to use for the addon.\n   *\n   * @defaultValue `\"middle\"`\n   */\n  position?: ListItemAddonPosition;\n\n  /**\n   * Boolean if the addon should appear after the `children`.\n   *\n   * @defaultValue `false`\n   */\n  addonAfter?: boolean;\n\n  /**\n   * The media items are centered by default using:\n   * ```scss\n   * align-items: center;\n   * display: flex;\n   * justify-content: center;\n   * ```\n   *\n   * When this is set to `true`, the flex styles will not be applied.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  disableCenteredMedia?: boolean;\n\n  /**\n   * Set this to `true` to disable the additional spacing applied to the addons\n   * that appear before the `children` and the normal `--rmd-text-icon-spacing`\n   * value is used instead.\n   *\n   * @defaultValue `false`\n   */\n  disableBeforeSpacing?: boolean;\n}\n\n/**\n *\n * @since 6.0.0\n */\nexport function listItemAddon(\n  options: ListItemAddonClassNameOptions = {}\n): string {\n  const {\n    type = \"icon\",\n    position = \"middle\",\n    className,\n    addonAfter = false,\n    disableCenteredMedia = false,\n    disableBeforeSpacing = false,\n  } = options;\n\n  const isMedia = type === \"media\" || type === \"large-media\";\n  const isAvatar = type === \"avatar\";\n\n  return cnb(\n    styles(\"addon\", {\n      [position]: position !== \"middle\",\n      before: !disableBeforeSpacing && !addonAfter,\n      \"avatar-before\": !disableBeforeSpacing && !addonAfter && isAvatar,\n      media: isMedia,\n      \"media-large\": type === \"large-media\",\n      \"media-centered\": isMedia && !disableCenteredMedia,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","listItem","options","className","link","height","clickable","multiline","disabled","disabledOpacity","pressedClassName","surface","listItemText","secondary","clamped","listItemAddon","type","position","addonAfter","disableCenteredMedia","disableBeforeSpacing","isMedia","isAvatar","before","media"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAOtC,MAAMC,SAASD,IAAI;AA8EnB;;CAEC,GACD,OAAO,SAASE,SACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,SAAS,EACTC,OAAO,KAAK,EACZC,SAAS,MAAM,EACfC,YAAY,IAAI,EAChBC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,gBAAgB,EACjB,GAAGR;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACA,CAACC,OAAO,EAAEA,WAAW;QACrBE;QACA,kBAAkBC,YAAY,CAACC;QAC/B,oBAAoBD,YAAYC;IAClC,IACAX,SAAS;QAAEa,SAASL;IAAU,IAC9BI,kBACAP;AAEJ;AAgBA;;CAEC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEU,YAAY,KAAK,EAAEC,UAAU,KAAK,EAAE,GAAGZ;IAE1D,OAAOL,IACLG,OAAO,QAAQ;QACbc,SAASD,aAAaC;QACtBD;IACF,IACAV;AAEJ;AAoDA;;;CAGC,GACD,OAAO,SAASY,cACdb,UAAyC,CAAC,CAAC;IAE3C,MAAM,EACJc,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBd,SAAS,EACTe,aAAa,KAAK,EAClBC,uBAAuB,KAAK,EAC5BC,uBAAuB,KAAK,EAC7B,GAAGlB;IAEJ,MAAMmB,UAAUL,SAAS,WAAWA,SAAS;IAC7C,MAAMM,WAAWN,SAAS;IAE1B,OAAOnB,IACLG,OAAO,SAAS;QACd,CAACiB,SAAS,EAAEA,aAAa;QACzBM,QAAQ,CAACH,wBAAwB,CAACF;QAClC,iBAAiB,CAACE,wBAAwB,CAACF,cAAcI;QACzDE,OAAOH;QACP,eAAeL,SAAS;QACxB,kBAAkBK,WAAW,CAACF;IAChC,IACAhB;AAEJ"}