@react-md/core 1.0.0-next.0

package/dist/list/List.d.ts

@@ -0,0 +1,89 @@
+import { type HTMLAttributes } from "react";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-list-padding-h"?: string | number;
+        "--rmd-list-padding-v"?: string | number;
+    }
+}
+/** @remarks \@since 6.0.0 */
+export interface ListClassNameOptions {
+    className?: string;
+    /** @defaultValue `false` */
+    dense?: boolean;
+    /** @defaultValue `false` */
+    horizontal?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function list(options?: ListClassNameOptions): string;
+export type ListElement = HTMLUListElement | HTMLOListElement;
+export interface ListProps extends HTMLAttributes<ListElement> {
+    /**
+     * @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.
+     *
+     * @defaultValue `false`
+     */
+    ordered?: boolean;
+    /**
+     * Set this to `true` to render horizontally instead of vertically.
+     *
+     * @defaultValue `false`
+     */
+    horizontal?: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * The `List` component is used to render a collection of clickable actions
+ * vertically or horizontally and does not include the default `ol`/`ul` styles.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { List, ListItem, ListItemLink } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <List>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *       >
+ *         Item 1
+ *       </ListItem>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *       >
+ *         Item 2
+ *       </ListItem>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *       >
+ *         Item 3
+ *       </ListItem>
+ *       <ListItemLink href="/some-route">Link Example</ListItemLink>
+ *     </List>
+ *   );
+ * }
+ * ```
+ */
+export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<ListElement>>;

package/dist/list/List.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-list");
+/**
+ * @remarks \@since 6.0.0
+ */ export function list(options = {}) {
+    const { dense = false, horizontal = false, className } = options;
+    return cnb(styles({
+        dense,
+        horizontal
+    }), className);
+}
+/**
+ * **Server Component**
+ *
+ * The `List` component is used to render a collection of clickable actions
+ * vertically or horizontally and does not include the default `ol`/`ul` styles.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { List, ListItem, ListItemLink } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <List>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *       >
+ *         Item 1
+ *       </ListItem>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *       >
+ *         Item 2
+ *       </ListItem>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *       >
+ *         Item 3
+ *       </ListItem>
+ *       <ListItemLink href="/some-route">Link Example</ListItemLink>
+ *     </List>
+ *   );
+ * }
+ * ```
+ */ export const List = /*#__PURE__*/ forwardRef(function List(props, ref) {
+    const { className, children, role = "none", dense = false, ordered = false, horizontal = false, ...remaining } = props;
+    const Component = ordered ? "ol" : "ul";
+    return /*#__PURE__*/ _jsx(Component, {
+        ...remaining,
+        ref: ref,
+        role: role,
+        className: list({
+            dense,
+            horizontal,
+            className
+        }),
+        children: children
+    });
+});
+
+//# sourceMappingURL=List.js.map

