@pylerai/design-system 1.2.3 → 2.0.0

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

@@ -1,3 +1,4 @@
+import { DsSize } from '../../lib/size';
 import * as React from "react";
 export type DropdownOption = {
     label: string;
@@ -24,8 +25,8 @@ export interface DropdownProps {
     showLabel?: boolean;
     /** 필수 입력 표시(*) */
     require?: boolean;
-    /** 크기. 기본값: "large" */
-    size?: "large" | "medium" | "small";
+    /** 크기. 기본값: "lg" */
+    size?: Extract<DsSize, "lg" | "md" | "sm">;
     disabled?: boolean;
     readOnly?: boolean;
     /** 에러 메시지. 표시 시 필드에 빨간 테두리 적용 */
@@ -47,6 +48,11 @@ export interface DropdownProps {
     /** 외부 컨테이너 className */
     wrapperClassName?: string;
     className?: string;
+    /**
+     * 라벨을 표시하지 않을 때(`showLabel={false}` 또는 `label` 미지정) 접근 가능한
+     * 이름을 지정한다. 라벨이 있으면 그쪽이 우선한다.
+     */
+    "aria-label"?: string;
 }
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
 export { Dropdown };

package/dist/components/ui/dropdown.js

@@ -0,0 +1,256 @@
+"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 a from "react";
+import { Button as q } from "./button.js";
+const k = {
+  lg: {
+    trigger: "h-11 pl-3 pr-2 gap-1.5",
+    option: "h-11 pl-3 pr-2",
+    text: "text-body-2-r"
+  },
+  md: {
+    trigger: "h-9 pl-3 pr-2 gap-1.5",
+    option: "h-9 pl-3 pr-2",
+    text: "text-body-3-r"
+  },
+  sm: {
+    trigger: "h-8 pl-3 pr-2 gap-1.5",
+    option: "h-8 pl-3 pr-2",
+    text: "text-body-3-r"
+  }
+}, se = a.forwardRef(
+  ({
+    type: o = "default",
+    options: d,
+    value: A,
+    onValueChange: w,
+    values: n,
+    onValuesChange: N,
+    placeholder: L = "선택해주세요",
+    label: g,
+    showLabel: v = !0,
+    require: M,
+    size: h = "lg",
+    disabled: x,
+    readOnly: y,
+    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, 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 e = (t) => {
+        E.current && !E.current.contains(t.target) && i(!1);
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, []), a.useEffect(() => {
+      s || D(-1);
+    }, [s]), a.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);
+    }, T = (e) => {
+      if (o === "checkbox") {
+        const t = n ?? [], l = t.includes(e) ? t.filter((p) => p !== e) : [...t, e];
+        N == null || N(l);
+      } else
+        w == null || w(e), i(!1);
+    }, Y = o === "checkbox" ? ((n == null ? void 0 : n.length) ?? 0) > 0 : !!$, Z = (e) => {
+      var l;
+      if (x || y) return;
+      const t = (p) => {
+        e.preventDefault(), s || i(!0), D(p);
+      };
+      switch (e.key) {
+        case "ArrowDown":
+          return t(s ? Math.min(c + 1, d.length - 1) : 0);
+        case "ArrowUp":
+          return t(s ? Math.max(c - 1, 0) : d.length - 1);
+        case "Home":
+          return s ? t(0) : void 0;
+        case "End":
+          return s ? t(d.length - 1) : void 0;
+        case "Enter":
+        case " ":
+          e.preventDefault(), s ? c >= 0 && T(d[c].value) : i(!0);
+          return;
+        case "Escape":
+          s && (e.preventDefault(), i(!1), (l = K.current) == null || l.focus());
+          return;
+        case "Tab":
+          i(!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 }),
+        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: [
+        /* @__PURE__ */ u(
+          "button",
+          {
+            ref: K,
+            type: "button",
+            role: "combobox",
+            "aria-expanded": s,
+            "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-invalid": b ? !0 : void 0,
+            "aria-describedby": b || I ? `${f}-description` : void 0,
+            "aria-required": M || void 0,
+            disabled: x,
+            onClick: X,
+            onKeyDown: Z,
+            className: m(
+              "flex items-center w-full rounded-lg 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,
+              G
+            ),
+            children: [
+              O && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center text-ds-icon-normal", children: O }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: m(
+                    "flex-1 min-w-0 text-left truncate font-sans",
+                    k[h].text,
+                    Y ? "text-ds-text-strong" : x ? "text-ds-text-disabled" : "text-ds-text-normal"
+                  ),
+                  children: W()
+                }
+              ),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: m(
+                    "shrink-0 flex items-center justify-center transition-transform",
+                    s && "rotate-180",
+                    x ? "text-ds-text-disabled" : "text-ds-text-normal"
+                  ),
+                  children: /* @__PURE__ */ r(_, {})
+                }
+              )
+            ]
+          }
+        ),
+        s && /* @__PURE__ */ u(
+          "ul",
+          {
+            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",
+            children: [
+              d.map((e, t) => {
+                const l = Q(e.value), p = t === c;
+                return (
+                  // 키보드 조작은 aria-activedescendant 패턴에 따라 combobox 트리거의
+                  // onKeyDown이 전담한다(옵션은 포커스를 받지 않는 것이 WAI-ARIA 권고).
+                  // 이 규칙은 그 패턴을 인식하지 못하므로 해당 줄만 해제한다.
+                  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                  /* @__PURE__ */ u(
+                    "li",
+                    {
+                      id: j(t),
+                      role: "option",
+                      "aria-selected": l,
+                      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",
+                        // 키보드 이동 위치 표시 (마우스 hover와 구분되도록 링으로)
+                        p && "ring-1 ring-inset ring-ds-primary-blue-normal"
+                      ),
+                      children: [
+                        /* @__PURE__ */ r(
+                          "span",
+                          {
+                            className: m(
+                              "flex-1 min-w-0 truncate font-sans",
+                              k[h].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, {}) })
+                      ]
+                    },
+                    e.value
+                  )
+                );
+              }),
+              z && /* @__PURE__ */ u("li", { className: "flex gap-2 pt-1", children: [
+                /* @__PURE__ */ r(
+                  q,
+                  {
+                    variant: "outlined",
+                    size: "lg",
+                    className: "flex-1",
+                    onClick: () => {
+                      R == null || R(), i(!1);
+                    },
+                    children: B
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  q,
+                  {
+                    variant: "filled",
+                    color: "blue",
+                    size: "lg",
+                    className: "flex-1",
+                    onClick: () => {
+                      S == null || S(), i(!1);
+                    },
+                    children: H
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }),
+      (b || I) && /* @__PURE__ */ r(
+        "p",
+        {
+          id: `${f}-description`,
+          className: m(
+            "text-body-4-r",
+            b ? "text-ds-primary-red-normal" : "text-ds-text-normal"
+          ),
+          children: b ?? I
+        }
+      )
+    ] });
+  }
+);
+se.displayName = "Dropdown";
+export {
+  se as Dropdown
+};

package/dist/components/ui/headline.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { cn as m } from "../../lib/utils.js";
+import { Slot as l } from "@radix-ui/react-slot";
+import { cva as p } from "class-variance-authority";
+import * as c from "react";
+const f = p(
+  "text-foreground",
+  {
+    variants: {
+      variant: {
+        "title-1-sb": "text-title-1-sb",
+        "title-1-m": "text-title-1-m",
+        "title-2-sb": "text-title-2-sb"
+      },
+      as: {
+        h1: "",
+        h2: "",
+        h3: "",
+        h4: "",
+        h5: "",
+        h6: "",
+        div: "",
+        span: "",
+        p: ""
+      }
+    },
+    defaultVariants: {
+      variant: "title-1-sb",
+      as: "h1"
+    }
+  }
+), h = c.forwardRef(
+  ({ className: e, variant: a, as: i, asChild: o, ...r }, s) => {
+    const t = i || "h1";
+    return /* @__PURE__ */ n(
+      o ? l : t,
+      {
+        className: m(f({ variant: a, as: t, className: e })),
+        ref: s,
+        ...r
+      }
+    );
+  }
+);
+h.displayName = "Headline";
+export {
+  h as Headline,
+  f as headlineVariants
+};

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

@@ -1,3 +1,4 @@
+import { DsSize } from '../../lib/size';
 import * as React from "react";
 export interface InputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 라벨 텍스트 */
@@ -14,8 +15,8 @@ export interface InputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInpu
     error?: string;
     /** 우측 아이콘. type="password"이면 기본 비밀번호 토글 아이콘 */
     rightIcon?: React.ReactNode;
-    /** 크기. 기본값: "large" */
-    size?: "large" | "medium" | "small";
+    /** 크기. 기본값: "lg" */
+    size?: Extract<DsSize, "lg" | "md" | "sm">;
     /** 외부 컨테이너 className */
     wrapperClassName?: string;
 }

