@payfit/unity-components
Version:
41 lines (40 loc) • 1.57 kB
JavaScript
import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
import { Text as t } from "../../text/Text.js";
import { InlineFieldGroupContext as n } from "../InlineFieldGroup.context.js";
import { InlineFieldGroupActions as r } from "./InlineFieldGroupActions.js";
import { useContext as i } from "react";
import { uyTv as a } from "@payfit/unity-themes";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
//#region src/components/inline-field-group/parts/InlineFieldGroupHeader.tsx
var c = a({ slots: {
base: "uy:flex uy:items-center uy:justify-between uy:w-full uy:gap-300",
titleContainer: "uy:flex uy:flex-col uy:gap-100 uy:flex-1"
} });
function l({ title: a, subtitle: l, customActions: u }) {
let d = i(n), f = e(), p = f !== "xs" && f !== "sm";
if (!d) throw Error("InlineFieldGroupHeader must be used within InlineFieldGroup");
let { headerId: m } = d, { base: h, titleContainer: g } = c();
return /* @__PURE__ */ s("header", {
className: h(),
children: [/* @__PURE__ */ s("hgroup", {
className: g(),
children: [/* @__PURE__ */ o(t, {
id: m,
variant: "h3",
color: "content.neutral",
children: a
}), l && /* @__PURE__ */ o(t, {
variant: "subtitle",
color: "content.neutral",
children: l
})]
}), /* @__PURE__ */ s("div", {
className: "uy:flex uy:gap-100 uy:items-center",
role: "group",
children: [u, p && /* @__PURE__ */ o(r, { orientation: "horizontal" })]
})]
});
}
l.displayName = "InlineFieldGroupHeader";
//#endregion
export { l as InlineFieldGroupHeader };