@3w-witim/ui 0.1.0

package/README.md

@@ -0,0 +1,23 @@
+# @3w-witim/ui — WITIM 디자인시스템 컴포넌트 라이브러리
+
+witim 시맨틱 토큰(`@workb/design-system`) 기반 프레젠테이션 컴포넌트 + Storybook.
+
+## 실행
+
+- Storybook 개발: `pnpm storybook:ui` (포트 6009)
+- 정적 빌드: `pnpm storybook:build:ui`
+
+## 작성 규칙 (디자이너/Claude)
+
+- 토큰: [`docs/design-system/token-cheatsheet.md`](../../docs/design-system/token-cheatsheet.md)
+- 스토리: [`docs/design-system/storybook-authoring-guide.md`](../../docs/design-system/storybook-authoring-guide.md)
+- 정본 예시: `src/button.tsx` + `src/button.stories.tsx`
+
+## 배선
+
+- 토큰 유틸 정의: `@workb/design-system/tokens/tailwind.tokens.cjs` (Tailwind preset)
+- CSS 변수(라이트/다크): `src/styles.css` → `@workb/design-system/tokens/tokens.css`
+
+## 향후
+
+- npm 공개 배포(W4), 데스크탑/웹이 이 패키지를 소비 예정.

package/dist/calendar/index.css

