@conscience-technology/ctds 0.1.13 → 0.2.0

package/assets/components/AppFrame/AppFrame.module.css

@@ -133,6 +133,12 @@
   border-inline-end: var(--hairline) solid var(--border);
 }
 
+/* opt-out: 소비처가 data-sidebar-border="none"을 걸면 사이드바 오른쪽 hairline을 숨김.
+   docs처럼 사이드바가 bg·padding만으로 자체 영역을 표현할 때 사용. */
+.root[data-sidebar-border="none"] .sidebarSlot {
+  border-inline-end: none;
+}
+
 /* floating ────────────────────────────────────────────
    sidebar/topbar/content가 각각 카드로 떠 있음. */
 .root[data-variant="floating"] {

package/assets/components/AttachmentItem/AttachmentItem.module.css

@@ -0,0 +1,112 @@
+/* AttachmentItem — [leading] filename (meta) [actions]
+   size sm/md: 1줄 pill
+   size lg:    2줄 큰 카드 (파일명 위 / meta 아래)
+   폭은 전부 --input-w-lg (400px) 고정 — 소비처가 폭 걱정 없이 넣기만. */
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: var(--input-w-lg);
+  min-width: 0;
+  background: var(--bg);
+  border: var(--hairline) solid var(--border);
+  color: var(--fg);
+  transition: var(--transition-colors);
+  box-sizing: border-box;
+  /* 아주 연한 drop shadow — 종이가 살짝 떠 있는 정도 (hairline보다 아주 약간만 강조). */
+  box-shadow: var(--shadow-xs);
+}
+
+/* ───────── size ─────────
+   sm/md: 1줄. radius-md.
+   lg:   2줄 세로 스택. radius-lg + 넉넉한 padding. */
+.sizeSm {
+  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
+  gap: var(--space-1_5);
+  font-size: var(--text-xs);
+  border-radius: var(--radius-md);
+}
+.sizeMd {
+  padding: var(--space-1_5) var(--space-1_5) var(--space-1_5) var(--space-2_5);
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  border-radius: var(--radius-md);
+}
+.sizeLg {
+  padding: var(--space-2_5) var(--space-1_5) var(--space-2_5) var(--space-2_5);
+  gap: var(--space-2_5);
+  font-size: var(--text-sm);
+  border-radius: var(--radius-lg);
+}
+
+/* ───────── text block ───────── */
+.text {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: baseline;
+  gap: var(--space-1);
+}
+.sizeLg .text {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-0_5);
+}
+
+.label {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg-strong);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+}
+.sizeLg .label {
+  font-size: var(--text-sm);
+}
+
+.meta {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--fg-subtle);
+  font-weight: var(--font-weight-regular);
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--text-xs);
+}
+
+/* ───────── loading slot ─────────
+   FileIcon 자리에 들어가는 정사각 — 각 사이즈 FileIcon 치수와 동일.
+   내부 Spinner(lottie-dots)가 꽉 채운다. */
+.loadingSlot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  color: var(--primary);
+  width: var(--space-6);
+  height: var(--space-6);
+}
+.sizeSm .loadingSlot {
+  width: var(--space-4);
+  height: var(--space-4);
+}
+.sizeLg .loadingSlot {
+  width: var(--space-8);
+  height: var(--space-8);
+}
+/* ───────── actions ───────── */
+.actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: 0 0 auto;
+}

