@pylerai/design-system 1.2.3 → 2.0.0

package/dist/components/ui/body.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as y } from "react/jsx-runtime";
+import { cn as b } from "../../lib/utils.js";
+import { Slot as n } from "@radix-ui/react-slot";
+import { cva as s } from "class-variance-authority";
+import * as i from "react";
+const p = s(
+  "text-foreground leading-normal",
+  {
+    variants: {
+      variant: {
+        "body-1-m": "text-body-1-m",
+        "body-1-r": "text-body-1-r",
+        "body-2-sb": "text-body-2-sb",
+        "body-2-m": "text-body-2-m",
+        "body-2-r": "text-body-2-r",
+        "body-3-m": "text-body-3-m",
+        "body-3-r": "text-body-3-r",
+        "body-4-m": "text-body-4-m",
+        "body-4-r": "text-body-4-r"
+      },
+      as: {
+        p: "",
+        div: "",
+        span: "",
+        article: "",
+        section: ""
+      }
+    },
+    defaultVariants: {
+      variant: "body-1-m",
+      as: "p"
+    }
+  }
+), x = i.forwardRef(
+  ({ className: t, variant: r, as: d, asChild: a, ...e }, m) => {
+    const o = d || "p";
+    return /* @__PURE__ */ y(
+      a ? n : o,
+      {
+        className: b(p({ variant: r, as: o, className: t })),
+        ref: m,
+        ...e
+      }
+    );
+  }
+);
+x.displayName = "Body";
+export {
+  x as Body,
+  p as bodyVariants
+};

package/dist/components/ui/button.d.ts

@@ -1,3 +1,4 @@
+import { DsSize } from '../../lib/size';
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
@@ -19,7 +20,7 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export interface ButtonIndicatorProps {
     color?: "blue" | "red" | "green";
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: Extract<DsSize, "sm" | "md" | "lg" | "xl">;
     className?: string;
 }
 declare const ButtonIndicator: React.ForwardRefExoticComponent<ButtonIndicatorProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ui/button.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx as a, jsxs as O, Fragment as k } from "react/jsx-runtime";
