@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/AvatarUpload/AvatarUpload.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import {
+  forwardRef,
+  useRef,
+  type ChangeEvent,
+  type HTMLAttributes,
+  type MouseEvent,
+} from "react";
+
+import { Avatar, type AvatarShape, type AvatarSize } from "../Avatar";
+import { Icon } from "../Icon";
+import styles from "./AvatarUpload.module.css";
+
+export type AvatarUploadProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  /** 현재 이미지 URL. 없으면 이니셜/아이콘으로 폴백. */
+  src?: string;
+  /** 이니셜 추출·접근성 라벨용. */
+  name?: string;
+  /** 접근성 라벨 (name보다 우선). */
+  alt?: string;
+  /** 파일 선택 시 호출. */
+  onChange?: (file: File) => void;
+  /** 있으면 src가 있을 때만 X 버튼 렌더. 클릭 시 호출. */
+  onRemove?: () => void;
+  /** 허용 MIME. 기본 image/*. */
+  accept?: string;
+  disabled?: boolean;
+  /** hover 오버레이 라벨. 기본 "사진 변경". */
+  editLabel?: string;
+  /** 삭제 버튼 aria-label. 기본 "사진 제거". */
+  removeLabel?: string;
+};
+
+const AvatarUpload = forwardRef<HTMLDivElement, AvatarUploadProps>(
+  (
+    {
+      className,
+      size = "xl",
+      shape = "circle",
+      src,
+      name,
+      alt,
+      onChange,
+      onRemove,
+      accept = "image/*",
+      disabled = false,
+      editLabel = "사진 변경",
+      removeLabel = "사진 제거",
+      ...rest
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const openPicker = () => {
+      if (disabled) return;
+      inputRef.current?.click();
+    };
+
+    const handleFile = (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) onChange?.(file);
+      /* 같은 파일 재선택도 change 이벤트가 발생하도록 리셋 */
+      e.target.value = "";
+    };
+
+    const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      onRemove?.();
+    };
+
+    const cls = [
+      styles.root,
+      styles[size],
+      shape === "rounded" ? styles.rounded : styles.circle,
+      disabled ? styles.disabled : "",
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={cls} {...rest}>
+        <button
+          type="button"
+          className={styles.trigger}
+          onClick={openPicker}
+          disabled={disabled}
+          aria-label={editLabel}
+        >
+          <Avatar size={size} shape={shape} src={src} name={name} alt={alt} />
+          <span className={styles.overlay} aria-hidden>
+            <Icon name="camera" size={overlayIconSize(size)} />
+          </span>
+        </button>
+
+        {src && onRemove && (
+          <button
+            type="button"
+            className={styles.remove}
+            onClick={handleRemove}
+            disabled={disabled}
+            aria-label={removeLabel}
+          >
+            <Icon name="x" size={removeIconSize(size)} />
+          </button>
+        )}
+
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          className={styles.input}
+          onChange={handleFile}
+          disabled={disabled}
+          tabIndex={-1}
+          aria-hidden
+        />
+      </div>
+    );
+  },
+);
+
+AvatarUpload.displayName = "AvatarUpload";
+
+/* 오버레이 카메라는 Avatar 아이콘보다 조금 작게 — 반쪽 영역에 얹히므로
+   Avatar 정중앙 아이콘과 같은 크기면 답답해 보인다. */
+function overlayIconSize(size: AvatarSize): number {
+  return { xs: 8, sm: 10, md: 14, lg: 18, xl: 24 }[size];
+}
+
+function removeIconSize(size: AvatarSize): number {
+  return { xs: 8, sm: 10, md: 12, lg: 14, xl: 16 }[size];
+}
+
+export { AvatarUpload };

package/assets/components/AvatarUpload/index.ts

@@ -0,0 +1,2 @@
+export { AvatarUpload } from "./AvatarUpload";
+export type { AvatarUploadProps } from "./AvatarUpload";

package/assets/components/Badge/Badge.module.css

