sdaia-ui 1.0.1

package/src/components/CarouselArrow/index.ts

@@ -0,0 +1,7 @@
+export { CarouselArrow } from './CarouselArrow';
+export type {
+  CarouselArrowProps,
+  CarouselArrowSize,
+  CarouselArrowDirection,
+  CarouselArrowVariant,
+} from './CarouselArrow.types';

package/src/components/CarouselControlsGroup/CarouselControlsGroup.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { CarouselControlsGroupProps } from './CarouselControlsGroup.types';
+import {
+  DOT_SIZE_CLASSES,
+  GAP_CLASSES,
+  ON_SHAPE_PADDING_CLASSES,
+  STYLE_MAP,
+} from './CarouselControlsGroup.variants';
+
+/**
+ * CarouselControlsGroup — pagination indicator dots for a carousel. Each dot
+ * is an accessible `<button>`; callers receive `onChange(index)` when a dot is
+ * clicked. Three sizes, three visual styles (brand / neutral / on-color), and
+ * an optional rounded pill container (`onShape`).
+ */
+export const CarouselControlsGroup = forwardRef<HTMLDivElement, CarouselControlsGroupProps>(
+  function CarouselControlsGroup(
+    {
+      count,
+      activeIndex = 0,
+      onChange,
+      size = 'sm',
+      variant = 'brand',
+      onShape = false,
+      ariaLabel = 'Carousel pagination',
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const style = STYLE_MAP[variant];
+    const dotSize = DOT_SIZE_CLASSES[size];
+    const gap = GAP_CLASSES[size];
+
+    return (
+      <div
+        ref={ref}
+        data-slot="carousel-controls-group"
+        data-size={size}
+        data-variant={variant}
+        role="tablist"
+        aria-label={ariaLabel}
+        className={cn(
+          'inline-flex items-center',
+          gap,
+          onShape && 'rounded-[9999px]',
+          onShape && ON_SHAPE_PADDING_CLASSES[size],
+          onShape && style.shape,
+          className,
+        )}
+        {...rest}
+      >
+        {Array.from({ length: Math.max(0, count) }, (_, i) => {
+          const isActive = i === activeIndex;
+          return (
+            <button
+              key={i}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              aria-label={`Go to slide ${i + 1}`}
+              tabIndex={isActive ? 0 : -1}
+              onClick={() => onChange?.(i)}
+              data-slot="carousel-dot"
+              data-active={isActive ? 'true' : 'false'}
+              className={cn(
+                'shrink-0 rounded-full outline-none motion-feedback cursor-pointer',
+                dotSize,
+                isActive ? style.active : style.inactive,
+                style.focusRing,
+              )}
+            />
+          );
+        })}
+      </div>
+    );
+  },
+);

package/src/components/CarouselControlsGroup/CarouselControlsGroup.types.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react';
+
+export type CarouselControlsGroupSize = 'sm' | 'md' | 'lg';
+
+/** Visual style: brand color, neutral gray, or on-color (for dark/image backgrounds). */
+export type CarouselControlsGroupStyle = 'brand' | 'neutral' | 'on-color';
+
+export interface CarouselControlsGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Total number of dots. */
+  count: number;
+  /** Currently active dot index (0-based). */
+  activeIndex?: number;
+  /** Called when a dot is clicked. */
+  onChange?: (index: number) => void;
+  /** Dot size. @default 'sm' */
+  size?: CarouselControlsGroupSize;
+  /** Visual style variant. @default 'brand' */
+  variant?: CarouselControlsGroupStyle;
+  /** Wrap the dots in a rounded neutral pill container. @default false */
+  onShape?: boolean;
+  /** Accessible label for the group. @default 'Carousel pagination' */
+  ariaLabel?: string;
+}

package/src/components/CarouselControlsGroup/CarouselControlsGroup.variants.ts

