@pylerai/design-system 1.2.3 → 2.0.0

package/dist/components/ui/modal.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { XIcon as z } from "../../lib/icons.js";
+import { useDialogA11y as p } from "../../lib/use-dialog-a11y.js";
+import { cn as g } from "../../lib/utils.js";
+import * as b from "react";
+import { createPortal as v } from "react-dom";
+import { Button as h } from "./button.js";
+function y({ onClick: l }) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: l,
+      "aria-label": "닫기",
+      className: "inline-flex items-center justify-center size-5 shrink-0 text-ds-text-normal hover:text-ds-text-strong transition-colors focus-visible:outline-none",
+      children: /* @__PURE__ */ e(z, { className: "size-5" })
+    }
+  );
+}
+function w({ children: l }) {
+  return /* @__PURE__ */ a("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-5", children: [
+    /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-ds-dim-default" }),
+    /* @__PURE__ */ e("div", { className: "relative z-10 flex items-center justify-center w-full h-full", children: l })
+  ] });
+}
+const N = "bg-ds-background-default border border-ds-line-normal rounded-ds-lg p-5 flex flex-col gap-6 shadow-ds-modal focus:outline-none", k = "flex-1 min-w-0 text-body-2-sb text-ds-text-strong";
+function S({
+  open: l,
+  title: f,
+  description: i,
+  confirmLabel: o = "확인",
+  onConfirm: c,
+  onClose: s,
+  className: d
+}) {
+  const t = b.useId(), n = p(l, s);
+  if (!l) return null;
+  const r = () => {
+    c == null || c(), s();
+  };
+  return v(
+    /* @__PURE__ */ e(w, { children: /* @__PURE__ */ a(
+      "div",
+      {
+        ref: n,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": `${t}-title`,
+        "aria-describedby": i ? `${t}-description` : void 0,
+        tabIndex: -1,
+        className: g(N, "w-[360px]", d),
+        children: [
+          /* @__PURE__ */ a("div", { className: "flex items-start justify-between w-full gap-2", children: [
+            /* @__PURE__ */ e("p", { id: `${t}-title`, className: k, children: f }),
+            /* @__PURE__ */ e(y, { onClick: s })
+          ] }),
+          i && /* @__PURE__ */ e("p", { id: `${t}-description`, className: "text-body-3-r text-ds-text-strong w-full", children: i }),
+          o && /* @__PURE__ */ e("div", { className: "flex items-center justify-end w-full", children: /* @__PURE__ */ e(h, { variant: "filled", color: "blue", size: "lg", onClick: r, children: o }) })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+function X({
+  open: l,
+  title: f,
+  description: i,
+  cancelLabel: o = "닫기",
+  confirmLabel: c = "확인",
+  onCancel: s,
+  onConfirm: d,
+  onClose: t,
+  className: n
+}) {
+  const r = b.useId(), m = b.useCallback(() => {
+    s == null || s(), t();
+  }, [s, t]), u = p(l, m);
+  if (!l) return null;
+  const x = () => {
+    d == null || d(), t();
+  };
+  return v(
+    /* @__PURE__ */ e(w, { children: /* @__PURE__ */ a(
+      "div",
+      {
+        ref: u,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": `${r}-title`,
+        "aria-describedby": i ? `${r}-description` : void 0,
+        tabIndex: -1,
+        className: g(N, "w-[360px]", n),
+        children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-between w-full gap-2", children: [
+            /* @__PURE__ */ e("p", { id: `${r}-title`, className: k, children: f }),
+            /* @__PURE__ */ e(y, { onClick: m })
+          ] }),
+          i && /* @__PURE__ */ e("p", { id: `${r}-description`, className: "text-body-3-r text-ds-text-strong w-full", children: i }),
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-end gap-2 w-full", children: [
+            /* @__PURE__ */ e(h, { variant: "outlined", color: "blue", size: "lg", onClick: m, children: o }),
+            /* @__PURE__ */ e(h, { variant: "filled", color: "blue", size: "lg", onClick: x, children: c })
+          ] })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+const I = {
+  lg: "w-[1000px] h-[437px]",
+  md: "w-[800px] h-[437px]",
+  sm: "w-[360px] h-[370px]"
+};
+function q({
+  open: l,
+  title: f,
+  description: i,
+  size: o = "sm",
+  cancelLabel: c = "닫기",
+  confirmLabel: s = "확인",
+  onCancel: d,
+  onConfirm: t,
+  onClose: n,
+  children: r,
+  className: m
+}) {
+  const u = b.useId(), x = b.useCallback(() => {
+    d == null || d(), n();
+  }, [d, n]), $ = p(l, x);
+  if (!l) return null;
+  const j = () => {
+    t == null || t(), n();
+  };
+  return v(
+    /* @__PURE__ */ e(w, { children: /* @__PURE__ */ a(
+      "div",
+      {
+        ref: $,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": `${u}-title`,
+        "aria-describedby": i ? `${u}-description` : void 0,
+        tabIndex: -1,
+        className: g(N, I[o], m),
+        children: [
+          /* @__PURE__ */ a("div", { className: "flex flex-col gap-3 w-full shrink-0", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center justify-between w-full gap-2", children: [
+              /* @__PURE__ */ e("p", { id: `${u}-title`, className: k, children: f }),
+              /* @__PURE__ */ e(y, { onClick: x })
+            ] }),
+            i && /* @__PURE__ */ e("p", { id: `${u}-description`, className: "text-body-3-r text-ds-text-strong w-full", children: i })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 bg-ds-surface-normal rounded-ds-md w-full overflow-y-auto", children: r }),
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-end gap-2 w-full shrink-0", children: [
+            /* @__PURE__ */ e(h, { variant: "outlined", color: "blue", size: "lg", onClick: x, children: c }),
+            /* @__PURE__ */ e(h, { variant: "filled", color: "blue", size: "lg", onClick: j, children: s })
+          ] })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+export {
+  X as ActionModal,
+  q as ContentModal,
+  S as InformationModal
+};

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

@@ -10,6 +10,8 @@ export interface PaginationProps {
     showTopButton?: boolean;
     /** TOP 버튼 클릭 핸들러 */
     onTopClick?: () => void;
+    /** 테두리 표시 여부. 기본값: true */
+    bordered?: boolean;
     className?: string;
 }
 declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/pagination.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { DoubleArrowLeftIcon as v, ArrowLeftIcon as N, ArrowRightIcon as p, DoubleArrowRightIcon as w } from "../../lib/icons.js";
+import { cn as c } from "../../lib/utils.js";
+import * as j from "react";
+const A = j.forwardRef(
+  ({
+    page: e,
+    totalPages: a,
+    onPageChange: r,
+    showTopButton: u = !1,
+    onTopClick: m,
+    bordered: f = !0,
+    className: x
+  }, h) => {
+    const o = e <= 1, i = e >= a, d = Math.floor((e - 1) / 5) * 5 + 1, y = Array.from(
+      { length: Math.min(5, a - d + 1) },
+      (n, k) => d + k
+    ), s = "inline-flex items-center justify-center text-ds-text-normal transition-colors focus-visible:outline-none", l = "inline-flex items-center justify-center text-ds-text-disabled cursor-not-allowed";
+    return /* @__PURE__ */ b("div", { ref: h, className: c("flex items-center gap-3", x), children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: c(
+            "flex h-9 items-center overflow-hidden px-4 rounded-lg bg-ds-background-default",
+            f && "border border-ds-line-normal"
+          ),
+          children: /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                "aria-label": "첫 페이지",
+                disabled: o,
+                onClick: () => !o && r(1),
+                className: o ? l : s,
+                children: /* @__PURE__ */ t(v, {})
+              }
+            ),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                "aria-label": "이전 페이지",
+                disabled: o,
+                onClick: () => !o && r(e - 1),
+                className: o ? l : s,
+                children: /* @__PURE__ */ t(N, {})
+              }
+            ),
+            y.map((n) => /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                "aria-label": `${n} 페이지`,
+                "aria-current": n === e ? "page" : void 0,
+                onClick: () => r(n),
+                className: c(
+                  "size-6 rounded-full inline-flex items-center justify-center shrink-0 text-body-3-m transition-colors focus-visible:outline-none",
+                  n === e ? "text-ds-text-strong" : "text-ds-text-disabled"
+                ),
+                children: n
+              },
+              n
+            )),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                "aria-label": "다음 페이지",
+                disabled: i,
+                onClick: () => !i && r(e + 1),
+                className: i ? l : s,
+                children: /* @__PURE__ */ t(p, {})
+              }
+            ),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                "aria-label": "마지막 페이지",
+                disabled: i,
+                onClick: () => !i && r(a),
+                className: i ? l : s,
+                children: /* @__PURE__ */ t(w, {})
+              }
+            )
+          ] })
+        }
+      ),
+      u && /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: m,
+          className: "h-9 px-3.5 rounded-lg border border-ds-line-normal bg-ds-background-default text-body-2-m text-ds-text-strong shrink-0 transition-colors focus-visible:outline-none",
+          children: "TOP으로"
+        }
+      )
+    ] });
+  }
+);
+A.displayName = "Pagination";
+export {
+  A as Pagination
+};

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

