sdaia-ui 1.0.1

package/src/components/CardLeadingItem/CardLeadingItem.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { forwardRef, type ChangeEvent } from 'react';
+import { cn } from '../../lib/cn';
+import { Avatar } from '../Avatar';
+import { Checkbox } from '../Checkbox';
+import { RadioButton } from '../RadioButton';
+import { PlusCircleIcon, TickIcon } from '../../icons/IconFactory';
+import type { CardLeadingItemProps } from './CardLeadingItem.types';
+import {
+  FEATURED_ICON_INNER,
+  FEATURED_ICON_INNER_LG,
+  FEATURED_ICON_WRAPPER,
+  FEATURED_ICON_WRAPPER_OUTLINE,
+  FREE_ICON_WRAPPER,
+  ROOT_BASE,
+} from './CardLeadingItem.variants';
+
+/**
+ * Compact leading-item primitive used in card rows, list rows, and the
+ * `CardMedia` image footer. Dispatches to the matching design-system
+ * primitive based on `type` — `Avatar` for avatar, `RadioButton` for
+ * radio, `Checkbox` for checkbox — and renders a small inline wrapper
+ * for the featured-icon / icon display variants.
+ *
+ * Only the Radio / Checkbox variants are interactive; every other
+ * variant is static / display-only.
+ */
+export const CardLeadingItem = forwardRef<HTMLDivElement, CardLeadingItemProps>(
+  function CardLeadingItem(
+    {
+      type = 'avatar',
+      avatar,
+      icon,
+      featuredIconVariant = 'solid',
+      checked,
+      disabled,
+      onCheckedChange,
+      name,
+      value,
+      indeterminate,
+      ariaLabel,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const handleToggle = (e: ChangeEvent<HTMLInputElement>) => {
+      onCheckedChange?.(e.target.checked);
+    };
+
+    /* ── Avatar ───────────────────────────────────────────── */
+    if (type === 'avatar') {
+      const hasImage = Boolean(avatar?.src);
+      const avatarType = hasImage
+        ? 'image'
+        : avatar?.initials
+          ? 'initials'
+          : 'icon';
+      return (
+        <div
+          ref={ref}
+          data-slot="card-leading-item"
+          data-type="avatar"
+          className={cn(ROOT_BASE, className)}
+          {...rest}
+        >
+          <Avatar
+            size={avatar?.size ?? 'sm'}
+            shape="round"
+            type={avatarType}
+            src={avatar?.src}
+            alt={avatar?.alt}
+            initials={avatar?.initials}
+          />
+        </div>
+      );
+    }
+
+    /* ── Featured icon (pill + inner glyph) ───────────────── */
+    if (type === 'featured-icon') {
+      const wrapperClass =
+        featuredIconVariant === 'outline'
+          ? FEATURED_ICON_WRAPPER_OUTLINE
+          : FEATURED_ICON_WRAPPER;
+      const innerClass =
+        featuredIconVariant === 'outline' ? FEATURED_ICON_INNER_LG : FEATURED_ICON_INNER;
+      return (
+        <div
+          ref={ref}
+          data-slot="card-leading-item"
+          data-type="featured-icon"
+          data-featured-icon-variant={featuredIconVariant}
+          className={cn(ROOT_BASE, className)}
+          {...rest}
+        >
+          <div className={wrapperClass}>
+            <span className={innerClass} aria-hidden="true">
+              {icon ?? <PlusCircleIcon />}
+            </span>
+          </div>
+        </div>
+      );
+    }
+
+    /* ── Radio (interactive) ──────────────────────────────── */
+    if (type === 'radio') {
+      return (
+        <div
+          ref={ref}
+          data-slot="card-leading-item"
+          data-type="radio"
+          className={cn(ROOT_BASE, className)}
+          {...rest}
+        >
+          <RadioButton
+            size="md"
+            checked={checked}
+            disabled={disabled}
+            name={name}
+            value={value}
+            aria-label={ariaLabel}
+            onChange={handleToggle}
+          />
+        </div>
+      );
+    }
+
+    /* ── Checkbox (interactive) ───────────────────────────── */
+    if (type === 'checkbox') {
+      return (
+        <div
+          ref={ref}
+          data-slot="card-leading-item"
+          data-type="checkbox"
+          className={cn(ROOT_BASE, className)}
+          {...rest}
+        >
+          <Checkbox
+            size="md"
+            checked={checked}
+            disabled={disabled}
+            indeterminate={indeterminate}
+            aria-label={ariaLabel}
+            onChange={handleToggle}
+          />
+        </div>
+      );
+    }
+
+    /* ── Icon (static glyph) ──────────────────────────────── */
+    return (
+      <div
+        ref={ref}
+        data-slot="card-leading-item"
+        data-type="icon"
+        className={cn(ROOT_BASE, className)}
+        {...rest}
+      >
+        <span className={FREE_ICON_WRAPPER} aria-hidden="true">
+          {icon ?? <TickIcon />}
+        </span>
+      </div>
+    );
+  },
+);

package/src/components/CardLeadingItem/CardLeadingItem.types.ts

@@ -0,0 +1,75 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { AvatarSize } from '../Avatar';
+
+/** Visual variant of the leading item. */
+export type CardLeadingItemType =
+  | 'avatar'
+  | 'featured-icon'
+  | 'radio'
+  | 'checkbox'
+  | 'icon';
+
+/**
+ * Featured-icon visual style.
+ * - `solid`   — filled circle (bg `background-primary-50` #f3fcf6, rounded-full, 32×32)
+ * - `outline` — hollow circle with a 1 px neutral border and `shadow-xs`, 48×48,
+ *               used inside CardContent per Figma spec
+ */
+export type CardLeadingItemFeaturedIconVariant = 'solid' | 'outline';
+
+export interface CardLeadingItemProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * Which variant to render.
+   * - `avatar`        — 32 × 32 circular Avatar (placeholder if no image/initials).
+   * - `featured-icon` — 32 × 32 pill-shaped badge containing a 16 × 16 glyph
+   *                    (Figma: bg `background-primary-50`, glyph `icon-success`).
+   * - `radio`         — 20 × 20 standalone radio control.
+   * - `checkbox`      — 20 × 20 standalone checkbox control.
+   * - `icon`          — 20 × 20 free-standing icon glyph.
+   * @default 'avatar'
+   */
+  type?: CardLeadingItemType;
+
+  /* ── Avatar ─────────────────────────────────────────────── */
+  /**
+   * Avatar content used when `type="avatar"`.
+   * `size` maps to the `Avatar` component's size tier — defaults to `"sm"`
+   * (32 px); pass `"xl"` for the 48 px variant used by CardContent's User row.
+   */
+  avatar?: {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    size?: AvatarSize;
+  };
+
+  /* ── Featured icon / Icon ───────────────────────────────── */
+  /**
+   * Icon glyph used when `type="featured-icon"` (defaults to `PlusCircleIcon`)
+   * or when `type="icon"` (defaults to `TickIcon`).
+   */
+  icon?: ReactNode;
+  /**
+   * Visual style of the featured-icon wrapper (only applies to
+   * `type="featured-icon"`).
+   * @default 'solid'
+   */
+  featuredIconVariant?: CardLeadingItemFeaturedIconVariant;
+
+  /* ── Radio / Checkbox (controlled) ──────────────────────── */
+  /** Controlled checked state for `type="radio"` or `type="checkbox"`. */
+  checked?: boolean;
+  /** Disabled state for `type="radio"` or `type="checkbox"`. */
+  disabled?: boolean;
+  /** Fires when the radio/checkbox toggles. */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Name attribute for `type="radio"` (group membership). */
+  name?: string;
+  /** Value attribute for `type="radio"`. */
+  value?: string | number;
+  /** Indeterminate visual state for `type="checkbox"`. */
+  indeterminate?: boolean;
+  /** Accessible label for the control when no visible label is rendered. */
+  ariaLabel?: string;
+}

