sdaia-ui 1.0.1 → 1.0.2

package/src/components/Chip/Chip.tsx

@@ -1,245 +0,0 @@
-'use client';
-
-import { forwardRef, type KeyboardEvent, type MouseEvent } from 'react';
-import { cn } from '../../lib/cn';
-import type { ChipProps } from './Chip.types';
-import {
-  FOCUS_RING,
-  VARIANT_CLASSES,
-  SELECTED_CLASSES,
-  DISABLED_CLASSES,
-  SIZE_CLASSES,
-  RADIUS_CLASSES,
-  ICON_SIZE_CLASSES,
-  AVATAR_SIZE_CLASSES,
-} from './Chip.variants';
-
-/** Base layout — shared across all variants and sizes */
-const BASE =
-  'inline-flex items-center justify-center shrink-0 cursor-pointer motion-feedback select-none';
-
-/**
- * Chip — a compact, interactive label used to represent filters, tags,
- * or selectable options.
- *
- * ### Variants
- * `soft` (default) — primary-tinted background, dark green text.
- * `solid` — filled primary green background, white text.
- * `neutral` — gray background, dark text.
- * `outline` — transparent with a neutral border, dark text.
- *
- * ### Responsive sizing
- * Size steps down automatically on narrow viewports:
- *   `size="md"` → small on mobile, medium on tablet (≥768px)
- *   `size="lg"` → medium on mobile, large on tablet (≥768px)
- *   `size="sm"` → always small
- *
- * ### Clickable icon slots
- * Pass `onTrailingIconClick` (and/or `onLeadingIconClick`) to turn that slot
- * into an independent interactive area (`role="button"` span — not a nested
- * `<button>`, which is invalid HTML). Enter/Space keyboard activation is wired
- * automatically. The event is stopped from propagating to the chip's own
- * `onClick`, so a dismiss "×" won't also toggle the chip.
- *
- * ```tsx
- * <Chip
- *   trailingIcon={<XIcon />}
- *   onTrailingIconClick={() => removeFilter(id)}
- * >
- *   Electronics
- * </Chip>
- * ```
- *
- * ### RTL
- * No `rtl` prop needed — the flex container automatically mirrors when an
- * ancestor sets `dir="rtl"` (leading/trailing slots swap sides).
- *
- * Figma source: node 4105:6893 (Chip)
- */
-export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
-  function Chip(
-    {
-      variant = 'soft',
-      size = 'md',
-      rounded = true,
-      disabled = false,
-      selected = false,
-      avatar = false,
-      avatarSrc = '/images/avatar.webp',
-      leadingIcon,
-      trailingIcon,
-      onLeadingIconClick,
-      onTrailingIconClick,
-      leadingIconLabel,
-      trailingIconLabel = 'Remove',
-      as: Tag = 'button',
-      children,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    /* ── Radius ────────────────────────────────────────────────── */
-    const radiusClass = rounded ? 'rounded-full' : RADIUS_CLASSES[size];
-
-    /* ── State priority: disabled › selected › default ─────────── */
-    const stateClass = disabled
-      ? DISABLED_CLASSES[variant]
-      : selected
-        ? SELECTED_CLASSES[variant]
-        : VARIANT_CLASSES[variant];
-
-    /* ── Icon slot class ────────────────────────────────────────── */
-    const iconWrapBase = cn(
-      'shrink-0 flex items-center justify-center',
-      ICON_SIZE_CLASSES[size],
-    );
-
-    /*
-     * Clickable icon slot class.
-     *
-     * We use `role="button"` span rather than a real <button> because
-     * nesting <button> inside <button> is invalid HTML and causes a React
-     * hydration error. The span gets a focus ring and keyboard handling
-     * (Enter/Space) in the JSX below, making it fully accessible.
-     */
-    const iconBtnClass = cn(
-      iconWrapBase,
-      'rounded-full cursor-pointer',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-1',
-    );
-
-    /* ── Shared keyboard handler for icon role="button" spans ───── */
-    const makeIconKeyDown =
-      (handler: (e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void) =>
-      (e: KeyboardEvent<HTMLSpanElement>) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          e.stopPropagation();
-          if (!disabled) handler(e);
-        }
-      };
-
-    /* ── Disabled handling per element type ─────────────────────── */
-    const isButton = Tag === 'button';
-
-    return (
-      <Tag
-        ref={ref as React.Ref<HTMLButtonElement>}
-        {...(isButton && disabled ? { disabled: true } : {})}
-        {...(isButton ? { type: 'button' } : {})}
-        aria-pressed={selected}
-        aria-disabled={disabled || undefined}
-        data-slot="chip"
-        data-variant={variant}
-        data-size={size}
-        data-selected={selected || undefined}
-        data-disabled={disabled || undefined}
-        className={cn(
-          BASE,
-          SIZE_CLASSES[size],
-          radiusClass,
-          FOCUS_RING,
-          stateClass,
-          className,
-        )}
-        {...rest}
-      >
-        {/* ── Avatar slot (replaces leading icon when avatar=true) ── */}
-        {avatar && (
-          <span
-            aria-hidden="true"
-            data-slot="chip-avatar"
-            className={cn(
-              'shrink-0 rounded-full overflow-hidden bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)]',
-              AVATAR_SIZE_CLASSES[size],
-            )}
-          >
-            <img
-              src={avatarSrc}
-              alt=""
-              className="size-full object-cover pointer-events-none rounded-full"
-            />
-          </span>
-        )}
-
-        {/* ── Leading icon slot — hidden when avatar=true ────────── */}
-        {!avatar && leadingIcon != null && (
-          onLeadingIconClick ? (
-            /*
-             * `role="button"` span — NOT a <button>.
-             * Nesting <button> inside <button> is invalid HTML and causes
-             * a React hydration error. The span is fully keyboard-accessible:
-             * Enter/Space fire the handler via onKeyDown below.
-             */
-            <span
-              role="button"
-              aria-label={leadingIconLabel}
-              aria-disabled={disabled || undefined}
-              tabIndex={disabled ? -1 : 0}
-              data-slot="chip-leading"
-              onClick={(e) => {
-                e.stopPropagation();
-                if (!disabled) onLeadingIconClick(e);
-              }}
-              onKeyDown={makeIconKeyDown(onLeadingIconClick)}
-              className={iconBtnClass}
-            >
-              {leadingIcon}
-            </span>
-          ) : (
-            /* Non-interactive — hide from assistive tech */
-            <span
-              aria-hidden="true"
-              data-slot="chip-leading"
-              className={iconWrapBase}
-            >
-              {leadingIcon}
-            </span>
-          )
-        )}
-
-        {/* ── Label ─────────────────────────────────────────────── */}
-        {children != null && (
-          <span data-slot="chip-label" className="truncate leading-none">
-            {children}
-          </span>
-        )}
-
-        {/* ── Trailing icon slot ─────────────────────────────────── */}
-        {trailingIcon != null && (
-          onTrailingIconClick ? (
-            /*
-             * `role="button"` span — NOT a <button>.
-             * Same reasoning as the leading slot above.
-             */
-            <span
-              role="button"
-              aria-label={trailingIconLabel}
-              aria-disabled={disabled || undefined}
-              tabIndex={disabled ? -1 : 0}
-              data-slot="chip-trailing"
-              onClick={(e) => {
-                e.stopPropagation();
-                if (!disabled) onTrailingIconClick(e);
-              }}
-              onKeyDown={makeIconKeyDown(onTrailingIconClick)}
-              className={iconBtnClass}
-            >
-              {trailingIcon}
-            </span>
-          ) : (
-            /* Non-interactive — hide from assistive tech */
-            <span
-              aria-hidden="true"
-              data-slot="chip-trailing"
-              className={iconWrapBase}
-            >
-              {trailingIcon}
-            </span>
-          )
-        )}
-      </Tag>
-    );
-  },
-);

