@payfit/unity-components
Version:
65 lines (64 loc) • 2.55 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:flex uy:flex-col uy:gap-200 uy:p-200 uy:sm:p-300 uy:rounded-lg"] },
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, className: u, ...d }, f) => {
let p = s(), m = r(null), [h, g] = i(!1), _ = d.id ?? `unity-card-${p}`, v = `unity-card-${p}__title`, y = d["aria-label"];
n(() => {
let e = m.current;
if (!e) return;
let t = e.querySelector("[data-unity-slot=\"card.title\"]");
g(!!t), process.env.NODE_ENV === "development" && !t && !y && console.warn("Card: A Card must have either a CardTitle child or an aria-label prop for accessibility.");
}, [l, y]);
let b = (a ?? "surface.neutral") === "surface.neutral" && (t ?? "none") !== "none", { base: x } = c({
className: u,
shadow: b ? t : "none",
bgColor: a
}), S = { titleId: v }, C = d.asElement ?? "section";
return /* @__PURE__ */ o(e.Provider, {
value: S,
children: /* @__PURE__ */ o(C, {
"data-dd-privacy": "show",
...d,
id: _,
ref: (e) => {
m.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
},
className: x(),
"aria-labelledby": h ? v : void 0,
"aria-label": h ? void 0 : y,
"data-unity-component": "card",
"data-unity-variant": b ? "shadow" : void 0,
children: l
})
});
});
l.displayName = "Card";
//#endregion
export { l as Card, c as card };