@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/components/SplitButton/SplitButton.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ButtonHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import { Icon } from "../Icon";
+import styles from "./SplitButton.module.css";
+
+export type SplitButtonVariant =
+  | "primary"
+  | "inverse"
+  | "secondary"
+  | "outline";
+
+export type SplitButtonSize = "sm" | "md" | "lg";
+
+type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size" | "onClick">;
+
+export interface SplitButtonProps extends NativeButtonProps {
+  size?: SplitButtonSize;
+  variant?: SplitButtonVariant;
+  fullWidth?: boolean;
+  /** main 라벨 앞 아이콘 (선택) */
+  leftIcon?: ReactNode;
+  /** main 버튼 라벨 */
+  children: ReactNode;
+  /** main 영역 클릭 */
+  onMainClick?: ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
+  /** menu(caret) 영역 클릭 — 드롭다운 트리거 */
+  onMenuClick?: ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
+  /** menu 영역 스크린리더 라벨. 예: "옵션 더보기" */
+  menuLabel: string;
+  /** menu 영역 아이콘. 기본 caret-down 대체용 */
+  menuIcon?: ReactNode;
+  /** 로딩·disabled는 main·menu 모두에 적용 */
+  loading?: boolean;
+}
+
+const variantClass: Record<SplitButtonVariant, string> = {
+  primary: styles.primary,
+  inverse: styles.inverse,
+  secondary: styles.secondary,
+  outline: styles.outline,
+};
+
+const sizeClass: Record<SplitButtonSize, string> = {
+  sm: styles.sm,
+  md: styles.md,
+  lg: styles.lg,
+};
+
+const ICON_SIZE: Record<SplitButtonSize, number> = {
+  sm: 16,
+  md: 16,
+  lg: 20,
+};
+
+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 });
+}
+
+/**
+ * SplitButton — main 액션 + 부가 메뉴(caret) 2-part 버튼.
+ * 시각적으로 하나로 보이지만 클릭 영역이 분리되고, 각 영역이 독립 hover.
+ * 접근성: 각 영역이 별개 <button>이며 menuLabel은 필수.
+ */
+const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
+  (
+    {
+      className,
+      variant = "primary",
+      size = "md",
+      fullWidth = false,
+      leftIcon,
+      children,
+      onMainClick,
+      onMenuClick,
+      menuLabel,
+      menuIcon,
+      loading = false,
+      disabled,
+      type,
+      ...rest
+    },
+    ref,
+  ) => {
+    const rootClass = [
+      styles.root,
+      variantClass[variant],
+      sizeClass[size],
+      fullWidth ? styles.fullWidth : "",
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const partDisabled = disabled || loading;
+
+    return (
+      <div ref={ref} className={rootClass}>
+        <button
+          {...rest}
+          type={type ?? "button"}
+          className={`${styles.part} ${styles.main}`}
+          onClick={onMainClick}
+          disabled={partDisabled}
+          data-loading={loading || undefined}
+        >
+          {leftIcon && (
+            <span className={styles.icon} aria-hidden>
+              {sizedIcon(leftIcon, ICON_SIZE[size])}
+            </span>
+          )}
+          <span className={styles.label}>{children}</span>
+        </button>
+        <span className={styles.divider} aria-hidden />
+        <button
+          type="button"
+          className={`${styles.part} ${styles.menu}`}
+          onClick={onMenuClick}
+          disabled={partDisabled}
+          aria-label={menuLabel}
+          aria-haspopup="menu"
+        >
+          <span className={styles.icon} aria-hidden>
+            {sizedIcon(menuIcon ?? <Icon name="caret-down" />, ICON_SIZE[size])}
+          </span>
+        </button>
+      </div>
+    );
+  },
+);
+
+SplitButton.displayName = "SplitButton";
+
+export { SplitButton };

package/assets/components/SplitButton/index.ts

@@ -0,0 +1,6 @@
+export { SplitButton } from "./SplitButton";
+export type {
+  SplitButtonProps,
+  SplitButtonSize,
+  SplitButtonVariant,
+} from "./SplitButton";

package/assets/components/Stepper/Stepper.module.css