package/dist/list/List.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/list/List.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.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\nconst styles = bem(\"rmd-list\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface ListClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  horizontal?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function list(options: ListClassNameOptions = {}): string {\n  const { dense = false, horizontal = false, className } = options;\n\n  return cnb(styles({ dense, horizontal }), className);\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 * **Server Component**\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\n * Simple Example\n * ```tsx\n * import { List, ListItem, ListItemLink } from \"@react-md/core\";\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 */\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":["cnb","forwardRef","bem","styles","list","options","dense","horizontal","className","List","props","ref","children","role","ordered","remaining","Component"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,aAAa,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEzD,OAAOL,IAAIG,OAAO;QAAEG;QAAOC;IAAW,IAAIC;AAC5C;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMC,qBAAOR,WAClB,SAASQ,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJH,SAAS,EACTI,QAAQ,EACRC,OAAO,MAAM,EACbP,QAAQ,KAAK,EACbQ,UAAU,KAAK,EACfP,aAAa,KAAK,EAClB,GAAGQ,WACJ,GAAGL;IACJ,MAAMM,YAAaF,UAAU,OAAO;IACpC,qBACE,KAACE;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLE,MAAMA;QACNL,WAAWJ,KAAK;YACdE;YACAC;YACAC;QACF;kBAECI;;AAGP,GACA"}

package/dist/list/ListItem.d.ts

@@ -0,0 +1,121 @@
+import { type HTMLAttributes } from "react";
+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-three-line-height"?: string | number;
+        "--rmd-list-item-media-size"?: string | number;
+        "--rmd-list-item-media-spacing"?: string | number;
+        "--rmd-list-item-text-three-line-height"?: string | number;
+    }
+}
+export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemChildrenProps {
+    /**
+     * @defaultValue `"button"`
+     */
+    role?: HTMLAttributes<HTMLLIElement>["role"];
+    /**
+     * @defaultValue `disabled ? -1 : 0`
+     */
+    tabIndex?: number;
+    /**
+     * @see {@link ListItemHeight}
+     * @defaultValue `"auto"`
+     */
+    height?: ListItemHeight;
+    /**
+     * @defaultValue `false`
+     */
+    threeLines?: boolean;
+    /**
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+    /**
+     * Note: This does nothing if the `disabled` prop is not enabled.
+     *
+     * @defaultValue `false`
+     * @remarks \@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
+     * without the disabled styles being applied.
+     *
+     * @defaultValue `role === "presentation"`
+     */
+    presentational?: boolean;
+}
+/**
+ * **Client Component**
+ *
+ * The `ListItem` is used to create a clickable/focusable button within a
+ * `List` and removes the normal `<li>` styles.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { List, ListItem } from "@react-md/core";
+ * import type { ReactElement  } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <List>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *       >
+ *         Item 1
+ *       </ListItem>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *         secondaryText={<span>Some <strong>additional</strong> content.</span>}
+ *       >
+ *         Item 2
+ *       </ListItem>
+ *     </List>
+ *   );
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Applying Addons Example
+ * ```tsx
+ * import { List, ListItem } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ * import type { ReactElement  } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <List>
+ *       <ListItem leftAddon={<FavoriteIcon />}>
+ *         Item 1
+ *       </ListItem>
+ *       <ListItem rightAddon={<FavoriteIcon />}>
+ *         Item 2
+ *       </ListItem>
+ *       <ListItem
+ *         leftAddon={<FavoriteIcon />}
+ *         rightAddon={<img alt="" src="/some-image.png" />}
+ *         rightAddonType="media"
+ *       >
+ *         Item 3
+ *       </ListItem>
+ *     </List>
+ *   );
+ *   );
+ * }
+ * ```
+ */
+export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/list/ListItem.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
+import { getListItemHeight } from "./getListItemHeight.js";
+import { ListItemChildren } from "./ListItemChildren.js";
+import { listItem } from "./listItemStyles.js";
+/**
+ * **Client Component**
+ *
+ * The `ListItem` is used to create a clickable/focusable button within a
+ * `List` and removes the normal `<li>` styles.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { List, ListItem } from "@react-md/core";
+ * import type { ReactElement  } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <List>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *       >
+ *         Item 1
+ *       </ListItem>
+ *       <ListItem
+ *         onClick={() => {
+ *           // do something
+ *         }}
+ *         secondaryText={<span>Some <strong>additional</strong> content.</span>}
+ *       >
+ *         Item 2
+ *       </ListItem>
+ *     </List>
+ *   );
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Applying Addons Example
+ * ```tsx
+ * import { List, ListItem } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ * import type { ReactElement  } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <List>
+ *       <ListItem leftAddon={<FavoriteIcon />}>
+ *         Item 1
+ *       </ListItem>
+ *       <ListItem rightAddon={<FavoriteIcon />}>
+ *         Item 2
+ *       </ListItem>
+ *       <ListItem
+ *         leftAddon={<FavoriteIcon />}
+ *         rightAddon={<img alt="" src="/some-image.png" />}
+ *         rightAddonType="media"
+ *       >
+ *         Item 3
+ *       </ListItem>
+ *     </List>
+ *   );
+ *   );
+ * }
+ * ```
+ */ export const ListItem = /*#__PURE__*/ forwardRef(function ListItem(props, ref) {
+    const { className, textProps, textClassName, secondaryTextClassName, primaryText, secondaryText, secondaryTextProps, disableTextChildren = false, height: propHeight = "auto", leftAddon, leftAddonType = "icon", leftAddonPosition = "middle", leftAddonClassName, leftAddonForceWrap, rightAddon, rightAddonType = "icon", rightAddonPosition = "middle", rightAddonClassName, rightAddonForceWrap, disableLeftAddonCenteredMedia = false, disableRightAddonCenteredMedia = false, threeLines = false, disabled = false, disabledOpacity = false, role = "button", onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, tabIndex: propTabIndex, children: propChildren, presentational = role === "presentation", ...remaining } = props;
+    let tabIndex = propTabIndex;
+    if (!presentational && typeof tabIndex === "undefined") {
+        tabIndex = disabled ? -1 : 0;
+    }
+    const { pressedClassName, ripples, handlers } = useElementInteraction({
+        onBlur,
+        onClick,
+        onKeyDown,
+        onKeyUp,
+        onMouseDown,
+        onMouseUp,
+        onMouseLeave,
+        onDragStart,
+        onTouchStart,
+        onTouchEnd,
+        onTouchMove,
+        disabled: disabled || presentational
+    });
+    const children = useHigherContrastChildren(propChildren, !disableTextChildren);
+    const height = getListItemHeight({
+        height: propHeight,
+        leftAddon,
+        leftAddonType,
+        rightAddon,
+        rightAddonType,
+        secondaryText
+    });
+    return /*#__PURE__*/ _jsxs("li", {
+        ...remaining,
+        ...handlers,
+        "aria-disabled": disabled || undefined,
+        ref: ref,
+        role: role,
+        tabIndex: tabIndex,
+        className: listItem({
+            className,
+            height,
+            disabled,
+            disabledOpacity,
+            threeLines,
+            clickable: !presentational,
+            pressedClassName
+        }),
+        children: [
+            /*#__PURE__*/ _jsx(ListItemChildren, {
+                threeLines: threeLines,
+                textClassName: textClassName,
+                secondaryTextClassName: secondaryTextClassName,
+                disableTextChildren: disableTextChildren,
+                primaryText: primaryText,
+                textProps: textProps,
+                secondaryText: secondaryText,
+                secondaryTextProps: secondaryTextProps,
+                leftAddon: leftAddon,
+                leftAddonType: leftAddonType,
+                leftAddonPosition: leftAddonPosition,
+                leftAddonClassName: leftAddonClassName,
+                leftAddonForceWrap: leftAddonForceWrap,
+                rightAddon: rightAddon,
+                rightAddonType: rightAddonType,
+                rightAddonPosition: rightAddonPosition,
+                rightAddonClassName: rightAddonClassName,
+                rightAddonForceWrap: rightAddonForceWrap,
+                disableLeftAddonCenteredMedia: disableLeftAddonCenteredMedia,
+                disableRightAddonCenteredMedia: disableRightAddonCenteredMedia,
+                children: children
+            }),
+            ripples
+        ]
+    });
+});
+
+//# sourceMappingURL=ListItem.js.map

