@conscience-technology/ctds 0.3.4 → 0.4.1

package/assets/components/ListItem/ListItem.tsx

@@ -1,201 +1,102 @@
 "use client";
 
 /**
- * ListItem — 앞에 아바타/아이콘이 달린 리스트 한 줄 단위. 피드·알림·인박스·활동 로그를 포괄.
+ * ListItem — 3구역(leading / content / trailing) 고정 뼈대 + content 내부 자유 조립.
  *
- * anatomy 고정: [leading] [from (body | verb+target+surface)] [meta/trailing] [hoverActions]
- * 자체 chrome(border/padding/bg) 없음 — 리스트 분리는 부모 레이아웃이 담당.
+ * 축:
+ *   size       — 세로 여백감. md(기본, 작업/자원 리스트 밀도) | sm (활동 로그·알림 스트림 타이트)
+ *   align      — leading 세로 정렬. center(기본) | top (2줄 이상 본문용)
+ *   interactive — hover/focus 피드백 (href 또는 onClick 있을 때 자동)
  *
- * 서술 모드 배타:
- *   (A) body            — "회계팀 — 외주비 결재 요청"
- *   (B) verb+target     — "박지훈 · 댓글 남김 · ERP 2.0 사이드바"
+ * chrome 없음 — bg·border·radius 자체 공급 X. 리스트 분리는 부모가 담당.
+ * 블록 외형(배경·테두리로 상태 신호)이 필요하면 Callout 사용.
  *
- * variant는 default만 바꾼다 (anatomy는 공통):
- *   activity      — 과거 서술. unread false 기본
- *   notification  — 처리 필요. unread true 기본
- *   mention       — 멘션/댓글. unread true 기본
- *   system        — 사람 아닌 서비스 이벤트
+ * content 안에서 쓰는 subcomponents:
+ *   ListItem.Title        메인 제목 (앞에 Badge 등 inline 자유)
+ *   ListItem.Description  muted 서브 텍스트
+ *   ListItem.Meta         하단 meta 라인 (타임스탬프·상태)
+ *   ListItem.MetaDivider  hairline 세로 구분자
+ *
+ * 일정·이벤트처럼 날짜가 leading 아이덴티티인 자리는 [[EventListItem]] 사용.
  */
 
 import {
-  Children,
-  cloneElement,
   forwardRef,
-  isValidElement,
   type AnchorHTMLAttributes,
   type HTMLAttributes,
-  type ReactElement,
   type ReactNode,
   type Ref,
 } from "react";
-import { Slot } from "@radix-ui/react-slot";
 
 import styles from "./ListItem.module.css";
 
-export type ListItemVariant = "activity" | "notification" | "mention" | "system";
-export type ListItemLayout = "inline" | "stacked";
+export type ListItemSize = "sm" | "md";
+export type ListItemAlign = "center" | "top";
 
 type Common = {
-  // 왼쪽
   leading?: ReactNode;
-  /**
-   * 읽음/안읽음 신호.
-   * - undefined (default): 중립 톤. 리드/언리드 개념 없는 자리(활동 로그·히스토리).
-   * - true: 안 읽음. body/from 강조 + meta primary.
-   * - false: 읽음. 전체 톤 한두 단계 다운.
-   */
-  unread?: boolean;
-
-  // 본문
-  from?: ReactNode;
-  body?: ReactNode;
-  verb?: ReactNode;
-  target?: ReactNode;
-  surface?: ReactNode;
-
-  // 메타
-  meta?: ReactNode;
   trailing?: ReactNode;
-  hoverActions?: ReactNode;
-
-  // 레이아웃·상호작용
-  variant?: ListItemVariant;
-  layout?: ListItemLayout;
-  asChild?: boolean;
+  size?: ListItemSize;
+  align?: ListItemAlign;
+  children?: ReactNode;
 };
 
 type DivProps = Common &