@@ -0,0 +1,76 @@
+/* Badge ────────────────────────────────────────────────────────
+   메뉴/리스트/카드/버튼 옆에 붙이는 "카운트·상태 라벨".
+   숫자(12·3) 또는 짧은 문자열(new·beta) 모두 대응. 콘텐츠 폭 그대로 흐르되
+   1글자 숫자면 min-width로 원형에 가깝게 유지. */
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-family: var(--label-font);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  letter-spacing: var(--label-tracking);
+  white-space: nowrap;
+  /* border 자리를 항상 확보 — variant에 따라 색만 바뀌게 하면 layout shift 없음 */
+  border: 1px solid transparent;
+}
+
+/* Sizes ──────────────────────────────────────────────────────── */
+/* 텍스트 크기에 맞춘 사각 라벨. radius는 size 별로 차등.
+   높이는 폰트 line-height + 세로 padding으로 자연히 결정. */
+.root { border-radius: var(--radius-xs); }
+.sm {
+  padding-block: var(--space-0_5);              /* 2 */
+  padding-inline: var(--space-1);               /* 4 */
+  font-size: var(--text-3xs);                   /* 11 */
+}
+.md {
+  padding-block: var(--space-1);                /* 4 */
+  padding-inline: var(--space-1_5);             /* 6 */
+  font-size: var(--text-2xs);                   /* 12 */
+}
+
+/* Shape ──────────────────────────────────────────────────────
+   square(기본)은 size별 radius를 그대로 사용, pill은 --radius-full로 강제. */
+.pill { border-radius: var(--radius-full); }
+
+/* Variants ───────────────────────────────────────────────────── */
+/* solid — primary로 완전히 채움. 강조 상위 위계.
+   위 텍스트/아이콘은 --bg (라이트=흰, 다크=거의 검정) — Button primary와 동일 규칙.
+   soft  — primary 8% 표면 + --secondary-fg 텍스트.
+   Accent=mono일 땐 --secondary-fg가 무채색으로 자동 폴백. */
+.solid {
+  background: var(--primary);
+  color: var(--bg);
+}
+.soft {
+  background: var(--primary-subtle);
+  color: var(--secondary-fg);
+}
+/* inverse — 어두운 표면(FilterButton selected 등) 위에 얹는 라벨.
+   solid의 정반대: 배경 --bg, 글자 --fg. Mode를 따라 자동 반전됨. */
+.inverse {
+  background: var(--bg);
+  color: var(--fg);
+}
+
+/* Status ─────────────────────────────────────────────────────
+   status는 soft 전용. solid는 알림/언리드 강조로 primary만 사용한다.
+   soft + status는 상태색 8% 배경 + 상태색 텍스트. */
+.soft.success {
+  background: var(--success-subtle);
+  color: var(--success);
+}
+.soft.warning {
+  background: var(--warning-subtle);
+  color: var(--warning);
+}
+.soft.destructive {
+  background: var(--destructive-subtle);
+  color: var(--destructive);
+}
+.soft.info {
+  background: var(--info-subtle);
+  color: var(--info);
+}

package/assets/components/Badge/Badge.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import styles from "./Badge.module.css";
+
+export type BadgeSize = "sm" | "md";
+export type BadgeVariant = "solid" | "soft" | "inverse";
+export type BadgeStatus = "success" | "warning" | "destructive" | "info";
+/** 기본은 "square". pill은 웬만하면 쓰지 않는다 —
+ *  Shape 축이 전역적으로 radius를 조절하므로, 특정 컴포넌트가 pill로 모양을 고정하면
+ *  축 스왑 효과가 사라지고 테마 간 톤이 깨진다. 알림·카운터 등 "원형이 의미인" 경우에만 opt-in. */
+export type BadgeShape = "square" | "pill";
+
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+  size?: BadgeSize;
+  variant?: BadgeVariant;
+  status?: BadgeStatus;
+  shape?: BadgeShape;
+  children?: ReactNode;
+};
+
+const sizeClass: Record<BadgeSize, string> = {
+  sm: styles.sm,
+  md: styles.md,
+};
+
+const variantClass: Record<BadgeVariant, string> = {
+  solid: styles.solid,
+  soft: styles.soft,
+  inverse: styles.inverse,
+};
+
+const statusClass: Record<BadgeStatus, string> = {
+  success: styles.success,
+  warning: styles.warning,
+  destructive: styles.destructive,
+  info: styles.info,
+};
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, size = "sm", variant = "solid", status, shape = "square", children, ...rest }, ref) => {
+    /* solid/inverse는 알림·강조 전용 — primary·bg 톤만 허용. status와 조합 금지. */
+    const effectiveStatus = variant === "soft" ? status : undefined;
+    if (process.env.NODE_ENV !== "production" && variant !== "soft" && status) {
+      console.warn(
+        `[Badge] status는 variant="soft" 전용입니다. solid/inverse는 강조 톤이라 상태색과 조합하지 않습니다.`,
+      );
+    }
+    const cls = [
+      styles.root,
+      sizeClass[size],
+      variantClass[variant],
+      effectiveStatus ? statusClass[effectiveStatus] : "",
+      shape === "pill" ? styles.pill : "",
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+    return (
+      <span ref={ref} className={cls} {...rest}>
+        {children}
+      </span>
+    );
+  },
+);
+
+Badge.displayName = "Badge";
+
+export { Badge };

package/assets/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeSize, BadgeVariant, BadgeStatus, BadgeShape } from "./Badge";

package/assets/components/Breadcrumb/Breadcrumb.module.css

