@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/components/Disclosure/Disclosure.module.css

@@ -0,0 +1,73 @@
+/* Disclosure ───────────────────────────────────────────────
+   토글 섹션. grid-template-rows 트릭으로 CSS만으로 height 애니메이션.
+   trigger는 라벨 + caret, body는 opacity + height 페이드. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Trigger — 라벨과 caret을 양 끝에. */
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-3) 0;
+  min-height: var(--control-h-md);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg);
+  text-align: start;
+  transition: var(--transition-colors);
+}
+
+.trigger:hover {
+  color: var(--fg-muted);
+}
+
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+  border-radius: var(--radius-xs);
+}
+
+.triggerLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.caret {
+  color: var(--fg-muted);
+  flex: 0 0 auto;
+  transition: transform var(--duration-base) var(--ease-out);
+}
+
+.root[data-open] .caret {
+  transform: rotate(180deg);
+}
+
+/* Body wrap — grid-template-rows 0fr→1fr 트릭.
+   bodyInner는 min-height:0 + overflow:hidden으로 그 안쪽에서 자연 높이만큼만 자람. */
+.bodyWrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows var(--duration-base) var(--ease-emphasized),
+    opacity var(--duration-base) var(--ease-out);
+}
+
+.bodyWrap[data-open] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.bodyInner {
+  min-height: 0;
+  overflow: hidden;
+}

package/assets/components/Disclosure/Disclosure.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+import { Icon } from "../Icon";
+import styles from "./Disclosure.module.css";
+
+/**
+ * Disclosure — 토글로 열고 닫는 섹션.
+ *
+ * grid-template-rows: 0fr → 1fr 트릭으로 자연 높이 측정 없이 CSS만으로 애니메이션.
+ * caret 180° 회전, body opacity 페이드 동반.
+ *
+ * 사용:
+ *   <Disclosure defaultOpen>
+ *     <Disclosure.Trigger>적용 방법</Disclosure.Trigger>
+ *     <Disclosure.Body>...</Disclosure.Body>
+ *   </Disclosure>
+ */
+
+interface DisclosureCtx {
+  open: boolean;
+  toggle: () => void;
+  bodyId: string;
+}
+
+const DisclosureContext = createContext<DisclosureCtx | null>(null);
+
+function useDisclosure() {
+  const ctx = useContext(DisclosureContext);
+  if (!ctx) throw new Error("Disclosure.* must be used inside <Disclosure>");
+  return ctx;
+}
+
+export interface DisclosureProps extends HTMLAttributes<HTMLDivElement> {
+  /** controlled open 상태. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const DisclosureRoot = forwardRef<HTMLDivElement, DisclosureProps>(
+  function DisclosureRoot(
+    { open: openProp, defaultOpen = false, onOpenChange, className, children, ...rest },
+    ref,
+  ) {
+    const [openState, setOpenState] = useState(defaultOpen);
+    const open = openProp ?? openState;
+    const bodyId = useId();
+
+    const toggle = useCallback(() => {
+      const next = !open;
+      if (openProp === undefined) setOpenState(next);
+      onOpenChange?.(next);
+    }, [open, openProp, onOpenChange]);
+
+    const rootClass = [styles.root, className ?? ""].filter(Boolean).join(" ");
+
+    return (
+      <DisclosureContext.Provider value={{ open, toggle, bodyId }}>
+        <div ref={ref} className={rootClass} data-open={open || undefined} {...rest}>
+          {children}
+        </div>
+      </DisclosureContext.Provider>
+    );
+  },
+);
+
+/* Trigger ────────────────────────────────────────────── */
+export interface DisclosureTriggerProps
+  extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
+  children?: ReactNode;
+}
+
+function DisclosureTrigger({ className, children, ...rest }: DisclosureTriggerProps) {
+  const { open, toggle, bodyId } = useDisclosure();
+  return (
+    <button
+      type="button"
+      className={[styles.trigger, className ?? ""].filter(Boolean).join(" ")}
+      aria-expanded={open}
+      aria-controls={bodyId}
+      onClick={toggle}
+      {...rest}
+    >
+      <span className={styles.triggerLabel}>{children}</span>
+      <Icon name="caret-down" size={12} className={styles.caret} />
+    </button>
+  );
+}
+
+/* Body ────────────────────────────────────────────────── */
+export interface DisclosureBodyProps extends HTMLAttributes<HTMLDivElement> {}
+
+function DisclosureBody({ className, children, ...rest }: DisclosureBodyProps) {
+  const { open, bodyId } = useDisclosure();
+  return (
+    <div
+      id={bodyId}
+      className={[styles.bodyWrap, className ?? ""].filter(Boolean).join(" ")}
+      data-open={open || undefined}
+      aria-hidden={!open || undefined}
+      {...rest}
+    >
+      <div className={styles.bodyInner}>{children}</div>
+    </div>
+  );
+}
+
+/* Compound export ────────────────────────────────────── */
+type DisclosureComponent = typeof DisclosureRoot & {
+  Trigger: typeof DisclosureTrigger;
+  Body: typeof DisclosureBody;
+};
+
+const Disclosure = DisclosureRoot as DisclosureComponent;
+Disclosure.Trigger = DisclosureTrigger;
+Disclosure.Body = DisclosureBody;
+
+export { Disclosure };

