@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/Pagination/Pagination.module.css

@@ -0,0 +1,82 @@
+/* 숫자 아이템은 Button(라벨 있음), prev/next/first/last는 IconButton(정사각 전용).
+   Button을 icon-only로 쓰면 가로 padding이 남아 정사각이 안 되므로 IconButton이 맞다.
+   숫자 Button의 min-width만 height에 맞춰 1자리에서도 폭이 흔들리지 않게 한다. 2자리+ 자연 확장.
+
+   사이즈 매핑:
+     Pagination md = 내부 Button sm(32px) + IconButton md(실제 width/height를 32로 올림)
+     Pagination lg = 내부 Button md(36px) + IconButton lg(실제 width/height를 36으로 올림)
+*/
+.root {
+  display: inline-flex;
+  align-items: center;
+}
+
+.list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-0_5);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/* Compact variant는 "prev · 3/24 · next" 세 요소뿐이므로 gap을 더 조여 하나의 밀집 블록처럼 보이게. */
+.listCompact {
+  gap: 0;
+}
+
+/* 숫자 Button min-width — 내부 Button height와 맞춘 정사각 hit box.
+   padding-inline은 Button 기본값보다 좁혀 1자리 숫자가 정사각으로 떨어지게. */
+.numberBtnMd {
+  min-width: var(--control-h-sm);
+  padding-inline: var(--space-1);
+}
+.numberBtnLg {
+  min-width: var(--control-h-md);
+  padding-inline: var(--space-1_5);
+}
+
+/* Disabled 시 숫자 Button은 배경 없이 숫자 색만 fg-disabled로 연해지게.
+   Button 기본은 모든 variant를 disabled에서 회색 배경(--bg-muted)으로 통일하지만,
+   Pagination 내부의 숫자 아이템은 밀집한 자리라 밑 배경이 가려지면 어색하다.
+   IconButton의 ghost disabled와 톤 맞춤.
+   .list 접두어로 Button 내부 셀렉터보다 특이도 우위 확보. */
+.list .numberBtnMd:disabled,
+.list .numberBtnLg:disabled {
+  background: transparent;
+  border-color: transparent;
+}
+
+/* IconButton 리사이즈 — IconButton의 기본 사이즈 체계는 Button보다 한 단계씩 작게 설계되어
+   있어서(md=24, lg=32) 숫자 Button(sm=32, md=36)과 세로 리듬이 안 맞는다.
+   Pagination 안에서만 width/height를 숫자 Button과 동일하게 올려 리듬 일치. */
+.iconBtnMd {
+  width: var(--control-h-sm);
+  height: var(--control-h-sm);
+}
+.iconBtnLg {
+  width: var(--control-h-md);
+  height: var(--control-h-md);
+}
+
+/* Compact 상태 라벨 — "3 / 24" 류. 숫자/구분자 모두 fg-muted로 가라앉히고
+   인터랙션 영역이 아님을 명확히. gap은 숫자-구분자 사이가 뜨지 않게 짧게. */
+.statusMd,
+.statusLg {
+  display: inline-flex;
+  align-items: center;
+  padding-inline: var(--space-1);
+  font-weight: var(--label-weight);
+  color: var(--fg-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  letter-spacing: var(--label-tracking);
+}
+.statusMd {
+  min-height: var(--control-h-sm);
+  font-size: var(--label-sm-size);
+}
+.statusLg {
+  min-height: var(--control-h-md);
+  font-size: var(--label-md-size);
+}

package/assets/components/Pagination/Pagination.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+/**
+ * Pagination ─ 긴 목록·테이블의 페이지 네비.
+ *
+ * 설계 원칙 — "variant로 유즈케이스 조립":
+ *   DatePicker처럼 분화된 컴포넌트(DateRangePicker)를 만들지 않고 하나의 Pagination에
+ *   `variant` prop으로 numbered / simple / compact / jump를 커버한다. prop 표면이
+ *   예측 가능성이 높다.
+ *
+ * 시각 규칙:
+ *   - 숫자 아이템은 Button(라벨 있음). prev/next/first/last는 IconButton(정사각 전용).
+ *     Button을 icon-only로 쓰면 가로 padding이 남아 정사각으로 안 떨어지므로 IconButton이 맞다.
+ *   - 사이즈 매핑: Pagination md = Button sm + IconButton md, Pagination lg = Button md + IconButton lg.
+ *   - 현재 페이지는 `variant="secondary"` (primary 8% 알파 배경 + primary 텍스트).
+ *     primary filled는 페이지 안 다른 primary 액션과 충돌해 쓰지 않음.
+ *   - 그 외는 `variant="ghost"`로 시각 무게 최소화.
+ */
+
+import {
+  forwardRef,
+  useMemo,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+import { Button } from "../Button";
+import { IconButton, type IconButtonSize } from "../IconButton";
+import { Icon } from "../Icon";
+import styles from "./Pagination.module.css";
+
+/** Pagination size → 내부 Button/IconButton size 매핑.
+ *  Pagination md = Button sm + IconButton md, Pagination lg = Button md + IconButton lg. */
+const BUTTON_SIZE: Record<"md" | "lg", "sm" | "md"> = {
+  md: "sm",
+  lg: "md",
+};
+const ICON_BTN_SIZE: Record<"md" | "lg", IconButtonSize> = {
+  md: "md",
+  lg: "lg",
+};
+
+export type PaginationVariant = "numbered" | "compact" | "jump";
+export type PaginationSize = "md" | "lg";
+
+export interface PaginationProps
+  extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+  variant?: PaginationVariant;
+  /** 아이템 사이즈. md=내부 Button sm, lg=내부 Button md. */
+  size?: PaginationSize;
+  /** 현재 페이지 (1-indexed) */
+  page: number;
+  /** 전체 페이지 수 */
+  total: number;
+  onChange?: (page: number) => void;
+  /** numbered·jump에서 한 번에 보여줄 숫자 개수(5~10). 기본 5.
+   *  현재 페이지 중심의 슬라이딩 윈도우 — 생략(…)·양 끝 고정 숫자 없음. */
+  windowSize?: number;
+  disabled?: boolean;
+  /** compact variant의 라벨 포맷터. 기본 `${page} / ${total}`. */
+  compactFormatter?: (page: number, total: number) => ReactNode;
+  "aria-label"?: string;
+}
+
+/**
+ * 현재 페이지 중심의 슬라이딩 윈도우.
+ * 전체가 윈도우보다 작으면 전부 표시. 아니면 현재를 가운데 두되,
+ * 왼/오 끝 가까우면 그 쪽으로 밀착해 빈 자리가 생기지 않게 한다.
+ * 예: total=100, windowSize=5, page=1  → [1..5]
+ *     total=100, windowSize=5, page=10 → [8..12]
+ *     total=100, windowSize=5, page=100 → [96..100]
+ */
+function buildWindow(page: number, total: number, windowSize: number): number[] {
+  const size = Math.min(windowSize, total);
+  const half = Math.floor((size - 1) / 2);
+  let start = page - half;
+  let end = start + size - 1;
+  if (start < 1) {
+    start = 1;
+    end = size;
+  }
+  if (end > total) {
+    end = total;
+    start = total - size + 1;
+  }
+  return Array.from({ length: size }, (_, i) => start + i);
+}
+
+/** windowSize를 5~10 범위로 클램프. */
+function clampWindow(n: number): number {
+  if (!Number.isFinite(n)) return 5;
+  return Math.min(10, Math.max(5, Math.round(n)));
+}
+
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(
+  (
+    {
+      variant = "numbered",
+      size = "md",
+      page,
+      total,
+      onChange,
+      windowSize = 5,
+      disabled = false,
+      compactFormatter,
+      className,
+      "aria-label": ariaLabel = "페이지네이션",
+      ...rest
+    },
+    ref
+  ) => {
+    const safeTotal = Math.max(1, total);
+    const safePage = Math.min(Math.max(1, page), safeTotal);
+    const isFirst = safePage <= 1;
+    const isLast = safePage >= safeTotal;
+
+    const go = (p: number) => {
+      if (disabled) return;
+      const next = Math.min(Math.max(1, p), safeTotal);
+      if (next !== safePage) onChange?.(next);
+    };
+
+    const range = useMemo(
+      () =>
+        variant === "numbered" || variant === "jump"
+          ? buildWindow(safePage, safeTotal, clampWindow(windowSize))
+          : [],
+      [variant, safePage, safeTotal, windowSize]
+    );
+
+    const rootClass = [styles.root, className ?? ""].filter(Boolean).join(" ");
+    const numberCls = size === "md" ? styles.numberBtnMd : styles.numberBtnLg;
+    const iconCls = size === "md" ? styles.iconBtnMd : styles.iconBtnLg;
+    const statusCls = size === "md" ? styles.statusMd : styles.statusLg;
+    const buttonSize = BUTTON_SIZE[size];
+    const iconSize = ICON_BTN_SIZE[size];
+
+    /* prev/next는 "보이는 윈도우의 끝 숫자"로 점프 — 현재가 윈도우 중앙이면 윈도우 안에서 끝으로,
+       이미 끝 위에 있으면 다음 호출에서 윈도우가 통째로 밀린다. 숫자 윈도우가 없는 compact에선
+       기존 ±1 유지. */
+    const prevTarget = range.length > 0 ? range[0] : safePage - 1;
+    const nextTarget =
+      range.length > 0 ? range[range.length - 1] : safePage + 1;
+    const prevDisabled = disabled || isFirst || prevTarget === safePage;
+    const nextDisabled = disabled || isLast || nextTarget === safePage;
+
+    return (
+      <nav
+        ref={ref}
+        className={rootClass}
+        aria-label={ariaLabel}
+        role="navigation"
+        {...rest}
+      >
+        <ul
+          className={[
+            styles.list,
+            variant === "compact" ? styles.listCompact : "",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          {variant === "jump" && (
+            <li>
+              <IconButton
+                size={iconSize}
+                variant="ghost"
+                aria-label="처음 페이지"
+                icon={<Icon name="caret-double-left" />}
+                disabled={disabled || isFirst}
+                onClick={() => go(1)}
+                className={iconCls}
+              />
+            </li>
+          )}
+
+          <li>
+            <IconButton
+              size={iconSize}
+              variant="ghost"
+              aria-label="이전 페이지"
+              icon={<Icon name="caret-left" />}
+              disabled={prevDisabled}
+              onClick={() => go(prevTarget)}
+              className={iconCls}
+            />
+          </li>
+
+          {variant === "compact" && (
+            <li className={statusCls} aria-live="polite">
+              {compactFormatter
+                ? compactFormatter(safePage, safeTotal)
+                : `${safePage}/${safeTotal}`}
+            </li>
+          )}
+
+          {(variant === "numbered" || variant === "jump") &&
+            range.map((item) => {
+              const isCurrent = item === safePage;
+              return (
+                <li key={item}>
+                  <Button
+                    size={buttonSize}
+                    variant={isCurrent ? "secondary" : "ghost"}
+                    aria-label={`${item} 페이지`}
+                    aria-current={isCurrent ? "page" : undefined}
+                    disabled={disabled}
+                    onClick={() => go(item)}
+                    className={numberCls}
+                  >
+                    {item}
+                  </Button>
+                </li>
+              );
+            })}
+
+          <li>
+            <IconButton
+              size={iconSize}
+              variant="ghost"
+              aria-label="다음 페이지"
+              icon={<Icon name="caret-right" />}
+              disabled={nextDisabled}
+              onClick={() => go(nextTarget)}
+              className={iconCls}
+            />
+          </li>
+
+          {variant === "jump" && (
+            <li>
+              <IconButton
+                size={iconSize}
+                variant="ghost"
+                aria-label="마지막 페이지"
+                icon={<Icon name="caret-double-right" />}
+                disabled={disabled || isLast}
+                onClick={() => go(safeTotal)}
+                className={iconCls}
+              />
+            </li>
+          )}
+        </ul>
+      </nav>
+    );
+  }
+);
+
+Pagination.displayName = "Pagination";

package/assets/components/Pagination/index.ts

@@ -0,0 +1,6 @@
+export { Pagination } from "./Pagination";
+export type {
+  PaginationProps,
+  PaginationVariant,
+  PaginationSize,
+} from "./Pagination";

package/assets/components/ProgressBar/ProgressBar.module.css

@@ -0,0 +1,64 @@
+.root {
+  height: var(--space-0_5);
+  background: transparent;
+  overflow: hidden;
+  pointer-events: none;
+  transition: opacity var(--duration-fast) var(--ease-out);
+  opacity: 0;
+}
+.root[data-active] {
+  opacity: 1;
+}
+
+.root[data-position="fixed"] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--z-toast);
+}
+
+.bar {
+  height: 100%;
+  background: var(--fg-strong);
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+  transition: width var(--duration-fast) var(--ease-out);
+}
+
+.root[data-mode="determinate"] .bar {
+  transform-origin: left center;
+}
+
+/* indeterminate — 왼쪽부터 채워지는 NProgress 스타일.
+   빠르게 시작해서 (뜨자마자 30% 이미 채움) 서서히 90%까지. */
+.root[data-mode="indeterminate"] .bar {
+  width: 0%;
+  transform-origin: left center;
+  animation: pb-grow calc(var(--duration-slower) * 3) var(--ease-out) forwards;
+}
+
+@keyframes pb-grow {
+  0%   { width: 0%; }
+  10%  { width: 30%; }
+  30%  { width: 55%; }
+  60%  { width: 75%; }
+  100% { width: 90%; }
+}
+
+/* 사라질 때 100%까지 밀고 fade-out — "완료됐다" 느낌 */
+.root:not([data-active])[data-mode="indeterminate"] .bar {
+  animation: none;
+  width: 100%;
+  transition:
+    width var(--duration-fast) var(--ease-out),
+    opacity var(--duration-base) var(--ease-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root[data-mode="indeterminate"] .bar {
+    animation: none;
+    width: 100%;
+    transform: none;
+    opacity: 0.5;
+  }
+}

package/assets/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+import styles from "./ProgressBar.module.css";
+
+export type ProgressBarProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * 진행률 (0~100). 미지정이면 무한 왕복 애니메이션(indeterminate).
+   * 실제 %가 없는 라우팅/네트워크 로딩용.
+   */
+  value?: number;
+  /** 화면 최상단에 fixed로 붙임. */
+  position?: "fixed" | "inline";
+  /** 표시 여부. false면 즉시 숨김 + fade-out. */
+  active?: boolean;
+};
+
+/**
+ * 라인 로딩바. 두 가지 모드:
+ * - value 있으면 그 %로 채움 (determinate)
+ * - value 없으면 무한 왕복 (indeterminate) — 네트워크·라우팅 로딩용
+ */
+const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
+  ({ value, position = "fixed", active = true, className, ...rest }, ref) => {
+    const isDeterminate = typeof value === "number";
+    const clamped = isDeterminate
+      ? Math.max(0, Math.min(100, value as number))
+      : undefined;
+
+    return (
+      <div
+        ref={ref}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={clamped}
+        data-position={position}
+        data-active={active || undefined}
+        data-mode={isDeterminate ? "determinate" : "indeterminate"}
+        className={[styles.root, className ?? ""].filter(Boolean).join(" ")}
+        {...rest}
+      >
+        <div
+          className={styles.bar}
+          style={isDeterminate ? { width: `${clamped}%` } : undefined}
+        />
+      </div>
+    );
+  },
+);
+
+ProgressBar.displayName = "ProgressBar";
+
+export { ProgressBar };

