@pylerai/design-system 2.2.1 → 2.3.1-rc.0

package/README.md

@@ -284,7 +284,7 @@ design-system/
 ├── .github/workflows/
 │   ├── pr-checks.yml               # PR 검증 (tokens → lint → tsc → test → build)
 │   ├── deploy-github-pages.yml     # Storybook 배포
-│   └── release-package.yml         # GitHub Release 생성 시 npm 자동 배포
+│   └── release-package.yml         # GitHub Release 생성 시 npm 자동 배포 (Trusted Publishing, 토큰 없음)
 ├── scripts/
 │   └── check-tokens.cjs            # 토큰 정합성 검사
 ├── src/

package/dist/components/ui/calendar.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs as N, jsx as l } from "react/jsx-runtime";
-import { useState as k, useCallback as S } from "react";
+import { jsxs as g, jsx as n } from "react/jsx-runtime";
+import { useState as k, useCallback as M } from "react";
 import i from "dayjs";
-import { cn as z } from "../../lib/utils.js";
-import { CloseIcon as Q, ArrowLeftIcon as $, ArrowRightIcon as C } from "../../lib/icons.js";
+import { cn as S } from "../../lib/utils.js";
+import { CloseIcon as L, ArrowLeftIcon as Q, ArrowRightIcon as $ } from "../../lib/icons.js";
 import { Radio as H } from "./radio.js";
