@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/components/TimePicker/index.ts

@@ -0,0 +1,8 @@
+export { TimePicker } from "./TimePicker";
+export type {
+  TimePickerProps,
+  TimePickerSize,
+  TimePickerVariant,
+} from "./TimePicker";
+export type { TimeValue, TimeFormat } from "./utils";
+export { parseTimeInput, formatTime, isSameTime } from "./utils";

package/assets/components/TimePicker/utils.ts

@@ -0,0 +1,115 @@
+export type TimeValue = { hours: number; minutes: number };
+
+export type TimeFormat = "24h" | "12h";
+
+/** step 분 단위로 자정부터 하루치 슬롯 생성. endExclusive=24시간. */
+export function buildSlots(stepMinutes: number): TimeValue[] {
+  const list: TimeValue[] = [];
+  const total = Math.floor((24 * 60) / stepMinutes);
+  for (let i = 0; i < total; i += 1) {
+    const total = i * stepMinutes;
+    list.push({ hours: Math.floor(total / 60), minutes: total % 60 });
+  }
+  return list;
+}
+
+export function clampStep(step: number): number {
+  if (step <= 0) return 30;
+  if (step > 60) return 60;
+  return step;
+}
+
+/** "HH:MM" (24h). placeholder 치환용엔 null 반환. */
+export function format24(t: TimeValue | null): string {
+  if (!t) return "";
+  const h = String(t.hours).padStart(2, "0");
+  const m = String(t.minutes).padStart(2, "0");
+  return `${h}:${m}`;
+}
+
+/** "h:MM AM" 형식. */
+export function format12(t: TimeValue | null): string {
+  if (!t) return "";
+  const suffix = t.hours < 12 ? "AM" : "PM";
+  const hour12 = t.hours % 12 === 0 ? 12 : t.hours % 12;
+  const m = String(t.minutes).padStart(2, "0");
+  return `${hour12}:${m} ${suffix}`;
+}
+
+export function formatTime(t: TimeValue | null, format: TimeFormat): string {
+  return format === "12h" ? format12(t) : format24(t);
+}
+
+/**
+ * 자유 타이핑 파싱.
+ * - "14:30", "1430", "14.30" → 14:30
+ * - "2:30pm", "2:30 pm", "230p" → 14:30
+ * - "9", "09" → 09:00
+ * - "9:5" → 09:05
+ * 실패 시 null.
+ */
+export function parseTimeInput(raw: string): TimeValue | null {
+  const s = raw.trim().toLowerCase();
+  if (!s) return null;
+
+  let suffix: "am" | "pm" | null = null;
+  let core = s;
+  if (/am\b|a\.?m\.?\s*$|\ba$/.test(core) || core.endsWith("a")) {
+    suffix = "am";
+    core = core.replace(/\s*(a\.?m\.?|am|a)\s*$/i, "");
+  } else if (/pm\b|p\.?m\.?\s*$|\bp$/.test(core) || core.endsWith("p")) {
+    suffix = "pm";
+    core = core.replace(/\s*(p\.?m\.?|pm|p)\s*$/i, "");
+  }
+  core = core.trim();
+
+  let hours: number;
+  let minutes: number;
+
+  const sep = core.match(/^(\d{1,2})\s*[:.\s]\s*(\d{1,2})$/);
+  if (sep) {
+    hours = Number(sep[1]);
+    minutes = Number(sep[2]);
+  } else if (/^\d{3,4}$/.test(core)) {
+    const padded = core.padStart(4, "0");
+    hours = Number(padded.slice(0, 2));
+    minutes = Number(padded.slice(2));
+  } else if (/^\d{1,2}$/.test(core)) {
+    hours = Number(core);
+    minutes = 0;
+  } else {
+    return null;
+  }
+
+  if (suffix === "pm" && hours < 12) hours += 12;
+  if (suffix === "am" && hours === 12) hours = 0;
+
+  if (!Number.isFinite(hours) || !Number.isFinite(minutes)) return null;
+  if (hours < 0 || hours > 23) return null;
+  if (minutes < 0 || minutes > 59) return null;
+  return { hours, minutes };
+}
+
+/** HH:MM 문자열 → 분. 유효하지 않으면 null. */
+export function toMinutes(hhmm: string | TimeValue | null | undefined): number | null {
+  if (hhmm == null) return null;
+  if (typeof hhmm === "object") return hhmm.hours * 60 + hhmm.minutes;
+  const parsed = parseTimeInput(hhmm);
+  return parsed ? parsed.hours * 60 + parsed.minutes : null;
+}
+
+export function toTotalMinutes(t: TimeValue): number {
+  return t.hours * 60 + t.minutes;
+}
+
+export function isSameTime(a: TimeValue | null, b: TimeValue | null): boolean {
+  if (!a || !b) return false;
+  return a.hours === b.hours && a.minutes === b.minutes;
+}
+
+/** step에 맞춰 반올림 (내림 기준). */
+export function snapToStep(t: TimeValue, stepMinutes: number): TimeValue {
+  const total = t.hours * 60 + t.minutes;
+  const snapped = Math.floor(total / stepMinutes) * stepMinutes;
+  return { hours: Math.floor(snapped / 60), minutes: snapped % 60 };
+}