-  Omit<HTMLAttributes<HTMLDivElement>, keyof Common> & {
-    href?: undefined;
-  };
+  Omit<HTMLAttributes<HTMLDivElement>, keyof Common> & { href?: undefined };
 
 type AnchorProps = Common &
-  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof Common> & {
-    href: string;
-  };
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof Common> & { href: string };
 
 export type ListItemProps = DivProps | AnchorProps;
 
-/* unread는 명시적으로 넘긴 경우에만 신호. variant는 default를 강제하지 않는다 — 리드/언리드 개념이 없는 자리에서도 자유롭게 쓰기 위함. */
-
-const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(
+const ListItemRoot = forwardRef<HTMLElement, ListItemProps>(function ListItem(
   props,
   ref,
 ) {
   const {
     leading,
-    unread,
-    from,
-    body,
-    verb,
-    target,
-    surface,
-    meta,
     trailing,
-    hoverActions,
-    variant = "activity",
-    layout = "inline",
-    asChild,
+    size = "md",
+    align = "center",
     className,
+    children,
     ...rest
   } = props as Common & { className?: string } & Record<string, unknown>;
 
-  const isActionMode = verb !== undefined || target !== undefined;
   const isLink = typeof (props as AnchorProps).href === "string";
-  const isInteractive = isLink || typeof (props as HTMLAttributes<HTMLElement>).onClick === "function";
-
-  // read-state class — unread 명시적으로 넘겼을 때만 신호. undefined면 중립.
-  const readStateClass =
-    unread === true ? styles.unread : unread === false ? styles.read : "";
+  const isInteractive =
+    isLink || typeof (props as HTMLAttributes<HTMLElement>).onClick === "function";
 
   const rootClass = [
     styles.root,
-    styles[variant],
-    layout === "stacked" ? styles.stacked : styles.inline,
-    readStateClass,
+    styles[`size-${size}`],
+    styles[`align-${align}`],
     isInteractive ? styles.interactive : "",
     className ?? "",
   ]
     .filter(Boolean)
     .join(" ");
 
-  const leadingNode = leading ? (
-    <span className={styles.leading} aria-hidden>
-      {leading}
-    </span>
-  ) : null;
-
-  // 본문 — 서술 모드 배타. verb/target이 하나라도 있으면 action 모드.
-  // layout=stacked이면 두 줄로 분리: 1줄째 from(+verb+target+surface), 2줄째 body
-  const isStacked = layout === "stacked";
-  const bodyNode = isActionMode ? (
-    isStacked ? (
-      <>
-        <span className={styles.actionBody}>
-          {from && <span className={styles.from}>{from}</span>}
-          {verb && <span className={styles.verb}>{verb}</span>}
-          {target && <span className={styles.target}>{target}</span>}
-          {surface && <span className={styles.surface}>{surface}</span>}
-        </span>
-        {body && <span className={styles.body}>{body}</span>}
-      </>
-    ) : (
-      <span className={styles.actionBody}>
-        {from && <span className={styles.from}>{from}</span>}
-        {verb && <span className={styles.verb}>{verb}</span>}
-        {target && <span className={styles.target}>{target}</span>}
-        {surface && <span className={styles.surface}>{surface}</span>}
-      </span>
-    )
-  ) : isStacked ? (
-    <>
-      {from && <span className={styles.from}>{from}</span>}
-      {body && <span className={styles.body}>{body}</span>}
-    </>
-  ) : (
-    <span className={styles.narrativeBody}>
-      {from && <span className={styles.from}>{from}</span>}
-      {body && <span className={styles.body}>{body}</span>}
-    </span>
-  );
-
-  // trailing: 명시 trailing 우선, 없으면 meta
-  const trailingNode = trailing !== undefined ? (
-    <span className={styles.trailing}>{trailing}</span>
-  ) : meta !== undefined ? (
-    <span className={styles.meta}>{meta}</span>
-  ) : null;
-
-  // hoverActions: 배열이면 간격 유지하며 렌더
-  const hoverNode = hoverActions ? (
-    <span className={styles.hoverActions}>
-      {Children.map(hoverActions, (child) =>
-        isValidElement(child) ? child : child,
-      )}
-    </span>
-  ) : null;
-
   const content = (
     <>
-      {leadingNode}
-      <span className={styles.content}>{bodyNode}</span>
-      {hoverNode}
-      {trailingNode}
+      {leading !== undefined && leading !== null && (
+        <span className={styles.leading} aria-hidden>
+          {leading}
+        </span>
+      )}
+      <span className={styles.content}>{children}</span>
+      {trailing !== undefined && trailing !== null && (
+        <span className={styles.trailing}>{trailing}</span>
+      )}
     </>
   );
 
-  if (asChild) {
-    const only = Children.only(rest.children) as ReactElement<HTMLAttributes<HTMLElement>>;
-    return cloneElement(only, { className: rootClass, ...rest }, content);
-  }
-
   if (isLink) {
-    const { children, ...anchorRest } = rest as AnchorHTMLAttributes<HTMLAnchorElement>;
     return (
       <a
         ref={ref as Ref<HTMLAnchorElement>}
         className={rootClass}
-        {...anchorRest}
+        {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}
         href={(props as AnchorProps).href}
       >
         {content}
@@ -203,29 +104,86 @@ const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(
     );
   }
 
-  const { children, ...divRest } = rest as HTMLAttributes<HTMLDivElement>;
   return (
     <div
       ref={ref as Ref<HTMLDivElement>}
       className={rootClass}
-      data-variant={variant}
-      {...divRest}
+      data-size={size}
+      {...(rest as HTMLAttributes<HTMLDivElement>)}
     >
       {content}
     </div>
   );
 });
 
-ListItem.displayName = "ListItem";
-
-export { ListItem };
+ListItemRoot.displayName = "ListItem";
 
 /* ──────────────────────────────────────────────────────
-   ListItemLeadingIcon — "배경색 + 아이콘" leading 타입.
+   content subcomponents
+   ──────────────────────────────────────────────────── */
+
+type SpanProps = HTMLAttributes<HTMLSpanElement>;
+type DivOnlyProps = HTMLAttributes<HTMLDivElement>;
+
+const Title = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  function ListItemTitle({ className, children, ...rest }, ref) {
+    return (
+      <div
+        ref={ref as unknown as Ref<HTMLHeadingElement>}
+        className={[styles.title, className ?? ""].filter(Boolean).join(" ")}
+        {...(rest as HTMLAttributes<HTMLDivElement>)}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+Title.displayName = "ListItem.Title";
 
-   Avatar/Icon 사이에 섞어도 정렬이 흔들리지 않도록 같은 사이즈 트랙(xs/sm/md/lg)에 올림.
-   tone 프리셋으로 bg/fg 쌍을 한 번에, 혹은 CSS 변수(--leading-icon-bg / --leading-icon-fg)로
-   세밀 조절. 아이콘 자체는 자식으로 받아 Icon/커스텀 노드 모두 허용.
+const Description = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function ListItemDescription({ className, children, ...rest }, ref) {
+    return (
+      <p
+        ref={ref}
+        className={[styles.description, className ?? ""].filter(Boolean).join(" ")}
+        {...rest}
+      >
+        {children}
+      </p>
+    );
+  },
+);
+Description.displayName = "ListItem.Description";
+
+const Meta = forwardRef<HTMLDivElement, DivOnlyProps>(function ListItemMeta(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={[styles.meta, className ?? ""].filter(Boolean).join(" ")} {...rest}>
+      {children}
+    </div>
+  );
+});
+Meta.displayName = "ListItem.Meta";
+
+const MetaDivider = forwardRef<HTMLSpanElement, SpanProps>(function ListItemMetaDivider(
+  { className, ...rest },
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      aria-hidden
+      className={[styles.metaDivider, className ?? ""].filter(Boolean).join(" ")}
+      {...rest}
+    />
+  );
+});
+MetaDivider.displayName = "ListItem.MetaDivider";
+
+/* ──────────────────────────────────────────────────────
+   LeadingIcon — "배경색 + 아이콘" leading 타입. 기존 유지.
    ──────────────────────────────────────────────────── */
 
 export type ListItemLeadingIconSize = "xs" | "sm" | "md" | "lg" | "auto";
@@ -244,8 +202,13 @@ export type ListItemLeadingIconProps = Omit<HTMLAttributes<HTMLSpanElement>, "ch
 };
 
 const ListItemLeadingIcon = forwardRef<HTMLSpanElement, ListItemLeadingIconProps>(
-  function ListItemLeadingIcon({ size = "sm", tone = "neutral", className, children, ...rest }, ref) {
-    const cls = [styles.leadingIcon, styles[size], className ?? ""].filter(Boolean).join(" ");
+  function ListItemLeadingIcon(
+    { size = "sm", tone = "neutral", className, children, ...rest },
+    ref,
+  ) {
+    const cls = [styles.leadingIcon, styles[`li-${size}`], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
     return (
       <span ref={ref} aria-hidden {...rest} className={cls} data-tone={tone}>
         {children}
@@ -253,10 +216,23 @@ const ListItemLeadingIcon = forwardRef<HTMLSpanElement, ListItemLeadingIconProps
     );
   },
 );
-
 ListItemLeadingIcon.displayName = "ListItemLeadingIcon";
 
-export { ListItemLeadingIcon };
+/* ──────────────────────────────────────────────────────
+   compound export
+   ──────────────────────────────────────────────────── */
+
+type ListItemCompound = typeof ListItemRoot & {
+  Title: typeof Title;
+  Description: typeof Description;
+  Meta: typeof Meta;
+  MetaDivider: typeof MetaDivider;
+};
+
+const ListItem = ListItemRoot as ListItemCompound;
+ListItem.Title = Title;
+ListItem.Description = Description;
+ListItem.Meta = Meta;
+ListItem.MetaDivider = MetaDivider;
 
-// Slot export (asChild 패턴 지원이 필요한 경우 상위에서 사용)
-export const ListItemSlot = Slot;
+export { ListItem, ListItemLeadingIcon };

package/assets/components/ListItem/index.ts

@@ -1,8 +1,8 @@
 export { ListItem, ListItemLeadingIcon } from "./ListItem";
 export type {
   ListItemProps,
-  ListItemVariant,
-  ListItemLayout,
+  ListItemSize,
+  ListItemAlign,
   ListItemLeadingIconProps,
   ListItemLeadingIconSize,
   ListItemLeadingIconTone,

package/assets/components/MetricCard/MetricCard.module.css

@@ -1,11 +1,11 @@
 /*
  * MetricCard — 전부 CTDS 토큰 경유.
  * variant:
- *   line  — border만 (조밀한 그리드, 기본)
+ *   line  — border + 은은한 shadow-sm (조밀한 그리드, 기본)
  *   soft  — bg-subtle 표면 (경계 대신 톤)
  *   bare  — border·bg·padding 모두 제거. pure 좌표 전용.
  *           부모 container가 hairline/톤으로 분리를 담당하는 자리에서만 쓴다.
- * 그림자 금지. interactive: href 있을 때만 hover/focus ring.
+ * interactive: href 있을 때만 hover/focus ring.
  */
 
 .root {
@@ -17,20 +17,20 @@
   min-width: 0;
 }
 
-/* line/soft는 자체 chrome(padding+radius+bg/border)을 가진다. */
+/* line/soft는 자체 chrome(padding+radius)을 가진다.
+   line = hairline만, soft = 톤 배경만 — 둘 다 섞지 않는다. */
 .line,
 .soft {
   padding: var(--space-5) var(--space-5);
   border-radius: var(--radius-md);
-  background: var(--bg);
 }
 
 .line {
   border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
 }
 
 .soft {
-  border: 1px solid transparent;
   background: var(--bg-subtle);
 }
 

package/assets/components/PageHeader/PageHeader.module.css

@@ -0,0 +1,109 @@
+/* Root ─────────────────────────────────────────────────
+   grid-area로 slot 배치 — DOM 순서와 무관하게 Title+Actions가 같은 줄에
+   서고 Eyebrow/Lead/Meta는 그 위아래로 자동 정렬된다. 이 트릭이 compound
+   API의 '자식 생략 가능' 요구와 맞물려서 가장 안정적. 빈 slot은 grid가
+   공간을 안 먹음(자식이 없는 행은 암묵적으로 0).
+
+   세로 간격(eyebrow→title→lead→meta)은 row-gap으로.
+   PageHeader → 다음 섹션 간격은 **상위 wrapper gap이 담당** — 벤더가
+   margin-bottom으로 공급하지 않는다. margin trick 금지, group wrapper + gap만
+   ([[feedback_page_differential_rhythm]], [[feedback_no_double_spacing]]). */
+.root {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "eyebrow eyebrow"
+    "title   actions"
+    "lead    lead"
+    "meta    meta";
+  row-gap: var(--space-1);
+  align-items: start;
+}
+
+/* Size — 타이포 사이즈만 스왑. 외부 간격은 소비처 상위 gap. */
+.root[data-size="sm"] .title {
+  font-size: var(--text-xl);
+  line-height: var(--lh-xl);
+}
+.root[data-size="sm"] .lead {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
+
+.root[data-size="md"] .title {
+  font-size: var(--text-2xl);
+  line-height: var(--lh-2xl);
+}
+.root[data-size="md"] .lead {
+  font-size: var(--text-base);
+  line-height: var(--lh-base);
+}
+
+.root[data-size="lg"] .title {
+  font-size: var(--text-3xl);
+  line-height: var(--lh-3xl);
+}
+.root[data-size="lg"] .lead {
+  font-size: var(--text-base);
+  line-height: var(--lh-base);
+}
+
+/* Eyebrow ──────────────────────────────────────────────
+   작은 상단 라벨. muted + small, uppercase/wide tracking 금지. */
+.eyebrow {
+  grid-area: eyebrow;
+  color: var(--fg-subtle);
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Title ─────────────────────────────────────────────────
+   semibold, letter-spacing은 globals의 .page-title 리듬 승계. */
+.title {
+  grid-area: title;
+  color: var(--fg);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-tighter);
+  margin: 0;
+  min-width: 0;
+}
+
+/* Lead ──────────────────────────────────────────────────
+   muted 본문. */
+.lead {
+  grid-area: lead;
+  color: var(--fg-muted);
+  margin: 0;
+  max-width: 72ch;
+}
+
+/* Meta ──────────────────────────────────────────────────
+   Badge·날짜·author 등. 가로 묶음, gap은 space-2 (작은 컴포넌트 사이 규칙은
+   이웃 간 긴밀한 묶음에 적용되고, meta는 서로 다른 '정보 조각'이라 space-2).
+
+   row-gap(space-1)이 title↔lead에 맞춰 꽤 좁아져 있는데, Meta는 '본문'이 아니라
+   '별도 정보 묶음'이라 그 간격이 어색하게 좁다. 윗 slot(lead/title/eyebrow 중
+   존재하는 것)과의 사이만 추가 margin-top으로 벌림. */
+.meta {
+  grid-area: meta;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  margin-top: var(--space-2);
+}
+
+/* Actions ───────────────────────────────────────────────
+   Title과 같은 줄, 오른쪽 끝에 pin.
+   자식 사이 gap은 작은 컴포넌트 간 규칙대로 space-1. */
+.actions {
+  grid-area: actions;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  align-self: center;
+}

package/assets/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+
+import { cn } from "../_cn";
+import styles from "./PageHeader.module.css";
+
+/* Root ─────────────────────────────────────────────────
+   페이지 body 첫 블록의 head. "이 페이지가 뭔지"를 담는 자리.
+   Topbar(chrome)와 역할이 다르다 — Topbar는 지금 어디(breadcrumb)·공용 액션,
+   PageHeader는 h1·eyebrow·lead·메타·페이지 액션.
+
+   레이아웃은 수직 스택이지만 Actions가 들어오면 Title과 같은 가로줄로
+   자동 분리 (가장 흔한 패턴). Lead/Meta는 Title 아래에 계속 수직. */
+
+export type PageHeaderSize = "sm" | "md" | "lg";
+
+export interface PageHeaderProps extends HTMLAttributes<HTMLElement> {
+  size?: PageHeaderSize;
+}
+
+const PageHeaderRoot = forwardRef<HTMLElement, PageHeaderProps>(function PageHeaderRoot(
+  { size = "md", className, children, ...rest },
+  ref,
+) {
+  return (
+    <header
+      ref={ref}
+      className={cn(styles.root, className)}
+      data-size={size}
+      {...rest}
+    >
+      {children}
+    </header>
+  );
+});
+
+/* Eyebrow — 선택. 작은 상단 라벨("Overview · Billing" 같은 카테고리 표시).
+   uppercase + wide tracking 조합은 금지, muted 색 + 작은 사이즈로만. */
+const PageHeaderEyebrow = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function PageHeaderEyebrow({ className, children, ...rest }, ref) {
+    return (
+      <div ref={ref} className={cn(styles.eyebrow, className)} {...rest}>
+        {children}
+      </div>
+    );
+  },
+);
+
+/* Title — 필수. <h1> 자동.
+   Actions가 같은 부모 안에 있으면 titleRow에 묶여 가로 분리된다. */
+const PageHeaderTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  function PageHeaderTitle({ className, children, ...rest }, ref) {
+    return (
+      <h1 ref={ref} className={cn(styles.title, className)} {...rest}>
+        {children}
+      </h1>
+    );
+  },
+);
+
+/* Lead — 선택. muted 본문 1~2문장. em dash·ellipsis 금지. */
+const PageHeaderLead = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function PageHeaderLead({ className, children, ...rest }, ref) {
+    return (
+      <p ref={ref} className={cn(styles.lead, className)} {...rest}>
+        {children}
+      </p>
+    );
+  },
+);
+
+/* Meta — 선택. Badge·날짜·author 등 작은 메타 조각 가로 묶음.
+   gap은 space-2 (meta 토큰 사이는 작은 컴포넌트 사이가 아니라 '정보 묶음' 사이). */
+const PageHeaderMeta = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function PageHeaderMeta({ className, children, ...rest }, ref) {
+    return (
+      <div ref={ref} className={cn(styles.meta, className)} {...rest}>
+        {children}
+      </div>
+    );
+  },
+);
+
+/* Actions — 선택. Title과 같은 줄로 오른쪽 끝에 pin.
+   자식 사이 gap은 작은 컴포넌트 간 규칙대로 space-1. */
+const PageHeaderActions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function PageHeaderActions({ className, children, ...rest }, ref) {
+    return (
+      <div ref={ref} className={cn(styles.actions, className)} {...rest}>
+        {children}
+      </div>
+    );
+  },
+);
+
+type PageHeaderComponent = typeof PageHeaderRoot & {
+  Eyebrow: typeof PageHeaderEyebrow;
+  Title: typeof PageHeaderTitle;
+  Lead: typeof PageHeaderLead;
+  Meta: typeof PageHeaderMeta;
+  Actions: typeof PageHeaderActions;
+};
+
+const PageHeader = PageHeaderRoot as PageHeaderComponent;
+PageHeader.Eyebrow = PageHeaderEyebrow;
+PageHeader.Title = PageHeaderTitle;
+PageHeader.Lead = PageHeaderLead;
+PageHeader.Meta = PageHeaderMeta;
+PageHeader.Actions = PageHeaderActions;
+
+export { PageHeader };

package/assets/components/PageHeader/index.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from "./PageHeader";
+export type { PageHeaderProps, PageHeaderSize } from "./PageHeader";