UNPKG

@payfit/unity-components

Version:

62 lines (61 loc) • 2.07 kB
import { processPaddingProp as e } from "../../utils/spacing.js"; import { NavigationCardContext as t } from "./NavigationCard.context.js"; import { navigationCard as n } from "./NavigationCard.variants.js"; import { forwardRef as r, useMemo as i, useState as a } from "react"; import { mergeProps as o, useFocusVisible as s, useFocusWithin as c, useHover as l } from "react-aria"; import { jsx as u, jsxs as d } from "react/jsx-runtime"; import { Button as f } from "react-aria-components/Button"; import { Link as p } from "react-aria-components/Link"; import { useId as m } from "react-aria/useId"; //#region src/core/components/navigation-card/NavigationCard.tsx var h = r(({ children: r, asElement: h = "a", prefix: g, suffix: _, padding: v = "$300", paddingBlock: y, paddingInline: b, gap: x = "$150", ...S }, C) => { let w = m(), [T, E] = a(!1), D = h === "a" || "href" in S, O = S, k = { id: `unity-navigation-card-${w}`, labelId: S["aria-labelledby"] ?? `unity-navigation-card-label-${w}`, descriptionId: S["aria-describedby"] ?? `unity-navigation-card-description-${w}` }, { hoverProps: A, isHovered: j } = l({ isDisabled: O.isDisabled }), { focusWithinProps: M } = c({ isDisabled: O.isDisabled, onFocusWithinChange: E }), { isFocusVisible: N } = s(), P = { ...k, isHovered: j, isFocused: T && N }, { base: F, prefix: I, body: L, suffix: R } = i(() => n({ ...e(v, y, b), gap: x }), [ v, y, b, x ]), z = D ? p : f; return /* @__PURE__ */ u(t.Provider, { value: P, children: /* @__PURE__ */ d(z, { "data-dd-privacy": "allow", id: k.id, "aria-labelledby": k.labelId, "aria-describedby": k.descriptionId, ...o(O, A, M), ref: C, className: F(), children: [ g && /* @__PURE__ */ u("div", { className: I(), children: g }), /* @__PURE__ */ u("div", { className: L(), children: r }), _ && /* @__PURE__ */ u("div", { className: R(), children: _ }) ] }) }); }); h.displayName = "RawNavigationCard"; //#endregion export { h as RawNavigationCard };