+import { cn as m } from "../../lib/utils.js";
+import { Slot as B } from "@radix-ui/react-slot";
+import { cva as R } from "class-variance-authority";
+import * as g from "react";
+const v = R(
+  "inline-flex items-center justify-center whitespace-nowrap font-sans transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none select-none",
+  {
+    variants: {
+      variant: {
+        filled: "rounded-lg",
+        outlined: "rounded-lg border border-ds-line-normal bg-ds-background-default text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:bg-ds-surface-normal disabled:text-ds-text-disabled",
+        text: "rounded-lg bg-transparent text-ds-text-strong disabled:text-ds-text-disabled",
+        icon: "rounded-lg",
+        indicator: "rounded-full inline-block"
+      },
+      color: {
+        blue: "",
+        red: "",
+        green: ""
+      },
+      size: {
+        sm: "h-7 gap-1",
+        md: "h-8 gap-1.5",
+        lg: "h-9 gap-1.5",
+        xl: "h-11 gap-2"
+      }
+    },
+    compoundVariants: [
+      // ── filled × color ──────────────────────────────────────────────────
+      {
+        variant: "filled",
+        color: "blue",
+        className: "bg-ds-primary-blue-normal text-white hover:bg-ds-primary-blue-hovered active:bg-ds-primary-blue-hovered disabled:bg-ds-primary-blue-disabled disabled:text-white focus-visible:ring-ds-primary-blue-normal"
+      },
+      {
+        variant: "filled",
+        color: "red",
+        className: "bg-ds-primary-red-normal text-white hover:bg-ds-primary-red-hovered active:bg-ds-primary-red-hovered disabled:bg-ds-primary-red-disabled disabled:text-white focus-visible:ring-ds-primary-red-normal"
+      },
+      {
+        variant: "filled",
+        color: "green",
+        className: "bg-ds-primary-green-normal text-white hover:bg-ds-primary-green-hovered active:bg-ds-primary-green-hovered disabled:bg-ds-primary-green-disabled disabled:text-white focus-visible:ring-ds-primary-green-normal"
+      },
+      // ── icon filled × color ───────────────────────────────────────────────
+      {
+        variant: "icon",
+        color: "blue",
+        className: "bg-ds-primary-blue-normal text-white hover:bg-ds-primary-blue-hovered active:bg-ds-primary-blue-hovered disabled:bg-ds-primary-blue-disabled disabled:text-white focus-visible:ring-ds-primary-blue-normal"
+      },
+      {
+        variant: "icon",
+        color: "red",
+        className: "bg-ds-primary-red-normal text-white hover:bg-ds-primary-red-hovered active:bg-ds-primary-red-hovered disabled:bg-ds-primary-red-disabled disabled:text-white focus-visible:ring-ds-primary-red-normal"
+      },
+      {
+        variant: "icon",
+        color: "green",
+        className: "bg-ds-primary-green-normal text-white hover:bg-ds-primary-green-hovered active:bg-ds-primary-green-hovered disabled:bg-ds-primary-green-disabled disabled:text-white focus-visible:ring-ds-primary-green-normal"
+      },
+      // ── icon × size (fixed square dimensions + SVG sizing) ──────────────
+      { variant: "icon", size: "sm", className: "h-7 w-7 p-0 rounded [&_svg]:size-3" },
+      { variant: "icon", size: "md", className: "h-8 w-8 p-0 [&_svg]:size-5" },
+      { variant: "icon", size: "lg", className: "h-9 w-9 p-0 [&_svg]:size-5" },
+      { variant: "icon", size: "xl", className: "h-11 w-11 p-0 [&_svg]:size-7" },
+      // ── filled/outlined/text size → padding + typography ─────────────────
+      { variant: "filled", size: "sm", className: "px-2 text-body-4-m rounded" },
+      { variant: "filled", size: "md", className: "px-3 text-body-3-m" },
+      { variant: "filled", size: "lg", className: "px-3.5 text-body-2-m" },
+      { variant: "filled", size: "xl", className: "px-[18px] text-body-2-m" },
+      { variant: "outlined", size: "sm", className: "px-2 text-body-4-m rounded" },
+      { variant: "outlined", size: "md", className: "px-3 text-body-3-m" },
+      { variant: "outlined", size: "lg", className: "px-3.5 text-body-2-m" },
+      { variant: "outlined", size: "xl", className: "px-[18px] text-body-2-m" },
+      { variant: "text", size: "sm", className: "text-body-4-m" },
+      { variant: "text", size: "md", className: "text-body-3-m" },
+      { variant: "text", size: "lg", className: "text-body-2-m" },
+      // text xl → lg 사이즈 폴백 (Figma에 xl 없음)
+      { variant: "text", size: "xl", className: "text-body-2-m h-9" },
+      // ── indicator × size (dot dimensions) ────────────────────────────────
+      { variant: "indicator", size: "sm", className: "h-2 w-2" },
+      { variant: "indicator", size: "md", className: "h-2.5 w-2.5" },
+      { variant: "indicator", size: "lg", className: "h-3 w-3" },
+      { variant: "indicator", size: "xl", className: "h-3.5 w-3.5" },
+      // ── indicator × color ─────────────────────────────────────────────────
+      {
+        variant: "indicator",
+        color: "blue",
+        className: "bg-ds-primary-blue-normal"
+      },
+      {
+        variant: "indicator",
+        color: "red",
+        className: "bg-ds-primary-red-normal"
+      },
+      {
+        variant: "indicator",
+        color: "green",
+        className: "bg-ds-primary-green-normal"
+      }
+    ],
+    defaultVariants: {
+      variant: "filled",
+      color: "blue",
+      size: "md"
+    }
+  }
+), _ = g.forwardRef(
+  ({
+    className: s,
+    variant: e,
+    color: i,
+    size: r,
+    asChild: c = !1,
+    shape: u = "square",
+    iconStyle: x = "filled",
+    leftIcon: t,
+    rightIcon: d,
+    children: b,
+    ...h
+  }, y) => {
+    const f = c ? B : "button", N = e === "icon" && x === "outlined" ? "bg-ds-background-default border border-ds-line-normal text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:text-ds-text-disabled" : void 0, l = !!t, p = !!d, z = e !== "icon" && e !== "indicator" && (l || p) ? (() => {
+      const n = r ?? "md", o = {
+        sm: { leftOnly: "pl-1 pr-2", rightOnly: "pl-2 pr-1", both: "px-1" },
+        md: { leftOnly: "pl-2 pr-3", rightOnly: "pl-3 pr-2", both: "px-2" },
+        lg: { leftOnly: "pl-2.5 pr-3.5", rightOnly: "pl-3.5 pr-2.5", both: "px-2.5" },
+        xl: { leftOnly: "pl-3.5 pr-[18px]", rightOnly: "pl-[18px] pr-3.5", both: "px-3.5" }
+      }, w = l && p ? o[n].both : l ? o[n].leftOnly : o[n].rightOnly;
+      return m(w, "gap-1");
+    })() : void 0;
+    return /* @__PURE__ */ a(
+      f,
+      {
+        className: m(
+          v({ variant: e, color: i, size: r }),
+          e === "icon" && u === "round" && "rounded-full",
+          N,
+          z,
+          s
+        ),
+        ref: y,
+        ...h,
+        children: c ? b : /* @__PURE__ */ O(k, { children: [
+          t && /* @__PURE__ */ a("span", { className: "shrink-0", children: t }),
+          b,
+          d && /* @__PURE__ */ a("span", { className: "shrink-0", children: d })
+        ] })
+      }
+    );
+  }
+);
+_.displayName = "Button";
+const j = g.forwardRef(
+  ({ color: s = "blue", size: e = "md", className: i }, r) => /* @__PURE__ */ a(
+    "span",
+    {
+      className: m(
+        v({ variant: "indicator", color: s, size: e }),
+        i
+      ),
+      ref: r
+    }
+  )
+);
+j.displayName = "ButtonIndicator";
+export {
+  _ as Button,
+  j as ButtonIndicator,
+  v as buttonVariants
+};