package/dist/list/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/list/ListItem.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport { ListItemChildren } from \"./ListItemChildren.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-three-line-height\"?: string | number;\n    \"--rmd-list-item-media-size\"?: string | number;\n    \"--rmd-list-item-media-spacing\"?: string | number;\n    \"--rmd-list-item-text-three-line-height\"?: string | number;\n  }\n}\n\nexport interface ListItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    ListItemChildrenProps {\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  threeLines?: 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   * @remarks \\@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\n * Simple Example\n * ```tsx\n * import { List, ListItem } from \"@react-md/core\";\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\n * Applying Addons Example\n * ```tsx\n * import { List, ListItem } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <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 */\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 = \"auto\",\n      leftAddon,\n      leftAddonType = \"icon\",\n      leftAddonPosition = \"middle\",\n      leftAddonClassName,\n      leftAddonForceWrap,\n      rightAddon,\n      rightAddonType = \"icon\",\n      rightAddonPosition = \"middle\",\n      rightAddonClassName,\n      rightAddonForceWrap,\n      disableLeftAddonCenteredMedia = false,\n      disableRightAddonCenteredMedia = false,\n      threeLines = false,\n      disabled = false,\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      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          threeLines,\n          clickable: !presentational,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          threeLines={threeLines}\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          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","getListItemHeight","ListItemChildren","listItem","ListItem","props","ref","className","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","threeLines","disabled","disabledOpacity","role","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","tabIndex","propTabIndex","children","propChildren","presentational","remaining","pressedClassName","ripples","handlers","li","aria-disabled","undefined","clickable"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAkE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,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,aAAa,MAAM,EAC3BC,SAAS,EACTC,gBAAgB,MAAM,EACtBC,oBAAoB,QAAQ,EAC5BC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,iBAAiB,MAAM,EACvBC,qBAAqB,QAAQ,EAC7BC,mBAAmB,EACnBC,mBAAmB,EACnBC,gCAAgC,KAAK,EACrCC,iCAAiC,KAAK,EACtCC,aAAa,KAAK,EAClBC,WAAW,KAAK,EAChBC,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,GAAG5C;IAEJ,IAAIuC,WAAWC;IACf,IAAI,CAACG,kBAAkB,OAAOJ,aAAa,aAAa;QACtDA,WAAWd,WAAW,CAAC,IAAI;IAC7B;IAEA,MAAM,EAAEoB,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGrD,sBAAsB;QACpEkC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAb,UAAUA,YAAYkB;IACxB;IACA,MAAMF,WAAW9C,0BACf+C,cACA,CAACjC;IAGH,MAAMC,SAASd,kBAAkB;QAC/Bc,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,MAACyC;QACE,GAAGJ,SAAS;QACZ,GAAGG,QAAQ;QACZE,iBAAexB,YAAYyB;QAC3BjD,KAAKA;QACL0B,MAAMA;QACNY,UAAUA;QACVrC,WAAWJ,SAAS;YAClBI;YACAQ;YACAe;YACAC;YACAF;YACA2B,WAAW,CAACR;YACZE;QACF;;0BAEA,KAAChD;gBACC2B,YAAYA;gBACZpB,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,+BAA+BA;gBAC/BC,gCAAgCA;0BAE/BkB;;YAEFK;;;AAGP,GACA"}

