@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import {
+  Children,
+  Fragment,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type AnchorHTMLAttributes,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import * as RPopover from "@radix-ui/react-popover";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+
+import { Icon, IconAxisProvider, useIconAxis } from "../Icon";
+import { MenuItem } from "../MenuItem";
+import styles from "./Breadcrumb.module.css";
+
+/** 트리거 내부 아이콘 렌더 사이즈 — Button xs와 동일한 12px. */
+const ICON_SIZE = 12;
+
+function sizedIcon(node: ReactNode): 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: ICON_SIZE });
+}
+
+// ────────────────────────────────────────────────────────────
+// Root — <nav aria-label="…"> + <ol>. Item 사이에 separator를 자동 삽입.
+// ────────────────────────────────────────────────────────────
+
+export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /** 스크린리더용 라벨. 기본 "Breadcrumb". */
+  "aria-label"?: string;
+  /** 항목 사이 구분자. 기본은 caret-right 아이콘. */
+  separator?: ReactNode;
+  children: ReactNode;
+}
+
+const Root = forwardRef<HTMLElement, BreadcrumbProps>(
+  ({ className, separator, children, "aria-label": ariaLabel = "Breadcrumb", ...rest }, ref) => {
+    const sep = separator ?? <Icon name="caret-right" size={12} />;
+    const items = Children.toArray(children).filter(isValidElement);
+
+    return (
+      <nav
+        ref={ref}
+        aria-label={ariaLabel}
+        className={[styles.root, className ?? ""].filter(Boolean).join(" ")}
+        {...rest}
+      >
+        <ol className={styles.list}>
+          {items.map((child, i) => (
+            <Fragment key={(child as ReactElement).key ?? i}>
+              <li className={styles.item}>{child}</li>
+              {i < items.length - 1 && (
+                <li className={styles.separator} aria-hidden>
+                  {sep}
+                </li>
+              )}
+            </Fragment>
+          ))}
+        </ol>
+      </nav>
+    );
+  },
+);
+Root.displayName = "Breadcrumb";
+
+// ────────────────────────────────────────────────────────────
+// Link — Button xs ghost와 동일한 토큰으로 스타일. asChild로 Next Link 등에 위임 가능.
+// ────────────────────────────────────────────────────────────
+
+export interface BreadcrumbLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** 자식 요소로 렌더 (예: Next.js <Link>). */
+  asChild?: boolean;
+  leftIcon?: ReactNode;
+}
+
+const Link = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({ asChild = false, leftIcon, className, children, ...rest }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    const hasChildren = children !== undefined && children !== null && children !== false;
+    // 아이콘 단독 모드 — children 없이 leftIcon만: 원형 hit box + 접근성 라벨은 aria-label에 위임.
+    const iconOnly = !hasChildren && leftIcon != null;
+    const cls = [styles.link, iconOnly ? styles.linkIconOnly : "", className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+    // asChild일 때 label을 Slottable로 감싸면 Slot이 자식 요소의 children으로 병합.
+    return (
+      <Comp ref={ref} className={cls} {...rest}>
+        {leftIcon && (
+          <span className={styles.linkIcon} aria-hidden>
+            {sizedIcon(leftIcon)}
+          </span>
+        )}
+        {hasChildren && (
+          <Slottable>
+            <span className={styles.linkLabel}>{children}</span>
+          </Slottable>
+        )}
+      </Comp>
+    );
+  },
+);
+Link.displayName = "Breadcrumb.Link";
+
+// ────────────────────────────────────────────────────────────
+// Current — 현재 페이지. 링크 아님. aria-current="page".
+// ────────────────────────────────────────────────────────────
+
+export interface BreadcrumbCurrentProps extends HTMLAttributes<HTMLSpanElement> {
+  leftIcon?: ReactNode;
+}
+
+const Current = forwardRef<HTMLSpanElement, BreadcrumbCurrentProps>(
+  ({ className, leftIcon, children, ...rest }, ref) => {
+    const hasChildren = children !== undefined && children !== null && children !== false;
+    const iconOnly = !hasChildren && leftIcon != null;
+    const cls = [styles.current, iconOnly ? styles.linkIconOnly : "", className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+    return (
+      <span ref={ref} aria-current="page" className={cls} {...rest}>
+        {leftIcon && (
+          <span className={styles.linkIcon} aria-hidden>
+            {sizedIcon(leftIcon)}
+          </span>
+        )}
+        {hasChildren && <span className={styles.linkLabel}>{children}</span>}
+      </span>
+    );
+  },
+);
+Current.displayName = "Breadcrumb.Current";
+
+// ────────────────────────────────────────────────────────────
+// Ellipsis — 항목이 많을 때 중간 축약. 클릭 시 Select와 동일한 팝오버 표면으로
+// 숨긴 항목 리스트를 연다. items는 필수 — 클릭 불가한 정적 마커는 지원하지 않는다.
+// ────────────────────────────────────────────────────────────
+
+export type BreadcrumbEllipsisItem = {
+  label: ReactNode;
+  href?: string;
+  onSelect?: () => void;
+  leftIcon?: ReactNode;
+  disabled?: boolean;
+};
+
+export interface BreadcrumbEllipsisProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
+  /** 숨긴 항목 리스트. 최소 1개. */
+  items: BreadcrumbEllipsisItem[];
+  /** 팝오버 side offset (px). 기본 6. */
+  sideOffset?: number;
+  /** aria-label. 기본 "Show hidden pages". */
+  "aria-label"?: string;
+}
+
+const Ellipsis = forwardRef<HTMLButtonElement, BreadcrumbEllipsisProps>(
+  (
+    {
+      className,
+      items,
+      sideOffset = 6,
+      "aria-label": ariaLabel = "Show hidden pages",
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <RPopover.Root>
+        <RPopover.Trigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            aria-label={ariaLabel}
+            className={[styles.ellipsisTrigger, className ?? ""].filter(Boolean).join(" ")}
+            {...rest}
+          >
+            &hellip;
+          </button>
+        </RPopover.Trigger>
+        <EllipsisContent items={items} sideOffset={sideOffset} />
+      </RPopover.Root>
+    );
+  },
+);
+Ellipsis.displayName = "Breadcrumb.Ellipsis";
+
+/** Portal 하위에서 IconAxis 재주입 — Radix Portal이 트리 컨텍스트를 끊는다. */
+function EllipsisContent({
+  items,
+  sideOffset,
+}: {
+  items: BreadcrumbEllipsisItem[];
+  sideOffset: number;
+}) {
+  const iconAxis = useIconAxis();
+  return (
+    <RPopover.Portal>
+      <RPopover.Content
+        align="start"
+        sideOffset={sideOffset}
+        collisionPadding={8}
+        className={[styles.popoverContent, "m-float"].join(" ")}
+      >
+        <IconAxisProvider value={iconAxis}>
+          <ul className={styles.popoverList} role="menu">
+            {items.map((item, i) => {
+              const leading = item.leftIcon
+                ? [
+                    isValidElement(item.leftIcon) &&
+                    (item.leftIcon as ReactElement<{ size?: number | string }>).props.size === undefined
+                      ? cloneElement(item.leftIcon as ReactElement<{ size?: number | string }>, {
+                          size: 16,
+                        })
+                      : item.leftIcon,
+                  ]
+                : undefined;
+              const inner = (
+                <MenuItem size="sm" disabled={item.disabled} leadingActions={leading}>
+                  {item.label}
+                </MenuItem>
+              );
+              return (
+                <li key={i} role="none">
+                  {item.href ? (
+                    <RPopover.Close asChild>
+                      <a
+                        href={item.href}
+                        role="menuitem"
+                        className={styles.popoverItemLink}
+                        aria-disabled={item.disabled || undefined}
+                      >
+                        {inner}
+                      </a>
+                    </RPopover.Close>
+                  ) : (
+                    <RPopover.Close asChild>
+                      <button
+                        type="button"
+                        role="menuitem"
+                        disabled={item.disabled}
+                        onClick={() => item.onSelect?.()}
+                        className={styles.popoverItemButton}
+                      >
+                        {inner}
+                      </button>
+                    </RPopover.Close>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </IconAxisProvider>
+      </RPopover.Content>
+    </RPopover.Portal>
+  );
+}
+
+// ────────────────────────────────────────────────────────────
+
+type BreadcrumbCompound = typeof Root & {
+  Link: typeof Link;
+  Current: typeof Current;
+  Ellipsis: typeof Ellipsis;
+};
+
+const Breadcrumb = Root as BreadcrumbCompound;
+Breadcrumb.Link = Link;
+Breadcrumb.Current = Current;
+Breadcrumb.Ellipsis = Ellipsis;
+
+export { Breadcrumb };

package/assets/components/Breadcrumb/index.ts

@@ -0,0 +1,8 @@
+export { Breadcrumb } from "./Breadcrumb";
+export type {
+  BreadcrumbProps,
+  BreadcrumbLinkProps,
+  BreadcrumbCurrentProps,
+  BreadcrumbEllipsisProps,
+  BreadcrumbEllipsisItem,
+} from "./Breadcrumb";

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

@@ -0,0 +1,216 @@
+/* Base ─────────────────────────────────────────────────────── */
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  font-family: var(--label-font);
+  font-weight: var(--label-weight);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--label-tracking);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid transparent;
+  /* 인터랙션 트랜지션은 globals.css의 시맨틱 프리셋 3종 조합.
+     값 튜닝은 --transition-* 토큰에서만. */
+  transition: var(--transition-colors), var(--transition-ring), var(--transition-press);
+}
+
+.root:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+
+/* Press: 진입·해제 모두 base + ease-out → 대칭 부드러움 */
+.root:active:not(:disabled) {
+  transform: translateY(var(--space-0_5));
+}
+
+/* Hover 시 아이콘 밝기 상승 (0.75 → 1.0) */
+.root:hover:not(:disabled) .icon {
+  opacity: 1;
+}
+.icon {
+  transition: opacity var(--duration-slow) var(--ease-out);
+}
+
+/* Disabled — variant 무관 통일 스타일.
+   회색 버튼(--bg-muted) + 실버 글자(--fg-disabled) + 투명 보더.
+   loading은 opacity로 유지 (스피너 컨텍스트 보존). */
+.root:disabled {
+  cursor: not-allowed;
+  background: var(--bg-muted);
+  color: var(--fg-disabled);
+  border-color: transparent;
+  box-shadow: none;
+}
+.root:disabled .icon {
+  opacity: 1;
+}
+.root[data-loading="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Full width ─────────────────────────────────────────────────── */
+.fullWidth {
+  width: 100%;
+}
+
+/* Sizes ──────────────────────────────────────────────────────── */
+/* Size는 높이·패딩·타이포·gap·radius 담당.
+   Shape 축(soft/standard/crisp)이 각 --radius-*의 실제 값을 스왑. */
+.xs {
+  height: var(--control-h-xs);
+  padding-inline: var(--space-1);
+  gap: var(--space-1);
+  font-size: var(--text-xs);
+  border-radius: var(--radius-xs);
+  --btn-icon-size: var(--space-3);
+}
+.sm {
+  height: var(--control-h-sm);
+  padding-inline: var(--space-2);
+  gap: var(--space-1_5);
+  font-size: var(--label-sm-size);
+  border-radius: var(--radius-xs);
+  --btn-icon-size: var(--space-4);
+}
+.md {
+  height: var(--control-h-md);
+  padding-inline: var(--space-2);
+  gap: var(--space-1);
+  font-size: var(--label-md-size);
+  border-radius: var(--radius-sm);
+  --btn-icon-size: var(--space-4);
+}
+.lg {
+  height: var(--control-h-lg);
+  padding-inline: var(--space-4);
+  gap: var(--space-1_5);
+  font-size: var(--label-md-size);
+  border-radius: var(--radius-md);
+  --btn-icon-size: var(--space-5);
+}
+
+
+/* Icon / label slots ─────────────────────────────────────────── */
+/* 아이콘 슬롯을 고정 정사각 박스로 강제. SVG viewBox 내부 여백이
+   라이브러리·아이콘마다 달라도 슬롯 밖 레이아웃(gap·padding)은 항상 균일.
+   슬롯 안에서 SVG는 100% 채움. */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--btn-icon-size);
+  height: var(--btn-icon-size);
+  /* 아이콘은 텍스트보다 한 단계 옅게 (Silver 톤).
+     currentColor 위에 opacity로 조절해서 filled/ghost 모두 대응. */
+  opacity: 0.75;
+}
+.icon > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.label {
+  display: inline-flex;
+  align-items: center;
+}
+/* Badge 슬롯: 라벨 오른쪽 트레일링. Badge 컴포넌트가 자체 색·radius를 가지므로
+   슬롯은 정렬만 담당. gap은 sizeClass 기본값(--space-1~2) 사용. */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+/* 아이콘 크기는 Button.tsx가 Icon size prop으로 직접 주입.
+   여기서 CSS로 강제 축소하면 stroke가 뭉개져 두꺼워 보임. */
+
+/* Variants ───────────────────────────────────────────────────── */
+/* primary — 채움, 브랜드 컬러. 위 텍스트/아이콘은 --bg 사용(라이트=흰, 다크=거의 검정) */
+.primary {
+  background: var(--primary);
+  color: var(--bg);
+  border-color: var(--primary);
+}
+.primary:hover:not(:disabled) {
+  background: var(--primary-hover);
+  border-color: var(--primary-hover);
+}
+
+/* inverse — 흑백 반전. mono Accent 프리셋에서 CTA 외 강조 버튼용.
+   라이트: 검정 배경/흰 텍스트, 다크: 흰 배경/검정 텍스트. Hue 축과 무관. */
+.inverse {
+  background: var(--fg);
+  color: var(--bg);
+  border-color: var(--fg);
+}
+.inverse:hover:not(:disabled) {
+  background: var(--fg-strong);
+  border-color: var(--fg-strong);
+}
+
+/* secondary — primary 8% 알파 표면 + primary 텍스트.
+   Accent=mono일 때는 무채색(--bg-muted + --fg)으로 자동 폴백. */
+.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);
+  border-color: var(--border);
+}
+.outline:hover:not(:disabled) {
+  background: var(--hover);
+}
+
+/* ghost — 무게 최소, hover에만 표면 */
+.ghost {
+  background: transparent;
+  color: var(--fg);
+  border-color: transparent;
+}
+.ghost:hover:not(:disabled) {
+  background: var(--hover);
+}
+
+/* destructive — 위험 액션. 평상시 destructive 8% 알파 + destructive 텍스트,
+   hover 시 solid 빨강 배경 + fg로 전환 (진짜 위험함을 강조). */
+.destructive {
+  background: var(--destructive-subtle);
+  color: var(--destructive);
+  border-color: transparent;
+}
+.destructive:hover:not(:disabled) {
+  background: var(--destructive);
+  color: var(--destructive-fg);
+  border-color: var(--destructive);
+}
+
+/* destructive-ghost — 평상시 fg 텍스트(위험 아님을 감춤),
+   hover 시 destructive 톤(8% 배경 + destructive 텍스트)으로 전환. */
+.destructiveGhost {
+  background: transparent;
+  color: var(--fg);
+  border-color: transparent;
+}
+.destructiveGhost:hover:not(:disabled) {
+  background: var(--destructive-subtle);
+  color: var(--destructive);
+}
+
+/* Loading spinner slot ───────────────────────────────────────── */
+.spinner {
+  display: inline-flex;
+  animation: m-spin var(--duration-slower) var(--ease-linear) infinite;
+}

package/assets/components/Button/Button.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ButtonHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+import styles from "./Button.module.css";
+
+export type ButtonVariant =
+  | "primary"
+  | "inverse"
+  | "secondary"
+  | "outline"
+  | "ghost"
+  | "destructive"
+  | "destructive-ghost";
+
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
+
+export type ButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "size"
+> & {
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  fullWidth?: boolean;
+  loading?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  /** 라벨 오른쪽 트레일링 슬롯에 붙는 카운트·상태 뱃지.
+   *  rightIcon과 공존 시 badge → rightIcon 순으로 배치. */
+  badge?: ReactNode;
+  asChild?: boolean;
+};
+
+const variantClass: Record<ButtonVariant, string> = {
+  primary: styles.primary,
+  inverse: styles.inverse,
+  secondary: styles.secondary,
+  outline: styles.outline,
+  ghost: styles.ghost,
+  destructive: styles.destructive,
+  "destructive-ghost": styles.destructiveGhost,
+};
+
+const sizeClass: Record<ButtonSize, string> = {
+  xs: styles.xs,
+  sm: styles.sm,
+  md: styles.md,
+  lg: styles.lg,
+};
+
+const ICON_SIZE: Record<ButtonSize, number> = {
+  xs: 12,
+  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 });
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = "primary",
+      size = "md",
+      fullWidth = false,
+      loading = false,
+      leftIcon,
+      rightIcon,
+      badge,
+      asChild = false,
+      disabled,
+      type,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+
+    const rootClass = [
+      styles.root,
+      variantClass[variant],
+      sizeClass[size],
+      fullWidth ? styles.fullWidth : "",
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    /* asChild 모드: Slot은 자식이 정확히 하나여야 한다. leftIcon/label/badge/rightIcon을
+       모두 넘기면 자식이 여러 개가 되어 터지므로, asChild일 때는 children을 그대로
+       Slot에 넘기고(= 소비 측 anchor/div 하나) icon·badge prop은 무시. 아이콘은 소비
+       측에서 anchor 내부에 직접 꽂아 single-child 조건을 지키도록 설계. */
+    if (asChild) {
+      return (
+        <Slot
+          ref={ref}
+          className={rootClass}
+          data-loading={loading || undefined}
+          {...rest}
+        >
+          {children}
+        </Slot>
+      );
+    }
+
+    return (
+      <Comp
+        ref={ref}
+        className={rootClass}
+        type={type ?? "button"}
+        disabled={disabled || loading}
+        data-loading={loading || undefined}
+        {...rest}
+      >
+        {leftIcon && (
+          <span className={styles.icon} aria-hidden>
+            {sizedIcon(leftIcon, ICON_SIZE[size])}
+          </span>
+        )}
+        <span className={styles.label}>{children}</span>
+        {badge && <span className={styles.badge}>{badge}</span>}
+        {rightIcon && (
+          <span className={styles.icon} aria-hidden>
+            {sizedIcon(rightIcon, ICON_SIZE[size])}
+          </span>
+        )}
+      </Comp>
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export { Button };

package/assets/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button";