package/assets/components/Toast/Toast.module.css

@@ -0,0 +1,264 @@
+/* Toast ─────────────────────────────────────────────────────────
+   휘발성 피드백. 코너에 쌓이고 자동 사라짐.
+   구조: [icon · title/description · action · close]
+   placement별 slide-in/out 애니. tone은 아이콘·action 색에만. */
+
+/* Viewport ───────────────────────────────────────────────────── */
+.viewport {
+  position: fixed;
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  /* 420 = space-2(8) * 52.5 → space-2 * 52 로 근사. 420 ≈ 416. */
+  max-width: calc(var(--space-2) * 52);
+  width: calc(100vw - var(--space-6));
+  padding: var(--space-4);
+  margin: 0;
+  list-style: none;
+  outline: none;
+  /* 포인터 이벤트는 자식(.root)에만 */
+  pointer-events: none;
+}
+
+.viewport > * {
+  pointer-events: auto;
+}
+
+.placement-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.placement-top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+/* top-center는 단일 라인 강제 — 모바일·간결 패턴에서 공간이 좁고
+   한 줄 신호만 깨끗하게 전달. description 숨기고 title은 ellipsis. */
+.placement-top-center .description {
+  display: none;
+}
+.placement-top-center .title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Root ────────────────────────────────────────────────────────── */
+.root {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  /* 우측 padding은 IconButton의 자체 hit area를 감안해 작게. close에 음수 margin으로 외곽 정렬 보정. */
+  padding: var(--space-2_5) var(--space-2) var(--space-2_5) var(--space-3);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-sans);
+  /* 280 = space-2(8) * 35 */
+  min-width: calc(var(--space-2) * 35);
+  width: 100%;
+  border: 1px solid transparent;
+  /* 애니메이션 성능: 레이어 승격 + will-change */
+  will-change: transform, opacity;
+}
+
+/* Surfaces ──────────────────────────────────────────────────── */
+.surface-inverse {
+  background: var(--fg);
+  color: var(--bg);
+  --toast-fg: var(--bg);
+  --toast-fg-muted: var(--bg-muted);
+  --toast-close-hover: color-mix(in oklab, var(--bg) 12%, transparent);
+}
+
+.surface-default {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+  --toast-fg: var(--fg);
+  --toast-fg-muted: var(--fg-muted);
+  --toast-close-hover: var(--bg-subtle);
+}
+
+/* Tones — 아이콘·action 색만 스왑 ─────────────────────────── */
+.tone-neutral   { --toast-accent: var(--toast-fg-muted); }
+.tone-success   { --toast-accent: var(--success); }
+.tone-warning   { --toast-accent: var(--warning); }
+.tone-destructive { --toast-accent: var(--destructive); }
+
+/* Icon ──────────────────────────────────────────────────────── */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: var(--lh-sm);
+  color: var(--toast-accent);
+}
+.icon > svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+/* Body ──────────────────────────────────────────────────────── */
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  /* 남은 공간을 전부 차지해 close가 항상 toast 우측 끝에 붙도록. */
+  flex: 1 1 auto;
+}
+
+.title {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--toast-fg);
+  margin: 0;
+}
+
+.description {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  /* title 대비 명확히 약하게 — fg-subtle은 라이트 L=0.68, 다크 L=0.48로 양쪽 모드에서 중간 회색 */
+  color: var(--fg-subtle);
+  margin: 0;
+}
+
+/* inverse 배경에선 fg-subtle이 "검정 배경 위 중간 회색"으로 바로 쓸 수 있지만
+   title(bg=흰)과의 대비를 더 벌리기 위해 bg를 섞어 조금 밝게. */
+.surface-inverse .description {
+  color: color-mix(in oklab, var(--fg-subtle) 60%, var(--bg) 40%);
+}
+
+/* Action slot ───────────────────────────────────────────────── */
+.action {
+  display: inline-flex;
+  /* close와 동일한 원칙 — title 첫 줄 baseline에 정렬. xs Button(24px) 중심을 title lh 중앙에. */
+  margin-top: calc((var(--lh-sm) - var(--control-h-xs)) / 2);
+}
+
+/* inverse 배경에선 action Button이 자체 color: var(--fg)로 어두운 글자가 되어 검정 배경에
+   묻힌다. action은 ghost/outline만 허용되므로 color/border를 반전해 가시성 확보. */
+.surface-inverse .action {
+  color: var(--bg);
+}
+.surface-inverse .action :global(button) {
+  color: var(--bg);
+  border-color: var(--bg-muted);
+}
+.surface-inverse .action :global(button):hover:not(:disabled) {
+  background: color-mix(in oklab, var(--bg) 12%, transparent);
+}
+
+/* Close ─────────────────────────────────────────────────────── */
+.close {
+  flex-shrink: 0;
+  color: var(--toast-fg-muted);
+  /* flex-start 정렬에서 close는 title 첫 줄 line-height 중앙에 맞춤 (Callout과 동일 패턴). */
+  margin-top: calc((var(--lh-sm) - var(--iconbtn-h-sm)) / 2);
+}
+
+/* inverse 배경에선 IconButton ghost의 color(--fg-subtle)/hover color(--fg)가
+   검정 배경에 묻힌다. 역상으로 치환해 bg-muted 글리프 + hover 시 밝아지도록. */
+.surface-inverse .close {
+  color: var(--bg-muted);
+}
+.surface-inverse .close:hover:not(:disabled) {
+  color: var(--bg);
+  background: color-mix(in oklab, var(--bg) 12%, transparent);
+}
+
+/* inverse surface에서 ghost IconButton hover 배경을 밝은 알파로 override.
+   IconButton 자체는 bg-muted를 쓰므로 inverse에선 묻혀 보이지 않도록 보정. */
+.surface-inverse .close:hover {
+  background: var(--toast-close-hover);
+  color: var(--toast-fg);
+}
+
+/* Animations ────────────────────────────────────────────────
+   Sonner/Linear 톤 — 짧은 거리 slide + fade + 미세 scale.
+   In은 ease-emphasized(테마별 커브)로 공간에 '놓이는' 느낌,
+   Out은 slide 없이 fade+scale만 짧게 — 날아가지 않고 '사라짐'. */
+
+@keyframes toast-in-right {
+  from {
+    transform: translateX(var(--space-4)) scale(0.96);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes toast-in-top {
+  from {
+    transform: translateY(calc(-1 * var(--space-4))) scale(0.96);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes toast-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.96);
+    opacity: 0;
+  }
+}
+
+/* 스와이프로 치울 때는 손가락이 민 방향 그대로 — 거리는 짧게. */
+@keyframes toast-swipe-out-right {
+  from { transform: translateX(var(--radix-toast-swipe-end-x)); }
+  to {
+    transform: translateX(calc(100% + var(--space-4)));
+    opacity: 0;
+  }
+}
+
+.placement-bottom-right .root[data-state="open"] {
+  animation: toast-in-right var(--duration-slow) var(--ease-emphasized);
+}
+
+.placement-top-center .root[data-state="open"] {
+  animation: toast-in-top var(--duration-slow) var(--ease-emphasized);
+}
+
+.placement-bottom-right .root[data-state="closed"],
+.placement-top-center .root[data-state="closed"] {
+  animation: toast-out var(--duration-base) var(--ease-in);
+}
+
+.root[data-swipe="move"] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
+}
+
+.root[data-swipe="cancel"] {
+  transform: translateX(0);
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+
+.root[data-swipe="end"] {
+  animation: toast-swipe-out-right var(--duration-base) var(--ease-out);
+}
+
+/* Reduced motion ────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .root[data-state="open"],
+  .root[data-state="closed"],
+  .root[data-swipe="end"] {
+    animation: none;
+  }
+}

package/assets/components/Toast/Toast.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import * as RadixToast from "@radix-ui/react-toast";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+
+import { Icon, type IconName } from "../Icon";
+import { IconButton } from "../IconButton";
+
+import styles from "./Toast.module.css";
+
+export type ToastTone = "neutral" | "success" | "warning" | "destructive";
+export type ToastSurface = "inverse" | "default";
+export type ToastPlacement = "bottom-right" | "top-center";
+
+export interface ToastOptions {
+  title: ReactNode;
+  description?: ReactNode;
+  tone?: ToastTone;
+  surface?: ToastSurface;
+  icon?: IconName;
+  action?: ReactNode;
+  actionAltText?: string;
+  dismissible?: boolean;
+  dismissLabel?: string;
+  duration?: number;
+}
+
+interface ToastRecord extends ToastOptions {
+  id: string;
+  open: boolean;
+}
+
+interface ToastContextValue {
+  toast: (opts: ToastOptions) => string;
+  dismiss: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const MAX_STACK = 3;
+
+const toneDefaultIcon: Record<ToastTone, IconName> = {
+  neutral: "info",
+  success: "check-circle",
+  warning: "warning-circle",
+  destructive: "warning",
+};
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
+  return ctx;
+}
+
+export interface ToastProviderProps {
+  children: ReactNode;
+  /** 전역 기본 duration (ms). 기본 4000. */
+  duration?: number;
+  /** 스왑 제스처로 닫기 임계 거리. 기본 50px. */
+  swipeThreshold?: number;
+}
+
+export function ToastProvider({
+  children,
+  duration = 4000,
+  swipeThreshold = 50,
+}: ToastProviderProps) {
+  const [items, setItems] = useState<ToastRecord[]>([]);
+  const idRef = useRef(0);
+
+  const dismiss = useCallback((id: string) => {
+    setItems((prev) => prev.map((t) => (t.id === id ? { ...t, open: false } : t)));
+  }, []);
+
+  const remove = useCallback((id: string) => {
+    setItems((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const toast = useCallback((opts: ToastOptions) => {
+    idRef.current += 1;
+    const id = String(idRef.current);
+    setItems((prev) => {
+      const next = [...prev, { ...opts, id, open: true }];
+      if (next.length > MAX_STACK) {
+        // 가장 오래된 open 토스트를 닫도록 open=false 처리 (close 애니 재사용)
+        const oldestOpenIdx = next.findIndex((t) => t.open);
+        if (oldestOpenIdx !== -1) next[oldestOpenIdx] = { ...next[oldestOpenIdx], open: false };
+      }
+      return next;
+    });
+    return id;
+  }, []);
+
+  const ctxValue = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+
+  return (
+    <ToastContext.Provider value={ctxValue}>
+      <RadixToast.Provider duration={duration} swipeThreshold={swipeThreshold}>
+        {children}
+        {items.map((t) => (
+          <Toast
+            key={t.id}
+            open={t.open}
+            onOpenChange={(open) => {
+              if (!open) {
+                setItems((prev) =>
+                  prev.map((x) => (x.id === t.id ? { ...x, open: false } : x)),
+                );
+                // Radix는 애니 종료 후 remove 호출 — 안전하게 지연
+                window.setTimeout(() => remove(t.id), 400);
+              }
+            }}
+            title={t.title}
+            description={t.description}
+            tone={t.tone}
+            surface={t.surface}
+            icon={t.icon}
+            action={t.action}
+            actionAltText={t.actionAltText}
+            dismissible={t.dismissible}
+            dismissLabel={t.dismissLabel}
+            duration={t.duration}
+          />
+        ))}
+      </RadixToast.Provider>
+    </ToastContext.Provider>
+  );
+}
+
+export interface ToastViewportProps {
+  placement?: ToastPlacement;
+  /** 접근성용 라벨 (스크린리더가 영역을 소개). i18n은 부모가 넘긴다. */
+  label?: string;
+}
+
+export function ToastViewport({
+  placement = "bottom-right",
+  label,
+}: ToastViewportProps) {
+  return (
+    <RadixToast.Viewport
+      className={[styles.viewport, styles[`placement-${placement}`]]
+        .filter(Boolean)
+        .join(" ")}
+      label={label}
+      data-placement={placement}
+    />
+  );
+}
+
+export interface ToastProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  description?: ReactNode;
+  tone?: ToastTone;
+  surface?: ToastSurface;
+  icon?: IconName;
+  action?: ReactNode;
+  actionAltText?: string;
+  dismissible?: boolean;
+  dismissLabel?: string;
+  duration?: number;
+}
+
+export const Toast = forwardRef<HTMLLIElement, ToastProps>(function Toast(
+  {
+    open,
+    onOpenChange,
+    title,
+    description,
+    tone = "neutral",
+    surface = "inverse",
+    icon,
+    action,
+    actionAltText,
+    dismissible = true,
+    dismissLabel,
+    duration,
+  },
+  ref,
+) {
+  const resolvedIcon = icon ?? toneDefaultIcon[tone];
+  const isAlert = tone === "destructive";
+
+  return (
+    <RadixToast.Root
+      ref={ref}
+      open={open}
+      onOpenChange={onOpenChange}
+      duration={duration}
+      type={isAlert ? "foreground" : "background"}
+      className={[
+        styles.root,
+        styles[`surface-${surface}`],
+        styles[`tone-${tone}`],
+      ].join(" ")}
+    >
+      {resolvedIcon && (
+        <span className={styles.icon} aria-hidden>
+          <Icon name={resolvedIcon} />
+        </span>
+      )}
+      <div className={styles.body}>
+        <RadixToast.Title className={styles.title}>{title}</RadixToast.Title>
+        {description && (
+          <RadixToast.Description className={styles.description}>
+            {description}
+          </RadixToast.Description>
+        )}
+      </div>
+      {action && actionAltText && (
+        <RadixToast.Action
+          className={styles.action}
+          altText={actionAltText}
+          asChild
+        >
+          {action}
+        </RadixToast.Action>
+      )}
+      {dismissible && (
+        <RadixToast.Close asChild>
+          <IconButton
+            className={styles.close}
+            size="sm"
+            variant="ghost"
+            icon={<Icon name="x" />}
+            aria-label={dismissLabel}
+          />
+        </RadixToast.Close>
+      )}
+    </RadixToast.Root>
+  );
+});

package/assets/components/Toast/index.ts

@@ -0,0 +1,15 @@
+export {
+  Toast,
+  ToastProvider,
+  ToastViewport,
+  useToast,
+} from "./Toast";
+export type {
+  ToastProps,
+  ToastProviderProps,
+  ToastViewportProps,
+  ToastOptions,
+  ToastTone,
+  ToastSurface,
+  ToastPlacement,
+} from "./Toast";