package/dist/list/ListItemAddon.d.ts

@@ -0,0 +1,22 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type TextIconSpacingProps } from "../icon/TextIconSpacing.js";
+import { type ListItemAddonClassNameOptions } from "./listItemStyles.js";
+export interface ListItemAddonProps extends Omit<TextIconSpacingProps, "icon" | "iconAfter" | "forceIconWrap">, ListItemAddonClassNameOptions {
+    /**
+     * The addon that should be rendered.
+     */
+    addon: ReactNode;
+    /**
+     * @defaultValue `type === "media" || type === "large-media"`
+     */
+    forceAddonWrap?: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * The `ListItemAddon` is used to create an addon to the left or right of the
+ * text/children of a `ListItem`.
+ *
+ * @internal
+ */
+export declare function ListItemAddon(props: ListItemAddonProps): ReactElement;

package/dist/list/ListItemAddon.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextIconSpacing } from "../icon/TextIconSpacing.js";
+import { listItemAddon } from "./listItemStyles.js";
+/**
+ * **Server Component**
+ *
+ * The `ListItemAddon` is used to create an addon to the left or right of the
+ * text/children of a `ListItem`.
+ *
+ * @internal
+ */ export function ListItemAddon(props) {
+    const { className, children, addon, addonAfter = false, type = "icon", position = "middle", forceAddonWrap, disableCenteredMedia = false, ...remaining } = props;
+    const isMedia = type === "media" || type === "large-media";
+    return /*#__PURE__*/ _jsx(TextIconSpacing, {
+        ...remaining,
+        icon: addon,
+        forceIconWrap: forceAddonWrap ?? isMedia,
+        className: listItemAddon({
+            type,
+            position,
+            className,
+            addonAfter,
+            disableCenteredMedia
+        }),
+        iconAfter: addonAfter,
+        children: children
+    });
+}
+
+//# sourceMappingURL=ListItemAddon.js.map