package/dist/components/ui/input.js

@@ -0,0 +1,129 @@
+"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 * as o from "react";
+const I = {
+  lg: {
+    container: "h-11 px-3 gap-1.5",
+    text: "text-body-2-r"
+  },
+  md: {
+    container: "h-9 px-3 py-2 gap-1.5",
+    text: "text-body-3-r"
+  },
+  sm: {
+    container: "h-8 px-3 py-1.5 gap-1.5",
+    text: "text-body-3-r"
+  }
+}, V = o.forwardRef(
+  ({
+    label: d,
+    showLabel: c = !0,
+    require: l,
+    message: n,
+    hint: s,
+    error: t,
+    rightIcon: x,
+    size: a = "lg",
+    wrapperClassName: F,
+    className: j,
+    disabled: b,
+    readOnly: f,
+    type: u,
+    ...h
+  }, k) => {
+    const [m, R] = o.useState(!1), g = u === "password", T = g ? m ? "text" : "password" : u, p = o.useId(), y = h.id ?? p, N = `${p}-message`, v = `${p}-description`, B = [n ? N : null, t || s ? v : null].filter(Boolean).join(" ") || void 0, w = x ?? (g ? /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: () => R((C) => !C),
+        className: "flex items-center justify-center text-ds-text-normal",
+        tabIndex: -1,
+        "aria-label": m ? "비밀번호 숨기기" : "비밀번호 보기",
+        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 }),
+        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",
+            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
+          ),
+          children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: k,
+                id: y,
+                type: T,
+                "aria-invalid": t ? !0 : void 0,
+                "aria-describedby": B,
+                "aria-required": l || 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",
+                  I[a].text,
+                  j
+                ),
+                disabled: b,
+                readOnly: f,
+                ...h
+              }
+            ),
+            w && /* @__PURE__ */ e("span", { className: "shrink-0 text-ds-text-normal flex items-center", children: w })
+          ]
+        }
+      ),
+      (t || s) && /* @__PURE__ */ e(
+        "p",
+        {
+          id: v,
+          className: r(
+            "text-body-4-r",
+            t ? "text-ds-primary-red-normal" : "text-ds-text-normal"
+          ),
+          children: t ?? s
+        }
+      )
+    ] });
+  }
+);
+V.displayName = "InputField";
+const $ = o.forwardRef(
+  ({ label: d, 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(
+        "textarea",
+        {
+          ref: t,
+          id: a,
+          className: r(
+            "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",
+            n
+          ),
+          ...s
+        }
+      ) })
+    ] });
+  }
+);
+$.displayName = "TextField";
+export {
+  V as InputField,
+  $ as TextField
+};