@@ -0,0 +1,60 @@
+import type {
+  CarouselControlsGroupSize,
+  CarouselControlsGroupStyle,
+} from './CarouselControlsGroup.types';
+
+/** Dot dimensions per size (Figma: 8 / 12 / 16). */
+export const DOT_SIZE_CLASSES: Record<CarouselControlsGroupSize, string> = {
+  sm: 'size-[8px]',
+  md: 'size-[12px]',
+  lg: 'size-[16px]',
+};
+
+/** Gap between dots. Figma uses spacing-md (8px) for all sizes. */
+export const GAP_CLASSES: Record<CarouselControlsGroupSize, string> = {
+  sm: 'gap-spacing-md',
+  md: 'gap-spacing-md',
+  lg: 'gap-spacing-md',
+};
+
+/** Pill container padding when `onShape` is true. */
+export const ON_SHAPE_PADDING_CLASSES: Record<CarouselControlsGroupSize, string> = {
+  sm: 'p-spacing-md',
+  md: 'p-spacing-lg',
+  lg: 'p-spacing-xl',
+};
+
+interface StyleColors {
+  /** Active dot background. */
+  active: string;
+  /** Inactive dot background. */
+  inactive: string;
+  /** Pill container background when `onShape` is true. */
+  shape: string;
+  /** Focus ring color. */
+  focusRing: string;
+}
+
+export const STYLE_MAP: Record<CarouselControlsGroupStyle, StyleColors> = {
+  brand: {
+    active: 'bg-[rgba(27,131,84,1)] dark:bg-[rgba(34,164,105,1)]',
+    inactive: 'bg-[rgba(229,231,235,1)] dark:bg-[rgba(44,57,79,1)]',
+    shape: 'bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]',
+    focusRing:
+      'focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,1)] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[rgba(17,25,39,1)]',
+  },
+  neutral: {
+    active: 'bg-[rgba(31,42,55,1)] dark:bg-[rgba(229,231,235,1)]',
+    inactive: 'bg-[rgba(210,214,219,1)] dark:bg-[rgba(55,65,81,1)]',
+    shape: 'bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]',
+    focusRing:
+      'focus-visible:ring-2 focus-visible:ring-[rgba(108,115,127,1)] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[rgba(17,25,39,1)]',
+  },
+  'on-color': {
+    active: 'bg-white',
+    inactive: 'bg-[rgba(255,255,255,0.4)]',
+    shape: 'bg-[rgba(0,0,0,0.35)]',
+    focusRing:
+      'focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[rgba(0,0,0,0.35)]',
+  },
+};

package/src/components/CarouselControlsGroup/index.ts

@@ -0,0 +1,6 @@
+export { CarouselControlsGroup } from './CarouselControlsGroup';
+export type {
+  CarouselControlsGroupProps,
+  CarouselControlsGroupSize,
+  CarouselControlsGroupStyle,
+} from './CarouselControlsGroup.types';

