@payfit/unity-components 2.9.8 → 2.10.0

package/dist/esm/components/carousel/parts/CarouselContent.js

@@ -0,0 +1,69 @@
+import { jsx as g } from "react/jsx-runtime";
+import { useState as P, useEffect as C } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { useResponsiveValue as r } from "../../../hooks/use-responsive-value.js";
+import { useCarousel as x } from "../Carousel.context.js";
+const D = w({
+  slots: {
+    root: ["uy:overflow-hidden ", "uy:-mx-(--uy-carousel-track-offset)"],
+    track: [
+      "uy:flex uy:touch-pan-y uy:touch-pinch-zoom",
+      "uy:gap-(--uy-carousel-slide-gap)",
+      "uy:*:first:ms-(--uy-carousel-track-margin-start)",
+      "uy:*:last:me-(--uy-carousel-track-margin-end)",
+      "uy:data-[grab-state=grab]:cursor-grab",
+      "uy:data-[grab-state=grabbing]:cursor-grabbing"
+    ]
+  }
+});
+function N({
+  className: p,
+  children: d,
+  itemsPerPage: f,
+  gap: y,
+  trackPadding: o,
+  trackOffset: m = 0
+}) {
+  const { carouselRef: b, a11yIds: k, api: a } = x(), { root: $, track: v } = D(), [h, s] = P(!1), t = r(f), n = r(y), e = r(m), c = r(o?.start), u = r(o?.end);
+  return C(() => {
+    if (!a) return;
+    const i = () => {
+      s(!0);
+    }, l = () => {
+      s(!1);
+    };
+    return a.on("pointerdown", i), a.on("pointerup", l), () => {
+      a.off("pointerdown", i), a.off("pointerup", l);
+    };
+  }, [a]), /* @__PURE__ */ g(
+    "div",
+    {
+      ref: b,
+      className: $({ className: p }),
+      "data-slot": "carousel-content",
+      "data-items-per-page": typeof t == "number" ? t : void 0,
+      style: {
+        "--uy-carousel-slide-width": `calc((1 / ${t ?? 1}) * 100%)`,
+        "--uy-carousel-track-offset": typeof e == "number" ? `${e}px` : `var(--uy-spacing-${e.replace("$", "")})`,
+        "--uy-carousel-slide-gap": `var(--uy-spacing-${n ? n.replace("$", "") : 0})`,
+        "--uy-carousel-track-margin-start": `var(--uy-spacing-${c ? c.replace("$", "") : 0})`,
+        "--uy-carousel-track-margin-end": `var(--uy-spacing-${u ? u.replace("$", "") : 0})`
+      },
+      children: /* @__PURE__ */ g(
+        "div",
+        {
+          className: v(),
+          "data-slot": "carousel-track",
+          "data-grab-state": h ? "grabbing" : "grab",
+          id: k.track,
+          children: d
+        }
+      )
+    }
+  );
+}
+N.displayName = "CarouselContent";
+export {
+  N as CarouselContent,
+  D as carouselContent
+};