package/src/components/Chip/Chip.types.ts

@@ -1,83 +0,0 @@
-import type { ButtonHTMLAttributes, ElementType, KeyboardEvent, MouseEvent, ReactNode } from 'react';
-
-/** Visual style of the chip */
-export type ChipVariant = 'soft' | 'solid' | 'neutral' | 'outline';
-
-/** Size of the chip */
-export type ChipSize = 'sm' | 'md' | 'lg';
-
-export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Layout direction for RTL support. */
-  dir?: 'ltr' | 'rtl';
-  /** Visual style of the chip */
-  variant?: ChipVariant;
-  /** Size of the chip */
-  size?: ChipSize;
-  /**
-   * Pill-shaped (fully rounded) when true.
-   * When false, uses a size-based radius (lg → 8px, md/sm → 6px).
-   */
-  rounded?: boolean;
-  /** Disables the chip and prevents interaction */
-  disabled?: boolean;
-  /** Marks the chip as selected (toggled on) */
-  selected?: boolean;
-  /**
-   * Icon or node displayed before the label (direction-aware, auto-flips in RTL).
-   */
-  leadingIcon?: ReactNode;
-  /**
-   * Icon or node displayed after the label (direction-aware, auto-flips in RTL).
-   *
-   * Pair with `onTrailingIconClick` to make it an independent clickable action,
-   * e.g. an "×" dismiss button that removes the chip from a filter list without
-   * toggling the chip's own selected state.
-   */
-  trailingIcon?: ReactNode;
-  /**
-   * Called when the leading icon area is clicked or activated via keyboard.
-   * When provided, the leading icon slot renders as a `role="button"` span
-   * (not a nested `<button>` — which is invalid HTML inside the chip's own
-   * `<button>`). It receives its own focus ring and responds to Enter/Space.
-   * The event is stopped from propagating to the chip's `onClick`.
-   */
-  onLeadingIconClick?: (e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
-  /**
-   * Called when the trailing icon area is clicked or activated via keyboard.
-   * When provided, the trailing icon slot renders as a `role="button"` span
-   * (not a nested `<button>` — which is invalid HTML inside the chip's own
-   * `<button>`). It receives its own focus ring and responds to Enter/Space.
-   * The event is stopped from propagating to the chip's `onClick`.
-   *
-   * Common use-case: an "×" icon that removes the chip from a filter list
-   * without toggling the chip's selected state.
-   */
-  onTrailingIconClick?: (e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
-  /**
-   * Accessible label for the trailing icon `role="button"` span.
-   * Only relevant when `onTrailingIconClick` is provided.
-   * Defaults to "Remove".
-   */
-  trailingIconLabel?: string;
-  /**
-   * Accessible label for the leading icon `role="button"` span.
-   * Only relevant when `onLeadingIconClick` is provided.
-   */
-  leadingIconLabel?: string;
-  /**
-   * When `true`, renders a circular avatar image in the leading slot.
-   * `leadingIcon` is ignored when `avatar` is `true`.
-   * Figma: Avatar property on Chip (node 4113:9553)
-   * @default false
-   */
-  avatar?: boolean;
-  /**
-   * Image URL/path for the avatar.
-   * Only used when `avatar={true}`.
-   * @default '/images/avatar.webp'
-   */
-  avatarSrc?: string;
-  /** Override the rendered HTML element */
-  as?: ElementType;
-  children?: ReactNode;
-}

package/src/components/Chip/Chip.variants.ts

@@ -1,143 +0,0 @@
-import type { ChipVariant, ChipSize } from './Chip.types';
-
-/* ── Focus ring (shared across all variants) ──────────────────── */
-export const FOCUS_RING =
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,1)] focus-visible:ring-offset-2 dark:focus-visible:ring-[rgba(210,214,219,1)] dark:focus-visible:ring-offset-[rgba(17,25,39,1)]';
-
-/* ── Variant classes (default + hover + active states) ────────── */
-export const VARIANT_CLASSES: Record<ChipVariant, string> = {
-  /* Soft — primary-tinted background, dark green text */
-  soft: [
-    'bg-[rgba(243,252,246,1)] text-[rgba(20,87,58,1)]',
-    'hover:bg-[rgba(184,234,203,1)]',
-    'active:bg-[rgba(84,192,138,1)]',
-    'dark:bg-[rgba(20,87,58,0.2)] dark:text-[rgba(184,234,203,1)]',
-    'dark:hover:bg-[rgba(20,87,58,0.35)]',
-    'dark:active:bg-[rgba(20,87,58,0.55)]',
-  ].join(' '),
-
-  /* Solid — primary green background, white text */
-  solid: [
-    '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(27,131,84,1)] dark:text-white',
-    'dark:hover:bg-[rgba(22,106,69,1)]',
-    'dark:active:bg-[rgba(16,70,49,1)]',
-  ].join(' '),
-
-  /* Neutral — gray background, dark text */
-  neutral: [
-    'bg-[rgba(243,244,246,1)] text-[rgba(22,22,22,1)]',
-    'hover:bg-[rgba(229,231,235,1)]',
-    'active:bg-[rgba(210,214,219,1)]',
-    'dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(243,244,246,1)]',
-    'dark:hover:bg-[rgba(56,66,80,1)]',
-    'dark:active:bg-[rgba(77,87,97,1)]',
-  ].join(' '),
-
-  /* Outline — transparent with border, dark text */
-  outline: [
-    'border border-[rgba(210,214,219,1)] bg-transparent text-[rgba(22,22,22,1)]',
-    'hover:bg-[rgba(243,244,246,1)]',
-    'active:bg-[rgba(229,231,235,1)]',
-    'dark:border-[rgba(75,85,99,1)] dark:text-[rgba(243,244,246,1)]',
-    'dark:hover:bg-[rgba(31,42,55,1)]',
-    'dark:active:bg-[rgba(56,66,80,1)]',
-  ].join(' '),
-};
-
-/* ── Selected state overrides ─────────────────────────────────── */
-export const SELECTED_CLASSES: Record<ChipVariant, string> = {
-  soft:
-    'bg-[rgba(27,131,84,1)] text-white dark:bg-[rgba(27,131,84,1)] dark:text-white',
-  solid:
-    'bg-[rgba(20,87,58,1)] text-white dark:bg-[rgba(20,87,58,1)] dark:text-white',
-  neutral:
-    'bg-[rgba(56,66,80,1)] text-white dark:bg-[rgba(210,214,219,1)] dark:text-[rgba(13,18,28,1)]',
-  outline:
-    'border border-[rgba(22,22,22,1)] bg-[rgba(243,244,246,1)] text-[rgba(22,22,22,1)] dark:border-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(243,244,246,1)]',
-};
-
-/* ── Disabled state overrides ─────────────────────────────────── */
-export const DISABLED_CLASSES: Record<ChipVariant, string> = {
-  soft:
-    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] pointer-events-none dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(75,85,99,1)]',
-  solid:
-    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] pointer-events-none dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(75,85,99,1)]',
-  neutral:
-    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] pointer-events-none dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(75,85,99,1)]',
-  outline:
-    'border border-[rgba(229,231,235,1)] bg-transparent text-[rgba(157,164,174,1)] pointer-events-none dark:border-[rgba(56,66,80,1)] dark:text-[rgba(75,85,99,1)]',
-};
-
-/* ── Size classes ─────────────────────────────────────────────── */
-/*
- * Heights per Figma: lg=32, md=24, sm=22.
- * Shared padding (px-spacing-lg py-spacing-xs, gap-spacing-xs) across sizes.
- *
- * Responsive step-down behaviour (mobile-first):
- *   sm → always renders at small dimensions (22 px h, text-2xs)
- *   md → small on mobile  → medium at tablet (≥768px)
- *   lg → medium on mobile → large  at tablet (≥768px)
- *
- * This ensures chips are never oversized on narrow viewports.
- *
- * Text tokens (all responsive CSS variables):
- *   text-text-2xs  →  8px / 8px / 10px  (mobile / tablet / desktop)
- *   text-text-xs   →  8px / 10px / 12px
- *   text-text-md   → 12px / 14px / 16px
- */
-export const SIZE_CLASSES: Record<ChipSize, string> = {
-  /* Always small */
-  sm: [
-    'h-[22px] px-spacing-lg py-spacing-xs gap-spacing-xs',
-    'text-text-2xs font-[500]',
-  ].join(' '),
-
-  /* Mobile → small; Tablet+ → medium */
-  md: [
-    'h-[22px] px-spacing-lg py-spacing-xs gap-spacing-xs',
-    'text-text-xs font-[500]',
-    'md:h-[24px] md:text-text-xs',
-  ].join(' '),
-
-  /* Mobile → medium; Tablet+ → large */
-  lg: [
-    'h-[24px] px-spacing-lg py-spacing-xs gap-spacing-xs',
-    'text-text-md font-[500]',
-    'md:h-[32px] md:text-text-md',
-  ].join(' '),
-};
-
-/* ── Size-based radius (used when `rounded` is false) ─────────── */
-export const RADIUS_CLASSES: Record<ChipSize, string> = {
-  sm: 'rounded-[6px]',
-  md: 'rounded-[6px]',
-  lg: 'rounded-[8px]',
-};
-
-/* ── Avatar size per chip size ───────────────────────────────── */
-/*
- * Figma shows 18px for Large. Scaled down proportionally for sm/md.
- * Fixed pixel values — avatar is a visual thumbnail, not an icon.
- */
-export const AVATAR_SIZE_CLASSES: Record<ChipSize, string> = {
-  sm: 'size-[10px]',
-  md: 'size-[14px]',
-  lg: 'size-[18px]',
-};
-
-/* ── Icon size classes per chip size ─────────────────────────── */
-/*
- * Figma specifies fixed icon sizes per chip size:
- *   sm → 12px  →  size-icon-xs (12px at all breakpoints)
- *   md → 16px  →  size-[16px]  (fixed, exact match)
- *   lg → 16px  →  size-icon-sm (16px at desktop; steps to 12px on
- *                 mobile where the lg chip itself shrinks to md height)
- */
-export const ICON_SIZE_CLASSES: Record<ChipSize, string> = {
-  sm: 'size-icon-xs',
-  md: 'size-[16px]',
-  lg: 'size-icon-sm',
-};

