@payfit/unity-components 2.9.8 → 2.9.9

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' | 'ssr'>;
+    /**
+     * 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;

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";
+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 };