package/dist/list/ListItemAddon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/list/ListItemAddon.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport {\n  listItemAddon,\n  type ListItemAddonClassNameOptions,\n} from \"./listItemStyles.js\";\n\nexport interface ListItemAddonProps\n  extends Omit<TextIconSpacingProps, \"icon\" | \"iconAfter\" | \"forceIconWrap\">,\n    ListItemAddonClassNameOptions {\n  /**\n   * The addon that should be rendered.\n   */\n  addon: ReactNode;\n\n  /**\n   * @defaultValue `type === \"media\" || type === \"large-media\"`\n   */\n  forceAddonWrap?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * The `ListItemAddon` is used to create an addon to the left or right of the\n * text/children of a `ListItem`.\n *\n * @internal\n */\nexport function ListItemAddon(props: ListItemAddonProps): ReactElement {\n  const {\n    className,\n    children,\n    addon,\n    addonAfter = false,\n    type = \"icon\",\n    position = \"middle\",\n    forceAddonWrap,\n    disableCenteredMedia = false,\n    ...remaining\n  } = props;\n\n  const isMedia = type === \"media\" || type === \"large-media\";\n\n  return (\n    <TextIconSpacing\n      {...remaining}\n      icon={addon}\n      forceIconWrap={forceAddonWrap ?? isMedia}\n      className={listItemAddon({\n        type,\n        position,\n        className,\n        addonAfter,\n        disableCenteredMedia,\n      })}\n      iconAfter={addonAfter}\n    >\n      {children}\n    </TextIconSpacing>\n  );\n}\n"],"names":["TextIconSpacing","listItemAddon","ListItemAddon","props","className","children","addon","addonAfter","type","position","forceAddonWrap","disableCenteredMedia","remaining","isMedia","icon","forceIconWrap","iconAfter"],"mappings":";AACA,SACEA,eAAe,QAEV,6BAA6B;AACpC,SACEC,aAAa,QAER,sBAAsB;AAgB7B;;;;;;;CAOC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,aAAa,KAAK,EAClBC,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBC,cAAc,EACdC,uBAAuB,KAAK,EAC5B,GAAGC,WACJ,GAAGT;IAEJ,MAAMU,UAAUL,SAAS,WAAWA,SAAS;IAE7C,qBACE,KAACR;QACE,GAAGY,SAAS;QACbE,MAAMR;QACNS,eAAeL,kBAAkBG;QACjCT,WAAWH,cAAc;YACvBO;YACAC;YACAL;YACAG;YACAI;QACF;QACAK,WAAWT;kBAEVF;;AAGP"}

package/dist/list/ListItemChildren.d.ts

