@pylerai/design-system 2.0.0 → 2.2.0

package/dist/components/ui/loading-bar.js

@@ -1,64 +1,64 @@
 "use client";
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { cn as a } from "../../lib/utils.js";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { cn as n } from "../../lib/utils.js";
 import * as o from "react";
 const l = {
-  xl: "size-[50px] rounded-[8px]",
-  lg: "size-[42px] rounded-[8px]",
-  md: "size-[38px] rounded-[8px]",
-  sm: "size-[34px] rounded-[4px]"
+  xl: "size-[50px] rounded-ds-md",
+  lg: "size-[42px] rounded-ds-md",
+  md: "size-[38px] rounded-ds-md",
+  sm: "size-[34px] rounded-ds-ss"
 }, p = {
-  xl: "h-[50px] rounded-[8px] pl-[12px] pr-[18px]",
-  lg: "h-[42px] rounded-[8px] pl-[10px] pr-[14px]",
-  md: "h-[38px] rounded-[8px] pl-[8px] pr-[12px]"
+  xl: "h-[50px] rounded-ds-md pl-[12px] pr-[18px]",
+  lg: "h-[42px] rounded-ds-md pl-[10px] pr-[14px]",
+  md: "h-[38px] rounded-ds-md pl-[8px] pr-[12px]"
 };
