@pylerai/design-system 2.2.0 → 2.3.0

package/dist/components/ui/dropdown.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { DropdownArrowIcon as _, SelectCheckIcon as C, CheckboxCheckedIcon as V, CheckboxUncheckedIcon as ee, RadioCheckedIcon as te, RadioUncheckedIcon as re } from "../../lib/icons.js";
-import { cn as m } from "../../lib/utils.js";
-import * as l from "react";
-import { Button as q } from "./button.js";
+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",
@@ -20,150 +20,151 @@ const k = {
     option: "h-8 pl-3 pr-2",
     text: "text-body-3-r"
   }
-}, se = l.forwardRef(
+}, ae = s.forwardRef(
   ({
-    type: i = "default",
-    options: o,
-    value: A,
-    onValueChange: w,
-    values: n,
-    onValuesChange: N,
-    placeholder: L = "선택해주세요",
+    type: c = "default",
+    options: i,
+    value: R,
+    onValueChange: K,
+    values: m,
+    onValuesChange: T,
+    placeholder: D = "선택해주세요",
     label: h,
     showLabel: v = !0,
-    require: M,
+    require: E,
     size: g = "lg",
     disabled: x,
-    readOnly: y,
+    readOnly: w,
     error: b,
-    hint: I,
-    leftIcon: O,
-    showButtons: z,
-    cancelLabel: B = "취소",
-    confirmLabel: H = "확인",
-    onCancel: R,
-    onConfirm: S,
-    wrapperClassName: F,
-    className: G,
-    "aria-label": J
-  }, P) => {
-    const [s, d] = l.useState(!1), [c, D] = l.useState(-1), E = l.useRef(null), U = l.useRef(null), K = l.useRef(null), f = l.useId(), j = (e) => `${f}-option-${e}`;
-    l.useEffect(() => {
-      const e = (t) => {
-        E.current && !E.current.contains(t.target) && d(!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);
-    }, []), l.useEffect(() => {
-      s || D(-1);
-    }, [s]), l.useEffect(() => {
-      var e, t;
-      !s || c < 0 || (t = (e = U.current) == null ? void 0 : e.querySelector(`#${CSS.escape(j(c))}`)) == null || t.scrollIntoView({ block: "nearest" });
-    }, [s, c]);
-    const Q = (e) => i === "checkbox" ? (n == null ? void 0 : n.includes(e)) ?? !1 : e === A, $ = o.find((e) => e.value === A), W = () => i === "checkbox" ? !n || n.length === 0 ? L : o.filter((t) => n.includes(t.value)).map((t) => t.label).join(", ") : $ ? $.label : L, X = () => {
-      x || y || d((e) => !e);
-    }, T = (e) => {
-      if (i === "checkbox") {
-        const t = n ?? [], a = t.includes(e) ? t.filter((p) => p !== e) : [...t, e];
-        N == null || N(a);
+    }, []), 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), d(!1);
-    }, Y = i === "checkbox" ? ((n == null ? void 0 : n.length) ?? 0) > 0 : !!$, Z = (e) => {
-      var a;
-      if (x || y) return;
-      const t = (p) => {
-        e.preventDefault(), s || d(!0), D(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, o.length - 1) : 0);
+          return r(n ? Math.min(a + 1, i.length - 1) : 0);
         case "ArrowUp":
-          return t(s ? Math.max(c - 1, 0) : o.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(o.length - 1) : void 0;
+          return n ? r(i.length - 1) : void 0;
         case "Enter":
         case " ":
-          e.preventDefault(), s ? c >= 0 && T(o[c].value) : d(!0);
+          e.preventDefault(), n ? a >= 0 && O(i[a].value) : l(!0);
           return;
         case "Escape":
-          s && (e.preventDefault(), d(!1), (a = K.current) == null || a.focus());
+          n && (e.preventDefault(), l(!1), M.current?.focus());
           return;
         case "Tab":
-          d(!1);
+          l(!1);
           return;
         default:
           return;
       }
     };
-    return /* @__PURE__ */ u("div", { ref: P, className: m("flex flex-col gap-2", F), 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__ */ 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: "*" })
+        /* @__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: K,
+            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": v && h ? `${f}-label` : void 0,
-            "aria-label": v && h ? void 0 : J,
+            "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 || I ? `${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: X,
-            onKeyDown: Z,
-            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" : y ? "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-line-strong",
+              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,
-              G
+              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",
                     k[g].text,
-                    Y ? "text-ds-text-strong" : x ? "text-ds-text-disabled" : "text-ds-text-normal"
+                    Z ? "text-ds-text-strong" : x ? "text-ds-text-disabled" : "text-ds-text-normal"
                   ),
-                  children: W()
+                  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(_, {})
+                  children: /* @__PURE__ */ t(V, {})
                 }
               )
             ]
           }
         ),
