@payfit/unity-components 2.46.11 → 2.46.13

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

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

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

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

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

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

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

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

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

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

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