-function i({ size: e, className: n }) {
-  const t = a("animate-spin shrink-0", n);
-  return e === "sm" ? /* @__PURE__ */ d("svg", { className: t, width: "12", height: "12", viewBox: "0 0 10 10.0649", fill: "none", "aria-hidden": "true", children: [
+function i({ size: e, className: t }) {
+  const d = n("animate-spin shrink-0", t);
+  return e === "sm" ? /* @__PURE__ */ s("svg", { className: d, width: "12", height: "12", viewBox: "0 0 10 10.0649", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ r("path", { opacity: "0.1", d: "M5 0C7.76132 0 9.99983 2.2403 10 5.00391C10 7.76766 7.76142 10.0088 5 10.0088C2.23858 10.0088 0 7.76766 0 5.00391C0.000166843 2.2403 2.23868 0 5 0ZM5 1.50098C3.06713 1.50098 1.5002 3.06946 1.5 5.00391C1.5 6.93853 3.06701 8.50683 5 8.50684C6.933 8.50684 8.5 6.93853 8.5 5.00391C8.4998 3.06945 6.93287 1.50098 5 1.50098Z", className: "fill-ds-text-strong" }),
     /* @__PURE__ */ r("path", { d: "M8.00001 8.00681C6.75001 9.25786 5.00001 9.75829 3.00001 8.75744", className: "stroke-ds-primary-blue-normal", strokeWidth: "1.55", strokeLinecap: "round" })
-  ] }) : e === "xl" ? /* @__PURE__ */ d("svg", { className: t, width: "28", height: "28", viewBox: "0 0 23.333 23.7432", fill: "none", "aria-hidden": "true", children: [
+  ] }) : e === "xl" ? /* @__PURE__ */ s("svg", { className: d, width: "28", height: "28", viewBox: "0 0 23.333 23.7432", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ r("path", { opacity: "0.1", d: "M11.667 0C18.1102 0.000176413 23.333 5.22811 23.333 11.6768C23.3329 18.1253 18.1101 23.3524 11.667 23.3525C5.22376 23.3525 0.000138013 18.1254 0 11.6768C0 5.228 5.22367 0 11.667 0ZM11.667 3.50293C7.15667 3.50293 3.5 7.16263 3.5 11.6768C3.50005 16.1908 7.1567 19.8506 11.667 19.8506C16.1771 19.8504 19.833 16.1907 19.833 11.6768C19.833 7.16275 16.1772 3.50312 11.667 3.50293Z", className: "fill-ds-text-strong" }),
     /* @__PURE__ */ r("path", { d: "M18.6666 18.6826C15.75 21.6017 11.6666 22.7694 6.99998 20.4341", className: "stroke-ds-primary-blue-normal", strokeWidth: "4.13333", strokeLinecap: "round" })
-  ] }) : /* @__PURE__ */ d("svg", { className: t, width: "20", height: "20", viewBox: "0 0 16.667 16.7749", fill: "none", "aria-hidden": "true", children: [
+  ] }) : /* @__PURE__ */ s("svg", { className: d, width: "20", height: "20", viewBox: "0 0 16.667 16.7749", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ r("path", { opacity: "0.1", d: "M8.33301 0C12.9354 0 16.667 3.73457 16.667 8.34082C16.6667 12.9469 12.9352 16.6807 8.33301 16.6807C3.73094 16.6805 0.000249233 12.9468 0 8.34082C0 3.73468 3.73078 0.0001759 8.33301 0ZM8.33301 2.50195C5.11149 2.50212 2.5 5.11655 2.5 8.34082C2.50019 11.5649 5.1116 14.1785 8.33301 14.1787C11.5546 14.1787 14.1668 11.565 14.167 8.34082C14.167 5.11644 11.5547 2.50195 8.33301 2.50195Z", className: "fill-ds-text-strong" }),
     /* @__PURE__ */ r("path", { d: "M13.3333 13.3447C11.25 15.4298 8.33331 16.2638 4.99998 14.5957", className: "stroke-ds-primary-blue-normal", strokeWidth: "2.58333", strokeLinecap: "round" })
   ] });
 }
-const x = o.forwardRef(
-  ({ size: e = "xl", label: n, className: t }, s) => !!n && e !== "sm" ? /* @__PURE__ */ d(
+const c = o.forwardRef(
+  ({ size: e = "xl", label: t, className: d }, a) => !!t && e !== "sm" ? /* @__PURE__ */ s(
     "div",
     {
-      ref: s,
-      className: a(
+      ref: a,
+      className: n(
         "inline-flex items-center gap-[11px] border border-ds-line-normal bg-ds-background-default",
         p[e],
-        t
+        d
       ),
       children: [
         /* @__PURE__ */ r(i, { size: e }),
-        /* @__PURE__ */ r("span", { className: a(
+        /* @__PURE__ */ r("span", { className: n(
           "shrink-0 text-ds-text-strong whitespace-nowrap",
           e === "xl" && "text-body-2-r",
           e === "lg" && "text-body-3-r",
           e === "md" && "text-body-4-r"
-        ), children: n })
+        ), children: t })
       ]
     }
   ) : /* @__PURE__ */ r(
     "div",
     {
-      ref: s,
-      className: a(
+      ref: a,
+      className: n(
         "inline-flex items-center justify-center border border-ds-line-normal bg-ds-background-default",
         l[e],
-        t
+        d
       ),
       children: /* @__PURE__ */ r(i, { size: e })
     }
   )
 );
-x.displayName = "LoadingBar";
+c.displayName = "LoadingBar";
 export {
-  x as LoadingBar
+  c as LoadingBar
 };

package/dist/components/ui/pagination.js

@@ -1,28 +1,28 @@
 "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 { cn as a } from "../../lib/utils.js";
 import * as j from "react";
 const A = j.forwardRef(
   ({
     page: e,
-    totalPages: a,
+    totalPages: d,
     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
+    const o = e <= 1, i = e >= d, c = Math.floor((e - 1) / 5) * 5 + 1, y = Array.from(
+      { length: Math.min(5, d - c + 1) },
+      (n, k) => c + 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: [
+    return /* @__PURE__ */ b("div", { ref: h, className: a("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",
+          className: a(
+            "flex h-9 items-center overflow-hidden px-4 rounded-ds-md bg-ds-background-default",
             f && "border border-ds-line-normal"
           ),
           children: /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
@@ -55,7 +55,7 @@ const A = j.forwardRef(
                 "aria-label": `${n} 페이지`,
                 "aria-current": n === e ? "page" : void 0,
                 onClick: () => r(n),
-                className: c(
+                className: a(
                   "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"
                 ),
@@ -80,7 +80,7 @@ const A = j.forwardRef(
                 type: "button",
                 "aria-label": "마지막 페이지",
                 disabled: i,
-                onClick: () => !i && r(a),
+                onClick: () => !i && r(d),
                 className: i ? l : s,
                 children: /* @__PURE__ */ t(w, {})
               }
@@ -93,7 +93,7 @@ const A = j.forwardRef(
         {
           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",
+          className: "h-9 px-3.5 rounded-ds-md 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으로"
         }
       )

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

@@ -18,10 +18,10 @@ const f = {
   }
 }, k = b.forwardRef(
   ({
-    label: a,
+    label: d,
     showLabel: h = !0,
     showIcon: u = !0,
-    size: d = "lg",
+    size: a = "lg",
     error: e,
     hint: s,
     onClear: o,
@@ -31,17 +31,17 @@ const f = {
     value: i,
     ...l
   }, N) => {
-    const I = !n && !!o && !!i, c = b.useId(), x = l.id ?? c, m = `${c}-description`;
+    const I = !n && !!o && !!i, c = b.useId(), m = l.id ?? c, x = `${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 }),
+      h && d && /* @__PURE__ */ t("label", { htmlFor: m, className: "text-body-2-r text-ds-text-strong", children: d }),
       /* @__PURE__ */ p(
         "div",
         {
           className: r(
-            "flex items-center overflow-hidden bg-ds-background-default border rounded-lg transition-colors",
+            "flex items-center overflow-hidden bg-ds-background-default border rounded-ds-md 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
+            f[a].container
           ),
           children: [
             u && /* @__PURE__ */ t(v, { className: "shrink-0 text-ds-text-normal" }),
@@ -49,15 +49,15 @@ const f = {
               "input",
               {
                 ref: N,
-                id: x,
+                id: m,
                 value: i,
                 "aria-invalid": e ? !0 : void 0,
-                "aria-describedby": e || s ? m : void 0,
+                "aria-describedby": e || s ? x : 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,
+                  f[a].text,
                   y
                 ),
                 disabled: n,
@@ -81,7 +81,7 @@ const f = {
       (e || s) && /* @__PURE__ */ t(
         "p",
         {
-          id: m,
+          id: x,
           className: r(
             "text-body-4-r",
             e ? "text-ds-primary-red-normal" : "text-ds-text-normal"

package/dist/components/ui/tabs.js

@@ -49,7 +49,7 @@ const P = o.forwardRef(
           "flex items-center",
           l === "underline" && "gap-5",
           l === "outline" && "gap-1",
-          l === "round" && "bg-ds-surface-strong p-1 rounded-lg",
+          l === "round" && "bg-ds-surface-strong p-1 rounded-ds-md",
           t
         ),
         children: e
@@ -94,7 +94,7 @@ const S = o.forwardRef(
             t && "text-ds-text-disabled cursor-not-allowed"
           ],
           b === "box" && [
-            "h-10 px-3 rounded-lg text-body-3-m",
+            "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",
             t && "bg-ds-background-default text-ds-text-disabled cursor-not-allowed"

package/dist/components/ui/tips.js

@@ -1,25 +1,25 @@
 "use client";
-import { jsx as p } from "react/jsx-runtime";
-import { cn as s } from "../../lib/utils.js";
-import * as a from "react";
-const x = a.forwardRef(
-  ({ color: e = "white", size: t = "md", className: r, children: d, ...o }, i) => /* @__PURE__ */ p(
+import { jsx as i } from "react/jsx-runtime";
+import { cn as a } from "../../lib/utils.js";
+import * as l from "react";
+const m = l.forwardRef(
+  ({ color: e = "white", size: t = "md", className: r, children: d, ...s }, o) => /* @__PURE__ */ i(
     "div",
     {
-      ref: i,
-      className: s(
-        "inline-flex flex-col items-start justify-center rounded-[8px] shadow-[0px_5px_16px_0px_rgba(0,0,0,0.05)]",
+      ref: o,
+      className: a(
+        "inline-flex flex-col items-start justify-center rounded-ds-md shadow-ds-default",
         t === "md" ? "px-2.5 py-2" : "px-2 py-1.5",
         e === "black" ? "bg-ds-primitive-black text-white" : "bg-ds-background-default border border-ds-line-normal text-ds-text-strong",
         t === "md" ? "text-body-4-r" : "text-label-1-r",
         r
       ),
-      ...o,
+      ...s,
       children: d
     }
   )
 );
-x.displayName = "Tips";
+m.displayName = "Tips";
 export {
-  x as Tips
+  m as Tips
 };

package/dist/components/ui/toast.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { CautionIcon as a, NegativeIcon as m, PositiveIcon as l, ChevronRightIcon as p } from "../../lib/icons.js";
+import { CautionIcon as a, NegativeIcon as m, PositiveIcon as d, ChevronRightIcon as l } from "../../lib/icons.js";
 import { cn as u } from "../../lib/utils.js";
-import { toast as s, Toaster as x } from "sonner";
-function r({ icon: t, message: o }) {
-  return /* @__PURE__ */ i("div", { className: "bg-ds-primitive-black flex items-center gap-1.5 p-3 rounded-lg w-[336px]", children: [
+import { toast as s, Toaster as p } 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,
     /* @__PURE__ */ e("p", { className: "text-white text-body-2-r flex-1 min-w-0", children: o })
   ] });
 }
-function f({ position: t = "bottom-center" }) {
+function w({ position: t = "bottom-center" }) {
   return /* @__PURE__ */ e(
-    x,
+    p,
     {
       position: t,
       toastOptions: { unstyled: !0, classNames: { toast: "!p-0 !bg-transparent !shadow-none !border-none" } }
@@ -19,16 +19,16 @@ function f({ position: t = "bottom-center" }) {
   );
 }
 const g = {
-  success: (t, o) => s.custom(() => /* @__PURE__ */ e(r, { icon: /* @__PURE__ */ e(l, {}), message: t }), o),
-  error: (t, o) => s.custom(() => /* @__PURE__ */ e(r, { icon: /* @__PURE__ */ e(m, {}), message: t }), o),
-  caution: (t, o) => s.custom(() => /* @__PURE__ */ e(r, { icon: /* @__PURE__ */ e(a, {}), message: t }), o)
+  success: (t, o) => s.custom(() => /* @__PURE__ */ e(c, { icon: /* @__PURE__ */ e(d, {}), message: t }), o),
+  error: (t, o) => s.custom(() => /* @__PURE__ */ e(c, { icon: /* @__PURE__ */ e(m, {}), message: t }), o),
+  caution: (t, o) => s.custom(() => /* @__PURE__ */ e(c, { icon: /* @__PURE__ */ e(a, {}), message: t }), o)
 };
-function c({
+function r({
   icon: t,
   message: o,
   action: n
 }) {
-  return /* @__PURE__ */ i("div", { className: "bg-ds-primitive-black flex items-center gap-1.5 px-3 py-4 rounded-lg w-[336px] shadow-[0px_5px_16px_0px_rgba(0,0,0,0.05)]", children: [
+  return /* @__PURE__ */ i("div", { className: "bg-ds-primitive-black flex items-center gap-1.5 px-3 py-4 rounded-ds-md w-[336px] shadow-ds-default", children: [
     t,
     /* @__PURE__ */ e("p", { className: "text-white text-body-2-r flex-1 min-w-0", children: o }),
     n && /* @__PURE__ */ i(
@@ -42,7 +42,7 @@ function c({
         ),
         children: [
           n.label,
-          n.withIcon && /* @__PURE__ */ e(p, {})
+          n.withIcon && /* @__PURE__ */ e(l, {})
         ]
       }
     )
@@ -50,21 +50,21 @@ function c({
 }
 const k = {
   success: (t, o, n) => s.custom(
-    () => /* @__PURE__ */ e(c, { icon: /* @__PURE__ */ e(l, {}), message: t, action: o }),
+    () => /* @__PURE__ */ e(r, { icon: /* @__PURE__ */ e(d, {}), message: t, action: o }),
     n
   ),
   error: (t, o, n) => s.custom(
-    () => /* @__PURE__ */ e(c, { icon: /* @__PURE__ */ e(m, {}), message: t, action: o }),
+    () => /* @__PURE__ */ e(r, { icon: /* @__PURE__ */ e(m, {}), message: t, action: o }),
     n
   ),
   caution: (t, o, n) => s.custom(
-    () => /* @__PURE__ */ e(c, { icon: /* @__PURE__ */ e(a, {}), message: t, action: o }),
+    () => /* @__PURE__ */ e(r, { icon: /* @__PURE__ */ e(a, {}), message: t, action: o }),
     n
   )
 };
 export {
-  c as SnackbarContent,
-  f as Toaster,
+  r as SnackbarContent,
+  w as Toaster,
   k as snackbar,
   g as toast
 };