package/src/components/Chip/index.ts

@@ -1,2 +0,0 @@
-export { Chip } from './Chip';
-export type { ChipProps, ChipVariant, ChipSize } from './Chip.types';

package/src/components/CircularItem/CircularItem.tsx

@@ -1,133 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import type { CircularItemProps } from './CircularItem.types';
-import {
-  SIZE_CONFIG,
-  PROGRESS,
-  LABEL_LTR,
-  LABEL_RTL,
-  TRACK_STROKE,
-  ARC_STROKE,
-  LABEL_COLOR,
-} from './CircularItem.variants';
-
-/**
- * CircularItem
- *
- * A circular step-progress indicator showing "N of 4" progress.
- * Traced from Figma node 4986:55673.
- *
- * Props:
- *   indicator  — which step is active: '1 of 4' | '2 of 4' | '3 of 4' | '4 of 4'
- *   style      — 'Primary' (green arc) | 'Neutral' (dark navy arc)
- *   size       — 'Small' (48px) | 'Medium' (64px) | 'Large' (80px) | 'Extra Large' (120px)
- *   rtl        — counter-clockwise arc, Arabic centre label
- *   showLabel  — toggle centre label
- *   label      — override the auto-generated "N of 4" / "N من 4" text
- *
- * RTL: the arc `<g>` receives `translate(size,0) scale(-1,1)` which mirrors
- *   the SVG arc direction without affecting the centre text label.
- *
- * Dark mode: track goes to rgba(55,65,81,1); Neutral arc goes to rgba(229,231,235,1).
- *   Toggle via `html.dark` class — zero extra config required.
- */
-export const CircularItem = forwardRef<HTMLDivElement, CircularItemProps>(
-  function CircularItem(
-    {
-      indicator = '1 of 4',
-      variant = 'Neutral',
-      size = 'Small',
-      rtl = false,
-      showLabel = true,
-      label,
-      className,
-      ...props
-    },
-    ref,
-  ) {
-    const cfg = SIZE_CONFIG[size];
-    const progress = PROGRESS[indicator];
-    const circumference = 2 * Math.PI * cfg.r;
-    const dashOffset = circumference * (1 - progress);
-    const isFullRing = progress === 1;
-
-    // Centre label: use override if provided, otherwise auto-generate
-    const autoLabel = rtl ? LABEL_RTL[indicator] : LABEL_LTR[indicator];
-    const centreLabel = label ?? autoLabel;
-
-    // For RTL, mirror the arc group horizontally so the arc fills counter-clockwise.
-    // The centre text is NOT inside this group, so it remains unaffected.
-    const arcGroupTransform = rtl
-      ? `translate(${cfg.px},0) scale(-1,1)`
-      : undefined;
-
-    // Arc starts at 12 o'clock: SVG default start is 3 o'clock (right),
-    // so we rotate the arc circle -90° around the centre.
-    const arcRotate = `rotate(-90,${cfg.c},${cfg.c})`;
-
-    return (
-      <div
-        ref={ref}
-        className={cn('relative shrink-0 overflow-hidden', className)}
-        style={{ width: cfg.px, height: cfg.px }}
-        {...props}
-      >
-        {/* ── Ring SVG ── */}
-        <svg
-          width={cfg.px}
-          height={cfg.px}
-          viewBox={`0 0 ${cfg.px} ${cfg.px}`}
-          aria-hidden="true"
-          className="block"
-        >
-          {/* Track — always a full ring in neutral grey */}
-          <circle
-            cx={cfg.c}
-            cy={cfg.c}
-            r={cfg.r}
-            fill="none"
-            strokeWidth={cfg.sw}
-            className={TRACK_STROKE}
-          />
-
-          {/* Progress arc — direction mirrors for RTL */}
-          <g transform={arcGroupTransform}>
-            <circle
-              cx={cfg.c}
-              cy={cfg.c}
-              r={cfg.r}
-              fill="none"
-              strokeWidth={cfg.sw}
-              strokeDasharray={circumference}
-              strokeDashoffset={dashOffset}
-              strokeLinecap={isFullRing ? 'butt' : 'round'}
-              transform={arcRotate}
-              className={ARC_STROKE[variant]}
-              style={{ transition: 'stroke-dashoffset 0.5s ease' }}
-            />
-          </g>
-        </svg>
-
-        {/* ── Centre label ── */}
-        {showLabel && (
-          <span
-            className={cn(
-              'pointer-events-none absolute inset-0',
-              'flex items-center justify-center',
-              'font-[500] whitespace-nowrap',
-              LABEL_COLOR,
-            )}
-            style={cfg.fontStyle}
-            dir={rtl ? 'rtl' : undefined}
-          >
-            {centreLabel}
-          </span>
-        )}
-      </div>
-    );
-  },
-);
-
-CircularItem.displayName = 'CircularItem';