@@ -2,6 +2,13 @@ import * as React from "react";
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
     /** 선택 시 value를 전달하는 핸들러 */
     onChange?: (value: string) => void;
+    /**
+     * 라디오 옆에 표시할 라벨 텍스트.
+     * 이 컴포넌트는 자체적으로 `<label>`을 렌더하므로, 밖에서 `<label>`로 감싸면
+     * label이 중첩되어 연결이 깨진다. 텍스트는 반드시 여기로 넘긴다.
+     * (텍스트 없이 쓸 때는 `aria-label`을 지정할 것)
+     */
+    children?: React.ReactNode;
 }
 declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export { Radio };

package/dist/components/ui/radio.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { RadioCheckedDisabledIcon as p, RadioUncheckedDisabledIcon as f, RadioCheckedIcon as R, RadioUncheckedIcon as k } from "../../lib/icons.js";
+import { cn as x } from "../../lib/utils.js";
+import * as u from "react";
+const I = u.forwardRef(
+  ({ className: a, checked: o, disabled: r, onChange: i, value: c, children: s, ...n }, t) => {
+    const l = r ? o ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(f, {}) : o ? /* @__PURE__ */ e(R, {}) : /* @__PURE__ */ e(k, {});
+    return /* @__PURE__ */ d(
+      "label",
+      {
+        className: x(
+          "relative inline-flex items-center gap-1",
+          s ? "" : "shrink-0",
+          r ? "cursor-not-allowed" : "cursor-pointer",
+          a
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "radio",
+              ref: t,
+              checked: o,
+              disabled: r,
+              value: c,
+              onChange: (m) => m.target.checked && (i == null ? void 0 : i(String(c ?? ""))),
+              className: "sr-only",
+              ...n
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "shrink-0 inline-flex", children: l }),
+          s
+        ]
+      }
+    );
+  }
+);
+I.displayName = "Radio";
+export {
+  I as Radio
+};

