UNPKG

@payfit/unity-components

Version:

48 lines (47 loc) 1.66 kB
import { forwardRef as e } from "react"; import { uyMerge as t, uyTv as n } from "@payfit/unity-themes"; import { jsx as r } from "react/jsx-runtime"; //#region src/components/skeleton/Skeleton.tsx var i = n({ base: "uy:bg-surface-neutral-disabled uy:animate-pulse", variants: { variant: { rectangular: "uy:rounded-50", circular: "uy:rounded-circle", text: "uy:inline-block uy:h-[1em] uy:my-[calc((1lh-1em)/2)] uy:rounded-50" }, textVariant: { displayHeading: "uy:typography-display-heading", h1: "uy:typography-h1", h2: "uy:typography-h2", h3: "uy:typography-h3", h4: "uy:typography-h4", overline: "uy:typography-overline", subtitle: "uy:typography-subtitle", displayTitle: "uy:typography-display-title", displayBody: "uy:typography-display-body", body: "uy:typography-body", bodyStrong: "uy:typography-body-strong", bodySmall: "uy:typography-body-small", bodySmallStrong: "uy:typography-body-small-strong", bodyLarge: "uy:typography-body-large", bodyLargeStrong: "uy:typography-body-large-strong", action: "uy:typography-action", actionLarge: "uy:typography-body-large", actionSmall: "uy:typography-body-small", actionInfo: "uy:typography-action uy:underline uy:decoration-dotted uy:decoration-[10%] uy:underline-offset-[25%]" } }, defaultVariants: { variant: "rectangular" } }), a = e(({ variant: e = "rectangular", textVariant: n, className: a, "aria-hidden": o = !0, ...s }, c) => /* @__PURE__ */ r("div", { ref: c, "aria-hidden": o, className: t(a, i({ variant: e, textVariant: n })), ...s })); a.displayName = "Skeleton"; //#endregion export { a as Skeleton };