package/src/components/CarouselImage/CarouselImage.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useState,
+} from 'react';
+import { cn } from '../../lib/cn';
+import { CarouselArrow } from '../CarouselArrow/CarouselArrow';
+import { CarouselControlsGroup } from '../CarouselControlsGroup/CarouselControlsGroup';
+import type { CarouselImageProps } from './CarouselImage.types';
+import {
+  ROOT_OVERLAY_BASE,
+  ROOT_OVERLAY_SIZE,
+  ROOT_SIDE_BASE,
+  ROOT_SIDE_SIZE,
+  CONTROLS_OVERLAY_CLASSES,
+  SIDE_VIEWPORT_CLASSES,
+  SLIDE_CLASSES,
+  SLIDE_ACTIVE_CLASSES,
+  SLIDE_INACTIVE_CLASSES,
+  IMAGE_CLASSES,
+} from './CarouselImage.variants';
+
+export const CarouselImage = forwardRef<HTMLDivElement, CarouselImageProps>(
+  function CarouselImage(
+    {
+      images,
+      activeIndex,
+      defaultIndex = 0,
+      onChange,
+      loop = true,
+      autoplayMs,
+      showArrows = true,
+      showDots = true,
+      overlay = true,
+      size = 'md',
+      arrowVariant = 'brand',
+      arrowSize = 'md',
+      dotsVariant = 'brand',
+      dotsSize = 'sm',
+      radiusClassName = 'rounded-[8px]',
+      ariaLabel = 'Image carousel',
+      dir,
+      className,
+      style,
+      ...rest
+    },
+    ref,
+  ) {
+    const count = images.length;
+    const reactId = useId();
+
+    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 setIndex = useCallback(
+      (next: number) => {
+        if (count === 0) return;
+        const target = loop
+          ? ((next % count) + count) % count
+          : 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]);
+
+    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;
+
+    const slides = images.map((img, i) => {
+      const isActive = i === index;
+      const content = (
+        <img
+          src={img.src}
+          alt={img.alt}
+          className={IMAGE_CLASSES}
+          draggable={false}
+        />
+      );
+      return (
+        <div
+          key={i}
+          data-slot="carousel-image-slide"
+          role="group"
+          aria-roledescription="slide"
+          aria-label={`${i + 1} of ${count}`}
+          aria-hidden={!isActive}
+          className={cn(SLIDE_CLASSES, isActive ? SLIDE_ACTIVE_CLASSES : SLIDE_INACTIVE_CLASSES)}
+        >
+          {img.href ? (
+            <a href={img.href} className="block h-full w-full">
+              {content}
+            </a>
+          ) : (
+            content
+          )}
+        </div>
+      );
+    });
+
+    /* ── Overlay layout ───────────────────────────────────────────────────── */
+    if (overlay) {
+      return (
+        <section
+          ref={ref}
+          data-slot="carousel-image"
+          data-size={size}
+          aria-roledescription="carousel"
+          aria-label={ariaLabel}
+          dir={dir}
+          className={cn(ROOT_OVERLAY_BASE, ROOT_OVERLAY_SIZE[size], radiusClassName, className)}
+          style={style}
+          {...rest}
+        >
+          {/* Slides fill the entire card */}
+          {slides}
+
+          {/* Controls overlaid with padding */}
+          <div className={CONTROLS_OVERLAY_CLASSES}>
+            {/* Top spacer — matches Figma 20 px "Disable wrapper" */}
+            <div className="h-[20px] shrink-0 w-full" aria-hidden="true" />
+
+            {/* Arrows row */}
+            {showArrows && count > 1 ? (
+              <div className="flex justify-between items-center shrink-0 w-full pointer-events-auto">
+                <CarouselArrow
+                  direction="previous"
+                  size={arrowSize}
+                  variant={arrowVariant}
+                  disabled={!canPrev}
+                  onClick={goPrev}
+                  aria-controls={`${reactId}-slides`}
+                />
+                <CarouselArrow
+                  direction="next"
+                  size={arrowSize}
+                  variant={arrowVariant}
+                  disabled={!canNext}
+                  onClick={goNext}
+                  aria-controls={`${reactId}-slides`}
+                />
+              </div>
+            ) : (
+              <div className="shrink-0 w-full h-[32px]" aria-hidden="true" />
+            )}
+
+            {/* Dots row */}
+            {showDots && count > 1 ? (
+              <div className="flex justify-center items-end h-[20px] shrink-0 w-full pointer-events-auto">
+                <CarouselControlsGroup
+                  count={count}
+                  activeIndex={index}
+                  onChange={setIndex}
+                  size={dotsSize}
+                  variant={dotsVariant}
+                />
+              </div>
+            ) : (
+              <div className="h-[20px] shrink-0 w-full" aria-hidden="true" />
+            )}
+          </div>
+        </section>
+      );
+    }
+
+    /* ── Side-arrows layout ───────────────────────────────────────────────── */
+    return (
+      <section
+        ref={ref}
+        data-slot="carousel-image"
+        data-size={size}
+        aria-roledescription="carousel"
+        aria-label={ariaLabel}
+        dir={dir}
+        className={cn(ROOT_SIDE_BASE, ROOT_SIDE_SIZE[size], radiusClassName, className)}
+        style={style}
+        {...rest}
+      >
+        {/* Previous arrow */}
+        {showArrows && count > 1 ? (
+          <div className="shrink-0">
+            <CarouselArrow
+              direction="previous"
+              size={arrowSize}
+              variant={arrowVariant}
+              disabled={!canPrev}
+              onClick={goPrev}
+              aria-controls={`${reactId}-slides`}
+            />
+          </div>
+        ) : null}
+
+        {/* Image + dots */}
+        <div
+          id={`${reactId}-slides`}
+          className="flex-1 min-w-0 flex flex-col gap-spacing-xl items-center"
+          aria-live={autoplayMs ? 'off' : 'polite'}
+        >
+          <div
+            data-slot="carousel-image-viewport"
+            className={cn(SIDE_VIEWPORT_CLASSES, radiusClassName)}
+          >
+            {slides}
+          </div>
+
+          {showDots && count > 1 ? (
+            <CarouselControlsGroup
+              count={count}
+              activeIndex={index}
+              onChange={setIndex}
+              size={dotsSize}
+              variant={dotsVariant}
+            />
+          ) : null}
+        </div>
+
+        {/* Next arrow */}
+        {showArrows && count > 1 ? (
+          <div className="shrink-0">
+            <CarouselArrow
+              direction="next"
+              size={arrowSize}
+              variant={arrowVariant}
+              disabled={!canNext}
+              onClick={goNext}
+              aria-controls={`${reactId}-slides`}
+            />
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/CarouselImage/CarouselImage.types.ts

@@ -0,0 +1,72 @@
+import type { HTMLAttributes } from 'react';
+import type {
+  CarouselArrowSize,
+  CarouselArrowVariant,
+} from '../CarouselArrow/CarouselArrow.types';
+import type {
+  CarouselControlsGroupSize,
+  CarouselControlsGroupStyle,
+} from '../CarouselControlsGroup/CarouselControlsGroup.types';
+
+export interface CarouselImageItem {
+  /** Image URL. */
+  src: string;
+  /** Required alt text for accessibility. */
+  alt: string;
+  /** Optional link — if provided, the slide becomes an anchor. */
+  href?: string;
+}
+
+/**
+ * Size presets matching Figma node 4455:37316 `Carousel Image`:
+ *   `sm`   — max-w 360px (Figma overlay dimensions)
+ *   `md`   — max-w 418px (Figma side-arrows dimensions, default)
+ *   `full` — fills the parent's inline size with no max-width
+ */
+export type CarouselImageSize = 'sm' | 'md' | 'full';
+
+export interface CarouselImageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'dir'> {
+  /** Layout direction — pass `'rtl'` for Arabic/Hebrew contexts. */
+  dir?: 'ltr' | 'rtl';
+  /** Images to display, one per slide. */
+  images: CarouselImageItem[];
+  /** Controlled active index. */
+  activeIndex?: number;
+  /** Initial slide index when uncontrolled. @default 0 */
+  defaultIndex?: number;
+  /** Called whenever the active slide changes. */
+  onChange?: (index: number) => void;
+  /** Wrap around when navigating past the first/last slide. @default true */
+  loop?: boolean;
+  /** Auto-advance interval in ms. 0 / undefined disables autoplay. */
+  autoplayMs?: number;
+  /** Show arrow buttons. @default true */
+  showArrows?: boolean;
+  /** Show pagination dots. @default true */
+  showDots?: boolean;
+  /**
+   * When true, arrows and dots overlay the image (image fills the entire card).
+   * When false, arrows sit on the sides and dots sit below the image.
+   * @default true
+   */
+  overlay?: boolean;
+  /**
+   * Size preset from the Figma spec. Sets the inline max-width and a
+   * matching aspect ratio so the carousel never balloons to the full
+   * page width. Pass `'full'` to opt out of the constraint.
+   * @default 'md'
+   */
+  size?: CarouselImageSize;
+  /** Visual style of the arrows. @default 'brand' */
+  arrowVariant?: CarouselArrowVariant;
+  /** Size of the arrows. @default 'md' */
+  arrowSize?: CarouselArrowSize;
+  /** Visual style of the pagination dots. @default 'on-color' */
+  dotsVariant?: CarouselControlsGroupStyle;
+  /** Size of the pagination dots. @default 'sm' */
+  dotsSize?: CarouselControlsGroupSize;
+  /** Border radius class applied to the viewport. @default 'rounded-[8px]' */
+  radiusClassName?: string;
+  /** Accessible label for the carousel region. */
+  ariaLabel?: string;
+}

package/src/components/CarouselImage/CarouselImage.variants.ts

@@ -0,0 +1,43 @@
+import type { CarouselImageSize } from './CarouselImage.types';
+
+// ── Overlay mode (image fills entire card) ─────────────────────────────────
+
+export const ROOT_OVERLAY_BASE =
+  'relative w-full mx-auto overflow-hidden bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]';
+
+/** Max-width + explicit height per size in overlay mode.
+ *  Explicit height is required because all slide children are position:absolute
+ *  and would give the container 0 natural height otherwise. */
+export const ROOT_OVERLAY_SIZE: Record<CarouselImageSize, string> = {
+  sm:   'max-w-[360px] h-[210px]',
+  md:   'max-w-[418px] h-[244px]',
+  full: 'aspect-[16/9]',
+};
+
+/** Absolutely-positioned overlay that holds the arrow row + dots row. */
+export const CONTROLS_OVERLAY_CLASSES =
+  'absolute inset-0 z-[2] flex flex-col justify-between p-spacing-xl pointer-events-none';
+
+// ── Side-arrows mode (arrows outside, image centered, dots below) ──────────
+
+export const ROOT_SIDE_BASE =
+  'relative w-full mx-auto flex items-center gap-spacing-xl p-spacing-xl';
+
+export const ROOT_SIDE_SIZE: Record<CarouselImageSize, string> = {
+  sm:   'max-w-[360px] h-[244px]',
+  md:   'max-w-[418px] h-[244px]',
+  full: 'h-[244px]',
+};
+
+/** Image viewport inside side-arrows mode — fixed Figma height 188 px. */
+export const SIDE_VIEWPORT_CLASSES =
+  'relative w-full h-[188px] overflow-hidden bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]';
+
+// ── Shared slide classes ────────────────────────────────────────────────────
+
+export const SLIDE_CLASSES = 'absolute inset-0 motion-transition';
+export const SLIDE_ACTIVE_CLASSES = 'opacity-100 z-[1] pointer-events-auto';
+export const SLIDE_INACTIVE_CLASSES = 'opacity-0 z-0 pointer-events-none';
+
+/** Image fills the slide with cover behavior. */
+export const IMAGE_CLASSES = 'h-full w-full object-cover';

package/src/components/CarouselImage/index.ts

@@ -0,0 +1,6 @@
+export { CarouselImage } from './CarouselImage';
+export type {
+  CarouselImageProps,
+  CarouselImageItem,
+  CarouselImageSize,
+} from './CarouselImage.types';

package/src/components/Chart/Chart.tsx

@@ -0,0 +1,3 @@
+// Chart is the full grouped bar chart (Figma node 5489:77559).
+// The 128×64 sparkline widget is available as Sparkline.
+export { BarChart as Chart } from '../BarChart';

package/src/components/Chart/Chart.types.ts

@@ -0,0 +1,2 @@
+// ChartProps now describes the full bar chart. Use SparklineProps for the sparkline widget.
+export type { BarChartProps as ChartProps } from '../BarChart';

package/src/components/Chart/Chart.variants.ts

@@ -0,0 +1,2 @@
+// All variants for the full bar chart live in BarChart.variants.ts.
+// Sparkline-specific variants have moved to Sparkline.variants.ts.

package/src/components/Chart/index.ts

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

package/src/components/ChartBadge/ChartBadge.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { ArrowDownLeft01Icon, ArrowUpRight01Icon } from '../../icons/IconFactory';
+import type { ChartBadgeProps } from './ChartBadge.types';
+import {
+  ICON_WRAPPER,
+  ROOT_BASE,
+  VALUE_CLASS,
+  VARIANT_CLASSES,
+} from './ChartBadge.variants';
+
+/**
+ * Compact pill used inside chart panels (PieChartPanel / DonutChartPanel)
+ * to communicate a single metric's delta. Purely display — no interactions.
+ *
+ * RTL handling: setting `dir="rtl"` on the root reverses the flex row so
+ * the arrow icon lands on the end edge automatically, matching the Figma
+ * `RTL=True` frames.
+ */
+export const ChartBadge = forwardRef<HTMLDivElement, ChartBadgeProps>(
+  function ChartBadge(
+    {
+      type = 'increase',
+      value,
+      hideIcon = false,
+      icon,
+      dir: dirProp,
+      rtl = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+    const isDecrease = type === 'decrease';
+    const DefaultIcon = isDecrease ? ArrowDownLeft01Icon : ArrowUpRight01Icon;
+
+    const iconNode = hideIcon ? null : (
+      <span data-slot="icon" aria-hidden="true" className={ICON_WRAPPER}>
+        {icon ?? <DefaultIcon />}
+      </span>
+    );
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="chart-badge"
+        data-type={type}
+        className={cn(ROOT_BASE, VARIANT_CLASSES[type], className)}
+        {...rest}
+      >
+        {iconNode}
+        <span data-slot="value" className={VALUE_CLASS}>
+          {value}
+        </span>
+      </div>
+    );
+  },
+);

package/src/components/ChartBadge/ChartBadge.types.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Semantic direction of the change being communicated by the badge. */
+export type ChartBadgeType = 'increase' | 'decrease';
+
+export interface ChartBadgeProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Direction of change.
+   * - `increase` → green pill with ↗ arrow (success semantics)
+   * - `decrease` → red pill with ↙ arrow (error semantics)
+   * @default 'increase'
+   */
+  type?: ChartBadgeType;
+  /** The numeric / formatted value shown inside the pill (e.g. `'12%'`, `'+4.2'`). */
+  value: ReactNode;
+  /** Hide the directional arrow icon. @default false */
+  hideIcon?: boolean;
+  /**
+   * Override the arrow icon. By default renders `ArrowUpRight01Icon`
+   * (rotated 180° for `decrease`).
+   */
+  icon?: ReactNode;
+  /** Direction — applied to the root and drives RTL layout (icon end-edge). */
+  dir?: 'ltr' | 'rtl';
+  /** @deprecated Use `dir="rtl"` instead. */
+  rtl?: boolean;
+}