@pylerai/design-system 2.1.0 → 2.2.0

package/README.md

@@ -86,13 +86,21 @@ module.exports = {
 };
 ```
 
-이미 `extend.colors`를 쓰고 있어 색상 맵만 필요하다면:
+이미 자체 `theme.extend`가 있어 프리셋 대신 조각만 합치려면 (`darkMode` 등 프리셋의 다른 설정은 들어오지 않습니다):
 
 ```javascript
 const { dsColors } = require("@pylerai/design-system/pyler-tailwind-colors");
+const { pylerTypographyThemeExtend } = require("@pylerai/design-system/pyler-typography");
+const { pylerShadowRadiusThemeExtend } = require("@pylerai/design-system/pyler-shadow-radius");
 
 module.exports = {
-  theme: { extend: { colors: { ds: dsColors } } },
+  theme: {
+    extend: {
+      colors: { ds: dsColors },
+      ...pylerTypographyThemeExtend, // fontFamily.sans, fontSize.text-*
+      ...pylerShadowRadiusThemeExtend, // boxShadow.ds-*, borderRadius.ds-*
+    },
+  },
 };
 ```
 
@@ -229,6 +237,23 @@ import { PYLER_TYPOGRAPHY_STYLE } from "@pylerai/design-system";
                                                        // shadow: ds-default, ds-modal
 ```
 
+Tailwind 클래스를 쓸 수 없는 자리(Chakra `radii`/`shadows` foundation, `sx`, inline style)에는 `DS_RADIUS`·`DS_SHADOW`를 넘깁니다. 값은 `var(--ds-*)` 문자열이라 `style.css`가 로드돼 있어야 합니다.
+
+```tsx
+import { DS_RADIUS, DS_SHADOW } from "@pylerai/design-system";
+
+// Chakra: theme foundation 에 등록하면 borderRadius="ds-md" 처럼 토큰 이름으로 쓸 수 있습니다
+extendTheme({
+  radii: { "ds-xs": DS_RADIUS.xs, "ds-ss": DS_RADIUS.ss, "ds-md": DS_RADIUS.md, "ds-lg": DS_RADIUS.lg },
+  shadows: { "ds-default": DS_SHADOW.default, "ds-modal": DS_SHADOW.modal },
+});
+
+<Box borderRadius="ds-md" boxShadow="ds-default" />
+<div style={{ borderRadius: DS_RADIUS.md }} />
+```
+
+앱에서 `rounded-[8px]`·`shadow-[0px_5px_16px_…]` 같은 리터럴을 새로 쓰지 않습니다. 값이 같아도 토큰이 바뀌면 리터럴만 남아 드리프트합니다.
+
 Dim은 `var(--ds-dim-default)`로 제공됩니다. Storybook **Foundation → Radius / Shadow / Dim** 참고.
 
 ## ♿ 접근성

package/dist/components/ui/badge.js