@@ -0,0 +1,39 @@
+import { type ReactElement } from "react";
+import { type ListItemChildrenProps } from "./types.js";
+/**
+ * **Server Component**
+ *
+ * The `ListItemChildren` component is used to create a styled list item that
+ * can have optional addons to the left or right of the children in the form of
+ * icons, avatars, or media. The `children` can be replaced by the `primaryText`
+ * and `secondaryText` props to create stacked text spanning two or more lines
+ * with the default behavior of using `line-clamp` at three lines.
+ *
+ * Note: This will return a `React.Fragment` of the children and does not wrap
+ * in a DOM node for styling. The parent component should normally have
+ * `display: flex` for the styling to work.
+ *
+ * @example
+ * Custom Component Usage
+ * ```tsx
+ * import { ListItemChildren } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <div style={{ display: "flex" }}>
+ *       <ListItemChildren
+ *         leftAddon={<FavoriteIcon />}
+ *         rightAddon={<img alt="" src="/some-image.png" />}
+ *         rightAddonType="media"
+ *         secondaryText={<span>Some <strong>additional</strong> content.</span>}
+ *       >
+ *         Content
+ *       </ListItemChildren>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function ListItemChildren(props: ListItemChildrenProps): ReactElement;

package/dist/list/ListItemChildren.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ListItemAddon } from "./ListItemAddon.js";
+import { ListItemText } from "./ListItemText.js";
+/**
+ * **Server Component**
+ *
+ * The `ListItemChildren` component is used to create a styled list item that
+ * can have optional addons to the left or right of the children in the form of
+ * icons, avatars, or media. The `children` can be replaced by the `primaryText`
+ * and `secondaryText` props to create stacked text spanning two or more lines
+ * with the default behavior of using `line-clamp` at three lines.
+ *
+ * Note: This will return a `React.Fragment` of the children and does not wrap
+ * in a DOM node for styling. The parent component should normally have
+ * `display: flex` for the styling to work.
+ *
+ * @example
+ * Custom Component Usage
+ * ```tsx
+ * import { ListItemChildren } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <div style={{ display: "flex" }}>
+ *       <ListItemChildren
+ *         leftAddon={<FavoriteIcon />}
+ *         rightAddon={<img alt="" src="/some-image.png" />}
+ *         rightAddonType="media"
+ *         secondaryText={<span>Some <strong>additional</strong> content.</span>}
+ *       >
+ *         Content
+ *       </ListItemChildren>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */ export function ListItemChildren(props) {
+    const { threeLines, textProps, textClassName, secondaryTextClassName, disableTextChildren, primaryText, secondaryText, secondaryTextProps, leftAddon, leftAddonType = "icon", leftAddonPosition = "middle", leftAddonClassName, leftAddonForceWrap, disableLeftAddonCenteredMedia, rightAddon, rightAddonType = "icon", rightAddonPosition = "middle", rightAddonClassName, rightAddonForceWrap, disableRightAddonCenteredMedia, children: propChildren } = props;
+    const stringifiedChildren = typeof propChildren === "number" ? `${propChildren}` : propChildren;
+    let children = stringifiedChildren;
+    if (primaryText || secondaryText || !disableTextChildren) {
+        children = /*#__PURE__*/ _jsx(ListItemText, {
+            ...textProps,
+            className: textClassName,
+            secondaryText: secondaryText,
+            secondaryTextProps: secondaryTextProps,
+            secondaryTextClamped: threeLines,
+            secondaryTextClassName: secondaryTextClassName,
+            children: !disableTextChildren && children || primaryText
+        });
+    }
+    children = /*#__PURE__*/ _jsx(ListItemAddon, {
+        addon: leftAddon,
+        type: leftAddonType,
+        position: leftAddonPosition,
+        className: leftAddonClassName,
+        forceAddonWrap: leftAddonForceWrap,
+        disableCenteredMedia: disableLeftAddonCenteredMedia,
+        children: children
+    });
+    children = /*#__PURE__*/ _jsx(ListItemAddon, {
+        addon: rightAddon,
+        addonAfter: true,
+        type: rightAddonType,
+        position: rightAddonPosition,
+        className: rightAddonClassName,
+        forceAddonWrap: rightAddonForceWrap,
+        disableCenteredMedia: disableRightAddonCenteredMedia,
+        children: children
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            children,
+            primaryText && stringifiedChildren || null
+        ]
+    });
+}
+
+//# sourceMappingURL=ListItemChildren.js.map

