sdaia-ui 1.0.1

package/src/components/CardMedia/CardMedia.types.ts

@@ -0,0 +1,114 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Visual type of the media block. */
+export type CardMediaType = 'image' | 'carousel' | 'video';
+
+export interface CardMediaProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Variant of the media block.
+   * - `image`    — single image with a bottom gradient overlay + optional title / description / leading icon.
+   * - `carousel` — image with top chips, left/right arrow controls, and pagination dots.
+   * - `video`    — image poster with top chips, centered play button, and a duration pill in the footer.
+   * @default 'image'
+   */
+  type?: CardMediaType;
+
+  /**
+   * Background image source. Used for the single-image Image / Video variants,
+   * and as a fallback for the Carousel variant when no `images` array is supplied.
+   */
+  imageSrc: string;
+  /** Background image alt text. @default '' */
+  imageAlt?: string;
+
+  /**
+   * Carousel-only: the ordered list of images the carousel cycles through.
+   * When provided, the active image is `images[currentSlide]` and
+   * `totalSlides` defaults to `images.length`. When omitted, the carousel
+   * falls back to rendering a single `imageSrc`.
+   */
+  images?: Array<{ src: string; alt?: string }>;
+
+  /* ── Image-variant content ────────────────────────────────── */
+  /** Title shown in the bottom overlay (Image variant). */
+  title?: ReactNode;
+  /** Description shown under the title (Image variant). */
+  description?: ReactNode;
+  /**
+   * Leading icon rendered inside the featured-icon slot on the Image footer.
+   * Defaults to a placeholder image icon when omitted.
+   */
+  leadingIcon?: ReactNode;
+  /** Hide the leading featured-icon slot entirely (Image variant). @default false */
+  hideLeadingIcon?: boolean;
+
+  /* ── Carousel / Video shared ──────────────────────────────── */
+  /**
+   * Chip badges rendered in the top row for Carousel and Video variants.
+   * Pass an array of strings (each becomes a styled chip) or any ReactNode
+   * (rendered as-is so you can pass fully custom chips).
+   */
+  badges?: ReactNode[] | ReactNode;
+
+  /* ── Carousel-specific ────────────────────────────────────── */
+  /** Total pagination dots (Carousel). @default 3 */
+  totalSlides?: number;
+  /** Currently active dot (0-based) (Carousel). @default 0 */
+  currentSlide?: number;
+  /**
+   * Fired whenever the active slide changes — either from a pagination dot click
+   * or from a previous / next arrow click. CardMedia computes the target index
+   * internally (with optional wrap-around, see `loop`) and passes it here.
+   */
+  onSlideChange?: (index: number) => void;
+  /**
+   * Infinite scrolling: pressing Next on the last slide wraps back to the
+   * first, and pressing Previous on the first slide jumps to the last.
+   * Disable to clamp at the edges instead.
+   * @default true
+   */
+  loop?: boolean;
+  /**
+   * Optional side-effect hook fired in addition to `onSlideChange` when the
+   * user clicks the previous arrow. The component already updates the index
+   * itself — use this only if you need extra behavior (analytics, etc.).
+   */
+  onPrev?: () => void;
+  /**
+   * Optional side-effect hook fired in addition to `onSlideChange` when the
+   * user clicks the next arrow. The component already updates the index
+   * itself — use this only if you need extra behavior (analytics, etc.).
+   */
+  onNext?: () => void;
+
+  /* ── Video-specific ───────────────────────────────────────── */
+  /** Duration text shown in the footer pill (Video). */
+  duration?: ReactNode;
+  /** Fired when the user clicks the play button (Video). */
+  onPlay?: () => void;
+  /** Accessible label for the play button. @default 'Play' */
+  playLabel?: string;
+
+  /* ── Direction ────────────────────────────────────────────── */
+  /** Direction — applied to the root and drives RTL layout. */
+  dir?: 'ltr' | 'rtl';
+  /** @deprecated Use `dir="rtl"` instead. */
+  rtl?: boolean;
+
+  /**
+   * Bleeds the media past the card's horizontal padding on both sides so the
+   * image meets the left and right card edges. Use for any card where the
+   * media is NOT the first child (Content, Social Post, Item).
+   * @default false
+   */
+  stretched?: boolean;
+  /**
+   * Also bleeds the media past the card's top padding so it meets the top
+   * card edge (rounded corners match the card's 16 px radius). Only use when
+   * the media is the FIRST child of the card, i.e. Product and Event cards.
+   * Requires `stretched={true}`.
+   * @default false
+   */
+  stretchTop?: boolean;
+}