package/dist/components/ui/calendar.js

@@ -0,0 +1,275 @@
+"use client";
+import { jsxs as N, jsx as l } from "react/jsx-runtime";
+import { useState as k, useCallback as S } 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 { Radio as H } from "./radio.js";
+import { Button as B } from "./button.js";
+const F = ["일", "월", "화", "수", "목", "금", "토"], K = [
+  { label: "오늘", getDays: () => ({ from: i(), to: i() }) },
+  { label: "어제", getDays: () => ({ from: i().subtract(1, "day"), to: i().subtract(1, "day") }) },
+  { label: "최근 7일", getDays: () => ({ from: i().subtract(6, "day"), to: i() }) },
+  { 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)));
+  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;
+}
+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"));
+  }
+  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";
+}
+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(
+    "div",
+    {
+      className: z(
+        "relative flex size-7 shrink-0 flex-col items-center justify-center p-0.5",
+        t && "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(
+        "button",
+        {
+          type: "button",
+          "aria-label": u.format("YYYY년 M월 D일"),
+          disabled: o,
+          onClick: m,
+          className: z(
+            "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
+          ),
+          children: u.date()
+        }
+      )
+    }
+  );
+}
+function O({
+  year: u,
+  month: e,
+  range: d,
+  hovered: m,
+  onDayClick: b,
+  onDayHover: o,
+  disabledBefore: c,
+  disabledAfter: t,
+  maxDays: s,
+  showPrevArrow: w,
+  showNextArrow: n,
+  onPrev: y,
+  onNext: x
+}) {
+  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(
+        "button",
+        {
+          type: "button",
+          "aria-label": "이전 달",
+          onClick: y,
+          className: "flex size-5 items-center justify-center text-ds-text-strong hover:text-ds-primary-blue-normal",
+          children: /* @__PURE__ */ l($, { 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,
+        "년 ",
+        e + 1,
+        "월"
+      ] }),
+      n ? /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          "aria-label": "다음 달",
+          onClick: x,
+          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" })
+        }
+      ) : /* @__PURE__ */ l("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(
+        "span",
+        {
+          className: z(
+            "text-body-4-r",
+            f === 0 ? "text-ds-primary-red-normal" : f === 6 ? "text-ds-primary-blue-normal" : "text-ds-text-strong"
+          ),
+          children: h
+        }
+      ) }, h)),
+      a.map(
+        (h, f) => h.map(
+          (g, v) => g ? /* @__PURE__ */ l(
+            G,
+            {
+              day: g,
+              dayOfWeek: v,
+              state: q(g, d, m, c, t, s),
+              onClick: () => b(g),
+              onMouseEnter: () => o(g)
+            },
+            `${f}-${v}`
+          ) : /* @__PURE__ */ l("div", { className: "size-7" }, `${f}-${v}`)
+        )
+      )
+    ] })
+  ] });
+}
+function ee({
+  value: u,
+  onChange: e,
+  onClose: d,
+  onConfirm: m,
+  maxDays: b = 31,
+  disabledBefore: o,
+  disabledAfter: c = i(),
+  className: t
+}) {
+  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);
+      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);
+      }
+    },
+    [v, a.from, e]
+  ), I = S(
+    (r, p) => {
+      const M = p();
+      h(M), D(!1), g(null), j(r), e == null || e(M);
+    },
+    [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;
+    });
+  }, []), 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;
+    });
+  }, []), 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(
+    "div",
+    {
+      className: z(
+        "flex w-[612px] flex-col overflow-hidden rounded-ds-lg bg-ds-background-default shadow-ds-modal",
+        t
+      ),
+      onMouseLeave: () => g(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(
+            "button",
+            {
+              type: "button",
+              "aria-label": "닫기",
+              onClick: d,
+              className: "text-ds-text-normal hover:text-ds-text-strong",
+              children: /* @__PURE__ */ l(Q, { 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 }) => (
+            // Radio가 자체적으로 <label>을 렌더하므로 밖에서 또 감싸면 label이
+            // 중첩되어 연결이 깨진다. 텍스트는 children으로 넘긴다.
+            /* @__PURE__ */ l(
+              H,
+              {
+                name: "quick-select",
+                value: r,
+                checked: E === r,
+                onChange: () => I(r, p),
+                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
+              },
+              r
+            )
+          )) }),
+          /* @__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,
+                {
+                  ...w,
+                  range: a,
+                  hovered: v ? f : null,
+                  onDayClick: R,
+                  onDayHover: g,
+                  disabledBefore: A,
+                  disabledAfter: c,
+                  maxDays: b,
+                  showPrevArrow: !0,
+                  onPrev: T
+                }
+              ),
+              /* @__PURE__ */ l(
+                O,
+                {
+                  ...y,
+                  range: a,
+                  hovered: v ? f : null,
+                  onDayClick: R,
+                  onDayHover: g,
+                  disabledBefore: A,
+                  disabledAfter: c,
+                  maxDays: b,
+                  showNextArrow: !0,
+                  onNext: Y
+                }
+              )
+            ] }),
+            /* @__PURE__ */ N("p", { className: "text-body-4-r text-ds-text-normal", children: [
+              "설정 가능한 최대 기간은 ",
+              b,
+              "일이고, 최대 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: "적용" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ee as Calendar
+};

package/dist/components/ui/checkbox.d.ts

@@ -4,6 +4,13 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     indeterminate?: boolean;
     /** 체크 상태 변경 핸들러 */
     onChange?: (checked: boolean) => void;
+    /**
+     * 체크박스 옆에 표시할 라벨 텍스트.
+     * 이 컴포넌트는 자체적으로 `<label>`을 렌더하므로, 밖에서 `<label>`로 감싸면
+     * label이 중첩되어 연결이 깨진다. 텍스트는 반드시 여기로 넘긴다.
+     * (텍스트 없이 쓸 때는 `aria-label`을 지정할 것)
+     */
+    children?: React.ReactNode;
 }
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export { Checkbox };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,45 @@
+"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 * 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);
+    }, [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(
+      "label",
+      {
+        className: C(
+          "relative inline-flex items-center gap-1",
+          i ? "" : "shrink-0",
+          s ? "cursor-not-allowed" : "cursor-pointer",
+          l
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              ref: r,
+              checked: n,
+              disabled: s,
+              onChange: (m) => t == null ? void 0 : t(m.target.checked),
+              className: "sr-only",
+              ...a
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "shrink-0 inline-flex", children: k }),
+          i
+        ]
+      }
+    );
+  }
+);
+N.displayName = "Checkbox";
+export {
+  N as Checkbox
+};

