@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/carousel/hooks/useCarouselAccessibility.js

@@ -0,0 +1,87 @@
+import { useRef as k, useEffect as _, useCallback as D } from "react";
+import "embla-carousel-accessibility";
+import { useId as x } from "react-aria/useId";
+function E({
+  api: e,
+  visibleSlideIndexes: d,
+  focusedSlideIndex: o,
+  loop: u = !1,
+  goToSlide: c
+}) {
+  const v = k(null), n = k(!1), l = x(), h = {
+    root: `carousel-${l}__root`,
+    title: `carousel-${l}__title`,
+    track: `carousel-${l}__track`,
+    previousButton: `carousel-${l}__previous-button`,
+    nextButton: `carousel-${l}__next-button`
+  };
+  _(() => {
+    if (!e) return;
+    const r = e.plugins().accessibility;
+    !r || !v.current || r.setupLiveRegion(v.current);
+  }, [e]), _(() => {
+    if (!e) return;
+    const r = e.slideNodes();
+    r.forEach((a, i) => {
+      i === o ? (a.setAttribute("tabindex", "0"), a.removeAttribute("inert")) : (a.setAttribute("tabindex", "-1"), d.has(i) ? a.removeAttribute("inert") : a.setAttribute("inert", ""));
+    }), n.current && o !== null && (n.current = !1, r[o]?.focus({ preventScroll: !0 }));
+  }, [e, d, o]);
+  const m = D(
+    (r) => {
+      if (!e) return;
+      const i = e.slideNodes().length, s = o ?? 0;
+      switch (r.key) {
+        case "ArrowLeft": {
+          r.preventDefault();
+          const t = s > 0 ? s - 1 : u ? i - 1 : s;
+          t !== s && (n.current = !0, c(t));
+          break;
+        }
+        case "ArrowRight": {
+          r.preventDefault();
+          const t = s < i - 1 ? s + 1 : u ? 0 : s;
+          t !== s && (n.current = !0, c(t));
+          break;
+        }
+        case "Home": {
+          r.preventDefault(), u || (n.current = !0, c(0));
+          break;
+        }
+        case "End": {
+          if (r.preventDefault(), !u) {
+            const t = i - 1;
+            n.current = !0, c(t);
+          }
+          break;
+        }
+        case "PageUp": {
+          r.preventDefault();
+          const t = e.selectedSnap(), p = e.snapList().length, f = t > 0 ? t - 1 : u ? p - 1 : t;
+          if (f !== t) {
+            const b = e.internalEngine(), g = b.slidesToScroll.groupSlides(
+              b.slideIndexes
+            )[f]?.[0];
+            g !== void 0 && (n.current = !0, c(g));
+          }
+          break;
+        }
+        case "PageDown": {
+          r.preventDefault();
+          const t = e.selectedSnap(), p = e.snapList().length, f = t < p - 1 ? t + 1 : u ? 0 : t;
+          if (f !== t) {
+            const b = e.internalEngine(), g = b.slidesToScroll.groupSlides(
+              b.slideIndexes
+            )[f]?.[0];
+            g !== void 0 && (n.current = !0, c(g));
+          }
+          break;
+        }
+      }
+    },
+    [e, u, o, c]
+  );
+  return { liveRegionRef: v, a11yIds: h, onKeyDown: m };
+}
+export {
+  E as useCarouselAccessibility
+};

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

@@ -0,0 +1,14 @@
+import { EmblaCarouselApi } from '../types.js';
+export interface UseCarouselReturn {
+    selectedSnap: number;
+    snapCount: number;
+    visibleSlideIndexes: Set<number>;
+    focusedSlideIndex: number | null;
+    goToPrev: () => void;
+    goToNext: () => void;
+    goTo: (index: number) => void;
+    canGoToPrev: () => boolean | undefined;
+    canGoToNext: () => boolean | undefined;
+    goToSlide: (slideIndex: number) => void;
+}
+export declare function useCarouselState(emblaApi: EmblaCarouselApi): UseCarouselReturn;

package/dist/esm/components/carousel/hooks/useCarouselState.js

@@ -0,0 +1,62 @@
+import { useState as d, useRef as h, useCallback as s, useEffect as L } from "react";
+function y(e) {
+  const [I, l] = d(0), [G, x] = d(0), [w, T] = d(
+    () => /* @__PURE__ */ new Set()
+  ), [N, u] = d(
+    null
+  ), i = h(!1), c = s(() => {
+    if (!e) return { visible: /* @__PURE__ */ new Set(), focused: null };
+    const n = e.selectedSnap(), o = e.internalEngine(), t = (o.slidesToScroll.groupSlides(o.slideIndexes)[n] ?? [])[0] ?? null, g = e.slidesInView(), v = new Set(g);
+    return t !== null && v.add(t), {
+      visible: v,
+      focused: t
+    };
+  }, [e]), S = s(() => {
+    if (!e) return;
+    const n = e.selectedSnap();
+    l(n);
+    const o = c();
+    T(o.visible), i.current || u(o.focused);
+  }, [e, c]), f = s(() => {
+    if (!e) return;
+    x(e.snapList().length);
+    const n = e.selectedSnap();
+    l(n);
+  }, [e]);
+  L(() => {
+    if (!e) return;
+    x(e.snapList().length);
+    const n = c();
+    return T(n.visible), u(n.focused), e.on("select", S), e.on("resize", f), () => {
+      e.off("select", S), e.off("resize", f);
+    };
+  }, [e, S, f, c]);
+  const C = s(() => e?.goToPrev(), [e]), P = s(() => e?.goToNext(), [e]), a = s((n) => e?.goTo(n), [e]), z = s(() => e?.canGoToPrev(), [e]), E = s(() => e?.canGoToNext(), [e]), R = s(
+    (n) => {
+      if (!e) return;
+      i.current = !0, u(n);
+      const o = e.internalEngine(), r = o.slidesToScroll.groupSlides(o.slideIndexes).findIndex(
+        (g) => g.includes(n)
+      ), t = e.selectedSnap();
+      r !== -1 && r !== t && e.goTo(r), setTimeout(() => {
+        i.current = !1;
+      }, 0);
+    },
+    [e]
+  );
+  return {
+    selectedSnap: I,
+    snapCount: G,
+    visibleSlideIndexes: w,
+    focusedSlideIndex: N,
+    goToPrev: C,
+    goToNext: P,
+    goTo: a,
+    canGoToPrev: z,
+    canGoToNext: E,
+    goToSlide: R
+  };
+}
+export {
+  y as useCarouselState
+};

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