package/src/components/CardLeadingItem/CardLeadingItem.variants.ts

@@ -0,0 +1,66 @@
+/* ──────────────────────────────────────────────────────────────
+ * CardLeadingItem — class-name maps.
+ *
+ * Color values are sourced from the Figma variables bound to the
+ * _Card Leading Item frame (JnxIDV6Ev4yznMM0njgo5i → 4401:35182).
+ * Values that don't map to an existing global token are kept as
+ * rgba literals alongside the Figma variable name in a comment.
+ * ────────────────────────────────────────────────────────────── */
+
+/** Root wrapper — inline-flex so the item hugs its content. */
+export const ROOT_BASE = 'inline-flex items-center flex-shrink-0';
+
+/* ── Featured-icon variant ────────────────────────────────────── */
+
+/**
+ * Solid featured-icon pill used in card headers (Task, Item, etc.).
+ * Figma: _Card Leading Item, featured-icon solid variant.
+ *   bg        → background-primary-50 (#f3fcf6)
+ *   padding   → spacing-md (8 px)
+ *   radius    → radius-9999 (full circle)
+ * Total outer size = 8 + 16 + 8 = 32 × 32.
+ */
+export const FEATURED_ICON_WRAPPER = [
+  'inline-flex items-center justify-center flex-shrink-0',
+  'p-spacing-md rounded-full',
+  // background-primary-50 (#f3fcf6)
+  'bg-[rgba(243,252,246,1)] dark:bg-[rgba(20,52,36,1)]',
+  // icon-success / primary — green glyph
+  'text-[rgba(27,131,84,1)] dark:text-[rgba(84,192,138,1)]',
+].join(' ');
+
+/** Inner glyph box — 16 px desktop via size-icon-sm (solid featured-icon variant). */
+export const FEATURED_ICON_INNER =
+  'inline-flex items-center justify-center flex-shrink-0 size-icon-sm';
+
+/** Inner glyph box — 24 px desktop via size-icon-lg (outline featured-icon variant). */
+export const FEATURED_ICON_INNER_LG =
+  'inline-flex items-center justify-center flex-shrink-0 size-icon-lg';
+
+/**
+ * Outline featured-icon (Figma CardContent spec):
+ *   border    → border-neutral-primary (#d2d6db)
+ *   padding   → spacing-lg (12 px)
+ *   radius    → radius-9999 (full circle)
+ *   shadow    → shadow-xs (0 1px 2px 0 rgba(16,24,40,0.05))
+ *   glyph     → icon-neutral (#384250)
+ * Total outer size = 12 + 24 + 12 = 48 × 48.
+ */
+export const FEATURED_ICON_WRAPPER_OUTLINE = [
+  'inline-flex items-center justify-center flex-shrink-0',
+  'p-spacing-lg rounded-full',
+  'border border-solid border-color-border-neutral-primary dark:border-[rgba(55,65,81,1)]',
+  'shadow-[0_1px_2px_0_rgba(16,24,40,0.05)]',
+  // icon-neutral (#384250)
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(243,244,246,1)]',
+  'bg-transparent',
+].join(' ');
+
+/* ── Icon variant (free-standing glyph) ───────────────────────── */
+
+/** 20 px desktop via size-icon-md — Figma `icon-lg` + `icon-default` (#161616). */
+export const FREE_ICON_WRAPPER = [
+  'inline-flex items-center justify-center flex-shrink-0',
+  'size-icon-md',
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]',
+].join(' ');

