@payfit/unity-components
Version:
64 lines (63 loc) • 2.5 kB
JavaScript
import { CardContext as e } from "./Card.context.js";
import { forwardRef as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
import { uyTv as a } from "@payfit/unity-themes";
import { jsx as o } from "react/jsx-runtime";
import { useId as s } from "react-aria/useId";
//#region src/components/card/Card.tsx
var c = a({
slots: { base: ["uy:p-200 uy:sm:p-300 uy:rounded-lg uy:space-y-200"] },
variants: {
shadow: {
none: { base: "uy:shadow-none" },
raising: { base: "uy:shadow-100" },
flying: { base: "uy:shadow-300" },
100: { base: "uy:shadow-100" },
300: { base: "uy:shadow-300" }
},
bgColor: {
"surface.neutral": { base: "uy:bg-surface-neutral uy:border uy:border-solid uy:border-border-neutral" },
"surface.neutral.low": { base: "uy:bg-surface-neutral-low" },
"surface.neutral.lowest": { base: "uy:bg-surface-neutral-lowest" },
"surface.decorative-teal.lowest": { base: "uy:bg-surface-decorative-teal-lowest" },
"surface.decorative-purple.lowest": { base: "uy:bg-surface-decorative-purple-lowest" },
"surface.decorative-plum.lowest": { base: "uy:bg-surface-decorative-plum-lowest" },
"surface.decorative-orange.lowest": { base: "uy:bg-surface-decorative-orange-lowest" }
}
},
defaultVariants: {
shadow: "none",
bgColor: "surface.neutral"
}
}), l = t(({ shadow: t, bgColor: a, children: l, ...u }, d) => {
let f = s(), p = r(null), [m, h] = i(!1), g = u.id ?? `unity-card-${f}`, _ = `unity-card-${f}__title`, v = u["aria-label"];
n(() => {
let e = p.current;
if (!e) return;
let t = e.querySelector("[data-unity-slot=\"card.title\"]");
h(!!t), process.env.NODE_ENV === "development" && !t && !v && console.warn("Card: A Card must have either a CardTitle child or an aria-label prop for accessibility.");
}, [l, v]);
let y = (a ?? "surface.neutral") === "surface.neutral" && (t ?? "none") !== "none", { base: b } = c({
shadow: y ? t : "none",
bgColor: a
}), x = { titleId: _ }, S = u.asElement ?? "section";
return /* @__PURE__ */ o(e.Provider, {
value: x,
children: /* @__PURE__ */ o(S, {
"data-dd-privacy": "show",
...u,
id: g,
ref: (e) => {
p.current = e, typeof d == "function" ? d(e) : d && (d.current = e);
},
className: b(),
"aria-labelledby": m ? _ : void 0,
"aria-label": m ? void 0 : v,
"data-unity-component": "card",
"data-unity-variant": y ? "shadow" : void 0,
children: l
})
});
});
l.displayName = "Card";
//#endregion
export { l as Card, c as card };