@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/IconButton/IconButton.module.css

@@ -0,0 +1,109 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  border: 1px solid transparent;
+  padding: 0;
+  flex-shrink: 0;
+  transition: var(--transition-colors), var(--transition-ring), var(--transition-press);
+}
+.root:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+.root:active:not(:disabled) {
+  transform: translateY(var(--space-0_5));
+}
+/* Disabled — filled variant(secondary/outline)는 회색 배경 + 실버 색.
+   ghost·destructive는 평상시 배경이 없으므로 투명 유지하고 아이콘 색만 fg-disabled로 연해진다.
+   Pagination·툴바처럼 아이콘 하나짜리 비활성이 밑 배경을 가리면 어색하기 때문. */
+.root:disabled {
+  cursor: not-allowed;
+  color: var(--fg-disabled);
+  border-color: transparent;
+}
+.secondary:disabled,
+.outline:disabled {
+  background: var(--bg-muted);
+}
+.ghost:disabled,
+.destructive:disabled {
+  background: transparent;
+}
+
+/* sizes — IconButton 전용 --iconbtn-h-*.
+   텍스트 컨트롤(Button/Input)보다 좁게 잡아 아이콘 하나가 헐거워 보이지 않도록.
+   sm=인라인·초밀도 / md=툴바 기본(IconButton 기본값) / lg=표준.
+
+   ⚠️ Button과 사이즈 이름은 같지만 실제 크기는 한 단계씩 작다:
+     - IconButton sm(20) → Button에 대응 없음(더 작음)
+     - IconButton md(24) → Button sm(28)에 대응
+     - IconButton lg(32) → Button md(32)에 대응
+   같은 툴바에 Button과 IconButton을 나란히 놓을 때 이 매핑으로 크기 매칭. */
+.sm { width: var(--iconbtn-h-sm); height: var(--iconbtn-h-sm); border-radius: var(--radius-xs); }
+.md { width: var(--iconbtn-h-md); height: var(--iconbtn-h-md); }
+.lg { width: var(--iconbtn-h-lg); height: var(--iconbtn-h-lg); }
+
+/* 아이콘 크기는 라이브러리 무관하게 CSS로 고정.
+   family 스왑 시 각 라이브러리의 size prop 처리 편차로 아이콘 크기가 미세하게
+   달라지는 문제를 방지 → svg에 직접 강제. */
+.sm > svg { width: var(--icon-size-xs); height: var(--icon-size-xs); }
+.md > svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
+.lg > svg { width: var(--icon-size-md); height: var(--icon-size-md); }
+
+/* Dual: 트레일링 아이콘(예: caret-down) 동반 시 가로형.
+   정사각 width를 풀고, 대칭 좁은 패딩 + gap으로 시각 균형. */
+.dual {
+  width: auto;
+  gap: var(--space-1);
+}
+.sm.dual { padding-inline: var(--space-1);   gap: var(--space-0_5); }
+.md.dual { padding-inline: var(--space-1_5); }
+.lg.dual { padding-inline: var(--space-2); }
+
+/* variants ─────────────────────────────────────────────── */
+/* secondary — primary 8% 알파 표면 + primary 텍스트 (Button.secondary와 동일 정책).
+   Accent=mono일 때는 시맨틱 토큰이 무채색으로 자동 폴백. */
+.secondary {
+  background: var(--secondary-bg);
+  color: var(--secondary-fg);
+  border-color: transparent;
+}
+.secondary:hover:not(:disabled) {
+  background: var(--secondary-bg-hover);
+}
+
+/* outline — 경계만 */
+.outline {
+  background: transparent;
+  color: var(--fg-muted);
+  border-color: var(--border);
+}
+.outline:hover:not(:disabled) {
+  background: var(--hover);
+}
+
+/* ghost — 무게 최소, hover에만 표면. IconButton 기본값. */
+.ghost {
+  background: transparent;
+  color: var(--fg-subtle);
+  border-color: transparent;
+}
+.ghost:hover:not(:disabled) {
+  background: var(--hover);
+  color: var(--fg);
+}
+
+/* destructive — 아이콘 단독은 시각 부피가 작아 솔리드 destructive는 과함.
+   평상시 transparent + destructive 텍스트, hover 시 destructive 12% 표면.
+   (Button의 destructive/destructive-ghost 둘 다 여기로 매핑됨.) */
+.destructive {
+  background: transparent;
+  color: var(--destructive);
+  border-color: transparent;
+}
+.destructive:hover:not(:disabled) {
+  background: var(--destructive-subtle);
+}

