@payfit/unity-components 2.46.11 → 2.46.13

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

@@ -1,99 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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;