@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.d.ts

@@ -1,9 +1,34 @@
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { BreadcrumbProps as AriaBreadcrumbProps } from 'react-aria-components';
-export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children'> {
-    /** The link of the breadcrumb */
-    href: string;
-    /** The text of the breadcrumb */
-    label: string;
+import { RawBreadcrumbLinkProps } from './RawBreadcrumbLink.js';
+export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children' | 'className' | 'style'> {
+    /**
+     * A single BreadcrumbLink child element
+     */
+    children: ReactElement<ComponentPropsWithoutRef<'a'> & RawBreadcrumbLinkProps>;
 }
+/**
+ * A semantic wrapper component for breadcrumb items that displays navigation hierarchy.
+ * Accepts exactly one BreadcrumbLink as a child to maintain design system consistency.
+ * @param props - Breadcrumb props including the BreadcrumbLink child
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbLink } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Breadcrumb>
+ *       <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
+ *     </Breadcrumb>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Only accepts a single BreadcrumbLink component as a child
+ * - Automatically handles current page styling (disabled state)
+ * - Displays caret icons as separators between breadcrumb items
+ * - On mobile, displays a back arrow for the previous breadcrumb
+ * @see {@link BreadcrumbProps} for all available props
+ */
 declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLLIElement>>;
 export { Breadcrumb };

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.js