@@ -0,0 +1,213 @@
+/* Breadcrumb ──────────────────────────────────────────────────
+   Link = Button size=xs · variant=ghost 와 동일한 토큰 조합.
+   Current = 링크 아님, --fg-strong로 위계 표시.
+   Separator = 무채 아이콘, hover·press 반응 없음.
+
+   축 반응:
+   ─ Density → --control-h-xs (Link 높이), --label-sm-size (라벨), --space-scale (gap)
+   ─ Shape   → --radius-xs (Link 라운드)
+   ─ Motion  → --transition-* (hover 색 전환)
+*/
+
+.root {
+  min-width: 0;
+}
+
+.list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-0_5);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* Separator ─── 무채 아이콘. Link/Current 사이 정적 마커. */
+.separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--fg-muted);
+  opacity: 0.5;
+  /* 아이콘 슬롯. size는 컴포넌트에서 주입. */
+}
+.separator > svg {
+  display: block;
+}
+
+/* Link ─── Button size=xs · variant=ghost 재현.
+   높이·padding·gap·font-size·radius를 xs 토큰으로. hover에만 표면 색. */
+.link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+  height: var(--control-h-xs);
+  padding-inline: var(--space-1);
+  border-radius: var(--radius-xs);
+  font-family: var(--label-font);
+  font-weight: var(--label-weight);
+  font-size: var(--label-sm-size);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--label-tracking);
+  color: var(--fg-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  min-width: 0;
+  transition: var(--transition-colors), var(--transition-ring), var(--transition-press);
+}
+.link:hover {
+  background: var(--hover);
+  color: var(--fg);
+}
+.link:active {
+  transform: translateY(var(--space-0_5));
+}
+.link:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+.link[aria-disabled="true"] {
+  cursor: not-allowed;
+  color: var(--fg-disabled);
+  pointer-events: none;
+}
+
+/* Icon-only 변형 — children 없이 leftIcon만 있을 때. 정사각 hit box. */
+.linkIconOnly {
+  width: var(--control-h-xs);
+  padding-inline: 0;
+  gap: 0;
+}
+
+/* Current ─── 현재 페이지. Link와 같은 높이/타이포지만 hover·press 없음. */
+.current {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  height: var(--control-h-xs);
+  padding-inline: var(--space-1);
+  font-family: var(--label-font);
+  font-weight: var(--label-weight);
+  font-size: var(--label-sm-size);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--label-tracking);
+  color: var(--fg-strong);
+  min-width: 0;
+}
+
+/* Link · Current 공통 슬롯 ─── */
+.linkIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0.75;
+  transition: opacity var(--duration-slow) var(--ease-out);
+}
+.linkIcon > svg {
+  display: block;
+}
+.link:hover .linkIcon {
+  opacity: 1;
+}
+.linkLabel {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Ellipsis trigger ─── 클릭 가능한 축약 버튼. Link와 동일 xs · ghost 스펙. */
+.ellipsisTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--control-h-xs);
+  padding-inline: var(--space-1);
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-family: var(--label-font);
+  font-weight: var(--label-weight);
+  font-size: var(--label-sm-size);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--label-tracking);
+  cursor: pointer;
+  user-select: none;
+  transition: var(--transition-colors), var(--transition-ring), var(--transition-press);
+}
+.ellipsisTrigger:hover {
+  background: var(--hover);
+  color: var(--fg);
+}
+.ellipsisTrigger:active {
+  transform: translateY(var(--space-0_5));
+}
+.ellipsisTrigger:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+.ellipsisTrigger[data-state="open"] {
+  background: var(--hover);
+  color: var(--fg);
+}
+
+/* Popover surface ─── Select · ContextMenu와 동일한 팝오버 표면.
+   ContextMenu.module.css의 .surface를 composes해 시각 규칙 원본을 재사용. */
+.popoverContent {
+  composes: surface from "../ContextMenu/ContextMenu.module.css";
+  --breadcrumb-menu-w: calc(var(--space-2) * 24);
+  width: max-content;
+  min-width: var(--breadcrumb-menu-w);
+  max-width: min(
+    calc(var(--breadcrumb-menu-w) + var(--space-2) * 8),
+    calc(100vw - var(--space-6))
+  );
+  z-index: var(--z-popover);
+  transform-origin: var(--radix-popover-content-transform-origin);
+}
+
+/* Popover list — 스크롤 컨테이너 아님. padding은 surface가 이미 부여. */
+.popoverList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0_5);
+}
+
+/* Popover item 링크/버튼 ── MenuItem을 그대로 감싸 상호작용 표면만 제공.
+   시각은 MenuItem에 위임하고 여기서는 UA 스타일만 리셋. */
+.popoverItemLink,
+.popoverItemButton {
+  all: unset;
+  display: block;
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--radius-xs);
+}
+.popoverItemLink:focus-visible,
+.popoverItemButton:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+.popoverItemButton:disabled,
+.popoverItemLink[aria-disabled="true"] {
+  cursor: not-allowed;
+}