sdaia-ui 1.0.1 → 1.0.2

package/src/components/CardFooter/CardFooter.tsx

@@ -1,196 +0,0 @@
-'use client';
-
-import { forwardRef, type HTMLAttributes, type ForwardRefExoticComponent, type RefAttributes } from 'react';
-import { cn } from '../../lib/cn';
-import type {
-  CardFooterAvatarGroupProps,
-  CardFooterInfoTextProps,
-  CardFooterProps,
-  CardFooterReactionProps,
-} from './CardFooter.types';
-import {
-  AVATAR_GROUP_LABEL,
-  AVATAR_GROUP_LIST,
-  CAPTION_TEXT,
-  INFO_TEXT_ICON,
-  INFO_TEXT_LABEL,
-  INFO_TEXT_ROOT,
-  REACTIONS_GROUP,
-  REACTION_COUNT,
-  REACTION_ICON,
-  REACTION_ROOT,
-  ROOT_BASE,
-  ROOT_TYPE,
-} from './CardFooter.variants';
-
-/* ── InfoText subcomponent (for type="details") ──────────────── */
-
-/**
- * Icon + muted text pair. The icon is rendered on the logical start edge
- * so it automatically flips to the visual right under `dir="rtl"`.
- */
-const CardFooterInfoText = forwardRef<HTMLDivElement, CardFooterInfoTextProps>(
-  function CardFooterInfoText({ icon, children, className, ...rest }, ref) {
-    return (
-      <div
-        ref={ref}
-        data-slot="info-text"
-        className={cn(INFO_TEXT_ROOT, className)}
-        {...rest}
-      >
-        {icon != null ? (
-          <span data-slot="info-text-icon" aria-hidden="true" className={INFO_TEXT_ICON}>
-            {icon}
-          </span>
-        ) : null}
-        <span data-slot="info-text-label" className={INFO_TEXT_LABEL} dir="auto">
-          {children}
-        </span>
-      </div>
-    );
-  },
-);
-
-/* ── Reaction subcomponent (for type="social-reactions") ─────── */
-
-/**
- * Single reaction: [icon] [count]. Logical layout mirrors under RTL because
- * we only use `gap-*`, never `margin-left/right`.
- */
-const CardFooterReaction = forwardRef<HTMLDivElement, CardFooterReactionProps>(
-  function CardFooterReaction({ icon, count, className, ...rest }, ref) {
-    return (
-      <div
-        ref={ref}
-        data-slot="reaction"
-        className={cn(REACTION_ROOT, className)}
-        {...rest}
-      >
-        {icon != null ? (
-          <span data-slot="reaction-icon" aria-hidden="true" className={REACTION_ICON}>
-            {icon}
-          </span>
-        ) : null}
-        {count != null ? (
-          <span data-slot="reaction-count" className={REACTION_COUNT} dir="auto">
-            {count}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
-
-/* ── AvatarGroup subcomponent (for type="avatar-group") ──────── */
-
-/**
- * Stacks `<Avatar>` children with an 8 px overlap. Uses logical
- * properties so the overlap direction flips under RTL.
- */
-const CardFooterAvatarGroup = forwardRef<HTMLDivElement, CardFooterAvatarGroupProps>(
-  function CardFooterAvatarGroup({ children, className, ...rest }, ref) {
-    return (
-      <div
-        ref={ref}
-        data-slot="avatar-group"
-        className={cn(AVATAR_GROUP_LIST, className)}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-/* ── Root component ──────────────────────────────────────────── */
-
-interface CardFooterComponent
-  extends ForwardRefExoticComponent<
-    CardFooterProps & RefAttributes<HTMLDivElement>
-  > {
-  /** Inline icon + muted text item used inside `type="details"`. */
-  InfoText: typeof CardFooterInfoText;
-  /** Reaction (icon + count) used inside `type="social-reactions"`. */
-  Reaction: typeof CardFooterReaction;
-  /** Overlapping row of avatars used inside `type="avatar-group"`. */
-  AvatarGroup: typeof CardFooterAvatarGroup;
-  /**
-   * Flex container used inside `type="social-reactions"` to group the
-   * primary reactions with `flex-1` so a trailing "seen" reaction can
-   * dock on the end edge. Use like:
-   *   <CardFooter type="social-reactions">
-   *     <CardFooter.Reactions>...</CardFooter.Reactions>
-   *     <CardFooter.Reaction icon={<Eye />} count={0} />
-   *   </CardFooter>
-   */
-  Reactions: typeof CardFooterReactions;
-}
-
-const CardFooterReactions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  function CardFooterReactions({ children, className, ...rest }, ref) {
-    return (
-      <div
-        ref={ref}
-        data-slot="reactions-group"
-        className={cn(REACTIONS_GROUP, className)}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-/**
- * Card footer — a horizontal row of action buttons, tags, badges, ratings,
- * caption, details, avatars, or social reactions. The `type` prop selects
- * the layout; children are the composed content.
- *
- * Matches Figma node `4407:36688` (_Card Footer).
- */
-const CardFooterBase = forwardRef<HTMLDivElement, CardFooterProps>(
-  function CardFooter(
-    { type = 'actions', dir: dirProp, rtl = false, className, children, ...rest },
-    ref,
-  ) {
-    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
-
-    /* type="caption" has a unique markup shape — a muted paragraph — so
-       we special-case it instead of forcing consumers to wrap text. */
-    if (type === 'caption') {
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="card-footer"
-          data-type="caption"
-          className={cn(ROOT_BASE, ROOT_TYPE.caption, className)}
-          {...rest}
-        >
-          <p className={CAPTION_TEXT} dir="auto">
-            {children}
-          </p>
-        </div>
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        dir={dir}
-        data-slot="card-footer"
-        data-type={type}
-        className={cn(ROOT_BASE, ROOT_TYPE[type], className)}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-export const CardFooter = CardFooterBase as unknown as CardFooterComponent;
-CardFooter.InfoText = CardFooterInfoText;
-CardFooter.Reaction = CardFooterReaction;
-CardFooter.AvatarGroup = CardFooterAvatarGroup;
-CardFooter.Reactions = CardFooterReactions;

package/src/components/CardFooter/CardFooter.types.ts

@@ -1,59 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-/**
- * Content variant of the footer. Controls the outer flex layout (gap,
- * alignment, flex-fill behavior) and, for some types, the semantic markup
- * used for the children. Consumers compose the actual content — the footer
- * only owns the row layout.
- *
- * - `actions`          — row of one or more `Button`s
- * - `tags`             — row of `Tag`s
- * - `badges`           — row of `Badge`s
- * - `link`             — a single `Link` (or equivalent)
- * - `ratings`          — a `Rating`
- * - `caption`          — a block of muted secondary text (children rendered as text)
- * - `details`          — one or more `<CardFooter.InfoText>` items
- * - `avatar-group`     — `<CardFooter.AvatarGroup>` + optional label
- * - `social-reactions` — one or more `<CardFooter.Reaction>` items
- */
-export type CardFooterType =
-  | 'actions'
-  | 'tags'
-  | 'badges'
-  | 'link'
-  | 'ratings'
-  | 'caption'
-  | 'details'
-  | 'avatar-group'
-  | 'social-reactions';
-
-export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-  /** Content layout variant. @default 'actions' */
-  type?: CardFooterType;
-  /** Direction — applied to the root and drives RTL layout. */
-  dir?: 'ltr' | 'rtl';
-  /** @deprecated Use `dir="rtl"` instead. */
-  rtl?: boolean;
-  children?: ReactNode;
-}
-
-/** Props for `<CardFooter.InfoText>` — icon + muted caption text. */
-export interface CardFooterInfoTextProps extends HTMLAttributes<HTMLDivElement> {
-  /** Leading icon (direction-aware — flips on RTL). */
-  icon?: ReactNode;
-  children?: ReactNode;
-}
-
-/** Props for `<CardFooter.Reaction>` — icon + count pair for social reactions. */
-export interface CardFooterReactionProps extends HTMLAttributes<HTMLDivElement> {
-  /** Icon representing the reaction (like/comment/share/seen). */
-  icon?: ReactNode;
-  /** Count displayed next to the icon. */
-  count?: ReactNode;
-}
-
-/** Props for `<CardFooter.AvatarGroup>` — stacked avatars with overlap. */
-export interface CardFooterAvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
-  /** Avatar elements — each rendered in stack order. */
-  children?: ReactNode;
-}

package/src/components/CardFooter/CardFooter.variants.ts

@@ -1,127 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────
-   CardFooter.variants.ts
-   Class-name constants for the CardFooter component.
-   Derived from Figma node 4407:36688 (_Card Footer frame).
-   No JSX / React imports — pure strings.
-──────────────────────────────────────────────────────────────────── */
-
-import type { CardFooterType } from './CardFooter.types';
-
-/* ── Root ─────────────────────────────────────────────────────── */
-
-/** Base flex row for every type. `w-full` so the footer fills its card. */
-export const ROOT_BASE = 'flex w-full items-center';
-
-/**
- * Per-type root classes.
- *
- * Gaps come from Figma variables:
- * - spacing-lg = 12 px → Actions / Tags / Badges / Details / Avatar Group
- * - spacing-3xl = 24 px → Social Reactions (between like/comment/share)
- * - spacing-none = 0 → Link / Ratings / Caption (single block)
- */
-export const ROOT_TYPE: Record<CardFooterType, string> = {
-  actions: 'gap-spacing-lg',
-  tags: 'gap-spacing-lg',
-  badges: 'gap-spacing-lg',
-  link: 'gap-spacing-none',
-  ratings: 'gap-spacing-none',
-  caption: 'gap-spacing-none',
-  details: 'gap-spacing-lg',
-  'avatar-group': 'gap-spacing-lg',
-  'social-reactions': 'gap-spacing-lg',
-};
-
-/* ── Caption (type="caption") ─────────────────────────────────── */
-
-/**
- * Caption paragraph.
- * text-text-md → 16 px body
- * font-[400] → Regular (Figma: Text md/Regular)
- * color: Text/text-secondary-paragraph = #6c737f
- * Dark: gray-400 for parity with other secondary text in the system.
- * rtl:text-right so caption reads from the end in RTL.
- */
-export const CAPTION_TEXT =
-  'flex-1 min-w-0 text-text-md font-[400] leading-[24px] ' +
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
-  'rtl:text-end';
-
-/* ── InfoText subcomponent (type="details") ───────────────────── */
-
-/** Icon + text pair, 4 px gap (spacing-xs). */
-export const INFO_TEXT_ROOT = 'flex items-center gap-spacing-xs shrink-0';
-
-/**
- * Icon wrapper — 16 px on mobile/tablet, 20 px on desktop via size-icon-md.
- * Figma shows 16 px; the token scales to 20 px on desktop which matches the
- * system-wide responsive icon sizing.
- */
-export const INFO_TEXT_ICON =
-  'inline-flex items-center justify-center flex-shrink-0 size-icon-sm ' +
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
-  '[&>svg]:w-full [&>svg]:h-full';
-
-/**
- * Label.
- * text-text-sm → 14 px
- * font-[400] → Regular
- * color: Text/text-secondary-paragraph = #6c737f
- */
-export const INFO_TEXT_LABEL =
-  'text-text-sm font-[400] leading-[20px] ' +
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
-  'whitespace-nowrap';
-
-/* ── Reaction subcomponent (type="social-reactions") ──────────── */
-
-/** Icon + count pair, 4 px gap. */
-export const REACTION_ROOT = 'flex items-center gap-spacing-xs shrink-0';
-
-/** 20 px icon wrapper — matches Figma reaction icons (fixed 20px, not responsive). */
-export const REACTION_ICON =
-  'inline-flex items-center justify-center flex-shrink-0 size-[20px] ' +
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
-  '[&>svg]:w-full [&>svg]:h-full';
-
-/** Count text — same typography + color as info text label. */
-export const REACTION_COUNT =
-  'text-text-sm font-[400] leading-[20px] ' +
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
-  'whitespace-nowrap tabular-nums';
-
-/* ── AvatarGroup subcomponent (type="avatar-group") ───────────── */
-
-/**
- * Avatar stack wrapper. Children overlap via `-ms-[8px]` on every child
- * except the first. `pe-[8px]` on the wrapper compensates for the last
- * avatar's negative end offset so the label sits flush.
- *
- * Uses logical properties (`-ms-*`, `pe-*`) so overlap direction flips
- * automatically under `dir="rtl"`.
- */
-export const AVATAR_GROUP_LIST =
-  'flex items-center shrink-0 pe-[8px] ' +
-  '[&>*]:-ms-[8px] [&>*:first-child]:ms-0 ' +
-  '[&>*]:ring-2 [&>*]:ring-[rgba(243,244,246,1)] dark:[&>*]:ring-[rgba(29,41,57,1)] ' +
-  '[&>*]:rounded-full';
-
-/**
- * Label next to the avatar stack.
- * text-text-md → 16 px, font-[400] Regular
- * color: Text/text-primary-paragraph = #384250
- */
-export const AVATAR_GROUP_LABEL =
-  'flex-1 min-w-0 text-text-md font-[400] leading-[24px] ' +
-  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)] ' +
-  'rtl:text-end';
-
-/* ── Social reactions container (flex-1 group of reactions) ──── */
-
-/**
- * Inner container that holds the Like/Comment/Share reactions, spread
- * with 24 px gap (spacing-3xl) and fills the remaining width so "Seen"
- * can dock on the end edge.
- */
-export const REACTIONS_GROUP =
-  'flex flex-1 items-center gap-spacing-3xl min-w-0';

package/src/components/CardFooter/index.ts

@@ -1,8 +0,0 @@
-export { CardFooter } from './CardFooter';
-export type {
-  CardFooterAvatarGroupProps,
-  CardFooterInfoTextProps,
-  CardFooterProps,
-  CardFooterReactionProps,
-  CardFooterType,
-} from './CardFooter.types';

package/src/components/CardHeader/CardHeader.tsx

@@ -1,150 +0,0 @@
-'use client';
-
-import { forwardRef, type ReactNode } from 'react';
-import { cn } from '../../lib/cn';
-import type { CardHeaderProps } from './CardHeader.types';
-import {
-  HEADER_ROW,
-  HELPER_CLASS,
-  INLINE_LEADING_TEXT,
-  LABEL_CLASS,
-  ROOT_BASE,
-  ROOT_LAYOUT,
-  SEPARATED_HEAD,
-  SEPARATED_HELPER_ROW,
-  TEXT_COLUMN,
-  TRAILING_GROUP,
-} from './CardHeader.variants';
-
-/**
- * Card header block — renders a label + helper text with optional leading
- * (avatar / icon) and trailing (icon buttons) slots, using one of three
- * content layouts lifted from the Figma spec.
- *
- * Every slot is exposed as a `ReactNode` so consumers can drop in an
- * `Avatar`, a `CardLeadingItem`, a pair of `Button` components, or any
- * custom node — the header only owns the outer flex layout.
- */
-export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
-  function CardHeader(
-    {
-      contentLayout = 'inline',
-      label,
-      helperText,
-      leadingItem,
-      trailingItems,
-      dir: dirProp,
-      rtl = false,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
-    const isRtl = dir === 'rtl';
-
-    /* Reusable text block — same markup regardless of layout. */
-    const textBlock: ReactNode =
-      label != null || helperText != null ? (
-        <div
-          data-slot="text"
-          className={cn(TEXT_COLUMN, isRtl && 'text-end')}
-        >
-          {label != null ? <p className={LABEL_CLASS}>{label}</p> : null}
-          {helperText != null ? <p className={HELPER_CLASS}>{helperText}</p> : null}
-        </div>
-      ) : null;
-
-    /* Reusable leading + trailing wrappers — only rendered when populated. */
-    const leadingNode: ReactNode = leadingItem != null ? (
-      <div data-slot="leading-item" className="flex items-start flex-shrink-0">
-        {leadingItem}
-      </div>
-    ) : null;
-
-    const trailingNode: ReactNode = trailingItems != null ? (
-      <div data-slot="trailing-items" className={TRAILING_GROUP}>
-        {trailingItems}
-      </div>
-    ) : null;
-
-    /* ── INLINE layout ─────────────────────────────────────── */
-    if (contentLayout === 'inline') {
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="card-header"
-          data-layout="inline"
-          className={cn(ROOT_BASE, ROOT_LAYOUT.inline, className)}
-          {...rest}
-        >
-          <div className={INLINE_LEADING_TEXT}>
-            {leadingNode}
-            {textBlock}
-          </div>
-          {trailingNode}
-        </div>
-      );
-    }
-
-    /* ── STACKED layout ────────────────────────────────────── */
-    if (contentLayout === 'stacked') {
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="card-header"
-          data-layout="stacked"
-          className={cn(ROOT_BASE, ROOT_LAYOUT.stacked, className)}
-          {...rest}
-        >
-          {(leadingNode || trailingNode) ? (
-            <div
-              data-slot="header-row"
-              className={cn(HEADER_ROW, 'justify-between')}
-            >
-              {leadingNode ?? <span className="flex-1" />}
-              {trailingNode}
-            </div>
-          ) : null}
-          {textBlock}
-        </div>
-      );
-    }
-
-    /* ── SEPARATED layout ──────────────────────────────────── */
-    return (
-      <div
-        ref={ref}
-        dir={dir}
-        data-slot="card-header"
-        data-layout="separated"
-        className={cn(ROOT_BASE, ROOT_LAYOUT.separated, className)}
-        {...rest}
-      >
-        <div data-slot="header-row" className={HEADER_ROW}>
-          <div className={SEPARATED_HEAD}>
-            {leadingNode}
-            {label != null ? (
-              <p
-                className={cn(LABEL_CLASS, isRtl && 'text-end')}
-              >
-                {label}
-              </p>
-            ) : null}
-          </div>
-          {trailingNode}
-        </div>
-        {helperText != null ? (
-          <p
-            data-slot="helper-text"
-            className={cn(HELPER_CLASS, SEPARATED_HELPER_ROW, isRtl && 'text-end')}
-          >
-            {helperText}
-          </p>
-        ) : null}
-      </div>
-    );
-  },
-);

package/src/components/CardHeader/CardHeader.types.ts

@@ -1,42 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-/**
- * How the label / helper / leading / trailing slots arrange themselves:
- *
- * - `inline`    — one horizontal row:
- *                 [leading] [label + helper] [trailing]
- * - `stacked`   — two stacked rows:
- *                 [leading ............... trailing]
- *                 [label + helper]
- * - `separated` — first row is inline (leading + label + trailing),
- *                 helper text then sits below in its own full-width row.
- */
-export type CardHeaderContentLayout = 'inline' | 'stacked' | 'separated';
-
-export interface CardHeaderProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /** Arrangement of the header slots. @default 'inline' */
-  contentLayout?: CardHeaderContentLayout;
-
-  /** Title label (bold). */
-  label?: ReactNode;
-  /** Supporting helper text rendered under the label. */
-  helperText?: ReactNode;
-
-  /**
-   * Leading-edge node — typically a `<CardLeadingItem>` or an `<Avatar>`.
-   * Rendered as-is on the start edge (automatically flips under `dir="rtl"`).
-   */
-  leadingItem?: ReactNode;
-
-  /**
-   * Trailing-edge nodes — typically one or two `<Button iconOnly />` or any
-   * custom ReactNode. Rendered on the end edge of the header row.
-   */
-  trailingItems?: ReactNode;
-
-  /** Direction — applied to the root and drives RTL layout. */
-  dir?: 'ltr' | 'rtl';
-  /** @deprecated Use `dir="rtl"` instead. */
-  rtl?: boolean;
-}

package/src/components/CardHeader/CardHeader.variants.ts

@@ -1,72 +0,0 @@
-import type { CardHeaderContentLayout } from './CardHeader.types';
-
-/* ──────────────────────────────────────────────────────────────
- * CardHeader — class-name maps.
- *
- * Color values are sourced from the Figma variables bound to the
- * _Card Header frame (JnxIDV6Ev4yznMM0njgo5i → 4405:32963). Values
- * that don't map to an existing global token are kept as rgba
- * literals with the Figma variable name in a comment. Dark-mode
- * pairs accompany every text surface.
- * ────────────────────────────────────────────────────────────── */
-
-/** Shared root — gap-lg across all layouts. */
-export const ROOT_BASE = [
-  'relative flex w-full',
-  'gap-spacing-lg',
-].join(' ');
-
-/** Layout-specific root flex direction / alignment. */
-export const ROOT_LAYOUT: Record<CardHeaderContentLayout, string> = {
-  // Inline — one horizontal row: [leading] [text column] [trailing]
-  inline: 'flex-row items-start',
-  // Stacked — vertical column: [header row] [text block]
-  stacked: 'flex-col items-stretch',
-  // Separated — vertical column: [header row] [helper text]
-  separated: 'flex-col items-stretch',
-};
-
-/* ── Inline layout ────────────────────────────────────────────── */
-
-/** Wraps leading + text in the Inline variant (flex-1 so trailing docks to end). */
-export const INLINE_LEADING_TEXT =
-  'flex flex-1 min-w-0 items-center gap-spacing-md';
-
-/* ── Stacked / Separated shared header row ────────────────────── */
-
-/** Header row holding leading item on start and trailing on end. */
-export const HEADER_ROW = 'relative flex items-center gap-spacing-lg w-full';
-
-/** Separated: leading + label inline on start, trailing on end. */
-export const SEPARATED_HEAD =
-  'flex flex-1 min-w-0 items-center gap-spacing-md';
-
-/** Trailing group — icon buttons stacked horizontally on the end edge. */
-export const TRAILING_GROUP =
-  'flex items-start gap-spacing-md flex-shrink-0';
-
-/* ── Text block ───────────────────────────────────────────────── */
-
-/** Default text wrapper — column, tight gap between label and helper. */
-export const TEXT_COLUMN =
-  'flex flex-1 min-w-0 flex-col items-start justify-center gap-spacing-xxs';
-
-export const LABEL_CLASS = [
-  'm-0 w-full',
-  // text-lg / Bold / 28 line-height
-  'text-text-lg font-[700] leading-[28px]',
-  // text-display — --color-display already handles dark via globals.css
-  'text-color-display',
-].join(' ');
-
-export const HELPER_CLASS = [
-  'm-0 w-full',
-  // text-md / Regular / 24 line-height
-  'text-text-md font-[400] leading-[24px]',
-  // text-primary-paragraph (#384250)
-  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
-].join(' ');
-
-/* ── Separated helper row (full-width line under the header) ──── */
-
-export const SEPARATED_HELPER_ROW = 'w-full';

package/src/components/CardHeader/index.ts

@@ -1,5 +0,0 @@
-export { CardHeader } from './CardHeader';
-export type {
-  CardHeaderProps,
-  CardHeaderContentLayout,
-} from './CardHeader.types';