@@ -1,33 +1,41 @@
-import { jsxs as i, jsx as r, Fragment as h } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { Breadcrumb as s } from "react-aria-components";
-import { Icon as m } from "../../icon/Icon.js";
-import { Link as u } from "../../link/Link.js";
-import { Tooltip as g } from "../../tooltip/Tooltip.js";
-import { useBreadcrumbsContext as w } from "../Breadcrumbs.context.js";
-import { breadcrumbsVariant as B } from "../Breadcrumbs.variant.js";
-const C = 25, l = ({ children: t, href: e }) => t.length > C ? /* @__PURE__ */ r(g, { title: t, children: /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }) }) : /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }), R = x(
-  (t, e) => {
-    const { wrap: d, isMobile: f, isStaticApi: p } = w(), { breadcrumb: o } = B({ wrap: d });
-    if (!t)
-      return null;
-    const { href: n, label: a, ...c } = t;
-    return f && !p ? /* @__PURE__ */ i(s, { ref: e, ...c, className: o(), children: [
-      /* @__PURE__ */ r(m, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
-      /* @__PURE__ */ r(l, { href: n, children: a })
-    ] }) : /* @__PURE__ */ r(s, { ref: e, ...c, className: o(), children: ({ isCurrent: b }) => b ? /* @__PURE__ */ r("span", { className: "uy:text-nowrap uy:text-content-neutral-lowest", children: a }) : /* @__PURE__ */ i(h, { children: [
-      /* @__PURE__ */ r(l, { href: n, children: a }),
-      /* @__PURE__ */ r(
-        m,
+import { jsxs as i, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { Breadcrumb as n } from "react-aria-components";
+import { Icon as s } from "../../icon/Icon.js";
+import { useBreadcrumbsContext as f } from "../Breadcrumbs.context.js";
+import { breadcrumbsVariant as h } from "../Breadcrumbs.variant.js";
+const x = b(
+  ({ children: r, ...t }, a) => {
+    const { wrap: c, isMobile: m, isStaticApi: u } = f(), { breadcrumb: o } = h({ wrap: c });
+    return m && !u ? /* @__PURE__ */ i(n, { ref: a, ...t, className: o(), children: [
+      /* @__PURE__ */ e(s, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
+      r
+    ] }) : /* @__PURE__ */ e(n, { ref: a, ...t, className: o(), children: ({ isCurrent: d }) => {
+      const l = typeof r.props.children == "string" ? r.props.children : "";
+      return d ? /* @__PURE__ */ e(
+        "span",
         {
-          src: "CaretRightOutlined",
-          "aria-hidden": "true",
-          color: "content.neutral.lowest"
+          className: "uy:text-nowrap uy:text-content-neutral-lowest",
+          role: "link",
+          "aria-disabled": "true",
+          "aria-current": "page",
+          children: l
         }
-      )
-    ] }) });
+      ) : /* @__PURE__ */ i(p, { children: [
+        r,
+        /* @__PURE__ */ e(
+          s,
+          {
+            src: "CaretRightOutlined",
+            "aria-hidden": "true",
+            color: "content.neutral.lowest"
+          }
+        )
+      ] });
+    } });
   }
 );
+x.displayName = "Breadcrumb";
 export {
-  R as Breadcrumb
+  x as Breadcrumb
 };

package/dist/esm/components/breadcrumbs/parts/RawBreadcrumbLink.d.ts

@@ -0,0 +1,37 @@
+import { RawLinkProps } from '../../link/RawLink.js';
+export declare const BREADCRUMB_CONTENT_MAX_LENGTH = 25;
+export type RawBreadcrumbLinkProps = RawLinkProps;
+/**
+ * A styled link component for breadcrumbs that enforces Unity design system styling.
+ * This component automatically truncates long text and displays a tooltip when the content exceeds 25 characters.
+ * @param props - Link props from RawLink {@see {@link RawLinkProps}}
+ * @example
+ * ```tsx
+ * import { RawBreadcrumbLink } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <RawBreadcrumbLink href="/dashboard">
+ *       Dashboard
+ *     </RawBreadcrumbLink>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component enforces breadcrumb-specific styling that cannot be overridden
+ * - Text longer than 25 characters is automatically truncated with a tooltip
+ * - Uses the 'secondary' color variant for breadcrumb links
+ * @see {@link RawBreadcrumbLinkProps} for all available props
+ */
+declare const RawBreadcrumbLink: import('react').ForwardRefExoticComponent<Omit<import('react-aria-components').LinkProps, "className" | "style"> & {
+    href: HTMLAnchorElement["href"];
+    id?: import('react').HTMLAttributes<HTMLAnchorElement>["id"];
+    size?: "default" | "small" | "inherit" | "large" | undefined;
+    variant?: "inline" | "standalone" | undefined;
+    color?: "inherit" | "primary" | "secondary" | undefined;
+    isExternal?: boolean;
+    isCurrent?: Pick<import('react').HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
+    isExact?: boolean;
+    maxCharactersTruncation?: number;
+} & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawBreadcrumbLink };

package/dist/esm/components/breadcrumbs/parts/RawBreadcrumbLink.js

@@ -0,0 +1,36 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { RawLink as e } from "../../link/RawLink.js";
+import { Tooltip as m } from "../../tooltip/Tooltip.js";
+const t = 25, u = i(
+  ({ children: o, href: a, ...n }, s) => {
+    const c = typeof o == "string" ? o : "";
+    return c.length > t ? /* @__PURE__ */ r(m, { title: c, children: /* @__PURE__ */ r(
+      e,
+      {
+        isExact: !0,
+        href: a,
+        color: "secondary",
+        maxCharactersTruncation: t,
+        ref: s,
+        ...n,
+        children: o
+      }
+    ) }) : /* @__PURE__ */ r(
+      e,
+      {
+        isExact: !0,
+        href: a,
+        color: "secondary",
+        maxCharactersTruncation: t,
+        ...n,
+        children: o
+      }
+    );
+  }
+);
+u.displayName = "BreadcrumbLink";
+export {
+  t as BREADCRUMB_CONTENT_MAX_LENGTH,
+  u as RawBreadcrumbLink
+};

package/dist/esm/components/button/Button.js

@@ -10,14 +10,14 @@ const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit",
     variant: e,
     children: n,
     color: o = "primary",
-    size: u = "default",
+    size: c = "default",
     isDisabled: a = !1,
     isLoading: t = !1,
-    prefixIcon: c = void 0,
+    prefixIcon: u = void 0,
     ...i
   }, p) => {
     const f = x(() => {
-      const s = { size: u, isDisabled: a, isLoading: t };
+      const s = { size: c, isDisabled: a, isLoading: t };
       switch (e) {
         case "primary": {
           const r = {
@@ -41,7 +41,7 @@ const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit",
           return l(w(r));
         }
       }
-    }, [e, o, u, a, t]), d = {
+    }, [e, o, c, a, t]), d = {
       ...t && { "data-loading": t }
     };
     return /* @__PURE__ */ m(
@@ -53,8 +53,8 @@ const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit",
         isDisabled: a || t,
         className: f,
         ...d,
-        children: /* @__PURE__ */ y("span", { className: "uy:inline-flex uy:gap-50 uy:leading-[1.75] uy:items-center", children: [
-          I(t, c),
+        children: /* @__PURE__ */ y("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
+          I(t, u),
           n
         ] })
       }

package/dist/esm/components/button/Button.variants.d.ts

@@ -178,6 +178,7 @@ export declare const buttonGhost: import('tailwind-variants').TVReturnType<{
         warning: string[];
         danger: string[];
         neutral: string[];
+        'neutral.lowest': string[];
         inverted: string[];
     };
     isDisabled: {

package/dist/esm/components/button/Button.variants.js

@@ -2,8 +2,8 @@ import { uyTv as e } from "@payfit/unity-themes";
 const t = e({
   base: [
     "uy:group",
-    "uy:cursor-pointer uy:rounded-75 uy:px-200 uy:h-500 uy:inline-flex uy:items-center uy:justify-center uy:whitespace-nowrap uy:typography-action uy:transition-colors",
-    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+    "uy:cursor-pointer uy:rounded-100 uy:sm:rounded-75 uy:px-200 uy:py-125 uy:sm:py-100 uy:sm:h-500 uy:inline-flex uy:items-center uy:justify-center uy:whitespace-nowrap uy:typography-action uy:transition-colors",
+    "uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-offset-2 uy:data-[focus-visible]:outline-utility-focus-ring"
   ],
   variants: {
     isDisabled: {
@@ -30,28 +30,28 @@ const t = e({
     color: {
       primary: [
         "uy:bg-surface-primary-enabled uy:text-content-inverted-enabled",
-        "uy:hover:bg-surface-primary-hover uy:hover:text-content-inverted-hover",
+        'uy:data-[hovered="true"]:bg-surface-primary-hover uy:data-[hovered="true"]:text-content-inverted-hover',
         "uy:active:bg-surface-primary-active uy:active:text-content-inverted-hover",
         "uy:data-[pressed]:bg-surface-primary-pressed uy:data-[pressed]:text-content-inverted-pressed"
       ],
       warning: [
         "uy:bg-surface-warning-enabled uy:text-content-neutral-enabled",
-        "uy:hover:bg-surface-warning-hover uy:hover:text-content-neutral-hover",
+        'uy:data-[hovered="true"]:bg-surface-warning-hover uy:data-[hovered="true"]:text-content-neutral-hover',
         "uy:active:bg-surface-warning-active uy:active:text-content-neutral-active",
         "uy:data-[pressed]:bg-surface-warning-pressed uy:data-[pressed]:text-content-neutral-pressed"
       ],
       danger: [
         "uy:bg-surface-danger-enabled uy:text-content-inverted-enabled",
-        "uy:hover:bg-surface-danger-hover uy:hover:text-content-inverted-hover",
+        'uy:data-[hovered="true"]:bg-surface-danger-hover uy:data-[hovered="true"]:text-content-inverted-hover',
         "uy:active:bg-surface-danger-active uy:active:text-content-inverted",
         "uy:data-[pressed]:bg-surface-danger-pressed uy:data-[pressed]:text-content-inverted"
       ],
       inverted: [
         "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled",
-        "uy:hover:bg-surface-neutral-hover uy:hover:text-content-neutral-hover",
+        'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
         "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
         "uy:data-[pressed]:bg-surface-neutral-active uy:data-[pressed]:text-content-neutral-pressed",
-        "uy:focus-visible:outline-utility-inverted-focus-ring uy:focus-visible:text-content-neutral-focus uy:focus-visible:bg-surface-neutral-focus"
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:text-content-neutral-focus uy:data-[focus-visible]:bg-surface-neutral-focus"
       ]
     },
     isDisabled: {
@@ -70,14 +70,14 @@ const t = e({
     color: {
       primary: [
         "uy:bg-transparent uy:text-content-neutral-enabled uy:border-border-neutral-high-enabled",
-        "uy:hover:text-content-neutral-hover uy:hover:border-border-neutral-high-hover",
+        'uy:data-[hovered="true"]:text-content-neutral-hover uy:data-[hovered="true"]:border-border-neutral-high-hover',
         "uy:active:text-content-neutral-active uy:active:border-border-neutral-high-pressed",
         "uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:border-border-neutral-high-pressed",
-        "uy:focus-visible:border-border-neutral-high-focus uy:focus-visible:text-content-neutral-focus"
+        "uy:data-[focus-visible]:border-border-neutral-high-focus uy:data-[focus-visible]:text-content-neutral-focus"
       ],
       inverted: [
         "uy:bg-transparent uy:text-content-inverted uy:border-border-inverted-enabled",
-        "uy:focus-visible:outline-utility-inverted-focus-ring"
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring"
       ]
     },
     isDisabled: {
@@ -97,35 +97,42 @@ const t = e({
         "uy:enabled:hover:bg-surface-primary-lowest-hover uy:enabled:hover:text-content-primary-hover",
         "uy:enabled:active:bg-surface-primary-lowest-active uy:enabled:active:text-content-primary-active",
         "uy:enabled:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:enabled:data-[pressed=true]:text-content-primary-pressed",
-        "uy:focus-visible:bg-transparent"
+        "uy:data-[focus-visible]:bg-transparent"
       ],
       warning: [
         "uy:bg-transparent uy:text-content-warning-enabled",
         "uy:enabled:hover:bg-surface-warning-lowest-hover uy:enabled:hover:text-content-warning-hover",
         "uy:enabled:active:bg-surface-warning-lowest-active uy:enabled:active:text-content-warning-active",
         "uy:enabled:data-[pressed=true]:bg-surface-warning-lowest-pressed uy:enabled:data-[pressed=true]:text-content-warning-pressed",
-        "uy:focus-visible:bg-transparent"
+        "uy:data-[focus-visible]:bg-transparent"
       ],
       danger: [
         "uy:bg-transparent uy:text-content-danger-enabled",
         "uy:enabled:hover:bg-surface-danger-lowest-hover uy:enabled:hover:text-content-danger-hover",
         "uy:enabled:active:bg-surface-danger-lowest-active uy:enabled:active:text-content-danger-active",
         "uy:enabled:data-[pressed=true]:bg-surface-danger-lowest-pressed uy:enabled:data-[pressed=true]:text-content-danger-pressed",
-        "uy:focus-visible:bg-transparent"
+        "uy:data-[focus-visible]:bg-transparent"
       ],
       neutral: [
         "uy:bg-transparent uy:text-content-neutral-enabled",
         "uy:enabled:hover:bg-surface-neutral-hover uy:enabled:hover:text-content-neutral-hover",
         "uy:enabled:active:bg-surface-neutral-active uy:enabled:active:text-content-neutral-active",
         "uy:enabled:data-[pressed=true]:bg-surface-neutral-pressed uy:enabled:data-[pressed=true]:text-content-neutral-pressed",
-        "uy:focus-visible:bg-transparent"
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      "neutral.lowest": [
+        "uy:bg-transparent uy:text-content-neutral-enabled",
+        "uy:enabled:hover:bg-surface-neutral-lowest-hover uy:enabled:hover:text-content-neutral-hover",
+        "uy:enabled:active:bg-surface-neutral-lowest-active uy:enabled:active:text-content-neutral-active",
+        "uy:enabled:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:enabled:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
       ],
       inverted: [
         "uy:bg-transparent uy:text-content-inverted-enabled",
         "uy:enabled:hover:bg-surface-inverted-hover uy:enabled:hover:text-content-inverted-hover",
         "uy:enabled:active:bg-surface-inverted-active uy:enabled:active:text-content-inverted-active",
         "uy:enabled:data-[pressed=true]:bg-surface-inverted-pressed uy:enabled:data-[pressed=true]:text-content-inverted-pressed",
-        "uy:focus-visible:outline-utility-inverted-focus-ring uy:focus-visible:bg-transparent"
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:bg-transparent"
       ]
     },
     isDisabled: {

package/dist/esm/components/card/Card.context.d.ts

@@ -0,0 +1,5 @@
+export interface CardContextValue {
+    titleId: string;
+}
+export declare const CardContext: import('react').Context<CardContextValue | null>;
+export declare function useCardContext(): CardContextValue;

package/dist/esm/components/card/Card.context.js

@@ -0,0 +1,14 @@
+import { createContext as o, useContext as n } from "react";
+const e = o(null);
+function c() {
+  const t = n(e);
+  if (!t)
+    throw new Error(
+      "Card compound components must be used within a Card component"
+    );
+  return t;
+}
+export {
+  e as CardContext,
+  c as useCardContext
+};

package/dist/esm/components/card/Card.d.ts

@@ -0,0 +1,210 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ComponentProps, PropsWithChildren } from 'react';
+export declare const card: import('tailwind-variants').TVReturnType<{
+    shadow: {
+        none: {
+            base: string;
+        };
+        raising: {
+            base: string;
+        };
+        flying: {
+            base: string;
+        };
+    };
+    bgColor: {
+        'surface.neutral': {
+            base: string;
+        };
+        'surface.neutral.low': {
+            base: string;
+        };
+        'surface.neutral.lowest': {
+            base: string;
+        };
+        'surface.decorative-teal.lowest': {
+            base: string;
+        };
+        'surface.decorative-purple.lowest': {
+            base: string;
+        };
+        'surface.decorative-plum.lowest': {
+            base: string;
+        };
+        'surface.decorative-orange.lowest': {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    shadow: {
+        none: {
+            base: string;
+        };
+        raising: {
+            base: string;
+        };
+        flying: {
+            base: string;
+        };
+    };
+    bgColor: {
+        'surface.neutral': {
+            base: string;
+        };
+        'surface.neutral.low': {
+            base: string;
+        };
+        'surface.neutral.lowest': {
+            base: string;
+        };
+        'surface.decorative-teal.lowest': {
+            base: string;
+        };
+        'surface.decorative-purple.lowest': {
+            base: string;
+        };
+        'surface.decorative-plum.lowest': {
+            base: string;
+        };
+        'surface.decorative-orange.lowest': {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import('tailwind-variants').TVReturnType<{
+    shadow: {
+        none: {
+            base: string;
+        };
+        raising: {
+            base: string;
+        };
+        flying: {
+            base: string;
+        };
+    };
+    bgColor: {
+        'surface.neutral': {
+            base: string;
+        };
+        'surface.neutral.low': {
+            base: string;
+        };
+        'surface.neutral.lowest': {
+            base: string;
+        };
+        'surface.decorative-teal.lowest': {
+            base: string;
+        };
+        'surface.decorative-purple.lowest': {
+            base: string;
+        };
+        'surface.decorative-plum.lowest': {
+            base: string;
+        };
+        'surface.decorative-orange.lowest': {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface CardProps extends PropsWithChildren<VariantProps<typeof card>>, ComponentProps<'section'> {
+    /**
+     * The background color of the card.
+     * @default 'surface.neutral'
+     */
+    bgColor?: VariantProps<typeof card>['bgColor'];
+    /**
+     * The shadow of the card.
+     * @default 'none'
+     */
+    shadow?: VariantProps<typeof card>['shadow'];
+    /**
+     * The aria-label of the card. This is required if the Card does not contain a CardTitle.
+     * @example
+     * ```tsx
+     * <Card aria-label="User statistics">
+     *   <StatWidget />
+     * </Card>
+     * ```
+     */
+    'aria-label'?: string;
+    /**
+     * The element type of the card.
+     * @default 'section'
+     */
+    asElement?: 'section' | 'article';
+}
+/**
+ * The `Card` component is a container that groups related content and actions. It provides consistent
+ * styling, spacing, and visual hierarchy for content sections within your application.
+ *
+ * Use Card when you need to organize related information, display content in distinct sections,
+ * or create a visual grouping for UI elements.
+ *
+ * The Card uses a compound component pattern with `CardTitle` and optionally `CardContent`:
+ * - `CardTitle`: Provides the heading for the card (required for accessibility, or use aria-label)
+ * - `CardContent`: Optional wrapper for card body content
+ *
+ * Cards must be properly labeled for accessibility. You can either:
+ * - Include a `CardTitle` component as a child, OR
+ * - Provide an `aria-label` prop if the card doesn't need a visible title
+ * @param {CardProps} props - The props for the `Card` component
+ * @example
+ * ```tsx
+ * import { Card, CardTitle, CardContent } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card>
+ *       <CardTitle>Employee Information</CardTitle>
+ *       <CardContent>
+ *         <p>Content goes here</p>
+ *       </CardContent>
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Card with title after an image
+ * import { Card, CardTitle } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card>
+ *       <img src="banner.jpg" alt="Banner" />
+ *       <CardTitle>Featured Content</CardTitle>
+ *       <p>Content goes here</p>
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Card without visible title (using aria-label)
+ * import { Card } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card aria-label="User statistics">
+ *       <StatWidget />
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @see {@link CardProps} for all available props
+ * @see {@link CardTitle} for title configuration options
+ * @see {@link CardContent} for content wrapper
+ * @remarks
+ * - Cards require either a CardTitle child or an aria-label for accessibility
+ * - Use shadow variants only with the default 'surface.neutral' background
+ * - CardTitle can be placed anywhere within the Card children
+ * - CardContent is optional but recommended for better structure
+ */
+declare const Card: import('react').ForwardRefExoticComponent<Omit<CardProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export { Card };

package/dist/esm/components/card/Card.js

@@ -0,0 +1,93 @@
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as h, useRef as C, useState as E, useLayoutEffect as _ } from "react";
+import { uyTv as S } from "@payfit/unity-themes";
+import { useId as x } from "react-aria";
+import { CardContext as N } from "./Card.context.js";
+var T = {};
+const V = S({
+  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-raising"
+      },
+      flying: {
+        base: "uy:shadow-flying"
+      }
+    },
+    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"
+  }
+}), I = h(
+  ({ shadow: o, bgColor: s, children: l, ...a }, r) => {
+    const n = x(), u = C(null), [c, b] = E(!1), v = a.id ?? `unity-card-${n}`, d = `unity-card-${n}__title`, t = a["aria-label"];
+    _(() => {
+      const e = u.current;
+      if (!e) return;
+      const f = e.querySelector(
+        '[data-unity-slot="card.title"]'
+      );
+      b(!!f), T.NODE_ENV === "development" && !f && !t && console.warn(
+        "Card: A Card must have either a CardTitle child or an aria-label prop for accessibility."
+      );
+    }, [l, t]);
+    const i = (s ?? "surface.neutral") === "surface.neutral" && (o ?? "none") !== "none", w = i ? o : "none", { base: m } = V({
+      shadow: w,
+      bgColor: s
+    }), g = {
+      titleId: d
+    }, p = a.asElement ?? "section";
+    return /* @__PURE__ */ y(N.Provider, { value: g, children: /* @__PURE__ */ y(
+      p,
+      {
+        "data-dd-privacy": "show",
+        ...a,
+        id: v,
+        ref: (e) => {
+          u.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+        },
+        className: m(),
+        "aria-labelledby": c ? d : void 0,
+        "aria-label": c ? void 0 : t,
+        "data-unity-component": "card",
+        "data-unity-variant": i ? "shadow" : void 0,
+        children: l
+      }
+    ) });
+  }
+);
+I.displayName = "Card";
+export {
+  I as Card,
+  V as card
+};