-        s && /* @__PURE__ */ u(
+        n && /* @__PURE__ */ u(
           "ul",
           {
-            ref: U,
-            id: f,
+            ref: L,
+            id: d,
             role: "listbox",
-            "aria-multiselectable": i === "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: () => {
+              $ === "mouse" && p(-1);
+            },
             children: [
-              o.map((e, t) => {
-                const a = Q(e.value), p = t === c;
+              i.map((e, r) => {
+                const o = W(e.value), S = r === a;
                 return (
                   // 키보드 조작은 aria-activedescendant 패턴에 따라 combobox 트리거의
                   // onKeyDown이 전담한다(옵션은 포커스를 받지 않는 것이 WAI-ARIA 권고).
@@ -172,23 +173,25 @@ const k = {
                   /* @__PURE__ */ u(
                     "li",
                     {
-                      id: j(t),
+                      id: I(r),
                       role: "option",
-                      "aria-selected": a,
-                      onClick: () => T(e.value),
-                      onMouseEnter: () => D(t),
-                      className: m(
+                      "aria-selected": o,
+                      onClick: () => O(e.value),
+                      onMouseEnter: () => {
+                        A("mouse"), p(r);
+                      },
+                      className: f(
                         "flex items-center rounded-ds-md cursor-pointer gap-1.5 transition-colors",
                         k[g].option,
-                        a ? "bg-ds-surface-normal" : "bg-ds-background-default hover:bg-ds-surface-normal",
-                        // 키보드 이동 위치 표시 (마우스 hover와 구분되도록 링으로)
-                        p && "ring-1 ring-inset ring-ds-primary-blue-normal"
+                        o ? "bg-ds-surface-normal" : "bg-ds-background-default hover:bg-ds-surface-normal",
+                        // 키보드 이동 위치 표시 (마우스 hover와 구분되도록 링으로, 키보드 이동에만)
+                        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",
                               k[g].text,
                               "text-ds-text-strong"
@@ -196,39 +199,39 @@ const k = {
                             children: e.label
                           }
                         ),
-                        i === "default" && a && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center text-ds-text-strong", children: /* @__PURE__ */ r(C, {}) }),
-                        i === "checkbox" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: a ? /* @__PURE__ */ r(V, {}) : /* @__PURE__ */ r(ee, {}) }),
-                        i === "radio" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: a ? /* @__PURE__ */ r(te, {}) : /* @__PURE__ */ r(re, {}) })
+                        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
                   )
                 );
               }),
-              z && /* @__PURE__ */ u("li", { className: "flex gap-2 pt-1", children: [
-                /* @__PURE__ */ r(
-                  q,
+              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(), d(!1);
+                      H?.(), l(!1);
                     },
-                    children: B
+                    children: z
                   }
                 ),
-                /* @__PURE__ */ r(
-                  q,
+                /* @__PURE__ */ t(
+                  U,
                   {
                     variant: "filled",
                     color: "blue",
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      S == null || S(), d(!1);
+                      F?.(), l(!1);
                     },
-                    children: H
+                    children: B
                   }
                 )
               ] })
@@ -236,21 +239,21 @@ const k = {
           }
         )
       ] }),
-      (b || I) && /* @__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 ?? I
+          children: b ?? N
         }
       )
     ] });
   }
 );
-se.displayName = "Dropdown";
+ae.displayName = "Dropdown";
 export {
-  se as Dropdown
+  ae as Dropdown
 };

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 };