package/src/components/CardLeadingItem/index.ts

@@ -0,0 +1,6 @@
+export { CardLeadingItem } from './CardLeadingItem';
+export type {
+  CardLeadingItemProps,
+  CardLeadingItemType,
+  CardLeadingItemFeaturedIconVariant,
+} from './CardLeadingItem.types';

package/src/components/CardMedia/CardMedia.tsx

@@ -0,0 +1,324 @@
+'use client';
+
+import { forwardRef, isValidElement, type ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+import { CardLeadingItem } from '../CardLeadingItem';
+import { CarouselArrow } from '../CarouselArrow';
+import { CarouselControlsGroup } from '../CarouselControlsGroup';
+import { Chip } from '../Chip';
+import { PlayButtonCardIcon } from '../../icons/IconFactory';
+import type { CardMediaProps } from './CardMedia.types';
+import {
+  CAROUSEL_CENTER_ROW,
+  CAROUSEL_PAGINATION_ROW,
+  CHIP_ROW,
+  DESCRIPTION_CLASS,
+  DURATION_PILL,
+  IMAGE_FOOTER_OVERLAY,
+  MEDIA_IMAGE,
+  PLAY_BUTTON,
+  PLAY_ICON_INNER,
+  ROOT_BASE,
+  ROOT_IMAGE,
+  ROOT_OVERLAYED,
+  TEXT_COLUMN,
+  TITLE_CLASS,
+  VIDEO_CENTER_ROW,
+  VIDEO_FOOTER_ROW,
+} from './CardMedia.variants';
+
+/* ── Helpers ──────────────────────────────────────────────────── */
+
+/**
+ * Renders the chip row. Accepts:
+ *   - undefined   → nothing
+ *   - ReactNode   → rendered as-is (caller owns layout)
+ *   - ReactNode[] → wraps each entry in a default chip pill.
+ *     String entries get a `<span>` wrapper; already-valid React
+ *     elements are rendered verbatim so callers can mix custom
+ *     chips with default ones.
+ */
+function renderBadges(badges: CardMediaProps['badges']): ReactNode {
+  if (badges == null || badges === false) return null;
+
+  if (Array.isArray(badges)) {
+    if (badges.length === 0) return null;
+    return (
+      <>
+        {badges.map((badge, i) => {
+          if (isValidElement(badge)) return badge;
+          return (
+            <Chip key={i} variant="neutral" size="sm" rounded={false}>
+              {badge}
+            </Chip>
+          );
+        })}
+      </>
+    );
+  }
+
+  return badges;
+}
+
+/* ── Component ────────────────────────────────────────────────── */
+
+export const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(
+  function CardMedia(
+    {
+      type = 'image',
+      imageSrc,
+      imageAlt = '',
+      images,
+      title,
+      description,
+      leadingIcon,
+      hideLeadingIcon = false,
+      badges,
+      totalSlides: totalSlidesProp,
+      currentSlide = 0,
+      onSlideChange,
+      loop = true,
+      onPrev,
+      onNext,
+      duration,
+      onPlay,
+      playLabel = 'Play',
+      dir: dirProp,
+      rtl = false,
+      stretched = false,
+      stretchTop = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+
+    const rootLayoutClass = type === 'image' ? ROOT_IMAGE : ROOT_OVERLAYED;
+
+    /*
+     * Horizontal stretch: bleeds the media past the card's horizontal padding
+     * on both sides. Because ROOT_BASE has no explicit `w-full`, the default
+     * `align-self: stretch` in the parent flex-col calculates the child's
+     * width as `content-width − margin-start − margin-end`. Negative margins
+     * therefore extend the width: content-width + 2×spacing-2xl = card width.
+     *
+     * Top stretch (stretchTop): only applies when the media is the FIRST card
+     * child (Product, Event). Cancels the card's top padding so the image
+     * meets the card's top edge and rounds the top corners to match.
+     * Do NOT use stretchTop when the media follows other card sections
+     * (Social Post, Content, Item) — it would cancel the section gap.
+     */
+    const stretchedClass = stretched
+      ? cn(
+          '-ms-spacing-2xl -me-spacing-2xl',
+          stretchTop && '-mt-spacing-2xl rounded-t-[16px]',
+        )
+      : '';
+
+    /* Carousel can either cycle through a provided `images` array or fall back
+     * to a single `imageSrc`. `totalSlides` follows the same precedence:
+     * explicit prop → images.length → 1 (or 3 if it's still an implicit carousel
+     * without images, to preserve the pre-existing default). */
+    const hasImages = Array.isArray(images) && images.length > 0;
+    const totalSlides =
+      totalSlidesProp ??
+      (hasImages ? images!.length : type === 'carousel' ? 3 : 1);
+
+    const activeCarouselImage =
+      type === 'carousel' && hasImages
+        ? images![((currentSlide % images!.length) + images!.length) % images!.length]
+        : null;
+    const activeImageSrc = activeCarouselImage?.src ?? imageSrc;
+    const activeImageAlt = activeCarouselImage?.alt ?? imageAlt;
+
+    /* Resolve the next / previous slide index, wrapping by default. Mirrors
+     * the `((next % count) + count) % count` pattern used by `CarouselImage`
+     * so negatives from `currentSlide - 1` wrap to the last slide. */
+    const resolveSlideIndex = (next: number): number => {
+      if (totalSlides <= 0) return 0;
+      if (loop) return ((next % totalSlides) + totalSlides) % totalSlides;
+      return Math.min(Math.max(0, next), totalSlides - 1);
+    };
+
+    const handlePrev = () => {
+      onPrev?.();
+      onSlideChange?.(resolveSlideIndex(currentSlide - 1));
+    };
+    const handleNext = () => {
+      onNext?.();
+      onSlideChange?.(resolveSlideIndex(currentSlide + 1));
+    };
+
+    /* ── Shared media background ────────────────────────────── */
+    const backgroundImage = (
+      <img
+        data-slot="media-image"
+        src={activeImageSrc}
+        alt={activeImageAlt}
+        className={MEDIA_IMAGE}
+        aria-hidden={activeImageAlt === '' ? true : undefined}
+      />
+    );
+
+    /* ── IMAGE variant: bottom gradient + leading icon + text ─ */
+    if (type === 'image') {
+      const hasFooter =
+        !hideLeadingIcon || title != null || description != null;
+
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="card-media"
+          data-type="image"
+          className={cn(ROOT_BASE, rootLayoutClass, stretchedClass, className)}
+          {...rest}
+        >
+          {backgroundImage}
+
+          {hasFooter ? (
+            <div data-slot="image-footer" className={IMAGE_FOOTER_OVERLAY}>
+              {!hideLeadingIcon ? (
+                leadingIcon !== undefined ? (
+                  /* Consumer-supplied node — rendered as-is so callers can pass
+                   * a fully-configured <CardLeadingItem> or any custom ReactNode. */
+                  leadingIcon
+                ) : (
+                  <CardLeadingItem
+                    data-slot="leading-icon"
+                    type="featured-icon"
+                  />
+                )
+              ) : null}
+
+              {(title != null || description != null) ? (
+                <div
+                  data-slot="text"
+                  className={TEXT_COLUMN}
+                >
+                  {title != null ? <p className={TITLE_CLASS}>{title}</p> : null}
+                  {description != null ? (
+                    <p className={DESCRIPTION_CLASS}>{description}</p>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      );
+    }
+
+    /* ── CAROUSEL variant ──────────────────────────────────── */
+    if (type === 'carousel') {
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="card-media"
+          data-type="carousel"
+          className={cn(ROOT_BASE, rootLayoutClass, stretchedClass, className)}
+          {...rest}
+        >
+          {backgroundImage}
+
+          <div
+            data-slot="chips"
+            className={CHIP_ROW}
+          >
+            {renderBadges(badges)}
+          </div>
+
+          <div data-slot="carousel-controls" className={CAROUSEL_CENTER_ROW}>
+            <CarouselArrow
+              direction="previous"
+              size="sm"
+              variant="neutral"
+              onClick={handlePrev}
+            />
+            <CarouselArrow
+              direction="next"
+              size="sm"
+              variant="neutral"
+              onClick={handleNext}
+            />
+          </div>
+
+          <div data-slot="pagination" className={CAROUSEL_PAGINATION_ROW}>
+            <CarouselControlsGroup
+              count={totalSlides}
+              activeIndex={currentSlide}
+              onChange={onSlideChange}
+              size="sm"
+              variant="neutral"
+            />
+          </div>
+        </div>
+      );
+    }
+
+    /* ── VIDEO variant ─────────────────────────────────────── */
+    const playGlyph = (
+      <span className={PLAY_ICON_INNER} aria-hidden="true">
+        <PlayButtonCardIcon />
+      </span>
+    );
+    const playNode = onPlay ? (
+      <button
+        type="button"
+        data-slot="play"
+        aria-label={playLabel}
+        onClick={onPlay}
+        className={PLAY_BUTTON}
+      >
+        {playGlyph}
+      </button>
+    ) : (
+      <div
+        role="img"
+        data-slot="play"
+        aria-label={playLabel}
+        className={PLAY_BUTTON}
+      >
+        {playGlyph}
+      </div>
+    );
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="card-media"
+        data-type="video"
+        className={cn(ROOT_BASE, rootLayoutClass, stretchedClass, className)}
+        {...rest}
+      >
+        {backgroundImage}
+
+        <div
+          data-slot="chips"
+          className={CHIP_ROW}
+        >
+          {renderBadges(badges)}
+        </div>
+
+        <div data-slot="video-center" className={VIDEO_CENTER_ROW}>
+          <div className="flex-1" />
+          {playNode}
+          <div className="flex-1" />
+        </div>
+
+        <div
+          data-slot="video-footer"
+          className={VIDEO_FOOTER_ROW}
+        >
+          {duration != null ? (
+            <span data-slot="duration" className={DURATION_PILL}>
+              {duration}
+            </span>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);