@@ -23,21 +23,21 @@ const b = {
   md: { padding: "px-2 pt-[5px] pb-[3px]", text: "text-body-3-m" },
   sm: { padding: "px-1 pt-[3px] pb-[1px]", text: "text-label-1-r" }
 }, g = l.forwardRef(
-  ({ color: r = "normal", size: e = "md", className: t, children: o, ...d }, a) => {
-    const { border: s, text: n } = b[r], { padding: p, text: m } = c[e];
+  ({ color: r = "normal", size: e = "md", className: t, children: o, ...s }, d) => {
+    const { border: a, text: n } = b[r], { padding: p, text: m } = c[e];
     return /* @__PURE__ */ x(
       "span",
       {
-        ref: a,
+        ref: d,
         className: i(
-          "inline-flex items-center justify-center border rounded-[4px] bg-ds-background-default whitespace-nowrap",
-          s,
+          "inline-flex items-center justify-center border rounded-ds-ss bg-ds-background-default whitespace-nowrap",
+          a,
           p,
           n,
           m,
           t
         ),
-        ...d,
+        ...s,
         children: o
       }
     );

package/dist/components/ui/button.js

@@ -9,10 +9,10 @@ const v = R(
   {
     variants: {
       variant: {
-        filled: "rounded-lg",
-        outlined: "rounded-lg border border-ds-line-normal bg-ds-background-default text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:bg-ds-surface-normal disabled:text-ds-text-disabled",
-        text: "rounded-lg bg-transparent text-ds-text-strong disabled:text-ds-text-disabled",
-        icon: "rounded-lg",
+        filled: "rounded-ds-md",
+        outlined: "rounded-ds-md border border-ds-line-normal bg-ds-background-default text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:bg-ds-surface-normal disabled:text-ds-text-disabled",
+        text: "rounded-ds-md bg-transparent text-ds-text-strong disabled:text-ds-text-disabled",
+        icon: "rounded-ds-md",
         indicator: "rounded-full inline-block"
       },
       color: {
@@ -116,12 +116,12 @@ const v = R(
     asChild: c = !1,
     shape: u = "square",
     iconStyle: x = "filled",
-    leftIcon: t,
-    rightIcon: d,
+    leftIcon: d,
+    rightIcon: t,
     children: b,
     ...h
   }, y) => {
-    const f = c ? B : "button", N = e === "icon" && x === "outlined" ? "bg-ds-background-default border border-ds-line-normal text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:text-ds-text-disabled" : void 0, l = !!t, p = !!d, z = e !== "icon" && e !== "indicator" && (l || p) ? (() => {
+    const f = c ? B : "button", N = e === "icon" && x === "outlined" ? "bg-ds-background-default border border-ds-line-normal text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:text-ds-text-disabled" : void 0, l = !!d, p = !!t, z = e !== "icon" && e !== "indicator" && (l || p) ? (() => {
       const n = r ?? "md", o = {
         sm: { leftOnly: "pl-1 pr-2", rightOnly: "pl-2 pr-1", both: "px-1" },
         md: { leftOnly: "pl-2 pr-3", rightOnly: "pl-3 pr-2", both: "px-2" },
@@ -143,9 +143,9 @@ const v = R(
         ref: y,
         ...h,
         children: c ? b : /* @__PURE__ */ O(k, { children: [
-          t && /* @__PURE__ */ a("span", { className: "shrink-0", children: t }),
+          d && /* @__PURE__ */ a("span", { className: "shrink-0", children: d }),
           b,
-          d && /* @__PURE__ */ a("span", { className: "shrink-0", children: d })
+          t && /* @__PURE__ */ a("span", { className: "shrink-0", children: t })
         ] })
       }
     );

package/dist/components/ui/chip.js

@@ -4,20 +4,20 @@ import { XIcon as b } from "../../lib/icons.js";
 import { cn as n } from "../../lib/utils.js";
 import * as f from "react";
 const h = f.forwardRef(
-  ({ size: l = "md", selected: i = !1, disabled: e = !1, onRemove: a, onClick: r, children: p, className: d }, c) => {
+  ({ size: l = "md", selected: i = !1, disabled: e = !1, onRemove: a, onClick: r, children: d, className: p }, c) => {
     const s = l === "md", t = !!a, u = r ? "button" : "span";
     return /* @__PURE__ */ x(
       "div",
       {
         ref: c,
         className: n(
-          "inline-flex items-center border rounded-[4px] bg-ds-background-default select-none transition-colors",
+          "inline-flex items-center border rounded-ds-ss bg-ds-background-default select-none transition-colors",
           // 좌우 여백은 컨테이너가 아니라 본문(클릭 대상)이 갖는다.
           // 컨테이너에 두면 여백 영역이 클릭되지 않는 죽은 공간이 된다.
           s ? t ? "h-8 pr-1" : "h-8" : t ? "h-[26px] pr-0.5" : "h-[26px]",
           s ? "text-body-3-r" : "text-body-4-r",
           e ? "border-ds-line-normal text-ds-text-disabled cursor-not-allowed" : i ? "border-ds-primary-blue-normal text-ds-text-strong cursor-pointer" : "border-ds-line-normal text-ds-text-strong cursor-pointer hover:border-ds-line-strong",
-          d
+          p
         ),
         children: [
           /* @__PURE__ */ o(
@@ -36,7 +36,7 @@ const h = f.forwardRef(
                 r && !e && "cursor-pointer",
                 r && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ds-primary-blue-normal rounded-[3px]"
               ),
-              children: p
+              children: d
             }
           ),
           t && /* @__PURE__ */ o(

package/dist/components/ui/dropdown.js

@@ -2,7 +2,7 @@
 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 a from "react";
+import * as l from "react";
 import { Button as q } from "./button.js";
 const k = {
   lg: {
@@ -20,19 +20,19 @@ const k = {
     option: "h-8 pl-3 pr-2",
     text: "text-body-3-r"
   }
-}, se = a.forwardRef(
+}, se = l.forwardRef(
   ({
-    type: o = "default",
-    options: d,
+    type: i = "default",
+    options: o,
     value: A,
     onValueChange: w,
     values: n,
     onValuesChange: N,
     placeholder: L = "선택해주세요",
-    label: g,
+    label: h,
     showLabel: v = !0,
     require: M,
-    size: h = "lg",
+    size: g = "lg",
     disabled: x,
     readOnly: y,
     error: b,
@@ -47,58 +47,58 @@ const k = {
     className: G,
     "aria-label": J
   }, P) => {
-    const [s, i] = a.useState(!1), [c, D] = a.useState(-1), E = a.useRef(null), U = a.useRef(null), K = a.useRef(null), f = a.useId(), j = (e) => `${f}-option-${e}`;
-    a.useEffect(() => {
+    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) && i(!1);
+        E.current && !E.current.contains(t.target) && d(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, []), a.useEffect(() => {
+    }, []), l.useEffect(() => {
       s || D(-1);
-    }, [s]), a.useEffect(() => {
+    }, [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) => o === "checkbox" ? (n == null ? void 0 : n.includes(e)) ?? !1 : e === A, $ = d.find((e) => e.value === A), W = () => o === "checkbox" ? !n || n.length === 0 ? L : d.filter((t) => n.includes(t.value)).map((t) => t.label).join(", ") : $ ? $.label : L, X = () => {
-      x || y || i((e) => !e);
+    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 (o === "checkbox") {
-        const t = n ?? [], l = t.includes(e) ? t.filter((p) => p !== e) : [...t, e];
-        N == null || N(l);
+      if (i === "checkbox") {
+        const t = n ?? [], a = t.includes(e) ? t.filter((p) => p !== e) : [...t, e];
+        N == null || N(a);
       } else
-        w == null || w(e), i(!1);
-    }, Y = o === "checkbox" ? ((n == null ? void 0 : n.length) ?? 0) > 0 : !!$, Z = (e) => {
-      var l;
+        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 || i(!0), D(p);
+        e.preventDefault(), s || d(!0), D(p);
       };
       switch (e.key) {
         case "ArrowDown":
-          return t(s ? Math.min(c + 1, d.length - 1) : 0);
+          return t(s ? Math.min(c + 1, o.length - 1) : 0);
         case "ArrowUp":
-          return t(s ? Math.max(c - 1, 0) : d.length - 1);
+          return t(s ? Math.max(c - 1, 0) : o.length - 1);
         case "Home":
           return s ? t(0) : void 0;
         case "End":
-          return s ? t(d.length - 1) : void 0;
+          return s ? t(o.length - 1) : void 0;
         case "Enter":
         case " ":
-          e.preventDefault(), s ? c >= 0 && T(d[c].value) : i(!0);
+          e.preventDefault(), s ? c >= 0 && T(o[c].value) : d(!0);
           return;
         case "Escape":
-          s && (e.preventDefault(), i(!1), (l = K.current) == null || l.focus());
+          s && (e.preventDefault(), d(!1), (a = K.current) == null || a.focus());
           return;
         case "Tab":
-          i(!1);
+          d(!1);
           return;
         default:
           return;
       }
     };
     return /* @__PURE__ */ u("div", { ref: P, className: m("flex flex-col gap-2", F), children: [
-      v && g && /* @__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: g }),
+      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__ */ u("div", { ref: E, className: "relative", children: [
@@ -112,8 +112,8 @@ const k = {
             "aria-haspopup": "listbox",
             "aria-controls": s ? f : void 0,
             "aria-activedescendant": s && c >= 0 ? j(c) : void 0,
-            "aria-labelledby": v && g ? `${f}-label` : void 0,
-            "aria-label": v && g ? void 0 : J,
+            "aria-labelledby": v && h ? `${f}-label` : void 0,
+            "aria-label": v && h ? void 0 : J,
             "aria-invalid": b ? !0 : void 0,
             "aria-describedby": b || I ? `${f}-description` : void 0,
             "aria-required": M || void 0,
@@ -121,9 +121,9 @@ const k = {
             onClick: X,
             onKeyDown: Z,
             className: m(
-              "flex items-center w-full rounded-lg border transition-colors",
+              "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",
-              k[h].trigger,
+              k[g].trigger,
               G
             ),
             children: [
@@ -133,7 +133,7 @@ const k = {
                 {
                   className: m(
                     "flex-1 min-w-0 text-left truncate font-sans",
-                    k[h].text,
+                    k[g].text,
                     Y ? "text-ds-text-strong" : x ? "text-ds-text-disabled" : "text-ds-text-normal"
                   ),
                   children: W()
@@ -159,11 +159,11 @@ const k = {
             ref: U,
             id: f,
             role: "listbox",
-            "aria-multiselectable": o === "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-lg p-1 shadow-ds-default",
+            "aria-multiselectable": i === "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",
             children: [
-              d.map((e, t) => {
-                const l = Q(e.value), p = t === c;
+              o.map((e, t) => {
+                const a = Q(e.value), p = t === c;
                 return (
                   // 키보드 조작은 aria-activedescendant 패턴에 따라 combobox 트리거의
                   // onKeyDown이 전담한다(옵션은 포커스를 받지 않는 것이 WAI-ARIA 권고).
@@ -174,13 +174,13 @@ const k = {
                     {
                       id: j(t),
                       role: "option",
-                      "aria-selected": l,
+                      "aria-selected": a,
                       onClick: () => T(e.value),
                       onMouseEnter: () => D(t),
                       className: m(
-                        "flex items-center rounded-lg cursor-pointer gap-1.5 transition-colors",
-                        k[h].option,
-                        l ? "bg-ds-surface-normal" : "bg-ds-background-default hover:bg-ds-surface-normal",
+                        "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"
                       ),
@@ -190,15 +190,15 @@ const k = {
                           {
                             className: m(
                               "flex-1 min-w-0 truncate font-sans",
-                              k[h].text,
+                              k[g].text,
                               "text-ds-text-strong"
                             ),
                             children: e.label
                           }
                         ),
-                        o === "default" && l && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center text-ds-text-strong", children: /* @__PURE__ */ r(C, {}) }),
-                        o === "checkbox" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ r(V, {}) : /* @__PURE__ */ r(ee, {}) }),
-                        o === "radio" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ r(te, {}) : /* @__PURE__ */ r(re, {}) })
+                        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, {}) })
                       ]
                     },
                     e.value
@@ -213,7 +213,7 @@ const k = {
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      R == null || R(), i(!1);
+                      R == null || R(), d(!1);
                     },
                     children: B
                   }
@@ -226,7 +226,7 @@ const k = {
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      S == null || S(), i(!1);
+                      S == null || S(), d(!1);
                     },
                     children: H
                   }

package/dist/components/ui/input.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { EyeOnIcon as E, EyeOffIcon as P } from "../../lib/icons.js";
-import { cn as r } from "../../lib/utils.js";
+import { cn as d } from "../../lib/utils.js";
 import * as o from "react";
 const I = {
   lg: {
@@ -18,7 +18,7 @@ const I = {
   }
 }, V = o.forwardRef(
   ({
-    label: d,
+    label: r,
     showLabel: c = !0,
     require: l,
     message: n,
@@ -44,17 +44,17 @@ const I = {
         children: m ? /* @__PURE__ */ e(E, {}) : /* @__PURE__ */ e(P, {})
       }
     ) : null);
-    return /* @__PURE__ */ i("div", { className: r("flex flex-col gap-2", F), children: [
-      c && d && /* @__PURE__ */ i("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
-        /* @__PURE__ */ e("label", { htmlFor: y, className: "text-body-2-r text-ds-text-strong", children: d }),
+    return /* @__PURE__ */ i("div", { className: d("flex flex-col gap-2", F), children: [
+      c && r && /* @__PURE__ */ i("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
+        /* @__PURE__ */ e("label", { htmlFor: y, className: "text-body-2-r text-ds-text-strong", children: r }),
         l && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "text-body-2-r text-ds-primary-red-normal", children: "*" })
       ] }),
       n && /* @__PURE__ */ e("p", { id: N, className: "text-body-4-r text-ds-text-strong", children: n }),
       /* @__PURE__ */ i(
         "div",
         {
-          className: r(
-            "flex items-center overflow-hidden bg-ds-background-default border rounded-lg transition-colors",
+          className: d(
+            "flex items-center overflow-hidden bg-ds-background-default border rounded-ds-md transition-colors",
             t ? "border-ds-primary-red-normal" : "border-ds-line-normal hover:border-ds-line-strong focus-within:border-ds-primary-blue-normal",
             (b || f) && "bg-ds-surface-normal",
             I[a].container
@@ -69,7 +69,7 @@ const I = {
                 "aria-invalid": t ? !0 : void 0,
                 "aria-describedby": B,
                 "aria-required": l || void 0,
-                className: r(
+                className: d(
                   "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",
@@ -89,7 +89,7 @@ const I = {
         "p",
         {
           id: v,
-          className: r(
+          className: d(
             "text-body-4-r",
             t ? "text-ds-primary-red-normal" : "text-ds-text-normal"
           ),
@@ -101,16 +101,16 @@ const I = {
 );
 V.displayName = "InputField";
 const $ = o.forwardRef(
-  ({ label: d, showLabel: c = !0, wrapperClassName: l, className: n, ...s }, t) => {
+  ({ label: r, showLabel: c = !0, wrapperClassName: l, className: n, ...s }, t) => {
     const x = o.useId(), a = s.id ?? x;
-    return /* @__PURE__ */ i("div", { className: r("flex flex-col gap-2", l), children: [
-      c && d && /* @__PURE__ */ e("label", { htmlFor: a, className: "text-body-2-r text-ds-text-strong", children: d }),
-      /* @__PURE__ */ e("div", { className: "overflow-hidden border border-ds-line-normal bg-ds-background-default rounded-lg p-3 hover:border-ds-line-strong focus-within:border-ds-primary-blue-normal transition-colors", children: /* @__PURE__ */ e(
+    return /* @__PURE__ */ i("div", { className: d("flex flex-col gap-2", l), children: [
+      c && r && /* @__PURE__ */ e("label", { htmlFor: a, className: "text-body-2-r text-ds-text-strong", children: r }),
+      /* @__PURE__ */ e("div", { className: "overflow-hidden border border-ds-line-normal bg-ds-background-default rounded-ds-md p-3 hover:border-ds-line-strong focus-within:border-ds-primary-blue-normal transition-colors", children: /* @__PURE__ */ e(
         "textarea",
         {
           ref: t,
           id: a,
-          className: r(
+          className: d(
             "w-full min-h-[114px] resize-none bg-transparent outline-none font-sans",
             "text-body-3-r text-ds-text-strong placeholder:text-ds-text-normal",
             "disabled:text-ds-text-disabled",

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으로"
         }
       )