@@ -0,0 +1,182 @@
+/* Stepper — 다단계 진행 표시 컴포넌트
+   구성: root(container) > item(button) > marker(dot|number) + body(title + hint)
+   축 반응:
+   ─ Density → --space-scale, --font-scale (여백·라벨 크기)
+   ─ Shape   → focus ring radius (marker는 항상 full)
+   ─ Motion  → 상태 전환 duration/easing (transition-colors)
+
+   로컬 색 변수 (root에서 오버라이드 가능):
+   ─ --stepper-fg         : 활성/진행중 스텝 텍스트
+   ─ --stepper-fg-muted   : 완료 스텝 텍스트
+   ─ --stepper-fg-subtle  : 미도달 스텝 텍스트 · hint
+   ─ --stepper-line       : 스텝 사이 dashed 트리 라인
+   ─ --stepper-dot-idle   : 미도달 dot border
+   ─ --stepper-marker-fg  : done marker 안쪽 텍스트/아이콘 색 (배경 위)
+*/
+
+.root {
+  --stepper-fg: var(--fg);
+  --stepper-fg-muted: var(--fg-muted);
+  --stepper-fg-subtle: var(--fg-subtle);
+  --stepper-line: var(--border);
+  --stepper-dot-idle: var(--border);
+  --stepper-marker-fg: var(--bg);
+
+  --stepper-marker-size: var(--space-5);
+  --stepper-marker-gap: var(--space-4);
+  --stepper-item-gap: var(--space-6);
+
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Orientation ─────────────────────────────────────────── */
+
+.vertical { flex-direction: column; }
+.horizontal { flex-direction: row; align-items: flex-start; }
+
+/* Item ─────────────────────────────────────────────────── */
+
+.item {
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: var(--stepper-fg-subtle);
+  cursor: pointer;
+  transition: var(--transition-colors);
+  position: relative;
+  text-align: left;
+  font-family: inherit;
+  min-width: 0;
+}
+.item:hover:not(:disabled) { color: var(--stepper-fg-muted); }
+.item[data-state="done"] { color: var(--stepper-fg-muted); }
+.item[data-state="active"] { color: var(--stepper-fg); }
+.item:disabled { cursor: not-allowed; }
+.item:focus-visible {
+  outline: none;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ring-shadow);
+}
+
+/* Vertical item: 2-column grid, 아래로 dashed line */
+.vertical .item {
+  display: grid;
+  grid-template-columns: var(--stepper-marker-size) 1fr;
+  gap: var(--stepper-marker-gap);
+  align-items: start;
+  padding-bottom: var(--stepper-item-gap);
+}
+.vertical .item:last-child { padding-bottom: 0; }
+.vertical .item:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  left: calc(var(--stepper-marker-size) / 2 - var(--hairline) / 2);
+  top: var(--stepper-marker-size);
+  bottom: 0;
+  width: var(--hairline);
+  background-image: linear-gradient(
+    to bottom,
+    var(--stepper-line) 50%,
+    transparent 50%
+  );
+  background-size: var(--hairline) var(--space-1_5);
+  background-repeat: repeat-y;
+}
+
+/* Horizontal item: marker 위, body 아래로 쌓임, 옆으로 dashed line */
+.horizontal .item {
+  display: grid;
+  grid-template-rows: var(--stepper-marker-size) 1fr;
+  gap: var(--space-2);
+  justify-items: start;
+  flex: 1 1 0;
+  min-width: 0;
+  padding-right: var(--stepper-item-gap);
+}
+.horizontal .item:last-child {
+  flex: 0 0 auto;
+  padding-right: 0;
+}
+.horizontal .item:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: calc(var(--stepper-marker-size) / 2 - var(--hairline) / 2);
+  left: var(--stepper-marker-size);
+  right: 0;
+  height: var(--hairline);
+  background-image: linear-gradient(
+    to right,
+    var(--stepper-line) 50%,
+    transparent 50%
+  );
+  background-size: var(--space-1_5) var(--hairline);
+  background-repeat: repeat-x;
+  margin-inline: var(--space-2);
+}
+
+/* Marker ───────────────────────────────────────────────── */
+
+.marker {
+  width: var(--stepper-marker-size);
+  height: var(--stepper-marker-size);
+  border-radius: var(--radius-full);
+  border: var(--hairline) solid var(--stepper-dot-idle);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  flex-shrink: 0;
+  transition: var(--transition-colors);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+  color: inherit;
+}
+
+/* Active marker: 굵은 링 */
+.item[data-state="active"] .marker {
+  border-color: var(--stepper-fg);
+  border-width: calc(var(--hairline) * 2);
+  color: var(--stepper-fg);
+}
+
+/* dot marker의 active: 안쪽 작은 점 */
+.markerInnerDot {
+  width: var(--space-1_5);
+  height: var(--space-1_5);
+  border-radius: var(--radius-full);
+  background: var(--stepper-fg);
+}
+
+/* Done marker: 배경 채움, 안에 check (dot) 또는 숫자 유지 (number) */
+.item[data-state="done"] .marker {
+  border-color: transparent;
+  background: var(--stepper-fg);
+  color: var(--stepper-marker-fg);
+}
+
+/* Body ─────────────────────────────────────────────────── */
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0_5);
+  min-width: 0;
+  padding-right: var(--space-2);
+}
+
+.title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+}
+.hint {
+  font-size: var(--text-xs);
+  color: var(--stepper-fg-subtle);
+  line-height: var(--lh-xs);
+}
+.item[data-state="active"] .hint {
+  color: var(--stepper-fg-muted);
+}