package/assets/components/ProgressBar/index.ts

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

package/assets/components/QuotationBar/QuotationBar.module.css

@@ -0,0 +1,61 @@
+/* QuotationBar — ChatInput 상단에 붙는 인용 바.
+   ↳ icon + 1줄 ellipsis + X 레이아웃. hairline border, radius-md. */
+
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
+  background: var(--bg);
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--fg);
+  font-size: var(--text-sm);
+  transition: var(--transition-colors);
+}
+
+.leadIcon {
+  width: var(--space-4);
+  height: var(--space-4);
+  color: var(--fg-muted);
+  flex: 0 0 auto;
+}
+
+.text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg-muted);
+  line-height: 1.3;
+}
+
+.removeBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--fg-muted);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: var(--transition-colors);
+  width: var(--space-5);
+  height: var(--space-5);
+  flex: 0 0 auto;
+}
+.removeBtn:hover {
+  background: var(--bg-subtle);
+  color: var(--fg);
+}
+.removeBtn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+.removeIcon {
+  width: 70%;
+  height: 70%;
+}

package/assets/components/QuotationBar/QuotationBar.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import type { HTMLAttributes, MouseEvent } from "react";
+import {
+  ArrowBendDownRight as PhArrowBendDownRight,
+  X as PhX,
+} from "@phosphor-icons/react";
+import styles from "./QuotationBar.module.css";
+
+export interface QuotationBarProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onError"> {
+  /** 인용 본문. 1줄 ellipsis — 긴 글은 자동 생략. */
+  text: string;
+  /** 지정 시 우측 X 노출, 클릭 시 호출. */
+  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+export function QuotationBar({
+  text,
+  onRemove,
+  className,
+  ...rest
+}: QuotationBarProps) {
+  const cls = [styles.root, className].filter(Boolean).join(" ");
+
+  return (
+    <div className={cls} {...rest}>
+      <PhArrowBendDownRight
+        className={styles.leadIcon}
+        weight="regular"
+        aria-hidden
+      />
+      <span className={styles.text} title={text}>
+        {text}
+      </span>
+      {onRemove ? (
+        <button
+          type="button"
+          className={styles.removeBtn}
+          onClick={onRemove}
+          aria-label="인용 제거"
+        >
+          <PhX className={styles.removeIcon} weight="regular" />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/assets/components/QuotationBar/index.ts

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

package/assets/components/Radio/Radio.module.css

@@ -0,0 +1,63 @@
+/* Radio ────────────────────────────────────────────────────────
+   폼 · 필터에서 단일 선택을 표시하는 컨트롤.
+   외곽 원 = box-shadow inset, 안쪽 도트 = radial-gradient (indicator의
+   같은 배경 레이어에 그려지므로 서브픽셀 어긋남이 없다). 접근성 = <input type="radio">.
+   FilterButton type="radio"도 indicator를 재사용한다. */
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  user-select: none;
+  color: var(--fg);
+  font-family: var(--label-font);
+  font-size: var(--label-md-size);
+  letter-spacing: var(--label-tracking);
+  line-height: var(--lh-tight);
+}
+.root[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.indicator {
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--space-4);
+  height: var(--space-4);
+  border-radius: var(--radius-full);
+  box-shadow: inset 0 0 0 1px var(--border-strong);
+  background:
+    radial-gradient(circle at center, transparent 0, transparent 25%, transparent 26%),
+    var(--bg);
+  transition:
+    box-shadow var(--duration-slow) var(--ease-out),
+    background var(--duration-slow) var(--ease-out);
+}
+
+/* Focus */
+.input:focus-visible + .indicator {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+
+/* Hover — 링만 selected-fg로 은은하게 물듦 (checked면 이미 채워져 있어 무시) */
+.root:hover:not([data-disabled="true"]) .input:not(:checked) + .indicator {
+  box-shadow: inset 0 0 0 1px var(--selected-fg);
+}
+
+/* Checked — 링 + 안쪽 도트 (radial-gradient) 켬. 색은 Accent 축에 따라 mono=fg, 나머지=primary */
+.input:checked + .indicator {
+  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);
+}
+
+/* Standalone indicator (FilterButton 내부) */
+.indicator[data-checked="true"] {
+  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);
+}

package/assets/components/Radio/Radio.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+
+import styles from "./Radio.module.css";
+
+export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+  children?: ReactNode;
+};
+
+const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ className, disabled, children, ...rest }, ref) => {
+    const rootClass = [styles.root, className ?? ""].filter(Boolean).join(" ");
+
+    return (
+      <label className={rootClass} data-disabled={disabled ? "true" : "false"}>
+        <input
+          ref={ref}
+          type="radio"
+          className={`${styles.input} visually-hidden`}
+          disabled={disabled}
+          {...rest}
+        />
+        <span className={styles.indicator} aria-hidden />
+        {children != null && <span>{children}</span>}
+      </label>
+    );
+  },
+);
+
+Radio.displayName = "Radio";
+
+export { Radio };

package/assets/components/Radio/index.ts

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