@payfit/unity-components
Version:
50 lines (49 loc) • 1.59 kB
JavaScript
import { CircularIconButton as e } from "../../icon-button/CircularIconButton.js";
import { forwardRef as t } from "react";
import { uyTv as n } from "@payfit/unity-themes";
import { jsx as r, jsxs as i } from "react/jsx-runtime";
import { Heading as a } from "react-aria-components/Heading";
//#region src/components/bottom-sheet/parts/BottomSheetHeader.tsx
var o = n({ slots: {
base: [
"uy:py-200 uy:px-300 uy:w-full",
"uy:flex uy:flex-col uy:shrink-0",
"uy:bg-surface-neutral uy:rounded-tl-200 uy:rounded-tr-200 uy:shadow-raising",
"uy:sticky uy:top-0 uy:z-10"
],
content: ["uy:flex uy:items-center uy:w-full"],
heading: ["uy:typography-h3 uy:text-center uy:text-content-neutral uy:truncate", "uy:flex-1 uy:min-w-0"],
buttonContainer: ["uy:flex-shrink-0 uy:flex-grow-0 uy:w-[28px]"]
} }), s = t(({ children: t, ...n }, s) => {
let { base: c, content: l, heading: u, buttonContainer: d } = o();
return /* @__PURE__ */ r("header", {
ref: s,
className: c(),
...n,
children: /* @__PURE__ */ i("div", {
className: l(),
children: [
/* @__PURE__ */ r("div", { className: d() }),
/* @__PURE__ */ r(a, {
slot: "title",
className: u(),
children: t
}),
/* @__PURE__ */ r("div", {
className: d(),
children: /* @__PURE__ */ r(e, {
asElement: "button",
slot: "close",
icon: "CloseOutlined",
title: "Close",
size: "large",
color: "content.neutral.low"
})
})
]
})
});
});
s.displayName = "BottomSheetHeader";
//#endregion
export { s as BottomSheetHeader, o as bottomSheetHeader };