package/dist/components/ui/chip.d.ts

@@ -1,14 +1,15 @@
+import { DsSize } from '../../lib/size';
 import * as React from "react";
-export type ChipSize = "medium" | "small";
+export type ChipSize = Extract<DsSize, "md" | "sm">;
 export interface ChipProps {
-    /** 크기. 기본값: "medium" */
+    /** 크기. 기본값: "md" */
     size?: ChipSize;
     /** 선택 상태 */
     selected?: boolean;
     disabled?: boolean;
     /** 제거 버튼 클릭 핸들러. 정의 시 제거 버튼 표시 */
     onRemove?: () => void;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler<HTMLElement>;
     children?: React.ReactNode;
     className?: string;
 }

package/dist/components/ui/chip.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { XIcon as b } from "../../lib/icons.js";
+import { cn as n } from "../../lib/utils.js";
+import * as f from "react";
+const h = f.forwardRef(
+  ({ size: l = "md", selected: i = !1, disabled: e = !1, onRemove: a, onClick: r, children: p, className: d }, c) => {
+    const s = l === "md", t = !!a, u = r ? "button" : "span";
+    return /* @__PURE__ */ x(
+      "div",
+      {
+        ref: c,
+        className: n(
+          "inline-flex items-center border rounded-[4px] bg-ds-background-default select-none transition-colors",
+          // 좌우 여백은 컨테이너가 아니라 본문(클릭 대상)이 갖는다.
+          // 컨테이너에 두면 여백 영역이 클릭되지 않는 죽은 공간이 된다.
+          s ? t ? "h-8 pr-1" : "h-8" : t ? "h-[26px] pr-0.5" : "h-[26px]",
+          s ? "text-body-3-r" : "text-body-4-r",
+          e ? "border-ds-line-normal text-ds-text-disabled cursor-not-allowed" : i ? "border-ds-primary-blue-normal text-ds-text-strong cursor-pointer" : "border-ds-line-normal text-ds-text-strong cursor-pointer hover:border-ds-line-strong",
+          d
+        ),
+        children: [
+          /* @__PURE__ */ o(
+            u,
+            {
+              ...r ? {
+                type: "button",
+                disabled: e,
+                "aria-pressed": i,
+                onClick: r
+              } : {},
+              className: n(
+                "inline-flex h-full items-center whitespace-nowrap bg-transparent",
+                // 컨테이너에서 옮겨온 여백 — 칩 전체가 클릭 대상이 되도록 한다
+                s ? t ? "pl-2" : "px-2" : t ? "pl-1.5" : "px-1.5",
+                r && !e && "cursor-pointer",
+                r && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ds-primary-blue-normal rounded-[3px]"
+              ),
+              children: p
+            }
+          ),
+          t && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              "aria-label": "제거",
+              disabled: e,
+              onClick: (m) => {
+                m.stopPropagation(), a();
+              },
+              className: n(
+                "inline-flex items-center justify-center shrink-0",
+                e ? "text-ds-text-disabled cursor-not-allowed" : "text-ds-text-strong"
+              ),
+              children: /* @__PURE__ */ o(b, { className: "size-5" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+h.displayName = "Chip";
+export {
+  h as Chip
+};