sdaia-ui 1.0.1 → 1.0.2

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

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

@@ -1,139 +0,0 @@
-/* ──────────────────────────────────────────────────────────────
- * 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

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

package/src/components/Carousel/Carousel.tsx

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

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

@@ -1,17 +0,0 @@
-/** 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

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

package/src/components/CarouselArrow/CarouselArrow.tsx

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

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

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