package/assets/components/IconButton/IconButton.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import {
+  forwardRef,
+  isValidElement,
+  cloneElement,
+  type ReactNode,
+  type ButtonHTMLAttributes,
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+import styles from "./IconButton.module.css";
+
+/**
+ * IconButton 크기.
+ * ⚠️ Button과 이름은 같지만 실제 크기는 한 단계씩 작다:
+ *  - IconButton md(24) ↔ Button sm(28)
+ *  - IconButton lg(32) ↔ Button md(32)
+ * 같은 툴바에 나란히 놓을 때 위 매핑을 기준으로 크기를 맞춘다.
+ */
+export type IconButtonSize = "sm" | "md" | "lg";
+export type IconButtonVariant = "secondary" | "outline" | "ghost" | "destructive";
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** 아이콘 요소. asChild=true일 땐 자식 요소가 아이콘/링크 전체를 담당하므로 무시된다. */
+  icon?: ReactNode;
+  /** 트레일링 슬롯. caret-down 같은 보조 아이콘을 넣으면 정사각형→가로형(dual)로 자동 전환. */
+  trailingIcon?: ReactNode;
+  size?: IconButtonSize;
+  variant?: IconButtonVariant;
+  asChild?: boolean;
+}
+
+const sizeClassMap: Record<IconButtonSize, string> = {
+  sm: styles.sm,
+  md: styles.md,
+  lg: styles.lg,
+};
+
+const variantClassMap: Record<IconButtonVariant, string> = {
+  secondary: styles.secondary,
+  outline: styles.outline,
+  ghost: styles.ghost,
+  destructive: styles.destructive,
+};
+
+function withPhosphorWeight(node: ReactNode): ReactNode {
+  if (!isValidElement(node)) return node;
+  return cloneElement(node as React.ReactElement, {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    weight: (node as any).props?.weight ?? "regular",
+  });
+}
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      className,
+      icon,
+      trailingIcon,
+      size = "md",
+      variant = "ghost",
+      asChild = false,
+      type,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const dual = trailingIcon !== undefined && trailingIcon !== null && trailingIcon !== false;
+
+    const rootClass = [
+      styles.root,
+      sizeClassMap[size],
+      variantClassMap[variant],
+      dual ? styles.dual : "",
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    // asChild=true → 자식 요소(예: <a><Icon/></a>)가 아이콘 렌더를 담당.
+    // Slot은 단일 자식만 허용하므로 icon/trailingIcon은 무시하고 children을 그대로 넘긴다.
+    const content = asChild ? (
+      children
+    ) : (
+      <>
+        {withPhosphorWeight(icon)}
+        {dual && withPhosphorWeight(trailingIcon)}
+      </>
+    );
+
+    return (
+      <Comp
+        ref={ref}
+        className={rootClass}
+        type={asChild ? undefined : (type ?? "button")}
+        data-dual={dual || undefined}
+        {...props}
+      >
+        {content}
+      </Comp>
+    );
+  }
+);
+
+IconButton.displayName = "IconButton";
+
+export { IconButton };

package/assets/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from "./IconButton";
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from "./IconButton";

package/assets/components/Input/Input.module.css