-import { Button as B } from "./button.js";
+import { Button as A } from "./button.js";
 const F = ["일", "월", "화", "수", "목", "금", "토"], K = [
   { label: "오늘", getDays: () => ({ from: i(), to: i() }) },
   { label: "어제", getDays: () => ({ from: i().subtract(1, "day"), to: i().subtract(1, "day") }) },
@@ -13,258 +13,257 @@ const F = ["일", "월", "화", "수", "목", "금", "토"], K = [
   { label: "최근 14일", getDays: () => ({ from: i().subtract(13, "day"), to: i() }) },
   { label: "최근 31일", getDays: () => ({ from: i().subtract(30, "day"), to: i() }) }
 ];
-function P(u, e) {
-  const d = i(new Date(u, e, 1)), m = d.daysInMonth(), b = d.day(), o = Array(b).fill(null);
-  for (let t = 1; t <= m; t++)
-    o.push(i(new Date(u, e, t)));
+function P(c, r) {
+  const m = i(new Date(c, r, 1)), h = m.daysInMonth(), f = m.day(), o = Array(f).fill(null);
+  for (let e = 1; e <= h; e++)
+    o.push(i(new Date(c, r, e)));
   for (; o.length % 7 !== 0; ) o.push(null);
-  const c = [];
-  for (let t = 0; t < o.length; t += 7)
-    c.push(o.slice(t, t + 7));
-  return c;
+  const d = [];
+  for (let e = 0; e < o.length; e += 7)
+    d.push(o.slice(e, e + 7));
+  return d;
 }
-function q(u, e, d, m, b, o) {
-  var a, h;
-  const c = i().startOf("day"), t = u.startOf("day");
-  if (m && t.isBefore(m.startOf("day")) || b && t.isAfter(b.startOf("day"))) return "disabled";
-  const s = ((a = e.from) == null ? void 0 : a.startOf("day")) ?? null;
-  let n = ((h = e.to) == null ? void 0 : h.startOf("day")) ?? (d == null ? void 0 : d.startOf("day")) ?? null;
-  if (s && n && o) {
-    const f = n.diff(s, "day");
-    f > 0 && f >= o ? n = s.add(o - 1, "day") : f < 0 && Math.abs(f) >= o && (n = s.subtract(o - 1, "day"));
+function q(c, r, m, h, f, o) {
+  const d = i().startOf("day"), e = c.startOf("day");
+  if (h && e.isBefore(h.startOf("day")) || f && e.isAfter(f.startOf("day"))) return "disabled";
+  const s = r.from?.startOf("day") ?? null;
+  let a = r.to?.startOf("day") ?? m?.startOf("day") ?? null;
+  if (s && a && o) {
+    const l = a.diff(s, "day");
+    l > 0 && l >= o ? a = s.add(o - 1, "day") : l < 0 && Math.abs(l) >= o && (a = s.subtract(o - 1, "day"));
   }
-  const y = s && n ? s.isBefore(n) ? s : n : s, x = s && n ? s.isBefore(n) ? n : s : null;
-  return y && t.isSame(y) ? x && !t.isSame(x) ? "range-start" : "selected" : x && t.isSame(x) ? y && !t.isSame(y) ? "range-end" : "selected" : y && x && t.isAfter(y) && t.isBefore(x) ? "range-middle" : t.isSame(c) ? "today" : "default";
+  const u = s && a ? s.isBefore(a) ? s : a : s, b = s && a ? s.isBefore(a) ? a : s : null;
+  return u && e.isSame(u) ? b && !e.isSame(b) ? "range-start" : "selected" : b && e.isSame(b) ? u && !e.isSame(u) ? "range-end" : "selected" : u && b && e.isAfter(u) && e.isBefore(b) ? "range-middle" : e.isSame(d) ? "today" : "default";
 }
-function G({ day: u, state: e, dayOfWeek: d, onClick: m, onMouseEnter: b }) {
-  const o = e === "disabled", c = e === "selected" || e === "range-start" || e === "range-end", t = e === "range-middle", s = e === "range-start", w = e === "range-end", n = e === "today", y = o ? "text-ds-text-disabled" : c ? "text-white" : d === 0 ? "text-ds-primary-red-normal" : d === 6 ? "text-ds-primary-blue-normal" : "text-ds-text-strong";
-  return /* @__PURE__ */ l(
+function G({ day: c, state: r, dayOfWeek: m, onClick: h, onMouseEnter: f }) {
+  const o = r === "disabled", d = r === "selected" || r === "range-start" || r === "range-end", e = r === "range-middle", s = r === "range-start", w = r === "range-end", a = r === "today", u = o ? "text-ds-text-disabled" : d ? "text-white" : m === 0 ? "text-ds-primary-red-normal" : m === 6 ? "text-ds-primary-blue-normal" : "text-ds-text-strong";
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: z(
+      className: S(
         "relative flex size-7 shrink-0 flex-col items-center justify-center p-0.5",
-        t && "border-y-2 border-ds-primary-blue-normal",
+        e && "border-y-2 border-ds-primary-blue-normal",
         s && "border-y-2 border-l-2 border-ds-primary-blue-normal rounded-l-full",
         w && "border-y-2 border-r-2 border-ds-primary-blue-normal rounded-r-full"
       ),
-      onMouseEnter: b,
-      children: /* @__PURE__ */ l(
+      onMouseEnter: f,
+      children: /* @__PURE__ */ n(
         "button",
         {
           type: "button",
-          "aria-label": u.format("YYYY년 M월 D일"),
+          "aria-label": c.format("YYYY년 M월 D일"),
           disabled: o,
-          onClick: m,
-          className: z(
+          onClick: h,
+          className: S(
             "relative flex size-6 items-center justify-center rounded-full text-body-4-m transition-colors",
             !o && "cursor-pointer",
-            c && "bg-ds-primary-blue-normal",
-            n && !c && "bg-ds-surface-strong",
-            !o && !c && !n && "hover:bg-ds-surface-strong",
-            y
+            d && "bg-ds-primary-blue-normal",
+            a && !d && "bg-ds-surface-strong",
+            !o && !d && !a && "hover:bg-ds-surface-strong",
+            u
           ),
-          children: u.date()
+          children: c.date()
         }
       )
     }
   );
 }
-function O({
-  year: u,
-  month: e,
-  range: d,
-  hovered: m,
-  onDayClick: b,
+function B({
+  year: c,
+  month: r,
+  range: m,
+  hovered: h,
+  onDayClick: f,
   onDayHover: o,
-  disabledBefore: c,
-  disabledAfter: t,
+  disabledBefore: d,
+  disabledAfter: e,
   maxDays: s,
   showPrevArrow: w,
-  showNextArrow: n,
-  onPrev: y,
-  onNext: x
+  showNextArrow: a,
+  onPrev: u,
+  onNext: b
 }) {
-  const a = P(u, e);
-  return /* @__PURE__ */ N("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ N("div", { className: "flex items-center gap-1", children: [
-      w ? /* @__PURE__ */ l(
+  const l = P(c, r);
+  return /* @__PURE__ */ g("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ g("div", { className: "flex items-center gap-1", children: [
+      w ? /* @__PURE__ */ n(
         "button",
         {
           type: "button",
           "aria-label": "이전 달",
-          onClick: y,
+          onClick: u,
           className: "flex size-5 items-center justify-center text-ds-text-strong hover:text-ds-primary-blue-normal",
-          children: /* @__PURE__ */ l($, { className: "size-5" })
+          children: /* @__PURE__ */ n(Q, { className: "size-5" })
         }
-      ) : /* @__PURE__ */ l("div", { className: "size-5" }),
-      /* @__PURE__ */ N("p", { className: "flex-1 text-center text-body-3-r text-ds-text-strong", children: [
-        u,
+      ) : /* @__PURE__ */ n("div", { className: "size-5" }),
+      /* @__PURE__ */ g("p", { className: "flex-1 text-center text-body-3-r text-ds-text-strong", children: [
+        c,
         "년 ",
-        e + 1,
+        r + 1,
         "월"
       ] }),
-      n ? /* @__PURE__ */ l(
+      a ? /* @__PURE__ */ n(
         "button",
         {
           type: "button",
           "aria-label": "다음 달",
-          onClick: x,
+          onClick: b,
           className: "flex size-5 items-center justify-center text-ds-text-strong hover:text-ds-primary-blue-normal",
-          children: /* @__PURE__ */ l(C, { className: "size-5" })
+          children: /* @__PURE__ */ n($, { className: "size-5" })
         }
-      ) : /* @__PURE__ */ l("div", { className: "size-5" })
+      ) : /* @__PURE__ */ n("div", { className: "size-5" })
     ] }),
-    /* @__PURE__ */ N("div", { className: "grid grid-cols-7", children: [
-      F.map((h, f) => /* @__PURE__ */ l("div", { className: "flex size-7 items-center justify-center", children: /* @__PURE__ */ l(
+    /* @__PURE__ */ g("div", { className: "grid grid-cols-7", children: [
+      F.map((p, v) => /* @__PURE__ */ n("div", { className: "flex size-7 items-center justify-center", children: /* @__PURE__ */ n(
         "span",
         {
-          className: z(
+          className: S(
             "text-body-4-r",
-            f === 0 ? "text-ds-primary-red-normal" : f === 6 ? "text-ds-primary-blue-normal" : "text-ds-text-strong"
+            v === 0 ? "text-ds-primary-red-normal" : v === 6 ? "text-ds-primary-blue-normal" : "text-ds-text-strong"
           ),
-          children: h
+          children: p
         }
-      ) }, h)),
-      a.map(
-        (h, f) => h.map(
-          (g, v) => g ? /* @__PURE__ */ l(
+      ) }, p)),
+      l.map(
+        (p, v) => p.map(
+          (y, N) => y ? /* @__PURE__ */ n(
             G,
             {
-              day: g,
-              dayOfWeek: v,
-              state: q(g, d, m, c, t, s),
-              onClick: () => b(g),
-              onMouseEnter: () => o(g)
+              day: y,
+              dayOfWeek: N,
+              state: q(y, m, h, d, e, s),
+              onClick: () => f(y),
+              onMouseEnter: () => o(y)
             },
-            `${f}-${v}`
-          ) : /* @__PURE__ */ l("div", { className: "size-7" }, `${f}-${v}`)
+            `${v}-${N}`
+          ) : /* @__PURE__ */ n("div", { className: "size-7" }, `${v}-${N}`)
         )
       )
     ] })
   ] });
 }
 function ee({
-  value: u,
-  onChange: e,
-  onClose: d,
-  onConfirm: m,
-  maxDays: b = 31,
+  value: c,
+  onChange: r,
+  onClose: m,
+  onConfirm: h,
+  maxDays: f = 31,
   disabledBefore: o,
-  disabledAfter: c = i(),
-  className: t
+  disabledAfter: d = i(),
+  className: e
 }) {
-  const s = i(), [w, n] = k({ year: s.year(), month: s.month() - 1 < 0 ? 11 : s.month() - 1 }), [y, x] = k({ year: s.year(), month: s.month() }), [a, h] = k(u ?? { from: null, to: null }), [f, g] = k(null), [v, D] = k(!1), [E, j] = k(null), R = S(
-    (r) => {
-      if (!v || a.from === null)
-        h({ from: r, to: null }), D(!0), j(null);
+  const s = i(), [w, a] = k({ year: s.year(), month: s.month() - 1 < 0 ? 11 : s.month() - 1 }), [u, b] = k({ year: s.year(), month: s.month() }), [l, p] = k(c ?? { from: null, to: null }), [v, y] = k(null), [N, z] = k(!1), [O, D] = k(null), j = M(
+    (t) => {
+      if (!N || l.from === null)
+        p({ from: t, to: null }), z(!0), D(null);
       else {
-        const p = a.from, M = p.isBefore(r) ? { from: p, to: r } : { from: r, to: p };
-        h(M), D(!1), g(null), e == null || e(M);
+        const x = l.from, C = x.isBefore(t) ? { from: x, to: t } : { from: t, to: x };
+        p(C), z(!1), y(null), r?.(C);
       }
     },
-    [v, a.from, e]
-  ), I = S(
-    (r, p) => {
-      const M = p();
-      h(M), D(!1), g(null), j(r), e == null || e(M);
+    [N, l.from, r]
+  ), E = M(
+    (t, x) => {
+      const C = x();
+      p(C), z(!1), y(null), D(t), r?.(C);
     },
-    [e]
-  ), T = S(() => {
-    n((r) => {
-      const p = r.month === 0 ? { year: r.year - 1, month: 11 } : { year: r.year, month: r.month - 1 };
-      return x(r), p;
+    [r]
+  ), I = M(() => {
+    a((t) => {
+      const x = t.month === 0 ? { year: t.year - 1, month: 11 } : { year: t.year, month: t.month - 1 };
+      return b(t), x;
     });
-  }, []), Y = S(() => {
-    x((r) => {
-      const p = r.month === 11 ? { year: r.year + 1, month: 0 } : { year: r.year, month: r.month + 1 };
-      return n(r), p;
+  }, []), T = M(() => {
+    b((t) => {
+      const x = t.month === 11 ? { year: t.year + 1, month: 0 } : { year: t.year, month: t.month + 1 };
+      return a(t), x;
     });
-  }, []), L = S(() => {
-    a.from && a.to && (m == null || m({ from: a.from, to: a.to }));
-  }, [a, m]), A = o ?? s.subtract(1, "year");
-  return /* @__PURE__ */ N(
+  }, []), Y = M(() => {
+    l.from && l.to && h?.({ from: l.from, to: l.to });
+  }, [l, h]), R = o ?? s.subtract(1, "year");
+  return /* @__PURE__ */ g(
     "div",
     {
-      className: z(
+      className: S(
         "flex w-[612px] flex-col overflow-hidden rounded-ds-lg bg-ds-background-default shadow-ds-modal",
-        t
+        e
       ),
-      onMouseLeave: () => g(null),
+      onMouseLeave: () => y(null),
       children: [
-        /* @__PURE__ */ N("div", { className: "flex items-center justify-between px-5 pt-5 pb-3", children: [
-          /* @__PURE__ */ l("span", { className: "text-body-2-m text-ds-text-strong", children: "기간 설정" }),
-          /* @__PURE__ */ l(
+        /* @__PURE__ */ g("div", { className: "flex items-center justify-between px-5 pt-5 pb-3", children: [
+          /* @__PURE__ */ n("span", { className: "text-body-2-m text-ds-text-strong", children: "기간 설정" }),
+          /* @__PURE__ */ n(
             "button",
             {
               type: "button",
               "aria-label": "닫기",
-              onClick: d,
+              onClick: m,
               className: "text-ds-text-normal hover:text-ds-text-strong",
-              children: /* @__PURE__ */ l(Q, { className: "size-5" })
+              children: /* @__PURE__ */ n(L, { className: "size-5" })
             }
           )
         ] }),
-        /* @__PURE__ */ l("div", { className: "mx-5 h-px bg-ds-line-normal" }),
-        /* @__PURE__ */ N("div", { className: "flex min-h-0 flex-1", children: [
-          /* @__PURE__ */ l("div", { className: "flex w-40 shrink-0 flex-col border-r border-b border-ds-line-normal px-5 pt-5 pb-5 gap-0.5", children: K.map(({ label: r, getDays: p }) => (
+        /* @__PURE__ */ n("div", { className: "mx-5 h-px bg-ds-line-normal" }),
+        /* @__PURE__ */ g("div", { className: "flex min-h-0 flex-1", children: [
+          /* @__PURE__ */ n("div", { className: "flex w-40 shrink-0 flex-col border-r border-b border-ds-line-normal px-5 pt-5 pb-5 gap-0.5", children: K.map(({ label: t, getDays: x }) => (
             // Radio가 자체적으로 <label>을 렌더하므로 밖에서 또 감싸면 label이
             // 중첩되어 연결이 깨진다. 텍스트는 children으로 넘긴다.
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ n(
               H,
               {
                 name: "quick-select",
-                value: r,
-                checked: E === r,
-                onChange: () => I(r, p),
+                value: t,
+                checked: O === t,
+                onChange: () => E(t, x),
                 className: "h-8 w-full rounded-ds-ss px-1 text-body-3-r text-ds-text-strong hover:bg-ds-surface-normal",
-                children: r
+                children: t
               },
-              r
+              t
             )
           )) }),
-          /* @__PURE__ */ N("div", { className: "flex flex-col flex-1 border-b border-ds-line-normal p-5 gap-3", children: [
-            /* @__PURE__ */ N("div", { className: "flex gap-5 justify-between", children: [
-              /* @__PURE__ */ l(
-                O,
+          /* @__PURE__ */ g("div", { className: "flex flex-col flex-1 border-b border-ds-line-normal p-5 gap-3", children: [
+            /* @__PURE__ */ g("div", { className: "flex gap-5 justify-between", children: [
+              /* @__PURE__ */ n(
+                B,
                 {
                   ...w,
-                  range: a,
-                  hovered: v ? f : null,
-                  onDayClick: R,
-                  onDayHover: g,
-                  disabledBefore: A,
-                  disabledAfter: c,
-                  maxDays: b,
+                  range: l,
+                  hovered: N ? v : null,
+                  onDayClick: j,
+                  onDayHover: y,
+                  disabledBefore: R,
+                  disabledAfter: d,
+                  maxDays: f,
                   showPrevArrow: !0,
-                  onPrev: T
+                  onPrev: I
                 }
               ),
-              /* @__PURE__ */ l(
-                O,
+              /* @__PURE__ */ n(
+                B,
                 {
-                  ...y,
-                  range: a,
-                  hovered: v ? f : null,
-                  onDayClick: R,
-                  onDayHover: g,
-                  disabledBefore: A,
-                  disabledAfter: c,
-                  maxDays: b,
+                  ...u,
+                  range: l,
+                  hovered: N ? v : null,
+                  onDayClick: j,
+                  onDayHover: y,
+                  disabledBefore: R,
+                  disabledAfter: d,
+                  maxDays: f,
                   showNextArrow: !0,
-                  onNext: Y
+                  onNext: T
                 }
               )
             ] }),
-            /* @__PURE__ */ N("p", { className: "text-body-4-r text-ds-text-normal", children: [
+            /* @__PURE__ */ g("p", { className: "text-body-4-r text-ds-text-normal", children: [
               "설정 가능한 최대 기간은 ",
-              b,
+              f,
               "일이고, 최대 1년 전까지만 설정 가능합니다."
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ N("div", { className: "flex items-center justify-end gap-2 px-5 py-3", children: [
-          /* @__PURE__ */ l(B, { variant: "outlined", size: "lg", onClick: d, children: "취소" }),
-          /* @__PURE__ */ l(B, { variant: "filled", color: "blue", size: "lg", disabled: !a.from || !a.to, onClick: L, children: "적용" })
+        /* @__PURE__ */ g("div", { className: "flex items-center justify-end gap-2 px-5 py-3", children: [
+          /* @__PURE__ */ n(A, { variant: "outlined", size: "lg", onClick: m, children: "취소" }),
+          /* @__PURE__ */ n(A, { variant: "filled", color: "blue", size: "lg", disabled: !l.from || !l.to, onClick: Y, children: "적용" })
         ] })
       ]
     }

package/dist/components/ui/checkbox.js

@@ -1,39 +1,39 @@
 "use client";
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
-import { CheckboxIndeterminateDisabledIcon as h, CheckboxCheckedDisabledIcon as p, CheckboxUncheckedDisabledIcon as u, CheckboxIndeterminateIcon as b, CheckboxCheckedIcon as I, CheckboxUncheckedIcon as d } from "../../lib/icons.js";
-import { cn as C } from "../../lib/utils.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { CheckboxIndeterminateDisabledIcon as x, CheckboxCheckedDisabledIcon as p, CheckboxUncheckedDisabledIcon as u, CheckboxIndeterminateIcon as b, CheckboxCheckedIcon as C, CheckboxUncheckedIcon as I } from "../../lib/icons.js";
+import { cn as d } from "../../lib/utils.js";
 import * as o from "react";
 const N = o.forwardRef(
-  ({ className: l, checked: n, indeterminate: c, disabled: s, onChange: t, children: i, ...a }, f) => {
-    const r = o.useRef(null);
-    o.useImperativeHandle(f, () => r.current, []), o.useEffect(() => {
-      r.current && (r.current.indeterminate = !!c);
+  ({ className: a, checked: r, indeterminate: c, disabled: s, onChange: i, children: t, ...l }, h) => {
+    const n = o.useRef(null);
+    o.useImperativeHandle(h, () => n.current, []), o.useEffect(() => {
+      n.current && (n.current.indeterminate = !!c);
     }, [c]);
-    const k = s ? c ? /* @__PURE__ */ e(h, {}) : n ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(u, {}) : c ? /* @__PURE__ */ e(b, {}) : n ? /* @__PURE__ */ e(I, {}) : /* @__PURE__ */ e(d, {});
-    return /* @__PURE__ */ x(
+    const f = s ? c ? /* @__PURE__ */ e(x, {}) : r ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(u, {}) : c ? /* @__PURE__ */ e(b, {}) : r ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ e(I, {});
+    return /* @__PURE__ */ m(
       "label",
       {
-        className: C(
+        className: d(
           "relative inline-flex items-center gap-1",
-          i ? "" : "shrink-0",
+          t ? "" : "shrink-0",
           s ? "cursor-not-allowed" : "cursor-pointer",
-          l
+          a
         ),
         children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
-              ref: r,
-              checked: n,
+              ref: n,
+              checked: r,
               disabled: s,
-              onChange: (m) => t == null ? void 0 : t(m.target.checked),
+              onChange: (k) => i?.(k.target.checked),
               className: "sr-only",
-              ...a
+              ...l
             }
           ),
-          /* @__PURE__ */ e("span", { className: "shrink-0 inline-flex", children: k }),
-          i
+          /* @__PURE__ */ e("span", { className: "shrink-0 inline-flex", children: f }),
+          t
         ]
       }
     );