sdaia-ui 1.0.1 → 1.0.2

package/src/components/CardLeadingItem/CardLeadingItem.tsx

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

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

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

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

package/src/components/CardMedia/CardMedia.tsx

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