package/dist/esm/components/carousel/parts/CarouselHeader.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+export declare const carouselHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            slot?: import('tailwind-merge').ClassNameValue;
+            nav?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            slot?: import('tailwind-merge').ClassNameValue;
+            nav?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    title: string;
+    slot: string;
+    nav: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            slot?: import('tailwind-merge').ClassNameValue;
+            nav?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    title: string;
+    slot: string;
+    nav: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string;
+    title: string;
+    slot: string;
+    nav: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface CarouselHeaderProps {
+    /** Title of the carousel. Used as the accessible label for the carousel region. */
+    title: string;
+    /** Optional content rendered after the title (e.g. a "View all" link). */
+    actionSlot?: ReactNode;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+/**
+ * Header area for the Carousel. Renders the title and an optional action slot.
+ * The `CarouselHeader` displays a heading for the carousel and provides an optional slot
+ * for actions like a "View all" button or link. On medium screens and up (`md+`), it also
+ * embeds the `CarouselNav` controls in the top-right corner. On small screens, the nav
+ * is rendered below the slides instead.
+ * ## Accessibility
+ * The title is used as the accessible label for the carousel region via `aria-labelledby`,
+ * unless an explicit `aria-label` is provided to the `Carousel` root component.
+ * The action slot is wrapped in a `group` role with an appropriate label for screen readers.
+ * @example
+ * ```tsx
+ * <CarouselHeader title="Featured items" />
+ * ```
+ * @example
+ * ```tsx
+ * import { Button } from '@payfit/unity-components'
+ *
+ * <CarouselHeader
+ *   title="Featured products"
+ *   actionSlot={
+ *     <Button variant="ghost" color="neutral">
+ *       View all
+ *     </Button>
+ *   }
+ * />
+ * ```
+ * @param {CarouselHeaderProps} props - Component props
+ * @param {CarouselHeaderProps['title']} props.title - Carousel title (used as accessible label)
+ * @param {CarouselHeaderProps['actionSlot']} props.actionSlot - Optional action content (e.g., "View all" button)
+ * @param {CarouselHeaderProps['className']} props.className - Additional CSS classes
+ * @see {@link CarouselHeaderProps} for all available props
+ */
+declare const CarouselHeader: import('react').ForwardRefExoticComponent<CarouselHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { CarouselHeader };

package/dist/esm/components/carousel/parts/CarouselHeader.js

@@ -0,0 +1,58 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { uyTv as y } from "@payfit/unity-themes";
+import { useIntl as f } from "react-intl";
+import { Text as p } from "../../text/Text.js";
+import { useCarousel as h } from "../Carousel.context.js";
+import { CarouselNav as v } from "./CarouselNav.js";
+const x = y({
+  slots: {
+    root: "uy:flex uy:items-center uy:justify-between",
+    title: "uy:flex-1",
+    slot: "uy:shrink-0",
+    nav: "uy:hidden uy:md:flex"
+  }
+}), N = d(
+  ({ title: t, actionSlot: r, className: s }, a) => {
+    const { a11yIds: o } = h(), l = f(), {
+      root: i,
+      title: n,
+      slot: m,
+      nav: u
+    } = x();
+    return /* @__PURE__ */ c("header", { ref: a, className: i({ class: s }), children: [
+      /* @__PURE__ */ e(
+        p,
+        {
+          id: o.title,
+          "data-dd-privacy": "allow",
+          variant: "h3",
+          color: "content.neutral",
+          className: n(),
+          children: t
+        }
+      ),
+      r && /* @__PURE__ */ e(
+        "div",
+        {
+          role: "group",
+          "aria-label": l.formatMessage(
+            {
+              id: "unity:component:carousel:header:actions:label",
+              defaultMessage: "{title} actions"
+            },
+            { title: t }
+          ),
+          className: m(),
+          children: r
+        }
+      ),
+      /* @__PURE__ */ e(v, { className: u() })
+    ] });
+  }
+);
+N.displayName = "CarouselHeader";
+export {
+  N as CarouselHeader,
+  x as carouselHeader
+};

package/dist/esm/components/carousel/parts/CarouselNav.d.ts

@@ -0,0 +1,59 @@
+export declare const carouselNav: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            indicator?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            indicator?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    indicator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            indicator?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    indicator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string;
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface CarouselNavProps {
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+/**
+ * Internal navigation component for the Carousel.
+ * Renders previous/next buttons and a page indicator showing the current position (e.g., "2/5").
+ * This component is automatically rendered by `CarouselHeader` on medium screens and up, and
+ * below the slides on small screens. You typically don't need to use it directly.
+ * ## Behavior
+ * - Automatically hidden when there's only one page of content (`snapCount === 1`)
+ * - Previous/next buttons are disabled when at the start/end (unless `loop: true`)
+ * - Buttons are properly labeled for screen readers
+ * - Uses `role="toolbar"` for semantic navigation grouping
+ *
+ * ## Internal Use
+ * This component is wired to the carousel via context and is used internally by the
+ * `Carousel` component. You don't typically render it directly.
+ * @param {CarouselNavProps} props - Component props
+ * @param {CarouselNavProps['className']} props.className - Additional CSS classes
+ * @see {@link CarouselNavProps} for all available props
+ * @internal
+ */
+declare const CarouselNav: {
+    ({ className }: CarouselNavProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { CarouselNav };

package/dist/esm/components/carousel/parts/CarouselNav.js

@@ -0,0 +1,80 @@
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { uyTv as p } from "@payfit/unity-themes";
+import { useIntl as f } from "react-intl";
+import { IconButton as l } from "../../icon-button/IconButton.js";
+import { Text as b } from "../../text/Text.js";
+import { useCarousel as g } from "../Carousel.context.js";
+const y = p({
+  slots: {
+    root: "uy:flex uy:items-center uy:gap-50",
+    indicator: "uy:tabular-nums uy:select-none"
+  }
+}), x = ({ className: i }) => {
+  const {
+    goToNext: u,
+    goToPrev: c,
+    canGoToPrev: e,
+    canGoToNext: t,
+    selectedSnap: d,
+    snapCount: r,
+    a11yIds: o
+  } = g(), a = f(), { root: m, indicator: v } = y();
+  return r === 1 ? null : /* @__PURE__ */ n(
+    "div",
+    {
+      className: m({ class: i }),
+      role: "toolbar",
+      "aria-label": a.formatMessage({
+        id: "unity:component:carousel:nav:toolbar-label",
+        defaultMessage: "Carousel navigation"
+      }),
+      "data-unity-slot": "carousel-nav",
+      children: [
+        /* @__PURE__ */ s(
+          l,
+          {
+            variant: "ghost",
+            color: "neutral",
+            icon: "CaretLeftOutlined",
+            label: a.formatMessage({
+              id: "unity:component:carousel:nav:previous:label",
+              defaultMessage: "Go to previous slide"
+            }),
+            onClick: c,
+            isDisabled: !e(),
+            "aria-disabled": !e(),
+            "aria-controls": o.track,
+            id: o.previousButton
+          }
+        ),
+        /* @__PURE__ */ n(b, { variant: "body", color: "content.neutral", className: v(), children: [
+          d + 1,
+          "/",
+          r
+        ] }),
+        /* @__PURE__ */ s(
+          l,
+          {
+            variant: "ghost",
+            color: "neutral",
+            icon: "CaretRightOutlined",
+            label: a.formatMessage({
+              id: "unity:component:carousel:nav:next:label",
+              defaultMessage: "Go to next slide"
+            }),
+            onClick: u,
+            isDisabled: !t(),
+            "aria-disabled": !t(),
+            "aria-controls": o.track,
+            id: o.nextButton
+          }
+        )
+      ]
+    }
+  );
+};
+x.displayName = "CarouselNav";
+export {
+  x as CarouselNav,
+  y as carouselNav
+};

package/dist/esm/components/carousel/parts/CarouselSlide.d.ts

@@ -0,0 +1,38 @@
+import { default as React, PropsWithChildren } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
+export declare const carouselSlide: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface CarouselSlideProps extends PropsWithChildren<VariantProps<typeof carouselSlide>>, React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * Individual slide wrapper for carousel content.
+ * `CarouselSlide` wraps each item in the carousel and provides the proper semantic structure
+ * and accessibility attributes. Each slide is focusable and navigable via keyboard.
+ * ## Accessibility
+ * - Each slide has `role="group"` and `aria-roledescription="slide"`
+ * - Slides are keyboard navigable using Arrow keys, PageUp/PageDown, Home/End
+ * - Use the `.uy:group` class on CarouselSlide to style focus states on child content
+ * @example
+ * ```tsx
+ * import { CarouselSlide } from '@payfit/unity-components'
+ *
+ * <CarouselSlide>
+ *   <img src="..." alt="Product" />
+ *   <h3>Product title</h3>
+ * </CarouselSlide>
+ * ```
+ * @example
+ * ```tsx
+ * <CarouselSlide>
+ *   <div className="uy:group-focus-visible:outline uy:group-focus-visible:outline-2">
+ *     Content with custom focus ring
+ *   </div>
+ * </CarouselSlide>
+ * ```
+ * @param {CarouselSlideProps} props - Component props
+ * @param {CarouselSlideProps['className']} props.className - Additional CSS classes
+ * @param {CarouselSlideProps['children']} props.children - Slide content
+ * @see {@link CarouselSlideProps} for all available props
+ */
+declare const CarouselSlide: React.ForwardRefExoticComponent<CarouselSlideProps & React.RefAttributes<HTMLDivElement>>;
+export { CarouselSlide };

package/dist/esm/components/carousel/parts/CarouselSlide.js

@@ -0,0 +1,35 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { uyTv as l } from "@payfit/unity-themes";
+import { useIntl as u } from "react-intl";
+const t = l({
+  // add the component styles
+  base: [
+    "uy:group uy:min-w-0 uy:shrink-0 uy:grow-0",
+    "uy:basis-[calc(var(--uy-carousel-slide-width)-var(--uy-carousel-slide-gap))]",
+    "uy:focus-visible:outline-0"
+  ]
+}), d = a(
+  ({ className: e, ...o }, r) => {
+    const s = u();
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ...o,
+        ref: r,
+        role: "group",
+        "aria-roledescription": s.formatMessage({
+          id: "unity:component:carousel:slide:roledescription",
+          defaultMessage: "slide"
+        }),
+        "data-unity-slot": "carousel-item",
+        className: t({ className: e })
+      }
+    );
+  }
+);
+d.displayName = "CarouselSlide";
+export {
+  d as CarouselSlide,
+  t as carouselSlide
+};

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

@@ -0,0 +1,8 @@
+import { UseEmblaCarouselType, default as useEmblaCarousel } from 'embla-carousel-react';
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+export type CarouselApi = UseEmblaCarouselType[1];
+export type CarouselOptions = UseCarouselParameters[0];
+export type CarouselPlugin = UseCarouselParameters[1];
+export type EmblaCarouselRef = ReturnType<typeof useEmblaCarousel>[0];
+export type EmblaCarouselApi = ReturnType<typeof useEmblaCarousel>[1];
+export {};

package/dist/esm/components/icon-button/IconButton.d.ts

@@ -14,6 +14,7 @@ interface IconButtonBaseProps {
     className?: string;
     /** The button type */
     type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    id?: ButtonHTMLAttributes<HTMLButtonElement>['id'];
 }
 interface IconButtonVariantsPrimaryProps extends IconButtonBaseProps, Omit<IconButtonPrimary, 'variant' | 'color'>, Required<Pick<IconButtonPrimary, 'variant' | 'color'>> {
 }

package/dist/esm/hooks/use-responsive-value.d.ts

@@ -0,0 +1,11 @@
+import { Breakpoint } from './use-breakpoint-listener.js';
+/**
+ * A value that can be specified per breakpoint.
+ * At minimum, `base` (the mobile-first default) must be provided.
+ * @example
+ * { base: 1, md: 2, lg: 3 }
+ */
+export type ResponsiveValue<TValue> = {
+    base: TValue;
+} & Partial<Record<Exclude<Breakpoint, 'xs'>, TValue>>;
+export declare function useResponsiveValue<TValue>(value: TValue | ResponsiveValue<TValue>): TValue;

package/dist/esm/hooks/use-responsive-value.js

@@ -0,0 +1,29 @@
+import { useBreakpointListener as s } from "./use-breakpoint-listener.js";
+function p(n) {
+  return typeof n == "object" && n !== null && "base" in n;
+}
+const i = [
+  "sm",
+  "md",
+  "lg",
+  "xl"
+];
+function c(n) {
+  const r = s();
+  if (!p(n))
+    return n;
+  if (r === "xs")
+    return n.base;
+  if (r in n)
+    return n[r];
+  const o = i.indexOf(r);
+  for (let t = o; t >= 0; t--) {
+    const e = i[t];
+    if (e && e in n)
+      return n[e];
+  }
+  return n.base;
+}
+export {
+  c as useResponsiveValue
+};

package/dist/esm/index.d.ts

@@ -214,3 +214,8 @@ export { useFieldA11yContext } from './components/form-field/TanstackFormField.c
 export { fieldRevalidateLogic } from './utils/field-revalidate-logic.js';
 export type { FieldRevalidateLogicProps } from './utils/field-revalidate-logic.js';
 export * from './providers/router/RouterProvider.js';
+export * from './components/carousel/Carousel.js';
+export * from './components/carousel/parts/CarouselHeader.js';
+export * from './components/carousel/parts/CarouselNav.js';
+export * from './components/carousel/parts/CarouselContent.js';
+export * from './components/carousel/parts/CarouselSlide.js';