package/dist/components/ui/label.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { cn as i } from "../../lib/utils.js";
+import { Slot as m } from "@radix-ui/react-slot";
+import { cva as p } from "class-variance-authority";
+import * as b from "react";
+const c = p(
+  "text-foreground leading-tight",
+  {
+    variants: {
+      variant: {
+        "label-1-r": "text-label-1-r"
+      },
+      as: {
+        label: "",
+        span: "",
+        div: "",
+        p: ""
+      }
+    },
+    defaultVariants: {
+      variant: "label-1-r",
+      as: "label"
+    }
+  }
+), f = b.forwardRef(
+  ({ className: t, variant: r, as: e, asChild: o, ...l }, n) => {
+    const a = e || "label";
+    return /* @__PURE__ */ s(
+      o ? m : a,
+      {
+        className: i(c({ variant: r, as: a, className: t })),
+        ref: n,
+        ...l
+      }
+    );
+  }
+);
+f.displayName = "Label";
+export {
+  f as Label,
+  c as labelVariants
+};

package/dist/components/ui/loading-bar.d.ts

@@ -1,6 +1,7 @@
+import { DsSize } from '../../lib/size';
 import * as React from "react";
 export interface LoadingBarProps {
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: Extract<DsSize, "sm" | "md" | "lg" | "xl">;
     label?: string;
     className?: string;
 }

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { cn as a } 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]"
+}, 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]"
+};
+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: [
+    /* @__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: [
+    /* @__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__ */ 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(
+    "div",
+    {
+      ref: s,
+      className: a(
+        "inline-flex items-center gap-[11px] border border-ds-line-normal bg-ds-background-default",
+        p[e],
+        t
+      ),
+      children: [
+        /* @__PURE__ */ r(i, { size: e }),
+        /* @__PURE__ */ r("span", { className: a(
+          "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 })
+      ]
+    }
+  ) : /* @__PURE__ */ r(
+    "div",
+    {
+      ref: s,
+      className: a(
+        "inline-flex items-center justify-center border border-ds-line-normal bg-ds-background-default",
+        l[e],
+        t
+      ),
+      children: /* @__PURE__ */ r(i, { size: e })
+    }
+  )
+);
+x.displayName = "LoadingBar";
+export {
+  x as LoadingBar
+};

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

@@ -1,3 +1,4 @@
+import { DsSize } from '../../lib/size';
 import * as React from "react";
 export interface InformationModalProps {
     open: boolean;
@@ -24,12 +25,12 @@ export interface ActionModalProps {
     className?: string;
 }
 declare function ActionModal({ open, title, description, cancelLabel, confirmLabel, onCancel, onConfirm, onClose, className, }: ActionModalProps): React.ReactPortal | null;
-export type ContentModalSize = "large" | "medium" | "small";
+export type ContentModalSize = Extract<DsSize, "lg" | "md" | "sm">;
 export interface ContentModalProps {
     open: boolean;
     title: React.ReactNode;
     description?: React.ReactNode;
-    /** 모달 크기. 기본값: "small" */
+    /** 모달 크기. 기본값: "sm" */
     size?: ContentModalSize;
     /** 취소 버튼 텍스트. 기본값: "닫기" */
     cancelLabel?: string;