package/dist/components/ui/search-field.d.ts

@@ -1,3 +1,4 @@
+import { DsSize } from '../../lib/size';
 import * as React from "react";
 export interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 라벨 텍스트 */
@@ -6,8 +7,8 @@ export interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     showLabel?: boolean;
     /** 검색 아이콘 표시 여부. 기본값: true */
     showIcon?: boolean;
-    /** 크기. 기본값: "large" */
-    size?: "large" | "medium" | "small";
+    /** 크기. 기본값: "lg" */
+    size?: Extract<DsSize, "lg" | "md" | "sm">;
     /** 에러 메시지. 표시 시 필드에 빨간 테두리 적용 */
     error?: string;
     /** 필드 하단 힌트 텍스트 */

package/dist/components/ui/search-field.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { SearchIcon as v, CloseIcon as w } from "../../lib/icons.js";
+import { cn as r } from "../../lib/utils.js";
+import * as b from "react";
+const f = {
+  lg: {
+    container: "h-11 px-3 gap-1.5",
+    text: "text-body-2-r"
+  },
+  md: {
+    container: "h-9 px-3 gap-1.5",
+    text: "text-body-3-r"
+  },
+  sm: {
+    container: "h-8 px-3 gap-1.5",
+    text: "text-body-3-r"
+  }
+}, k = b.forwardRef(
+  ({
+    label: a,
+    showLabel: h = !0,
+    showIcon: u = !0,
+    size: d = "lg",
+    error: e,
+    hint: s,
+    onClear: o,
+    wrapperClassName: g,
+    className: y,
+    disabled: n,
+    value: i,
+    ...l
+  }, N) => {
+    const I = !n && !!o && !!i, c = b.useId(), x = l.id ?? c, m = `${c}-description`;
+    return /* @__PURE__ */ p("div", { className: r("flex flex-col gap-2", g), children: [
+      h && a && /* @__PURE__ */ t("label", { htmlFor: x, className: "text-body-2-r text-ds-text-strong", children: a }),
+      /* @__PURE__ */ p(
+        "div",
+        {
+          className: r(
+            "flex items-center overflow-hidden bg-ds-background-default border rounded-lg transition-colors",
+            e ? "border-ds-primary-red-normal" : "border-ds-line-normal hover:border-ds-line-strong focus-within:border-ds-primary-blue-normal",
+            n && "bg-ds-surface-normal",
+            f[d].container
+          ),
+          children: [
+            u && /* @__PURE__ */ t(v, { className: "shrink-0 text-ds-text-normal" }),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                ref: N,
+                id: x,
+                value: i,
+                "aria-invalid": e ? !0 : void 0,
+                "aria-describedby": e || s ? m : void 0,
+                className: r(
+                  "flex-1 min-w-0 bg-transparent outline-none font-sans",
+                  "text-ds-text-strong placeholder:text-ds-text-normal",
+                  "disabled:text-ds-text-disabled",
+                  f[d].text,
+                  y
+                ),
+                disabled: n,
+                ...l
+              }
+            ),
+            I && /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: o,
+                "aria-label": "검색어 지우기",
+                className: "flex items-center justify-center",
+                tabIndex: -1,
+                children: /* @__PURE__ */ t(w, { className: "shrink-0 text-ds-text-normal" })
+              }
+            )
+          ]
+        }
+      ),
+      (e || s) && /* @__PURE__ */ t(
+        "p",
+        {
+          id: m,
+          className: r(
+            "text-body-4-r",
+            e ? "text-ds-primary-red-normal" : "text-ds-text-normal"
+          ),
+          children: e ?? s
+        }
+      )
+    ] });
+  }
+);
+k.displayName = "SearchField";
+export {
+  k as SearchField
+};

