@serendie/ui/dist/components/List/ListItem.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as s, jsx as t } from "react/jsx-runtime";
import { NotificationBadge as b } from "../NotificationBadge/NotificationBadge.js";
import { cx as o } from "../../styled-system/css/cx.js";
import { css as c } from "../../styled-system/css/css.js";
import { sva as v } from "../../styled-system/css/sva.js";
const p = v({
  slots: [
    "root",
    "wrapper",
    "textGroup",
    "title",
    "description",
    "rightIcon",
    "leftIcon",
    "badge"
  ],
  base: {
    root: {
      position: "relative"
    },
    wrapper: {
      minH: 48,
      display: "flex",
      alignItems: "center",
      paddingX: "sd.system.dimension.spacing.medium",
      paddingY: "sd.system.dimension.spacing.extraSmall",
      gap: "sd.system.dimension.spacing.small",
      cursor: "pointer",
      _hover: {
        background: "color-mix(in srgb, {colors.sd.system.color.interaction.hoveredVariant}, {colors.sd.system.color.component.surface});"
      },
      _focusVisible: {
        outline: "1px solid",
        outlineColor: "sd.system.color.component.outline"
      },
      _selected: {
        background: "sd.system.color.interaction.selectedSurface",
        _hover: {
          background: "sd.system.color.interaction.selectedSurface"
        }
      },
      _disabled: {
        opacity: 0.3,
        cursor: "not-allowed",
        _selected: {
          background: "transparent"
        }
      }
    },
    textGroup: {
      display: "flex",
      flexDirection: "column",
      flexGrow: 1
    },
    title: {
      py: "sd.system.dimension.spacing.twoExtraSmall",
      textStyle: "sd.system.typography.label.extraLarge_compact",
      color: "sd.system.color.component.onSurface",
      _expanded: {
        textStyle: "sd.system.typography.label.extraLarge_expanded"
      },
      _disabled: {
        opacity: 0.3
      }
    },
    description: {
      display: "flex",
      flexDirection: "column",
      textStyle: "sd.system.typography.body.extraSmall_compact",
      color: "sd.system.color.component.onSurfaceVariant",
      _expanded: {
        textStyle: "sd.system.typography.body.extraSmall_expanded"
      },
      _disabled: {
        opacity: 0.3
      }
    },
    leftIcon: {
      flexShrink: 0,
      "& svg": {
        display: "block",
        maxHeight: "100%",
        maxWidth: "100%",
        width: "24px",
        height: "24px"
      },
      _disabled: {
        opacity: 0.3
      }
    },
    rightIcon: {
      flexShrink: 0,
      "& svg": {
        width: "24px",
        height: "24px"
      },
      _disabled: {
        opacity: 0.3
      }
    },
    badge: {
      position: "absolute",
      right: "sd.system.dimension.spacing.medium",
      top: "sd.system.dimension.spacing.extraSmall",
      height: 24,
      minW: 24
    }
  },
  variants: {
    isLargeLeftIcon: {
      true: {
        leftIcon: {
          "& svg": {
            width: "40px",
            height: "40px"
          }
        }
      },
      false: {}
    },
    size: {
      small: {
        wrapper: {
          minH: 38
        }
      }
    }
  }
}), L = ({
  leftIcon: a,
  rightIcon: r,
  title: m,
  description: i,
  badge: l,
  children: d,
  disabled: x,
  selected: y,
  focusVisible: g,
  className: h,
  ...n
}) => {
  const [u, f] = p.splitVariantProps(n), e = p(u);
  return /* @__PURE__ */ s("li", { className: o(e.root, h), ...f, children: [
    /* @__PURE__ */ s(
      "div",
      {
        tabIndex: 1,
        className: o(
          e.wrapper,
          i && c({ alignItems: "flex-start" })
        ),
        "data-disabled": x ? !0 : void 0,
        "data-selected": y ? !0 : void 0,
        "data-focus-visible": g ? !0 : void 0,
        children: [
          a && /* @__PURE__ */ t(
            "div",
            {
              className: e.leftIcon,
              style: n.isLargeLeftIcon ? { padding: "0", width: "40px", height: "40px" } : { padding: "0", width: "24px", height: "24px" },
              children: a
            }
          ),
          /* @__PURE__ */ s(
            "div",
            {
              className: o(
                e.textGroup,
                (!!i || !!d) && c({ alignItems: "flex-start" })
              ),
              children: [
                /* @__PURE__ */ t("span", { className: e.title, children: m }),
                /* @__PURE__ */ s("div", { className: e.description, children: [
                  i,
                  d
                ] })
              ]
            }
          ),
          r && /* @__PURE__ */ t("div", { className: e.rightIcon, children: r })
        ]
      }
    ),
    l && /* @__PURE__ */ t("div", { className: e.badge, children: /* @__PURE__ */ t(b, { count: l, variant: "secondary" }) })
  ] });
};
export {
  L as ListItem,
  p as ListItemStyle
};