@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/Chip/Chip.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import { Icon } from "../Icon";
+import styles from "./Chip.module.css";
+
+export type ChipSize = "sm" | "md";
+export type ChipVariant = "soft" | "outline";
+
+export type ChipProps = Omit<HTMLAttributes<HTMLSpanElement>, "onClick"> & {
+  size?: ChipSize;
+  variant?: ChipVariant;
+  leftIcon?: ReactNode;
+  /** 있으면 오른쪽 X 버튼 렌더. 클릭 시 호출. */
+  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
+  /** 제거 버튼 접근성 라벨. onRemove와 세트. */
+  removeLabel?: string;
+  disabled?: boolean;
+};
+
+const sizeClass: Record<ChipSize, string> = {
+  sm: styles.sm,
+  md: styles.md,
+};
+
+const variantClass: Record<ChipVariant, string> = {
+  soft: styles.soft,
+  outline: styles.outline,
+};
+
+const ICON_SIZE: Record<ChipSize, number> = {
+  sm: 12,
+  md: 14,
+};
+
+function sizedIcon(node: ReactNode, size: number): ReactNode {
+  if (!isValidElement(node)) return node;
+  const el = node as ReactElement<{ size?: number | string }>;
+  if (el.props.size !== undefined) return el;
+  return cloneElement(el, { size });
+}
+
+const Chip = forwardRef<HTMLSpanElement, ChipProps>(
+  (
+    {
+      className,
+      size = "md",
+      variant = "soft",
+      leftIcon,
+      onRemove,
+      removeLabel = "제거",
+      disabled = false,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const rootClass = [
+      styles.root,
+      sizeClass[size],
+      variantClass[variant],
+      disabled ? styles.disabled : "",
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <span ref={ref} className={rootClass} {...rest}>
+        {leftIcon && (
+          <span className={styles.icon} aria-hidden>
+            {sizedIcon(leftIcon, ICON_SIZE[size])}
+          </span>
+        )}
+        {children && <span className={styles.label}>{children}</span>}
+        {onRemove && (
+          <button
+            type="button"
+            className={styles.remove}
+            onClick={onRemove}
+            disabled={disabled}
+            aria-label={removeLabel}
+          >
+            <Icon name="x" size={ICON_SIZE[size]} />
+          </button>
+        )}
+      </span>
+    );
+  },
+);
+
+Chip.displayName = "Chip";
+
+export { Chip };

package/assets/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from "./Chip";
+export type { ChipProps, ChipSize, ChipVariant } from "./Chip";

package/assets/components/ChoiceCard/ChoiceCard.module.css

@@ -0,0 +1,142 @@
+/* ChoiceCard ────────────────────────────────────────────────
+   온보딩·유저 타입 선택·문서 지도 등 큰 선택지/네비게이션 카드.
+   - mode: radio(단일) | checkbox(다중) | link(네비게이션)
+   - layout: vertical(아이콘 위 · 텍스트 아래 가운데) | horizontal(아이콘 왼쪽 · 텍스트 오른쪽 좌측정렬)
+
+   구조 · 상태 처리 · 접근성은 [[SelectableCard]]와 동일한 패턴:
+   .surface (경계 · hover shadow · checked ring) + .content (아이콘 + 텍스트).
+   input을 label 안에 숨겨 네이티브 폼 전송 유지. link 모드는 Next Link로 렌더.
+
+   Accent: 전역 --selected-fg (mono=fg, standard/colorful=primary). */
+
+.root {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  user-select: none;
+  color: var(--fg);
+  font-family: var(--font-sans);
+  border-radius: var(--radius-lg);
+  transition: var(--transition-colors), var(--transition-press);
+  /* Hover translateY 상단 잘림 방지 */
+  margin-top: var(--hairline);
+  text-decoration: none;
+}
+.root[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.surface {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: transparent;
+  border: 1px solid var(--border);
+  transition: var(--transition-colors), var(--transition-ring);
+  pointer-events: none;
+}
+
+.content {
+  position: relative;
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-4);
+}
+
+/* ── Layout: vertical (default) ────────────────────────────── */
+.root[data-layout="vertical"] .content {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.root[data-layout="vertical"] .text {
+  align-items: center;
+}
+
+/* ── Layout: horizontal ───────────────────────────────────── */
+.root[data-layout="horizontal"] .content {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-4);
+  text-align: left;
+}
+.root[data-layout="horizontal"] .icon {
+  flex-shrink: 0;
+  align-self: flex-start;
+}
+.root[data-layout="horizontal"] .text {
+  align-items: flex-start;
+  flex: 1;
+  min-width: 0;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-muted);
+  transition: var(--transition-colors);
+}
+.icon > svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+}
+.title {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg);
+  overflow-wrap: anywhere;
+}
+.description {
+  font-size: var(--text-xs);
+  line-height: var(--lh-xs);
+  color: var(--fg-muted);
+  overflow-wrap: anywhere;
+}
+
+/* ── States ────────────────────────────────────────────────── */
+
+/* Hover — 배경/경계 안 건드리고 lift + shadow만.
+   active/checked signal 속성을 덮지 않는다. */
+.root:hover:not([data-disabled="true"]) {
+  transform: translateY(-1px);
+}
+.root:hover:not([data-disabled="true"]) .surface {
+  box-shadow: var(--shadow-sm);
+}
+.root:active:not([data-disabled="true"]) {
+  transform: translateY(0);
+}
+
+/* Focus */
+.input:focus-visible ~ .surface {
+  box-shadow: var(--ring-shadow);
+}
+.root[data-mode="link"]:focus-visible .surface {
+  box-shadow: var(--ring-shadow);
+}
+.root[data-mode="link"]:focus-visible {
+  outline: none;
+}
+
+/* Checked — 경계 accent 승격. 굵기 1px 유지 (Shape 축 영향 없음). */
+.input:checked ~ .surface {
+  border-color: var(--selected-fg);
+}
+.input:checked:focus-visible ~ .surface {
+  box-shadow: var(--ring-shadow);
+}
+
+/* Icon — checked 시 accent 색 */
+.input:checked ~ .content .icon {
+  color: var(--selected-fg);
+}

