@pylerai/design-system 2.2.0 → 2.3.0

package/dist/components/ui/tabs.js

@@ -2,54 +2,54 @@
 import { jsx as h } from "react/jsx-runtime";
 import { cn as T } from "../../lib/utils.js";
 import * as o from "react";
-const A = o.createContext(null);
-function I() {
-  const e = o.useContext(A);
+const $ = o.createContext(null);
+function C() {
+  const e = o.useContext($);
   if (!e) throw new Error("TabsTrigger must be used within Tabs");
   return e;
 }
-const R = o.forwardRef(
+const A = o.forwardRef(
   ({
     value: e,
     defaultValue: t = "",
-    onValueChange: d,
-    variant: l = "underline",
-    children: i,
-    className: c
-  }, f) => {
-    const [x, p] = o.useState(t), g = e !== void 0, b = g ? e : x, m = o.useId(), [w, s] = o.useState(() => /* @__PURE__ */ new Set()), y = o.useCallback((u) => (s((a) => {
-      if (a.has(u)) return a;
-      const r = new Set(a);
-      return r.add(u), r;
-    }), () => s((a) => {
-      if (!a.has(u)) return a;
-      const r = new Set(a);
-      return r.delete(u), r;
-    })), []), k = (u) => {
-      g || p(u), d == null || d(u);
-    }, n = o.useMemo(
-      () => ({ value: b, onValueChange: k, variant: l, baseId: m, panels: w, registerPanel: y }),
+    onValueChange: l,
+    variant: a = "underline",
+    children: f,
+    className: x
+  }, b) => {
+    const [u, p] = o.useState(t), g = e !== void 0, i = g ? e : u, m = o.useId(), [w, n] = o.useState(() => /* @__PURE__ */ new Set()), y = o.useCallback((c) => (n((d) => {
+      if (d.has(c)) return d;
+      const r = new Set(d);
+      return r.add(c), r;
+    }), () => n((d) => {
+      if (!d.has(c)) return d;
+      const r = new Set(d);
+      return r.delete(c), r;
+    })), []), k = (c) => {
+      g || p(c), l?.(c);
+    }, s = o.useMemo(
+      () => ({ value: i, onValueChange: k, variant: a, baseId: m, panels: w, registerPanel: y }),
       // handleChange 는 렌더마다 새로 만들어지지만 참조하는 값이 아래 의존성에 모두 들어 있다
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [b, g, d, l, m, w, y]
+      [i, g, l, a, m, w, y]
     );
-    return /* @__PURE__ */ h(A.Provider, { value: n, children: /* @__PURE__ */ h("div", { ref: f, className: T("flex flex-col", c), children: i }) });
+    return /* @__PURE__ */ h($.Provider, { value: s, children: /* @__PURE__ */ h("div", { ref: b, className: T("flex flex-col", x), children: f }) });
   }
 );
-R.displayName = "Tabs";
-const P = o.forwardRef(
-  ({ children: e, className: t }, d) => {
-    const { variant: l } = I();
+A.displayName = "Tabs";
+const R = o.forwardRef(
+  ({ children: e, className: t }, l) => {
+    const { variant: a } = C();
     return /* @__PURE__ */ h(
       "div",
       {
-        ref: d,
+        ref: l,
         role: "tablist",
         className: T(
           "flex items-center",
-          l === "underline" && "gap-5",
-          l === "outline" && "gap-1",
-          l === "round" && "bg-ds-surface-strong p-1 rounded-ds-md",
+          a === "underline" && "gap-5",
+          a === "outline" && "gap-1",
+          a === "round" && "bg-ds-surface-strong p-1 rounded-ds-md",
           t
         ),
         children: e
@@ -57,93 +57,93 @@ const P = o.forwardRef(
     );
   }
 );
-P.displayName = "TabsList";
-const S = o.forwardRef(
-  ({ value: e, disabled: t, children: d, className: l, onClick: i, onKeyDown: c, ...f }, x) => {
-    const { value: p, onValueChange: g, variant: b, baseId: m, panels: w } = I(), s = p === e, y = w.has(e), k = (n) => {
-      if (c == null || c(n), n.defaultPrevented || !["ArrowRight", "ArrowLeft", "Home", "End"].includes(n.key)) return;
-      const a = n.currentTarget.closest('[role="tablist"]'), r = Array.from(
-        (a == null ? void 0 : a.querySelectorAll('[role="tab"]:not([disabled])')) ?? []
+R.displayName = "TabsList";
+const P = o.forwardRef(
+  ({ value: e, disabled: t, children: l, className: a, onClick: f, onKeyDown: x, ...b }, u) => {
+    const { value: p, onValueChange: g, variant: i, baseId: m, panels: w } = C(), n = p === e, y = w.has(e), k = (s) => {
+      if (x?.(s), s.defaultPrevented || !["ArrowRight", "ArrowLeft", "Home", "End"].includes(s.key)) return;
+      const d = s.currentTarget.closest('[role="tablist"]'), r = Array.from(
+        d?.querySelectorAll('[role="tab"]:not([disabled])') ?? []
       );
       if (r.length === 0) return;
-      n.preventDefault();
-      const N = r.indexOf(n.currentTarget), $ = n.key === "Home" ? 0 : n.key === "End" ? r.length - 1 : n.key === "ArrowRight" ? (N + 1 + r.length) % r.length : (N - 1 + r.length) % r.length;
-      r[$].focus(), r[$].click();
+      s.preventDefault();
+      const I = r.indexOf(s.currentTarget), N = s.key === "Home" ? 0 : s.key === "End" ? r.length - 1 : s.key === "ArrowRight" ? (I + 1 + r.length) % r.length : (I - 1 + r.length) % r.length;
+      r[N].focus(), r[N].click();
     };
     return /* @__PURE__ */ h(
       "button",
       {
-        ref: x,
+        ref: u,
         role: "tab",
         type: "button",
         id: `${m}-tab-${e}`,
-        "aria-selected": s,
+        "aria-selected": n,
         "aria-controls": y ? `${m}-panel-${e}` : void 0,
-        tabIndex: s ? 0 : -1,
+        tabIndex: n ? 0 : -1,
         disabled: t,
-        onClick: (n) => {
-          t || g(e), i == null || i(n);
+        onClick: (s) => {
+          t || g(e), f?.(s);
         },
         onKeyDown: k,
         className: T(
           "inline-flex items-center justify-center whitespace-nowrap shrink-0 transition-colors focus-visible:outline-none",
-          b === "underline" && [
+          i === "underline" && [
             "h-11 text-body-2-sb",
-            s && !t && "border-b-2 border-ds-text-strong text-ds-text-strong",
-            !s && !t && "text-ds-text-normal",
+            n && !t && "border-b-2 border-ds-text-strong text-ds-text-strong",
+            !n && !t && "text-ds-text-normal",
             t && "text-ds-text-disabled cursor-not-allowed"
           ],
-          b === "box" && [
+          i === "box" && [
             "h-10 px-3 rounded-ds-md text-body-3-m",
-            s && !t && "bg-ds-surface-normal text-ds-text-strong",
-            !s && !t && "bg-ds-background-default text-ds-text-normal",
+            n && !t && "bg-ds-surface-normal text-ds-text-strong",
+            !n && !t && "bg-ds-background-default text-ds-text-normal",
             t && "bg-ds-background-default text-ds-text-disabled cursor-not-allowed"
           ],
-          b === "outline" && [
+          i === "outline" && [
             "h-8 px-3 rounded-full text-body-4-m",
-            s && !t && "bg-ds-surface-normal text-ds-text-strong",
-            !s && !t && "bg-ds-background-default border border-ds-line-normal text-ds-text-normal",
+            n && !t && "bg-ds-surface-normal text-ds-text-strong",
+            !n && !t && "bg-ds-background-default border border-ds-line-normal text-ds-text-normal",
             t && "bg-ds-background-default border border-ds-line-normal text-ds-text-disabled cursor-not-allowed"
           ],
-          b === "round" && [
+          i === "round" && [
             "h-7 px-2.5 rounded text-body-4-r",
-            s && !t && "bg-ds-surface-alternative text-ds-text-strong",
-            !s && !t && "bg-ds-surface-strong text-ds-text-normal",
+            n && !t && "bg-ds-surface-alternative text-ds-text-strong",
+            !n && !t && "bg-ds-surface-strong text-ds-text-normal",
             t && "bg-ds-surface-strong text-ds-text-disabled cursor-not-allowed"
           ],
-          l
+          a
         ),
-        ...f,
-        children: d
+        ...b,
+        children: l
       }
     );
   }
 );
-S.displayName = "TabsTrigger";
-const E = o.forwardRef(
-  ({ value: e, children: t, className: d }, l) => {
-    const { value: i, baseId: c, registerPanel: f } = I(), x = i === e;
+P.displayName = "TabsTrigger";
+const S = o.forwardRef(
+  ({ value: e, children: t, className: l }, a) => {
+    const { value: f, baseId: x, registerPanel: b } = C(), u = f === e;
     return o.useEffect(() => {
-      if (x)
-        return f(e);
-    }, [x, e, f]), x ? /* @__PURE__ */ h(
+      if (u)
+        return b(e);
+    }, [u, e, b]), u ? /* @__PURE__ */ h(
       "div",
       {
-        ref: l,
+        ref: a,
         role: "tabpanel",
-        id: `${c}-panel-${e}`,
-        "aria-labelledby": `${c}-tab-${e}`,
+        id: `${x}-panel-${e}`,
+        "aria-labelledby": `${x}-tab-${e}`,
         tabIndex: 0,
-        className: T("mt-4", d),
+        className: T("mt-4", l),
         children: t
       }
     ) : null;
   }
 );
-E.displayName = "TabsContent";
+S.displayName = "TabsContent";
 export {
-  R as Tabs,
-  E as TabsContent,
-  P as TabsList,
-  S as TabsTrigger
+  A as Tabs,
+  S as TabsContent,
+  R as TabsList,
+  P as TabsTrigger
 };

package/dist/components/ui/toast.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { CautionIcon as a, NegativeIcon as m, PositiveIcon as d, ChevronRightIcon as l } from "../../lib/icons.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { ChevronRightIcon as l, CautionIcon as a, NegativeIcon as m, PositiveIcon as d } from "../../lib/icons.js";
 import { cn as u } from "../../lib/utils.js";
-import { toast as s, Toaster as p } from "sonner";
+import { Toaster as p, toast as s } from "sonner";
 function c({ icon: t, message: o }) {
   return /* @__PURE__ */ i("div", { className: "bg-ds-primitive-black flex items-center gap-1.5 p-3 rounded-ds-md w-[336px]", children: [
     t,

package/dist/components/ui/toggle.js

@@ -1,30 +1,30 @@
 "use client";
-import { jsx as n } from "react/jsx-runtime";
-import { cn as s } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import { cn as l } from "../../lib/utils.js";
 import * as p from "react";
 const b = p.forwardRef(
-  ({ checked: r, neutral: l, disabled: o, onChange: t, className: i, ...a }, e) => {
-    const m = l ? "left-[11px]" : r ? "left-[17px]" : "left-[3px]", u = o ? r ? "bg-ds-primary-blue-disabled" : "bg-ds-line-normal" : r ? "bg-ds-primary-blue-normal" : "bg-ds-line-normal";
-    return /* @__PURE__ */ n(
+  ({ checked: o, neutral: n, disabled: r, onChange: a, className: s, ...e }, i) => {
+    const m = n ? "left-[11px]" : o ? "left-[17px]" : "left-[3px]", u = r ? o ? "bg-ds-primary-blue-disabled" : "bg-ds-line-normal" : o ? "bg-ds-primary-blue-normal" : "bg-ds-line-normal";
+    return /* @__PURE__ */ t(
       "button",
       {
-        ref: e,
+        ref: i,
         type: "button",
         role: "switch",
-        "aria-checked": l ? "mixed" : r,
-        disabled: o,
-        onClick: () => !o && (t == null ? void 0 : t(!r)),
-        className: s(
+        "aria-checked": n ? "mixed" : o,
+        disabled: r,
+        onClick: () => !r && a?.(!o),
+        className: l(
           "relative inline-flex h-6 w-10 shrink-0 rounded-full border border-ds-line-normal transition-colors",
-          o && !r ? "bg-ds-surface-normal" : "bg-ds-background-default",
-          o ? "cursor-not-allowed" : "cursor-pointer",
-          i
+          r && !o ? "bg-ds-surface-normal" : "bg-ds-background-default",
+          r ? "cursor-not-allowed" : "cursor-pointer",
+          s
         ),
-        ...a,
-        children: /* @__PURE__ */ n(
+        ...e,
+        children: /* @__PURE__ */ t(
           "span",
           {
-            className: s(
+            className: l(
               "absolute top-1/2 -translate-y-1/2 h-[18px] w-[18px] rounded-full transition-all duration-200",
               m,
               u

package/dist/components/ui/use-modal.js

@@ -1,46 +1,42 @@
 "use client";
-import { jsxs as a, jsx as f } from "react/jsx-runtime";
-import * as c from "react";
-import { InformationModal as x, ActionModal as w, ContentModal as P } from "./modal.js";
-const p = c.createContext(null);
-let h = 0;
-function C() {
-  return `modal-${++h}`;
+import { jsxs as M, jsx as u } from "react/jsx-runtime";
+import * as r from "react";
+import { InformationModal as L, ActionModal as x, ContentModal as y } from "./modal.js";
+const a = r.createContext(null);
+let w = 0;
+function f() {
+  return `modal-${++w}`;
 }
-function y({ children: o }) {
-  const [b, s] = c.useState([]), i = c.useCallback((e, n) => {
-    s((r) => {
-      const t = r.find((u) => u.id === e);
-      return t == null || t.resolve(n), r.filter((u) => u.id !== e);
-    });
-  }, []), l = c.useCallback((e) => new Promise((n) => {
-    const r = C();
-    s((t) => [...t, { ...e, id: r, type: "information", resolve: n }]);
-  }), []), M = c.useCallback((e) => new Promise((n) => {
-    const r = C();
-    s((t) => [...t, { ...e, id: r, type: "action", resolve: n }]);
-  }), []), L = c.useCallback((e) => new Promise((n) => {
-    const r = C();
-    s((t) => [...t, { ...e, id: r, type: "content", resolve: n }]);
+function k({ children: c }) {
+  const [C, s] = r.useState([]), n = r.useCallback((e, i) => {
+    s((t) => (t.find((l) => l.id === e)?.resolve(i), t.filter((l) => l.id !== e)));
+  }, []), p = r.useCallback((e) => new Promise((i) => {
+    const t = f();
+    s((o) => [...o, { ...e, id: t, type: "information", resolve: i }]);
+  }), []), b = r.useCallback((e) => new Promise((i) => {
+    const t = f();
+    s((o) => [...o, { ...e, id: t, type: "action", resolve: i }]);
+  }), []), d = r.useCallback((e) => new Promise((i) => {
+    const t = f();
+    s((o) => [...o, { ...e, id: t, type: "content", resolve: i }]);
   }), []);
-  return /* @__PURE__ */ a(p.Provider, { value: { openInformationModal: l, openActionModal: M, openContentModal: L }, children: [
-    o,
-    b.map((e) => e.type === "information" ? /* @__PURE__ */ f(
-      x,
+  return /* @__PURE__ */ M(a.Provider, { value: { openInformationModal: p, openActionModal: b, openContentModal: d }, children: [
+    c,
+    C.map((e) => e.type === "information" ? /* @__PURE__ */ u(
+      L,
       {
         open: !0,
         title: e.title,
         description: e.description,
         confirmLabel: e.confirmLabel,
         onConfirm: () => {
-          var n;
-          (n = e.onConfirm) == null || n.call(e), i(e.id, !0);
+          e.onConfirm?.(), n(e.id, !0);
         },
-        onClose: () => i(e.id, !1)
+        onClose: () => n(e.id, !1)
       },
       e.id
-    ) : e.type === "action" ? /* @__PURE__ */ f(
-      w,
+    ) : e.type === "action" ? /* @__PURE__ */ u(
+      x,
       {
         open: !0,
         title: e.title,
@@ -48,18 +44,16 @@ function y({ children: o }) {
         cancelLabel: e.cancelLabel,
         confirmLabel: e.confirmLabel,
         onCancel: () => {
-          var n;
-          (n = e.onCancel) == null || n.call(e), i(e.id, !1);
+          e.onCancel?.(), n(e.id, !1);
         },
         onConfirm: () => {
-          var n;
-          (n = e.onConfirm) == null || n.call(e), i(e.id, !0);
+          e.onConfirm?.(), n(e.id, !0);
         },
-        onClose: () => i(e.id, !1)
+        onClose: () => n(e.id, !1)
       },
       e.id
-    ) : /* @__PURE__ */ f(
-      P,
+    ) : /* @__PURE__ */ u(
+      y,
       {
         open: !0,
         title: e.title,
@@ -68,27 +62,25 @@ function y({ children: o }) {
         cancelLabel: e.cancelLabel,
         confirmLabel: e.confirmLabel,
         onCancel: () => {
-          var n;
-          (n = e.onCancel) == null || n.call(e), i(e.id, !1);
+          e.onCancel?.(), n(e.id, !1);
         },
         onConfirm: () => {
-          var n;
-          (n = e.onConfirm) == null || n.call(e), i(e.id, !0);
+          e.onConfirm?.(), n(e.id, !0);
         },
-        onClose: () => i(e.id, !1),
+        onClose: () => n(e.id, !1),
         children: e.content
       },
       e.id
     ))
   ] });
 }
-function I() {
-  const o = c.useContext(p);
-  if (!o)
+function v() {
+  const c = r.useContext(a);
+  if (!c)
     throw new Error("useModal must be used within a ModalProvider");
-  return o;
+  return c;
 }
 export {
-  y as ModalProvider,
-  I as useModal
+  k as ModalProvider,
+  v as useModal
 };

package/dist/lib/use-dialog-a11y.js

@@ -1,50 +1,49 @@
 "use client";
 import * as l from "react";
-const g = [
+const p = [
   "a[href]",
   "button",
   "input",
   "select",
   "textarea",
   "[tabindex]"
-].join(","), r = [];
-let c = null;
-function b(f) {
-  return Array.from(f.querySelectorAll(g)).filter(
+].join(","), o = [];
+let s = null;
+function m(r) {
+  return Array.from(r.querySelectorAll(p)).filter(
     (n) => !n.hasAttribute("disabled") && n.getAttribute("aria-hidden") !== "true" && n.tabIndex !== -1 && // 화면에 실제로 그려진 요소만 (display:none, .sr-only 등 제외)
     n.offsetParent !== null
   );
 }
-function E(f, n) {
-  const i = l.useRef(null), a = l.useRef(n);
-  return a.current = n, l.useEffect(() => {
-    const t = i.current;
-    if (!f || !t) return;
-    const u = document.activeElement;
-    r.push(t), r.length === 1 && (c = document.body.style.overflow, document.body.style.overflow = "hidden"), (b(t)[0] ?? t).focus();
-    const d = (e) => {
-      if (r[r.length - 1] !== t) return;
+function g(r, n) {
+  const f = l.useRef(null), i = l.useRef(n);
+  return i.current = n, l.useEffect(() => {
+    const t = f.current;
+    if (!r || !t) return;
+    const b = document.activeElement;
+    o.push(t), o.length === 1 && (s = document.body.style.overflow, document.body.style.overflow = "hidden"), (m(t)[0] ?? t).focus();
+    const a = (e) => {
+      if (o[o.length - 1] !== t) return;
       if (e.key === "Escape") {
-        e.preventDefault(), a.current();
+        e.preventDefault(), i.current();
         return;
       }
       if (e.key !== "Tab") return;
-      const o = b(t);
-      if (o.length === 0) {
+      const u = m(t);
+      if (u.length === 0) {
         e.preventDefault(), t.focus();
         return;
       }
-      const y = o[0], h = o[o.length - 1], s = document.activeElement, m = !t.contains(s);
-      e.shiftKey && (s === y || m) ? (e.preventDefault(), h.focus()) : !e.shiftKey && (s === h || m) && (e.preventDefault(), y.focus());
+      const d = u[0], y = u[u.length - 1], c = document.activeElement, h = !t.contains(c);
+      e.shiftKey && (c === d || h) ? (e.preventDefault(), y.focus()) : !e.shiftKey && (c === y || h) && (e.preventDefault(), d.focus());
     };
-    return document.addEventListener("keydown", d), () => {
-      var o;
-      document.removeEventListener("keydown", d);
-      const e = r.indexOf(t);
-      e !== -1 && r.splice(e, 1), r.length === 0 && c !== null && (document.body.style.overflow = c, c = null), (o = u == null ? void 0 : u.focus) == null || o.call(u);
+    return document.addEventListener("keydown", a), () => {
+      document.removeEventListener("keydown", a);
+      const e = o.indexOf(t);
+      e !== -1 && o.splice(e, 1), o.length === 0 && s !== null && (document.body.style.overflow = s, s = null), b?.focus?.();
     };
-  }, [f]), i;
+  }, [r]), f;
 }
 export {
-  E as useDialogA11y
+  g as useDialogA11y
 };