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

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

import { jsxs as i, jsx as t } from "react/jsx-runtime";
import { accordion_exports as s } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion.js";
import { SerendieSymbolChevronDown as p } from "@serendie/symbols";
import { sva as l } from "../../styled-system/css/sva.js";
const n = l({
  slots: ["item", "title", "itemIndicator", "icon", "description"],
  base: {
    item: {
      display: "flex",
      width: "100%",
      gap: "sd.system.dimension.spacing.extraSmall",
      paddingX: "sd.system.dimension.spacing.medium",
      paddingY: "sd.system.dimension.spacing.small",
      _hover: {
        bg: "color-mix(in srgb, {colors.sd.system.color.component.surface}, {colors.sd.system.color.interaction.hoveredVariant})"
      },
      cursor: "pointer"
    },
    title: {
      flex: 1,
      textAlign: "left",
      color: "sd.system.color.component.onSurface",
      textStyle: "sd.system.typography.body.medium_compact",
      _expanded: {
        textStyle: "sd.system.typography.body.medium_expanded"
      }
    },
    itemIndicator: {
      flex: "0 0 24px",
      transition: "transform 0.2s",
      _open: {
        transform: "rotate(180deg)"
      }
    },
    icon: {
      color: "sd.system.color.component.onSurface"
    },
    description: {
      paddingX: "sd.system.dimension.spacing.medium",
      paddingTop: "sd.system.dimension.spacing.small",
      paddingBottom: "sd.system.dimension.spacing.medium",
      textStyle: "sd.system.typography.body.medium_compact",
      _expanded: {
        textStyle: "sd.system.typography.body.medium_expanded"
      }
    }
  },
  variants: {
    isLeftIcon: {
      true: {
        item: {
          flexDirection: "row-reverse"
        },
        itemIndicator: {
          transform: "rotate(-90deg)",
          _open: {
            transform: "rotate(0deg)"
          }
        }
      }
    }
  }
}), u = ({
  title: o,
  value: r,
  description: m,
  ...d
}) => {
  const [a, c] = n.splitVariantProps(d), e = n(a);
  return /* @__PURE__ */ i(s.Item, { value: o || r, ...c, children: [
    /* @__PURE__ */ i(s.ItemTrigger, { className: e.item, children: [
      /* @__PURE__ */ t("span", { className: e.title, children: o }),
      /* @__PURE__ */ t(s.ItemIndicator, { className: e.itemIndicator, children: /* @__PURE__ */ t(p, { className: e.icon }) })
    ] }),
    /* @__PURE__ */ t(s.ItemContent, { className: e.description, children: m })
  ] }, o);
};
export {
  u as Accordion
};