@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/TableCell/TableCell.module.css

@@ -0,0 +1,137 @@
+/* TableCell*
+   ───────────────────────────────────────────────────────────────
+   TableRow 셀 안쪽에 꽂히는 "콘텐츠 포맷터"들. 공통 레이아웃만.
+   폭·정렬·padding은 상위 TableRow .cell에서 통제한다.
+
+   토큰만 사용 — 색/시간/폰트 리터럴 금지.
+*/
+
+/* 공용 inline-flex 베이스 — 모든 셀 포맷터가 상속.
+   overflow/mask는 상위 TableRow .cellInner가 책임 — 포맷터는 clipping을 두지 않는다.
+   (여기서 overflow:hidden을 주면 자식 mask가 중첩되어 fade가 깨짐). */
+.base {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  gap: var(--space-1);
+  white-space: nowrap;
+}
+
+/* Text ─────────────────────────────────────────────────── */
+.text {
+  white-space: nowrap;
+  color: inherit;
+}
+
+.textMuted { color: var(--fg-muted); }
+.textStrong { color: var(--fg-strong); font-weight: var(--font-weight-medium); }
+.textSubtle { color: var(--fg-subtle); }
+
+/* Number — 숫자 셀. tabular-nums로 자릿수 정렬 안정. */
+.number {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* 통화/단위 접미사는 fg-muted로 한 톤 약하게. */
+.numberUnit {
+  color: var(--fg-muted);
+  margin-inline-start: var(--space-0_5);
+}
+
+/* 음수 하이라이트 — destructive 톤. */
+.numberNegative {
+  color: var(--destructive);
+}
+
+/* Image cell — 썸네일 + 라벨.
+   썸네일 ↔ 라벨 사이는 공용 base(--space-1)보다 넉넉하게 --space-2.
+   아이콘·이미지 자리에 라벨이 바짝 붙으면 "그릇과 내용"의 리듬이 깨짐. */
+.imageCell {
+  gap: var(--space-2);
+}
+
+/* Image thumb — 정사각/radius-sm 기본. src 없거나 로드 실패 시 빈 회색박스로 노출.
+   셀 min-height를 넘기지 않도록 size로 받은 px 그대로 적용. */
+.image {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--bg-muted);
+  color: var(--fg-subtle);
+  flex-shrink: 0;
+}
+
+.imageImg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Icon ───────────────────────────────────────────────────
+   아이콘 ↔ 라벨 사이도 image/avatar와 같은 리듬으로 --space-2. */
+.icon {
+  color: var(--fg);
+  gap: var(--space-2);
+}
+
+.iconMuted { color: var(--fg-muted); }
+.iconSubtle { color: var(--fg-subtle); }
+.iconStrong { color: var(--fg-strong); }
+.iconAccent { color: var(--primary); }
+
+/* Avatar ───────────────────────────────────────────────── */
+.avatar {
+  /* 아바타 ↔ 이름 사이 간격 — 다른 리딩 요소(image/icon)보다 한 단계 넓게.
+     사람 식별 셀은 "얼굴"과 "이름"이 분리된 두 정보라 숨 쉴 공간이 필요. */
+  gap: var(--space-3);
+}
+
+.avatarText {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: var(--lh-sm);
+}
+
+.avatarSublabel {
+  color: var(--fg-muted);
+  font-size: var(--text-xs);
+  line-height: var(--lh-xs);
+}
+
+/* Meter ────────────────────────────────────────────────── */
+.meter {
+  gap: var(--space-2);
+}
+
+.meterTrack {
+  position: relative;
+  display: inline-block;
+  height: var(--space-1_5);
+  background: var(--bg-muted);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.meterFill {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  background: var(--primary);
+  border-radius: inherit;
+}
+
+.meterSuccess .meterFill { background: var(--success); }
+.meterWarning .meterFill { background: var(--warning); }
+.meterDestructive .meterFill { background: var(--destructive); }
+
+.meterLabel {
+  color: var(--fg-muted);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}

package/assets/components/TableCell/TableCellAvatar.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { Avatar, type AvatarShape, type AvatarStatus } from "../Avatar";
+import styles from "./TableCell.module.css";
+
+export type TableCellAvatarProps = HTMLAttributes<HTMLSpanElement> & {
+  /** 이미지 URL. 로드 실패 시 이니셜/아이콘 폴백. */
+  src?: string;
+  /** 이름 — 이니셜 추출·tint seed·aria 라벨 공용. */
+  name?: string;
+  /** 이니셜 직접 지정 — name보다 우선. */
+  initials?: string;
+  /** circle(기본, 사람) / rounded(팀·조직·봇). */
+  shape?: AvatarShape;
+  /** 접속 상태 뱃지. 미지정 시 뱃지 없음. */
+  status?: AvatarStatus;
+  /** 아바타 오른쪽 라벨 — 보통 name 재사용. 다른 표시가 필요하면 ReactNode로. */
+  label?: ReactNode;
+  /** 라벨 아래쪽 보조 텍스트 — 이메일·역할 등. */
+  sublabel?: ReactNode;
+};
+
+export const TableCellAvatar = forwardRef<HTMLSpanElement, TableCellAvatarProps>(
+  function TableCellAvatar(
+    { className, src, name, initials, shape = "circle", status, label, sublabel, ...rest },
+    ref,
+  ) {
+    const cls = [styles.base, styles.avatar, className ?? ""].filter(Boolean).join(" ");
+    const resolvedLabel = label ?? name;
+    return (
+      <span ref={ref} className={cls} {...rest}>
+        <Avatar size="md" shape={shape} src={src} name={name} initials={initials} status={status} />
+        {(resolvedLabel != null || sublabel != null) && (
+          <span className={styles.avatarText}>
+            {resolvedLabel != null && <span className={styles.text}>{resolvedLabel}</span>}
+            {sublabel != null && <span className={styles.avatarSublabel}>{sublabel}</span>}
+          </span>
+        )}
+      </span>
+    );
+  },
+);

package/assets/components/TableCell/TableCellBadge.tsx

@@ -0,0 +1,23 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { Badge, type BadgeStatus, type BadgeVariant } from "../Badge";
+import styles from "./TableCell.module.css";
+
+export type TableCellBadgeProps = HTMLAttributes<HTMLSpanElement> & {
+  children?: ReactNode;
+  status?: BadgeStatus;
+  variant?: BadgeVariant;
+};
+
+export const TableCellBadge = forwardRef<HTMLSpanElement, TableCellBadgeProps>(
+  function TableCellBadge({ className, children, status, variant = "soft", ...rest }, ref) {
+    const cls = [styles.base, className ?? ""].filter(Boolean).join(" ");
+    return (
+      <span ref={ref} className={cls} {...rest}>
+        <Badge size="sm" variant={variant} status={status}>
+          {children}
+        </Badge>
+      </span>
+    );
+  },
+);

package/assets/components/TableCell/TableCellIcon.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { Icon, type IconName } from "../Icon";
+import styles from "./TableCell.module.css";
+
+export type TableCellIconTone = "default" | "muted" | "subtle" | "strong" | "accent";
+
+export type TableCellIconProps = HTMLAttributes<HTMLSpanElement> & {
+  /** 아이콘 이름. CTDS Icon 세트 기준. */
+  name: IconName;
+  /** 아이콘 옆 라벨. 미지정 시 아이콘만. */
+  label?: ReactNode;
+  /** 아이콘 톤. 셀 전반의 색을 결정. */
+  tone?: TableCellIconTone;
+  /** 아이콘 크기(px). 기본 16 — 셀 min-height 안쪽. */
+  size?: number;
+};
+
+const toneClass: Record<TableCellIconTone, string> = {
+  default: "",
+  muted: styles.iconMuted,
+  subtle: styles.iconSubtle,
+  strong: styles.iconStrong,
+  accent: styles.iconAccent,
+};
+
+export const TableCellIcon = forwardRef<HTMLSpanElement, TableCellIconProps>(
+  function TableCellIcon({ className, name, label, tone = "default", size = 16, ...rest }, ref) {
+    const cls = [styles.base, styles.icon, toneClass[tone], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+    return (
+      <span ref={ref} className={cls} {...rest}>
+        <Icon name={name} size={size} />
+        {label != null && <span className={styles.text}>{label}</span>}
+      </span>
+    );
+  },
+);

package/assets/components/TableCell/TableCellImage.tsx

@@ -0,0 +1,49 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import styles from "./TableCell.module.css";
+
+export type TableCellImageProps = HTMLAttributes<HTMLSpanElement> & {
+  src?: string;
+  alt?: string;
+  /** px 단위 정사각 썸네일 크기. 기본 24. 셀 min-height 안쪽에 들어가도록 상위에서 조정. */
+  size?: number;
+  /** 모양 — square(기본, radius-sm) / rounded(radius-md) / circle. */
+  shape?: "square" | "rounded" | "circle";
+  /** src 없을 때 또는 로드 실패 폴백 노드. 미지정 시 빈 회색박스(bg-muted). */
+  fallback?: ReactNode;
+  /** 썸네일 오른쪽 라벨 — 파일명·설명 등. */
+  label?: ReactNode;
+};
+
+const shapeRadius: Record<NonNullable<TableCellImageProps["shape"]>, string> = {
+  square: "var(--radius-sm)",
+  rounded: "var(--radius-md)",
+  /* circle은 전용 토큰 경유 — Shape soft 축에서 2xl로 캡된다(완전 원 과함 방지). */
+  circle: "var(--radius-image-circle)",
+};
+
+export const TableCellImage = forwardRef<HTMLSpanElement, TableCellImageProps>(
+  function TableCellImage(
+    { className, src, alt, size = 24, shape = "square", fallback, label, ...rest },
+    ref,
+  ) {
+    const cls = [styles.base, styles.imageCell, className ?? ""].filter(Boolean).join(" ");
+    const thumbStyle = {
+      width: size,
+      height: size,
+      borderRadius: shapeRadius[shape],
+    };
+    return (
+      <span ref={ref} className={cls} {...rest}>
+        <span className={styles.image} style={thumbStyle} aria-hidden={!alt || undefined}>
+          {src ? (
+            <img className={styles.imageImg} src={src} alt={alt ?? ""} />
+          ) : (
+            fallback
+          )}
+        </span>
+        {label != null && <span className={styles.text}>{label}</span>}
+      </span>
+    );
+  },
+);

package/assets/components/TableCell/TableCellLink.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from "react";
+
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+
+export type TableCellLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  children?: ReactNode;
+  /** 외부 링크 — target="_blank"·external 아이콘 자동 추가. */
+  external?: boolean;
+};
+
+/* 셀 안쪽 inline 링크. Button(ghost·xs) + asChild로 anchor를 감싸 — 셀의 "작은 액션"
+   형태를 유지하면서 Button 토큰(hover·focus·ring)을 그대로 받는다.
+   xs size는 ghost 전용 제약 준수.
+   asChild 모드의 Slot은 자식이 정확히 하나여야 해서 Button의 rightIcon prop을 쓸 수 없음.
+   external 아이콘은 anchor 내부에 직접 꽂아 single child 조건을 지킨다.
+   ⚠ Navigate 모드 TableRow(href·onClick 있음) 안에서는 쓰지 않는다 — nested interactive. */
+export const TableCellLink = forwardRef<HTMLAnchorElement, TableCellLinkProps>(
+  function TableCellLink({ children, external, href, target, rel, ...rest }, ref) {
+    const resolvedTarget = external ? (target ?? "_blank") : target;
+    const resolvedRel = external ? (rel ?? "noreferrer noopener") : rel;
+    return (
+      <Button asChild size="xs" variant="ghost">
+        <a ref={ref} href={href} target={resolvedTarget} rel={resolvedRel} {...rest}>
+          {children}
+          {external && <Icon name="arrow-square-out" aria-hidden />}
+        </a>
+      </Button>
+    );
+  },
+);

package/assets/components/TableCell/TableCellMeter.tsx

@@ -0,0 +1,55 @@
+import { forwardRef, type HTMLAttributes } from "react";
+
+import styles from "./TableCell.module.css";
+
+export type TableCellMeterTone = "default" | "success" | "warning" | "destructive";
+
+export type TableCellMeterProps = HTMLAttributes<HTMLSpanElement> & {
+  /** 0~100. 범위 밖은 clamp. */
+  value: number;
+  /** 트랙 폭(px). 기본 80. 셀 폭에 맞춰 조정. */
+  width?: number;
+  /** 수치 라벨 위치 — right(기본), none. */
+  labelPosition?: "right" | "none";
+  /** 수치 표기 포맷. 기본 `{value}%`. */
+  format?: (value: number) => string;
+  /** 톤 — 상태 전달용. */
+  tone?: TableCellMeterTone;
+};
+
+const toneClass: Record<TableCellMeterTone, string> = {
+  default: "",
+  success: styles.meterSuccess,
+  warning: styles.meterWarning,
+  destructive: styles.meterDestructive,
+};
+
+export const TableCellMeter = forwardRef<HTMLSpanElement, TableCellMeterProps>(
+  function TableCellMeter(
+    { className, value, width = 80, labelPosition = "right", format, tone = "default", style, ...rest },
+    ref,
+  ) {
+    const clamped = Math.max(0, Math.min(100, value));
+    const text = (format ?? ((v: number) => `${Math.round(v)}%`))(clamped);
+    const cls = [styles.base, styles.meter, toneClass[tone], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+    return (
+      <span
+        ref={ref}
+        className={cls}
+        role="meter"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={clamped}
+        style={style}
+        {...rest}
+      >
+        <span className={styles.meterTrack} style={{ width }}>
+          <span className={styles.meterFill} style={{ width: `${clamped}%` }} />
+        </span>
+        {labelPosition === "right" && <span className={styles.meterLabel}>{text}</span>}
+      </span>
+    );
+  },
+);

package/assets/components/TableCell/TableCellNumber.tsx

@@ -0,0 +1,43 @@
+import { forwardRef, type HTMLAttributes } from "react";
+
+import styles from "./TableCell.module.css";
+
+export type TableCellNumberProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+  value: number | string;
+  /** Intl.NumberFormat 옵션. value가 number일 때 적용. */
+  format?: Intl.NumberFormatOptions;
+  /** 로케일. 지정 안 하면 브라우저 기본. */
+  locale?: string;
+  /** 숫자 뒤에 붙는 단위(원·%·ms 등). fg-muted 톤으로 렌더. */
+  unit?: string;
+  /** 음수 하이라이트 — destructive 톤. */
+  highlightNegative?: boolean;
+};
+
+export const TableCellNumber = forwardRef<HTMLSpanElement, TableCellNumberProps>(
+  function TableCellNumber(
+    { className, value, format, locale, unit, highlightNegative, ...rest },
+    ref,
+  ) {
+    const numeric = typeof value === "number" ? value : Number(value);
+    const isNegative = highlightNegative && !Number.isNaN(numeric) && numeric < 0;
+    const text =
+      typeof value === "number"
+        ? new Intl.NumberFormat(locale, format).format(value)
+        : String(value);
+    const cls = [
+      styles.base,
+      styles.number,
+      isNegative ? styles.numberNegative : "",
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+    return (
+      <span ref={ref} className={cls} {...rest}>
+        <span>{text}</span>
+        {unit && <span className={styles.numberUnit}>{unit}</span>}
+      </span>
+    );
+  },
+);

package/assets/components/TableCell/TableCellText.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import styles from "./TableCell.module.css";
+
+export type TableCellTextTone = "default" | "strong" | "muted" | "subtle";
+
+export type TableCellTextProps = HTMLAttributes<HTMLSpanElement> & {
+  tone?: TableCellTextTone;
+  children?: ReactNode;
+};
+
+const toneClass: Record<TableCellTextTone, string> = {
+  default: "",
+  strong: styles.textStrong,
+  muted: styles.textMuted,
+  subtle: styles.textSubtle,
+};
+
+export const TableCellText = forwardRef<HTMLSpanElement, TableCellTextProps>(
+  function TableCellText({ className, tone = "default", children, ...rest }, ref) {
+    const cls = [styles.base, styles.text, toneClass[tone], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+    return (
+      <span ref={ref} className={cls} {...rest}>
+        {children}
+      </span>
+    );
+  },
+);

package/assets/components/TableCell/index.ts

@@ -0,0 +1,23 @@
+export { TableCellText } from "./TableCellText";
+export type { TableCellTextProps, TableCellTextTone } from "./TableCellText";
+
+export { TableCellNumber } from "./TableCellNumber";
+export type { TableCellNumberProps } from "./TableCellNumber";
+
+export { TableCellImage } from "./TableCellImage";
+export type { TableCellImageProps } from "./TableCellImage";
+
+export { TableCellBadge } from "./TableCellBadge";
+export type { TableCellBadgeProps } from "./TableCellBadge";
+
+export { TableCellIcon } from "./TableCellIcon";
+export type { TableCellIconProps, TableCellIconTone } from "./TableCellIcon";
+
+export { TableCellAvatar } from "./TableCellAvatar";
+export type { TableCellAvatarProps } from "./TableCellAvatar";
+
+export { TableCellLink } from "./TableCellLink";
+export type { TableCellLinkProps } from "./TableCellLink";
+
+export { TableCellMeter } from "./TableCellMeter";
+export type { TableCellMeterProps, TableCellMeterTone } from "./TableCellMeter";