sdaia-ui 1.0.1 → 1.0.2

package/src/components/CarouselArrow/index.ts

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

package/src/components/CarouselControlsGroup/CarouselControlsGroup.tsx

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

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

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

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

package/src/components/CarouselImage/CarouselImage.tsx

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

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

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

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

package/src/components/Chart/Chart.tsx

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

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

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

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

package/src/components/ChartBadge/ChartBadge.tsx

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

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