@pylerai/design-system 2.2.1 → 2.3.0

package/dist/components/ui/dropdown.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { DropdownArrowIcon as V, SelectCheckIcon as ee, CheckboxCheckedIcon as te, CheckboxUncheckedIcon as re, RadioCheckedIcon as se, RadioUncheckedIcon as ne } from "../../lib/icons.js";
-import { cn as m } from "../../lib/utils.js";
-import * as n from "react";
-import { Button as B } from "./button.js";
-const v = {
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { DropdownArrowIcon as V, SelectCheckIcon as ee, CheckboxCheckedIcon as re, CheckboxUncheckedIcon as te, RadioCheckedIcon as ne, RadioUncheckedIcon as se } from "../../lib/icons.js";
+import { cn as f } from "../../lib/utils.js";
+import * as s from "react";
+import { Button as U } from "./button.js";
+const k = {
   lg: {
     trigger: "h-11 pl-3 pr-2 gap-1.5",
     option: "h-11 pl-3 pr-2",
@@ -20,153 +20,151 @@ const v = {
     option: "h-8 pl-3 pr-2",
     text: "text-body-3-r"
   }
-}, ae = n.forwardRef(
+}, ae = s.forwardRef(
   ({
-    type: d = "default",
+    type: c = "default",
     options: i,
-    value: A,
-    onValueChange: w,
-    values: a,
-    onValuesChange: N,
-    placeholder: L = "선택해주세요",
+    value: R,
+    onValueChange: K,
+    values: m,
+    onValuesChange: T,
+    placeholder: D = "선택해주세요",
     label: h,
-    showLabel: y = !0,
-    require: M,
+    showLabel: v = !0,
+    require: E,
     size: g = "lg",
     disabled: x,
-    readOnly: I,
+    readOnly: w,
     error: b,
-    hint: S,
-    leftIcon: O,
-    showButtons: H,
-    cancelLabel: F = "취소",
-    confirmLabel: G = "확인",
-    onCancel: R,
-    onConfirm: D,
-    wrapperClassName: J,
-    className: P,
-    "aria-label": Q
-  }, W) => {
-    const [s, o] = n.useState(!1), [c, k] = n.useState(-1), [U, K] = n.useState("keyboard"), E = n.useRef(null), T = n.useRef(null), q = n.useRef(null), f = n.useId(), j = (e) => `${f}-option-${e}`;
-    n.useEffect(() => {
-      const e = (t) => {
-        E.current && !E.current.contains(t.target) && o(!1);
+    hint: N,
+    leftIcon: j,
+    showButtons: q,
+    cancelLabel: z = "취소",
+    confirmLabel: B = "확인",
+    onCancel: H,
+    onConfirm: F,
+    wrapperClassName: G,
+    className: J,
+    "aria-label": P
+  }, Q) => {
+    const [n, l] = s.useState(!1), [a, p] = s.useState(-1), [$, A] = s.useState("keyboard"), y = s.useRef(null), L = s.useRef(null), M = s.useRef(null), d = s.useId(), I = (e) => `${d}-option-${e}`;
+    s.useEffect(() => {
+      const e = (r) => {
+        y.current && !y.current.contains(r.target) && l(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, []), n.useEffect(() => {
-      s || k(-1);
-    }, [s]), n.useEffect(() => {
-      var e, t;
-      !s || c < 0 || (t = (e = T.current) == null ? void 0 : e.querySelector(`#${CSS.escape(j(c))}`)) == null || t.scrollIntoView({ block: "nearest" });
-    }, [s, c]);
-    const X = (e) => d === "checkbox" ? (a == null ? void 0 : a.includes(e)) ?? !1 : e === A, $ = i.find((e) => e.value === A), Y = () => d === "checkbox" ? !a || a.length === 0 ? L : i.filter((t) => a.includes(t.value)).map((t) => t.label).join(", ") : $ ? $.label : L, Z = () => {
-      x || I || o((e) => !e);
-    }, z = (e) => {
-      if (d === "checkbox") {
-        const t = a ?? [], l = t.includes(e) ? t.filter((p) => p !== e) : [...t, e];
-        N == null || N(l);
+    }, []), s.useEffect(() => {
+      n || p(-1);
+    }, [n]), s.useEffect(() => {
+      !n || a < 0 || L.current?.querySelector(`#${CSS.escape(I(a))}`)?.scrollIntoView({ block: "nearest" });
+    }, [n, a]);
+    const W = (e) => c === "checkbox" ? m?.includes(e) ?? !1 : e === R, C = i.find((e) => e.value === R), X = () => c === "checkbox" ? !m || m.length === 0 ? D : i.filter((r) => m.includes(r.value)).map((r) => r.label).join(", ") : C ? C.label : D, Y = () => {
+      x || w || l((e) => !e);
+    }, O = (e) => {
+      if (c === "checkbox") {
+        const r = m ?? [], o = r.includes(e) ? r.filter((S) => S !== e) : [...r, e];
+        T?.(o);
       } else
-        w == null || w(e), o(!1);
-    }, _ = d === "checkbox" ? ((a == null ? void 0 : a.length) ?? 0) > 0 : !!$, C = (e) => {
-      var l;
-      if (x || I) return;
-      const t = (p) => {
-        e.preventDefault(), s || o(!0), K("keyboard"), k(p);
+        K?.(e), l(!1);
+    }, Z = c === "checkbox" ? (m?.length ?? 0) > 0 : !!C, _ = (e) => {
+      if (x || w) return;
+      const r = (o) => {
+        e.preventDefault(), n || l(!0), A("keyboard"), p(o);
       };
       switch (e.key) {
         case "ArrowDown":
-          return t(s ? Math.min(c + 1, i.length - 1) : 0);
+          return r(n ? Math.min(a + 1, i.length - 1) : 0);
         case "ArrowUp":
-          return t(s ? Math.max(c - 1, 0) : i.length - 1);
+          return r(n ? Math.max(a - 1, 0) : i.length - 1);
         case "Home":
-          return s ? t(0) : void 0;
+          return n ? r(0) : void 0;
         case "End":
-          return s ? t(i.length - 1) : void 0;
+          return n ? r(i.length - 1) : void 0;
         case "Enter":
         case " ":
-          e.preventDefault(), s ? c >= 0 && z(i[c].value) : o(!0);
+          e.preventDefault(), n ? a >= 0 && O(i[a].value) : l(!0);
           return;
         case "Escape":
-          s && (e.preventDefault(), o(!1), (l = q.current) == null || l.focus());
+          n && (e.preventDefault(), l(!1), M.current?.focus());
           return;
         case "Tab":
-          o(!1);
+          l(!1);
           return;
         default:
           return;
       }
     };
-    return /* @__PURE__ */ u("div", { ref: W, className: m("flex flex-col gap-2", J), children: [
-      y && h && /* @__PURE__ */ u("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
-        /* @__PURE__ */ r("span", { id: `${f}-label`, className: "text-body-2-r text-ds-text-strong", children: h }),
-        M && /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "text-body-2-r text-ds-primary-red-normal", children: "*" })
+    return /* @__PURE__ */ u("div", { ref: Q, className: f("flex flex-col gap-2", G), children: [
+      v && h && /* @__PURE__ */ u("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
+        /* @__PURE__ */ t("span", { id: `${d}-label`, className: "text-body-2-r text-ds-text-strong", children: h }),
+        E && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "text-body-2-r text-ds-primary-red-normal", children: "*" })
       ] }),
-      /* @__PURE__ */ u("div", { ref: E, className: "relative", children: [
+      /* @__PURE__ */ u("div", { ref: y, className: "relative", children: [
         /* @__PURE__ */ u(
           "button",
           {
-            ref: q,
+            ref: M,
             type: "button",
             role: "combobox",
-            "aria-expanded": s,
+            "aria-expanded": n,
             "aria-haspopup": "listbox",
-            "aria-controls": s ? f : void 0,
-            "aria-activedescendant": s && c >= 0 ? j(c) : void 0,
-            "aria-labelledby": y && h ? `${f}-label` : void 0,
-            "aria-label": y && h ? void 0 : Q,
+            "aria-controls": n ? d : void 0,
+            "aria-activedescendant": n && a >= 0 ? I(a) : void 0,
+            "aria-labelledby": v && h ? `${d}-label` : void 0,
+            "aria-label": v && h ? void 0 : P,
             "aria-invalid": b ? !0 : void 0,
-            "aria-describedby": b || S ? `${f}-description` : void 0,
-            "aria-required": M || void 0,
+            "aria-describedby": b || N ? `${d}-description` : void 0,
+            "aria-required": E || void 0,
             disabled: x,
-            onClick: Z,
-            onKeyDown: C,
-            className: m(
+            onClick: Y,
+            onKeyDown: _,
+            className: f(
               "flex items-center w-full rounded-ds-md border transition-colors",
-              x ? "bg-ds-surface-strong border-ds-line-normal cursor-not-allowed" : I ? "bg-ds-surface-normal border-ds-line-normal cursor-default" : b ? "bg-ds-background-default border-ds-primary-red-normal hover:bg-ds-surface-normal" : s ? "bg-ds-background-default border-ds-primary-blue-normal" : "bg-ds-background-default border-ds-line-normal hover:bg-ds-surface-normal hover:border-ds-primary-blue-normal",
-              v[g].trigger,
-              P
+              x ? "bg-ds-surface-strong border-ds-line-normal cursor-not-allowed" : w ? "bg-ds-surface-normal border-ds-line-normal cursor-default" : b ? "bg-ds-background-default border-ds-primary-red-normal hover:bg-ds-surface-normal" : n ? "bg-ds-background-default border-ds-primary-blue-normal" : "bg-ds-background-default border-ds-line-normal hover:bg-ds-surface-normal hover:border-ds-primary-blue-normal",
+              k[g].trigger,
+              J
             ),
             children: [
-              O && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center text-ds-icon-normal", children: O }),
-              /* @__PURE__ */ r(
+              j && /* @__PURE__ */ t("span", { className: "shrink-0 flex items-center justify-center text-ds-icon-normal", children: j }),
+              /* @__PURE__ */ t(
                 "span",
                 {
-                  className: m(
+                  className: f(
                     "flex-1 min-w-0 text-left truncate font-sans",
-                    v[g].text,
-                    _ ? "text-ds-text-strong" : x ? "text-ds-text-disabled" : "text-ds-text-normal"
+                    k[g].text,
+                    Z ? "text-ds-text-strong" : x ? "text-ds-text-disabled" : "text-ds-text-normal"
                   ),
-                  children: Y()
+                  children: X()
                 }
               ),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ t(
                 "span",
                 {
-                  className: m(
+                  className: f(
                     "shrink-0 flex items-center justify-center transition-transform",
-                    s && "rotate-180",
-                    x ? "text-ds-text-disabled" : "text-ds-text-normal"
+                    n && "rotate-180",
+                    x ? "text-ds-text-disabled" : "text-ds-icon-strong"
                   ),
-                  children: /* @__PURE__ */ r(V, {})
+                  children: /* @__PURE__ */ t(V, {})
                 }
               )
             ]
           }
         ),
-        s && /* @__PURE__ */ u(
+        n && /* @__PURE__ */ u(
           "ul",
           {
-            ref: T,
-            id: f,
+            ref: L,
+            id: d,
             role: "listbox",
-            "aria-multiselectable": d === "checkbox" ? !0 : void 0,
+            "aria-multiselectable": c === "checkbox" ? !0 : void 0,
             className: "absolute top-full left-0 z-50 mt-1 min-w-full w-max max-w-sm bg-ds-background-default border border-ds-line-normal rounded-ds-md p-1 shadow-ds-default",
             onMouseLeave: () => {
-              U === "mouse" && k(-1);
+              $ === "mouse" && p(-1);
             },
             children: [
-              i.map((e, t) => {
-                const l = X(e.value), p = t === c;
+              i.map((e, r) => {
+                const o = W(e.value), S = r === a;
                 return (
                   // 키보드 조작은 aria-activedescendant 패턴에 따라 combobox 트리거의
                   // onKeyDown이 전담한다(옵션은 포커스를 받지 않는 것이 WAI-ARIA 권고).
@@ -175,65 +173,65 @@ const v = {
                   /* @__PURE__ */ u(
                     "li",
                     {
-                      id: j(t),
+                      id: I(r),
                       role: "option",
-                      "aria-selected": l,
-                      onClick: () => z(e.value),
+                      "aria-selected": o,
+                      onClick: () => O(e.value),
                       onMouseEnter: () => {
-                        K("mouse"), k(t);
+                        A("mouse"), p(r);
                       },
-                      className: m(
+                      className: f(
                         "flex items-center rounded-ds-md cursor-pointer gap-1.5 transition-colors",
-                        v[g].option,
-                        l ? "bg-ds-surface-normal" : "bg-ds-background-default hover:bg-ds-surface-normal",
+                        k[g].option,
+                        o ? "bg-ds-surface-normal" : "bg-ds-background-default hover:bg-ds-surface-normal",
                         // 키보드 이동 위치 표시 (마우스 hover와 구분되도록 링으로, 키보드 이동에만)
-                        p && U === "keyboard" && "ring-1 ring-inset ring-ds-primary-blue-normal"
+                        S && $ === "keyboard" && "ring-1 ring-inset ring-ds-primary-blue-normal"
                       ),
                       children: [
-                        /* @__PURE__ */ r(
+                        /* @__PURE__ */ t(
                           "span",
                           {
-                            className: m(
+                            className: f(
                               "flex-1 min-w-0 truncate font-sans",
-                              v[g].text,
+                              k[g].text,
                               "text-ds-text-strong"
                             ),
                             children: e.label
                           }
                         ),
-                        d === "default" && l && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center text-ds-text-strong", children: /* @__PURE__ */ r(ee, {}) }),
-                        d === "checkbox" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ r(te, {}) : /* @__PURE__ */ r(re, {}) }),
-                        d === "radio" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ r(se, {}) : /* @__PURE__ */ r(ne, {}) })
+                        c === "default" && o && /* @__PURE__ */ t("span", { className: "shrink-0 flex items-center justify-center text-ds-text-strong", children: /* @__PURE__ */ t(ee, {}) }),
+                        c === "checkbox" && /* @__PURE__ */ t("span", { className: "shrink-0 flex items-center justify-center", children: o ? /* @__PURE__ */ t(re, {}) : /* @__PURE__ */ t(te, {}) }),
+                        c === "radio" && /* @__PURE__ */ t("span", { className: "shrink-0 flex items-center justify-center", children: o ? /* @__PURE__ */ t(ne, {}) : /* @__PURE__ */ t(se, {}) })
                       ]
                     },
                     e.value
                   )
                 );
               }),
-              H && /* @__PURE__ */ u("li", { className: "flex gap-2 pt-1", children: [
-                /* @__PURE__ */ r(
-                  B,
+              q && /* @__PURE__ */ u("li", { className: "flex gap-2 pt-1", children: [
+                /* @__PURE__ */ t(
+                  U,
                   {
                     variant: "outlined",
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      R == null || R(), o(!1);
+                      H?.(), l(!1);
                     },
-                    children: F
+                    children: z
                   }
                 ),
-                /* @__PURE__ */ r(
-                  B,
+                /* @__PURE__ */ t(
+                  U,
                   {
                     variant: "filled",
                     color: "blue",
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      D == null || D(), o(!1);
+                      F?.(), l(!1);
                     },
-                    children: G
+                    children: B
                   }
                 )
               ] })
@@ -241,15 +239,15 @@ const v = {
           }
         )
       ] }),
-      (b || S) && /* @__PURE__ */ r(
+      (b || N) && /* @__PURE__ */ t(
         "p",
         {
-          id: `${f}-description`,
-          className: m(
+          id: `${d}-description`,
+          className: f(
             "text-body-4-r",
             b ? "text-ds-primary-red-normal" : "text-ds-text-normal"
           ),
-          children: b ?? S
+          children: b ?? N
         }
       )
     ] });

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

@@ -8,9 +8,11 @@ export interface InformationModalProps {
     confirmLabel?: string;
     onConfirm?: () => void;
     onClose: () => void;
+    /** 배경 딤 표시 여부. 기본값: true */
+    dim?: boolean;
     className?: string;
 }
-declare function InformationModal({ open, title, description, confirmLabel, onConfirm, onClose, className, }: InformationModalProps): React.ReactPortal | null;
+declare function InformationModal({ open, title, description, confirmLabel, onConfirm, onClose, dim, className, }: InformationModalProps): React.ReactPortal | null;
 export interface ActionModalProps {
     open: boolean;
     title: React.ReactNode;
@@ -22,9 +24,11 @@ export interface ActionModalProps {
     onCancel?: () => void;
     onConfirm?: () => void;
     onClose: () => void;
+    /** 배경 딤 표시 여부. 기본값: true */
+    dim?: boolean;
     className?: string;
 }
-declare function ActionModal({ open, title, description, cancelLabel, confirmLabel, onCancel, onConfirm, onClose, className, }: ActionModalProps): React.ReactPortal | null;
+declare function ActionModal({ open, title, description, cancelLabel, confirmLabel, onCancel, onConfirm, onClose, dim, className, }: ActionModalProps): React.ReactPortal | null;
 export type ContentModalSize = Extract<DsSize, "lg" | "md" | "sm">;
 export interface ContentModalProps {
     open: boolean;
@@ -40,7 +44,9 @@ export interface ContentModalProps {
     onConfirm?: () => void;
     onClose: () => void;
     children?: React.ReactNode;
+    /** 배경 딤 표시 여부. 기본값: true */
+    dim?: boolean;
     className?: string;
 }
-declare function ContentModal({ open, title, description, size, cancelLabel, confirmLabel, onCancel, onConfirm, onClose, children, className, }: ContentModalProps): React.ReactPortal | null;
+declare function ContentModal({ open, title, description, size, cancelLabel, confirmLabel, onCancel, onConfirm, onClose, children, dim, className, }: ContentModalProps): React.ReactPortal | null;
 export { InformationModal, ActionModal, ContentModal };