@conscience-technology/ctds 0.3.4 → 0.4.1

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

@@ -96,8 +96,8 @@
 }
 .md {
   height: var(--control-h-md);
-  padding-inline: var(--space-2);
-  gap: var(--space-1);
+  padding-inline: var(--space-3);
+  gap: var(--space-1_5);
   font-size: var(--label-md-size);
   border-radius: var(--radius-sm);
   --btn-icon-size: var(--space-4);

package/assets/components/EventListItem/EventListItem.module.css

@@ -0,0 +1,220 @@
+/*
+ * EventListItem — 리스트에 쌓이는 일정 아이템.
+ * 좌: 날짜 블록(큰 숫자 + 요일 소문자) · 세로 hairline · 우: 제목 + status + meta.
+ *
+ * variant:
+ *   card — 1px --border + --radius-lg + --bg (기본, 단독 카드)
+ *   line — radius 없음, 하단 hairline만 (리스트 흐름 자리)
+ *   fill — 기본은 중립 --bg-subtle(가장 연한 회색). status 지정 시 info/warning/success/destructive subtle 톤
+ *
+ * interactive: href 있을 때만 hover/focus ring.
+ */
+
+.root {
+  display: flex;
+  align-items: stretch;
+  gap: var(--space-3);
+  color: inherit;
+  text-decoration: none;
+  min-width: 0;
+}
+
+/* size — padding, 날짜 트랙 폭, 폰트 크기까지 한 단계씩. */
+.md {
+  padding: var(--space-4) var(--space-5);
+}
+.sm {
+  padding: var(--space-3) var(--space-4);
+}
+
+/* card — border + radius + bg */
+.card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+}
+
+/* line — radius 없이 하단 hairline만. 리스트 자리에서 쭉 흐른다. */
+.line {
+  background: transparent;
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+}
+
+/* fill — 기본은 중립 soft 회색(--bg-subtle). status 지정 시 아래 fillInfo/… 가 override. */
+.fill {
+  background: var(--bg-subtle);
+  border-radius: var(--radius-lg);
+}
+
+.fillInfo {
+  background: var(--info-subtle);
+}
+.fillWarning {
+  background: var(--warning-subtle);
+}
+.fillSuccess {
+  background: var(--success-subtle);
+}
+.fillDestructive {
+  background: var(--destructive-subtle);
+}
+
+.interactive {
+  cursor: pointer;
+  transition: var(--transition-colors), var(--transition-ring);
+}
+
+.card.interactive:hover,
+.line.interactive:hover {
+  background: var(--hover);
+}
+
+/* fill은 이미 status 색을 입고 있어 bg 교체 금지(색이 날아간다).
+   hover는 --hover를 inset 그림자로 겹쳐 톤만 살짝 어둡게. */
+.fill.interactive:hover {
+  box-shadow: inset 0 0 0 999rem var(--hover);
+}
+
+.interactive:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+
+/* fill variant에서 hover + focus 동시 유지 */
+.fill.interactive:hover:focus-visible {
+  box-shadow: inset 0 0 0 999rem var(--hover), var(--ring-shadow);
+}
+
+/* 날짜 블록 — 좌측 고정 폭. 숫자가 2자리 기준으로 흔들리지 않도록 min-width 트랙. */
+.dateBlock {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--space-0_5);
+  flex-shrink: 0;
+}
+.md .dateBlock {
+  min-width: var(--space-10);
+}
+.sm .dateBlock {
+  min-width: var(--space-8);
+}
+
+.day {
+  font-weight: var(--font-weight-semibold); /* 20px 이상 → semibold 허용 */
+  font-variant-numeric: tabular-nums;
+  color: var(--fg-strong);
+  line-height: var(--lh-tight);
+}
+.md .day {
+  font-size: var(--text-2xl);
+}
+.sm .day {
+  font-size: var(--text-xl);
+}
+
+.weekday {
+  font-weight: var(--font-weight-regular);
+  color: var(--fg-muted);
+  /* 소문자 유지. uppercase 금지 */
+}
+.md .weekday {
+  font-size: var(--text-2xs);
+  line-height: var(--lh-2xs);
+}
+.sm .weekday {
+  font-size: var(--text-3xs);
+  line-height: var(--lh-3xs);
+}
+
+/* 세로 hairline — border-left shorthand로 (리터럴 width 금지 회피) */
+.divider {
+  border-inline-start: 1px solid var(--border);
+  align-self: stretch;
+  flex-shrink: 0;
+}
+
+/* 본문 — 제목 + 메타 라인 */
+.body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  justify-content: center;
+}
+
+.title {
+  margin: 0;
+  font-weight: var(--font-weight-medium); /* 20px 미만 → medium */
+  color: var(--fg-strong);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.md .title {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
+.sm .title {
+  font-size: var(--text-xs);
+  line-height: var(--lh-xs);
+}
+
+/* 메타 라인 — status Badge + 아이콘+텍스트 N개. 사이는 짧은 세로 hairline. */
+.metaRow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1_5);
+  flex-wrap: wrap;
+  min-width: 0;
+  color: var(--fg-muted);
+}
+
+.metaItem {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  color: var(--fg-muted);
+  min-width: 0;
+}
+.md .metaItem {
+  font-size: var(--text-xs);
+  line-height: var(--lh-xs);
+}
+.sm .metaItem {
+  font-size: var(--text-2xs);
+  line-height: var(--lh-2xs);
+}
+
+/* 메타 라인 안에서 "앞선 형제가 있을 때만" 왼쪽 hairline. 첫 아이템은 항상 제거,
+   앞 slot이 비었다가 뒤에 하나만 나오는 경우에도 자동으로 안 그려진다. */
+.metaRow > * + .metaItem {
+  padding-inline-start: var(--space-1_5);
+  border-inline-start: 1px solid var(--border);
+}
+
+/* showMetaDivider=false — meta 사이 hairline/padding 제거. gap만으로 분리. */
+.noMetaDivider .metaRow > * + .metaItem {
+  padding-inline-start: 0;
+  border-inline-start: none;
+}
+
+.metaIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-muted);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.metaLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/assets/components/EventListItem/EventListItem.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import {
+  forwardRef,
+  type AnchorHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+  type Ref,
+} from "react";
+
+import { Badge } from "../Badge";
+import { Icon, type IconName } from "../Icon";
+
+import styles from "./EventListItem.module.css";
+
+/**
+ * EventListItem — 리스트에 쌓이는 "하나의 일정" 아이템.
+ * 좌: 날짜 블록 (큰 숫자 + 요일), 우: 제목 + status + meta.
+ *
+ * EventChip은 캘린더 셀 안 색 바 전용. 이 컴포넌트는 리스트 아이템.
+ */
+
+export type EventListItemStatus = "upcoming" | "pending" | "completed" | "cancelled";
+
+/**
+ * variant:
+ * - "card"(기본) — border + radius + bg. 단독 떠있는 리스트 아이템.
+ * - "line" — radius 없음, 하단 hairline만. 리스트가 가로 폭 꽉 채워 흐르는 자리.
+ * - "fill" — 기본은 중립 soft bg. status를 명시하면 info/warning/success/destructive 톤으로 덮어씀.
+ *   fill + status 조합일 땐 Badge 중복 방지로 자동 숨김.
+ */
+export type EventListItemVariant = "card" | "line" | "fill";
+
+/**
+ * size:
+ * - "md"(기본) — 대시보드·상세 뷰 등 일반 자리.
+ * - "sm" — 사이드바·밀집 리스트처럼 세로 공간이 아쉬운 자리.
+ */
+export type EventListItemSize = "md" | "sm";
+
+export type EventListItemMeta = {
+  icon?: IconName;
+  label: ReactNode;
+};
+
+type Common = {
+  date: Date;
+  title: ReactNode;
+  variant?: EventListItemVariant;
+  size?: EventListItemSize;
+  status?: EventListItemStatus;
+  statusLabel?: ReactNode;
+  meta?: EventListItemMeta[];
+  /** 날짜 블록 오른쪽 세로 hairline 표시 여부. 기본 true. */
+  showDateDivider?: boolean;
+  /** meta 아이템 사이 세로 hairline 분리선 표시 여부. 기본 true. */
+  showMetaDivider?: boolean;
+};
+
+type DivProps = Common &
+  Omit<HTMLAttributes<HTMLDivElement>, keyof Common> & { href?: undefined };
+
+type AnchorProps = Common &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof Common> & { href: string };
+
+export type EventListItemProps = DivProps | AnchorProps;
+
+const statusMap: Record<
+  EventListItemStatus,
+  { badgeStatus: "info" | "warning" | "success" | "destructive"; defaultLabel: string }
+> = {
+  upcoming: { badgeStatus: "info", defaultLabel: "Upcoming" },
+  pending: { badgeStatus: "warning", defaultLabel: "Pending" },
+  completed: { badgeStatus: "success", defaultLabel: "Completed" },
+  cancelled: { badgeStatus: "destructive", defaultLabel: "Cancelled" },
+};
+
+/* locale 고정 없이 사용자 로케일에 맡기면 리스트 안에서 길이가 들쭉날쭉.
+   요일 3글자 약어는 en-US 기준으로 맞추고, 대문자 금지 규칙에 따라 수동 소문자화. */
+function formatDay(date: Date): string {
+  return String(date.getDate()).padStart(2, "0");
+}
+function formatWeekday(date: Date): string {
+  return date
+    .toLocaleDateString("en-US", { weekday: "short" })
+    .toLowerCase();
+}
+
+const variantClass: Record<EventListItemVariant, string> = {
+  card: styles.card,
+  line: styles.line,
+  fill: styles.fill,
+};
+
+const sizeClass: Record<EventListItemSize, string> = {
+  md: styles.md,
+  sm: styles.sm,
+};
+
+/* meta 아이콘 size — md는 14px, sm은 12px. */
+const metaIconSize: Record<EventListItemSize, number> = {
+  md: 14,
+  sm: 12,
+};
+
+const fillStatusClass: Record<EventListItemStatus, string> = {
+  upcoming: styles.fillInfo,
+  pending: styles.fillWarning,
+  completed: styles.fillSuccess,
+  cancelled: styles.fillDestructive,
+};
+
+const EventListItem = forwardRef<HTMLElement, EventListItemProps>((props, ref) => {
+  const {
+    className,
+    date,
+    title,
+    variant = "card",
+    size = "md",
+    status,
+    statusLabel,
+    meta,
+    showDateDivider = true,
+    showMetaDivider = true,
+    ...rest
+  } = props as Common & { className?: string } & Record<string, unknown>;
+
+  const isLink = typeof (props as AnchorProps).href === "string";
+
+  const rootClass = [
+    styles.root,
+    variantClass[variant],
+    sizeClass[size],
+    variant === "fill" && status ? fillStatusClass[status] : "",
+    !showMetaDivider ? styles.noMetaDivider : "",
+    isLink ? styles.interactive : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const mapped = status ? statusMap[status] : undefined;
+  const effectiveStatusLabel = statusLabel ?? mapped?.defaultLabel;
+  /* fill + status 조합일 때만 Badge 중복 숨김. fill 단독(중립 회색)일 땐 status 자체가 없다. */
+  const showStatusBadge = Boolean(mapped) && !(variant === "fill" && status);
+
+  const content = (
+    <>
+      <div className={styles.dateBlock} aria-hidden>
+        <span className={styles.day}>{formatDay(date)}</span>
+        <span className={styles.weekday}>{formatWeekday(date)}</span>
+      </div>
+      {showDateDivider && <div className={styles.divider} aria-hidden />}
+      <div className={styles.body}>
+        <h3 className={styles.title}>{title}</h3>
+        {(showStatusBadge || meta?.length) && (
+          <div className={styles.metaRow}>
+            {showStatusBadge && mapped && effectiveStatusLabel && (
+              <Badge variant="soft" status={mapped.badgeStatus}>
+                {effectiveStatusLabel}
+              </Badge>
+            )}
+            {meta?.map((m, i) => (
+              <span key={i} className={styles.metaItem}>
+                {m.icon && (
+                  <span className={styles.metaIcon} aria-hidden>
+                    <Icon name={m.icon} size={metaIconSize[size]} />
+                  </span>
+                )}
+                <span className={styles.metaLabel}>{m.label}</span>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+
+  if (isLink) {
+    return (
+      <a
+        ref={ref as Ref<HTMLAnchorElement>}
+        className={rootClass}
+        {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}
+        href={(props as AnchorProps).href}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <div
+      ref={ref as Ref<HTMLDivElement>}
+      className={rootClass}
+      {...(rest as HTMLAttributes<HTMLDivElement>)}
+    >
+      {content}
+    </div>
+  );
+});
+
+EventListItem.displayName = "EventListItem";
+
+export { EventListItem };

package/assets/components/EventListItem/index.ts

@@ -0,0 +1,8 @@
+export { EventListItem } from "./EventListItem";
+export type {
+  EventListItemProps,
+  EventListItemStatus,
+  EventListItemMeta,
+  EventListItemVariant,
+  EventListItemSize,
+} from "./EventListItem";