package/assets/components/Stepper/Stepper.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import {
+  Children,
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useContext,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { Icon } from "../Icon";
+import styles from "./Stepper.module.css";
+
+type Orientation = "vertical" | "horizontal";
+type Marker = "dot" | "number";
+type ItemState = "upcoming" | "active" | "done";
+
+type StepperContextValue = {
+  orientation: Orientation;
+  marker: Marker;
+  activeIndex: number;
+  onStepClick?: (index: number) => void;
+};
+
+const StepperContext = createContext<StepperContextValue | null>(null);
+
+function useStepperContext(): StepperContextValue {
+  const ctx = useContext(StepperContext);
+  if (!ctx) {
+    throw new Error("Stepper.Item must be used inside <Stepper>.");
+  }
+  return ctx;
+}
+
+// ────────────────────────────────────────────────────────
+
+export type StepperProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+  /** 현재 활성 스텝 index (0-based). */
+  activeIndex: number;
+  /** 세로/가로 배치. 기본 vertical. */
+  orientation?: Orientation;
+  /** marker 종류. dot(기본) | number. */
+  marker?: Marker;
+  /** 스텝 클릭 시. 자식 Item에 onClick이 있으면 그쪽이 우선. */
+  onStepClick?: (index: number) => void;
+  children: ReactNode;
+};
+
+const StepperRoot = forwardRef<HTMLDivElement, StepperProps>(
+  (
+    {
+      activeIndex,
+      orientation = "vertical",
+      marker = "dot",
+      onStepClick,
+      className,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const ctxValue = useMemo<StepperContextValue>(
+      () => ({ orientation, marker, activeIndex, onStepClick }),
+      [orientation, marker, activeIndex, onStepClick],
+    );
+
+    // 자식 Item에 index를 자동 주입
+    const items = Children.toArray(children).filter(isValidElement);
+    const injected = items.map((child, i) =>
+      cloneElement(child as ReactElement<StepperItemProps>, {
+        index: (child as ReactElement<StepperItemProps>).props.index ?? i,
+      }),
+    );
+
+    return (
+      <StepperContext.Provider value={ctxValue}>
+        <div
+          ref={ref}
+          role="list"
+          className={[
+            styles.root,
+            orientation === "vertical" ? styles.vertical : styles.horizontal,
+            className ?? "",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+          data-orientation={orientation}
+          data-marker={marker}
+          {...rest}
+        >
+          {injected}
+        </div>
+      </StepperContext.Provider>
+    );
+  },
+);
+StepperRoot.displayName = "Stepper";
+
+// ────────────────────────────────────────────────────────
+
+export type StepperItemProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "title"
+> & {
+  /** Stepper가 자동 주입. 수동 override 가능. */
+  index?: number;
+  title: ReactNode;
+  hint?: ReactNode;
+  /** 명시적 상태 지정. 미지정이면 activeIndex 기준으로 자동 결정. */
+  state?: ItemState;
+};
+
+const StepperItem = forwardRef<HTMLButtonElement, StepperItemProps>(
+  (
+    {
+      index,
+      title,
+      hint,
+      state: stateProp,
+      disabled,
+      onClick,
+      className,
+      children: _children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const { orientation, marker, activeIndex, onStepClick } =
+      useStepperContext();
+
+    const idx = index ?? 0;
+    const state: ItemState =
+      stateProp ??
+      (idx === activeIndex ? "active" : idx < activeIndex ? "done" : "upcoming");
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="listitem"
+        className={[styles.item, className ?? ""].filter(Boolean).join(" ")}
+        data-state={state}
+        data-orientation={orientation}
+        disabled={disabled}
+        onClick={(e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented) onStepClick?.(idx);
+        }}
+        aria-current={state === "active" ? "step" : undefined}
+        {...rest}
+      >
+        <span className={styles.marker} aria-hidden>
+          {state === "done" ? (
+            <Icon name="check" size={12} />
+          ) : marker === "number" ? (
+            idx + 1
+          ) : state === "active" ? (
+            <span className={styles.markerInnerDot} />
+          ) : null}
+        </span>
+        <span className={styles.body}>
+          <span className={styles.title}>{title}</span>
+          {hint != null && <span className={styles.hint}>{hint}</span>}
+        </span>
+      </button>
+    );
+  },
+);
+StepperItem.displayName = "Stepper.Item";
+
+// ────────────────────────────────────────────────────────
+
+type StepperComponent = typeof StepperRoot & {
+  Item: typeof StepperItem;
+};
+
+const Stepper = StepperRoot as StepperComponent;
+Stepper.Item = StepperItem;
+
+export { Stepper };

package/assets/components/Stepper/index.ts

@@ -0,0 +1,2 @@
+export { Stepper } from "./Stepper";
+export type { StepperProps, StepperItemProps } from "./Stepper";

package/assets/components/Switch/Switch.module.css

@@ -0,0 +1,116 @@
+/* Switch — 즉시 적용되는 on/off 컨트롤.
+   시각: 알약 모양 트랙 + 원형 썸. checked면 트랙이 --primary로 채워지고 썸이 우측 이동.
+   시맨틱: role=switch가 붙은 checkbox input. label 래퍼가 hitbox.
+
+   축 반응:
+   ─ Density → --control-h-* (트랙 세로 크기 비례)
+   ─ Motion  → 썸 이동·색 전환 duration
+   ─ Palette → 켜졌을 때 --primary
+*/
+
+.root {
+  --_track-h: var(--space-4);
+  --_track-w: var(--space-8);
+  --_thumb: var(--space-3);
+  --_pad: var(--space-0_5);
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Sizes */
+.size_sm {
+  --_track-h: var(--space-3);
+  --_track-w: var(--space-6);
+  --_thumb: var(--space-2);
+}
+.size_md {
+  --_track-h: var(--space-4);
+  --_track-w: var(--space-8);
+  --_thumb: var(--space-3);
+}
+.size_lg {
+  --_track-h: var(--space-5);
+  --_track-w: var(--space-10);
+  --_thumb: var(--space-4);
+}
+
+/* Native input: visually-hidden but focusable & form-submittable */
+.input {
+  position: absolute;
+  width: var(--hairline);
+  height: var(--hairline);
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.track {
+  position: relative;
+  display: inline-block;
+  width: var(--_track-w);
+  height: var(--_track-h);
+  background: var(--bg-muted);
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-full);
+  transition:
+    background var(--duration-slow) var(--ease-out),
+    border-color var(--duration-slow) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  left: var(--_pad);
+  width: var(--_thumb);
+  height: var(--_thumb);
+  background: var(--bg);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-xs);
+  transform: translateY(-50%);
+  transition:
+    left var(--duration-base) var(--ease-out),
+    background var(--duration-slow) var(--ease-out);
+}
+
+/* Checked — 트랙은 primary로 채우고, 썸을 우측 끝 - pad로 이동. */
+.input:checked + .track {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+.input:checked + .track .thumb {
+  left: calc(var(--_track-w) - var(--_thumb) - var(--_pad) - var(--hairline) * 2);
+}
+
+/* Hover */
+.root:hover .input:not(:disabled) + .track {
+  border-color: var(--border-strong);
+}
+.root:hover .input:not(:disabled):checked + .track {
+  background: var(--primary-hover);
+  border-color: var(--primary-hover);
+}
+
+/* Focus — 트랙에 링 표시 */
+.input:focus-visible + .track {
+  box-shadow: var(--ring-shadow);
+}
+
+/* Disabled — Button과 동일한 통일 스펙 (실버 · 회색) */
+.root:has(.input:disabled) {
+  cursor: not-allowed;
+}
+.input:disabled + .track {
+  background: var(--bg-muted);
+  border-color: transparent;
+}
+.input:disabled + .track .thumb {
+  background: var(--fg-disabled);
+  box-shadow: none;
+}

package/assets/components/Switch/Switch.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  type CSSProperties,
+  type InputHTMLAttributes,
+} from "react";
+
+import styles from "./Switch.module.css";
+
+export type SwitchSize = "sm" | "md" | "lg";
+
+export type SwitchProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type" | "size"
+> & {
+  size?: SwitchSize;
+  onCheckedChange?: (checked: boolean) => void;
+};
+
+const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  (
+    { className, size = "md", onCheckedChange, onChange, style, ...rest },
+    ref,
+  ) => {
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e);
+        if (!e.defaultPrevented) onCheckedChange?.(e.target.checked);
+      },
+      [onChange, onCheckedChange],
+    );
+
+    const cls = [styles.root, styles[`size_${size}`], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <label className={cls} style={style as CSSProperties}>
+        <input
+          ref={ref}
+          type="checkbox"
+          role="switch"
+          className={styles.input}
+          onChange={handleChange}
+          {...rest}
+        />
+        <span className={styles.track} aria-hidden>
+          <span className={styles.thumb} />
+        </span>
+      </label>
+    );
+  },
+);
+Switch.displayName = "Switch";
+
+export { Switch };

package/assets/components/Switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from "./Switch";
+export type { SwitchProps, SwitchSize } from "./Switch";