package/assets/components/AttachmentItem/AttachmentItem.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import type { CSSProperties, HTMLAttributes, MouseEvent, ReactNode } from "react";
+import {
+  DotsThree as PhDotsThree,
+  DownloadSimple as PhDownload,
+  X as PhX,
+} from "@phosphor-icons/react";
+import { FileIcon, type FileIconSize } from "@/components/ctds/FileIcon";
+import { IconButton, type IconButtonSize } from "@/components/ctds/IconButton";
+import { Spinner } from "@/components/ctds/Spinner";
+import styles from "./AttachmentItem.module.css";
+
+export type AttachmentItemSize = "sm" | "md" | "lg";
+export type AttachmentItemState = "idle" | "loading";
+
+export interface AttachmentItemProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onError"> {
+  /** 파일명. 확장자가 FileIcon 색/라벨을 결정. */
+  filename: string;
+  /** sm/md=1줄, lg=2줄(파일명 위 / meta 아래). 폭은 전부 400px 고정. */
+  size?: AttachmentItemSize;
+  /** loading이면 좌측 뱃지가 Spinner(lottie-dots)로 교체. */
+  state?: AttachmentItemState;
+  /** sm/md: 파일명 옆 inline 보조 영역. lg: 파일명 아래 2번째 줄.
+   *  문자열이면 muted 라벨로, ReactNode면 그대로 렌더 (ex. Button ghost xs). */
+  meta?: ReactNode;
+  /** 지정 시 우측 X. */
+  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
+  /** 지정 시 우측 다운로드 아이콘. */
+  onDownload?: (e: MouseEvent<HTMLButtonElement>) => void;
+  /** 지정 시 우측 '더보기' 아이콘. */
+  onMore?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+const sizeClass: Record<AttachmentItemSize, string> = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+};
+
+/** 좌측 FileIcon 크기 — sm=sm(16), md=md(24), lg=lg(32). */
+const FILE_ICON_SIZE: Record<AttachmentItemSize, FileIconSize> = {
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+};
+
+/** trailing IconButton 크기 — sm/md=sm(20), lg=md(24). IconButton 공식 사이즈만 사용. */
+const ACTION_BTN_SIZE: Record<AttachmentItemSize, IconButtonSize> = {
+  sm: "sm",
+  md: "sm",
+  lg: "md",
+};
+
+/** loading 자리의 Spinner 크기 — loadingSlot(=FileIcon 치수) 16/24/32와 일치시켜야
+ *  lottie 내부 scale/offset 계산이 안 깨짐. slot 치수를 그대로 --loader-size로 override. */
+const SPINNER_LOADER_SIZE: Record<AttachmentItemSize, string> = {
+  sm: "var(--space-4)",
+  md: "var(--space-6)",
+  lg: "var(--space-8)",
+};
+
+/** middle ellipsis — 폭 400px 안에서 충분히 들어가는 글자 수.
+ *  확장자는 항상 끝에 남긴다. CSS text-overflow:ellipsis가 뒤에서
+ *  확장자를 다시 자르지 않도록 폭 cap은 CSS와 함께 넉넉히 잡는다. */
+function middleEllipsis(filename: string, max: number): string {
+  if (filename.length <= max) return filename;
+  const dot = filename.lastIndexOf(".");
+  const extLen = filename.length - dot;
+  if (dot <= 0 || extLen > 8 || extLen >= max - 4) {
+    return filename.slice(0, Math.max(1, max - 3)) + "...";
+  }
+  const ext = filename.slice(dot);
+  const head = filename.slice(0, Math.max(1, max - ext.length - 3));
+  return head + "..." + ext;
+}
+
+export function AttachmentItem({
+  filename,
+  size = "md",
+  state = "idle",
+  meta,
+  onRemove,
+  onDownload,
+  onMore,
+  className,
+  ...rest
+}: AttachmentItemProps) {
+  const cls = [
+    styles.root,
+    sizeClass[size],
+    state === "loading" ? styles.isLoading : null,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const maxChars = size === "lg" ? 44 : size === "md" ? 40 : 36;
+  const label = middleEllipsis(filename, maxChars);
+
+  const leading =
+    state === "loading" ? (
+      <span className={styles.loadingSlot} aria-hidden>
+        <Spinner
+          variant="lottie-dots"
+          label="업로드 중"
+          style={{ "--loader-size": SPINNER_LOADER_SIZE[size] } as CSSProperties}
+        />
+      </span>
+    ) : (
+      <FileIcon ext={filename} size={FILE_ICON_SIZE[size]} />
+    );
+
+  const actionSize = ACTION_BTN_SIZE[size];
+
+  return (
+    <div className={cls} {...rest}>
+      {leading}
+
+      <span className={styles.text}>
+        <span className={styles.label} title={filename}>
+          {label}
+        </span>
+        {meta != null && meta !== "" ? (
+          <span className={styles.meta}>{meta}</span>
+        ) : null}
+      </span>
+
+      {(onDownload || onMore || onRemove) && (
+        <span className={styles.actions}>
+          {onDownload ? (
+            <IconButton
+              size={actionSize}
+              variant="ghost"
+              onClick={onDownload}
+              aria-label="첨부 다운로드"
+              icon={<PhDownload />}
+            />
+          ) : null}
+          {onMore ? (
+            <IconButton
+              size={actionSize}
+              variant="ghost"
+              onClick={onMore}
+              aria-label="첨부 메뉴 열기"
+              aria-haspopup="menu"
+              icon={<PhDotsThree weight="bold" />}
+            />
+          ) : null}
+          {onRemove ? (
+            <IconButton
+              size={actionSize}
+              variant="ghost"
+              onClick={onRemove}
+              aria-label="첨부 제거"
+              icon={<PhX />}
+            />
+          ) : null}
+        </span>
+      )}
+    </div>
+  );
+}

package/assets/components/AttachmentItem/index.ts

@@ -0,0 +1,6 @@
+export { AttachmentItem } from "./AttachmentItem";
+export type {
+  AttachmentItemProps,
+  AttachmentItemSize,
+  AttachmentItemState,
+} from "./AttachmentItem";

package/assets/components/Button/Button.module.css

@@ -38,14 +38,17 @@
 /* Disabled — variant 무관 통일 스타일.
    회색 버튼(--bg-muted) + 실버 글자(--fg-disabled) + 투명 보더.
    loading은 opacity로 유지 (스피너 컨텍스트 보존). */
-.root:disabled {
+.root:disabled:not([data-loading="true"]) {
   cursor: not-allowed;
   background: var(--bg-muted);
   color: var(--fg-disabled);
   border-color: transparent;
   box-shadow: none;
 }
-.root:disabled .icon {
+.root:disabled[data-loading="true"] {
+  cursor: progress;
+}
+.root:disabled:not([data-loading="true"]) .icon {
   opacity: 1;
 }
 /* Loading — 라벨/아이콘은 보이지만 톤 다운, Spinner가 중앙에 overlay.
@@ -227,3 +230,9 @@
 .spinner {
   display: inline-flex;
 }
+/* 투명·배경 위 variant는 로딩 스피너를 muted gray로 — primary 색이 흰 배경 위에서
+   혼자 둥둥 떠 보이는 걸 막는다. */
+.outline .spinner,
+.ghost .spinner {
+  color: var(--fg-muted);
+}

package/assets/components/Button/Button.tsx

@@ -65,10 +65,10 @@ const ICON_SIZE: Record<ButtonSize, number> = {
 };
 
 const SPINNER_SIZE: Record<ButtonSize, SpinnerSize> = {
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
+  xs: "xl",
+  sm: "xl",
+  md: "xl",
+  lg: "xl",
 };
 
 function sizedIcon(node: ReactNode, size: number): ReactNode {
@@ -149,7 +149,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         )}
         {loading && (
           <span className={styles.spinner} aria-hidden>
-            <Spinner size={SPINNER_SIZE[size]} />
+            <Spinner variant="lottie-spinner" size={SPINNER_SIZE[size]} />
           </span>
         )}
       </Comp>

package/assets/components/ChatInput/ChatInput.tsx

@@ -12,7 +12,7 @@ import {
   type ReactNode,
 } from "react";
 import { Paperclip as PhPaperclip } from "@phosphor-icons/react";
-import { AttachmentChip } from "@/components/ctds/AttachmentChip";
+import { AttachmentItem } from "@/components/ctds/AttachmentItem";
 import { AttachmentThumb } from "@/components/ctds/AttachmentThumb";
 import { DropdownMenu } from "@/components/ctds/DropdownMenu";
 import { QuotationBar } from "@/components/ctds/QuotationBar";
@@ -262,7 +262,7 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
                     }
                   />
                 ) : (
-                  <AttachmentChip
+                  <AttachmentItem
                     filename={a.filename}
                     onRemove={
                       onRemoveAttachment

package/assets/components/DatePicker/Calendar.tsx

@@ -104,7 +104,7 @@ const MonthView = memo(function MonthView({
         ))}
       </div>
 
-      <div className={styles.grid} role="grid">
+      <div className={styles.grid} role="grid" aria-label={monthLabelText(month)}>
         {cells.map((day) => {
           const outside = !isSameMonth(day, month);
           const disabled =
@@ -144,6 +144,8 @@ const MonthView = memo(function MonthView({
               onMouseEnter={() => onHoverDay(day)}
               onMouseLeave={() => onHoverDay(null)}
               aria-selected={isSelected}
+              aria-disabled={disabled || undefined}
+              aria-label={dayAriaLabel(day, { isToday, isSelected })}
               role="gridcell"
             >
               <span className={styles.dayLabel}>{day.getDate()}</span>
@@ -155,6 +157,22 @@ const MonthView = memo(function MonthView({
   );
 });
 
+/** "2026년 10월" 류 — grid aria-label용. 월 이름이 바뀌면 utils 쪽 MONTH_LABELS_KO 교체. */
+function monthLabelText(d: Date): string {
+  return `${d.getFullYear()}년 ${MONTH_LABELS_KO[d.getMonth()]}`;
+}
+
+/** "2026년 10월 9일 (금), 오늘, 선택됨" 류 스크린리더용 라벨. */
+function dayAriaLabel(d: Date, flags: { isToday: boolean; isSelected: boolean }): string {
+  const parts = [
+    `${d.getFullYear()}년 ${MONTH_LABELS_KO[d.getMonth()]} ${d.getDate()}일`,
+    `(${WEEKDAY_LABELS_KO[d.getDay()]})`,
+  ];
+  if (flags.isToday) parts.push("오늘");
+  if (flags.isSelected) parts.push("선택됨");
+  return parts.join(", ");
+}
+
 export interface CalendarProps {
   mode: "single" | "range";
   months: 1 | 2;

package/assets/components/Drawer/Drawer.tsx

@@ -44,7 +44,16 @@ export interface DrawerProps {
   backdrop?: DrawerBackdrop;
 }
 
-export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
+/**
+ * 간편 모드 — 가장 흔한 "title + body + footer" 레이아웃을 flat prop으로 넘긴다.
+ * 커스터마이즈가 필요하면 compound 모드:
+ *   <Drawer.Root open onOpenChange={set} side="right" size="md">
+ *     <Drawer.Header title="…" />
+ *     <Drawer.Body>…</Drawer.Body>
+ *     <Drawer.Footer>…</Drawer.Footer>
+ *   </Drawer.Root>
+ */
+const DrawerComponent = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
   {
     open,
     onOpenChange,
@@ -62,15 +71,48 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
   },
   ref,
 ) {
-  // non-modal이면 Radix에게 modal=false로 넘겨 뒤 영역 포인터 이벤트 유지.
-  const isModal = backdrop !== "none";
+  return (
+    <DrawerRoot
+      open={open}
+      onOpenChange={onOpenChange}
+      disableEscape={disableEscape}
+      side={side}
+      size={size}
+      backdrop={backdrop}
+      ref={ref}
+    >
+      <DrawerHeader
+        title={title}
+        description={description}
+        titleSrOnly={titleSrOnly}
+        dismissible={dismissible}
+        dismissLabel={dismissLabel}
+      />
+      {children !== undefined && children !== null && <DrawerBody>{children}</DrawerBody>}
+      {footer && <DrawerFooter>{footer}</DrawerFooter>}
+    </DrawerRoot>
+  );
+});
 
+export interface DrawerRootProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+  disableEscape?: boolean;
+  side?: DrawerSide;
+  size?: DrawerSize;
+  backdrop?: DrawerBackdrop;
+}
+
+export const DrawerRoot = forwardRef<HTMLDivElement, DrawerRootProps>(function DrawerRoot(
+  { open, onOpenChange, children, disableEscape, side = "right", size = "md", backdrop = "scrim" },
+  ref,
+) {
+  const isModal = backdrop !== "none";
   return (
     <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={isModal}>
       <RadixDialog.Portal>
-        {backdrop !== "none" && (
-          <RadixDialog.Overlay className={styles.overlay} />
-        )}
+        {backdrop !== "none" && <RadixDialog.Overlay className={styles.overlay} />}
         <RadixDialog.Content
           ref={ref}
           className={styles.content}
@@ -80,47 +122,86 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
             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>}
+          {children}
         </RadixDialog.Content>
       </RadixDialog.Portal>
     </RadixDialog.Root>
   );
 });
+
+export interface DrawerHeaderProps {
+  title: ReactNode;
+  description?: ReactNode;
+  titleSrOnly?: boolean;
+  dismissible?: boolean;
+  dismissLabel?: string;
+}
+
+export function DrawerHeader({
+  title,
+  description,
+  titleSrOnly,
+  dismissible = true,
+  dismissLabel,
+}: DrawerHeaderProps) {
+  return (
+    <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>
+  );
+}
+
+export function DrawerBody({ children }: { children: ReactNode }) {
+  return (
+    <div className={styles.body}>
+      <div className={styles.bodyInner}>{children}</div>
+    </div>
+  );
+}
+
+export function DrawerFooter({ children }: { children: ReactNode }) {
+  return <div className={styles.footer}>{children}</div>;
+}
+
+type DrawerCompound = typeof DrawerComponent & {
+  Root: typeof DrawerRoot;
+  Header: typeof DrawerHeader;
+  Body: typeof DrawerBody;
+  Footer: typeof DrawerFooter;
+};
+
+export const Drawer = Object.assign(DrawerComponent, {
+  Root: DrawerRoot,
+  Header: DrawerHeader,
+  Body: DrawerBody,
+  Footer: DrawerFooter,
+}) as DrawerCompound;

package/assets/components/Drawer/index.ts

@@ -1,6 +1,14 @@
-export { Drawer } from "./Drawer";
+export {
+  Drawer,
+  DrawerRoot,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+} from "./Drawer";
 export type {
   DrawerProps,
+  DrawerRootProps,
+  DrawerHeaderProps,
   DrawerSide,
   DrawerSize,
   DrawerBackdrop,