package/dist/components/ui/table.js

@@ -0,0 +1,206 @@
+"use client";
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import { InfoIcon as F, SortArrowIcon as P } from "../../lib/icons.js";
+import { cn as g } from "../../lib/utils.js";
+import * as h from "react";
+import { Checkbox as j } from "./checkbox.js";
+const L = {
+  borderRight: "3px solid var(--ds-line-normal)"
+}, w = h.forwardRef(
+  ({ className: s, ...r }, a) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: a,
+      role: "table",
+      className: g("w-full overflow-x-auto", s),
+      ...r
+    }
+  )
+);
+w.displayName = "TableRoot";
+const E = h.forwardRef(
+  (s, r) => /* @__PURE__ */ i("div", { ref: r, role: "rowgroup", ...s })
+);
+E.displayName = "TableHead";
+const H = h.forwardRef(
+  (s, r) => /* @__PURE__ */ i("div", { ref: r, role: "rowgroup", ...s })
+);
+H.displayName = "TableBody";
+const N = h.forwardRef(
+  ({ className: s, hoverable: r = !0, selected: a, ...n }, l) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: l,
+      role: "row",
+      "aria-selected": a,
+      className: g(
+        "flex items-stretch w-full",
+        r && "hover:bg-ds-surface-strong",
+        a && "bg-ds-surface-normal",
+        s
+      ),
+      ...n
+    }
+  )
+);
+N.displayName = "TableRow";
+const k = h.forwardRef(
+  ({
+    className: s,
+    children: r,
+    sortable: a,
+    sortDirection: n,
+    onSort: l,
+    info: d,
+    fixedLine: c,
+    align: f = "left",
+    width: p,
+    style: b,
+    ...y
+  }, m) => {
+    const v = a && n != null;
+    return /* @__PURE__ */ x(
+      "div",
+      {
+        ref: m,
+        role: "columnheader",
+        tabIndex: a ? 0 : void 0,
+        "aria-sort": a ? n === "asc" ? "ascending" : n === "desc" ? "descending" : "none" : void 0,
+        className: g(
+          "flex h-10 items-center gap-1 border-t border-ds-line-normal bg-ds-surface-normal px-3 py-2.5",
+          p ? "shrink-0" : "flex-1 min-w-0",
+          f === "right" && "justify-end",
+          a && "cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ds-primary-blue-normal",
+          s
+        ),
+        style: { width: p, ...c ? L : {}, ...b },
+        onClick: a ? l : void 0,
+        onKeyDown: a ? (u) => {
+          (u.key === "Enter" || u.key === " ") && (u.preventDefault(), l == null || l());
+        } : void 0,
+        ...y,
+        children: [
+          /* @__PURE__ */ i("span", { className: "text-body-3-r text-ds-text-strong whitespace-nowrap", children: r }),
+          d && /* @__PURE__ */ i(F, { className: "shrink-0 text-ds-text-disabled" }),
+          a && /* @__PURE__ */ i(
+            P,
+            {
+              className: g(
+                "shrink-0 transition-transform duration-150",
+                v ? "text-ds-text-strong" : "text-ds-text-disabled",
+                n === "asc" && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+k.displayName = "TableHeaderCell";
+const T = h.forwardRef(
+  ({ className: s, align: r = "left", fixedLine: a, width: n, style: l, children: d, ...c }, f) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: f,
+      role: "cell",
+      className: g(
+        "flex items-center border-b border-ds-line-normal px-3 py-2",
+        n ? "shrink-0" : "flex-1 min-w-0",
+        r === "right" && "justify-end",
+        s
+      ),
+      style: { width: n, ...a ? L : {}, ...l },
+      ...c,
+      children: d
+    }
+  )
+);
+T.displayName = "TableCell";
+function q({
+  columns: s,
+  data: r,
+  sortKey: a,
+  sortDirection: n,
+  onSort: l,
+  selectedRows: d,
+  onRowSelect: c,
+  onSelectAll: f,
+  getRowKey: p,
+  onRowClick: b,
+  className: y
+}) {
+  const m = d !== void 0, v = m && r.length > 0 && d.length === r.length, u = m && d.length > 0 && d.length < r.length, B = (e) => {
+    if (!l) return;
+    l(e, a === e && n === "asc" ? "desc" : "asc");
+  };
+  return /* @__PURE__ */ x(w, { className: y, children: [
+    /* @__PURE__ */ i(E, { children: /* @__PURE__ */ x(N, { hoverable: !1, children: [
+      m && /* @__PURE__ */ i(k, { width: 40, className: "justify-center px-1.5", children: /* @__PURE__ */ i(
+        j,
+        {
+          "aria-label": "전체 선택",
+          checked: v,
+          indeterminate: u,
+          onChange: (e) => f == null ? void 0 : f(e)
+        }
+      ) }),
+      s.map((e) => /* @__PURE__ */ i(
+        k,
+        {
+          sortable: e.sortable,
+          sortDirection: e.sortable && a === e.key ? n ?? null : null,
+          onSort: () => B(e.key),
+          info: e.info,
+          fixedLine: e.fixedLine,
+          align: e.align,
+          width: e.width,
+          children: e.header
+        },
+        e.key
+      ))
+    ] }) }),
+    /* @__PURE__ */ i(H, { children: r.map((e, o) => {
+      const _ = p ? p(e, o) : o, C = m && d.includes(o);
+      return /* @__PURE__ */ x(
+        N,
+        {
+          selected: C,
+          onClick: b ? () => b(e, o) : void 0,
+          className: b ? "cursor-pointer" : void 0,
+          children: [
+            m && /* @__PURE__ */ i(T, { width: 40, className: "justify-center px-1.5", children: /* @__PURE__ */ i(
+              j,
+              {
+                "aria-label": `${o + 1}번째 행 선택`,
+                checked: C,
+                onChange: (t) => c == null ? void 0 : c(o, t),
+                onClick: (t) => t.stopPropagation()
+              }
+            ) }),
+            s.map((t) => /* @__PURE__ */ i(
+              T,
+              {
+                align: t.align,
+                fixedLine: t.fixedLine,
+                width: t.width,
+                children: /* @__PURE__ */ i("span", { className: "text-body-3-r text-ds-text-strong w-full", children: t.cell ? t.cell(e, o) : String(e[t.key] ?? "") })
+              },
+              t.key
+            ))
+          ]
+        },
+        _
+      );
+    }) })
+  ] });
+}
+export {
+  q as Table,
+  H as TableBody,
+  T as TableCell,
+  E as TableHead,
+  k as TableHeaderCell,
+  w as TableRoot,
+  N as TableRow
+};