@@ -0,0 +1,37 @@
+/* ../design-system/tokens/calendar-label-tokens.css */
+:root,
+[data-theme=light] {
+  --color-witim-amber-solid: #f59e0b;
+  --color-witim-amber-light-bg: #fef3da;
+  --color-witim-amber-light-tx: #8a5805;
+  --color-witim-amber-dark-bg: #6e4a0e;
+  --color-witim-amber-dark-tx: #f7cf86;
+  --color-witim-emerald-solid: #10b981;
+  --color-witim-emerald-light-bg: #e2f6ef;
+  --color-witim-emerald-light-tx: #07795a;
+  --color-witim-emerald-dark-bg: #11533f;
+  --color-witim-emerald-dark-tx: #9de7cd;
+  --cal-vacation-solid: var(--color-witim-amber-solid);
+  --cal-vacation-bg: var(--color-witim-amber-light-bg);
+  --cal-vacation-text: var(--color-witim-amber-light-tx);
+  --cal-project-solid: var(--color-witim-emerald-solid);
+  --cal-project-bg: var(--color-witim-emerald-light-bg);
+  --cal-project-text: var(--color-witim-emerald-light-tx);
+  --cal-mine-solid: #455fff;
+  --cal-mine-bg: #ecefff;
+  --cal-mine-text: #3142c9;
+  --cal-holiday-solid: #ef4444;
+  --cal-holiday-bg: #fdecec;
+  --cal-holiday-text: #c0392b;
+}
+[data-theme=dark] {
+  --cal-vacation-bg: var(--color-witim-amber-dark-bg);
+  --cal-vacation-text: var(--color-witim-amber-dark-tx);
+  --cal-project-bg: var(--color-witim-emerald-dark-bg);
+  --cal-project-text: var(--color-witim-emerald-dark-tx);
+  --cal-mine-bg: #33429e;
+  --cal-mine-text: #c5cdff;
+  --cal-holiday-bg: #7a2e2e;
+  --cal-holiday-text: #f4b4b4;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/calendar/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../design-system/tokens/calendar-label-tokens.css"],"sourcesContent":["/* =============================================================================\n * WITIM · 캘린더 라벨 컬러 토큰  (F안 확정 · proposal3 렌더링과 동일 · 2026-06-25)\n * -----------------------------------------------------------------------------\n *  ⛔ CALENDAR-ONLY — 메인 UI 절대 금지\n *  amber(휴가) · emerald(프로젝트) 색은 오직 캘린더 라벨에서만 사용.\n *  버튼 · 배지 · 칩 · 아이콘 · 링크 · 텍스트 등 메인 UI 어디에도 쓰지 않음.\n *  메인 UI 색은 brand(blue) · danger(red) · gray 만 사용.\n *  (위반 시 PreToolUse 훅 'calendar-color-guard' 가 편집을 차단.)\n * -----------------------------------------------------------------------------\n *  Light = 연한 틴트 배경 + 진한 텍스트 / Dark = 솔리드 채움 배경 + 밝은 텍스트\n *\n *            Solid·dot   Light BG   Light Text   Dark BG    Dark Text\n *  내 일정    #455FFF     #ECEFFF    #3142C9      #33429E    #C5CDFF   (blue · 시스템)\n *  휴가       #F59E0B     #FEF3DA    #8A5805      #6E4A0E    #F7CF86   (amber · 전용)\n *  프로젝트   #10B981     #E2F6EF    #07795A      #11533F    #9DE7CD   (emerald · 전용)\n *  공휴일     #EF4444     #FDECEC    #C0392B      #7A2E2E    #F4B4B4   (red · 시스템)\n * ============================================================================= */\n\n:root,\n[data-theme=\"light\"] {\n  /* ---- primitive · CALENDAR-ONLY ---- */\n  /* Amber (휴가) */\n  --color-witim-amber-solid: #f59e0b; /* anchor / dot / 솔리드        */\n  --color-witim-amber-light-bg: #fef3da; /* light 라벨 배경              */\n  --color-witim-amber-light-tx: #8a5805; /* light 라벨 텍스트            */\n  --color-witim-amber-dark-bg: #6e4a0e; /* dark 라벨 배경 (솔리드 채움) */\n  --color-witim-amber-dark-tx: #f7cf86; /* dark 라벨 텍스트             */\n\n  /* Emerald (프로젝트) */\n  --color-witim-emerald-solid: #10b981;\n  --color-witim-emerald-light-bg: #e2f6ef;\n  --color-witim-emerald-light-tx: #07795a;\n  --color-witim-emerald-dark-bg: #11533f;\n  --color-witim-emerald-dark-tx: #9de7cd;\n\n  /* ---- semantic · CALENDAR-ONLY (light = default) ---- */\n  --cal-vacation-solid: var(--color-witim-amber-solid);\n  --cal-vacation-bg: var(--color-witim-amber-light-bg);\n  --cal-vacation-text: var(--color-witim-amber-light-tx);\n\n  --cal-project-solid: var(--color-witim-emerald-solid);\n  --cal-project-bg: var(--color-witim-emerald-light-bg);\n  --cal-project-text: var(--color-witim-emerald-light-tx);\n\n  /* 내 일정/공휴일 = 전용 토큰 신설 없이 시스템 색 재사용 */\n  --cal-mine-solid: #455fff;\n  --cal-mine-bg: #ecefff;\n  --cal-mine-text: #3142c9;\n  --cal-holiday-solid: #ef4444;\n  --cal-holiday-bg: #fdecec;\n  --cal-holiday-text: #c0392b;\n}\n\n/* ---- dark theme overrides · CALENDAR-ONLY ---- */\n[data-theme=\"dark\"] {\n  --cal-vacation-bg: var(--color-witim-amber-dark-bg); /* #6E4A0E 솔리드 */\n  --cal-vacation-text: var(--color-witim-amber-dark-tx); /* #F7CF86       */\n  --cal-project-bg: var(--color-witim-emerald-dark-bg); /* #11533F 솔리드 */\n  --cal-project-text: var(--color-witim-emerald-dark-tx); /* #9DE7CD       */\n\n  --cal-mine-bg: #33429e;\n  --cal-mine-text: #c5cdff;\n  --cal-holiday-bg: #7a2e2e;\n  --cal-holiday-text: #f4b4b4;\n}\n\n/* ---- 사용 예시 (캘린더 라벨에서만) ----\n *  .cal-label--vacation { background: var(--cal-vacation-bg); color: var(--cal-vacation-text); }\n *  .cal-label--project  { background: var(--cal-project-bg);  color: var(--cal-project-text);  }\n *  .cal-dot--vacation   { background: var(--cal-vacation-solid); }  // #F59E0B\n *  .cal-dot--project    { background: var(--cal-project-solid);  }  // #10B981\n */\n"],"mappings":";AAkBA;AACA,CAAC;AAGC,6BAA2B;AAC3B,gCAA8B;AAC9B,gCAA8B;AAC9B,+BAA6B;AAC7B,+BAA6B;AAG7B,+BAA6B;AAC7B,kCAAgC;AAChC,kCAAgC;AAChC,iCAA+B;AAC/B,iCAA+B;AAG/B,wBAAsB,IAAI;AAC1B,qBAAmB,IAAI;AACvB,uBAAqB,IAAI;AAEzB,uBAAqB,IAAI;AACzB,oBAAkB,IAAI;AACtB,sBAAoB,IAAI;AAGxB,oBAAkB;AAClB,iBAAe;AACf,mBAAiB;AACjB,uBAAqB;AACrB,oBAAkB;AAClB,sBAAoB;AACtB;AAGA,CAAC;AACC,qBAAmB,IAAI;AACvB,uBAAqB,IAAI;AACzB,oBAAkB,IAAI;AACtB,sBAAoB,IAAI;AAExB,iBAAe;AACf,mBAAiB;AACjB,oBAAkB;AAClB,sBAAoB;AACtB;","names":[]}

package/dist/calendar/index.d.mts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+type CalendarLabelType = "mine" | "vacation" | "project" | "holiday";
+/** 라벨 타입 → --cal-* 토큰 클래스 맵 (색은 전부 var(--cal-*) 참조, 하드코딩 없음). */
+declare const CALENDAR_LABELS: Record<CalendarLabelType, {
+    name: string;
+    chip: string;
+    dot: string;
+}>;
+interface CalendarEventChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** 라벨 타입 (색은 CALENDAR-ONLY 토큰에서 자동 적용, 다크 전환 포함) */
+    type: CalendarLabelType;
+}
+/** 캘린더 이벤트 라벨 칩. 색은 --cal-* 예외 토큰으로 캡슐화됨. */
+declare const CalendarEventChip: React.ForwardRefExoticComponent<CalendarEventChipProps & React.RefAttributes<HTMLSpanElement>>;
+interface CalendarLabelLegendProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/** 라벨 타입 범례 (dot + 이름). */
+declare const CalendarLabelLegend: React.ForwardRefExoticComponent<CalendarLabelLegendProps & React.RefAttributes<HTMLDivElement>>;
+
+/** 캘린더 한 칸에 들어가는 이벤트 하나 (라벨 텍스트 + 예외색 타입). */
+type CalendarEvent = {
+    label: string;
+    type: CalendarLabelType;
+};
+/** 캘린더 한 칸(날짜) 데이터. */
+type CalendarDayData = {
+    /** 날짜 숫자 */
+    day: number;
+    /** 해당 날짜의 이벤트 라벨들 */
+    events?: CalendarEvent[];
+    /** 당월 외 날짜(흐리게 표시) */
+    muted?: boolean;
+};
+interface CalendarDayCellProps extends React.HTMLAttributes<HTMLDivElement> {
+    day: number;
+    events?: CalendarEvent[];
+    muted?: boolean;
+    /** 최대 표시 이벤트 수. 초과분은 "+N 더보기"로 요약. 기본 3 */
+    maxVisible?: number;
+    /** "더보기" 클릭 콜백(선택). 넘겨진 인자는 숨겨진 이벤트 배열. */
+    onShowMore?: (hidden: CalendarEvent[], e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const CalendarDayCell: React.ForwardRefExoticComponent<CalendarDayCellProps & React.RefAttributes<HTMLDivElement>>;
+interface CalendarMonthGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 표시할 날짜 칸들 */
+    days: CalendarDayData[];
+    /** 그리드 열 수 (기본 7 — 주 단위) */
+    columns?: number;
+    /** 상단 라벨 범례 표시 여부 */
+    showLegend?: boolean;
+}
+declare const CalendarMonthGrid: React.ForwardRefExoticComponent<CalendarMonthGridProps & React.RefAttributes<HTMLDivElement>>;
+
+export { CALENDAR_LABELS, CalendarDayCell, type CalendarDayCellProps, type CalendarDayData, type CalendarEvent, CalendarEventChip, type CalendarEventChipProps, CalendarLabelLegend, type CalendarLabelLegendProps, type CalendarLabelType, CalendarMonthGrid, type CalendarMonthGridProps };

package/dist/calendar/index.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+type CalendarLabelType = "mine" | "vacation" | "project" | "holiday";
+/** 라벨 타입 → --cal-* 토큰 클래스 맵 (색은 전부 var(--cal-*) 참조, 하드코딩 없음). */
+declare const CALENDAR_LABELS: Record<CalendarLabelType, {
+    name: string;
+    chip: string;
+    dot: string;
+}>;
+interface CalendarEventChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** 라벨 타입 (색은 CALENDAR-ONLY 토큰에서 자동 적용, 다크 전환 포함) */
+    type: CalendarLabelType;
+}
+/** 캘린더 이벤트 라벨 칩. 색은 --cal-* 예외 토큰으로 캡슐화됨. */
+declare const CalendarEventChip: React.ForwardRefExoticComponent<CalendarEventChipProps & React.RefAttributes<HTMLSpanElement>>;
+interface CalendarLabelLegendProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/** 라벨 타입 범례 (dot + 이름). */
+declare const CalendarLabelLegend: React.ForwardRefExoticComponent<CalendarLabelLegendProps & React.RefAttributes<HTMLDivElement>>;
+
+/** 캘린더 한 칸에 들어가는 이벤트 하나 (라벨 텍스트 + 예외색 타입). */
+type CalendarEvent = {
+    label: string;
+    type: CalendarLabelType;
+};
+/** 캘린더 한 칸(날짜) 데이터. */
+type CalendarDayData = {
+    /** 날짜 숫자 */
+    day: number;
+    /** 해당 날짜의 이벤트 라벨들 */
+    events?: CalendarEvent[];
+    /** 당월 외 날짜(흐리게 표시) */
+    muted?: boolean;
+};
+interface CalendarDayCellProps extends React.HTMLAttributes<HTMLDivElement> {
+    day: number;
+    events?: CalendarEvent[];
+    muted?: boolean;
+    /** 최대 표시 이벤트 수. 초과분은 "+N 더보기"로 요약. 기본 3 */
+    maxVisible?: number;
+    /** "더보기" 클릭 콜백(선택). 넘겨진 인자는 숨겨진 이벤트 배열. */
+    onShowMore?: (hidden: CalendarEvent[], e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const CalendarDayCell: React.ForwardRefExoticComponent<CalendarDayCellProps & React.RefAttributes<HTMLDivElement>>;
+interface CalendarMonthGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 표시할 날짜 칸들 */
+    days: CalendarDayData[];
+    /** 그리드 열 수 (기본 7 — 주 단위) */
+    columns?: number;
+    /** 상단 라벨 범례 표시 여부 */
+    showLegend?: boolean;
+}
+declare const CalendarMonthGrid: React.ForwardRefExoticComponent<CalendarMonthGridProps & React.RefAttributes<HTMLDivElement>>;
+
+export { CALENDAR_LABELS, CalendarDayCell, type CalendarDayCellProps, type CalendarDayData, type CalendarEvent, CalendarEventChip, type CalendarEventChipProps, CalendarLabelLegend, type CalendarLabelLegendProps, type CalendarLabelType, CalendarMonthGrid, type CalendarMonthGridProps };

package/dist/calendar/index.js

@@ -0,0 +1,169 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/calendar/calendar-label.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var CALENDAR_LABELS = {
+  mine: {
+    name: "\uB0B4 \uC77C\uC815",
+    chip: "bg-[var(--cal-mine-bg)] text-[var(--cal-mine-text)]",
+    dot: "bg-[var(--cal-mine-solid)]"
+  },
+  vacation: {
+    name: "\uD734\uAC00",
+    chip: "bg-[var(--cal-vacation-bg)] text-[var(--cal-vacation-text)]",
+    dot: "bg-[var(--cal-vacation-solid)]"
+  },
+  project: {
+    name: "\uD504\uB85C\uC81D\uD2B8",
+    chip: "bg-[var(--cal-project-bg)] text-[var(--cal-project-text)]",
+    dot: "bg-[var(--cal-project-solid)]"
+  },
+  holiday: {
+    name: "\uACF5\uD734\uC77C",
+    chip: "bg-[var(--cal-holiday-bg)] text-[var(--cal-holiday-text)]",
+    dot: "bg-[var(--cal-holiday-solid)]"
+  }
+};
+var CalendarEventChip = React__namespace.forwardRef(({ type, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    ref,
+    className: cn(
+      "block truncate rounded px-2 py-1 text-xs font-semibold",
+      CALENDAR_LABELS[type].chip,
+      className
+    ),
+    ...props,
+    children: children ?? CALENDAR_LABELS[type].name
+  }
+));
+CalendarEventChip.displayName = "CalendarEventChip";
+var CalendarLabelLegend = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-wrap gap-x-3 gap-y-1.5 text-xs", className),
+    ...props,
+    children: Object.keys(CALENDAR_LABELS).map((k) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 text-text-default", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn("h-2.5 w-2.5 rounded-full", CALENDAR_LABELS[k].dot)
+        }
+      ),
+      CALENDAR_LABELS[k].name
+    ] }, k))
+  }
+));
+CalendarLabelLegend.displayName = "CalendarLabelLegend";
+var CalendarDayCell = React__namespace.forwardRef(
+  ({
+    day,
+    events = [],
+    muted = false,
+    maxVisible = 3,
+    onShowMore,
+    className,
+    ...props
+  }, ref) => {
+    const visible = events.slice(0, maxVisible);
+    const hidden = events.slice(maxVisible);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "min-h-[70px] rounded-lg border border-border-subtle bg-surface-default p-2",
+          muted && "opacity-50",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1.5 text-[11.5px] font-bold text-text-default", children: day }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            visible.map((e, i) => /* @__PURE__ */ jsxRuntime.jsx(CalendarEventChip, { type: e.type, title: e.label, children: e.label }, i)),
+            hidden.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => onShowMore?.(hidden, e),
+                className: "block w-full truncate rounded px-2 py-0.5 text-left text-xs font-medium text-text-subtle hover:bg-surface-hover",
+                children: [
+                  "+",
+                  hidden.length,
+                  "\uAC1C \uB354\uBCF4\uAE30"
+                ]
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+CalendarDayCell.displayName = "CalendarDayCell";
+var CalendarMonthGrid = React__namespace.forwardRef(
+  ({ days, columns = 7, showLegend = true, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn("rounded-lg bg-bg-base p-3.5", className),
+      ...props,
+      children: [
+        showLegend ? /* @__PURE__ */ jsxRuntime.jsx(CalendarLabelLegend, { className: "mb-3" }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "grid gap-2",
+            style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+            children: days.map((d) => /* @__PURE__ */ jsxRuntime.jsx(
+              CalendarDayCell,
+              {
+                day: d.day,
+                events: d.events,
+                muted: d.muted
+              },
+              d.day
+            ))
+          }
+        )
+      ]
+    }
+  )
+);
+CalendarMonthGrid.displayName = "CalendarMonthGrid";
+
+exports.CALENDAR_LABELS = CALENDAR_LABELS;
+exports.CalendarDayCell = CalendarDayCell;
+exports.CalendarEventChip = CalendarEventChip;
+exports.CalendarLabelLegend = CalendarLabelLegend;
+exports.CalendarMonthGrid = CalendarMonthGrid;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils.ts","../../src/calendar/calendar-label.tsx","../../src/calendar/calendar-grid.tsx"],"names":["twMerge","clsx","React","jsx","jsxs","React2"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Class name utility (clsx + tailwind-merge)\n */\n\nimport { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\";\n\nimport { cn } from \"../utils\";\n// ⛔ CALENDAR-ONLY 예외색(amber 휴가 / emerald 프로젝트)은 이 토큰 파일에만 존재.\n// 이 컴포넌트를 통해서만 소비 → 메인 UI로 색이 새지 않도록 @3w-witim/ui/calendar 로 격리.\nimport \"../../../design-system/tokens/calendar-label-tokens.css\";\n\nexport type CalendarLabelType = \"mine\" | \"vacation\" | \"project\" | \"holiday\";\n\n/** 라벨 타입 → --cal-* 토큰 클래스 맵 (색은 전부 var(--cal-*) 참조, 하드코딩 없음). */\nexport const CALENDAR_LABELS: Record<\n  CalendarLabelType,\n  { name: string; chip: string; dot: string }\n> = {\n  mine: {\n    name: \"내 일정\",\n    chip: \"bg-[var(--cal-mine-bg)] text-[var(--cal-mine-text)]\",\n    dot: \"bg-[var(--cal-mine-solid)]\",\n  },\n  vacation: {\n    name: \"휴가\",\n    chip: \"bg-[var(--cal-vacation-bg)] text-[var(--cal-vacation-text)]\",\n    dot: \"bg-[var(--cal-vacation-solid)]\",\n  },\n  project: {\n    name: \"프로젝트\",\n    chip: \"bg-[var(--cal-project-bg)] text-[var(--cal-project-text)]\",\n    dot: \"bg-[var(--cal-project-solid)]\",\n  },\n  holiday: {\n    name: \"공휴일\",\n    chip: \"bg-[var(--cal-holiday-bg)] text-[var(--cal-holiday-text)]\",\n    dot: \"bg-[var(--cal-holiday-solid)]\",\n  },\n};\n\nexport interface CalendarEventChipProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** 라벨 타입 (색은 CALENDAR-ONLY 토큰에서 자동 적용, 다크 전환 포함) */\n  type: CalendarLabelType;\n}\n\n/** 캘린더 이벤트 라벨 칩. 색은 --cal-* 예외 토큰으로 캡슐화됨. */\nexport const CalendarEventChip = React.forwardRef<\n  HTMLSpanElement,\n  CalendarEventChipProps\n>(({ type, className, children, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn(\n      \"block truncate rounded px-2 py-1 text-xs font-semibold\",\n      CALENDAR_LABELS[type].chip,\n      className,\n    )}\n    {...props}\n  >\n    {children ?? CALENDAR_LABELS[type].name}\n  </span>\n));\nCalendarEventChip.displayName = \"CalendarEventChip\";\n\nexport interface CalendarLabelLegendProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** 라벨 타입 범례 (dot + 이름). */\nexport const CalendarLabelLegend = React.forwardRef<\n  HTMLDivElement,\n  CalendarLabelLegendProps\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-wrap gap-x-3 gap-y-1.5 text-xs\", className)}\n    {...props}\n  >\n    {(Object.keys(CALENDAR_LABELS) as CalendarLabelType[]).map((k) => (\n      <span key={k} className=\"flex items-center gap-1.5 text-text-default\">\n        <span\n          className={cn(\"h-2.5 w-2.5 rounded-full\", CALENDAR_LABELS[k].dot)}\n        />\n        {CALENDAR_LABELS[k].name}\n      </span>\n    ))}\n  </div>\n));\nCalendarLabelLegend.displayName = \"CalendarLabelLegend\";\n","import * as React from \"react\";\n\nimport { cn } from \"../utils\";\nimport {\n  CalendarEventChip,\n  CalendarLabelLegend,\n  type CalendarLabelType,\n} from \"./calendar-label\";\n\n/** 캘린더 한 칸에 들어가는 이벤트 하나 (라벨 텍스트 + 예외색 타입). */\nexport type CalendarEvent = {\n  label: string;\n  type: CalendarLabelType;\n};\n\n/** 캘린더 한 칸(날짜) 데이터. */\nexport type CalendarDayData = {\n  /** 날짜 숫자 */\n  day: number;\n  /** 해당 날짜의 이벤트 라벨들 */\n  events?: CalendarEvent[];\n  /** 당월 외 날짜(흐리게 표시) */\n  muted?: boolean;\n};\n\n/* -------------------------------------------------------------------------- */\n/* CalendarDayCell — 날짜 한 칸 (숫자 + 이벤트 칩들)                            */\n/* -------------------------------------------------------------------------- */\n\nexport interface CalendarDayCellProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  day: number;\n  events?: CalendarEvent[];\n  muted?: boolean;\n  /** 최대 표시 이벤트 수. 초과분은 \"+N 더보기\"로 요약. 기본 3 */\n  maxVisible?: number;\n  /** \"더보기\" 클릭 콜백(선택). 넘겨진 인자는 숨겨진 이벤트 배열. */\n  onShowMore?: (\n    hidden: CalendarEvent[],\n    e: React.MouseEvent<HTMLButtonElement>,\n  ) => void;\n}\n\nexport const CalendarDayCell = React.forwardRef<\n  HTMLDivElement,\n  CalendarDayCellProps\n>(\n  (\n    {\n      day,\n      events = [],\n      muted = false,\n      maxVisible = 3,\n      onShowMore,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    // 최대 maxVisible(기본 3)개만 표시, 초과분은 \"+N 더보기\"로 요약.\n    const visible = events.slice(0, maxVisible);\n    const hidden = events.slice(maxVisible);\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"min-h-[70px] rounded-lg border border-border-subtle bg-surface-default p-2\",\n          muted && \"opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"mb-1.5 text-[11.5px] font-bold text-text-default\">\n          {day}\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          {visible.map((e, i) => (\n            <CalendarEventChip key={i} type={e.type} title={e.label}>\n              {e.label}\n            </CalendarEventChip>\n          ))}\n          {hidden.length > 0 ? (\n            <button\n              type=\"button\"\n              onClick={(e) => onShowMore?.(hidden, e)}\n              className=\"block w-full truncate rounded px-2 py-0.5 text-left text-xs font-medium text-text-subtle hover:bg-surface-hover\"\n            >\n              +{hidden.length}개 더보기\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\nCalendarDayCell.displayName = \"CalendarDayCell\";\n\n/* -------------------------------------------------------------------------- */\n/* CalendarMonthGrid — 범례 + 날짜 칸 그리드                                    */\n/* -------------------------------------------------------------------------- */\n\nexport interface CalendarMonthGridProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** 표시할 날짜 칸들 */\n  days: CalendarDayData[];\n  /** 그리드 열 수 (기본 7 — 주 단위) */\n  columns?: number;\n  /** 상단 라벨 범례 표시 여부 */\n  showLegend?: boolean;\n}\n\nexport const CalendarMonthGrid = React.forwardRef<\n  HTMLDivElement,\n  CalendarMonthGridProps\n>(\n  (\n    { days, columns = 7, showLegend = true, className, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\"rounded-lg bg-bg-base p-3.5\", className)}\n      {...props}\n    >\n      {showLegend ? <CalendarLabelLegend className=\"mb-3\" /> : null}\n      <div\n        className=\"grid gap-2\"\n        style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}\n      >\n        {days.map((d) => (\n          <CalendarDayCell\n            key={d.day}\n            day={d.day}\n            events={d.events}\n            muted={d.muted}\n          />\n        ))}\n      </div>\n    </div>\n  ),\n);\nCalendarMonthGrid.displayName = \"CalendarMonthGrid\";\n"]}