@@ -0,0 +1,103 @@
+import { PropsWithChildren } from 'react';
+import { ResponsiveValue } from '../../../hooks/use-responsive-value.js';
+import { SpacingToken } from '../../../utils/spacing.js';
+export declare const carouselContent: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            track?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            track?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    track: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            track?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    track: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string[];
+    track: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface CarouselContentProps extends PropsWithChildren {
+    /**
+     * Number of slides visible at once, optionally configured per breakpoint.
+     * @example
+     * itemsPerPage={3}
+     * itemsPerPage={{ base: 1, md: 2, lg: 3 }}
+     */
+    itemsPerPage?: number | ResponsiveValue<number>;
+    /** Gap between slides — Unity spacing token only (e.g. `'$200'`). */
+    gap?: SpacingToken | ResponsiveValue<SpacingToken>;
+    /** Additional padding to add to the first and last slides, for visual alignment purposes */
+    trackPadding?: {
+        start?: SpacingToken | ResponsiveValue<SpacingToken>;
+        end?: SpacingToken | ResponsiveValue<SpacingToken>;
+    };
+    /** Additional CSS classes for the viewport element. */
+    className?: string;
+    /**
+     * Negative horizontal margin to apply to the carousel viewport, for cases where you place the carousel inside a padded container
+     */
+    trackOffset?: number | SpacingToken | ResponsiveValue<number | SpacingToken>;
+}
+/**
+ * The scrollable viewport that houses carousel slides.
+ * `CarouselContent` controls the visual layout of the carousel: how many slides are visible
+ * at once, spacing between slides, and optional padding to create a "peek" effect showing
+ * adjacent slides.
+ * ## Layout Control
+ * - **itemsPerPage**: Number of slides visible at once (supports fractional values like `2.5`)
+ * - **gap**: Spacing between slides (Unity spacing tokens only, e.g., `'$200'`)
+ * - **trackPadding**: Padding on start/end edges to align with the header, in cases where you use `trackOffset`
+ * - **trackOffset**: Horizontal offset to align slides with page content
+ * ## Responsive Layout
+ * All layout props support responsive values using the `{ base, md, lg }` syntax:
+ * @example
+ * ```tsx
+ * <CarouselContent
+ *   itemsPerPage={{ base: 1, md: 2, lg: 3 }}
+ *   gap={{ base: '$100', md: '$200' }}
+ *   trackPadding={{ end: { base: '$100', md: '$200' } }}
+ * >
+ *   <CarouselSlide>Slide 1</CarouselSlide>
+ *   <CarouselSlide>Slide 2</CarouselSlide>
+ * </CarouselContent>
+ * ```
+ * ## Fractional Items Per Page
+ * Use fractional values to create a "bleeding" effect where the next slide is partially visible:
+ * @example
+ * ```tsx
+ * <CarouselContent itemsPerPage={2.3} gap="$200">
+ *   <CarouselSlide>Slide 1</CarouselSlide>
+ *   <CarouselSlide>Slide 2</CarouselSlide>
+ *   <CarouselSlide>Slide 3</CarouselSlide>
+ * </CarouselContent>
+ * ```
+ * @param {CarouselContentProps} props - Component props
+ * @param {CarouselContentProps['itemsPerPage']} props.itemsPerPage - Number of slides visible at once
+ * @param {CarouselContentProps['gap']} props.gap - Spacing between slides (Unity spacing tokens)
+ * @param {CarouselContentProps['trackPadding']} props.trackPadding - Padding to reveal adjacent slides
+ * @param {CarouselContentProps['trackOffset']} props.trackOffset - Horizontal offset for alignment
+ * @param {CarouselContentProps['className']} props.className - Additional CSS classes
+ * @param {CarouselContentProps['children']} props.children - CarouselSlide components
+ * @see {@link CarouselContentProps} for all available props
+ */
+declare function CarouselContent({ className, children, itemsPerPage: responsiveItemsPerPage, gap: responsiveGap, trackPadding: responsiveTrackPadding, trackOffset: responsiveTrackOffset, }: CarouselContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CarouselContent {
+    var displayName: string;
+}
+export { CarouselContent };

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 | {
+            nav?: import('tailwind-merge').ClassNameValue;
+            slot?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            nav?: import('tailwind-merge').ClassNameValue;
+            slot?: 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 | {
+            nav?: import('tailwind-merge').ClassNameValue;
+            slot?: 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 };