package/assets/components/Disclosure/index.ts

@@ -0,0 +1,6 @@
+export { Disclosure } from "./Disclosure";
+export type {
+  DisclosureProps,
+  DisclosureTriggerProps,
+  DisclosureBodyProps,
+} from "./Disclosure";

package/assets/components/Drawer/Drawer.module.css

@@ -0,0 +1,257 @@
+/* Drawer ────────────────────────────────────────────────────────
+   화면 가장자리에서 밀고 들어오는 패널. 흐름을 끊지 않고 상세·편집·설정을 띄울 때.
+   구조: [header: title · close] · [body: 자유 children] · [footer: actions]
+   Modal과 달리 가장자리에 붙어 full-length(세로 또는 가로)로 자람.
+   방향(side) × 사이즈(size) × backdrop 정책이 variant 축. */
+
+/* Overlay ───────────────────────────────────────────────────── */
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  background: var(--scrim);
+  animation: drawer-overlay-in var(--duration-base) var(--ease-out);
+}
+
+.overlay[data-state="closed"] {
+  animation: drawer-overlay-out var(--duration-fast) var(--ease-in);
+}
+
+/* Content ───────────────────────────────────────────────────── */
+.content {
+  position: fixed;
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  border: var(--hairline) solid var(--border);
+  box-shadow: var(--shadow-xl);
+  font-family: var(--font-sans);
+  color: var(--fg);
+  outline: none;
+  overflow: hidden;
+  will-change: transform, opacity;
+}
+
+/* side별 자리·사이즈·테두리 — radius는 바깥쪽은 떼고 안쪽만 둥글게. */
+.content[data-side="right"] {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  max-width: calc(100vw - var(--space-8));
+  border-right: 0;
+  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+}
+
+.content[data-side="left"] {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100vw;
+  max-width: calc(100vw - var(--space-8));
+  border-left: 0;
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+}
+
+.content[data-side="top"] {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  max-height: calc(100vh - var(--space-8));
+  border-top: 0;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+
+.content[data-side="bottom"] {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  max-height: calc(100vh - var(--space-8));
+  border-bottom: 0;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+
+/* size — right/left는 width, top/bottom은 height.
+   값은 space-2(8) 배수 조합: sm 44*8=352, md 55*8=440, lg 72*8=576. */
+.content[data-side="right"][data-size="sm"],
+.content[data-side="left"][data-size="sm"] {
+  width: calc(var(--space-2) * 44);
+}
+.content[data-side="right"][data-size="md"],
+.content[data-side="left"][data-size="md"] {
+  width: calc(var(--space-2) * 55);
+}
+.content[data-side="right"][data-size="lg"],
+.content[data-side="left"][data-size="lg"] {
+  width: calc(var(--space-2) * 72);
+}
+
+.content[data-side="top"][data-size="sm"],
+.content[data-side="bottom"][data-size="sm"] {
+  height: calc(var(--space-2) * 36);
+}
+.content[data-side="top"][data-size="md"],
+.content[data-side="bottom"][data-size="md"] {
+  height: calc(var(--space-2) * 50);
+}
+.content[data-side="top"][data-size="lg"],
+.content[data-side="bottom"][data-size="lg"] {
+  height: calc(var(--space-2) * 64);
+}
+
+/* 등장·퇴장 애니 — side별 slide 방향.
+   거리는 --motion-distance-scale로 Motion 축 스왑. */
+.content[data-side="right"] {
+  animation: drawer-in-right var(--duration-slow) var(--ease-emphasized);
+}
+.content[data-side="right"][data-state="closed"] {
+  animation: drawer-out-right var(--duration-base) var(--ease-in);
+}
+.content[data-side="left"] {
+  animation: drawer-in-left var(--duration-slow) var(--ease-emphasized);
+}
+.content[data-side="left"][data-state="closed"] {
+  animation: drawer-out-left var(--duration-base) var(--ease-in);
+}
+.content[data-side="top"] {
+  animation: drawer-in-top var(--duration-slow) var(--ease-emphasized);
+}
+.content[data-side="top"][data-state="closed"] {
+  animation: drawer-out-top var(--duration-base) var(--ease-in);
+}
+.content[data-side="bottom"] {
+  animation: drawer-in-bottom var(--duration-slow) var(--ease-emphasized);
+}
+.content[data-side="bottom"][data-state="closed"] {
+  animation: drawer-out-bottom var(--duration-base) var(--ease-in);
+}
+
+/* Header ────────────────────────────────────────────────────── */
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-5) var(--space-5) 0;
+}
+
+.headerText {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  letter-spacing: var(--type-sm-tracking);
+  font-weight: var(--font-weight-semibold);
+  color: var(--fg);
+}
+
+.description {
+  margin: 0;
+  font-size: var(--text-xs);
+  line-height: var(--lh-xs);
+  color: var(--fg-muted);
+}
+
+.close {
+  flex-shrink: 0;
+  color: var(--fg-muted);
+  /* title 첫 줄 line-height 중앙에 X 중심 맞춤. */
+  margin-top: calc((var(--lh-sm) - var(--iconbtn-h-md)) / 2);
+}
+
+/* Body ──────────────────────────────────────────────────────── */
+/* 바깥(.body)은 overflow만, 안쪽(.bodyInner)이 좌우 padding을 깐다. */
+.body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.bodyInner {
+  padding: var(--space-4) var(--space-5) 0;
+  color: var(--fg);
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
+
+.body:last-child .bodyInner {
+  padding-bottom: var(--space-5);
+}
+
+/* Footer ────────────────────────────────────────────────────── */
+.footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-5) var(--space-5) var(--space-5);
+}
+
+.footer > :first-child {
+  margin-left: auto;
+}
+
+/* Animations ────────────────────────────────────────────────── */
+/* 이동 거리: 기본은 100% translate(완전히 밖으로) + 추가 여유 --space-6.
+   Motion 축의 --motion-distance-scale(1.1 / 1 / 0.9 / 0)이 추가 여유를 스왑. */
+@keyframes drawer-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes drawer-overlay-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+@keyframes drawer-in-right {
+  from { opacity: 0; transform: translateX(calc(var(--space-6) * var(--motion-distance-scale, 1) + 100%)); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes drawer-out-right {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(calc(var(--space-6) * var(--motion-distance-scale, 1) + 100%)); }
+}
+
+@keyframes drawer-in-left {
+  from { opacity: 0; transform: translateX(calc(-var(--space-6) * var(--motion-distance-scale, 1) - 100%)); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes drawer-out-left {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(calc(-var(--space-6) * var(--motion-distance-scale, 1) - 100%)); }
+}
+
+@keyframes drawer-in-top {
+  from { opacity: 0; transform: translateY(calc(-var(--space-6) * var(--motion-distance-scale, 1) - 100%)); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes drawer-out-top {
+  from { opacity: 1; transform: translateY(0); }
+  to   { opacity: 0; transform: translateY(calc(-var(--space-6) * var(--motion-distance-scale, 1) - 100%)); }
+}
+
+@keyframes drawer-in-bottom {
+  from { opacity: 0; transform: translateY(calc(var(--space-6) * var(--motion-distance-scale, 1) + 100%)); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes drawer-out-bottom {
+  from { opacity: 1; transform: translateY(0); }
+  to   { opacity: 0; transform: translateY(calc(var(--space-6) * var(--motion-distance-scale, 1) + 100%)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .overlay,
+  .overlay[data-state="closed"],
+  .content,
+  .content[data-state="closed"] {
+    animation: none;
+  }
+}

package/assets/components/Drawer/Drawer.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { forwardRef, type ReactNode } from "react";
+
+import { Icon } from "../Icon";
+import { IconButton } from "../IconButton";
+
+import styles from "./Drawer.module.css";
+
+export type DrawerSide = "right" | "left" | "top" | "bottom";
+export type DrawerSize = "sm" | "md" | "lg";
+export type DrawerBackdrop = "scrim" | "locked" | "none";
+
+export interface DrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** 헤더 좌측 타이틀. 접근성상 필수 — 숨길 땐 titleSrOnly. */
+  title: ReactNode;
+  /** 타이틀 바로 아래 한두 줄 설명. 헤더 영역 안에서 title과 바짝 붙음. */
+  description?: ReactNode;
+  /** 타이틀을 시각적으로 숨기고 스크린리더에만 노출. */
+  titleSrOnly?: boolean;
+  /** 바디 콘텐츠. Modal보다 길어도 OK — 세로 스크롤 담당. */
+  children?: ReactNode;
+  /** 하단 액션 영역. Button들을 넘김. 없으면 footer 자체가 렌더되지 않음. */
+  footer?: ReactNode;
+  /** 헤더 우측 X 버튼. 기본 true. */
+  dismissible?: boolean;
+  /** 스크린리더용 X 버튼 라벨. i18n 호출부 책임. */
+  dismissLabel?: string;
+  /** ESC 키 닫힘 차단. 중요한 확인/저장 중엔 true. */
+  disableEscape?: boolean;
+  /** 열리는 방향. 기본 right. */
+  side?: DrawerSide;
+  /** 가로/세로 사이즈. right/left는 가로 폭, top/bottom은 세로 높이. 기본 sm. */
+  size?: DrawerSize;
+  /**
+   * backdrop(dim) 정책.
+   * - `scrim` (기본): dim O + 바깥 클릭 닫힘.
+   * - `locked`: dim O + 바깥 클릭 무시 (실수 유발 방지).
+   * - `none`: dim 없음 — non-modal 사이드 패널 느낌. 뒤 영역 계속 조작 가능.
+   */
+  backdrop?: DrawerBackdrop;
+}
+
+export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
+  {
+    open,
+    onOpenChange,
+    title,
+    description,
+    titleSrOnly,
+    children,
+    footer,
+    dismissible = true,
+    dismissLabel,
+    disableEscape,
+    side = "right",
+    size = "sm",
+    backdrop = "scrim",
+  },
+  ref,
+) {
+  // non-modal이면 Radix에게 modal=false로 넘겨 뒤 영역 포인터 이벤트 유지.
+  const isModal = backdrop !== "none";
+
+  return (
+    <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={isModal}>
+      <RadixDialog.Portal>
+        {backdrop !== "none" && (
+          <RadixDialog.Overlay className={styles.overlay} />
+        )}
+        <RadixDialog.Content
+          ref={ref}
+          className={styles.content}
+          data-side={side}
+          data-size={size}
+          onEscapeKeyDown={(e) => {
+            if (disableEscape) e.preventDefault();
+          }}
+          onPointerDownOutside={(e) => {
+            // scrim만 바깥 클릭 닫힘. locked/none은 Radix 기본 닫힘 차단.
+            if (backdrop !== "scrim") e.preventDefault();
+          }}
+          onInteractOutside={(e) => {
+            if (backdrop === "none") e.preventDefault();
+          }}
+        >
+          <div className={styles.header}>
+            <div className={styles.headerText}>
+              <RadixDialog.Title
+                className={[styles.title, titleSrOnly && "visually-hidden"]
+                  .filter(Boolean)
+                  .join(" ")}
+              >
+                {title}
+              </RadixDialog.Title>
+              {description && (
+                <RadixDialog.Description className={styles.description}>
+                  {description}
+                </RadixDialog.Description>
+              )}
+            </div>
+            {dismissible && (
+              <RadixDialog.Close asChild>
+                <IconButton
+                  className={styles.close}
+                  variant="ghost"
+                  icon={<Icon name="x" />}
+                  aria-label={dismissLabel}
+                />
+              </RadixDialog.Close>
+            )}
+          </div>
+          {children !== undefined && children !== null && (
+            <div className={styles.body}>
+              <div className={styles.bodyInner}>{children}</div>
+            </div>
+          )}
+          {footer && <div className={styles.footer}>{footer}</div>}
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+});

package/assets/components/Drawer/index.ts

@@ -0,0 +1,7 @@
+export { Drawer } from "./Drawer";
+export type {
+  DrawerProps,
+  DrawerSide,
+  DrawerSize,
+  DrawerBackdrop,
+} from "./Drawer";

package/assets/components/EmptyState/EmptyState.module.css

@@ -0,0 +1,102 @@
+/* EmptyState ──────────────────────────────────────────────────
+   리스트/테이블/대시보드 영역이 비었을 때 영역 전체를 채우는 자리채움.
+   세로 중앙정렬 — 시각 요소 → 타이틀 → 설명 → 액션.
+   size는 외곽 padding과 시각 요소/텍스트 스케일을 함께 스왑. */
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--fg);
+  font-family: var(--font-sans);
+  /* 영역 전체를 채우도록 컨테이너 폭·높이를 꽉 채운다. */
+  width: 100%;
+}
+
+/* Visual slot ─────────────────────────────────────────────────
+   illustration: 자체 폭/높이 결정. 컨테이너는 size별 min-height만 보장.
+   icon: --icon-size-* 토큰 기반, size별로 몇 배수 스케일. */
+.illustration {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--fg-subtle);
+}
+
+/* Text block — title/description은 세트로 묶여 보이도록 gap 좁게. */
+.text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  max-width: 42ch;
+}
+.title {
+  color: var(--fg);
+  font-weight: var(--font-weight-medium);
+}
+.description {
+  color: var(--fg-muted);
+}
+
+/* Actions — Button 1~2개 가로 배치. */
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+/* text ↔ actions 사이는 다른 요소 간격보다 한 단계 더 벌린다 —
+   "읽은 뒤 → 행동"으로 넘어가는 breath. root gap 위에 margin-top으로 추가. */
+.text + .actions {
+  margin-top: var(--space-2);
+}
+
+/* Size scale ──────────────────────────────────────────────────
+   sm: 패널·사이드 리스트 안 (좁은 영역)
+   md: 메인 콘텐츠 영역 (테이블·그리드)
+   아이콘·폰트·패딩 전부 콘솔 밀도 기준으로 보수적. 과하지 않게. */
+.sizeSm {
+  gap: var(--space-2);
+  padding: var(--space-5) var(--space-4);
+}
+.sizeSm .icon > svg {
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
+}
+.sizeSm .title {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
+.sizeSm .description {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
+
+.sizeMd {
+  gap: var(--space-3);
+  padding: var(--space-6) var(--space-5);
+}
+.sizeMd .icon > svg {
+  /* icon-size-lg × 1.17 ≒ 28px — sm(24)보다 살짝만 큼. */
+  width: calc(var(--icon-size-lg) * 1.17);
+  height: calc(var(--icon-size-lg) * 1.17);
+}
+.sizeMd .title {
+  font-size: var(--text-base);
+  line-height: var(--lh-base);
+}
+.sizeMd .description {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
+