@serendie/ui/dist/components/DashboardWidget/DashboardWidget.js

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

import { jsxs as l, jsx as a } from "react/jsx-runtime";
import { SerendieSymbolChevronRight as c } from "@serendie/symbols";
import { cx as y } from "../../styled-system/css/cx.js";
import { sva as u } from "../../styled-system/css/sva.js";
const g = u({
  slots: [
    "root",
    "labelContainer",
    "label",
    "labelTitle",
    "labelText",
    "area",
    "areaContainer",
    "areaValue",
    "areaValueLabel",
    "areaValueContainer",
    "areaValueNumber",
    "areaValueNumberUnit"
  ],
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "sd.system.dimension.spacing.medium",
      py: "sd.system.dimension.spacing.small",
      px: "sd.system.dimension.spacing.medium",
      width: "100%",
      bgColor: "sd.system.color.component.surface",
      borderRadius: "sd.system.dimension.radius.medium"
    },
    labelContainer: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      width: "100%",
      cursor: "pointer"
    },
    label: {
      display: "flex",
      alignItems: "center",
      gap: "sd.system.dimension.spacing.medium",
      width: "100%"
    },
    labelTitle: {
      textStyle: "sd.system.typography.label.extraLarge_compact",
      _expanded: {
        textStyle: "sd.system.typography.label.extraLarge_expanded"
      }
    },
    labelText: {
      textStyle: "sd.system.typography.label.small_compact",
      color: "sd.system.color.component.onSurfaceVariant",
      _expanded: {
        textStyle: "sd.system.typography.label.small_expanded"
      }
    },
    area: {
      display: "grid",
      gridTemplateColumns: "1fr",
      gap: "sd.system.dimension.spacing.medium"
    },
    areaContainer: {},
    areaValue: {
      display: "flex",
      flexDirection: "column",
      alignSelf: "flex-end"
    },
    areaValueLabel: {
      color: "sd.system.color.component.onSurfaceVariant",
      textStyle: "sd.system.typography.label.small_compact",
      _expanded: {
        textStyle: "sd.system.typography.label.small_expanded"
      }
    },
    areaValueContainer: {
      display: "flex",
      alignItems: "baseline",
      gap: "sd.system.dimension.spacing.twoExtraSmall"
    },
    areaValueNumber: {
      textStyle: "sd.system.typography.title.large_compact",
      _expanded: {
        textStyle: "sd.system.typography.title.large_expanded"
      }
    },
    areaValueNumberUnit: {
      color: "sd.system.color.component.onSurfaceVariant",
      textStyle: "sd.system.typography.label.small_compact",
      _expanded: {
        textStyle: "sd.system.typography.label.small_expanded"
      }
    }
  },
  variants: {
    values: {
      noValue: {
        area: {
          gridTemplateColumns: "1fr"
        }
      },
      singleValue: {
        area: {
          gridTemplateColumns: "auto 1fr",
          gap: "sd.system.dimension.spacing.twoExtraLarge"
        }
      },
      doubleValue: {
        areaContainer: {
          gridColumn: "span 2",
          order: -1
        },
        area: {
          gridTemplateColumns: "1fr 1fr"
        }
      }
    }
  },
  defaultVariants: {
    values: "singleValue"
  }
}), f = ({
  values: s,
  children: n,
  linkTo: i,
  className: o,
  ...d
}) => {
  const e = g({
    values: s === void 0 ? "noValue" : s.length === 1 ? "singleValue" : "doubleValue"
  }), m = ({ label: t, value: r, unit: p }) => /* @__PURE__ */ l("div", { className: e.areaValue, children: [
    /* @__PURE__ */ a("h3", { className: e.areaValueLabel, children: t }),
    /* @__PURE__ */ l("div", { className: e.areaValueContainer, children: [
      /* @__PURE__ */ a("p", { className: e.areaValueNumber, children: r }),
      /* @__PURE__ */ a("p", { className: e.areaValueNumberUnit, children: p })
    ] })
  ] });
  return /* @__PURE__ */ l("div", { className: y(e.root, o), ...d, children: [
    /* @__PURE__ */ l("a", { href: i, className: e.labelContainer, children: [
      /* @__PURE__ */ l("div", { className: e.label, children: [
        /* @__PURE__ */ a("h2", { className: e.labelTitle, children: "title" }),
        /* @__PURE__ */ a("p", { className: e.labelText, children: "icon" })
      ] }),
      /* @__PURE__ */ a(c, {})
    ] }),
    /* @__PURE__ */ l("div", { className: e.area, children: [
      s == null ? void 0 : s.map((t, r) => /* @__PURE__ */ a(m, { ...t }, r)),
      /* @__PURE__ */ a("div", { className: e.areaContainer, children: n })
    ] })
  ] });
};
export {
  f as DashboardWidget
};