@@ -0,0 +1,338 @@
+/* Root container ────────────────────────────────────────── */
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-family: var(--font-normal);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: text;
+  transition:
+    background var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+  min-width: 0;
+}
+
+.root:hover:not([data-disabled]):not([data-readonly]),
+.root:focus-visible,
+.root:has(:focus-visible) {
+  border-color: var(--border-strong);
+}
+
+.root:focus-visible,
+.root:has(:focus-visible) {
+  outline: none;
+}
+
+/* Variants ──────────────────────────────────────────────── */
+.outline {
+  background: transparent;
+}
+
+.filled {
+  background: var(--bg-subtle);
+  border-color: transparent;
+}
+
+.filled:hover:not([data-disabled]):not([data-readonly]),
+.filled:focus-visible,
+.filled:has(:focus-visible) {
+  border-color: transparent;
+}
+
+/* line — 아래 선만 (Material 스타일). sizes 뒤에 정의해 radius/padding override. */
+.root.line {
+  background: transparent;
+  border-color: transparent;
+  border-bottom-color: var(--border);
+  border-radius: 0;
+  padding-inline: 0;
+}
+
+.root.line:hover:not([data-disabled]):not([data-readonly]),
+.root.line:focus-visible,
+.root.line:has(:focus-visible) {
+  border-color: transparent;
+  border-bottom-color: var(--border-strong);
+}
+
+.root.line[data-invalid],
+.root.line[data-invalid]:hover:not([data-disabled]):not([data-readonly]),
+.root.line[data-invalid]:focus-visible,
+.root.line[data-invalid]:has(:focus-visible) {
+  border-color: transparent;
+  border-bottom-color: var(--destructive);
+}
+
+/* States ────────────────────────────────────────────────── */
+.root[data-invalid] {
+  border-color: var(--destructive);
+}
+
+.root[data-invalid]:hover:not([data-disabled]):not([data-readonly]),
+.root[data-invalid]:focus-visible,
+.root[data-invalid]:has(:focus-visible) {
+  border-color: var(--destructive);
+}
+
+.root[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.root[data-readonly] {
+  background: var(--bg-subtle);
+  cursor: default;
+}
+
+.root[data-readonly].filled {
+  background: var(--bg-muted);
+}
+
+/* Width fill ────────────────────────────────────────────
+   width="fill" 정책 — 부모 폭을 채운다. 폼 필드 실전 기본.
+   width="md"/"lg"/number는 컴포넌트에서 inline style로 지정. */
+.fill {
+  width: 100%;
+}
+
+/* Sizes ─────────────────────────────────────────────────── */
+.sizeSm {
+  height: var(--control-h-sm);
+  padding-inline: var(--space-2);
+  font-size: var(--text-sm);
+  border-radius: var(--radius-xs);
+}
+
+.sizeMd {
+  height: var(--control-h-md);
+  padding-inline: var(--space-3);
+  font-size: var(--text-sm);
+  border-radius: var(--radius-sm);
+}
+
+.sizeLg {
+  height: var(--control-h-lg);
+  padding-inline: var(--space-3);
+  font-size: var(--text-base);
+  border-radius: var(--radius-md);
+}
+
+/* Inner input ───────────────────────────────────────────── */
+.input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--lh-sm);
+  outline: none;
+  /* type="button" 등 non-text input의 기본 center 정렬 무력화. */
+  text-align: start;
+}
+
+.input::placeholder {
+  color: var(--fg-subtle);
+}
+
+.input:disabled {
+  cursor: not-allowed;
+}
+
+/* WebKit autofill — 기본 파란/노란 배경 대신 컨테이너 배경이 보이도록.
+   background-color는 직접 못 바꾸니 긴 inset shadow로 덮고, text는 --fg 유지. */
+.input:-webkit-autofill,
+.input:-webkit-autofill:hover,
+.input:-webkit-autofill:focus,
+.input:-webkit-autofill:active {
+  -webkit-text-fill-color: var(--fg);
+  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
+  caret-color: var(--fg);
+}
+
+/* filled variant는 컨테이너 배경이 --bg-subtle. */
+.filled .input:-webkit-autofill,
+.filled .input:-webkit-autofill:hover,
+.filled .input:-webkit-autofill:focus,
+.filled .input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px var(--bg-subtle) inset;
+}
+
+/* Slots ─────────────────────────────────────────────────── */
+.icon,
+.iconBtn,
+.prefix,
+.suffix,
+.actionSlot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  color: var(--fg);
+}
+
+/* leftIcon/rightIcon slot 색은 placeholder와 **동일한** 톤으로.
+   값이 있든 없든, 포커스 상태든 상관없이 아이콘은 그대로 유지 —
+   placeholder와 색이 어긋나면 "둘 중 뭐가 primary 정보인지" 혼란. */
+.icon {
+  color: var(--fg-subtle);
+}
+
+/* Icon svg를 사이즈별로 직접 제어 — Icon 컴포넌트가 svg에 하드코딩한 width/height(em)를 덮어씀. */
+.sizeSm .icon > svg { width: var(--icon-size-xs); height: var(--icon-size-xs); }
+.sizeMd .icon > svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
+.sizeLg .icon > svg { width: var(--icon-size-md); height: var(--icon-size-md); }
+
+
+.prefix,
+.suffix {
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+  user-select: none;
+}
+
+.iconBtn {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--fg-muted);
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease-out);
+}
+
+.iconBtn:hover {
+  color: var(--fg);
+}
+
+.iconBtn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+
+.actionSlot {
+  color: inherit;
+}
+
+/* trailing IconButton — 상하/좌우 여백을 모두 --space-1로 통일.
+   버튼 크기 = Input height - space-1 * 2 → 각 사이즈 24/28/32px. */
+.root .trailingBtn {
+  flex: 0 0 auto;
+  width: calc(var(--control-h-sm) - var(--space-2));
+  height: calc(var(--control-h-sm) - var(--space-2));
+  border-radius: var(--radius-xs);
+}
+.root.sizeMd .trailingBtn {
+  width: calc(var(--control-h-md) - var(--space-2));
+  height: calc(var(--control-h-md) - var(--space-2));
+}
+.root.sizeLg .trailingBtn {
+  width: calc(var(--control-h-lg) - var(--space-2));
+  height: calc(var(--control-h-lg) - var(--space-2));
+  border-radius: var(--radius-sm);
+}
+/* trailing IconButton이 있을 때 우측 padding을 좁혀 버튼 상하 여백과 대칭. */
+.sizeSm:has(> .trailingBtn) { padding-inline-end: var(--space-0_5); }
+.sizeMd:has(> .trailingBtn) { padding-inline-end: var(--space-1); }
+.sizeLg:has(> .trailingBtn) { padding-inline-end: var(--space-1); }
+
+/* Clear 버튼 enter/exit ─────────────────────────────────────
+   wrapper에 opacity·scale, 내부 IconButton엔 press 비활성 — 두 transform이
+   같은 요소에 걸리면 서로 덮기 때문에 레이어 분리. duration/easing은
+   fast + ease-out micro-interaction 패턴. */
+.clearBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transform: scale(0.6);
+  pointer-events: none;
+  transition:
+    opacity var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out);
+}
+.clearBtn[data-visible] {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+/* wrapper 안쪽 IconButton의 press translate 제거 — 눌릴 때 아래로 내려가는
+   피드백이 미세한 X 버튼엔 과하다. opacity/scale enter·exit만 유지. */
+.clearBtn > button:active:not(:disabled) {
+  transform: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .clearBtn,
+  .clearBtn[data-visible] {
+    transition: none;
+    transform: none;
+  }
+}
+
+/* FormField wrapper ─────────────────────────────────────── */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1_5);
+  min-width: 0;
+}
+
+/* line variant는 좌우 padding이 없어 라벨이 더 가까이 붙어야 자연스러움. */
+.field:has(> .root.line) {
+  gap: 0;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-family: var(--font-normal);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg-muted);
+  transition: color var(--duration-fast) var(--ease-out);
+}
+
+.labelSm { font-size: var(--text-xs); }
+.labelMd,
+.labelLg { font-size: var(--text-sm); }
+
+.field:focus-within .label {
+  color: var(--fg);
+}
+
+.requiredMark {
+  color: var(--destructive);
+  font-weight: var(--font-weight-medium);
+}
+
+.description,
+.errorText {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-family: var(--font-normal);
+  font-size: var(--text-xs);
+  line-height: var(--lh-xs);
+}
+
+.description {
+  color: var(--fg-subtle);
+}
+
+.errorText {
+  color: var(--destructive);
+}
+
+.messageIcon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}