package/src/components/CircularItem/CircularItem.types.ts

@@ -1,45 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-/**
- * Four-step progress tier labels.
- * Matches Figma Indicator property exactly.
- */
-export type CircularItemIndicator = '1 of 4' | '2 of 4' | '3 of 4' | '4 of 4';
-
-/**
- * Arc colour style.
- * Primary = green (#1b8354), Neutral = dark navy (#1f2a37 / light #e5e7eb in dark mode).
- */
-export type CircularItemStyle = 'Primary' | 'Neutral';
-
-/**
- * Physical diameter tier.
- * Small = 48 px, Medium = 64 px, Large = 80 px, Extra Large = 120 px.
- */
-export type CircularItemSize = 'Small' | 'Medium' | 'Large' | 'Extra Large';
-
-export interface CircularItemProps extends HTMLAttributes<HTMLDivElement> {
-  /** Which step out of four is active (default: '1 of 4') */
-  indicator?: CircularItemIndicator;
-  /**
-   * Arc colour theme (default: 'Neutral').
-   * Named `variant` to avoid conflict with the HTML `style` attribute.
-   * Matches Figma's `Style` property: 'Primary' | 'Neutral'.
-   */
-  variant?: CircularItemStyle;
-  /** Physical diameter tier (default: 'Small') */
-  size?: CircularItemSize;
-  /**
-   * When true the arc fills counter-clockwise and the centre label
-   * uses the Arabic form "N من 4". Mirrors the Figma RTL variants.
-   * Default: false.
-   */
-  rtl?: boolean;
-  /** Show the step label in the centre (default: true) */
-  showLabel?: boolean;
-  /**
-   * Override the auto-generated centre label.
-   * Auto label: LTR → "N of 4", RTL → "N من 4".
-   */
-  label?: string;
-}