package/dist/calendar/index.mjs

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/calendar/calendar-label.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var CALENDAR_LABELS = {
+  mine: {
+    name: "\uB0B4 \uC77C\uC815",
+    chip: "bg-[var(--cal-mine-bg)] text-[var(--cal-mine-text)]",
+    dot: "bg-[var(--cal-mine-solid)]"
+  },
+  vacation: {
+    name: "\uD734\uAC00",
+    chip: "bg-[var(--cal-vacation-bg)] text-[var(--cal-vacation-text)]",
+    dot: "bg-[var(--cal-vacation-solid)]"
+  },
+  project: {
+    name: "\uD504\uB85C\uC81D\uD2B8",
+    chip: "bg-[var(--cal-project-bg)] text-[var(--cal-project-text)]",
+    dot: "bg-[var(--cal-project-solid)]"
+  },
+  holiday: {
+    name: "\uACF5\uD734\uC77C",
+    chip: "bg-[var(--cal-holiday-bg)] text-[var(--cal-holiday-text)]",
+    dot: "bg-[var(--cal-holiday-solid)]"
+  }
+};
+var CalendarEventChip = React.forwardRef(({ type, className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ref,
+    className: cn(
+      "block truncate rounded px-2 py-1 text-xs font-semibold",
+      CALENDAR_LABELS[type].chip,
+      className
+    ),
+    ...props,
+    children: children ?? CALENDAR_LABELS[type].name
+  }
+));
+CalendarEventChip.displayName = "CalendarEventChip";
+var CalendarLabelLegend = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-wrap gap-x-3 gap-y-1.5 text-xs", className),
+    ...props,
+    children: Object.keys(CALENDAR_LABELS).map((k) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-text-default", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("h-2.5 w-2.5 rounded-full", CALENDAR_LABELS[k].dot)
+        }
+      ),
+      CALENDAR_LABELS[k].name
+    ] }, k))
+  }
+));
+CalendarLabelLegend.displayName = "CalendarLabelLegend";
+var CalendarDayCell = React.forwardRef(
+  ({
+    day,
+    events = [],
+    muted = false,
+    maxVisible = 3,
+    onShowMore,
+    className,
+    ...props
+  }, ref) => {
+    const visible = events.slice(0, maxVisible);
+    const hidden = events.slice(maxVisible);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "min-h-[70px] rounded-lg border border-border-subtle bg-surface-default p-2",
+          muted && "opacity-50",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[11.5px] font-bold text-text-default", children: day }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            visible.map((e, i) => /* @__PURE__ */ jsx(CalendarEventChip, { type: e.type, title: e.label, children: e.label }, i)),
+            hidden.length > 0 ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => onShowMore?.(hidden, e),
+                className: "block w-full truncate rounded px-2 py-0.5 text-left text-xs font-medium text-text-subtle hover:bg-surface-hover",
+                children: [
+                  "+",
+                  hidden.length,
+                  "\uAC1C \uB354\uBCF4\uAE30"
+                ]
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+CalendarDayCell.displayName = "CalendarDayCell";
+var CalendarMonthGrid = React.forwardRef(
+  ({ days, columns = 7, showLegend = true, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("rounded-lg bg-bg-base p-3.5", className),
+      ...props,
+      children: [
+        showLegend ? /* @__PURE__ */ jsx(CalendarLabelLegend, { className: "mb-3" }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid gap-2",
+            style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+            children: days.map((d) => /* @__PURE__ */ jsx(
+              CalendarDayCell,
+              {
+                day: d.day,
+                events: d.events,
+                muted: d.muted
+              },
+              d.day
+            ))
+          }
+        )
+      ]
+    }
+  )
+);
+CalendarMonthGrid.displayName = "CalendarMonthGrid";
+
+export { CALENDAR_LABELS, CalendarDayCell, CalendarEventChip, CalendarLabelLegend, CalendarMonthGrid };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/calendar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils.ts","../../src/calendar/calendar-label.tsx","../../src/calendar/calendar-grid.tsx"],"names":["React2","jsxs","jsx"],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Class name utility (clsx + tailwind-merge)\n */\n\nimport { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\";\n\nimport { cn } from \"../utils\";\n// ⛔ CALENDAR-ONLY 예외색(amber 휴가 / emerald 프로젝트)은 이 토큰 파일에만 존재.\n// 이 컴포넌트를 통해서만 소비 → 메인 UI로 색이 새지 않도록 @3w-witim/ui/calendar 로 격리.\nimport \"../../../design-system/tokens/calendar-label-tokens.css\";\n\nexport type CalendarLabelType = \"mine\" | \"vacation\" | \"project\" | \"holiday\";\n\n/** 라벨 타입 → --cal-* 토큰 클래스 맵 (색은 전부 var(--cal-*) 참조, 하드코딩 없음). */\nexport const CALENDAR_LABELS: Record<\n  CalendarLabelType,\n  { name: string; chip: string; dot: string }\n> = {\n  mine: {\n    name: \"내 일정\",\n    chip: \"bg-[var(--cal-mine-bg)] text-[var(--cal-mine-text)]\",\n    dot: \"bg-[var(--cal-mine-solid)]\",\n  },\n  vacation: {\n    name: \"휴가\",\n    chip: \"bg-[var(--cal-vacation-bg)] text-[var(--cal-vacation-text)]\",\n    dot: \"bg-[var(--cal-vacation-solid)]\",\n  },\n  project: {\n    name: \"프로젝트\",\n    chip: \"bg-[var(--cal-project-bg)] text-[var(--cal-project-text)]\",\n    dot: \"bg-[var(--cal-project-solid)]\",\n  },\n  holiday: {\n    name: \"공휴일\",\n    chip: \"bg-[var(--cal-holiday-bg)] text-[var(--cal-holiday-text)]\",\n    dot: \"bg-[var(--cal-holiday-solid)]\",\n  },\n};\n\nexport interface CalendarEventChipProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** 라벨 타입 (색은 CALENDAR-ONLY 토큰에서 자동 적용, 다크 전환 포함) */\n  type: CalendarLabelType;\n}\n\n/** 캘린더 이벤트 라벨 칩. 색은 --cal-* 예외 토큰으로 캡슐화됨. */\nexport const CalendarEventChip = React.forwardRef<\n  HTMLSpanElement,\n  CalendarEventChipProps\n>(({ type, className, children, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn(\n      \"block truncate rounded px-2 py-1 text-xs font-semibold\",\n      CALENDAR_LABELS[type].chip,\n      className,\n    )}\n    {...props}\n  >\n    {children ?? CALENDAR_LABELS[type].name}\n  </span>\n));\nCalendarEventChip.displayName = \"CalendarEventChip\";\n\nexport interface CalendarLabelLegendProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** 라벨 타입 범례 (dot + 이름). */\nexport const CalendarLabelLegend = React.forwardRef<\n  HTMLDivElement,\n  CalendarLabelLegendProps\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-wrap gap-x-3 gap-y-1.5 text-xs\", className)}\n    {...props}\n  >\n    {(Object.keys(CALENDAR_LABELS) as CalendarLabelType[]).map((k) => (\n      <span key={k} className=\"flex items-center gap-1.5 text-text-default\">\n        <span\n          className={cn(\"h-2.5 w-2.5 rounded-full\", CALENDAR_LABELS[k].dot)}\n        />\n        {CALENDAR_LABELS[k].name}\n      </span>\n    ))}\n  </div>\n));\nCalendarLabelLegend.displayName = \"CalendarLabelLegend\";\n","import * as React from \"react\";\n\nimport { cn } from \"../utils\";\nimport {\n  CalendarEventChip,\n  CalendarLabelLegend,\n  type CalendarLabelType,\n} from \"./calendar-label\";\n\n/** 캘린더 한 칸에 들어가는 이벤트 하나 (라벨 텍스트 + 예외색 타입). */\nexport type CalendarEvent = {\n  label: string;\n  type: CalendarLabelType;\n};\n\n/** 캘린더 한 칸(날짜) 데이터. */\nexport type CalendarDayData = {\n  /** 날짜 숫자 */\n  day: number;\n  /** 해당 날짜의 이벤트 라벨들 */\n  events?: CalendarEvent[];\n  /** 당월 외 날짜(흐리게 표시) */\n  muted?: boolean;\n};\n\n/* -------------------------------------------------------------------------- */\n/* CalendarDayCell — 날짜 한 칸 (숫자 + 이벤트 칩들)                            */\n/* -------------------------------------------------------------------------- */\n\nexport interface CalendarDayCellProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  day: number;\n  events?: CalendarEvent[];\n  muted?: boolean;\n  /** 최대 표시 이벤트 수. 초과분은 \"+N 더보기\"로 요약. 기본 3 */\n  maxVisible?: number;\n  /** \"더보기\" 클릭 콜백(선택). 넘겨진 인자는 숨겨진 이벤트 배열. */\n  onShowMore?: (\n    hidden: CalendarEvent[],\n    e: React.MouseEvent<HTMLButtonElement>,\n  ) => void;\n}\n\nexport const CalendarDayCell = React.forwardRef<\n  HTMLDivElement,\n  CalendarDayCellProps\n>(\n  (\n    {\n      day,\n      events = [],\n      muted = false,\n      maxVisible = 3,\n      onShowMore,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    // 최대 maxVisible(기본 3)개만 표시, 초과분은 \"+N 더보기\"로 요약.\n    const visible = events.slice(0, maxVisible);\n    const hidden = events.slice(maxVisible);\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"min-h-[70px] rounded-lg border border-border-subtle bg-surface-default p-2\",\n          muted && \"opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"mb-1.5 text-[11.5px] font-bold text-text-default\">\n          {day}\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          {visible.map((e, i) => (\n            <CalendarEventChip key={i} type={e.type} title={e.label}>\n              {e.label}\n            </CalendarEventChip>\n          ))}\n          {hidden.length > 0 ? (\n            <button\n              type=\"button\"\n              onClick={(e) => onShowMore?.(hidden, e)}\n              className=\"block w-full truncate rounded px-2 py-0.5 text-left text-xs font-medium text-text-subtle hover:bg-surface-hover\"\n            >\n              +{hidden.length}개 더보기\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\nCalendarDayCell.displayName = \"CalendarDayCell\";\n\n/* -------------------------------------------------------------------------- */\n/* CalendarMonthGrid — 범례 + 날짜 칸 그리드                                    */\n/* -------------------------------------------------------------------------- */\n\nexport interface CalendarMonthGridProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** 표시할 날짜 칸들 */\n  days: CalendarDayData[];\n  /** 그리드 열 수 (기본 7 — 주 단위) */\n  columns?: number;\n  /** 상단 라벨 범례 표시 여부 */\n  showLegend?: boolean;\n}\n\nexport const CalendarMonthGrid = React.forwardRef<\n  HTMLDivElement,\n  CalendarMonthGridProps\n>(\n  (\n    { days, columns = 7, showLegend = true, className, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\"rounded-lg bg-bg-base p-3.5\", className)}\n      {...props}\n    >\n      {showLegend ? <CalendarLabelLegend className=\"mb-3\" /> : null}\n      <div\n        className=\"grid gap-2\"\n        style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}\n      >\n        {days.map((d) => (\n          <CalendarDayCell\n            key={d.day}\n            day={d.day}\n            events={d.events}\n            muted={d.muted}\n          />\n        ))}\n      </div>\n    </div>\n  ),\n);\nCalendarMonthGrid.displayName = \"CalendarMonthGrid\";\n"]}