package/dist/list/ListItemChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/list/ListItemChildren.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport { ListItemAddon } from \"./ListItemAddon.js\";\nimport { ListItemText } from \"./ListItemText.js\";\nimport { type ListItemChildrenProps } from \"./types.js\";\n\n/**\n * **Server Component**\n *\n * The `ListItemChildren` component is used to create a styled list item that\n * can have optional addons to the left or right of the children in the form of\n * icons, avatars, or media. The `children` can be replaced by the `primaryText`\n * and `secondaryText` props to create stacked text spanning two or more lines\n * with the default behavior of using `line-clamp` at three lines.\n *\n * Note: This will return a `React.Fragment` of the children and does not wrap\n * in a DOM node for styling. The parent component should normally have\n * `display: flex` for the styling to work.\n *\n * @example\n * Custom Component Usage\n * ```tsx\n * import { ListItemChildren } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <div style={{ display: \"flex\" }}>\n *       <ListItemChildren\n *         leftAddon={<FavoriteIcon />}\n *         rightAddon={<img alt=\"\" src=\"/some-image.png\" />}\n *         rightAddonType=\"media\"\n *         secondaryText={<span>Some <strong>additional</strong> content.</span>}\n *       >\n *         Content\n *       </ListItemChildren>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function ListItemChildren(props: ListItemChildrenProps): ReactElement {\n  const {\n    threeLines,\n    textProps,\n    textClassName,\n    secondaryTextClassName,\n    disableTextChildren,\n    primaryText,\n    secondaryText,\n    secondaryTextProps,\n    leftAddon,\n    leftAddonType = \"icon\",\n    leftAddonPosition = \"middle\",\n    leftAddonClassName,\n    leftAddonForceWrap,\n    disableLeftAddonCenteredMedia,\n    rightAddon,\n    rightAddonType = \"icon\",\n    rightAddonPosition = \"middle\",\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableRightAddonCenteredMedia,\n    children: propChildren,\n  } = props;\n\n  const stringifiedChildren =\n    typeof propChildren === \"number\" ? `${propChildren}` : propChildren;\n\n  let children = stringifiedChildren;\n  if (primaryText || secondaryText || !disableTextChildren) {\n    children = (\n      <ListItemText\n        {...textProps}\n        className={textClassName}\n        secondaryText={secondaryText}\n        secondaryTextProps={secondaryTextProps}\n        secondaryTextClamped={threeLines}\n        secondaryTextClassName={secondaryTextClassName}\n      >\n        {(!disableTextChildren && children) || primaryText}\n      </ListItemText>\n    );\n  }\n\n  children = (\n    <ListItemAddon\n      addon={leftAddon}\n      type={leftAddonType}\n      position={leftAddonPosition}\n      className={leftAddonClassName}\n      forceAddonWrap={leftAddonForceWrap}\n      disableCenteredMedia={disableLeftAddonCenteredMedia}\n    >\n      {children}\n    </ListItemAddon>\n  );\n  children = (\n    <ListItemAddon\n      addon={rightAddon}\n      addonAfter\n      type={rightAddonType}\n      position={rightAddonPosition}\n      className={rightAddonClassName}\n      forceAddonWrap={rightAddonForceWrap}\n      disableCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItemAddon>\n  );\n\n  return (\n    <>\n      {children}\n      {(primaryText && stringifiedChildren) || null}\n    </>\n  );\n}\n"],"names":["ListItemAddon","ListItemText","ListItemChildren","props","threeLines","textProps","textClassName","secondaryTextClassName","disableTextChildren","primaryText","secondaryText","secondaryTextProps","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableRightAddonCenteredMedia","children","propChildren","stringifiedChildren","className","secondaryTextClamped","addon","type","position","forceAddonWrap","disableCenteredMedia","addonAfter"],"mappings":";AACA,SAASA,aAAa,QAAQ,qBAAqB;AACnD,SAASC,YAAY,QAAQ,oBAAoB;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,mBAAmB,EACnBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,SAAS,EACTC,gBAAgB,MAAM,EACtBC,oBAAoB,QAAQ,EAC5BC,kBAAkB,EAClBC,kBAAkB,EAClBC,6BAA6B,EAC7BC,UAAU,EACVC,iBAAiB,MAAM,EACvBC,qBAAqB,QAAQ,EAC7BC,mBAAmB,EACnBC,mBAAmB,EACnBC,8BAA8B,EAC9BC,UAAUC,YAAY,EACvB,GAAGtB;IAEJ,MAAMuB,sBACJ,OAAOD,iBAAiB,WAAW,CAAC,EAAEA,aAAa,CAAC,GAAGA;IAEzD,IAAID,WAAWE;IACf,IAAIjB,eAAeC,iBAAiB,CAACF,qBAAqB;QACxDgB,yBACE,KAACvB;YACE,GAAGI,SAAS;YACbsB,WAAWrB;YACXI,eAAeA;YACfC,oBAAoBA;YACpBiB,sBAAsBxB;YACtBG,wBAAwBA;sBAEvB,AAAC,CAACC,uBAAuBgB,YAAaf;;IAG7C;IAEAe,yBACE,KAACxB;QACC6B,OAAOjB;QACPkB,MAAMjB;QACNkB,UAAUjB;QACVa,WAAWZ;QACXiB,gBAAgBhB;QAChBiB,sBAAsBhB;kBAErBO;;IAGLA,yBACE,KAACxB;QACC6B,OAAOX;QACPgB,UAAU;QACVJ,MAAMX;QACNY,UAAUX;QACVO,WAAWN;QACXW,gBAAgBV;QAChBW,sBAAsBV;kBAErBC;;IAIL,qBACE;;YACGA;YACCf,eAAeiB,uBAAwB;;;AAG/C"}