package/assets/components/ChoiceCard/ChoiceCard.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import Link from "next/link";
+import { forwardRef, type AnchorHTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
+
+import { Icon, type IconName } from "../Icon";
+
+import styles from "./ChoiceCard.module.css";
+
+export type ChoiceCardMode = "radio" | "checkbox" | "link";
+export type ChoiceCardLayout = "vertical" | "horizontal";
+
+type CommonProps = {
+  /**
+   * radio: 단일 선택 (RadioGroup으로 묶기).
+   * checkbox: 다중 선택.
+   * link: 네비게이션 카드 (`<a>` 렌더, href 필수, 선택 상태 없음).
+   */
+  mode?: ChoiceCardMode;
+  /**
+   * vertical: 아이콘 위·텍스트 아래 가운데 정렬 (온보딩·유저 타입 선택 등 페이지 중앙 큰 선택지).
+   * horizontal: 아이콘 왼쪽·텍스트 오른쪽 좌측정렬 (문서 지도·설정 라우트 등 네비게이션 리스트).
+   */
+  layout?: ChoiceCardLayout;
+  /**
+   * IconName 문자열이면 기본 Icon을 렌더. ReactNode를 넘기면 그대로 슬롯에 꽂아
+   * fill variant·커스텀 색 Icon·이미지·로고 등을 자유롭게 사용할 수 있다.
+   * 생략 시 아이콘 영역 자체가 사라져 텍스트만 가운데/왼쪽 정렬.
+   */
+  icon?: IconName | ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+};
+
+type InputChoiceProps = CommonProps &
+  Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "title"> & {
+    mode?: "radio" | "checkbox";
+    href?: never;
+  };
+
+type LinkChoiceProps = CommonProps &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "title"> & {
+    mode: "link";
+    href: string;
+  };
+
+export type ChoiceCardProps = InputChoiceProps | LinkChoiceProps;
+
+const ChoiceCard = forwardRef<HTMLInputElement | HTMLAnchorElement, ChoiceCardProps>(
+  (props, ref) => {
+    const {
+      className,
+      mode = "radio",
+      layout = "vertical",
+      icon,
+      title,
+      description,
+    } = props;
+
+    const rootClass = [styles.root, className ?? ""].filter(Boolean).join(" ");
+    const hasIcon = icon != null && icon !== false;
+
+    const inner = (
+      <>
+        <span className={styles.surface} aria-hidden />
+        <span className={styles.content}>
+          {hasIcon && (
+            <span className={styles.icon} aria-hidden>
+              {typeof icon === "string" ? <Icon name={icon as IconName} /> : icon}
+            </span>
+          )}
+          <span className={styles.text}>
+            <span className={styles.title}>{title}</span>
+            {description && (
+              <span className={styles.description}>{description}</span>
+            )}
+          </span>
+        </span>
+      </>
+    );
+
+    if (mode === "link") {
+      const { href, mode: _m, layout: _l, icon: _i, title: _t, description: _d, ...rest } =
+        props as LinkChoiceProps;
+      return (
+        <Link
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          href={href}
+          className={rootClass}
+          data-layout={layout}
+          data-mode="link"
+          {...rest}
+        >
+          {inner}
+        </Link>
+      );
+    }
+
+    const {
+      mode: _m,
+      layout: _l,
+      icon: _i,
+      title: _t,
+      description: _d,
+      disabled,
+      ...rest
+    } = props as InputChoiceProps;
+    const inputType = mode === "checkbox" ? "checkbox" : "radio";
+
+    return (
+      <label
+        className={rootClass}
+        data-layout={layout}
+        data-mode={mode}
+        data-disabled={disabled ? "true" : "false"}
+      >
+        <input
+          ref={ref as React.Ref<HTMLInputElement>}
+          type={inputType}
+          className={`${styles.input} visually-hidden`}
+          disabled={disabled}
+          {...rest}
+        />
+        {inner}
+      </label>
+    );
+  },
+);
+
+ChoiceCard.displayName = "ChoiceCard";
+
+export { ChoiceCard };

package/assets/components/ChoiceCard/index.ts

@@ -0,0 +1,2 @@
+export { ChoiceCard } from "./ChoiceCard";
+export type { ChoiceCardProps, ChoiceCardMode, ChoiceCardLayout } from "./ChoiceCard";

package/assets/components/ContextMenu/ContextMenu.module.css

@@ -0,0 +1,102 @@
+/* ContextMenu — Radix ContextMenu 위에 얹은 시각 레이어.
+   시각 규칙은 여기 · 상태·슬롯은 MenuItem이 이미 처리.
+
+   ▸ 이 파일은 "메뉴 팝오버 표면"의 원본(single source of truth).
+     Select · DropdownMenu 등 다른 메뉴형 팝오버는 아래 클래스들을
+     `composes: <name> from "../ContextMenu/ContextMenu.module.css"` 로 재사용한다.
+     시각 규칙을 두 갈래로 갈리지 않게 하려는 규약. */
+
+/* Surface ─────────────────────────────────────────────────
+   부양된 팝오버 표면. bg/border/radius/shadow/padding/outline만 담당.
+   width/min-width/max-width, transform-origin, z-index, animation은
+   각 파생 컴포넌트가 자기 primitive의 CSS 변수(--radix-*-content-*)에 맞춰 지정.
+   → primitive마다 다른 값이라 여기서 뭉치면 안 된다. */
+.surface {
+  padding: var(--space-1);
+  background: var(--bg);
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  outline: none;
+}
+
+/* Content panel ─────────────────────────────────────────────
+   ContextMenu 전용 폭·transform-origin·애니메이션.
+   표준 폭(--context-menu-w = 28×space-2 = 224px)을 기본으로 잡되,
+   라벨이 표준 폭을 넘길 땐 한 스텝(space-2*6 = 48px)까지만 확장.
+   그 이상은 label에서 ellipsis 처리 — 두 줄로 감싸는 대신 시각 리듬을 지킨다.
+   프롬프트에서 라벨을 짧게 쓰도록 강제하는 게 원칙, CSS는 백업일 뿐.
+   .panel은 문서·프리뷰용으로 같은 시각을 재활용하기 위한 별칭. */
+.content,
+.panel {
+  composes: surface;
+  --context-menu-w: calc(var(--space-2) * 28);
+  /* 표준 폭 224 = min-width. 콘텐츠가 넘칠 땐 max-content로 딱 필요한 만큼만 커진다.
+     상한은 표준 + 한 스텝(48). 뷰포트가 좁으면 뷰포트에 맞춰 축소. */
+  width: max-content;
+  min-width: var(--context-menu-w);
+  max-width: min(
+    calc(var(--context-menu-w) + var(--space-2) * 6),
+    calc(100vw - var(--space-6))
+  );
+}
+.content {
+  z-index: var(--z-popover);
+  /* Radix가 계산한 원점에서 자라나도록 */
+  transform-origin: var(--radix-context-menu-content-transform-origin);
+}
+
+/* SubContent도 같은 표면. transform-origin만 사이드 계산이 달라 다른 변수 사용. */
+.content[data-radix-context-menu-sub-content] {
+  transform-origin: var(--radix-context-menu-sub-content-transform-origin);
+}
+
+/* In · Out 애니메이션은 전역 유틸 `.m-float`가 담당한다. 컴포넌트 tsx에서 Content의
+   className에 "m-float"을 추가해 발동. 여기서는 애니메이션 규칙을 재정의하지 않는다.
+   자세한 방향/시간/곡선 규칙은 globals.css의 .m-float 정의 참고. */
+
+/* Label은 MenuItem variant="section"으로 위임. 별도 스타일 없음. */
+
+/* Separator ────────────────────────────────────────────────
+   1px hairline. Border 시스템 규칙(굵기 --hairline 고정) 준수.
+   좌우 여백은 content padding(space-1) 위에 space-2를 더 얹어 아이템 텍스트 라인보다
+   안쪽으로 들여 시각 리듬을 잡는다. 위·아래는 space-0_5로 얇게 숨쉴 자리만. */
+.separator {
+  height: var(--hairline);
+  margin: var(--space-1) var(--space-2);
+  background: var(--border);
+}
+
+/* CheckboxItem · RadioItem indicators ─────────────────────────
+   Checkbox / Radio 컴포넌트의 시각 인디케이터를 그대로 재사용한다
+   (composes). Radix가 이미 CheckboxItem/RadioItem의 상태·포커스·
+   키보드를 관리하므로 여기서는 시각만 필요 — Checkbox/Radio 컴포넌트가
+   가진 <label><input> 접근성 구조는 중첩되면 오히려 방해가 된다.
+
+   상태 반응 트리거
+   - Checkbox: `data-checked` 속성을 어댑터에서 직접 세팅.
+   - Radio: Radix가 부모 MenuItem(asChild) 에 부여하는 `data-state="checked"`를
+           CSS 컨텍스트 셀렉터로 잡아 자손 indicator에 전파. */
+
+.checkIndicator {
+  composes: indicator from "../Checkbox/Checkbox.module.css";
+  /* 메뉴 컨텍스트에선 leading 슬롯 사이즈 토큰(--menu-icon-size)에 맞춰 정렬.
+     Checkbox 컴포넌트 기본은 16px(--space-4)라 sm 메뉴(14)에서만 살짝 축소됨. */
+  width: var(--menu-icon-size);
+  height: var(--menu-icon-size);
+}
+
+.radioIndicator {
+  composes: indicator from "../Radio/Radio.module.css";
+  width: var(--menu-icon-size);
+  height: var(--menu-icon-size);
+}
+
+/* Radix RadioItem이 선택되면 asChild 대상(MenuItem root)에 data-state="checked"가 붙는다.
+   그 컨텍스트에서 자손 radioIndicator에 Radio 컴포넌트의 checked 시각을 그대로 적용. */
+:global([data-state="checked"]) .radioIndicator {
+  box-shadow: inset 0 0 0 1px var(--selected-fg);
+  background:
+    radial-gradient(circle at center, var(--selected-fg) 0, var(--selected-fg) 30%, transparent 31%),
+    var(--bg);
+}