package/src/components/CardMedia/CardMedia.variants.ts

@@ -0,0 +1,139 @@
+/* ──────────────────────────────────────────────────────────────
+ * CardMedia — class-name maps.
+ *
+ * Color values come from the Figma variables bound to the _Card
+ * Media frame (JnxIDV6Ev4yznMM0njgo5i → 4401:35269). Values that
+ * don't map to an existing global token are kept as rgba literals
+ * with the Figma variable name in a comment. Dark-mode pairs are
+ * included where the surface could sit on a dark host page.
+ * ────────────────────────────────────────────────────────────── */
+
+/* ── Root ──────────────────────────────────────────────────────
+ * 360 × 210 in Figma. We default to the same width cap and exact
+ * height; parent containers can override via `className`.
+ * ────────────────────────────────────────────────────────────── */
+
+export const ROOT_BASE = [
+  // No explicit `w-full` — let align-self:stretch fill the cross-axis.
+  // This allows negative horizontal margins (stretched) to correctly extend
+  // past the card padding; with w-full the margins only shift, not widen.
+  'relative flex flex-col h-[210px]',
+  'rounded-[8px] overflow-hidden',
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)]',
+].join(' ');
+
+/** Image variant — content (if any) hugs the bottom edge; gradient overlays it. */
+export const ROOT_IMAGE = 'justify-end';
+
+/** Carousel + Video share a padded three-row layout. */
+export const ROOT_OVERLAYED = 'justify-between p-spacing-xl';
+
+/* ── Background image ─────────────────────────────────────────── */
+
+export const MEDIA_IMAGE =
+  'absolute inset-0 size-full object-cover pointer-events-none rounded-[8px]';
+
+/* ── Image variant: gradient footer with text + leading icon ──── */
+
+/**
+ * Bottom-anchored gradient strip per Figma:
+ *   from #16161666 (alpha-black-40)
+ *   via  #16161633 (alpha-black-20) at 55.625%
+ *   to   #16161600 (alpha-black-0)
+ */
+export const IMAGE_FOOTER_OVERLAY = [
+  'relative flex items-center gap-spacing-md w-full',
+  'p-spacing-xl',
+  'bg-gradient-to-t',
+  'from-[rgba(22,22,22,0.4)]',
+  'via-[rgba(22,22,22,0.2)] via-[55.625%]',
+  'to-[rgba(22,22,22,0)]',
+].join(' ');
+
+/**
+ * The leading-item slot on the Image footer is rendered by the shared
+ * `CardLeadingItem` primitive — see `../CardLeadingItem`. The CardMedia
+ * variants file no longer owns a wrapper style for it.
+ */
+
+export const TEXT_COLUMN =
+  'flex flex-1 min-w-0 flex-col gap-spacing-xxs items-start w-full';
+
+export const TITLE_CLASS = [
+  'm-0 w-full',
+  // Text md Bold
+  'text-text-md font-[700] leading-[24px]',
+  // text-oncolor-primary (#fff)
+  'text-white',
+].join(' ');
+
+export const DESCRIPTION_CLASS = [
+  'm-0 w-full',
+  // Text sm Regular
+  'text-text-sm font-[400] leading-[20px]',
+  // text-oncolor-secondary (rgba(255,255,255,0.8))
+  'text-[rgba(255,255,255,0.8)]',
+].join(' ');
+
+/* ── Chips row (Carousel + Video) ─────────────────────────────── */
+
+export const CHIP_ROW =
+  'relative flex items-center gap-spacing-md w-full h-[20px]';
+
+/*
+ * Badge rendering now delegates to the shared `Chip` component
+ * (`variant="neutral" size="sm" rounded={false}`) — no inline wrapper
+ * class lives here.
+ */
+
+/* ── Carousel middle row (arrows) ─────────────────────────────── */
+
+export const CAROUSEL_CENTER_ROW =
+  'relative flex items-center justify-between w-full h-[32px]';
+
+/* ── Carousel bottom row (pagination) ─────────────────────────── */
+
+export const CAROUSEL_PAGINATION_ROW =
+  'relative flex flex-col items-center justify-end w-full h-[20px]';
+
+/* ── Video middle row (play button) ───────────────────────────── */
+
+export const VIDEO_CENTER_ROW =
+  'relative flex items-center justify-between w-full h-[48px]';
+
+/** Circular play-button overlay — translucent white. */
+export const PLAY_BUTTON = [
+  'inline-flex items-center justify-center flex-shrink-0',
+  'p-spacing-lg rounded-full',
+  // alpha-white-80 (rgba(255,255,255,0.8))
+  'bg-[rgba(255,255,255,0.8)]',
+  // Focus ring for keyboard users
+  'cursor-pointer motion-feedback',
+  'hover:bg-white active:bg-[rgba(255,255,255,0.6)]',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2',
+  // Icon color (icon-default #161616)
+  'text-[rgba(22,22,22,1)]',
+].join(' ');
+
+export const PLAY_ICON_INNER =
+  'inline-flex items-center justify-center flex-shrink-0 size-[24px]';
+
+/** Center row wrapping used when the play button is centered and no leading/trailing decoration. */
+export const VIDEO_CENTER_INNER =
+  'flex-1 flex items-center justify-center';
+
+/* ── Video footer (duration pill) ─────────────────────────────── */
+
+export const VIDEO_FOOTER_ROW = 'relative flex flex-row items-center w-full h-[20px]';
+
+export const DURATION_PILL = [
+  'inline-flex items-center gap-[0px] ms-auto',
+  'px-spacing-lg py-[3px]',
+  'rounded-[6px]',
+  // alpha-white-50 (rgba(255,255,255,0.5))
+  'bg-[rgba(255,255,255,0.5)]',
+  // text-oncolor-primary (#fff)
+  'text-white',
+  // Text 2xs Semibold
+  'text-text-2xs font-[600] leading-[14px] whitespace-nowrap',
+].join(' ');

