sdaia-ui 1.0.1

package/src/components/CardFooter/CardFooter.tsx

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

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

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

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

package/src/components/CardHeader/CardHeader.tsx

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

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

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

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