@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,99 @@
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as g, 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/useId";
+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-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"
+  }
+}), I = g(
+  ({ shadow: o, bgColor: s, children: l, ...a }, r) => {
+    const n = x(), u = C(null), [d, b] = E(!1), w = a.id ?? `unity-card-${n}`, c = `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", v = i ? o : "none", { base: m } = V({
+      shadow: v,
+      bgColor: s
+    }), h = {
+      titleId: c
+    }, p = a.asElement ?? "section";
+    return /* @__PURE__ */ y(N.Provider, { value: h, children: /* @__PURE__ */ y(
+      p,
+      {
+        "data-dd-privacy": "show",
+        ...a,
+        id: w,
+        ref: (e) => {
+          u.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+        },
+        className: m(),
+        "aria-labelledby": d ? c : void 0,
+        "aria-label": d ? 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
+};

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

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/components/card/parts/CardContent.d.ts

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from 'react';
+export interface CardContentProps extends PropsWithChildren {
+    /** Additional CSS classes to apply to the content container */
+    className?: string;
+}
+/**
+ * The `CardContent` component provides a container for the main content within a Card.
+ * It ensures consistent spacing and layout for card content.
+ *
+ * Use CardContent to wrap the main body of your card content. This is optional but provides
+ * better semantic structure and consistent styling.
+ * @param {CardContentProps} props - The props for the `CardContent` component
+ * @example
+ * ```tsx
+ * import { Card, CardTitle, CardContent } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card>
+ *       <CardTitle>My Card</CardTitle>
+ *       <CardContent>
+ *         <p>This is the main content of the card.</p>
+ *       </CardContent>
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @see {@link CardContentProps} for all available props
+ * @remarks
+ * - CardContent is optional but recommended for better structure
+ * - You can also place content directly in the Card without CardContent
+ */
+declare function CardContent({ children, className }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CardContent {
+    var displayName: string;
+}
+export { CardContent };

package/dist/esm/components/card/parts/CardContent.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+function r({ children: t, className: n }) {
+  return /* @__PURE__ */ o("div", { className: n, "data-unity-slot": "card.content", children: t });
+}
+r.displayName = "CardContent";
+export {
+  r as CardContent
+};

package/dist/esm/components/card/parts/CardTitle.d.ts

@@ -0,0 +1,55 @@
+import { PropsWithChildren } from 'react';
+export interface CardTitleProps extends PropsWithChildren {
+    /** The heading level for the title. Defaults to 3 */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Whether to visually hide the title (still accessible to screen readers) */
+    isHidden?: boolean;
+}
+/**
+ * The `CardTitle` component renders the title for a Card. It provides semantic heading structure
+ * and ensures proper accessibility labeling for the Card container.
+ *
+ * Use CardTitle when you need to give your Card a visible or screen-reader-accessible title.
+ * You can configure the heading level, apply custom styles, or hide it visually while maintaining
+ * accessibility.
+ * @param {CardTitleProps} props - The props for the `CardTitle` component
+ * @example
+ * ```tsx
+ * import { Card, CardTitle } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Card>
+ *       <CardTitle>My Card Title</CardTitle>
+ *       <p>Card content goes here</p>
+ *     </Card>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Custom heading level
+ * <Card>
+ *   <CardTitle level={2}>Important Section</CardTitle>
+ *   <p>Content...</p>
+ * </Card>
+ * ```
+ * @example
+ * ```tsx
+ * // Hidden title for accessibility
+ * <Card>
+ *   <CardTitle isHidden>Screen reader only title</CardTitle>
+ *   <p>Visual content that describes itself</p>
+ * </Card>
+ * ```
+ * @see {@link CardTitleProps} for all available props
+ * @remarks
+ * - The title is required for accessibility unless the Card has an `aria-label`
+ * - Use `isHidden` to hide the title visually while keeping it accessible
+ * - The default heading level is 3, but you can configure it based on your page structure
+ */
+declare function CardTitle({ children, level, isHidden }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CardTitle {
+    var displayName: string;
+}
+export { CardTitle };

package/dist/esm/components/card/parts/CardTitle.js

@@ -0,0 +1,33 @@
+import { jsx as s } from "react/jsx-runtime";
+import { uyTv as n } from "@payfit/unity-themes";
+import { Heading as o } from "react-aria-components/Heading";
+import { useCardContext as d } from "../Card.context.js";
+const l = n({
+  base: ["uy:typography-h3 uy:text-content-neutral uy:leading-none"],
+  variants: {
+    isHidden: {
+      true: "uy:sr-only",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    isHidden: !1
+  }
+});
+function u({ children: t, level: e = 3, isHidden: a = !1 }) {
+  const { titleId: r } = d(), i = l({ isHidden: a });
+  return /* @__PURE__ */ s(
+    o,
+    {
+      level: e,
+      id: r,
+      className: i,
+      "data-unity-slot": "card.title",
+      children: t
+    }
+  );
+}
+u.displayName = "CardTitle";
+export {
+  u as CardTitle
+};

package/dist/esm/components/carousel/Carousel.context.d.ts

@@ -0,0 +1,60 @@
+import { EmblaCarouselApi, EmblaCarouselRef } from './types.js';
+import * as React from 'react';
+/**
+ * Context type for the Carousel component.
+ * Provides shared state and methods to all carousel sub-components.
+ */
+type CarouselContextProps = {
+    /** Ref to the Embla carousel viewport element */
+    carouselRef: EmblaCarouselRef;
+    /** Embla Carousel API instance */
+    api: EmblaCarouselApi;
+    /** Navigate to the previous slide or page */
+    goToPrev: () => void;
+    /** Navigate to the next slide or page */
+    goToNext: () => void;
+    /** Navigate to a specific snap index */
+    goTo: (index: number) => void;
+    /** Check if navigation to next is possible */
+    canGoToNext: () => boolean | undefined;
+    /** Check if navigation to previous is possible */
+    canGoToPrev: () => boolean | undefined;
+    /** Set of slide indexes currently visible in the viewport */
+    visibleSlideIndexes: ReadonlySet<number>;
+    /** Current snap/page index (0-based) */
+    selectedSnap: number;
+    /** Total number of snaps/pages */
+    snapCount: number;
+    /** Generated IDs for accessibility attributes */
+    a11yIds: {
+        root: string;
+        track: string;
+        previousButton: string;
+        nextButton: string;
+        title: string;
+    };
+};
+/**
+ * Context for sharing carousel state between components.
+ * @internal
+ */
+export declare const CarouselContext: React.Context<CarouselContextProps | null>;
+/**
+ * Hook to access the carousel context.
+ * Must be used within a `Carousel` component.
+ * @returns {CarouselContextProps} Carousel context value
+ * @throws {Error} If used outside of a Carousel component
+ * @example
+ * ```tsx
+ * function CustomCarouselPart() {
+ *   const { goToNext, canGoToNext } = useCarousel()
+ *   return (
+ *     <button onClick={goToNext} disabled={!canGoToNext()}>
+ *       Next
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export declare function useCarousel(): CarouselContextProps;
+export {};

package/dist/esm/components/carousel/Carousel.context.js

@@ -0,0 +1,14 @@
+import * as t from "react";
+const o = t.createContext(
+  null
+);
+function n() {
+  const e = t.useContext(o);
+  if (!e)
+    throw new Error("useCarousel must be used within a Carousel Component");
+  return e;
+}
+export {
+  o as CarouselContext,
+  n as useCarousel
+};

package/dist/esm/components/carousel/Carousel.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { CarouselOptions } from './types.js';
+export declare const carousel: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:relative uy:flex uy:flex-col uy:gap-200 uy:md:gap-300", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:relative uy:flex uy:flex-col uy:gap-200 uy:md:gap-300", unknown, unknown, undefined>>;
+export interface CarouselProps {
+    options?: Pick<NonNullable<CarouselOptions>, 'align' | 'loop' | 'slidesToScroll' | 'containScroll' | 'inViewThreshold' | 'inViewMargin' | 'duration' | 'draggable' | 'dragFree' | 'dragThreshold'>;
+    /**
+     * Accessible label for the carousel region.
+     * When provided, takes precedence over the title set in `CarouselHeader` for labeling.
+     */
+    'aria-label'?: string;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Root container of the Carousel. Manages shared state and provides context to all sub-components.
+ * The Carousel component displays a series of slides in a horizontal, scrollable layout. It's built
+ * on top of Embla Carousel and provides accessible navigation via keyboard, mouse, and touch.
+ * ## Composition
+ * Compose the Carousel with its child components:
+ * - `CarouselHeader` – Optional header with title and action slot
+ * - `CarouselContent` – Scrollable viewport that houses slides
+ * - `CarouselSlide` – Individual slide wrapper
+ * ## Features
+ * - **Responsive**: Configure slides per page and spacing per breakpoint
+ * - **Accessible**: Full keyboard navigation (Arrow keys, PageUp/PageDown, Home/End)
+ * - **Touch-enabled**: Native swipe gestures on mobile
+ * - **Flexible layout**: Control alignment, looping, and scroll behavior
+ * - **Screen reader support**: ARIA labels and live region announcements
+ * @example
+ * ```tsx
+ * import { Carousel, CarouselContent, CarouselHeader, CarouselSlide } from '@payfit/unity-components'
+ *
+ * <Carousel>
+ *   <CarouselHeader title="Featured items" />
+ *   <CarouselContent itemsPerPage={3} gap="$200">
+ *     <CarouselSlide>Item 1</CarouselSlide>
+ *     <CarouselSlide>Item 2</CarouselSlide>
+ *     <CarouselSlide>Item 3</CarouselSlide>
+ *   </CarouselContent>
+ * </Carousel>
+ * ```
+ * @example
+ * ```tsx
+ * <Carousel>
+ *   <CarouselHeader title="Responsive carousel" />
+ *   <CarouselContent
+ *     itemsPerPage={{ base: 1, md: 2, lg: 3 }}
+ *     gap={{ base: '$100', md: '$200' }}
+ *   >
+ *     {slides.map((slide) => (
+ *       <CarouselSlide key={slide.id}>{slide.content}</CarouselSlide>
+ *     ))}
+ *   </CarouselContent>
+ * </Carousel>
+ * ```
+ * ## Accessibility
+ * - Arrow keys navigate between individual slides
+ * - PageUp/PageDown jump to the first slide of the next/previous page
+ * - Home/End keys jump to the first/last slide
+ * - Tab key exits the carousel to the next focusable element
+ * - Screen readers announce the current slide and total count
+ * @param {CarouselProps} props - Component props
+ * @param {CarouselProps['options']} props.options - Embla Carousel configuration options
+ * @param {CarouselProps['aria-label']} props.aria-label - Accessible label for the carousel region (overrides title from CarouselHeader)
+ * @param {CarouselProps['className']} props.className - Additional CSS classes
+ * @param {CarouselProps['children']} props.children - Carousel content (CarouselHeader, CarouselContent, CarouselSlide)
+ * @see {@link CarouselProps} for all available props
+ * @see {@link https://www.embla-carousel.com/api/options/|Embla Carousel Options}
+ */
+declare const Carousel: import('react').ForwardRefExoticComponent<CarouselProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Carousel };

package/dist/esm/components/carousel/Carousel.js

@@ -0,0 +1,106 @@
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { forwardRef as R, useMemo as h } from "react";
+import { uyTv as j } from "@payfit/unity-themes";
+import w from "embla-carousel-accessibility";
+import A from "embla-carousel-react";
+import { useIntl as M } from "react-intl";
+import { CarouselContext as P } from "./Carousel.context.js";
+import { createCarouselAccessibilityOptions as D } from "./Carousel.options.js";
+import { useCarouselAccessibility as G } from "./hooks/useCarouselAccessibility.js";
+import { useCarouselState as K } from "./hooks/useCarouselState.js";
+import { CarouselNav as O } from "./parts/CarouselNav.js";
+const E = j({
+  base: "uy:relative uy:flex uy:flex-col uy:gap-200 uy:md:gap-300"
+}), k = R(
+  ({
+    children: t,
+    className: u,
+    options: s = {
+      slidesToScroll: "auto"
+    },
+    "aria-label": a,
+    ...c
+  }, n) => {
+    const e = M(), m = h(
+      () => D(e),
+      [e]
+    ), [d, o] = A(
+      {
+        draggable: !0,
+        ...s,
+        axis: "x"
+      },
+      [w(m)]
+    ), {
+      canGoToNext: p,
+      canGoToPrev: f,
+      visibleSlideIndexes: i,
+      focusedSlideIndex: y,
+      goToPrev: v,
+      goToNext: x,
+      goTo: g,
+      goToSlide: b,
+      selectedSnap: C,
+      snapCount: T
+    } = K(o), { liveRegionRef: N, a11yIds: l, onKeyDown: S } = G({
+      api: o,
+      visibleSlideIndexes: i,
+      focusedSlideIndex: y,
+      loop: s.loop ?? !1,
+      goToSlide: b
+    });
+    return /* @__PURE__ */ r(
+      P.Provider,
+      {
+        value: {
+          carouselRef: d,
+          api: o,
+          goToNext: x,
+          goToPrev: v,
+          goTo: g,
+          canGoToPrev: f,
+          canGoToNext: p,
+          visibleSlideIndexes: i,
+          selectedSnap: C,
+          snapCount: T,
+          a11yIds: l
+        },
+        children: /* @__PURE__ */ I(
+          "div",
+          {
+            ref: n,
+            className: E({ className: u }),
+            role: "region",
+            "aria-roledescription": e.formatMessage({
+              id: "unity:component:carousel:roledescription",
+              defaultMessage: "carousel"
+            }),
+            "aria-label": a,
+            "aria-labelledby": a ? void 0 : l.title,
+            "data-unity-slot": "carousel",
+            onKeyDownCapture: S,
+            ...c,
+            children: [
+              t,
+              /* @__PURE__ */ r(O, { className: "uy:flex uy:justify-center uy:md:hidden" }),
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  ref: N,
+                  "aria-live": "polite",
+                  "aria-atomic": "true",
+                  className: "uy:sr-only"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+k.displayName = "Carousel";
+export {
+  k as Carousel,
+  E as carousel
+};

package/dist/esm/components/carousel/Carousel.options.d.ts

@@ -0,0 +1,24 @@
+import { AccessibilityOptionsType } from 'embla-carousel-accessibility';
+import { IntlShape } from 'react-intl';
+type AriaTextCallbackType = AccessibilityOptionsType['slideAriaLabel'];
+/**
+ * Creates a function that generates aria labels for carousel slides
+ * based on grouping configuration.
+ * @param intl - The react-intl instance for translations
+ * @returns A callback function for the Embla accessibility plugin
+ */
+export declare function createSlideAriaLabel(intl: IntlShape): AriaTextCallbackType;
+/**
+ * Creates a function that generates live region content for announcing
+ * slide changes to screen readers.
+ * @param intl - The react-intl instance for translations
+ * @returns A callback function for the Embla accessibility plugin
+ */
+export declare function createLiveRegionContent(intl: IntlShape): AriaTextCallbackType;
+/**
+ * Creates the default accessibility options for the Embla carousel plugin.
+ * @param intl - The react-intl instance for translations
+ * @returns Options object for the Embla Accessibility plugin
+ */
+export declare function createCarouselAccessibilityOptions(intl: IntlShape): AccessibilityOptionsType;
+export {};

package/dist/esm/components/carousel/Carousel.options.js

@@ -0,0 +1,64 @@
+function g(e) {
+  return (i, a, l, s, r, n) => {
+    const o = a + 1, u = l + 1, t = r + 1;
+    return i ? a === l ? e.formatMessage(
+      {
+        id: "unity:component:carousel:a11y:slide:label:group-single",
+        defaultMessage: "Slide {slide} of {totalSlides} (group {snap} of {totalSnaps})"
+      },
+      { slide: o, totalSlides: s, snap: t, totalSnaps: n }
+    ) : e.formatMessage(
+      {
+        id: "unity:component:carousel:a11y:slide:label:group-multiple",
+        defaultMessage: "Slides {slide}-{lastSlide} of {totalSlides} (group {snap} of {totalSnaps})"
+      },
+      { slide: o, lastSlide: u, totalSlides: s, snap: t, totalSnaps: n }
+    ) : e.formatMessage(
+      {
+        id: "unity:component:carousel:a11y:slide:label:single",
+        defaultMessage: "Slide {slide} of {totalSlides}"
+      },
+      { slide: o, totalSlides: s }
+    );
+  };
+}
+function c(e) {
+  return (i, a, l, s, r, n) => {
+    const o = a + 1, u = l + 1, t = r + 1;
+    return i ? a === l ? e.formatMessage(
+      {
+        id: "unity:component:carousel:a11y:live-region:group-single",
+        defaultMessage: "Showing slide {slide} of {totalSlides} (group {snap} of {totalSnaps})"
+      },
+      { slide: o, totalSlides: s, snap: t, totalSnaps: n }
+    ) : e.formatMessage(
+      {
+        id: "unity:component:carousel:a11y:live-region:group-multiple",
+        defaultMessage: "Showing slides {slide}-{lastSlide} of {totalSlides} (group {snap} of {totalSnaps})"
+      },
+      { slide: o, lastSlide: u, totalSlides: s, snap: t, totalSnaps: n }
+    ) : e.formatMessage(
+      {
+        id: "unity:component:carousel:a11y:live-region:single",
+        defaultMessage: "Showing slide {slide} of {totalSlides}"
+      },
+      { slide: o, totalSlides: s }
+    );
+  };
+}
+function d(e) {
+  return {
+    announceChanges: !0,
+    carouselAriaLabel: e.formatMessage({
+      id: "unity:component:carousel:a11y:carousel:label",
+      defaultMessage: "Carousel"
+    }),
+    slideAriaLabel: g(e),
+    liveRegionContent: c(e)
+  };
+}
+export {
+  d as createCarouselAccessibilityOptions,
+  c as createLiveRegionContent,
+  g as createSlideAriaLabel
+};

package/dist/esm/components/carousel/hooks/useCarouselAccessibility.d.ts

@@ -0,0 +1,21 @@
+import { EmblaCarouselType } from 'embla-carousel';
+import { KeyboardEvent, RefObject } from 'react';
+export interface UseCarouselAccessibilityOptions {
+    api: EmblaCarouselType | undefined;
+    visibleSlideIndexes: ReadonlySet<number>;
+    focusedSlideIndex: number | null;
+    loop?: boolean;
+    goToSlide: (slideIndex: number) => void;
+}
+export interface UseCarouselAccessibilityReturn {
+    liveRegionRef: RefObject<HTMLDivElement>;
+    a11yIds: {
+        root: string;
+        track: string;
+        previousButton: string;
+        nextButton: string;
+        title: string;
+    };
+    onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+}
+export declare function useCarouselAccessibility({ api, visibleSlideIndexes, focusedSlideIndex, loop, goToSlide, }: UseCarouselAccessibilityOptions): UseCarouselAccessibilityReturn;