package/src/components/CardMedia/index.ts

@@ -0,0 +1,2 @@
+export { CardMedia } from './CardMedia';
+export type { CardMediaProps, CardMediaType } from './CardMedia.types';

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import {
+  Children,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../../lib/cn';
+import { CarouselArrow } from '../CarouselArrow/CarouselArrow';
+import { CarouselControlsGroup } from '../CarouselControlsGroup/CarouselControlsGroup';
+import type { CarouselProps } from './Carousel.types';
+import {
+  ROOT_CLASSES,
+  ROW_CLASSES,
+  VIEWPORT_CLASSES,
+  TRACK_CLASSES,
+  SLIDE_CLASSES,
+  DOTS_ROW_CLASSES,
+} from './Carousel.variants';
+
+/**
+ * Carousel — a desktop carousel that composes the package `CarouselArrow` and
+ * `CarouselControlsGroup` around a slide track. Supports controlled and
+ * uncontrolled active index, optional looping, autoplay, and RTL — the slide
+ * translation flips automatically under `dir="rtl"`.
+ *
+ * Each direct child of `<Carousel>` is rendered as one slide.
+ */
+export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(function Carousel(
+  {
+    children,
+    activeIndex,
+    defaultIndex = 0,
+    onChange,
+    showArrows = true,
+    showDots = true,
+    dotsVariant = 'brand',
+    dotsSize = 'sm',
+    arrowVariant = 'brand',
+    arrowSize = 'md',
+    loop = false,
+    autoplayMs,
+    ariaLabel = 'Carousel',
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const slides = useMemo(() => Children.toArray(children), [children]);
+  const count = slides.length;
+
+  const [uncontrolled, setUncontrolled] = useState(() =>
+    Math.min(Math.max(0, defaultIndex), Math.max(0, count - 1)),
+  );
+  const isControlled = activeIndex !== undefined;
+  const index = isControlled ? Math.min(Math.max(0, activeIndex!), Math.max(0, count - 1)) : uncontrolled;
+  const reactId = useId();
+
+  // Detect RTL from the rendered DOM so the translate direction flips.
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const [isRtl, setIsRtl] = useState(false);
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    const dir = getComputedStyle(el).direction;
+    setIsRtl(dir === 'rtl');
+  }, []);
+
+  const setIndex = useCallback(
+    (next: number) => {
+      if (count === 0) return;
+      let target = next;
+      if (loop) {
+        target = ((next % count) + count) % count;
+      } else {
+        target = Math.min(Math.max(0, next), count - 1);
+      }
+      if (!isControlled) setUncontrolled(target);
+      onChange?.(target);
+    },
+    [count, loop, isControlled, onChange],
+  );
+
+  const goPrev = useCallback(() => setIndex(index - 1), [index, setIndex]);
+  const goNext = useCallback(() => setIndex(index + 1), [index, setIndex]);
+
+  /* ── Autoplay ─────────────────────────────────────────────── */
+  useEffect(() => {
+    if (!autoplayMs || autoplayMs <= 0 || count <= 1) return;
+    const id = window.setInterval(() => {
+      setIndex(loop ? index + 1 : (index + 1) % count);
+    }, autoplayMs);
+    return () => window.clearInterval(id);
+  }, [autoplayMs, count, index, loop, setIndex]);
+
+  const canPrev = loop || index > 0;
+  const canNext = loop || index < count - 1;
+
+  // Translate is negative in LTR, positive in RTL (because the track visually
+  // flows right-to-left under dir="rtl" and we want to move it the opposite way).
+  const translatePct = (isRtl ? 1 : -1) * index * 100;
+
+  return (
+    <section
+      ref={ref}
+      data-slot="carousel"
+      aria-roledescription="carousel"
+      aria-label={ariaLabel}
+      className={cn(ROOT_CLASSES, className)}
+      {...rest}
+    >
+      <div className={ROW_CLASSES}>
+        {showArrows ? (
+          <CarouselArrow
+            direction="previous"
+            size={arrowSize}
+            variant={arrowVariant}
+            disabled={!canPrev}
+            onClick={goPrev}
+            aria-controls={`${reactId}-viewport`}
+          />
+        ) : null}
+
+        <div
+          ref={viewportRef}
+          id={`${reactId}-viewport`}
+          data-slot="carousel-viewport"
+          className={VIEWPORT_CLASSES}
+          aria-live={autoplayMs ? 'off' : 'polite'}
+        >
+          <div
+            data-slot="carousel-track"
+            className={TRACK_CLASSES}
+            style={{ transform: `translateX(${translatePct}%)` }}
+          >
+            {slides.map((slide, i) => (
+              <div
+                key={i}
+                data-slot="carousel-slide"
+                role="group"
+                aria-roledescription="slide"
+                aria-label={`${i + 1} of ${count}`}
+                aria-hidden={i !== index}
+                className={SLIDE_CLASSES}
+              >
+                {slide}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {showArrows ? (
+          <CarouselArrow
+            direction="next"
+            size={arrowSize}
+            variant={arrowVariant}
+            disabled={!canNext}
+            onClick={goNext}
+            aria-controls={`${reactId}-viewport`}
+          />
+        ) : null}
+      </div>
+
+      {showDots && count > 1 ? (
+        <div className={DOTS_ROW_CLASSES}>
+          <CarouselControlsGroup
+            count={count}
+            activeIndex={index}
+            onChange={setIndex}
+            size={dotsSize}
+            variant={dotsVariant}
+          />
+        </div>
+      ) : null}
+    </section>
+  );
+});

package/src/components/Carousel/Carousel.types.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type {
+  CarouselControlsGroupSize,
+  CarouselControlsGroupStyle,
+} from '../CarouselControlsGroup/CarouselControlsGroup.types';
+import type {
+  CarouselArrowSize,
+  CarouselArrowVariant,
+} from '../CarouselArrow/CarouselArrow.types';
+
+export interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Slides to render. Each child is treated as a single slide. */
+  children: ReactNode;
+  /** Controlled active index. If omitted, the carousel manages its own state. */
+  activeIndex?: number;
+  /** Initial slide index when uncontrolled. @default 0 */
+  defaultIndex?: number;
+  /** Called whenever the active slide changes. */
+  onChange?: (index: number) => void;
+  /** Show left/right arrow buttons on the sides. @default true */
+  showArrows?: boolean;
+  /** Show pagination dots below the slides. @default true */
+  showDots?: boolean;
+  /** Visual style of the pagination dots. @default 'brand' */
+  dotsVariant?: CarouselControlsGroupStyle;
+  /** Size of the pagination dots. @default 'sm' */
+  dotsSize?: CarouselControlsGroupSize;
+  /** Visual style of the arrows. @default 'brand' */
+  arrowVariant?: CarouselArrowVariant;
+  /** Size of the arrows. @default 'md' */
+  arrowSize?: CarouselArrowSize;
+  /** Wrap around when navigating past the first/last slide. @default false */
+  loop?: boolean;
+  /** Auto-advance interval in ms. 0 / undefined disables autoplay. */
+  autoplayMs?: number;
+  /** Accessible label for the carousel region. */
+  ariaLabel?: string;
+}

package/src/components/Carousel/Carousel.variants.ts

@@ -0,0 +1,17 @@
+/** Outer region wrapper. */
+export const ROOT_CLASSES = 'relative w-full';
+
+/** Row holding the optional start arrow, the slide viewport, and the end arrow. */
+export const ROW_CLASSES = 'flex w-full items-center gap-spacing-md';
+
+/** Viewport that clips slides; slides translate horizontally inside it. */
+export const VIEWPORT_CLASSES = 'relative w-full overflow-hidden';
+
+/** Flex track that holds every slide side-by-side. */
+export const TRACK_CLASSES = 'flex w-full transition-transform duration-300 ease-out';
+
+/** Each slide occupies the full viewport width. */
+export const SLIDE_CLASSES = 'w-full shrink-0';
+
+/** Dots row below the slides. */
+export const DOTS_ROW_CLASSES = 'mt-spacing-lg flex w-full justify-center';

package/src/components/Carousel/index.ts

@@ -0,0 +1,2 @@
+export { Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel.types';

package/src/components/CarouselArrow/CarouselArrow.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { CarouselArrowProps } from './CarouselArrow.types';
+import {
+  SIZE_CLASSES,
+  ICON_SIZE_CLASSES,
+  VARIANT_CLASSES,
+  DISABLED_CLASSES,
+  FOCUS_RING_CLASSES,
+} from './CarouselArrow.variants';
+import { ArrowLeft01Icon, ArrowRight01Icon } from '../../icons/IconFactory';
+
+/**
+ * CarouselArrow — a round navigation button for carousels. Use `direction`
+ * (`previous` / `next`) instead of `left` / `right` so the arrow flips
+ * automatically under RTL. Five visual variants, three sizes.
+ */
+export const CarouselArrow = forwardRef<HTMLButtonElement, CarouselArrowProps>(
+  function CarouselArrow(
+    {
+      direction = 'next',
+      size = 'md',
+      variant = 'brand',
+      disabled = false,
+      ariaLabel,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const isDisabled = disabled;
+    const variantClass = isDisabled
+      ? DISABLED_CLASSES[variant]
+      : VARIANT_CLASSES[variant];
+
+    const Icon = direction === 'previous' ? ArrowLeft01Icon : ArrowRight01Icon;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="carousel-arrow"
+        data-direction={direction}
+        data-size={size}
+        data-variant={variant}
+        disabled={isDisabled}
+        aria-label={
+          ariaLabel ?? (direction === 'next' ? 'Next slide' : 'Previous slide')
+        }
+        className={cn(
+          'inline-flex shrink-0 items-center justify-center rounded-full motion-feedback',
+          isDisabled ? 'cursor-not-allowed' : 'cursor-pointer',
+          SIZE_CLASSES[size],
+          variantClass,
+          !isDisabled && FOCUS_RING_CLASSES[variant],
+          className,
+        )}
+        {...rest}
+      >
+        <Icon className={cn(ICON_SIZE_CLASSES[size], 'rtl:-scale-x-100')} />
+      </button>
+    );
+  },
+);

package/src/components/CarouselArrow/CarouselArrow.types.ts

@@ -0,0 +1,26 @@
+import type { ButtonHTMLAttributes } from 'react';
+
+export type CarouselArrowSize = 'sm' | 'md' | 'lg';
+
+/** Arrow direction. Logical: `previous` / `next` flip with RTL; `left`/`right` are physical. */
+export type CarouselArrowDirection = 'previous' | 'next';
+
+/** Visual style of the round arrow button. */
+export type CarouselArrowVariant =
+  | 'brand'
+  | 'neutral'
+  | 'subtle'
+  | 'outline'
+  | 'on-color';
+
+export interface CarouselArrowProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  /** Which direction the arrow points. @default 'next' */
+  direction?: CarouselArrowDirection;
+  /** Size of the button. @default 'md' */
+  size?: CarouselArrowSize;
+  /** Visual style. @default 'brand' */
+  variant?: CarouselArrowVariant;
+  /** Accessible label. Defaults to "Previous slide" / "Next slide". */
+  ariaLabel?: string;
+}

package/src/components/CarouselArrow/CarouselArrow.variants.ts

@@ -0,0 +1,83 @@
+import type { CarouselArrowSize, CarouselArrowVariant } from './CarouselArrow.types';
+
+/** Button dimensions per size (Figma: 32 / 40 / 48). */
+export const SIZE_CLASSES: Record<CarouselArrowSize, string> = {
+  sm: 'size-[32px]',
+  md: 'size-[40px]',
+  lg: 'size-[48px]',
+};
+
+/** Inner chevron icon dimensions per size (uses global icon tokens). */
+export const ICON_SIZE_CLASSES: Record<CarouselArrowSize, string> = {
+  sm: 'size-icon-sm',
+  md: 'size-icon-md',
+  lg: 'size-icon-lg',
+};
+
+/** Enabled variant styles (background/border/text + hover/active, light + dark). */
+export const VARIANT_CLASSES: Record<CarouselArrowVariant, string> = {
+  brand: [
+    'bg-[rgba(27,131,84,1)] text-white',
+    'hover:bg-[rgba(22,106,69,1)]',
+    'active:bg-[rgba(16,70,49,1)]',
+    'dark:bg-[rgba(34,164,105,1)] dark:text-white',
+    'dark:hover:bg-[rgba(22,106,69,1)]',
+    'dark:active:bg-[rgba(16,70,49,1)]',
+  ].join(' '),
+  neutral: [
+    'bg-[rgba(243,244,246,1)] text-[rgba(13,18,28,1)]',
+    'hover:bg-[rgba(243,244,246,1)]',
+    'active:bg-[rgba(229,231,235,1)]',
+    'dark:bg-[rgba(44,57,79,1)] dark:text-[rgba(229,231,235,1)]',
+    'dark:hover:bg-[rgba(55,65,81,1)]',
+    'dark:active:bg-[rgba(75,85,99,1)]',
+  ].join(' '),
+  subtle: [
+    'bg-transparent text-[rgba(31,42,55,1)]',
+    'hover:bg-[rgba(243,244,246,1)]',
+    'active:bg-[rgba(229,231,235,1)]',
+    'dark:bg-transparent dark:text-[rgba(229,231,235,1)]',
+    'dark:hover:bg-[rgba(29,41,57,1)]',
+    'dark:active:bg-[rgba(44,57,79,1)]',
+  ].join(' '),
+  outline: [
+    'border border-[rgba(210,214,219,1)] bg-transparent text-[rgba(31,42,55,1)]',
+    'hover:bg-[rgba(249,250,251,1)]',
+    'active:bg-[rgba(229,231,235,1)]',
+    'dark:border-[rgba(55,65,81,1)] dark:text-[rgba(229,231,235,1)]',
+    'dark:hover:bg-[rgba(29,41,57,1)]',
+    'dark:active:bg-[rgba(44,57,79,1)]',
+  ].join(' '),
+  'on-color': [
+    'bg-[rgba(255,255,255,0.2)] text-white backdrop-blur-sm',
+    'hover:bg-[rgba(255,255,255,0.3)]',
+    'active:bg-[rgba(255,255,255,0.4)]',
+  ].join(' '),
+};
+
+/** Disabled styles per variant. */
+export const DISABLED_CLASSES: Record<CarouselArrowVariant, string> = {
+  brand:
+    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] dark:bg-[rgba(44,57,79,1)] dark:text-[rgba(75,85,99,1)]',
+  neutral:
+    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] dark:bg-[rgba(44,57,79,1)] dark:text-[rgba(75,85,99,1)]',
+  subtle:
+    'bg-[rgba(249,250,251,1)] text-[rgba(157,164,174,1)] dark:bg-[rgba(17,25,39,1)] dark:text-[rgba(75,85,99,1)]',
+  outline:
+    'border border-[rgba(229,231,235,1)] bg-transparent text-[rgba(157,164,174,1)] dark:border-[rgba(44,57,79,1)] dark:text-[rgba(75,85,99,1)]',
+  'on-color': 'bg-[rgba(255,255,255,0.1)] text-[rgba(255,255,255,0.4)]',
+};
+
+/** Focus ring per variant — brand uses green, neutral/subtle/outline use near-black, on-color uses white. */
+export const FOCUS_RING_CLASSES: Record<CarouselArrowVariant, string> = {
+  brand:
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[rgba(17,25,39,1)]',
+  neutral:
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,0.7)] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[rgba(17,25,39,1)]',
+  subtle:
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,0.7)] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[rgba(17,25,39,1)]',
+  outline:
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,0.7)] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[rgba(17,25,39,1)]',
+  'on-color':
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(255,255,255,0.7)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent',
+};